/* header & footer */
#w_header { position: fixed; width: 100%; z-index: 99; height: 80px; border-bottom:1px solid rgba(0,0,0,0.1); transition:0.3s; top: 0; color:#888; }
#w_header.up { top:-81px; }
#w_header.fix { background:#fff; color:#000; border-bottom:1px solid rgba(0,0,0,0.1) !important; }
#w_header.down { height: 360px; background: #fff; color:#000; }

#w_header h1 { padding-top: 15px; }
#w_header:before { content:""; position: absolute; left: 0; top: 80px; border-bottom:1px solid rgba(0,0,0,0.1); width:100%; }
#w_header #w_gnb { align-items: start; position: absolute; right: 340px; top: 0; }
#w_header #w_gnb > li:last-child { margin-right: 0; }
#w_header #w_gnb > li > a { line-height:80px; padding:0 40px; position: relative; transition:0.3s; }
#w_header #w_gnb > li > a:after { content:""; width: 0; height: 3px; background: #000; display: block; position: absolute; left: 50%;  top: 48px; transition: 0.3s; }
#w_header #w_gnb > li:hover > a:after,
#w_header #w_gnb > li.select > a:after { width: calc(100% - 64px); left: 32px; }
#w_header #w_gnb > li:hover > a,
#w_header #w_gnb > li.select > a { color:#000; }
#w_header #w_gnb ul { position: absolute; padding-left: 40px; font-family: ptm; }
#w_header #w_gnb ul li { padding-top: 22px; white-space: nowrap;}
#w_header #w_gnb ul li a { position: relative; display: inline-block; }
#w_header #w_gnb ul li a:after { content:""; position: absolute; left: 50%; transform: translateX(-50%); width:0; border-top:1px solid #000; bottom:-3px; transition:0.3s; }
#w_header #w_gnb ul li a:hover:after { width:calc(100% + 16px); }
#w_header .contact { border-radius: 50px; position: absolute; right: 80px; top: 20px; border:2px solid #000; box-sizing: border-box; transition:0.3s; width: 180px; height: 40px; line-height: 34px; text-align: center; }
#w_header .contact:hover { background: #fff; color:#000;}
#w_header .lang { position: absolute; right: 0; top: 24px; height: 26px; }
#w_header .lang select { background:none; border:none; padding-right: 10px; height: 26px; color:inherit; }
#w_header .lang select option { color:#000; }

#w_header.wh { border-bottom: none; }
#w_header.wh #w_gnb { color:#fff; }
#w_header.wh h1 img { filter: brightness(0) invert(1); }
#w_header.wh .lang select { color:#fff; }
#w_header.fix #w_gnb, #w_header.down #w_gnb { color:#888; }
#w_header.fix h1 img, #w_header.down h1 img { filter: none; }
#w_header.fix .lang select, #w_header.down .lang select { color:#888; }

#w_footer { background: #000; color:#666; padding:60px 0 100px; }
#w_footer address { font-style:normal; }
#w_footer address p { margin-top: 20px; }
#w_footer address span { display: block; margin-bottom: 10px; }

#w_footer .gnb > li { float:left; margin-right: 70px; }
#w_footer .gnb > li > a { font:18px ptb; color:#fff; }
#w_footer .gnb ul { position: absolute; padding-top: 20px; font-size:16px; line-height:1.8;  }

#w_footer .copy ul li:first-child { margin-right: 20px; }
#w_footer .copy ul li a { width: 150px; height: 40px; background: #666; border-radius: 50px;}
#w_footer .copy p { text-align: right; position: absolute; right: 0; bottom: 0; }

/* index */
#main { height: 100vh; }
#main .swiper-button-next { color:#fff; right:60px; }
#main .swiper-button-prev { color:#fff; left:60px; }
#main .swiper-pagination { bottom:80px; }
#main .swiper-pagination .swiper-pagination-bullet { background: #fff; width: 12px; height: 12px; margin:0 10px; }
#main h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; font-weight: 700; width: 850px; }

