/* header */
#header{position: sticky; z-index: 99; top: 0; left: 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.5); background-color: #fff;
    transition: all .3s;
}
#header .inner{display: flex; align-items: center; justify-content: space-between; height: 90rem;}
#header h1{height: 80%;}
#header h1 img{height: 100%;}
#header ul{display: inline-flex; align-items: center; gap: 150rem;}
#header ul li a{font-size: 16rem; font-weight: 500;}
#header ul li.m{display: none;}



#mNav{position: fixed; top: 0; right: -100%; opacity: 0; width: 100%; height: 100%; z-index: 999; background-color: #fff; overflow-y: auto; padding: var(--inner-padding); max-width: 500rem;
    transition: all .5s;
}
#mNav header{display: flex; align-items: center; justify-content: space-between;}
#mNav header h1{margin-bottom: 20rem;}
#mNav header h1 img{height: 40rem;}
#mNav header button img{height: 35rem; opacity: 0.5;}
#mNav ul{font-size: 18rem;}
#mNav ul > li{padding: 15rem 0;}
#mNav ul > li + li{border-top: 1px solid #ddd; }
#mNav ul > li > a{color: #333; font-size: 0.9em;}
#mNav ul .depths{margin-top: 10rem;}
#mNav ul .depths li a{display: block; padding: 10rem 0;}

#mNav.on{right: 0; opacity: 1;}


.policy{padding: 20rem;}
.policy .title{font-size: 20rem; font-weight: 500; text-align: center; margin-bottom: 50rem;}
.policy .contents{min-height: 50vh; padding-bottom: 50rem; font-size: 14rem; line-height: 1.6;}
.policy .contents *{max-width: 100%;}

@media (max-width: 1600px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 900px) {
    #header ul li{display: none;}
    #header ul li.m{display: block;}
}

@media (max-width: 450px) {

}



/* footer */
#footer .top{background-color: #fff;}
#footer .top .inner{height: 50rem; display: flex; align-items: center; justify-content: space-between;}
#footer .top .linkes{display: flex; align-items: center; gap: 20rem;}
#footer .top .linkes a{font-size: 15rem; font-weight: 500;}
#footer .top .sns{display: flex; gap: 15rem;}
#footer .top .sns img{height: 30rem;}
#footer .bottom{font-size: 14rem; background-color: #1A1A1A; color: #fff; padding: 45rem 0;}
#footer .bottom .inner{display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;}
#footer .bottom .logo{margin-bottom: 20rem;}
#footer .bottom .info{line-height: 2;}
#footer .bottom .info span + span::before{content: "|"; margin: 0 10rem;}
#footer .bottom .info .copyright{color: #bbb; margin-top: 10px;}
#footer .bottom .cs{display: flex; align-items: flex-start; gap: 45rem;}
#footer .bottom .cs .tel dt{font-size: 1.2em;}
#footer .bottom .cs .tel dd{font-weight: 700; font-size: 1.5em;}
#footer .bottom .cs .time{color: #bbb}

@media (max-width: 1600px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 900px) {

}

@media (max-width: 450px) {

}

/* 
 * 공통
*/




/* 
 * 메인화면
*/

.line-title{margin-bottom: 28rem;}
.line-title span{font-size: 20px; font-weight: 700; border-bottom: 4px solid var(--color1); }

