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

/* common */
html, body { height:100%; }
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
.wrap { width:1200px; margin:0 auto; position: relative; }
.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; }
.fl:after { display:none; }
.dn { display:none !important; }


:root {
    --color:#cb2020;
    --bg:#cb2020;
    
    --title1: 36px;
    --title2: 30px;
}


/* header & footer */
#w_header { height: 50px; position: fixed; width: 100%; z-index: 99; transition: 0.3s; overflow: hidden; color:#fff; border-bottom:1px solid rgba(255,255,255,0.5); }
#w_header.index { color:#000; border-bottom:none; }
#w_header.fix { border-bottom:1px solid #ddd; backdrop-filter: blur(10px); background: rgba(0,0,0,0.3); color:#fff; }
#w_header.on { border-bottom:1px solid #ddd; backdrop-filter: blur(10px);  background: rgba(0,0,0,0.5); height: 270px; color:#fff; }
#w_header .wrap { width: 1400px; }
#w_header h1 { padding-top: 10px; }
#w_header h1 img { transition:0.3s; }
#w_header h1 img:first-child { position: absolute; }
#w_header h1 img:last-child { opacity: 0; }
#w_header.index h1 img:last-child { opacity: 1; }
#w_header.index h1 img:first-child { opacity: 0; }
#w_header.fix h1 img:first-child, #w_header.on h1 img:first-child { opacity: 1; }
#w_header.fix h1 img:last-child, #w_header.on h1 img:last-child { opacity: 0; }
#w_header #w_gnb { position: absolute; right:0; top:0; }
#w_header #w_gnb > li { font:14px/50px steb; float:left; margin-left: 60px; position: relative;  }
#w_header #w_gnb > li > a { padding:0 20px; display: inline-block; }
#w_header #w_gnb > li.select > a:after { content:""; display: block; border-top:2px solid var(--color); width:calc(100% + 20px); margin-left:-10px; margin-top: -3px; }
#w_header #w_gnb ul { position: absolute; line-height:30px; font-family: stm; color:#eee; text-align: center; width: 100%; padding-top: 8px;  }


#w_footer { padding:60px 0; text-align: center; color:#ddd; background: #141515; font:14px/2.4 str;  }
#w_footer img { opacity: .6; margin-bottom: 30px; }
#w_footer address { font-style: normal; margin-bottom: 30px;  }

/* index */
#main { background:url(/images/main1.png) no-repeat center/cover; }
#main .fl { height: 940px; justify-content: flex-start; }
#main dl { padding-bottom: 40px; color: #fff;}
#main dl dt { font:50px/1.4 steb; }
#main dl dd { margin-top: 40px; font:20px/1.6 stsb; }

#slo { padding:160px 0; }
#slo h2 { float:left; width: 400px; font:var(--title1)/1.4 steb;  }    
#slo p { float:left; width: 800px; font:18px/1.8 stm; word-break: keep-all; margin-top: 6px; }    


#a_prd { margin-bottom:200px;  }
#a_prd article { width:390px; height: 490px; margin:0 15px 30px 0; float:left; border-radius: 20px; box-sizing: border-box; padding:30px; position: relative; overflow: hidden; }
#a_prd article:nth-child(1){padding:0px;}
#a_prd article:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.3s; transform: scale(1); }
#a_prd article:nth-child(2):before { background:url(/images/bg_at1.png) no-repeat center/cover; }
#a_prd article:nth-child(3):before { background:url(/images/bg_at2.png) no-repeat center/cover; }
#a_prd article:nth-child(4):before { background:url(/images/bg_at3.png) no-repeat center/cover; }
#a_prd article:nth-child(5):before { background:url(/images/bg_at4.png) no-repeat center/cover; }
#a_prd article:nth-child(6):before { background:url(/images/bg_at5.png) no-repeat center/cover; }
#a_prd article:hover:before { transform: scale(1.1); }
#a_prd article h2 { font:36px/1.4 steb; }
#a_prd article p { font:18px/1.6 str; margin-top: 40px; }
#a_prd article img { position: relative; }
#a_prd article dl { position: absolute; left: 30px; top:200px;}
#a_prd article dl dt { font:26px steb; }
#a_prd article dl dd { font:16px/1.8 stm; margin-top: 20px; }
#a_prd article a { color: var(--color); width: 150px; position: absolute; left: 30px; bottom: 30px; text-align: center; font:13px/40px stm; border-radius: 40px; background: #fff; text-transform: uppercase; transition: 0.3s; }
#a_prd article:hover a { background: var(--color); color:#fff; }