#about h2 { text-transform: uppercase; }
#about p { margin-top: 40px; }
#about .more { margin-top: 100px; }
#about .prd li { width: 433px; position: relative; overflow: hidden; }
#about .prd li img { transition:0.3s; }
#about .prd li a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding:30px 30px 60px; box-sizing: border-box; transition: 0.3s; }
#about .prd li:hover a { background: rgba(0,0,0,0.5); }
#about .prd li:hover img { transform: scale(1.05); }
#about .prd li a div i { font-weight: bold; }
#about .prd li a div:last-child { position: absolute; top: 480px; left: 30px;text-align: left; }
#about .prd li a div:last-child h4 { margin-bottom: 20px; }

#process article { width: 433px; }
#process article dl { margin-top: 40px; }
#process article dl dd { margin-top: 20px; }

#process .swiper-pagination .swiper-pagination-bullet { background: #000; width: 12px; height: 12px; margin:0 0 0 20px; }
#process .proSlide { width: 916px; margin:0; }
#process .proSlide i { position: absolute; right: 30px; top: 30px; color:#fff; font-weight: bold; }

#process .control { position: absolute; left: 0; bottom: 0; width: 433px; }
#process .control .btn > div { position: static; background: #000; width: 60px; height: 60px; border-radius: 60px; font-size:20px; margin-right: 15px; box-sizing: border-box; border:2px solid #000; transition: 0.3s; }
#process .control .btn > div:after { font-size: 20px; }
#process .control .btn > div:hover { background: #fff; color:#000; }
#process .control .btn + div { width:auto; position: static; height: 60px; }

#rndb { margin-top: 160px; overflow: hidden; position: relative; margin-bottom: 160px; }
#rndb img { width: 100%; height: 590px; }
#rndb .wrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; }
#rndb p { margin-top: 100px; text-transform: uppercase; }

#cata { overflow: hidden; }
#cata ul { width:calc(360px * 18); justify-content: start; animation: slideIn 40s linear infinite; }
#cata ul li { margin-right: 60px; }
#cata ul li img { width: 300px; height: 300px; border-radius: 20px;  }
#cata > a { margin-top: 100px; }
#cata > a i { text-decoration: underline; margin-left: 10px; font-size:20px; }

@keyframes slideIn {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
#cata ul:hover {
    animation-play-state: paused;
}


#contact article p { margin-top: 20px;  }
#contact article > a { margin-top: 80px; display: inline-block; }
#contact article div { margin-top: 30px; }
#formmail { width: 916px;  }
#formmail ul li { float:left; width: 433px; margin-right: 50px; margin-bottom: 30px; }
#formmail ul li:nth-child(2n) { margin-right: 0; }
#formmail ul li:last-child { width: 100%; margin-right: 0; }
#formmail ul li input { width: 100%; height: 50px; background: #f0f0f0; border-radius: 25px; box-sizing: border-box; padding:0 30px; border:none; }
#formmail ul li textarea { width: 100%; height: 190px; background: #f0f0f0; border-radius: 25px; box-sizing: border-box; padding:30px; border:none; }
#formmail .more { width: 200px; cursor: pointer; }


/* sub layout */
.sv { height: 500px; padding-top: 80px; box-sizing: border-box; }
.sv h2 { font-weight: 800; }

.subVisual img { width: 100%; height: 365px; overflow: hidden; }

.left { max-width: 433px; float:left; }
.right { width: 966px; float:right; }


/* sub1_1 */
#sub1_1 .cont1 p { margin-top: 20px; }

#sub1_1 .cont2 { flex-wrap: wrap; }
#sub1_1 .cont2 li { margin-bottom: 50px; position: relative; overflow: hidden; }
#sub1_1 .cont2 li img { transform: scale(1); transition:0.3s; }
#sub1_1 .cont2 li p { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); text-align: center; opacity: 0; transition:0.3s; padding:10px; box-sizing: border-box; }
#sub1_1 .cont2 li:hover p { opacity: 1; }
#sub1_1 .cont2 li:hover img { transform: scale(1.1); }