.arrow-btn{display: inline-flex; align-items: center; justify-content: center; gap: 22rem; border-radius: 50rem; height: 53rem; padding: 0 45rem; font-size: 15rem; color: #fff; background-color: var(--color1); line-height: 0;}
.arrow-btn::after{content: ""; display: inline-block; width: 12rem; height: 24rem; background: no-repeat center center/contain; background-image: url('/dist/img/icon/arrow-right.svg');}

.main-banner .banner{background: no-repeat center center/cover;}
.main-banner .banner .inner{min-height: 570rem;  color: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; font-size: 22rem;}
.main-banner .banner p{font-size: 1em; line-height: 2;}
.main-banner .banner h3{font-size: 3.63em; font-weight: 700;}

.main-product{background: no-repeat center right/contain; background-image: url('/dist/img/main/product-bg.jpg'); min-height: 620rem; padding: 90rem 0;}
.main-product .inner{display: flex; align-items: center;}
.main-product .txt{width: 50%;}
.main-product .txt h4{font-size: 40rem; font-weight: 400; line-height: 1;}
.main-product .txt p{font-size: 16rem; max-width: 475rem; word-break: break-all; margin-top: 10rem;}
.main-product .txt .btns{margin-top: 40rem;}
.main-product .img{width: 50%; text-align: right;}

.main-anodizing{background: no-repeat center center/cover; background-image: url('/dist/img/main/anodizing-bg.jpg'); padding: 90rem 0;}
.main-anodizing .inner{ min-height: 800rem;  text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16rem;}
.main-anodizing h3{font-size: 2.5em; font-weight: 700;}
.main-anodizing p{max-width: 700rem; font-size: 1em; text-align: left; margin-top: 50rem; line-height: 2; word-break: keep-all;}

.main-introduce{padding-top: 90rem; padding-bottom: 150rem; overflow: hidden;}
.main-introduce .btns{position: relative; margin-top: 50rem; display: flex; align-items: center; gap: 30rem; justify-content: space-between; padding-bottom: 170rem;}
.main-introduce .btns a{position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 38rem; text-align: center; height: 250rem; border-radius: 16rem; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.25); transition: all .3s;}
.main-introduce .btns a p{font-size: 24rem; font-weight: 500;}
.main-introduce .btns::after{content: ""; height: 260rem; background: var(--color1) no-repeat left 117rem bottom; background-image: url('/dist/img/main/samyoungtech.svg'); width: 100vw; position: absolute; bottom: 0; left: -117rem; z-index: 0; border-radius: 500rem 0 0 500rem;}
.main-introduce .btns a:hover{box-shadow: 0 2px 20px rgba(0,0,0,0.25)}

.main-contact{background: no-repeat center center/cover; background-image: url('/dist/img/main/contact-bg.jpg');}
.main-contact .inner{min-height: 400rem; padding: 50px 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 38rem; text-align: center;}
.main-contact h3{font-size: 30rem; font-weight: 700; line-height: 2;}


@media (max-width: 1600px) {
    .main-banner .banner .inner{max-width: 90%; font-size: 16rem;}
    .main-introduce .btns::after{left: -100px;}
}

@media (max-width: 1200px) {
    .main-banner .banner .inner{min-height: 470rem;}
    .main-product{min-height: 500rem;}
    .main-product .img img{width: 80%;}
    .main-anodizing .inner{min-height: 400rem;}
    .main-introduce .btns{padding-bottom: 100rem;}
    .main-introduce .btns::after{left: 0; height: 160rem; background-size: auto 60rem;}
}

@media (max-width: 900px) {

    .main-product .inner{flex-direction: column; gap: 50rem;}
    .main-product .txt{width: 100%; order: 2;}
    .main-product .img{width: 100%; text-align: center; order: 1;}

    .main-introduce .btns{flex-direction: column; padding-bottom: 70rem;}
    .main-introduce .btns a{flex: inherit; width: 100%; height: 200rem;}
    .main-introduce .btns::after{left: 50rem; background-size: 70% auto;}

}

@media (max-width: 450px) {



}


/* 
 * 서브페이지 공통
*/