#ment { background: url(/images/bg_ment.png) no-repeat center/cover; padding:180px 0 120px; margin-top: 1vw; color:#fff; text-align: center; }
#ment strong { display: block; font:var(--title2)/1.6 steb; margin-top: 30px;  }
#ment p { font:18px/1.6 str; margin-top: 50px; }

#kind { padding:160px 0; text-align: center; }
#kind h2 { font:var(--title2) steb; }
#kind p { font:18px/1.6 str; margin-top:30px; }
#kind ul { margin-top: 50px; }
#kind ul li { float:left; width: 390px; box-sizing: border-box; border:1px solid var(--color); margin:0 15px 20px 0;  display: block; padding:50px 0; }
#kind ul li figure { height: 84px; }
#kind ul li strong { font:18px steb; display: block; margin-top: 20px; }


#contact { background: var(--color); padding:100px 0; color:#fff; }
#contact article { width: 50%; float:left; }
#contact article h2 { font:14px steb; margin-bottom: 30px; }
#contact .con strong { display: block; font:var(--title1)/1.4 steb; margin-bottom: 40px; }
#contact .con ul li { font:18px/1.6 str; padding-left: 80px; position: relative; margin-top: 10px; }
#contact .con ul li span { position: absolute; left: 0; font-family: steb; }
#contact .inq h2 { padding-left: 10px; }
#contact .inq table { width: 100%; border-collapse: collapse; } 
#contact .inq table th { width: 50%; text-align: left; padding:10px; text-transform: uppercase; font:14px steb; } 
#contact .inq table td { padding:0 10px}
#contact .inq table input[type=text], #contact .inq table textarea { width: 100%; box-sizing: border-box; border:none; padding:10px; background: #fff; border-radius: 20px; outline: none; font:14px/1.6 stm; } 
#contact .inq table textarea { height: 120px; }
#contact .inq table td input[type=submit] { width: 150px; height: 40px; border-radius: 20px; background: #fff; color:var(--color); font:14px stb; text-transform:uppercase; border:none; margin-top: 14px;  }



/* sub layout */
.sv .wrap { height: 460px; justify-content: flex-start; font:40px steb; color:var(--color); text-transform: uppercase; padding-top: 50px; box-sizing: border-box;}

#sub1 { background: url(/images/bg_sub1.png) no-repeat center/cover; }
#sub2 { background: url(/images/bg_sub2.png) no-repeat center/cover; }
#sub3 { background: url(/images/bg_sub3.png) no-repeat center/cover; }
#sub4 { background: url(/images/bg_sub4.png) no-repeat center/cover; }

