/*sub_vi*/
.sub_vi {width:100%; display:inline-block; text-align:center; box-sizing:border-box; height:39.5%; position:relative; overflow:hidden; }
.sub_vi_text{line-height:2.5em; font-weight:600; color:#fff; position:absolute; top:50%; left:50%; transform: translate(-50%, -40%); letter-spacing:-1px; width:100%; height:100%; padding:0 5%; box-sizing:border-box; text-shadow:2px 2px 3px rgba(0,0,0,.4); background:rgba(0,0,0,0.3)}
.sub_vi_text p{font-size:1.3rem; font-weight:700; line-height:1.2; letter-spacing:-1.1px; display:flex; justify-content:center; align-items:center; height:100%;}
.sub_vi_text p span{font-size:3rem; font-weight:700;}


.sub_vi1{background:url('/common/img/sub/sub_vi1.jpg') no-repeat center; width:100%; height:384px; background-size:cover;}
.sub_vi2{background:url('/common/img/sub/sub_vi3.jpg') no-repeat center; width:100%; height:384px; background-size:cover;}
.sub_vi3{background:url('/common/img/sub/sub_vi2.jpg') no-repeat center; width:100%; height:384px; background-size:cover;}


img {
    image-rendering: -webkit-optimize-contrast !important;	
}



.sub_vi .sub_vi_p{
will-change: transform;
animation-duration:1s;
animation-name: background-image-animation;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: linear;
transform: translateX(0) scale(1);
}


@keyframes background-image-animation {
0% {transform: scale(1.2);}
100% {transform: scale(1);}
}



/* 서브 메뉴 탭 */
#sub_wrap { position:relative; width:100%; background:#fff; margin-top:-4px;}
.sub_menu{width:100%; height:60px; border-bottom:1px solid #ddd}
.sub_menu .in{  margin:0 auto; }
.sub_menu .in .home{width:12.5%; float:left; padding:10px 0px 0px 0px; text-align:Center; height:60px; background:#ddd; box-sizing:border-box;  border-bottom:1px solid #ddd; }
.sub_menu .in .box0 {width:5%; border-right:1px solid #ddd; border-left:1px solid #ddd; height:60px; background:#fff; float:left; cursor: pointer;}
.sub_menu .in .box0 p{width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-size:1.5rem;}
.sub_menu .in .box0:hover p i{color:#00A0E9}
.sub_menu .in .box1 {width:30%; border-right:1px solid #ddd; height:60px; float:left; background:#fff; box-sizing:border-box;}
.sub_menu .in .box2 {width:30%; border-right:1px solid #ddd; float:left; height:60px; box-sizing:border-box; background:#00A0E9}
.sub_in .sub_in_menubtn {position:relative; width:100%; float:left; background:#f7f7f7; border-top:2px solid #ddd; border-bottom:1px solid #ddd; padding:12px 0;  border-right:none; border-left:none;}
.sub_in .sub_in_menu {width:100%; float:left; border:1px solid #ddd; }
.sub_in .sub_in_menu li {width:100%; float:left; border-bottom:1px solid #ddd; text-align:center;}
.sub_in .sub_in_menu li:last-child{border-bottom:none;}
.sub_in .sub_in_menu li a {display:block;padding:10px 0;}
.sub_in .guide i { color:#ddd; font-size:1.5em; margin:0 15px;}
.dropdown1 [data-toggle="dropdown"]{background:#00A0E9 !important; color:#fff !important}
.dropdown .dropdown-menu li:hover a{background:#00A0E9 !important; color:#fff !important}
.dropdown-menu .on > a{background:#00A0E9 !important; color:#fff !important}









.sub_content{padding:5em 0}
.sub_content_inner{max-width:1440px; margin:0 auto;}
.sub_content_inner:after{content:''; display:block; clear:both;}
.sub_content_inner1{max-width:1440px; margin:0 auto;}
.sub_title{text-align:center; font-size:2rem; font-weight:600; margin-bottom:2em}







/*** 회사소개 ****/





/*** 인사말 ****/
.ceo_wrap{position: relative;}
.bg_img1{position: absolute; top:-64px; right:0; z-index: -1; width:24em;}
.ceo_box1{border-bottom:1px solid #ddd; padding-bottom:2em}
.ceo_box1 p{font-size:1.5rem; font-weight:600; line-height:1.5;}
.ceo_box2{padding-top:2em;}
.ceo_box2 p{font-size:1.2rem; font-weight:400; line-height:1.5; color:#777}


/****회사소개, 관계회사 *********/
.company_div > img{max-width:100%;}
.company_txt{border:1px solid #ddd; border-bottom:0; display:flex; box-sizing:border-box; height:80px; border-left:0; border-right:0; line-height:1.2; }
.company_txt p{display:flex; align-items:center; font-weight:500;}
.company_txt p:first-child{width:180px; background:#f7f7f7; padding-left:1em; box-sizing:border-box; font-weight:600; font-size:1.1rem}
.company_txt p:last-child{padding-left:1em;}
.company_txt a{text-decoration:underline; font-weight:500; color:#00A0E9}
.company_txt a:hover{color:#333}
.company_txt:last-child{border-bottom:1px solid #ddd}



/*.affiliate_wrap1{display:flex; margin-top:5em; }*/
/*.affiliate_div1{width:50%; border:1px solid #ddd; padding:1em 1em 1.5em 1em; box-sizing:border-box;}*/
/*.affiliate_div1:nth-child(odd){margin-right:1em}*/
/*.affiliate_div1 img{margin-bottom:2em}*/
/*.affiliate_div1 .affiliate_txt1:first-child{border-top:1px solid #ddd}*/
/*.affiliate_txt1{line-height:1.2; display:flex; margin-bottom:1em; align-items:center;}*/
/*.affiliate_txt1:last-child{margin-bottom:0;}*/
/*.affiliate_txt1 p:first-child{width:180px; font-size:1.2rem; font-weight:600}*/
/*.affiliate_txt1 p:last-child{width:100%}*/
/*.affiliate_txt1 a{text-decoration:underline; font-weight:500; color:#00A0E9}*/

/**** 오시는길 *******/
.map_wrap{display:flex;}
.map_left{width:50%}
.map_right{width:50%; background:#00A0E9; padding:76px 0; color:#fff; text-align:center; line-height:1.4em; position: relative; box-sizing:border-box;}
.map_right:after{content:''; width:calc(100% - 15px); height:calc(100% - 15px); display:inline-block; border:1px solid #fff; top:7.5px; left:7.5px; position:absolute;}
.map_right img{margin-bottom:1em}
.map_right p:nth-of-type(1){font-size:1.3rem; font-weight:700; margin-bottom:10px;}
.map_right p:nth-of-type(2), 
.map_right p:nth-of-type(3){font-size:1rem; font-weight:500}
















.product_wrap{}
.product_wrap ul:after{content:''; display:block; clear:both;}
.product_wrap ul li{float:left; width:32.6%; height:277px; border-radius:20px; border:1px solid #ddd; box-sizing:border-box; text-align:center; margin:0 1% 1% 0;}
.product_wrap ul li:nth-child(3n){margin:0 0 1% 0}
.product_wrap ul li:nth-child(7), .product_wrap ul li:nth-child(8){margin:0 1% 0 0}
.product_wrap ul li:nth-child(9){margin:0 !important}

.product_wrap ul li a{display:block; padding:2em; box-sizing:border-box;}
.product_wrap ul li p:nth-child(1){font-size:1.5rem; font-weight:600; margin-bottom:15px; overflow:hidden; text-overflow:ellipsis; word-break: break-word; white-space:nowrap; color:#666;}
.product_wrap ul li p:nth-child(2){font-size:1rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; word-break: break-word; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height:58px; color:#666;}
.product_wrap ul li:hover p{color:#333}
.product_wrap ul li span{background:#00A0E9; color:#fff; border-radius:50%; box-sizing:border-box; padding:1em; font-size:1.2rem; font-weight:600; display:inline-block; margin-top:3em}


.product_wrap ul li:hover{border:1px solid #00A0E9; box-shadow:0 5px 10px rgb(0 0 0 / 20%)}
.product_wrap ul li:hover span{background:#333}






/* sub01_view */
.sub_content_wrap{background:#f2f5f8}
.product_view{padding:3em 0}
.view_left{width:50%; padding-left:160px; box-sizing:border-box; margin-right:2em;}
.view_left p:first-child{font-size:2rem; font-weight:600; margin-bottom:15px; border-bottom:1px dashed #ddd; padding-bottom:15px;}
.view_left p:last-child{font-size:1.2rem;}
.view_right{width:50%;}
.view_right p{font-size:1.5rem; font-weight:500; margin-bottom:10px;}
.view_right ul:after{content:''; display:block; clear:both;}
.view_right ul li{margin:0 10px 10px 0; border:1px solid #333; padding: 0.5em; box-sizing:border-box; font-weight:500; white-space:nowrap; float:left}
.view_right_div2{margin:2em 0;}
.view_right_div3{background:#ddd; display:inline-block; padding:1em 1.5em;}
.view_right_div3 p{margin-bottom:0; font-size:1rem;}
.view_right_div3 p span{cursor: pointer;}
.view_right_div3 p span:hover{color:#00A0E9; border-bottom:1px solid #00A0E9}


.sub_content_wrap1{padding:3em 0;}
.product_tab{border-bottom:1px solid #ddd;}
.product_tab ul{display:flex; justify-content:center; align-items:center; margin-bottom:2em;}
.product_tab ul li{border:1px solid #ddd; transition:.3s;}
.product_tab ul li:nth-child(2){margin:0 1%}
.product_tab ul li.on{box-shadow:0 5px 10px rgb(0 0 0 / 20%); border:1px solid #00A0E9; color:#00A0E9}
.product_tab ul li.on a{color:#00A0E9}
.product_tab ul li:hover{box-shadow:0 5px 10px rgb(0 0 0 / 20%); border:1px solid #00A0E9; transition:.3s;}
.product_tab ul li a{font-size:1.2rem; font-weight:500; padding:1em 2em; box-sizing:border-box; display:block;}
.product_tab ul li:hover a{color:#00A0E9}
.product_txt_wrap{margin-top:2em; border-bottom:1px solid #ddd; padding-bottom:2em;}
.product_txt_wrap ul li > p{font-size:1.8rem; font-weight:600; margin-bottom:15px;}
.txt_list p{line-height:1.3;}
.txt_list img{width:100%;}

.back_list{max-width:1440px; margin:0 auto; text-align:center; padding-top:0em;}
.back_list p{display:inline-block; cursor: pointer; border:1px solid #ddd; padding:1em 9em; border-radius:30px; box-sizing:border-box; font-weight:500}
.back_list p:hover{background:#333; color:#fff}





.down_btn{margin-right:1em; font-size:1.2rem; font-weight:500;}
.down_btn:after{content:''; display:block; clear:both;}
.down_btn i{margin-right:10px; font-size:1.5rem;}
.down_btn a{color:#fff !important; padding:1em 2em; box-sizing:border-box; display:flex; align-items:center; background:#333; float:left; margin-right:1%; margin-bottom:1%}


@media (max-width:900px){
.down_btn{font-size:1rem;}
}


@media (max-width:500px){
.down_btn{margin-right:0;}
.down_btn a{width:49%; padding:1em; justify-content:center;}
.down_btn a:nth-child(even){margin-right:0}
}


/****** 고객센터 ******/
.contact_wrap{display:flex; flex-direction:column;}
.contact_left{width:100%; display:flex; align-items:center; justify-content:center; order:2; margin-top:3em}
.contact_left img{margin-bottom:1em}
.left_txt{margin-left:4em;}
.contact_left .left_txt p{line-height:1.3;}
.contact_left .left_txt p:nth-child(1){font-size:1.5rem; font-weight:600}
.contact_left .left_txt p:nth-child(2), .contact_left .left_txt p:nth-child(3){font-size:1.2rem; font-weight:500}
.contact_left span{display:inline-block; background:#00A0E9; color:#fff; padding:0.8em 2em; box-sizing:border-box; margin-top:1em; cursor: pointer;}
.contact_right{width:100%; border-top:2px solid #000}
.contact_right_inner{}
.contact_right .contact_right_inner > div{display:flex; align-items:center; padding:10px; box-sizing:border-box; border-bottom:1px solid #ddd}

.contact_right .contact_right_inner p{font-size:1rem; font-weight:600; width:100px;}
.contact_right input{width:100%;}
.contact_right div textarea{height:300px; width:100%; border:1px solid #ddd; border-radius:5px; padding:5px; box-sizing:border-box;}
.contact_right > div input {border:1px solid #ddd; box-sizing:border-box; color:#666; padding-left:5px; height:35px; border-radius:5px;}
.contact_right > div input {max-width:100%;}
.send{text-align:center; width:100%; margin-top:2em}
.send p{ display:inline-block; background:#00A0E9; padding:0.8em 2em; box-sizing:border-box; cursor: pointer; color:#fff}











@media all and (max-width:1400px){
.view_left{padding-left:30px;}
.view_left p:last-child{font-size:1rem;}


}

@media all and (max-width:1000px){
.product_view{flex-direction:column; text-align:center}
.view_left{margin-right:0; padding-left:0; margin-bottom:4em; width:100%; border-bottom:1px solid #ddd; padding-bottom:3em;}
.view_right{width:100%;}
.view_right ul li{font-size:0.9rem;}

.product_tab ul li a{font-size:1rem;}
.product_txt_wrap ul li > p{font-size:1.5rem;}


.company_wrap.flex{flex-direction:column}
.company_wrap.flex .company_div:first-child{width:100%; margin-right:0; margin-bottom:1em !important; text-align:center}
.company_wrap.flex .company_div:last-child{width:100%;}
}



@media all and (max-width:900px){
.m_top{display:block;}
.sub_vi{height:25%}
.sub_vi{height:230px !important}
.sub_vi1{height:230px !important}
.sub_vi2{height:230px !important}
.sub_vi3{height:230px !important}
.sub_vi div span{font-size:1rem; margin-top:7px;}
.sub_vi div span:last-child{font-size:2rem;}
.sub_vi_text{transform:translate(-50%,-50%)}
.sub_menu .in .box0{width:10%;}
.sub_menu .in .box1{width:44.7%;}
.sub_menu .in .box2{width:44.7%;}



.company_wrap .company_div .company_txt p:first-child{padding:0.5em; width:100%;}
.company_wrap .company_div .company_txt p:last-child{padding:1em; box-sizing:border-box;}
.company_wrap .company_div .company_txt{flex-direction:column; height: auto;}



.sub_content{padding:3em 0;}
.sub_title{margin-bottom:1em; font-size:1.8rem;}
.product_wrap ul li{width:100%; height:auto; margin:0 0 1em 0 !important}
.product_wrap ul li:nth-child(2){margin:0 0 1em 0;}
.product_wrap ul li:nth-child(9){margin:0 !important;}
.product_wrap ul li span{margin-top:1em;}



.ceo_box1 p{font-size:1.3rem;}
.ceo_box1 br{display:none}
.bg_img1{display:none;}
.ceo_box2 p{font-size:1rem;}


.map_wrap{flex-direction:column;}
.map_left{width:100%;}
.map_left iframe{height:200px;}

.map_right{width:100%; padding:32px 18px;}
.map_right img{max-width:55%;}
.map_right p:nth-of-type(1){font-size:1.2rem;}

.contact_left{flex-direction:column}
.left_txt{margin-left:0; text-align:center}
.contact_right .contact_right_inner div{flex-direction:column; align-items:flex-start}
.contact_right .contact_right_inner p{margin-bottom:0.5em;}
.contact_left .left_txt p:nth-child(1){font-size:1.3rem;}
.contact_left .left_txt p:nth-child(2), .contact_left .left_txt p:nth-child(3){font-size:1.1rem;}
}



@media all and (max-width:600px){
.view_left p:first-child{font-size:1.6rem;}
}



@media all and (max-width:500px){
.product_wrap ul li p:nth-child(1){font-size:1.3rem;}
.view_right ul{display:block; margin-left:5px;}
.view_right ul:after{content:''; display:block; clear:both;}
.view_right ul li{float:left; width:32%; margin:0 5px 5px 0}

.product_tab ul{text-align:center;}
.product_tab ul li{width:100%}
.product_tab ul li a{padding:1em;}
}



@media all and (max-width:400px){
.view_right ul li{width:49%;}
.view_right ul li:nth-child(even){margin-right:0;}
.product_tab ul{flex-direction:column;}
.product_tab ul li{width:100%;}
}