#sub1_1 .cont3 > div { margin-top: 50px; }
#sub1_1 .cont3 article { width: 676px; }
#sub1_1 .cont3 article h3 { margin-bottom: 50px; }
#sub1_1 .cont3 article ul li { margin-top: 30px; position: relative; padding-left: 50px; }
#sub1_1 .cont3 article ul li span { color:#888; position: absolute; left: 0; }

#sub1_1 .cont4 .box { position: relative; }
#sub1_1 .cont4 .box:before { content:""; border:14px solid rgba(0,0,0,0.3); width: 350px; height: 100%; position: absolute; left: calc(25% - 14px); top: -14px; box-sizing: content-box; z-index: 1;}
#sub1_1 .cont4 .box_2:before { content:""; border:14px solid rgba(0,0,0,0.3); width: 350px; height: 100%; position: absolute; left: calc(50% - 14px); top: -14px; box-sizing: content-box; z-index: 1;}
#sub1_1 .cont4 .box_3:before { content:""; border:14px solid rgba(0,0,0,0.3); width: 350px; height: 100%; position: absolute; left: calc(75% - 14px); top: -14px; box-sizing: content-box; z-index: 1;}
#sub1_1 .cont4 table { width: 100%; margin-top: 50px; border-collapse: collapse; border-top:2px solid #000; }
#sub1_1 .cont4 table td { width: 25%; padding:20px; border-bottom:1px solid rgba(0,0,0,0.5); }
#sub1_1 .cont4 a { width: 250px; height: 250px; border-radius: 250px; margin:80px auto 0; display:flex; }
#sub1_1 .cont4 a span { line-height:1.2; }
#sub1_1 .cont4 a i { margin-right: 14px; text-decoration: underline; font-size:36px; }


/* sub1_4 */
#sub1_4 .right div { height: 150px; padding:40px 30px; box-sizing: border-box; color:#fff; position: relative; transition:0.3s; width: 100%; }
#sub1_4 .right div:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); transition:0.3s; }
#sub1_4 .right div:nth-of-type(1) { background:url(/images/pro1.png) no-repeat center/cover; }
#sub1_4 .right div:nth-of-type(2) { background:url(/images/pro2.png) no-repeat center/cover; }
#sub1_4 .right div:nth-of-type(3) { background:url(/images/pro3.png) no-repeat center/cover; }
#sub1_4 .right div:nth-of-type(4) { background:url(/images/pro4.png) no-repeat center/cover; }
#sub1_4 .right div.on { height: 480px; color:#000; }
#sub1_4 .right div.on:before { background:rgba(255,255,255,0.7); }
#sub1_4 .right div h3 { position: relative; padding-left: 80px; z-index: 1; }
#sub1_4 .right div h3 span { position: absolute; left: 0; }
#sub1_4 .right div p { opacity: 0; transition:0.3s; margin-top: 40px; padding-left: 80px; position: relative; z-index: 1; }
#sub1_4 .right div.on p { opacity: 1; }
#sub1_4 .right i { font-size:40px; margin:20px 0; }

/* sub2_1 */
#sub2_1 .cont1 h3 { margin-bottom: 60px; }
#sub2_1 .cont1 img { margin-top: 100px; width: 100%; }

#sub2_1 .cont3 .left { width: 290px; }
#sub2_1 .cont3 .left li { opacity: 0.5; border-bottom:1px solid #fff; }
#sub2_1 .cont3 .left li.on { border-color:#000; opacity: 1; }
#sub2_1 .cont3 .left li a { height: 50px; }
#sub2_1 .cont3 .left li a i { opacity: 0; }
#sub2_1 .cont3 .left li.on a i { opacity: 1; }
#sub2_1 .cont3 .right ul { display: none; flex-wrap: wrap; justify-content: start;}
#sub2_1 .cont3 .right ul.on { display: flex; }
#sub2_1 .cont3 .right ul li { width: 300px; margin-right: 33px; margin-bottom: 60px; }
#sub2_1 .cont3 .right ul li img { width: 100%; height: 235px; }
#sub2_1 .cont3 .right ul li p { margin-top: 10px; }

