@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.contain {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

/* header */
#wrapper {position:relative;}

#header {position:fixed; top:0; left:0; width:100%; transition:.3s; z-index:100;}
#header .contain {position:relative; width:100%; max-width:1460px; height:100px; z-index:2;}

.global {position:relative; display:flex; justify-content:flex-end; background:rgba(0,0,0,.5); color:#fff; z-index:10;}

.sitelogo {position:absolute; top:0; left:50px; transition:.2s;}
.sitelogo a {display:block; width:155px; height:50px; background:url("../images/common/logo_w.png") 0 50% no-repeat; transition:.8s; overflow:hidden;}

.top-right {display:flex;}
.top-right ul {display:flex;}
.top-right .link-type-1 {font-size:15px; line-height:50px; letter-spacing:-.025em;}
.top-right .link-type-1 li {margin-right:34px;}
.top-right .link-type-2 a {display:block; line-height:50px; text-align:center;}
.top-right .link-type-2 .st1 {width:140px; font-size:16px; font-weight:500; letter-spacing:-.03em; background:#1c99d9; /*background:#254699;*/}
.top-right .link-type-2 .st2 {width:180px; font-family:"Roboto",sans-serif; font-size:20px; font-weight:500; letter-spacing:-.03em; background:#002060;}
.top-right .link-type-2 .st2 img {vertical-align:middle; margin:-.2em 7px 0 0;}

.mobile-top-link {display:none;}

.gnb {display:flex; justify-content:flex-end; align-items:center; height:65px; padding:0 50px; color:#fff; font-size:18px; font-weight:500; line-height:30px; letter-spacing:-.03em; transition:.3s;}
.gnb > ul {display:flex;}
.gnb > ul > li {margin-left:55px;}
.gnb > ul > li.active a {color:#ffdc3b;}

.btn-m-menu {position:relative; margin-left:27px; width:23px; height:23px; overflow:hidden;}
.btn-m-menu span {position:absolute; left:5px; right:0; top:50%; height:2px; margin-top:-1px; background:#fff; transition:.3s;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:-5px; right:0; height:2px; background:#fff; transition:.3s;}
.btn-m-menu span:before {top:-8px;}
.btn-m-menu span:after {bottom:-8px;}
.btn-m-menu:hover span {left:0;}
.btn-m-menu:hover span:before {left:5px;}
.btn-m-menu:hover span:after {left:10px;}

#header.header-fixed {background:rgba(0,0,0,.5);}
#header.header-fixed .sitelogo {top:30px;}
#header.header-fixed .sitelogo a {background-image:url("../images/common/logo_w2.png");}
#header.header-fixed .global {background:none;}

#header.header-up {background:none;}
#header.header-up .sitelogo {top:0;}
#header.header-up .sitelogo a {background-image:url("../images/common/logo_w.png");}
#header.header-up .global {background:rgba(0,0,0,.5);}
#header.header-up .gnb {margin-top:-100px;}

.nav-background {position:fixed; top:-50px; left:50%; width:20px; height:20px; transform:translateX(-50%); background:#002060; border-radius:100%; z-index:101;}

.mobile-navigation {position:fixed; top:0; left:0; width:100%; height:100%; text-align:center; color:#fff; overflow:hidden; z-index:-100;}
.mobile-navigation .wrap {display:flex; align-items:center; width:100%; height:100%; padding:50px; overflow:auto; opacity:0; transition:.4s;}
.mobile-navigation .inner {width:100%;}
.mobile-navigation .home {opacity:0; transition:.4s; transform:translateY(-20px);}
.mobile-navigation .nav-menu {padding:75px 0;}
.mobile-navigation .nav-menu > ul > li {padding:16px 0; opacity:0; transition:.4s; transform:translateX(20px);}
.mobile-navigation .nav-menu > ul > li > a {display:inline-block; position:relative; padding:0 5px; font-size:22px; font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.mobile-navigation .nav-menu > ul > li > a:before {content:""; position:absolute; bottom:2px; left:50%; width:0; height:6px; z-index:-1; background:rgba(255,255,255,.2); opacity:0; transition:.2s;}
.mobile-navigation .nav-menu > ul > li > a:hover::before {left:0; width:100%; opacity:1;}
.mobile-navigation .nav-menu > ul > li.active > a {color:#ffdc3b;}
.mobile-navigation .links {margin-bottom:12px; opacity:0; transition:.4s; transform:translateY(20px);}
.mobile-navigation .links ul {display:inline-flex;}
.mobile-navigation .links ul li {display:flex; align-items:center;}
.mobile-navigation .links ul li:before {content:""; margin:0 25px; width:1px; height:15px; background:rgba(255,255,255,.3);}
.mobile-navigation .links ul li:first-child::before {display:none;}
.mobile-navigation .links ul li a {font-size:16px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.mobile-navigation .contact {color:#6dcde5; font-size:20px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; opacity:0; transition:.4s; transform:translateY(20px);}
.mobile-navigation .contact strong {font-family:"Roboto"; font-size:24px; font-weight:700; line-height:1em; letter-spacing:0; margin-left:6px;}
.mobile-navigation .close {position:absolute; top:40px; right:60px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:11px; left:0; width:100%; height:2px; background:#fff; border-radius:3px; transition:.4s;}

html.menu-opened {overflow:hidden;}
html.menu-opened .nav-background {animation:nav_background .7s ease-out forwards;}
html.menu-opened .mobile-navigation {z-index:102;}
html.menu-opened .mobile-navigation .wrap {opacity:1; transition-delay:.5s; z-index:102;}
html.menu-opened .mobile-navigation .home {opacity:1; transition-delay:.7s; transform:translateY(0);}
html.menu-opened .mobile-navigation .nav-menu > ul > li {opacity:1; transform:translateX(0);}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(1) {transition-delay:.5s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(2) {transition-delay:.55s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(3) {transition-delay:.6s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(4) {transition-delay:.65s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(5) {transition-delay:.7s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(6) {transition-delay:.75s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(7) {transition-delay:.8s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(8) {transition-delay:.85s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(9) {transition-delay:.9s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(10) {transition-delay:.95s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(11) {transition-delay:1s;}
html.menu-opened .mobile-navigation .links {opacity:1; transition-delay:.8s; transform:translateY(0);}
html.menu-opened .mobile-navigation .contact {opacity:1; transition-delay:.9s; transform:translateY(0);}

html.menu-opened .close:before {transform:rotate(45deg); transition-delay:.5s;}
html.menu-opened .close:after {transform:rotate(-45deg); transition-delay:.5s;}

html.menu-closed .nav-background {animation:nav_background_back .7s ease-out forwards;}

@keyframes nav_background {
	0% {
		top:-20px;
	}
	30% {
		background:#002060;
		top:70%;
	}
	40% {
		top:50%;		
		transform: scale(1) translateZ(0);
	}
	100%{
		background-image:linear-gradient(to bottom right, #002060 20%, #1c99d9);
		transform: scale(200) translateZ(0);
	}
}

@keyframes nav_background_back {
	0% {
		background-image:linear-gradient(to bottom right, #002060 20%, #1c99d9);
		transform: scale(200) translateZ(0);
	}
	40% {
		top:50%;		
		transform: scale(1) translateZ(0);
	}
	50% {
		background:#002060;
		top:70%;
	}
	100%{
		top:-20px;
	}
}

@keyframes nav_open {
	0% {
		top:50%; left:50%; border-radius:100%;
	}
	100%{
		width:100%; height:100%;
		border-radius:0;
	}
}
#container {position:relative;}
/* main */
.main-float-nav {position:fixed; top:50%; left:20px; transform:translateY(-40%); z-index:80;}
.main-float-nav ul li {padding:6px 0;}
.main-float-nav ul li a {display:block; position:relative;}
.main-float-nav ul li i {display:block; position:relative; width:30px; height:30px; border-radius:100%;}
.main-float-nav ul li i:after {content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; background:#e2e2e2; border-radius:100%;}
.main-float-nav ul li span {display:none; position:absolute; top:50%; left:40px; margin-top:-13px; text-align:center; min-width:80px; padding:0 12px; background:#fff; border:1px solid #e2e2e2; border-radius:20px; line-height:24px; color:#242424; font-size:14px; font-weight:500; white-space:nowrap;}
.main-float-nav ul li a:hover i,
.main-float-nav ul li.active i {border:1px solid #e2e2e2;}
.main-float-nav ul li a:hover span,
.main-float-nav ul li.active span {display:block;}

.main-web-award {display:grid; gap:16px; position:absolute; top:75px; left:50px; z-index:50; color:#fff; line-height:1.63em; text-align:left;}
.main-web-award .group {display:flex; align-items:center;}
.main-web-award img {width:46px; margin-right:15px;}
.main-web-award strong {font-weight:600; font-size:1.06em;}

.main-visual {position:relative; text-align:center; color:#fff;}
.main-visual .item {position:relative; height:100vh; overflow:hidden;}
.main-visual .item img {margin:0 auto;}
.main-visual .desktop {display:block;}
.main-visual .mobile {display:none;}
.main-visual .image {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.main-visual .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-visual .text-wrap {position:absolute; top:50%; left:0; width:100%; padding:50px 100px; transform:translateY(-50%);}
.main-visual .text-wrap p {position:relative; transition-duration:1.7s; opacity:0;}
.main-visual .text-wrap p:nth-child(1) {transform:translateX(100px);}
.main-visual .text-wrap p:nth-child(2) {transform:translateX(100px); transition-delay:.2s;}
.main-visual .text-wrap .inline {display:inline-block; text-align:left; position:relative;}
.main-visual .text-wrap .inline:before {content:""; position:absolute; top:-60px; left:0; width:220px; height:220px; background:#12b1fb; border-radius:100%; transition-duration:1.2s; opacity:0; transform:translateX(100px);}
.main-visual .slick-current .text-wrap p {opacity:1; transform:translateX(0);}
.main-visual .slick-current .text-wrap .inline:before {opacity:1; transform:translateX(0);}
.main-visual .why-website {line-height:0; margin-bottom:25px;}
.main-visual .why-txt {_font-family:'LeferiBaseType',sans-serif; font-size:38px; line-height:1.4em; letter-spacing:-.02em;}
.main-visual .s-txt {font-size:30px; font-weight:700; line-height:1.3em; letter-spacing:-.03em; margin:0 0 15px 50px;}
.main-visual .b-txt {font-size:95px; font-weight:500; line-height:1.2em; letter-spacing:-.04em;}
.main-visual .b-txt2 {font-size:52px; line-height:1.2em; letter-spacing:-.03em;}
.main-visual .wrap {position:absolute; top:50%; left:0; width:100%; padding:50px 100px; display:flex; align-items:center; justify-content:center; transform:translateY(-50%);}
.main-visual .wrap .text-wrap {position:static; transform:none; padding:0; margin-right:5%; width:45%; max-width:640px;}
.main-visual .wrap .device {width:50%; max-width:900px;}
.main-visual .pager-wrap {position:absolute; bottom:8%; left:50%; transform:translateX(-50%); text-align:left; z-index:50;}
.main-visual .pager {font-family:'Play', sans-serif; font-size:20px; color:rgba(255,255,255,.7); line-height:1.3em; letter-spacing:0; margin-bottom:12px;}
.main-visual .pager .bar {margin:0 12px;}
.main-visual .pager .current {color:#fff; font-weight:700;}
.main-visual .progress {position:relative; width:300px; height:2px; background:rgba(4,19,49,.7);}
.main-visual .progress:after {content:""; position:absolute; top:0; left:0; width:0; height:100%; background:#fff; transition: 0.1s width linear;}
.main-visual .progress.animate:after {transition:width linear; width:100%; transition-delay:unset; transition-duration:2s;}
.main-visual video {object-fit: cover;}

.main-title {text-align:center; margin-bottom:50px;}
.main-title h2 {color:#242424; font-size:30px; font-weight:500; line-height:1.33em; letter-spacing:-.03em;}
.main-title h2 .num {letter-spacing:-.03em; margin-right:2px;}
.main-title h2 span {position:relative;}
.main-title h2.lg {font-size:40px;}
.main-title p {color:#686868; font-size:16px; line-height:1.5em; letter-spacing:-.03em; margin-top:10px;}
.main-title .tit-dot {position:relative;}
.main-title .tit-dot:before {content:""; position:absolute; top:-12px; left:50%; margin-left:-4px; width:8px; height:8px; border-radius:100%; animation:move_dot 2.5s ease-in 2s infinite ;}
.main-title .dot-1:before {background:#6dcde5; animation-delay: .2s;}
.main-title .dot-2:before {background:#42ade2; animation-delay: .3s;}
.main-title .dot-3:before {background:#314eaa; animation-delay: .4s;}
.main-title .dot-4:before {background:#002060; animation-delay: .5s;;}

@keyframes move_dot {
	0%,28%,100%{transform:translateY(0);}
	15%{transform:translateY(-8px);}
}

.main-award {padding:150px 30px 70px; text-align:center; overflow:hidden;}
.main-award .contain {max-width:1660px;}
.main-award .list {margin-top:55px;}
.main-award .swiper {overflow:visible;}
.main-award .item {display:block; max-width:320px; margin:0 auto;}
.main-award .item:hover .img-area .mark {-webkit-transform:scale(1.1); transform:translate(1.1);}
.main-award .item:hover .img-area .img .hover {opacity:1;}
.main-award .img-area {position:relative; margin-bottom:15px; padding-top:20px;}
.main-award .img-area .img {position:relative; border-radius:100%; overflow:hidden;}
.main-award .img-area .img .hover {display:flex; align-items:center; justify-content:center; position:absolute; inset:0; background:rgba(0,0,0,.7); color:#fff; text-decoration:underline; text-underline-offset:0.25em; transition:.2s; opacity:0;}
.main-award .img-area .mark {position:absolute; top:10px; left:0; width:120px; height:120px; background:#fff; border-radius:100%; box-shadow:0 0 15px rgba(0,0,0,.2); transition:.2s; z-index:50;}
.main-award .img-area .mark img {position:absolute; top:50%; left:50%; width:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-award .txt-area {display:flex; align-items:center; justify-content:center;}
.main-award .txt-area:before,
.main-award .txt-area:after {content:''; display:block; width:26px; height:68px; background:url("../images/main/leaf.png") 0 50% no-repeat; background-size:contain;}
.main-award .txt-area:after {-webkit-transform:scaleX(-1); transform:scaleX(-1);}
.main-award .txt-area > div {margin:0 10px; min-width:60%;}
.main-award .txt-area .txt {color:#686868; font-size:17px; line-height:1.33em; letter-spacing:-.03em; margin-bottom:4px;}
.main-award .txt-area .txt strong {color:#242424; font-size:1.06em; font-weight:500;}
.main-award .txt-area .tit {font-size:20px; line-height:1.33em; letter-spacing:-.03em;}
.main-award .txt-area .tit strong {font-weight:600;}
.main-award .btn-area {margin-top:37px; display:flex; align-items:center; justify-content:center; color:#686868; line-height:1.33em; letter-spacing:-.03em;}
.main-award .btn-area:after {content:''; margin-left:10px; width:31px; height:10px; background:url("../images/main/btn_arrow.svg") 50% 50% no-repeat; background-size:contain;}
.main-award .controls {display:flex; justify-content:center; gap:20px; margin-top:20px;}
.main-award .slide-btn {padding:20px 0; transition:.2s; opacity:.2; cursor:pointer;}
.main-award .slide-btn svg {display:block;}
.main-award .slide-btn:hover {opacity:1;}

.main-portfolio {padding:80px 0;}

.main-merit {padding:80px 0; text-align:center; background:url("../images/main/merit_bg.jpg") 50% 50% no-repeat; background-size:cover;}
.main-merit .contain {max-width:1660px;}
.main-merit .main-title * {color:#fff;}
.main-merit .content {display:flex; margin:0 -16px;}
.main-merit .box {width:calc(25% - 32px); margin:0 16px; padding:44px 15px; background:#fff; border-radius:20px; box-shadow:0 0 15px rgba(0,0,0,.25); transition:.2s;}
.main-merit .box .ico {width:100px; height:100px; margin:0 auto; background-position:50% 50%; background-repeat:no-repeat;}
.main-merit .box .ico-1 {background-image:url("../images/main/merit_icon1.png");}
.main-merit .box .ico-2 {background-image:url("../images/main/merit_icon2.png");}
.main-merit .box .ico-3 {background-image:url("../images/main/merit_icon3.png");}
.main-merit .box .ico-4 {background-image:url("../images/main/merit_icon4.png");}
.main-merit .box dl {margin-top:40px;}
.main-merit .box dt {color:#242424; font-size:22px; font-weight:700; line-height:1.33em; letter-spacing:-.03em;}
.main-merit .box dt:after {content:""; display:block; width:40px; height:1px; background:#b8d8f8; margin:15px auto 18px;}
.main-merit .box dd {text-align:left; padding-left:10px; line-height:1.688em; letter-spacing:-.03em;}
.main-merit .box:hover {background:#42ade2;}
.main-merit .box:hover * {color:#fff;}
.main-merit .box:hover .ico-1 {background-image:url("../images/main/merit_icon1_on.png");}
.main-merit .box:hover .ico-2 {background-image:url("../images/main/merit_icon2_on.png");}
.main-merit .box:hover .ico-3 {background-image:url("../images/main/merit_icon3_on.png");}
.main-merit .box:hover .ico-4 {background-image:url("../images/main/merit_icon4_on.png");}
.main-merit .box:hover dt:after {background:#fff;}

.main-service {text-align:center; padding:80px 0 0; min-height:740px; overflow:hidden;}
.main-service .title {margin-bottom:45px;}
.main-service .title h2 {font-size:30px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.main-service .title .blue {position:relative; color:#314eaa;}
.main-service .title .blue:before {content:""; position:absolute; bottom:5px; left:0; width:100%; height:25%; background:#d1e7fd;}
.main-service .title .blue span {position:relative;}
.main-service .slider {position:relative; padding:0 80px;}
.main-service .swiper {padding:40px 0;}
.main-service .swiper-slide {width:340px;}
.main-service .swiper-slide .s-box {position:relative; display:flex; align-items:center; justify-content:center; width:220px; height:220px; margin:50px auto; background:#fff; border-radius:26%; box-shadow:0 0 25px rgba(0,0,0,.12); transition:.4s;}
.main-service .swiper-slide .s-box .in {width:100%; padding:15px;}
.main-service .swiper-slide .s-box .tit {margin-top:20px; font-size:20px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.main-service .swiper-slide .s-box .plus {display:none; position:absolute; top:-40px; right:-40px; width:120px; height:120px; background:#002060 url("../images/main/plus.png") 50% 50% no-repeat; border-radius:100%; overflow:hidden;}
.main-service .swiper-slide .s-box .plus:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:100%; background:url("../images/main/circle.png") 50% 50% no-repeat; background-size:contain; animation:rotation 10s linear infinite;}
.main-service .swiper-slide .s-txt {transition:.2s; opacity:0;}
.main-service .swiper-slide .s-txt .tit {margin:27px 0 10px; font-size:20px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.main-service .swiper-slide .s-txt .txt {color:#454545; font-size:16px; font-weight:300; line-height:1.647em; letter-spacing:-.03em;}
.main-service .swiper-slide-prev {padding-right:3.2%;}
.main-service .swiper-slide-next {padding-left:3.2%;}
.main-service .swiper-slide-active .s-box {width:320px; height:320px; margin:0 auto; box-shadow:none; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; border-radius:30%;}
.main-service .swiper-slide-active .s-box.st1 {background-image:url("../images/main/service_img1.jpg");}
.main-service .swiper-slide-active .s-box.st2 {background-image:url("../images/main/service_img2.jpg");}
.main-service .swiper-slide-active .s-box.st3 {background-image:url("../images/main/service_img3.jpg");}
.main-service .swiper-slide-active .s-box.st4 {background-image:url("../images/main/service_img4.jpg");}
.main-service .swiper-slide-active .s-box.st5 {background-image:url("../images/main/service_img5.jpg");}
.main-service .swiper-slide-active .s-box.st6 {background-image:url("../images/main/service_img6.jpg");}
.main-service .swiper-slide-active .s-box.st7 {background-image:url("../images/main/service_img7.jpg");}
.main-service .swiper-slide-active .s-box.st8 {background-image:url("../images/main/service_img8.jpg");}
.main-service .swiper-slide-active .s-box.st9 {background-image:url("../images/main/service_img9.jpg");}
.main-service .swiper-slide-active .s-box.st10 {background-image:url("../images/main/service_img10.jpg");}
.main-service .swiper-slide-active .s-box.st11 {background-image:url("../images/main/service_img11.jpg");}
.main-service .swiper-slide-active .s-box.st12 {background-image:url("../images/main/service_img12.jpg");}
.main-service .swiper-slide-active .s-box.st13 {background-image:url("../images/main/service_img13.jpg");}
.main-service .swiper-slide-active .s-box.st14 {background-image:url("../images/main/service_img14.jpg");}
.main-service .swiper-slide-active .s-box.st15 {background-image:url("../images/main/service_img15.jpg");}
.main-service .swiper-slide-active .s-box.st16 {background-image:url("../images/main/service_img16.jpg");}
.main-service .swiper-slide-active .s-box.st17 {background-image:url("../images/main/service_img17.jpg");}
.main-service .swiper-slide-active .s-box .in {display:none;}
.main-service .swiper-slide-active .s-box .plus {display:block;}
.main-service .swiper-slide-active .s-txt {opacity:1;}
.main-service .slide-btn {position:absolute; top:50%; margin-top:-90px; width:62px; height:62px; background-position:50% 50%; background-repeat:no-repeat; z-index:50;}
.main-service .slide-btn.prev {left:3%; background-image:url("../images/main/service_prev.png");}
.main-service .slide-btn.next {right:3%; background-image:url("../images/main/service_next.png");}

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

.main-as {padding:80px 0; background:#f1f1f1; overflow:hidden;}
.main-as .contain {max-width:1660px;}
.main-as .wrap {display:flex;}
.main-as .left {width:47.8%; padding-right:20px;}
.main-as .left .box {height:100%;}
.main-as .right {width:52.2%;}
.main-as .right .box:first-child {margin-bottom:20px;}
.main-as .box {position:relative; padding:29px; background:#fff; border:1px solid #ddd; border-radius:20px; overflow:hidden;}
.main-as h3 {color:#242424; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; margin:-4px 0 12px;}

.main-as .as-slider {text-align:center;}
.main-as .as-slider .head {display:table; width:100%; height:50px; table-layout:fixed; color:#fff; font-weight:500; letter-spacing:-.04em; line-height:1.5em; background:#002060;}
.main-as .as-slider .head div {display:table-cell; vertical-align:middle; border-left:1px solid rgba(255,255,255,.3);}
.main-as .as-slider .head div:nth-child(1) {width:14%; border-left:0;}
.main-as .as-slider .head div:nth-child(2) {width:auto}
.main-as .as-slider .head div:nth-child(3) {width:16%}
.main-as .as-slider .head div:nth-child(4) {width:15%}
.main-as .as-slider .head div:nth-child(5) {width:16%}
.main-as .as-slider .body {border-bottom:1px solid #ddd;}
.main-as .as-slider .body .item {display:table !important; width:100%; height:50px; table-layout:fixed; color:#454545; letter-spacing:-.04em; line-height:1.5em;}
.main-as .as-slider .body .item > div {display:table-cell; vertical-align:middle; border-left:1px solid #ddd; border-top:1px solid #ddd;}
.main-as .as-slider .body .item > div:nth-child(1) {width:14%; border-left:0;}
.main-as .as-slider .body .item > div:nth-child(2) {width:auto}
.main-as .as-slider .body .item > div:nth-child(3) {width:16%}
.main-as .as-slider .body .item > div:nth-child(4) {width:15%}
.main-as .as-slider .body .item > div:nth-child(5) {width:16%}
.main-as .as-slider .body .c1 {color:#314eaa;}
.main-as .as-slider .body .c2 {color:#1aa8b4;}
.main-as .as-slider .slick-vertical .slick-slide {border:0;}

.main-as .as-counter {position:relative; display:flex; justify-content:space-between; text-align:center;}
.main-as .as-counter .item {border-radius:20px; display:table; table-layout:fixed; height:120px;}
.main-as .as-counter .item .cell {display:table-cell; vertical-align:middle; border-left:1px dotted #b6b6b6; padding:10px;}
.main-as .as-counter .item .cell:first-child {border-left:0;}
.main-as .as-counter .item dt {padding:5px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; margin-bottom:13px;}
.main-as .as-counter .item dd {color:#242424; font-size:18px; font-weight:500; line-height:1.3em;}
.main-as .as-counter .item dd strong {font-family:"Roboto",sans-serif; font-size:32px; font-weight:700; line-height:1em; margin-right:4px;}
.main-as .as-counter .item.type1 {background:#f1f1f1; flex:1 1 auto; min-width:0; width:1%; margin-right:10px;}
.main-as .as-counter .item.type1 dt {color:#686868;}
.main-as .as-counter .item.type1 dd strong {color:#314eaa;}
.main-as .as-counter .item.type2 {background:#1c99d9; width:55%;}
.main-as .as-counter .item.type2 .cell {border-left-color:#70bfe7}
.main-as .as-counter .item.type2 dt {color:#454545; background:#fff; border-radius:30px; display:inline-block; padding-left:20px; padding-right:20px;}
.main-as .as-counter .item.type2 dd {color:#fff;}
.main-as .more {position:absolute; top:30px; right:29px; color:#686868; font-size:14px; font-weight:300; line-height:1.3em; letter-spacing:-.03em;}
.main-as .more:after {content:""; display:inline-block; vertical-align:middle; margin:-.2em 0 0 7px; width:7px; height:11px; background:url("../images/main/more_arrow.png") 50% 50% no-repeat;}

.main-tech {position:relative; padding:80px 0;}
.main-tech .background {position:absolute; bottom:0; left:0; right:0; background:url("../images/main/tech_bg.jpg") 50% 50% no-repeat; background-size:cover; z-index:-1;}
.main-tech .contain {max-width:1660px;}
.main-tech .content {display:flex; margin:0 -16px;}
.main-tech .box {width:calc(25% - 32px); margin:0 16px; background:#fff; border-radius:20px; overflow:hidden; transition:.2s;}
.main-tech .box .cnt {padding:22px 30px 30px;}
.main-tech .box .ico {width:62px; height:62px; background-position:0 0; background-repeat:no-repeat; margin-bottom:10px;}
.main-tech .box .ico-1 {background-image:url("../images/main/tech_icon1.png");}
.main-tech .box .ico-2 {background-image:url("../images/main/tech_icon2.png");}
.main-tech .box .ico-3 {background-image:url("../images/main/tech_icon3.png");}
.main-tech .box .ico-4 {background-image:url("../images/main/tech_icon4.png");}
.main-tech .box dl {margin-top:-4px; min-height:130px; margin-bottom:20px;}
.main-tech .box dt {color:#242424; font-size:20px; font-weight:500; line-height:1.4em; letter-spacing:-.03em; margin-bottom:5px;}
.main-tech .box dd {color:#686868; line-height:1.688em; letter-spacing:-.03em;}
.main-tech .box .more {display:inline-block; color:#536bb8; line-height:1.3em; letter-spacing:-.03em;}
.main-tech .box .more:after {content:""; display:inline-block; vertical-align:middle; transition:.2s; margin:-.2em 0 0 7px; width:25px; height:25px; background:#314eaa url("../images/main/more_arrow2.png") 50% 50% no-repeat; border-radius:100%;}
.main-tech .box .more:hover::after {transform:translateX(5px);}
.main-tech .box:hover {background:#42ade2;}
.main-tech .box:hover * {color:#fff !important;}
.main-tech .box:hover .ico-1 {background-image:url("../images/main/tech_icon1_on.png");}
.main-tech .box:hover .ico-2 {background-image:url("../images/main/tech_icon2_on.png");}
.main-tech .box:hover .ico-3 {background-image:url("../images/main/tech_icon3_on.png");}
.main-tech .box:hover .ico-4 {background-image:url("../images/main/tech_icon4_on.png");}
.main-tech .box:hover .more:after {background-color:#fff; background-image:url("../images/main/more_arrow3.png");}
.main-tech .view-more-btn {color:#fff;}
.main-tech .view-more-btn .circle {background:#fff; border:0;}
.main-tech .view-more-btn .circle:before,
.main-tech .view-more-btn .circle:after {background:#686868;}
.main-tech .view-more-btn a:hover .circle {background-color:#6dcde5;}
.main-tech .view-more-btn a:hover .circle i:before,
.main-tech .view-more-btn a:hover .circle i:after {background:#fff;}

.main-clients {padding:80px 0;}
.main-clients .contain {max-width:1660px;}
.main-clients .list ul {display:flex; flex-wrap:wrap; border-top:1px solid #ddd; border-left:1px solid #ddd; text-align:center;}
.main-clients .list ul li {width:16.66666666%; padding:4px 0; border-right:1px solid #ddd; border-bottom:1px solid #ddd; overflow:hidden;}
.main-clients .list ul li a {display:block;}
.main-clients .list ul li div {margin:0 -5px;}
.main-clients .list ul li .on {display:none;}
.main-clients .list ul li:hover .off {display:none;}
.main-clients .list ul li:hover .on {display:block;}
.main-clients .list ul li:hover div {animation:zoonIn .5s forwards;}

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

/* sub */
/* #sub #container {background:#fff; position:relative;} */
.sub-content {padding-bottom:150px; padding-top:40px;}

/* footer */
#footer {position:relative; padding:50px; color:#d0d0d0; font-size:14px; font-weight:200; line-height:1.4em; background:#262626;}
#footer address {font-style:normal;}

.foot-row-1 {display:flex; margin-bottom:40px;}

.foot-logo {width:230px; margin-right:30px;}

.foot-nav {flex:1 1 auto; min-width:0; width:1%;}
.foot-nav ul {display:flex; flex-wrap:wrap;}
.foot-nav ul li {position:relative; padding:0 20px; margin-bottom:8px;}
.foot-nav ul li:before {content:""; position:absolute; top:50%; left:0; width:1px; height:15px; margin-top:-6px; background:#626262;}
.foot-nav ul li:first-child {padding-left:0;}
.foot-nav ul li:first-child::before {display:none;}
.foot-nav ul li:last-child {padding-right:0;}
.foot-nav ul li a {display:block; font-size:16px; font-weight:400; line-height:1.3em;}
.foot-nav ul li a:hover {text-decoration:underline;}

.foot-contact p {color:#91c8f3; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.foot-contact p .tel {margin-left:13px; font-family:"Roboto",sans-serif; font-size:30px; font-weight:700; line-height:1em; letter-spacing:0;}
.foot-contact .time {display:flex; margin:10px -5px 0; justify-content:space-between;}
.foot-contact .time div {padding:0 5px; color:#1d90b6; line-height:1.5em; letter-spacing:-.02em;}
.foot-contact .time .t1 {font-size:20px; font-weight:500;}
.foot-contact .time .t2 {font-size:20px; font-weight:600;}


.foot-row-2 {display:flex; align-items:flex-end;}

.foot-info {flex:1 1 auto; min-width:0; width:1%;}
.foot-info span {display:inline-block; margin-bottom:4px;}
.foot-info .bar {width:1px; height:12px; background:#616161; vertical-align:middle; margin:-.2em 13px 0;}
.foot-info .copyright {margin-top:25px;}

.foot-links ul {display:flex; flex-wrap:wrap;}
.foot-links ul li {margin-left:9px; min-width:155px; text-align:center; border-bottom:1px solid #686868;}
.foot-links ul li a {display:block; padding-bottom:14px; font-size:15px; font-weight:400; line-height:1.3em;}
.foot-links ul li a:before {content:""; display:inline-block; width:14px; height:14px; vertical-align:middle; margin:-.2em 7px 0 0; background:url("../images/common/icon_link.png") 50% 50% no-repeat;}

.foot-links .download {margin-left:9px; margin-bottom:22px;}
.foot-links .download a {display:block; line-height:46px; border:1px solid #b1b1b1; text-align:center; font-size:16px; font-weight:500; }
.foot-links .download a:before {content:''; width:16px; height:16px; background:url('../images/bbs/download01.png') 0 0 no-repeat; background-size:cover; display:inline-block; vertical-align:middle; margin-top:-4px; margin-right:8px;}
/* quick */
.quick {position:fixed; bottom:50px; right:50px; z-index:90;}
.quick .q-link li {position:relative; width:70px; height:70px; margin-top:15px;}
.quick .q-link li a {position:absolute; top:0; right:0; display:flex; align-items:center; color:#fff; font-size:20px; font-weight:500; line-height:1.3em; border-radius:50px; overflow:hidden;}
.quick .q-link li a i {display:inline-block; width:70px; height:70px; background-position:50% 50%; background-repeat:no-repeat;}
.quick .q-link li a span {flex:1 1 auto; min-width:0; width:0; overflow:hidden; white-space:nowrap; transition:.2s;}
.quick .q-link li a:hover i {margin-left:10px;}
.quick .q-link li a:hover span {width:140px;}
.quick .q-cs { background:#4570e1; font-family:"Roboto",sans-serif; font-size:24px; font-weight:700;}
.quick .q-cs i {background-image:url("../images/common/q_cs.png");}
.quick .q-inq {background:#421bd5;}
.quick .q-inq i {background-image:url("../images/common/q_inquiry.png");}
.quick .q-demo {background:#12b1fb;}
.quick .q-demo i {background-image:url("../images/common/q_demo.png");}

.side-cs {position:fixed; top:180px; right:0; z-index:91; transition:.6s; transform:translateX(100%);}
.side-cs .toggle {position:absolute; top:0; left:-45px; width:46px; height:95px; overflow:hidden; border-radius:6px 0 0 6px; background:#1c99d9; color:#fff; /*font-family:'Play', sans-serif;*/ font-size:17px; line-height:1em;}
.side-cs .toggle span {position:absolute; top:50%; left:50%;  transform:translate(-50%,-50%) /*rotate(90deg)*/;  margin-top:-.04em;}
.side-cs .wrap {width:320px; padding:25px 25px 30px; background:#1c99d9;}
.side-cs .tit {color:#fff; font-size:20px; font-weight:500; line-height:1.4em; letter-spacing:-.04em; margin:-5px 0 15px;}
.side-cs .txt {color:#b0e4fd; font-size:16px; font-weight:300; line-height:1.5em; letter-spacing:-.04em; margin-bottom:13px;}
.side-cs .form {padding:25px; background:#fff; border-radius:12px;}
.side-cs .form .tt {margin:-6px 0 15px; text-align:center; color:#242424; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.04em;}
.side-cs .form .group {display:flex; align-items:center; margin-bottom:5px;}
.side-cs .form .group label {width:70px; color:#454545; font-size:15px; font-weight:500; line-height:1.3em; letter-spacing:-.04em;}
.side-cs .form .group .input {flex:1 1 auto; min-width:0; width:1%; height:35px; padding:4px 10px; color:#686868; font-size:15px; font-weight:300; line-height:1.3em; letter-spacing:-.04em; border-radius:6px;}
.side-cs .form .group select.input {background:url("../images/common/select.png") right 10px center no-repeat;}
.side-cs .form .check {text-align:center; margin:13px 0 15px; color:#686868; font-size:15px; font-weight:300; line-height:1.3em; letter-spacing:-.04em;}
.side-cs .form .check a {color:#454545; margin-left:4px;}
.side-cs .form .check a:hover {text-decoration:underline;}
.side-cs .form .check .checkbox label:before {border-radius:4px; background-color:#fff;}
.side-cs .form .check .checkbox input:checked + label:before {background-color:#1688e0;}
.side-cs .form .submit {display:block; width:100%; height:40px; color:#fff; font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.04em; border:0; border-radius:6px; background:#254699;}
.side-cs .btns {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:11px;}
.side-cs .btns a {display:block; padding:18px 0 15px; color:#fff; font-size:18px; font-weight:400; line-height:1.3em; letter-spacing:-.04em; text-align:center; border-radius:12px;}
.side-cs .btns i {display:block; width:46px; height:46px; margin:0 auto 8px; background-position:50% 50%; background-repeat:no-repeat;}
.side-cs .btns .s-cs {width:calc(50% - 5px); background:#421bd5; font-family:"Roboto",sans-serif; font-size:22px; font-weight:700;}
.side-cs .btns .s-cs i {background-image:url("../images/common/s_cs.png");}
.side-cs .btns .s-inq {width:calc(50% - 5px); background:#254699;}
.side-cs .btns .s-inq i {background-image:url("../images/common/s_inquiry.png");}
.side-cs .btns .s-demo {width:100%; height:60px; padding:0; margin-top:10px; display:flex; justify-content:center; align-items:center; background:#3263e6;}
.side-cs .btns .s-demo i {flex:0 0 39px; width:39px; height:39px; margin:0 17px 0 0; background-image:url("../images/common/s_demo.png");}
.side-cs.hidden {transform:translateX(100%);}
.side-cs.active {transform:translateX(0);}

.requireplaceholder::-webkit-input-placeholder { /* WebKit, Blink, Edge */color:    #F00;}
.requireplaceholder:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:    #F00;	opacity:  1;}
.requireplaceholder::-moz-placeholder { /* Mozilla Firefox 19+ */color:    #F00;opacity:  1;}
.requireplaceholder:-ms-input-placeholder { /* Internet Explorer 10-11 */color:    #F00;}

/* update 2024-12-23 */
.float-cs {position:fixed; top:180px; right:0; z-index:91; transition:.6s; -webkit-transform:translateX(100%); transform:translateX(100%);}
.float-cs.hidden {-webkit-transform:translateX(100%); transform:translateX(100%);}
.float-cs.active {-webkit-transform:translateX(0); transform:translateX(0);}

.float-cs-btns {position:absolute; top:0; left:-45px; width:46px;}
.float-cs-btns .toggle {position:relative; display:block; width:100%; height:95px; overflow:hidden; border-radius:6px 0 0 6px; background:#1c99d9; color:#fff; font-size:17px; line-height:1em;}
.float-cs-btns .toggle span {position:absolute; top:50%; left:50%;  transform:translate(-50%,-50%);  margin-top:-.04em;}
.float-cs-btns .toggle.st2 {background:#14ce9b;}

.float-cs-cont {width:320px;}
.float-cs-cont .wrap {display:none; padding:25px 25px 30px; background:#1c99d9;}
.float-cs-cont .wrap.active {display:block;}
.float-cs-cont .wrap.st2 {background:#14ce9b;}
.float-cs-cont .wrap.st2 .txt {color:#fff;}
.float-cs-cont .wrap.st2 .btns .s-cs {background:#ef5632;}
.float-cs-cont .wrap.st2 .btns .s-inq {background:#ef9832;}
.float-cs-cont .tit {color:#fff; font-size:20px; font-weight:500; line-height:1.4em; letter-spacing:-.04em; margin:-5px 0 15px;}
.float-cs-cont .txt {color:#b0e4fd; font-size:16px; font-weight:300; line-height:1.5em; letter-spacing:-.04em; margin-bottom:13px;}
.float-cs-cont .form {padding:25px; background:#fff; border-radius:12px;}
.float-cs-cont .form .tt {margin:-6px 0 15px; text-align:center; color:#242424; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.04em;}
.float-cs-cont .form .group {display:flex; align-items:center; margin-bottom:5px;}
.float-cs-cont .form .group label {width:70px; color:#454545; font-size:15px; font-weight:500; line-height:1.3em; letter-spacing:-.04em;}
.float-cs-cont .form .group .input {flex:1 1 auto; min-width:0; width:1%; height:35px; padding:4px 10px; color:#686868; font-size:15px; font-weight:300; line-height:1.3em; letter-spacing:-.04em; border-radius:6px;}
.float-cs-cont .form .group select.input {background:url("../images/common/select.png") right 10px center no-repeat;}
.float-cs-cont .form .check {text-align:center; margin:13px 0 15px; color:#686868; font-size:15px; font-weight:300; line-height:1.3em; letter-spacing:-.04em;}
.float-cs-cont .form .check a {color:#454545; margin-left:4px;}
.float-cs-cont .form .check a:hover {text-decoration:underline;}
.float-cs-cont .form .check .checkbox label:before {border-radius:4px; background-color:#fff;}
.float-cs-cont .form .check .checkbox input:checked + label:before {background-color:#1688e0;}
.float-cs-cont .form .submit {display:block; width:100%; height:40px; color:#fff; font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.04em; border:0; border-radius:6px; background:#254699;}
.float-cs-cont .map-area {height:360px; border-radius:12px;}
.float-cs-cont .btns {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:11px;}
.float-cs-cont .btns a {display:block; padding:18px 0 15px; color:#fff; font-size:18px; font-weight:400; line-height:1.3em; letter-spacing:-.04em; text-align:center; border-radius:12px;}
.float-cs-cont .btns i {display:block; width:46px; height:46px; margin:0 auto 8px; background-position:50% 50%; background-repeat:no-repeat;}
.float-cs-cont .btns .s-cs {width:calc(50% - 5px); background:#421bd5; font-family:"Roboto",sans-serif; font-size:22px; font-weight:700;}
.float-cs-cont .btns .s-cs i {background-image:url("../images/common/s_cs.png");}
.float-cs-cont .btns .s-inq {width:calc(50% - 5px); background:#254699;}
.float-cs-cont .btns .s-inq i {background-image:url("../images/common/s_inquiry.png");}
.float-cs-cont .btns .s-demo {width:100%; height:60px; padding:0; margin-top:10px; display:flex; justify-content:center; align-items:center; background:#3263e6;}
.float-cs-cont .btns .s-demo i {flex:0 0 39px; width:39px; height:39px; margin:0 17px 0 0; background-image:url("../images/common/s_demo.png");}

/* quick */
.quick {position:fixed; bottom:30px; right:30px; z-index:90;}
.quick .goto {display:block; position:relative; width:45px; height:45px; border-radius:100%; background:#42ade2 url("../images/common/top.png") 50% 48% no-repeat; transform:translateX(200%);}
.quick.active .goto {transform:translateX(0);}

/* background-logo */
.bg-logo {position:fixed; top:0; left:0; right:0; bottom:0; background:url("../images/common/bg_logo.png") 50% 50% no-repeat;}

/* indicator */
#header.header-fixed .progress-container {width:100%; height:5px; background:transparent; position:relative; z-index:22;}
#header.header-up .progress-container {margin-top:35px;}
#header.header-fixed .progress-bar {height:5px; background:#1c99d9; width:0%;}