@charset "utf-8";

/*subtop*/
.subtop{position: relative; width: 100%; height: 45vh;}
#subtop1{background: url('../img/sub/subtop1.png') center no-repeat; background-size: cover;}
#subtop2{background: url('../img/sub/subtop2.png') center no-repeat; background-size: cover;}
#subtop3{background: url('../img/sub/subtop3.png') center no-repeat; background-size: cover;}
#subtop4{background: url('../img/sub/subtop4.png') center no-repeat; background-size: cover;}

.subtop_txt{position: absolute; left: 50%; top: 65%; width: 90%; max-width: 1400px; transform: translate(-50%, -50%);} 
.subtop_txt p{color: #fff;}
.subtop_txt p:first-child{font-size: 3.3rem; line-height: 1.3;}
.subtop_txt p:last-child{margin-top: 2vh; font-size: 1rem; font-weight: 300;}


/*sub_path*/
.sub_path{width: 100%; height: 45px; background: #fff; border-bottom: 1px solid #ddd;}
.sub_path .path{margin: 0 auto; width: 90%; max-width: 1400px; font-size: 0;}
.sub_path .path li{display: inline-block; position: relative; vertical-align: top; line-height: 45px;}
.sub_path .path li:first-child{width: 45px; height: 45px; background: #018092 url('../img/sub/home_icon.png') center no-repeat;}
.sub_path .path li::after{position: absolute; content: ''; right: 0; top: 50%; transform: translate(0, -50%); width: 1px; height: 1rem; background: #ddd;;}
.sub_path .path li:first-child::after, .sub_path .path li:last-child::after{display: none;}
.sub_path .path li a{width: 100%; height: 100%; padding: 0 40px; font-size: 0.9rem; color: #666; font-weight: 400; transition: all 0.4s;}
.sub_path .path li.on a{color: #018092; font-weight: 600;}
.sub_path .path li:hover a{color: #018092; font-weight: 600;}

.lnb-topbar{display: none;}
.lnb-topbar{position: relative;height: 45px;background: #fff; width: 100%; border-bottom: 1px solid #ddd;}
.lnb-1depth{width: 100%; font-size: 0;}
.lnb-1depth > li{display: inline-block; position: relative; width: calc(100%/2 - 23px); vertical-align: middle; height: 100%; border-right: 1px solid #ddd;}
.lnb-1depth > .icon_home{display: inline-block; width: 45px; height: 45px;}
.lnb-1depth > .icon_home a{width: 100%; height: 100%; background: #018092 url('../img/sub/home_icon.png') center no-repeat; vertical-align: middle;;}
.lnb-1depth a {color:#000; padding-left: 10%; font-size: 0.9rem; line-height: 45px;}
.lnb-1depth > li > a{position: relative;}
.lnb-1depth > li > a::before{display: block;position: absolute;content: '';right: 29px;top: 16px;width: 2px;height: 16px;margin-top: -1px;background: #018092;transition: all 0.4s;}
.lnb-1depth > li > a::after{display: block;position: absolute;content: '';right: 22px;top: 22px;width: 16px;height: 2px;background: #018092;}
.lnb-1depth > li > a.on:before{transform: rotate(-90deg);}
.lnb-1depth > li > a.on:after{display: none;}
.lnb-1depth > li:first-child a:after {display:none;}
.lnb-1depth > li:first-child a:before {display:none;}
.lnb-2depth {display: none; position: absolute; left: 0; top: 45px; width: 100%; background: #fff; border: 1px solid #ddd; border-top: 0; z-index: 10;}
.lnb-2depth.on {display: block;}
.lnb-2depth > li{border-bottom: 1px solid #ddd;}
.lnb-2depth > li:last-child{border-bottom: 0;}
.lnb-2depth > li > a {background: #fff; color:#000; line-height: 45px;}



/*서브공통*/
.sub{position: relative; width: 100%; height: auto; margin-bottom: 180px;}
.sub_inner{width: 90%; max-width: 1200px; margin: auto;}


/*서브타이틀*/
.sub_title{padding: 12vh 0 14vh;text-align: center;}
.sub_tit{font-size: 2.2rem; line-height: 1.2; letter-spacing: -1px; color: #000; text-align: center;}


/*sub_1_1*/
.sub_1_1{width: 100%; height: auto; background: url('../img/sub/s1/s111_bg.png') left top no-repeat;}
.s111_tit{font-size: 2rem; color: #1a1a1a; font-weight: 700;}
.s111_con{font-size: 1rem; color: #595959; line-height: 1.6;}
.tit_s{display: block; margin-bottom: 15px; font-size: 0.9rem; letter-spacing: 0.5px; color: #018092; text-transform: uppercase; font-weight: 700;}

/*s111*/
.s111{font-size: 0;}
.s111 > div{display: inline-block; vertical-align: middle;}
.s111_left{width: 50%;padding-left: 13%;}
.s111_left p:first-child{margin-bottom: 20px; font-size: 0.9rem; letter-spacing: 1px; color: #018092; text-transform: uppercase;}
.s111_img{width: 50%;}
.s111_img img{width: 100%;}

/*s112*/
.s112{margin-bottom: 16vh; font-size: 0;}
.s112 > div{display: inline-block; vertical-align: middle;}
.s112_img{width: 50%;}
.s112_img img{width: 100%;}
.s112_right{width: 37%; margin-left: 8%;}
.s112_right p.s111_tit{margin: 1vh 0 2.5vh;}

/*s113*/
.s113_tit{text-align: center; font-size: 1.8rem; color: #262626; font-weight: 600;}
.s113_wrap{position: relative;}
.line{position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 100%; height: 1px; border: 1px dashed #ddd; z-index: -1;}

.m113_ul{position: relative; margin: 6vh auto 0; width: 90%; max-width: 1200px; font-size: 0;}
.m113_ul li{position: relative; display: inline-block; margin-right: 4%; padding: 3vh 0; width: calc(92%/3); height: 46vh; text-align: center; vertical-align: middle; border: 2px solid #e5e5e5; background: #fff;}
.m113_ul li:last-child{margin-right: 0;}
.m113_ul li .m113_num{display: inline-block; position: relative; margin-bottom: 30px; padding-bottom: 25px; font-size: 2rem; color: #DBDBDB;}
.m113_ul li .m113_num::after{position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 3px; background: #018092;}
.m113_ul li .m113_con img{height: 70px;}
.m113_ul li .m113_con p{margin: 30px 0 20px; font-size: 1.5rem; color: #262626; font-weight: 500;}
.m113_ul li .m113_con span{display: block; font-size: 1rem; color: #595959; line-height: 1.5;}
.m113_ul li::after{position: absolute; content: ''; right: -8%; top: 50%; transform: translate(0, -50%); width: 8px; height: 8px; background: #84CCD8; border-radius: 100%;}
.m113_ul li:nth-child(2)::after{background: #018092;}
.m113_ul li:last-child::after{display: none;}


/*sub_1_2*/
.sub_1_2{width: 100%; height: auto; background: url('../img/sub/s1/s121_bg.png') right top no-repeat;}

/*s121*/
.his_cont_wrap{position: relative; width: 80%; margin-right: 20%; padding-bottom: 22vh;}
.his_cont_wrap::before{position: absolute; content: ''; top: 20px; left: calc(25% + 127px); width: 1px; height: calc(100% - 20px); background: #B2B2B2; z-index: 1;}
.his_cont{margin-bottom: 10vh; padding-left: 25%; width: 100%;}
.data{font-size: 0;}
.data p{display: inline-block; font-size: 1rem; vertical-align: middle;}
.data p.year{position: relative; padding-right: 45px; width: 131px; font-size: 2rem; font-weight: 700; color: #018092; z-index: 99}
.data p.year::after{position: absolute; content: ''; top: 50%; right: 0; transform: translate(0, -50%); width: 7px; height: 7px; background: #018092; border-radius: 100%; z-index: 99;}
.data p.desc{position: relative; padding-left: 90px; color: #737373;}
.data p.desc::before{position: absolute; content: ''; top: 50%; left: 0; transform: translate(0, -50%); width: 65px; height: 1px; background: #ddd;}
.data p.desc::after{position: absolute; content: ''; top: 50%; left: 60px; transform: translate(0, -50%); width: 7px; height: 7px; background: #999; border-radius: 100%;}
.data p.desc span.date{display: inline-block; margin-right: 50px; color: #4d4d4d; font-size: 1.1rem; font-weight: 700;}
.s121_banner{position: relative; width: 100%; height: 45vh; background: url('../img/sub/s1/s121_banner.png') center no-repeat; background-size: cover; border-top-right-radius: 300px; border-bottom-right-radius: 300px;}
.s121_banner .banner_txt{position: absolute; top: 5%; left: calc(25% + 90px);}
.s121_banner .banner_txt p{display: inline-block; text-align: center; color: #fff; font-size: 1rem; line-height: 1; letter-spacing: 1px; writing-mode: vertical-rl; text-transform: uppercase;}


/*sub_1_3*/

/*s131*/
.map_ul{width: 100%; font-size: 0;}
.map_ul li{display: inline-block; vertical-align: top;}
.map_ul li.map_left{width: 35%;}
.map_ul li.map_left p{font-size: 2rem; font-weight: 700; color: #1a1a1a;}
.map_ul li.map_left p span{display: block; margin-top: 0.5vh; font-size: 1.1rem; font-weight: 300; color: #4c4948;}
.map_ul li.map_right{width: 65%;}
.map_ul li.map_right p{font-size: 1rem; color: #666; display: inline-block;}
.map_ul li.map_right p span{margin-right: 1.5vw; font-weight: 800; color: #000;}
.map_ul li.map_right div {font-size: 1rem; color: #666; display: inline-block; vertical-align: top;}
.map_ul li.map_right p:first-child{margin-bottom: 4vh;}

/*s132*/
.s132{margin: 10vh 0 0; width: 100%; height: 45vh;}


/*sub_2_1*/

/*s211*/
.pro_list{width: 100%; font-size: 0; border-top: 1px solid #ddd}
.pro_list li{display: inline-block; padding: 20px 0; width: calc(100%/3); border-bottom: 1px solid #ddd; vertical-align: top;}
.pro_list li a{padding: 15px 0; width: 100%; height: auto; border-right: 1px solid #ddd;}
.pro_list li:nth-child(3n) a{border-right: 0;}
.pro_list li a > img{width: 100%;}
.pro_list li .pro_txtbox{padding: 0 30px; margin-bottom: 30px; width: 100%; }
.pro_list li .pro_txtbox span{display: block; font-size: 0.85rem; color: #999; font-weight: 300; line-height: 1.3;}
.pro_list li .pro_txtbox p:nth-child(2){position: relative; margin: 5px 0 20px; font-size: 1.15rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.5px; color: #262626;}

.pro_list li .pro_txtbox span.etc{display: inline-block; position: absolute; padding: 3px 5px; right: 0; top: 0; background: #018092; color: #fff; font-size: 0.9rem;}

.pro_list li p.pro_more{display: block; position:relative; overflow: hidden;}
.pro_list li p.pro_more span:first-child{display: inline-block; margin-left: -70px; vertical-align: middle; font-weight: 400; font-size: 12px; color: #018092; line-height: 1; text-transform: uppercase; transition: all 0.4s;}
.pro_list li p.pro_more span.arrow{position: relative; display: inline-block; margin-left: 5px; vertical-align: middle; width: 40px; height: 2px; background: #1a1a1a; transition: all 0.4s;}
.pro_list li p.pro_more span.arrow::before{position: absolute; content: ''; right: 0; top: -3px; width: 7px; height: 2px; background: #1a1a1a; transform: rotate(45deg);}
.pro_list li p.pro_more span.arrow::after{position: absolute; content: ''; right: 0; bottom: -3px; width: 7px; height: 2px; background: #1a1a1a; transform: rotate(-45deg);}

.pro_list li:hover p.pro_more span:first-child{margin-left: 0;}
.pro_list li:hover p.pro_more span.arrow, .pro_list li:hover p.pro_more span.arrow::before, .pro_list li:hover p.pro_more span.arrow::after{background: #018092;}


/*sub_2_1_1*/
.sub_2_1_1{background: url('../img/sub/s2/pro_view_deco.png') left top no-repeat;}
.sub_2_1_3 .pro_v_top li.pro_v_txt .pro_v_name {font-size: 2.8rem;}
.sub_2_1_4 .pro_v_top li.pro_v_txt .pro_v_name {font-size: 2.6rem;}

/*pro_view1*/
.pro_view{margin: 200px 0 120px; padding-bottom: 120px; border-bottom: 1px solid #ddd;}
.pro_view2{margin-top: 0;}
.pro_view3{margin: 0; padding-bottom: 0; border: none; text-align: center;}

.pro_v_top{width: 100%; max-width: 1100px; margin: auto; font-size: 0;}
.pro_v_top li{display: inline-block; width: 50%; vertical-align: middle;}
.pro_v_top li.pro_v_txt{padding-right: 10%;}
.pro_v_top li.pro_v_txt .pro_v_tit{font-size: 0.85rem; letter-spacing: 1.5px; color: #666;}
.pro_v_top li.pro_v_txt .pro_v_name{margin: 30px 0 25px; padding-bottom: 20px; font-size: 3.5rem; line-height: 1.2; color: #1a1a1a; border-bottom: 1px solid #333;}
.pro_v_top li.pro_v_txt .pro_v_name span{display: block; margin-top: 35px; font-size: 1.3rem; line-height: 1.3; font-weight: 500;}
.pro_v_top li.pro_v_txt .pro_v_desc{position: relative; margin-top: 35px; padding: 5px 30px; width: 100%;}
.pro_v_top li.pro_v_txt .pro_v_desc::before{position: absolute; content: ''; left: 0; top: 0; width: 15px; height: 100%; border-top: 5px solid #ddd; border-left: 5px solid #ddd; border-bottom: 5px solid #ddd;}
.pro_v_top li.pro_v_txt .pro_v_desc::after{position: absolute; content: ''; right: 0; top: 0; width: 15px; height: 100%; border-top: 5px solid #ddd; border-right: 5px solid #ddd; border-bottom: 5px solid #ddd;}
.pro_v_top li.pro_v_txt .pro_v_desc span{display: block; text-align: center; font-size: 1.1rem; letter-spacing: -0.5px; line-height: 1.3; color: #666; word-break: keep-all;}

.pro_v_top li.pro_v_img > img{display: block; width: 100%; max-width: 534px; margin: auto;}
.pro_v_top li.pro_v_img .pro_v_btn{margin-top: 20px; text-align: center;}
.pro_v_top li.pro_v_img .pro_v_btn a{display: inline-block;}
.pro_v_top li.pro_v_img .pro_v_btn a:first-child{margin-right: 20px;}

.moreBtn.ver2{background: #fff; border: 1px solid #018092;}
.moreBtn.ver2 span{color: #018092;}
.moreBtn.ver2 span::before{background: url('../img/sub/s3/inq_icon.png') center no-repeat; background-size: cover;}

.pro_view .etc{display: inline-block; padding: 3px 5px; background: #018092; color: #fff; font-size: 0.9rem;}


/*pro_view2*/
.pro_view .sub_tit{font-size: 1.6rem; line-height: 1.3; color: #262626; font-weight: 700;}
.pro_view .sub_tit span.tit_s{font-size: 1rem; letter-spacing: 1.5px; margin-bottom: 8px; font-weight: 700;}

.pro_v2_list{margin: 100px auto 0; width: 100%; max-width: 1100px; font-size: 0;}
.pro_v2_list li{position: relative; display: inline-block; margin-bottom: 35px; padding: 0 30px; vertical-align: top; width: 50%;}
.pro_v2_list li::before{position: absolute; content: ''; left: 0; top: 0.35rem; width: 10px; height: 10px; border: 3px solid #018092; box-sizing: border-box;}
.pro_v2_list li p.pro_v2_tit{margin-bottom: 5px; font-size: 1rem; line-height: 1.3; letter-spacing: 1.8px; color: #000; font-weight: 800;}
.pro_v2_list li .pro_v2_desc{display: block; font-size: 1rem; line-height: 1.3; color: #595959; word-break: keep-all;}
.pro_v2_list li.bottom{margin-bottom: 0;}


/*pro_view3*/
.pro_v3_table{margin: 50px auto 60px; width: 100%; max-width: 1100px; border-collapse: collapse;}
.pro_v3_table th{padding: 20px; width: 240px; max-width: 20%; height: 100%; text-align: left; background: #018092; font-size: 0.9rem; line-height: 1.3; color: #fff; border-bottom: 1px solid #fff; font-weight: 400;}
.pro_v3_table th span{display: inline-block; margin-left: 5px; font-size: 0.85rem; font-weight: 300; color: #d9d9d9;}
.pro_v3_table td{padding: 20px; width: 80%; border-bottom: 1px solid #d9dde5; font-size: 0.9rem; line-height: 1.3; color: #666; word-break: keep-all;}
.pro_v3_table tr:first-child th{border-top: 2px solid #018092;}
.pro_v3_table tr:first-child td{border-top: 2px solid #018092;}

.pro_view3 a.moreBtn{transition: all 0.4s;}
.pro_view3 a.moreBtn span::before{background: url('../img/sub/s3/list_icon.png') center no-repeat; background-size: cover;}



/*sub_2_3*/
.compare_ul{margin: 50px auto 100px;width: 100%;max-width: 1100px;font-size: 0;}
.compare_ul > li{display: inline-block; vertical-align: top; transition: all 0.4s;}
.compare_ul > li.compare_tit{margin-right: 5%; width: 280px; max-width: 25%; text-align: center;}

ul.tabs{width: 100%; border: 1px solid #ddd;}
ul.tabs li{padding: 25px 0; width: 100%; font-size: 1rem; line-height: 1.3; color: #404040; border-bottom: 1px solid #ddd; cursor: pointer; transition: all 0.4s;}
ul.tabs li.current{background: #018092; color: #fff;}
ul.tabs li:last-child{padding: 30px 0; border-bottom: 0;}
ul.tabs li:hover{background: #f2f2f2; color: #018092;}

.compare_ul > li.compare_con{position: relative;width: 70%;}

.tab-content{position: absolute; left: 0; top: 0; width: 100%; transition: all 0.4s; opacity: 0;}
.tab-content.current{opacity: 1; z-index: 10;}
.tab-content#tab-1{position: relative; left: auto; top: auto;}

ul.imgbox{width: 100%; font-size: 0;}
ul.imgbox li{display: inline-block; width: 47.5%; vertical-align: middle;}
ul.imgbox li:first-child{margin-right: 5%}
ul.imgbox li img{width: 100%;}
ul.imgbox li p{margin-top: 15px; font-size: 0.9rem; line-height: 1.3; color: #595959; transition: all 0.4s;}
ul.imgbox li:hover p{font-weight: 700; color: #333;}


/*sub_3_2*/

/*s321*/
.s321{position: relative;width: 100%;background: url('../img/sub/s3/s321_deco.png') -250px 300px no-repeat;}
.s321::before{position: absolute; content: ''; top: 0; right: 0; width: 50%; height: 100%; background: #f7f7f7;}
.s321_ul{width: 100%; font-size: 0;}
.s321_ul > li{display: inline-block; vertical-align: top;}

.s321_ul .s321_left{width: 45%;padding-right: 5%;padding-top: 8%;}
.s321 .s321_tit{font-size: 2.2rem; font-weight: 800; color: #1a1a1a;}
.s321 .tit_s{text-transform: lowercase;}
.light{display: block; font-weight: 400;}

.s321_ul .s321_right{padding: 8% 0 8% 5%; width: 55%; background: #f7f7f7; }
.s321_ul .s321_right .swiper-wrapper{height: auto;}
.s321_ul .s321_right .swiper-slide{height: auto !important;}

.s321_item{margin-bottom: 10%; padding: 0 18% 10% 8%; width: 100%; border-bottom: 1px solid #ddd; cursor: pointer;}
.swiper-slide:last-child .s321_item{margin-bottom: 0; padding-bottom: 0; border-bottom: 0;}
.s321_item img{margin-bottom: 15px; width: 100%; max-width: 100px;}
.s321_item p.s321_item_top{position: relative; margin-bottom: 40px; font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: #404040}
.s321_item p.s321_item_top .s321_more{display: inline-block; position: absolute; right: 0; bottom: 0; font-size: 14px; color: #018092; font-weight: 300; cursor: pointer;}
.s321_item p.s321_item_top .s321_more span{display: inline-block; margin-right: -10px; vertical-align: middle; transition: all 0.4s; text-transform: uppercase; opacity: 0;}
.s321_txt .swiper-slide:hover .s321_more span{opacity: 1; margin-right: 0px;}
.s321_item p.s321_item_top .s321_more i{margin-left: 10px; font-weight: 20px; vertical-align: middle;}
.s321_item p.s321_item_bot{font-size: 0.9rem; line-height: 1.5; color: #595959; font-weight: 400; word-break: keep-all;}

.s3_pop{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(215,214,214,0.9); transition: all 0.4s; opacity: 0; z-index: -1;}
.s3_pop .inner{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 9vh 0; width: 90%; height: 85vh; max-width: 1200px; background: #fff; text-align: center; box-shadow: 5px 5px 15px rgba(0,0,0,0.2);}
.s3_pop .inner .swiper-container{width: 90%; height: 100%; margin: 0 auto;}
.s3_pop .inner .pop_txtbox{position: relative; width: 90%; max-width: 1000px; margin: auto; font-size: 0;}
.s3_pop .inner .pop_txtbox img{display: inline-block; width: 75px; margin-right: 15px; vertical-align: middle;}
.s3_pop .inner .pop_txtbox p.info_txt{display: inline-block; width: calc(100% - 95px); vertical-align: middle;text-align: left; font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: #404040;}
.s3_pop .inner .pop_txtbox p.info_txt span{display: block; font-size: 0.95rem; line-height: 1.3; color: #9d9d9d; font-weight: 300;}

.s3_pop .inner .pop_imgbox{margin: 5% auto 0; width: 90%; max-width: 1000px;}
.s3_pop .inner .pop_imgbox img{width: 100%;}

.pop_close{position: absolute; right: 3%; top: 3vh; font-size: 35px; color: #018092; cursor: pointer; transition: all 0.4s; z-index: 10; opacity: 0.5;}
.pop_close:hover{opacity: 1;}

.s3_pop .s3_prev, .s3_pop .s3_next{top: 55%; font-size: 40px; color: #018092;}
.s3_pop .s3_prev{left: 3.5%}
.s3_pop .s3_next{right: 3.5%}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{display: none;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{display: none;}

.s321_pop.show{opacity: 1; z-index: 999;}
.s322_pop.show{opacity: 1; z-index: 999;}

/*s322*/
.s322 .swiper-container{margin-top: 80px; width: 100%;}
.s322 .swiper-wrapper{justify-content: center; height: auto;}
.s322 .swiper-slide{margin-right: 30px; width: 30%; height: 340px; }
.s322 .swiper-slide:nth-child(2){margin-right: 0}

.s322_item{position: relative; width: 100%; height: 100%; border: 1px solid #ddd; cursor: pointer; transition: all 0.4s;}
.s322_item .s322_item_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../img/sub/s3/s322_bg1.png') center no-repeat; background-size: cover; opacity: 0; transition: all 0.4s;}
.s322_item .s322_item_bg.bg2{background: url('../img/sub/s3/s322_bg2.png') center no-repeat; background-size: cover;}

.s322_item .s322_txtbox{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center;}
.s322_item .s322_txtbox .s322_icobox{position: relative; width: 100%; max-width: 165px; margin: 0 auto 30px;}
.s322_item .s322_txtbox .s322_icobox img{width: 100%;}
.s322_item .s322_txtbox .s322_icobox img:nth-child(2){position: absolute; left: 0; top: 0; opacity: 0;}

.s322_item .s322_txtbox .s322_p{font-size: 1.5rem; font-weight: 800; color: #1a1a1a;}
.s322_item .s322_txtbox .s322_p span{display: block; margin-top: 8px;  font-size: 0.9rem; color: #9d9e9e; font-weight: 300; line-height: 1.3;}

.s322_item:hover .s322_item_bg{opacity: 1;}
.s322_item:hover .s322_txtbox .s322_icobox img:nth-child(1){opacity: 0;}
.s322_item:hover .s322_txtbox .s322_icobox img:nth-child(2){opacity: 1;}
.s322_item:hover .s322_txtbox .s322_p, .s322_item:hover .s322_txtbox .s322_p span{color: #fff;}


.s3_pop .inner .pop_imgbox{margin: 3.5% auto 0; width: 90%; max-width: 1000px; height: 85%; overflow-y: auto;}

.s3_pop .inner .pop_imgbox::-webkit-scrollbar { width: 5px; height: 5px;}
.s3_pop .inner .pop_imgbox::-webkit-scrollbar-thumb { background-color: #666666;}
.s3_pop .inner .pop_imgbox::-webkit-scrollbar-track { background-color: #e3e3e3; }

.s3_pop .inner .mob{display: none; width: 90%; margin: auto; margin-top: 2vh; font-size: 0.8rem; color: #9d9d9d; font-weight: 300; text-align: left;}


/*sub_3_3*/ 

/*s331*/
.s331_con{margin: auto; width: 100%; max-width: 550px; text-align: center;}
.s331_con .s331_imgbox{margin-bottom: 30px; width: 100%; height: 550px; overflow: hidden;}
.s331_con .s331_imgbox img{width: 100%; transition: all 0.4s;}
.s331_con:hover .s331_imgbox img{transform: scale(1.1);}
.s331_con p{margin-bottom: 20px; font-size: 1.2rem; color: #000; font-weight: 600; line-height: 1.3;}

.moreBtn_wrap{margin: auto; width: 90%; max-width: 1200px; text-align: center; }
.moreBtn{display: inline-block; padding: 20px 0; width: 200px; text-align: center; text-transform: uppercase; background: #018092; border-radius: 30px; transition: all 0.4s;}
.moreBtn span{position: relative; display: inline-block; padding-left: 35px; font-size: 13px; color: #ffff; line-height: 1; }
.moreBtn span::before{position: absolute; content: ''; left: 0; top: 50%; transform: translate(0, -50%); width: 15px; height: 15px; background: url('../img/sub/s3/down_icon.png') center no-repeat; background-size: cover;}
.moreBtn:hover {box-shadow: 3px 3px 6px rgb(0 0 0 / 40%);}



/*게시판*/
.sub_board{width: 90%; max-width: 1200px; margin: 0 auto 27vh;}
.tbl_head01{margin-top: 20px;}

.login_div{display: none;}

#bo_v_con{font-size: 0.9rem; color: #000;}
#bo_v_atc{border-bottom: 1px solid #ececec; padding-bottom: 5vh}
.btn_v_01 a{ font-size: 0.9rem; height: auto; line-height: 1.3; padding: 8px 15px !important; box-sizing: border-box; font-weight: normal; border-radius: 0px; transition: all 0.4s; background-color: #018092; color: #fff;}

.pg_wrap { width: 100%; text-align: center;}
.pg_current {background: #fff !important; color: #737373 !important; padding: 0px 5px !important; min-width: 30px !important; text-decoration: underline !important;}
.pg_page {color: #737373 !important; line-height: 30px !important; padding: 0 5px !important; min-width: 30px !important; background-color: #fff !important;}
.pg_page, .pg_current {border: 0px !important; font-size: 0.9rem;}


/*sub_4_2*/
.sub_4_2{margin-bottom: 20vh;}