/* reset */
* { margin: 0; padding:0; }
li { list-style:none; }
a { text-decoration: none !important; color:inherit; }
img { vertical-align: top; object-fit: cover; }

/* common */
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
.wrap { width:1600px; margin:0 auto; position: relative; font:18px/1.6 stm; }
.wrap * { word-break: keep-all; }
.wrap:after, ul:after, .cl:after { content:""; clear:both; display: block; }
.blind { position:absolute; width:0; height:0; font-size:0; overflow: hidden; }
.fl { display: flex; align-items: center; justify-content: center; }
.fld { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.fl:after, .fld:after { display:none; }
.dn { display:none !important; }
.shd { box-shadow: 0px 0px 10px rgba(0,0,0,0.2); }
.brd { border-radius: 20px; overflow: hidden; }

.swiper-container { width: 100%; height: 100%; }
.swiper-slide { width: 100%; height: 100%; background-position: center;  background-size: cover; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 

.cp { color:#171c61; }
.cb { background: #171c61; color:#fff; }

.f42 { font-size:42px; line-height:1.2; }
.f36 { font-size:36px; line-height:1.4; }
.f30 { font-size:30px; line-height:1.4; }
.f24 { font-size:24px; }
.f20 { font-size:20px; }
.f16 { font-size:16px; }

.steb { font-family: steb; } 
.stb { font-family: stb; } 
.stsb { font-family: stsb; } 

/* header & footer */
#w_header { position:fixed; top:40px; left:0; width:100%; z-index: 1000; transition:0.5s; }
#w_header.up { top:-140px; }
#w_header .wrap { height: 80px; border-radius: 40px; overflow: hidden; transition:0.3s; background: #fff; }
#w_header.down .wrap { height: 200px;  }
#w_header h1 { position: absolute; left: 3%; top:15px;  }
#w_header #w_gnb { align-items: flex-start; width: 800px; margin:0 auto; }
#w_header #w_gnb > li { position: relative; margin:0 40px; }
#w_header #w_gnb > li > a { font:16px/80px steb; }
#w_header #w_gnb > li > a:after {  content:""; display:block; width: 0; height: 3px; background:#000; position:absolute; top:77px; left:0; z-index:1; transition:0.3s; }
#w_header #w_gnb > li:hover > a:after {  width: 100%; }
#w_header #w_gnb ul { padding-top: 10px; font:16px/40px stsb; text-align: center; }
#w_header #w_gnb ul li a { position: relative; }
#w_header #w_gnb ul li a:after { content:""; display:block; width: 0; height: 1px; background:#000; position:absolute; bottom:-2px; left:0; z-index:1; transition:0.3s; }
#w_header #w_gnb ul li a:hover:after { width: 100%; }
#w_header .lang { position: absolute; right: 3%; top:30px; }
#w_header .lang li { float:left; font-size:13px;  }
#w_header .lang li:after { content:"|"; margin:0 5px; }
#w_header .lang li:last-child:after { display: none; }
#w_header .lang li a { opacity: 0.5; }
#w_header .lang li.select a { opacity: 1; }

#w_footer { background: #000; color:#9f9f9f; padding:60px 0; }
#w_footer .wrap > img { position: absolute; }
#w_footer address { font-style:normal; font-size:14px; padding-left: 200px; font-family: stsb; }
#w_footer address span { margin:0 20px; }
#w_footer ul { position: absolute; right: 0; top: 0; }
#w_footer ul li { float:left; margin-left: 10px; }
#w_footer p { position: absolute; right: 0; bottom: 0; font-size:14px; font-family: stsb; }


/* index */

.blank { height: 160px; }
#main .wrap { position: relative; height: 900px; }
#main .wrap div,
#main .wrap a { border-radius: 20px; position: absolute; background:url(/images/bg_main.png) no-repeat; color:#fff; padding:50px 40px; }
#main .wrap a:before { border-radius: 20px; content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition:0.3s; }
#main .wrap a:hover:before { opacity: 0.4; }
#main .wrap a i { position: absolute; right: 30px; top: 30px; font-weight: 900; font-size:28px; }
#main .wrap .m1 { left: 0; top: 0; width: 790px; height: 500px; }
#main .wrap .m2 { right: 0; top: 0; width: 790px; height: 900px; background-position:right top; }
#main .wrap .m3 { left: 0; bottom: 0; width: 385px; height: 385px; background-position:left bottom; background: #e95513; }
#main .wrap .m4 { left: 405px; bottom: 0; width: 385px; height: 385px; background-position:-405px bottom; }
#main .wrap .m3 h2,
#main .wrap .m4 h2 { position: absolute; left: 40px; bottom: 50px; line-height:1.2; }

#truth { margin-top: 240px; }
#truth .wrap { justify-content: space-between; }
#truth article p { position: absolute; padding-top:70px; }
#truth article img { margin-left: 330px; margin-top: 20px;}
#truth ul { width: 800px; border-left:1px solid #666; padding-left: 120px; box-sizing: border-box;  }
#truth ul li { justify-content: flex-start; margin-bottom: 100px; }
#truth ul li:last-child { margin-bottom: 0; }
#truth ul li img { margin-right: 40px; }
#truth ul li dd { margin-top: 10px; line-height:1.4; }

#business { margin-top: 240px; } 
#business .wrap { border-radius: 20px; overflow: hidden; height: 570px; align-items: stretch; } 
#business .wrap figure { width: 50%; overflow: hidden; } 
#business .wrap figure img { transition:0.3s; } 
#business .wrap figure:hover img { transform: scale(1.05); } 
#business a { display: block; background:#f39700 url(/images/icon4.png) no-repeat 60px 60px; padding:240px 0 0 290px; width: 50%; color:#fff; position: relative; } 
#business a strong { position: absolute; left: 60px; } 
#business a i { position: absolute; right: 60px; top: 60px; font-weight: 900; font-size:28px; } 

#prd { margin-top: 240px; }
#prd ul li { width: 385px; height: 245px; margin:0 20px 20px 0; border-radius: 20px; position: relative; float:left; overflow: hidden;}
#prd ul li img { width: 100%; height: 100%; transition:0.3s;}
#prd ul li a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); opacity: 0; transition:0.3s; display:flex; align-items:center; text-align: center; justify-content:center; color:#fff; font:20px steb; z-index: -1; padding:14px; box-sizing: border-box; }
#prd ul li:hover img { transform: scale(1.05); }
#prd ul li:hover a { z-index:1; opacity: 1; }
#prd .more { width: 385px; height: 775px; position: absolute; right: 0; top: 0; background: #171c61; color:#fff; display:flex; align-items:center; justify-content:center;  flex-direction: column; text-align: center; line-height:1.2; border-radius: 20px;}
#prd .more i { font-weight: 900; font-size:38px; margin-bottom: 20px; }

#contact { margin-top: 240px; margin-bottom: 200px; }
#contact .wrap { justify-content: space-between; }
#contact article { justify-content: space-between; align-items: flex-start; height: 360px; width: 790px; }
#contact article ul { height: 180px; border-top:1px solid #666; width: 100%; }
#contact article ul li { padding-top: 20px; position: relative; padding-left: 180px; }
#contact article ul li span { position: absolute; left: 0; }
#contact .send { width: 790px; height: 360px; border-radius: 20px; background:url(/images/contact.png) no-repeat center/cover; color:#fff; text-align: center; position: relative; overflow: hidden; }
#contact .send:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.3; }
#contact .send p { position: relative; }

/* sub layout */
.sv .fl { height: 450px; padding-top: 130px; box-sizing: border-box; color:#fff; }

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

.sm { background: #171c61; color:#fff; }
.sm ul li a { display: inline-block; padding:0 40px; font:16px/60px stb;}

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


/* sub1_1 */
#sub1_1 .cont1 { padding-top: 160px; justify-content: space-between; align-items: flex-end; }
#sub1_1 .cont1 img { border-radius: 20px; }
#sub1_1 .cont1 article { justify-content: space-between; align-items: flex-end; width: 700px; }
#sub1_1 .cont1 article h3 { margin-top: 60px; }
#sub1_1 .cont1 article p { margin-top: 50px; }

#sub1_1 .cont1_1 { padding-top: 160px; justify-content: space-between; align-items: flex-start; }
#sub1_1 .cont1_1 img { border-radius: 20px; }
#sub1_1 .cont1_1 article { justify-content: space-between; align-items: flex-end; width: 700px; }
#sub1_1 .cont1_1 article h3 { margin-top: 60px; }
#sub1_1 .cont1_1 article p { margin-top: 50px; }


#sub1_1 .cont2 { padding-top: 160px; }
#sub1_1 .cont2 > div { justify-content: space-between; }
#sub1_1 .cont2 div > ul { width: 1140px; justify-content: space-between; }
#sub1_1 .cont2 div > ul li { width: 320px; height: 320px; border-radius: 320px; color:#fff; }
#sub1_1 .cont2 div > ul li:nth-child(1) { background:#171c61; }
#sub1_1 .cont2 div > ul li:nth-child(2) { background:#00a199; }
#sub1_1 .cont2 div > ul li:nth-child(3) { background:#f39700; }
#sub1_1 .cont2 div > ul li { text-align: center; } 
#sub1_1 .cont2 div > ul li h3:after { content:""; margin:20px auto; display: block; width: 20px; height:2px; background: #fff; } 
#sub1_1 .cont2 > ul { margin-top: 150px; border-top:1px solid #000; width: 920px; margin-left: auto;}
#sub1_1 .cont2 > ul li { height: 150px; border-bottom:1px solid #ddd; }
#sub1_1 .cont2 > ul li strong { display: block; padding-top: 14px; margin-bottom: 20px;  }

#sub1_1 .cont3 { padding-top: 160px; }
#sub1_1 .cont3 p { margin-top: 40px; }

#sub1_1 .cont4 { margin-top: 80px; }
#sub1_1 .cont4 img { width: 100%; }

/* sub2_1 */
#sub2_1 .cont1 { padding-top: 160px; }
#sub2_1 .cont1 img { margin-top: 60px; border-radius: 20px; width: 100%;}

#sub2_1 .cont2 { padding-top: 200px; }
#sub2_1 .cont2 p { margin-bottom: 80px; }
#sub2_1 .cont2 figure { clear: both;  }
#sub2_1 .cont2 figure img { max-width:100%; }

#sub2_1 .cont3 { justify-content: space-between; margin-top: 200px; margin-bottom: 300px; }
#sub2_1 .cont3 h2 { line-height:1.2; }
#sub2_1 .cont3 ul { width: 1240px; justify-content: space-between; }
#sub2_1 .cont3 ul li { width: 200px; height: 70px; border:2px solid #171c61; box-sizing: border-box; border-radius: 100px; display:flex; align-items:center; justify-content:center; position: relative; }
#sub2_1 .cont3 ul li:after { content:">"; position: absolute; right:-40px; }

/* sub3_1 */
#sub3_1 .cont1 { padding-top: 160px; margin-bottom: 200px; }
#sub3_1 .cont1 ul li { float:left; margin:0 40px 40px 0; width: 440px; height: 280px; border-radius: 20px; position: relative; overflow: hidden; }
#sub3_1 .cont1 ul li.big { width: 920px; height: 600px;}
#sub3_1 .cont1 ul li span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); opacity: 0; transition:0.3s; display:flex; align-items: center; text-align: center; justify-content: center; color:#fff; font:20px steb; z-index: -1; padding:14px; box-sizing: border-box; }
#sub3_1 .cont1 ul li img { width: 100%; height: 100%; transition:0.3s; }
#sub3_1 .cont1 ul li:hover span { z-index:1; opacity: 1; }
#sub3_1 .cont1 ul li:hover img { transform: scale(1.05); }
#sub3_1 .cont1 ul li:nth-child(2),
#sub3_1 .cont1 ul li:nth-child(3), 
#sub3_1 .cont1 ul li:nth-child(6),
#sub3_1 .cont1 ul li:nth-child(9),
#sub3_1 .cont1 ul li:nth-child(12) { margin-right: 0; }
#sub3_1 .cont1 ul li:nth-child(8) { position: absolute; top:1440px; }

/* sub3_2 */
#sub3_2 .cont1 { padding-top: 160px; margin-bottom: 200px; font-size:14px; }
#sub3_2 .tbl_wrap table { border-top-color:#171c61; }
#sub3_2 #bo_list th { text-align: left; font-family: steb; }
#sub3_2 #bo_list td * { color:#000; }
#sub3_2 #bo_list .td_num2 { width: 240px; text-align: left; }
#sub3_2 #bo_list .td_num2 strong { font-weight: normal; display: block; margin-bottom: 6px; }
#sub3_2 #bo_list .td_datetime { width: 60px; text-align: left; }
#sub3_2 #bo_list .td_datetime a { width: 24px; height: 24px; background: #f39700; color:#fff; font-weight: 900; display:flex; align-items: center; justify-content: center; }

/* sub4_1 */
#sub4_1 .cont1 { padding-top: 160px; margin-bottom: 200px; }
#sub4_1 .cont1 ul li { width:calc((100% - 80px) / 3); float:left; margin-right: 40px; margin-bottom: 40px; }
#sub4_1 .cont1 ul li:nth-child(3) { margin-right: 0; }
#sub4_1 .cont1 ul li:last-child { width: 100%; }
#sub4_1 .cont1 ul li input { width: 100%; border-radius: 50px; height: 50px; border:none; background: #f4f4f4; padding:0 30px; box-sizing: border-box; font:18px stm; }
#sub4_1 .cont1 ul li textarea { width: 100%; border-radius: 20px; height: 300px; border:none; background: #f4f4f4; padding:30px; box-sizing: border-box; font:18px/1.6 stm; }
#sub4_1 .cont1 input[type="submit"] { background: #f39700; border-radius: 50px; height: 50px; width: 200px;  border:none; font:18px stm; color:#fff; }