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

/* common */
html, body { height:100%; }
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
.wrap { width:1400px; 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; }


/* header & footer */
#w_header { width:100%; position: fixed; left: 0; top: 0; height:80px; z-index:99; transition: 0.3s; }
#w_header.fix { background: rgba(0,0,0,0.9); }
#w_header h1 { padding-top: 30px; }
#w_header #w_gnb { position: absolute; left:380px; top:27px; }
#w_header #w_gnb li { float:left; margin-right: 90px; }
#w_header #w_gnb li a { color:#fff; font:18px steb; display: block; text-align: center; }
#w_header #w_gnb li:nth-child(1) a { width: 132px; }
#w_header #w_gnb li:nth-child(2) a { width: 95px; }
#w_header #w_gnb li:nth-child(3) a { width: 108px; }
#w_header #w_gnb li:nth-child(4) a { width: 91px; }
#w_header .sns { position: absolute; right:0; top:20px; }
#w_header .sns li { float:left; margin-left: 14px; }
#w_header .sns li a img { width: 40px; }

#w_footer { background: #3e3e3e; padding:60px 0 50px; }
#w_footer img { position: absolute; opacity: 0.7; height: 18px; }
#w_footer address { font:normal 16px stm; color:#ccc; margin-left: 360px; }
#w_footer address strong { display: block; font:18px steb; margin-bottom: 10px; }
#w_footer address span, #w_footer address a { display: inline-block; color:inherit; margin-right: 40px; margin-bottom: 10px;  }
#w_footer .wrap div { position: absolute; right:0; top:0; }
#w_footer .wrap div strong { display: block; font:18px steb; color:#ccc; margin-bottom: 10px; }
#w_footer .wrap div a { color:#fefd02; font:32px stb; }

.w_btn { display:inline-flex; align-items: center; justify-content: space-between; padding:0 30px; color:#fff; border-radius: 0 8px 8px; height: 50px; font:18px stb; background: linear-gradient(135deg,  #4571e9 0%,#18a6b8 60%); }
.w_btn i { margin-left: 20px; }


/* index */
#w_main { height:100vh; position: relative; }
#w_main .swiper-slide:before { content:""; background: rgba(0,0,0,0.5); width:100%; height:100%; position: absolute; left:0; top:0; }
.swiper-container { width: 100%; height: 100%; } 
.swiper-slide { background-position: center; background-size: cover; position: relative; }
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom:40px; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left:60px; opacity: 0; transition: 0.3s; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right:60px; opacity: 0; transition: 0.3s; }
.swiper-container:hover .swiper-button-prev, .swiper-container:hover .swiper-container-rtl .swiper-button-next { opacity: 1; }
.swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-container-rtl .swiper-button-prev { opacity: 1; }
#w_main .ment { position: absolute; left:calc(50% - 700px); top:0; z-index:10; display: flex; height:calc(100% - 200px); flex-direction: column; justify-content: center; align-items: center; color:#fff; width: 1400px; text-align: center; }
#w_main .ment h2 { font:66px/1.4 stb; }
#w_main .ment div { margin-top: 40px; }
#w_main .ment div .tel { color:#fee600; font:42px stb; }
#w_main .ment div a:last-child { color:#fff; font:24px/50px stm; background:#ff005a; padding:0 30px; border-radius: 0 8px 8px; margin-left: 30px; }
#w_main .ment p { font:20px/2 stm; margin-top: 40px; }
#w_main .ment p span { margin-right: 20px; }
#w_main .xi-mouse { font-size:40px; font-weight: normal; position: absolute; bottom: 80px; left:calc(50% - 20px); animation: 2s mouse infinite; }

@keyframes mouse {
    0%, 100% { bottom:80px; }
    50% { bottom:60px; }
}

#iframe { position: absolute; z-index: 50; left: 0; bottom:0; width:100%; height: 200px; }


#pf { padding:120px 0; text-align: center; }
#pf h2 + p { font:16px/1.6 str; color:#666; margin-top: 20px;  }
#pf ul { width:calc(100% - 200px); margin:60px auto 0; }



