/* common */
.wrap { width: 1400px; }
.cp { color:#12683f; }
.cb { background: #12683f; color:#fff; }
#w_header, section, #w_footer { font:18px/1.6 stm; }
.pad { padding:150px 0 300px; }

/* header & footer */
#w_header { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; transition:0.3s; height: 90px; overflow: hidden; color:#fff; }
#w_header.up { top:-92px; }
#w_header.fix { background: rgba(0,0,0,0.8); }
#w_header.down { background: rgba(0,0,0,0.8); height: 340px; }

#w_header:before { content:""; border-top:1px solid #ddd; opacity: 0.5; position: absolute; left: 0; top: 90px; width: 100%; }
#w_header h1 { padding-top: 16px; }
#w_header #w_gnb { position: absolute; top: 0; right: 100px; }
#w_header #w_gnb > li { float:left; margin-right: 60px; position: relative; }
#w_header #w_gnb > li > a { line-height:90px; padding:0 14px;}
#w_header #w_gnb > li > a:after { content:""; width: 0; height: 3px; background: #f0ebd8; top:89px; left: 0; position: absolute; transition:0.3s; }
#w_header #w_gnb > li:hover > a:after { width: 100%; }
#w_header #w_gnb ul { position: absolute; left: 0; font-family: stm; white-space: nowrap; line-height:1.2; padding-top: 20px; font-weight: normal; }
#w_header #w_gnb ul li { margin-bottom: 16px; }
#w_header #w_gnb ul li a { opacity: 0.6; padding:0 14px; border-bottom:1px solid rgba(255,255,255,0); padding-bottom: 4px; display: inline-block; }
#w_header #w_gnb ul li:hover a { border-bottom:1px solid #f0ebd8; opacity: 1; }

#w_header .lang { position: absolute; right: 0; top: 32px; background: none; color:#fff; border:none; padding-right: 10px;  }
#w_header .lang option { background: #000; }

#w_footer { background: #000; padding:60px 0 80px; color:#666; }
#w_footer img { opacity: 0.3; }
#w_footer address { margin-top: 50px; font-style: normal; line-height:1.8; }
#w_footer address strong { display: block; margin-bottom: 20px; }
#w_footer .b_gnb { position: absolute; left: 450px; top: 0; }
#w_footer .b_gnb > li { float:left; margin-right: 100px; }
#w_footer .b_gnb > li > a { color:#fff; font-family: steb; }
#w_footer .b_gnb > li > ul { position: absolute; line-height:1.8; padding-top: 20px; font-family: stb; }
#w_footer p { position: absolute; right: 0; bottom: 0; } 

#top_btn { border-radius: 50px; transition:0.3s; opacity: 0; }
#top_btn.on { opacity: 1; }

.w_top { position:fixed; bottom:2.08vw; right:2.08vw; background: #fff; border:1px solid #e4e4e4; border-radius: 50%; width:3.33vw; height:3.33vw; display:flex; align-items: center; justify-content: center; transition:opacity 0.5s; z-index:9; font-size:20px; font-weight: 900; opacity: 0; }
.w_top.on { opacity: 1; }


/* index */
.section { overflow: hidden; }
.section:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; transform: scale(1.05); transition-duration: 0.5s; }
#section0:before { background: url(/images/bg1.png) no-repeat center/cover; }
#section1:before { background: url(/images/bg2.png) no-repeat center/cover; }
#section2:before { background: url(/images/bg3.png) no-repeat center/cover; }
#section3:before { background: url(/images/bg4.png) no-repeat center/cover; }
.section.active:before { transform:scale(1); transition:1s 0.5s; }
.more { font-size:16px; font-weight: 600; justify-content: space-between; margin-top: 40px; }
.more a { margin-left: 20px; }
.arrow { justify-content: space-between; }
.arrow:before { content:""; width: 60px; height: 2px; background: #999; animation: arr 2s infinite; }
.arrow:after { content:""; display: block; width: 10px; height: 10px; border-right: 2px solid #999; border-bottom:2px solid #999; margin-left: -9px; transform: rotate(-45deg); }

@keyframes arr { 
    0%, 100% { width: 60px; }
    50% { width: 120px; }
}

div#fp-nav ul li:last-child { display: none; }
div#fp-nav ul li a span, .fp-slidesNav ul li a span { background: #fff; }


.space h2 + div { margin-top: 60px; }
.space h2 + div p { margin-top: 60px; font-weight: 400; }
.space .arrow:before { background: #fff; }
.space .arrow:after { border-color:#fff; }


@keyframes circle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#section0 .ment h3 {margin-bottom: 60px;}
#section1 .ment { width: 660px; margin-left: auto; margin-top: 10px;  }
#section2 .ment { margin-top: 150px; }
#section2 .circle { position: absolute; right: 40px; top: 40px; animation: circle 10s linear infinite;}
#section3 .ment { margin-left: auto; width: 620px; }
#section3 .ment h3 { margin-top: 40px; }
#section3 .ment .f50 { margin-top: 60px;  }



/* sub layout */
.sv { height: 360px; position: relative; overflow: hidden;}
.sv:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: bg_sv 2s ease-in-out; }
.sv h2 { position: relative; padding-top: 60px; }

#sv1:before { background:url(/images/bg_sub1.png) no-repeat center/cover; }
#sv2:before { background:url(/images/bg_sub2.png) no-repeat center/cover; }
#sv4:before { background:url(/images/bg_sub4.png) no-repeat center/cover; }

nav.sm { background: #000; position: relative; }
nav.sm ul { display:flex; align-items: center; justify-content: center; height: 50px; }
nav.sm ul li { margin:0 35px; }
nav.sm ul li.select { color:#12683f; font-family: sth;}


@keyframes bg_sv {
    0% { transform: scale(1.1); }
    100% { transform: scale(1); }
}


/* sub1_1 */
.title { color:#12683f; font:16px steb; text-transform: uppercase; }
#sub1_1 .cont1 figure { border-radius: 20px; overflow: hidden; }
#sub1_1 .cont1 article { width: 680px; }
#sub1_1 .cont1 article div { position: absolute; right: 0; bottom: 0; width: 680px; }

#sub1_1 .cont2 li { width: 33.3333%; border-right:2px solid #12683f; box-sizing: border-box; }
#sub1_1 .cont2 li:last-child { border-right:none; }
#sub1_1 .cont2 li figure { height: 180px; }

#sub1_1 .cont3 { position: relative; }
#sub1_1 .cont3 img { width: 100%; height: 330px; }
#sub1_1 .cont3 article { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

#sub1_1 .cont4 ul li { align-items: stretch; }
#sub1_1 .cont4 ul li:nth-child(2) { flex-direction: row-reverse; }
#sub1_1 .cont4 ul li article { width:calc(100% - 919px); box-sizing: border-box; padding:60px; position: relative; } 
#sub1_1 .cont4 ul li article h3 span { display: block; } 
#sub1_1 .cont4 ul li article dl { position: absolute; left: 60px; bottom: 60px; }

.left { width: 440px; float:left; }
.right { width: 920px; float:right; }

#sub1_1 .cont5 .graph li p span { font-size:150px; }
#sub1_1 .cont5 .graph li div { height: 40px; border:1px solid #000; border-radius: 40px; overflow: hidden; position: relative; box-sizing: content-box; }
#sub1_1 .cont5 .graph li div * { font-style: normal; position: absolute; top: 0; line-height:40px;}
#sub1_1 .cont5 .graph li div em { left: 30px; z-index:1; }
#sub1_1 .cont5 .graph li div i { left:550px; color:#333; z-index:1;}
#sub1_1 .cont5 .graph li div b { left: 0; border-radius: 0 40px 40px 0; height: 40px;  width: 0; transition:2s 0.5s;}
#sub1_1 .cont5 .graph li:first-child em { left:14px; }
#sub1_1 .cont5 .graph li.aos-animate:nth-child(1) div b { width: 40px; }
#sub1_1 .cont5 .graph li.aos-animate:nth-child(2) div b { width: 160px; }
#sub1_1 .cont5 .graph li.aos-animate:nth-child(3) div b { width: 350px; }
#sub1_1 .cont5 .graph li.aos-animate:nth-child(4) div b { width: 470px; }

#sub1_1 .cont6 ul { flex-wrap: wrap; }
#sub1_1 .cont6 ul li { width:33.3333%; aspect-ratio: 1 / 1; border-right:2px solid #12683f; border-bottom:2px solid #12683f; box-sizing: border-box; }
#sub1_1 .cont6 ul li:nth-child(3n) { border-right:none; }
#sub1_1 .cont6 ul li:nth-child(n+7):nth-child(-n+9) { border-bottom:none; }
#sub1_1 .cont6 ul li img { opacity: 0.5; transition:0.3s; }
#sub1_1 .cont6 ul li:hover img { opacity: 1; }

/* sub1_2 */
#sub1_2 .cont1 p { line-height:2; }
#sub1_2 .cont2 .right { line-height:1.8; }
#sub1_2 .cont3 figure { overflow: hidden; }
#sub1_2 .cont3 figure img { transition:0.3s; scale:1; }
#sub1_2 .cont3 li:hover figure img { scale:1.1; }
#sub1_2 .cont3 article { height: 320px; padding:40px; box-sizing: border-box; }

#sub1_2 .cont4 .prdSlide { position: relative; width:2400px; }
#sub1_2 .cont4 ul li { border-radius: 20px; overflow: hidden; position: relative;  }
#sub1_2 .cont4 ul li img { width: 100%; height: 380px; }
#sub1_2 .cont4 ul li article { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); opacity: 0; transition:0.3s; }
#sub1_2 .cont4 ul li:hover article { opacity: 1; }
#sub1_2 .cont4 ul li article a { position: absolute; right: 40px; top: 40px; font-size:50px; transform: rotate(45deg);  }
#sub1_2 .cont4 ul li article p { position: absolute; left: 40px; bottom: 40px; }
#sub1_2 .cont4 .prdSlide .swiper-button-next { right:auto; left:1340px; width: 60px; height: 60px; border:1px solid #12683f; border-radius: 60px; background: #fff; }
#sub1_2 .cont4 .prdSlide .swiper-button-next:after { font-size:22px; font-weight: 900; margin-left: 4px;}


/* sub1_3 */
#sub1_3 .cont1 .right li { width: 270px; float:left; }
#sub1_3 .cont1 .right li img { aspect-ratio: 270 / 380; width: 100%;}
#sub1_3 .cont1 .right li:nth-child(2) { width: 400px; margin-left: 60px;}

#sub1_3 .cont2 { align-items: end; }
#sub1_3 .cont2 .left img { border-radius: 0 20px 20px 0; margin-left: -260px; height: 880px; }
#sub1_3 .cont2 .right ul li { width: 440px; height: 420px; border:1px solid #12683f; border-radius: 20px; position: relative; float:left; margin:40px 40px 0 0; box-sizing: border-box; padding:40px; }
#sub1_3 .cont2 .right ul li:nth-child(2n) { margin-right: 0; }
#sub1_3 .cont2 .right ul li strong { font-weight: 700; }
#sub1_3 .cont2 .right ul li figure { border-radius: 120px; position: absolute; right: 40px; top: 40px; width: 116px; height: 116px; overflow: hidden; text-align: center; }
#sub1_3 .cont2 .right ul li figure i { font-size:60px; padding-top: 16px; }
#sub1_3 .cont2 .right ul li figure:after { content:""; width: 50px; height: 4px; background: #fff; display: block; margin:0px auto 0; }
#sub1_3 .cont2 .right ul li dl { position: absolute; left: 40px; bottom: 40px; }
#sub1_3 .cont2 .right ul li dl dd { color:#000; margin-top: 4px; }

#sub1_3 .cont3 h2 { margin-bottom: 20px; }
#sub1_3 .cont3 div:nth-child(2) img { margin-left: -10px; }
#sub1_3 .cont3 ul li { margin-top: 20px; display:flex; align-items: center; justify-content: start; }
#sub1_3 .cont3 ul li strong { color:#83b09b; width: 40px; }

#sub1_3 .cont4 article { width: 680px; }
#sub1_3 .cont4 strong { display: block; }
#sub1_3 .cont4 ul { width: 440px; margin:50px auto 0; flex-wrap: wrap; position: relative; }
#sub1_3 .cont4 ul:before { content:""; width: 360px; height: 360px; border:1px solid #12683f; border-radius: 360px; position: absolute; left:50%; top: calc(50% + 20px); transform: translate(-50%, -50%); }
#sub1_3 .cont4 ul li { border:1px solid #12683f; border-radius: 200px; box-sizing: border-box; width: 200px; height: 200px; margin-top: 40px; background: #fff; position: relative; text-align: center; line-height:1.3;}

#sub1_3 .cont5 div.fl { width: 920px; margin:120px auto 0;}
#sub1_3 .cont5 div.fl > div { width: 440px; }
#sub1_3 .cont5 div.fl > div ul { position: relative; height: 640px; } 
#sub1_3 .cont5 div.fl > div ul:before { border-left:1px solid #12683f; height: 530px; position: absolute; left: 50%; bottom:110px; content:""; opacity: 0; transition:0.5s 2s; }
#sub1_3 .cont5 div.fl > div ul:after { content:""; width: 7px; height: 7px; border:1px solid #12683f; transform: rotate(45deg) translateX(-50%); position: absolute; left: 50%; bottom:107px; border-top:none; border-left:none; margin-left: -1px; opacity: 0; transition:0.5s 2s;}
#sub1_3 .cont5.aos-animate div.fl > div ul:before,
#sub1_3 .cont5.aos-animate div.fl > div ul:after { opacity: 1; }
#sub1_3 .cont5 div.fl > div ul li { height: 70px; border:1px solid #12683f; border-radius: 100px; box-sizing: border-box; line-height: 1.2; margin-bottom: 40px; position: relative; background: #fff; }
#sub1_3 .cont5 div.fl > div ul li.cb { background: #12683f; }
#sub1_3 .cont5 div.fl > div ul li:last-child { position: absolute; left: 0; bottom: 0; width: 100%; margin-bottom: 0; height: 90px; }
#sub1_3 .cont5 div.fl > div figure { height: 156px; margin-top: 40px; }

#sub1_3 .cont6 { position: relative; }
#sub1_3 .cont6 img { width: 100%; }
#sub1_3 .cont6 .wrap { position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); }
#sub1_3 .cont6 strong { display: block; margin-bottom: 20px; }

#sub1_3 .cont7 h3 { width: 400px; height: 400px; text-align: center; border-radius: 400px; position: relative; margin-left: 20px; }
#sub1_3 .cont7 h3:before { content:""; height: 398px; border-left:1px solid #12683f; position: absolute; left: 50%; top: 0; transition:1s 2s; z-index: -1; }
#sub1_3 .cont7 h3:after { content:""; width: 7px; height: 7px; border:1px solid #12683f; transform: rotate(45deg) translateX(-50%); position: absolute; left: 50%; bottom:0; border-top:none; border-left:none; margin-left: -1px; transition:1s 2s; display: block; }
#sub1_3 .cont7.aos-animate h3:before { top:100%; }
#sub1_3 .cont7.aos-animate h3:after { bottom:-100%;}

#sub1_3 .cont7 ul li { width: 410px; margin-top: 40px; justify-content: start; position: relative; }
#sub1_3 .cont7 ul li:first-child { margin-top: 0; }
#sub1_3 .cont7 ul li .gt { position: absolute; font-size:40px; left: -66px;}
#sub1_3 .cont7 ul li .gt i:last-child { margin-left: -40px; }
#sub1_3 .cont7 ul li figure { width: 200px; height: 200px; border:1px solid #12683f; box-sizing: border-box; border-radius: 200px; margin-right: 10px; }
#sub1_3 .cont7 ul li figure figcaption { line-height:1.2; margin-top: 10px; }
#sub1_3 .cont7 ul li:nth-child(1),
#sub1_3 .cont7 ul li:nth-child(3) { margin-left: -40px; }
#sub1_3 .cont7 ul li:nth-child(1) .gt { transform: rotate(-45deg); bottom:-40px; left:-46px; }
#sub1_3 .cont7 ul li:nth-child(3) .gt { transform: rotate(45deg); top:-40px; left:-46px; }

#sub1_3 .cont8 { width: 440px; border:1px solid #12683f; border-radius: 20px; padding:50px 0; }
#sub1_3 .cont8 li { margin-top: 60px; }
#sub1_3 .cont8 li p { margin-top: 10px; }

#sub1_3 .cont9 { position: relative; }
#sub1_3 .cont9 img { width: 100%; }
#sub1_3 .cont9 p { position: absolute; left: calc(50% + 20px); top: 50%; transform: translateY(-50%); }

#sub1_3 .cont10 .right li { width: 270px; float:left; margin:0 55px 55px 0; cursor: pointer; }
#sub1_3 .cont10 .right li img { aspect-ratio: 270 / 380; width: 100%; }


.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 9999; }
.modal.on { display:flex; }
.modal img { max-width: 60vw; max-height: 70vh; }










/* sub2_1 */
#sub2_1 .cont2 li { float:left; width: 440px; margin-right: 40px; margin-bottom: 40px; border-radius: 20px; overflow: hidden; position: relative; } 
#sub2_1 .cont2 li img { width: 100%; aspect-ratio: 1 / 1; } 
#sub2_1 .cont2 li div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.65); transition:0.3s; opacity: 0; }
#sub2_1 .cont2 li:hover div { opacity: 1; }
#sub2_1 .cont2 li div a { background: #fff; border:1px solid #12683f; border-radius: 50px; height: 50px; text-align: center; width: 180px; margin-top: 50px; }
#sub2_1 .cont2 li div a i { margin-left: 10px; font-weight: 600; }


/* detail */
.detail .prdCate { width: 240px; position: absolute; left: 0; top:-20px; border:2px solid #12683f; border-radius: 25px; overflow: hidden; background: #fff; z-index:1; min-height: 50px; }
.detail .prdCate:before { content:""; display: block; height: 46px; }
.detail .prdCate p { height: 50px; position: absolute; top:-2px; left: -2px; line-height:47px; border:2px solid #12683f; border-radius: 25px; width: 240px; padding-left: 30px; cursor: pointer; }

.detail .prdCate p i { position: absolute; right: 30px; top:50%; transform: translateY(-50%); font-weight: 900; }
.detail .prdCate ul { display: none; }
.detail .prdCate ul li { line-height:50px; font:18px/1.5 stm; }
.detail .prdCate ul li a { padding-left: 40px; display: block; border-radius: 40px;  padding:10px 0 10px 30px;}
.detail .prdCate ul li:hover a { background: #eee; }
.detail .prdCate ul li.select a { background: #12683f; color:#fff;}


.detail .cont1 { border-bottom:1px solid #ddd;}
.detail .cont1 figure { width: 680px; }
.detail .cont1 figure img { width: 100%; }
.detail .cont1 article { width: 680px; }
.detail .cont1 article strong,
.detail .cont1 article span { display: block; } 
.detail .cont1 article a { width: 220px; height: 50px; border-radius: 50px; position: absolute; left: calc(50% + 20px); bottom: 40px; padding-left: 10px; }
.detail .cont1 article a i { margin-left: 10px; position: relative; top: -1px; }

.detail .cont2 { position: relative; height: 2000px;  }
.detail .cont2.auto { height:auto; }
.detail .cont2:after { content:""; height: 200px; position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(transparent, #fff); pointer-events: none; }
.detail .cont2.auto:after { display: none; }
.detail .cont2 .xi-arrow-down { width: 100px; height: 100px; border-radius: 100px; position: absolute; left:calc(50% - 50px); bottom:0; z-index: 1; }
.detail .cont2.auto .xi-arrow-down { display: none; }

.detail .cont2 img { max-width: 100%; }



/* sub4_1 */
#sub4_1 form ul li { float:left; width:calc((100% - 40px) / 2); margin:0 40px 40px 0; }
#sub4_1 form ul li:nth-child(2n) { margin-right: 0; }
#sub4_1 form ul li input { width: 100%; height: 50px; box-sizing: border-box; border:none; background: #f0f0f0; padding:0 30px; box-sizing: border-box; border-radius: 50px; font:18px stb; }
#sub4_1 form ul li:last-child { width: 100%; margin-right: 0; }
#sub4_1 form ul li textarea { width: 100%; height:300px; box-sizing: border-box; border:none; background: #f0f0f0; padding:30px; border-radius: 25px; font:18px stb; }
#sub4_1 form input[type="submit"] { width: 240px; height: 60px; border-radius: 60px; background: #12683f; color:#fff; cursor: pointer; border:2px solid #12683f; transition:0.3s; }
#sub4_1 form input[type="submit"]:hover { background: #fff; color:#12683f;}


/* sub4_2 */
#sub4_2 .right li { margin-bottom: 20px; position: relative; padding-left: 150px; }
#sub4_2 .right li strong { position: absolute; left: 0; }

/* sub4_3 */
#sub4_3 .right { width: 960px; }
#sub4_3 #bo_gall .gall_li { width: 300px; margin-right:30px; }
#bo_v_title .bo_v_tit { font-family: steb; }
.pg_current { background: #12683f; border-color:#12683f; }


@media (min-width:801px) {
    #sub1_3 .cont10 .right li:nth-child(3n) { margin-right: 0; }


    #sub2_1 .cont2 li:nth-child(3n) { margin-right: 0; } 
    #sub2_1 .cont2 li:nth-child(3n+1) { clear: both; } 

    #sub4_3 #bo_gall .gall_li:nth-child(3n) { margin-right: 0; }
    #sub4_3 #bo_gall .gall_li:nth-child(3n+1) { clear: both; }

}