.photo { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; }
.photo.on { display:flex; }
.photo .area { max-width: 80%; max-height: 80%; }


/* sub3_1 */
#sub3_1 .cont1 .left p { margin-top: 50px;  }

/* sub3_3 */
#sub3_3 .cont1 .right { border-top:2px solid #000; }
#sub3_3 .cont1 .right li { border-bottom:1px solid rgba(0,0,0,0.5); }
#sub3_3 .cont1 .right li p { position: relative; padding:20px 40px 20px 80px; cursor: pointer; }
#sub3_3 .cont1 .right li p i { position: absolute; right: 10px; top: 23px; }
#sub3_3 .cont1 .right li.on p i { transform: rotate(90deg); }
#sub3_3 .cont1 .right li div { position: relative; padding:10px 0 40px 80px; display: none; }
#sub3_3 .cont1 .right li span { position: absolute; left: 0; }

/* sub4_1 */
.bg4 { position: absolute; width: 100%; z-index:1; }
.bg4 + .subVisual img { height: 1130px; }

#sub4_1 .cont1 { align-items: end; }
#sub4_1 .cont1 article { width: 675px; }
#sub4_1 .cont1 article h2 { position: absolute; top: 0; }
#sub4_1 .cont1 article strong { margin-bottom: 70px; display: block; }
#sub4_1 .cont1 article p.f22 { margin-top: 50px; }
#sub4_1 .cont1 article p.f22 span { margin-right: 10px; }

#sub4_1 .cont2 { position: relative; margin-top: 260px; }
#sub4_1 .cont2 img { width: 100%; height: 365px; }
#sub4_1 .cont2 p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; }

#sub4_1 .cont3 { margin-top: 260px; }
#sub4_1 .cont3 p { border:1px solid #000; width: 174px; height: 174px; box-sizing: border-box; border-radius: 180px; position: relative; }
#sub4_1 .cont3 .lv1 p { background: #f2f2f2; margin:0 auto; }
#sub4_1 .cont3 .lv1 p:before { content:""; width: 1px; height: 230px; background: #000; position: absolute; left: 50%; top:100%; }
#sub4_1 .cont3 .lv2 p { margin-left: 830px; }
#sub4_1 .cont3 .lv2 p:before { content:""; width: 130px; height: 1px; background: #000; position: absolute; top:50%; right:100%; }
#sub4_1 .cont3 .lv3 { margin-top: 94px; position: relative;}
#sub4_1 .cont3 .lv3:before { content:""; width: 1227px; height: 1px; background: #000; position: absolute; top:-40px; left:87px; }
#sub4_1 .cont3 .lv3 p:before,
#sub4_1 .cont3 .lv4 p:before { content:""; width: 1px; height: 40px; background: #000; position: absolute; bottom:100%; left:50%; }
#sub4_1 .cont3 .lv4 { width: 513px; margin-top: 80px; position: relative; margin-left: 239px;}
#sub4_1 .cont3 .lv4:before { content:""; width: 340px; height: 1px; background: #000; position: absolute; top:-40px; left:87px; }
#sub4_1 .cont3 .lv4:after { content:""; width: 1px; height: 40px; position: absolute; background: #000; left:50%; top:-80px; display: block; }