.sm { height: 60px; background: var(--color); color:#fff; font:16px stb; }
.sm.fix { position: fixed; width: 100%; left: 0; top: 50px; z-index: 10; }
.sm a { padding:0 40px; }
.sm.fix + .blank { height: 60px; }

.pad { padding:100px 0 200px; }
.left { float:left; width: 380px; }
.right { float:right; width: 800px; font:16px/1.8 str; }
.right * { word-break:keep-all; }

.left em { font:normal var(--title2)/1.4 steb; }


/* sub1_1 */
#sub1_1 figure { display:inline-flex; margin-top: 60px; }
#sub1_1 figure img { margin-left: 20px; }
#sub1_1 .right > img { width: 100%; margin-top: 100px; box-shadow: 2px 2px 8px rgba(0,0,0,0.2); }

/* sub1_2 */
#sub1_2 .history { padding-top: 8px; }
#sub1_2 .history > li { border-top:2px solid var(--color); padding-left: 150px; position: relative; margin-bottom: 60px; }
#sub1_2 .history > li strong { position: absolute; left: 0; top:8px; color:var(--color); font:18px steb; }
#sub1_2 .history li em { font-family: stb; font-style:normal; }
#sub1_2 .history ul li { padding-top: 10px; padding-left: 20px; position: relative; }
#sub1_2 .history ul li span { position: absolute; left: 0; font-family: steb; }
#sub1_2 .history > li img { width: 100%; margin: 14px 0 10px; box-shadow: 2px 2px 8px rgba(0,0,0,0.2);}


/* sub1_3 */
#sub1_3 { padding-top: 0; }
#sub1_3 .cont1 { background: #e4d2d2; padding:100px 0; }
#sub1_3 .cont1 h2 { font:28px/1.4 steb; }
#sub1_3 .cont1 p { font:16px/1.6 str; margin-top: 20px; }
#sub1_3 .cont2 { background: #eee2e2; padding:100px 0; }
#sub1_3 .cont2 ul li { margin-bottom: 20px; font:18px/1.4 stm; margin-bottom: 40px; }
#sub1_3 .cont2 ul li strong { font:28px steb; display: block; margin-bottom: 10px; }
#sub1_3 .cont2 ul + div { margin-top: 100px; justify-content: flex-start; position: relative; }
#sub1_3 .cont2 ul + div h3 { width: 170px; height: 170px; border:2px solid var(--color); border-radius: 200px; box-sizing:  border-box; color:var(--color); font:20px/1.4 stb; display: inline-flex; text-align: center; background: #fff; }
#sub1_3 .cont2 ul + div h3:first-child ~ h3 { margin-left: -30px; }
#sub1_3 .cont2 ul + div figure { width: 170px; height: 170px; border-radius: 200px; background:var(--color); position: absolute; right:0; }
#sub1_3 .cont2 ul + div figure:before { content:""; width:180px; position: absolute; left: -180px; top:calc(50% - 1px); border-top:2px solid var(--color); }
#sub1_3 .cont3 { margin-top: 100px; }
#sub1_3 .cont3 ul { margin-top: 60px; justify-content: space-between; flex-wrap: wrap; }
#sub1_3 .cont3 ul li { border:2px solid var(--color); border-radius: 20px; width: 390px; margin-bottom: 20px;  padding:170px 30px 30px; box-sizing: border-box; }
#sub1_3 .cont3 ul li:nth-child(1) { background:#eee2e2 url(/images/sub1_3_1.png) no-repeat 30px 30px; }
#sub1_3 .cont3 ul li:nth-child(2) { background:#eee2e2 url(/images/sub1_3_2.png) no-repeat 30px 30px; }
#sub1_3 .cont3 ul li:nth-child(3) { background:#eee2e2 url(/images/sub1_3_3.png) no-repeat 30px 30px; }
#sub1_3 .cont3 ul li:nth-child(4) { background:#eee2e2 url(/images/sub1_3_4.png) no-repeat 30px 30px; }
#sub1_3 .cont3 ul li dt { color:var(--color); font:24px steb; }
#sub1_3 .cont3 ul li dd { font:18px/1.6 stm; margin-top: 10px;  }


/* sub1_4 */
#sub1_4 ul { padding-top: 8px; }
#sub1_4 ul li { margin-bottom: 20px; line-height:1.6; position: relative; padding-left: 70px; }
#sub1_4 ul li span { font-family: steb; position: absolute; left: 0; }
#sub1_4 iframe { margin-top: 60px; width: 100%; border-radius: 14px;}

/* sub1_5 */
#sub1_5 .right div.fl { width: 170px; height: 170px; box-sizing: border-box; border:2px solid var(--color); font:20px/1.4 steb; color:var(--color); border-radius: 170px; position: relative; }
#sub1_5 .right div.ceo { background: var(--color); color:#fff; }
#sub1_5 .right div.ceo:after { content:""; border-left:2px solid var(--color); position: absolute; left:calc(50% - 1px); bottom:-232px; height:240px; display: block; }
#sub1_5 .right div.tech { left:284px; }
#sub1_5 .right div.tech:after { content:""; border-top:2px solid var(--color); position: absolute; top:calc(50% - 1px); left:-200px; width:200px; display: block; }
#sub1_5 .right > ul { position: relative; margin-top: 60px; display:flex; align-items: flex-start; justify-content: space-between; text-align: center; }
#sub1_5 .right > ul:before { content:""; border-top:2px solid var(--color); width:630px; left:85px; top:0; position: absolute; }
#sub1_5 .right > ul:after { display: none; }
#sub1_5 .right > ul > li { padding-top: 60px; position: relative; }
#sub1_5 .right > ul > li:before { content:""; border-left:2px solid var(--color); position: absolute; left:calc(50% - 1px); top:0px; height: 60px; }
#sub1_5 .right > ul > li:after { content:""; border-left:2px solid var(--color); position: absolute; left: -22px; top:326px; height:270px; }
#sub1_5 .right > ul > li:nth-child(1):after { height:136px; }
#sub1_5 .right > ul > li:nth-child(2):after { height:404px; }
#sub1_5 .right > ul > li div.fl { margin:0 auto 20px; background: var(--color); color:#fff; }
#sub1_5 .right > ul > li div.fl:before { content:""; position: absolute; left:calc(50% - 1px); bottom:-62px; height: 62px; border-left:2px solid var(--color); }
#sub1_5 .right > ul > li div.fl ~ div { margin-top: 60px; position: relative; }
#sub1_5 .right > ul > li div h3 { font:20px/70px steb; color:var(--color); border:2px solid var(--color); border-radius: 100px; }
#sub1_5 .right > ul > li div h3:before { content:""; width:20px; border-top:2px solid var(--color); position: absolute; left: -20px; top:36px; }
#sub1_5 .right > ul > li p { font:14px/1.4 stb; text-align: center; position: absolute; width: 100%; left: 0; top:80px; padding-left: 10px;  }
#sub1_5 .right > ul > li p:before { content:""; display: inline-block; height:14px; margin-right: 6px; position: absolute; left: 0; top:4px; }


/* sub2_1_1 */
.prd { padding-top: 160px; }
.prd .left { border-top:2px solid var(--color); position: sticky; top:270px; width: 280px; }
.prd .right { border-top:2px solid var(--color); width: 860px; }

.prd .left h2 { font:30px steb; position: absolute; top:-60px; }
.prd .left .lnb.pc li { font:20px/60px stm; border-bottom:1px solid #ddd; }
.prd .left .lnb.pc li.select { font-family: stb; }
.prd .left .lnb.pc li.select a:after { content:">"; position: absolute; right:0; }
.prd .left .lnb.pc li a { display: block; }


.prd .right h2 { font:34px stb; padding-top: 10px; margin-bottom: 30px; }
.prd .right h3 { border-top:2px solid var(--color); font:34px stb; padding-top: 10px; margin: 120px 0 30px;}

.prd .right .mt40 { margin-top: 40px; }
.prd .right .mt100 { margin-top: 100px; }

.prd .right .w20 { justify-content: space-between; margin-bottom: 60px;  }
.prd .right .w20 img { width: 162px; margin-right: 10px; }
.prd .right .w20 img:nth-last-child{margin-right: 0px;}
.prd .right .w50 { justify-content: space-between; }
.prd .right .w50 img { width: 420px; box-shadow: 2px 2px 8px rgba(0,0,0,0.2);}
.prd .right .w100 img { width: 100%; box-shadow: 2px 2px 8px rgba(0,0,0,0.2);}

.prd .right .line { border-top:1px solid #ddd; }

.prd .right strong { display: block; margin-top: 40px; margin-bottom: 10px; }



.prd .right table { width: 100%; border-collapse: collapse; }
.prd .right table td {  padding:6px 10px; border-bottom:1px solid #ddd; }
.prd .right table .upline td { border-top:2px solid #333; }
.prd .right table .bg td { background: #ededed; }

.prd .right ul.nav { justify-content: flex-start; margin-bottom: 40px;  }
.prd .right ul.nav li { width: 24.25%; border:1px solid var(--color); text-align: center; margin-right: 1%; box-sizing: border-box; }
.prd .right ul.nav li.select { background: var(--color); color:#fff; }
.prd .right ul.nav li:last-child { margin-right: 0; }
.prd .right ul.nav li a { display: block; padding:10px 0; }




/* sub3_1 */
#sub3_1 ul { width: 698px; margin:0 auto; text-align: center; }
#sub3_1 ul li { float:left; width: 300px; box-sizing:border-box; background: #fff; border:2px solid var(--color); margin:0 98px 50px 0; position: relative; }
#sub3_1 ul li:nth-child(2n) { margin-right: 0;  }
#sub3_1 span { display: block; font:14px/30px steb; color:var(--color); border-bottom:2px solid var(--color); }
#sub3_1 p { height: 60px; display:flex; align-items: center; justify-content: center; font:18px/1.4 steb; }

#sub3_1 .part1 li:nth-child(odd):before { content:""; width: 98px; height: 14px; background:url(/images/a1.png) no-repeat center; position: absolute; top:calc(50% - 7px); right:-100px; }
#sub3_1 .part1 li:nth-child(even):before { content:""; width: 100px; height: 100px; background:url(/images/a2.png) no-repeat center; position: absolute; bottom:-100px; left:-100px; }
#sub3_1 .part2 { width: 170px; height: 170px; box-sizing:border-box; background: #fff; border:2px solid var(--color); margin:0 auto; border-radius: 170px; text-align: center; position: relative; }
#sub3_1 .part2 span { line-height:50px; padding-top: 12px; }
#sub3_1 .part2 p { height:96px; }
#sub3_1 .part2:before { content:""; width: 122px; height: 122px; background:url(/images/a3.png) no-repeat center; position: absolute; bottom:-54px; left:-122px; }
#sub3_1 .part2:after { content:""; width: 122px; height: 122px; background:url(/images/a4.png) no-repeat center; position: absolute; bottom:-54px; right:-122px; }

#sub3_1 .part3 li { margin:42px 98px 0 0; }
#sub3_1 .part3 li:before { content:""; width: 14px; height: 45px; background:url(/images/a5.png) no-repeat center; position: absolute; bottom:-45px; left:calc(50% - 7px); }
#sub3_1 .part3 li:nth-child(4):before, #sub3_1 .part3 li:nth-child(5):before { display: none; }


/* sub3_2 */
#sub3_2 ul li { float:left; width: 240px; margin:0 40px 40px 0; text-align: center; }
#sub3_2 ul li img { width: 100%; box-shadow: 2px 2px 8px rgba(0,0,0,0.2);}
#sub3_2 ul li p { margin-top: 10px; line-height:1.4; }

/* sub4_1 */
#sub4_1 .right { font-size:12px; }

/* sub4_2 */
#sub4_2 table { width: 100%; border-collapse: collapse; border-top:2px solid var(--color); }
#sub4_2 table th { width: 130px; text-align: left; font:16px stb; padding:10px 0; border-bottom:1px solid #ddd; }
#sub4_2 table td { padding:10px 0; border-bottom:1px solid #ddd; }
#sub4_2 table td input[type=text] { border:1px solid #ddd; height: 40px; font:16px str; width:300px; padding:0 10px; }
#sub4_2 table td textarea { border:1px solid #ddd; font:16px/1.6 str; width:100%; padding:10px; }
#sub4_2 table tr:last-child th, #sub4_2 table tr:last-child td { border-bottom:none; } 
#sub4_2 table td input[type=submit] { border:none; background: var(--color); color:#fff; font:16px str; height:40px; width: 160px; border-radius: 50px; margin-top: 20px;  }