#business { background: #f1f1f1; padding:120px 0; }
/* #business .wrap { background: url(/images/bg_thek.png) no-repeat left bottom; } */
#business article { float:left; width: 460px; }
#business article h2 { font:42px sth; }
#business article p { margin-top: 40px; font:24px/1.6 stm; }
#business article p b { font-family: stb; }
#business article p + i { font:italic 24px/1.6 stm; color:#777; margin-top: 30px; display: block; }
#business article a { margin-top: 40px; }
#business article ~ div { float:left; width: 440px; height: 500px; margin-left: 30px; border-radius: 20px; padding:40px; box-sizing: border-box; color:#fff; font:20px/1.6 stm; }
#business .wrap div:nth-of-type(1) { background: url(/images/business1.jpg) no-repeat center/cover; }
#business .wrap div:nth-of-type(2) { background: url(/images/business2.jpg) no-repeat center/cover; }
#business article ~ div h3 { font:30px steb; margin-bottom: 20px; }

#promise { background:url(/images/bg_promise.jpg) no-repeat center/cover; color:#fff; text-align: center; height: 400px; flex-direction: column; }
#promise p { font:54px stl; }
#promise p b { font-family:stb; }
#promise strong { font:60px stb; margin-top: 20px; margin-bottom: 40px; }
#business ~ #promise { height:calc(100vh - 283px); }
#business ~ #promise p { font-size:66px; }
#business ~ #promise strong { margin-top: 50px; margin-bottom: 110px; font-size:78px; }

/* sub layout */
.sv { height: 460px; }
.sv h2 { color:#fff; font:80px sth; }
.sv { position: relative; }
.sv nav { border-top:1px solid rgba(255,255,255,0.4); width:100%; position: absolute; bottom:0; left: 0; }
.sv nav ul li { float:left; width:20%; border-left:1px solid rgba(255,255,255,0.4); box-sizing: border-box; }
.sv nav ul li:last-child { border-right:1px solid rgba(255,255,255,0.4); }
.sv nav ul li a { display: block; color:#fff; text-align: center; font:20px/50px stsb;  }
.sv nav ul li.select a { background: #fff; color:#000; }

#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; }
.cont > div { padding:100px 0; }
.cont .wrap { width: 1200px; }
.title { font:42px steb; }


/* about */
#sub1 article { margin-top: 80px; }
#sub1 article h2 { font:24px sth; color:#4571e9; margin-bottom: 30px;  }
#sub1 article strong { float:left; }
#sub1 article p { float:right; width: 710px; font:18px/1.8 stm; color:#666; word-break: keep-all; }
#sub1 article a { position: absolute; left: 0; bottom: 106px; }

#sub1 .cont2 { background:url(/images/bg_about.jpg) no-repeat center/cover; color:#fff; text-align: center; }
#sub1 .cont2 p { font:18px/1.8 stm; margin-top: 30px;  }
#sub1 .cont2 ul { justify-content: space-between; margin-top: 80px; text-align: center; align-items: flex-start;  }
#sub1 .cont2 ul li h3 { font:24px steb; }
#sub1 .cont2 ul li figure { height: 53px; margin: 30px 0; }
#sub1 .cont2 ul li span { display: block; font:16px/1.6 stsb; }

#sub1 .cont3 { text-align: center; }
#sub1 .cont3 p { font:16px stm; color:#666; margin-top: 30px; }
#sub1 .cont3 figure { margin-top: 40px; }


/* business */

#sub2 .cont1 { text-align: center; }
#sub2 .cont1 ul { width:calc(100% - 200px); margin:60px auto 0; }
#sub2 .cont1 ul li { float:left; width:calc((100% - 80px) / 3); margin:0 40px 40px 0; }
#sub2 .cont1 ul li img { width:100%; height:340px; object-fit: cover; }



/* portfolio */
#sub3 .cont1 .title { text-align: center; }
#sub3 .cont1 .pf { width:calc(100% - 200px); margin:0 auto; padding-top: 20px; padding-bottom: 60px; }
#sub3 #bo_v { margin-top: 40px; }
#sub3 #bo_v_title .bo_v_tit { font-family: stb; text-align: center; color:#4571e9; }

#sub3 #bo_v_atc { text-align: center; }
#sub3 .profile_info { display: none; }
#sub3 #bo_v_share { visibility: hidden; }


/* contact */
#sub4 .cont1 { background:url(/images/circle.png) no-repeat 40px 100px; text-align: center; }
#sub4 .cont1 article { background: #133562; color:#fff; height: 130px; justify-content: space-evenly; margin-top: 60px; }
#sub4 .cont1 article h3 { font:24px stb; }
#sub4 .cont1 article a { color:#fff; font:22px stb; }
#sub4 .cont1 article a i { color:#adc2fd; font-size:28px; margin-right: 14px; transform: translateY(4px); }
#sub4 .cont1 iframe { margin-top: 80px; width:100%; height:600px; overflow: hidden; }