.sub-banner{background: no-repeat center center/cover; height: 400rem; display: flex; align-items: center; justify-content: center; color: #fff}
.sub-banner h2{font-size: 40rem; font-weight: 700;}

.sub-tabs{margin: 50rem 0;}
.sub-tabs .inner{display: flex; align-items: center; justify-content: center;}
.sub-tabs ul{display: inline-flex; align-items: center; border-radius: 10rem; overflow: hidden; background-color: #fff; box-shadow: 0 2px 20px rgba(0,0,0,0.05);}
.sub-tabs ul li a{min-width: 200rem; height: 60rem; display: flex; align-items: center; justify-content: center; font-size: 15rem; padding: 0 15rem;}
.sub-tabs ul li a:hover{background-color: #f4f4f4;}
.sub-tabs ul li.active a{color: #fff; background-color: var(--color1);}

.depth-tab{display: flex; align-items: center; justify-content: center; gap: 20rem; margin: 100rem 0 50rem 0;}
.depth-tab a{flex: 1; height: 50rem; display: flex; align-items: center; justify-content: center; font-size: 15rem; padding: 0 15rem; border: 1px solid #eee; border-radius: 10rem; color: #666; font-weight: 500;}
.depth-tab a.active{color: var(--color1); border-color: var(--color1);}

.sub-title{margin-top: 100rem; margin-bottom: 150rem; text-align: center;}
.sub-title h3{font-weight: 400; font-size: 35rem;}

.sub-container{min-height: 60vh; padding-bottom: 200rem;}

@media (max-width: 1600px) {

}

@media (max-width: 1200px) {

    .sub-banner{height: 250rem;}
    .sub-banner h2{font-size: 30rem;}

    .sub-tabs ul{max-width: 100%; overflow-x: auto;}
    .sub-tabs ul li a{min-width: 100rem; height: 45rem;}

    .sub-title{margin: 80rem 0;}
    .sub-title h3{font-size: 28rem;}
}

@media (max-width: 900px) {

}

@media (max-width: 450px) {

}

/* 
 * 회사소개
*/

/* 인사말 */
.company{display: flex;}
.company .txt{max-width: 680rem; flex: 1;}
.company .txt h3{font-size: 40rem; font-weight: 500; line-height: 1.2;}
.company .txt h3 b{color: var(--color1); font-weight: 500;}
.company .txt p{font-size: 16rem; word-break: keep-all;}
.company .txt .message{margin-top: 30rem; line-height: 2;}
.company .txt .ceo{ margin-top: 50rem; display: flex; align-items: center; justify-content: flex-end;  flex-wrap: wrap; gap: 30rem;}
.company .img{flex: 1; text-align: right;}
.company .img img{max-width: 90%;}

@media (max-width: 1600px) {

}

@media (max-width: 1200px) {
    .company{flex-direction: column; gap: 100rem;}
    .company .txt{order: 2; max-width: 100%;}
    .company .img{order: 1; text-align: center;}
    .company .img img{width: 50%;}
}

@media (max-width: 900px) {


}

@media (max-width: 450px) {


}


/* 연혁 */
.history{background: no-repeat right center/contain; background-image: url('/dist/img/company/samyoungtech.svg'); min-height: 60vh;}
.history article{display: flex; align-items: flex-start; max-width: 600rem; margin: 0 auto;}
.history article header{width: 145rem;}
.history article header h5{display: inline-block; font-size: 16rem; font-weight: 700; transform-origin: bottom right; transition: all .3s; }
.history article ul{flex: 1; padding-bottom: 110rem; padding-left: 70rem; border-left: 2px solid #E1E1E1; font-size: 16rem; position: relative;}
.history article ul::before{content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; border: 3px solid var(--color1); position: absolute; top: 0; left: -8px; background-color: #fff;
    box-shadow: 0 0 0 10px rgba(93, 181, 49, 0) ;
    outline: 20px solid rgba(93, 181, 49, 0) ;
    transition: all.5s;
}
.history article:last-child ul{border-color: transparent;}
.history article ul li{position: relative; padding-left: 42rem;}
.history article ul li + li{margin-top: 40rem;}
.history article ul li b{font-size: 1.1em; position: absolute; top: 0; left: 0;}

.history article:hover header h5{transform: scale(2);}
.history article:hover ul::before{
    box-shadow: 0 0 0 10px rgba(93, 181, 49, 0.49) ;
    outline: 20px solid rgba(93, 181, 49, 0.2) ;
    transform: scale(1.5);
}

@media (max-width: 1600px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 900px) {
    .history article header h5{transform-origin: bottom left;}
}

@media (max-width: 450px) {

}


/* 특허 및 인증서 */
.certification{position: relative; padding: 0 100rem;}
.certification .swiper{padding-bottom: 100rem; background: no-repeat center center/contain; background-image: url('/dist/img/company/cert-bg.jpg');}
.certification .swiper .banner{transform: scale(0.6); transition: all .3s;}
.certification .swiper .banner img{width: 100%;}
.certification .swiper .banner p{font-size: 30rem; font-weight: 500; text-align: center; margin-top: 30rem;}
.certification .swiper .swiper-slide-active .banner{transform: scale(1);}
.certification  .swiper-button-next,
.certification  .swiper-button-prev{width: 100rem; height: 100rem; border-radius: 50%; background-color: #eee; margin-top: -100rem;}
.certification  .swiper-button-next{right: 0;}
.certification  .swiper-button-prev{left: 0;}

/* 오시는 길 */
.location .info{position: relative; background-color: #fff; border-radius: 30rem; box-shadow: 0 3px 10px rgba(0,0,0,0.15); top: -90rem; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40rem; width: 90%; margin: 0 auto; padding: 80rem 20rem;}
.location .info .address{font-size: 28rem; font-weight: 500;}
.location .info ul{font-size: 20rem; font-weight: 500; display: flex; flex-wrap: wrap; justify-content: center; gap: 50rem; width: 100%;}
.location .info ul img{vertical-align: middle; margin-right: 5rem;}

.root_daum_roughmap {max-width: 100%;}

@media (max-width: 1600px) {

}

@media (max-width: 1200px) {

    .root_daum_roughmap .wrap_map{max-height: 500rem;}

}

@media (max-width: 900px) {

    .certification .swiper-button-next, .certification .swiper-button-prev{background-color: transparent;}

    .location .info{top: 0; margin-top: 50rem; padding: 30rem 20rem; width: 100%; border-radius: 10rem;}
    .location .info .address{font-size: 20rem;}
    .location .info ul{flex-direction: column; gap: 30rem;}

}

@media (max-width: 450px) {

}


/*
 * 제품소개
*/

/* 제품소개 */
.section-list{display: flex; flex-direction: column; gap: 70rem;}
.section-list section{display: flex;  font-size: 16rem;}
.section-list section header{width: 280rem;}
.section-list section header h3{font-size: 20rem; font-weight: 500; display: inline-block; border-bottom: 4px solid var(--color1); padding: 5rem 0;}
.section-list section .contents{flex: 1;}
.section-list section .contents table{text-align: center;}
.section-list section .contents .imgs{display: flex; flex-wrap: wrap; gap: 10rem; justify-content: space-between;}
.section-list section .contents .imgs img{max-width: 100%;}

.section-list.col section{flex-direction: column; gap: 30rem;}
.section-list.col section header{width: 100%;}
.section-list.col section .contents{display: flex; gap: 100rem;}
.section-list.col section .contents .img{width: 380rem;}
.section-list.col section .contents .img img{max-width: 100%; border: 1px solid #eee;}
.section-list.col section .contents .color1-table{flex: 1;}

@media (max-width: 1600px) {
    .section-list section .contents .imgs{justify-content: flex-start;}

    .section-list.col section .contents{gap: 30rem;}
}

@media (max-width: 1200px) {
    .section-list section{flex-direction: column; gap: 30rem;}
    .section-list section header{width: 100%;}

    .section-list.col section .contents{flex-direction: column;}
    .section-list.col section .contents .img{width: 100%; text-align: center;}
}

@media (max-width: 900px) {
    .section-list section .contents .imgs{justify-content: center;}
}

@media (max-width: 450px) {

}


/* 게시판 */
.board-search{display: flex; align-items: center; justify-content: center; margin: 50rem 0 100rem 0;}
.board-search .field{display: inline-block; width: 100%; max-width: 500rem; display: flex; align-items: center; border-bottom: 3px solid #000;}
.board-search .field select{width: 140rem; height: 50rem; border: none; font-size: 15rem;}
.board-search .field input{flex: 1; height: 50rem; border: none; font-size: 15rem;}
.board-search .field button{width: 40rem; height: 50rem; font-size: 15rem;}

.board-list table{width: 100%; border-top: 1px solid #000; text-align: center;}
.board-list table tr > *{border-bottom: 1px solid #ddd; height: 60rem; padding: 10rem 20rem; font-size: 16rem;}
.board-list table tr .title{text-align: left; font-weight: 500;}
.board-list table tr .title a{font-weight: 500; max-width: 70vw; display: block;}
.board-list table tr .title a:hover{text-decoration: underline;}

.board-btns{text-align: right; margin: 30rem 0;}
.board-btns .nBtn{border-radius: 10rem;}

.board-view-area{margin: 100rem 0;}
.board-view-area .board-title{margin: 50rem 0; text-align: center; font-size: 30rem; font-weight: 500;}
.board-view{margin-bottom: 30rem; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.board-view header{border-bottom: 1px solid #ddd; padding: 15rem 0;}
.board-view header h2{font-size: 16rem; font-weight: 500;}
.board-view header .info{margin-top: 10rem; font-size: 14rem; color: #999;}
.board-view header .info span + span::before{content: "|"; margin: 0 5rem; color: #ccc}
.board-view .contents{padding: 25rem; font-size: 16rem; line-height: 1.8; min-height: 300rem;}
.board-view .answer-area{padding: 25rem 0;}
.board-view .answer-area .info{padding: 10rem 0; font-size: 16rem; color: #999; display: flex; flex-wrap: wrap; gap: 10rem;}
.board-view .answer-contents{background-color: #f4f4f4; border-radius: 10rem; padding: 20rem; font-size: 14rem;}

.board-view-btns{display: flex; align-items: center; gap: 10rem; justify-content: flex-end;}

@media (max-width: 1600px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 900px) {

    .board-list table tr > *{height: 55rem; padding: 0 10rem;}

    .board-list table colgroup col:first-child{display: none;}
    .board-list table tr > *:first-child{display: none;}

    .board-list table colgroup col:last-child{width: 100rem;}
}

@media (max-width: 450px) {
    .board-list table tr .title a{max-width: 60vw;}
}


/* 글작성 */
.board-write{position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: none; align-items: center; justify-content: center;}
.board-write-container{background: #fff; max-width: 90%; width: 1085rem; border-radius: 10rem;}
.board-write-container header{height: 70rem; position: relative; border-bottom: 1rem solid #ddd; display: flex; align-items: center; justify-content: center;}
.board-write-container header h3{font-size: 16rem; font-weight: 700;}
.board-write-container header .close{height: 70rem; width: 70rem; position: absolute; right: 0; top: 0; font-size: 30rem; line-height: 1;}
.board-write-container header .close img{width: 24rem;}
.board-write-container .contents{padding: 30rem 40rem; max-height: 70vh; overflow-y: auto;}
.board-write-container .contents .input{margin-bottom: 10rem;}
.board-write-container .contents .input input{width: 100%; height: 60rem; font-size: 16rem; padding: 0 10rem; border: none; border-bottom: 1rem solid #ddd;}
.board-write-container .contents .textarea{margin-top: 30rem; resize: vertical;}
.board-write-container .contents .textarea textarea{width: 100%; height: 200rem; border: 1rem solid #ccc; padding: 20rem; font-size: 16rem; line-height: 1.4;}
.board-write-container .contents .textarea textarea:focus{outline: none;}
.board-write-container .contents .img{display: none; margin-top: 25rem;}
.board-write-container .contents .img img{max-width: 100%;}
.board-write-container .contents .img h5{font-weight: 500; font-size: 16rem; margin-bottom: 10rem;}
.board-write-container .contents .agree{margin: 30rem 0;}
.board-write-container .contents .agree h5{font-size: 16rem; font-weight: 500; margin-bottom: 20rem;}
.board-write-container .contents .agree .policy{height: 100rem; overflow-y: auto; padding: 20rem; font-size: 14rem; background-color: #f4f4f4; border-radius: 10rem; line-height: 1.8; margin: 10rem 0;}
.board-write-container .contents .agree .checkbox span{font-size: 14rem;}
.board-write-container .contents .agree .checkbox span::before{border-radius: 50%;}
.board-write-container footer{background: rgb(230, 230, 230, 0.4); padding: 13rem 23rem; display: flex; align-items: center; justify-content: space-between;}
.board-write-container footer label.file{position: relative; display: inline-block; width: 29rem; height: 29rem; cursor: pointer;}
.board-write-container footer label.file input{opacity: 0; position: absolute; left: 0; top: 0; z-index: 100; height: 100%;}
.board-write-container footer label.file img{display: inline-block; width: 100%;}
.board-write-container footer .btn{height: 46rem; width: 115rem; font-size: 17rem; border-radius: 5rem; font-weight: 400;}

@media (max-width: 1250px) {

    .board-write-container .contents{padding: 15rem;}
    .board-write-container .contents .input input{font-size: 16rem; height: 50rem;}
    .board-write-container .contents .textarea textarea{font-size: 16rem; height: 250rem;}

}

@media (max-width: 1080px) {

    .board-write-container header{height: 50rem;}
    .board-write-container header h3{font-size: 18rem;}
    .board-write-container header .close{height: 50rem; width: 50rem; font-size: 20rem;}

}

@media (max-width: 720px) {

    .board-write-container .contents .input input{font-size: 14rem; height: 45rem;}
    .board-write-container .contents .textarea{margin-top: 20rem;}
    .board-write-container .contents .textarea textarea{font-size: 14rem; height: 150rem; padding: 10rem;}

    .board-write-container footer .btn{height: 40rem; font-size: 14rem;}

    .board-write-container footer label.file{width: 25rem; height: 25rem;}

}


/* confirm */
.confirm-modal{position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: none; align-items: center; justify-content: center;}
.confirm-modal-container{background: #fff; max-width: 90%; width: 400rem; border-radius: 10rem;}
.confirm-modal-container header{height: 70rem; position: relative; border-bottom: 1rem solid #ddd; display: flex; align-items: center; justify-content: center;}
.confirm-modal-container header h3{font-size: 16rem; font-weight: 700;}
.confirm-modal-container header .close{height: 70rem; width: 70rem; position: absolute; right: 0; top: 0; font-size: 30rem; line-height: 1;}
.confirm-modal-container header .close img{width: 24rem;}

.confirm-modal-container .contents{padding: 20rem;}
.confirm-modal-container .contents .input input{width: 100%; height: 50px; border: 1px solid #ddd; border-radius: 3rem;}

.confirm-modal-container footer{background: rgb(230, 230, 230, 0.4); padding: 13rem 23rem; display: flex; align-items: center; justify-content: flex-end; gap: 10rem;}
.confirm-modal-container footer .btn{height: 46rem; width: 115rem; font-size: 17rem; border-radius: 5rem; font-weight: 400;}