/* sub4_2 */
.mission { position: relative; text-align: center; }
.mission img { max-width: 1400px; height: 720px; }
.mission article { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#sub4_2 .cont1 > div.fl { margin-top: 50px; justify-content: start; }
#sub4_2 .cont1 figure { width:calc(50% - 25px); }
#sub4_2 .cont1 figure img { width: 100%; }
#sub4_2 .cont1 article { margin-left: 50px; width: 675px; }
#sub4_2 .cont1 article ul li { line-height:50px; border-bottom:1px solid #000;  }
#sub4_2 .cont1 article p { position: absolute; bottom: 0; }
#sub4_2 .cont1 article p i:nth-child(2) { margin-left: -20px; }

#sub4_2 .cont2 { margin-top: 160px; }
#sub4_2 .cont2 h2 { margin-bottom: 100px; }
#sub4_2 .cont2 figure { margin-top: 60px; padding:60px 0; background: #f2f2f2; }

#sub4_2 .cont3 .left h2 { margin-bottom: 60px; }
#sub4_2 .cont3 .left a { width: 210px; border:1px solid #000; border-radius: 50px; height: 50px; padding-left: 30px; justify-content:  start; position: relative; margin-top: 30px; }
#sub4_2 .cont3 .left a i { position: absolute; right: 30px; text-decoration: underline; }
#sub4_2 .cont3 .right div { margin-bottom: 60px; }
#sub4_2 .cont3 .right div:last-child { margin-bottom: 0; }
#sub4_2 .cont3 .right p { margin-bottom: 20px; }
#sub4_2 .cont3 .right figure { border:1px solid #000; width: 460px; height: 280px; box-sizing: border-box; }
#sub4_2 .cont3 .right figure:first-of-type { float:left; }
#sub4_2 .cont3 .right figure:last-of-type { float:right; }

#sub4_2 .cont4 .color { margin-top: 60px; }
#sub4_2 .cont4 .color > li { margin-top: 20px; border-radius: 30px; overflow: hidden; position: relative; align-items: stretch; }
#sub4_2 .cont4 .color > li div { width: 50%; }
#sub4_2 .cont4 .color > li:nth-child(1) div { background: #a72a6c; }
#sub4_2 .cont4 .color > li:nth-child(2) div { background: #35639f; }
#sub4_2 .cont4 .color > li:nth-child(3) div { background: #382958; }
#sub4_2 .cont4 .color > li div strong { position: absolute; left: 50px; bottom: 60px; }
#sub4_2 .cont4 .color > li ul { background: #f5f5f5; width: 50%; box-sizing: border-box; padding:60px 0 60px 50px; line-height:40px; }

/* sub4_3 */
#sub4_3 ul { margin-top: 100px; margin-bottom: 50px; }
#sub4_3 ul li { position: relative; padding-left: 140px; margin-bottom: 6px; }
#sub4_3 ul li strong { position: absolute; left: 0; }
#sub4_3 iframe { height: 600px; }
#sub4_3 .maplink { margin-top: 30px; }
#sub4_3 .maplink a { border:1px solid #000; height: 50px; width: 180px; border-radius: 50px; margin:0 10px; }
#sub4_3 .maplink a i { margin-left: 10px; }

/* sub4_4 */
#sub4_4 .cont2 .left { position:sticky; top: 120px;}
#sub4_4 .cont2 .left li { margin-bottom: 20px; opacity: 0.3; cursor: pointer;}
#sub4_4 .cont2 .left li.select { opacity: 1; }
#sub4_4 .cont2 .year { position: relative; }
#sub4_4 .cont2 .year:before { content:""; width: 1px; height: 100%; background: #000; position: absolute; left: 6px; top: 8px; z-index: -1; }
#sub4_4 .cont2 .year > li { padding-left: 50px; position: relative; margin-bottom: 150px;}
#sub4_4 .cont2 .year > li ul li { position: relative; padding-left: 150px; margin-top: 30px; }
#sub4_4 .cont2 .year > li h2:before,
#sub4_4 .cont2 .year > li ul li:before { content:""; width: 13px; height: 13px; background: #999; border-radius: 50px; position: absolute; left: -50px; top: 7px; }
#sub4_4 .cont2 .year > li h2:before { left: 0; background: #000; } 
#sub4_4 .cont2 .year > li ul li.pic { cursor: pointer; }
#sub4_4 .cont2 .year > li ul li span { position: absolute; left: 0; font-family: ptb; }
#sub4_4 .cont2 .year > li ul li i { position: relative; top: 1px; transition:0.3s; }
#sub4_4 .cont2 .year > li ul li.pic.on i { transform:rotate(90deg); }
#sub4_4 .cont2 .year > li ul li figure { display: none; margin-top: 10px; }