/*서브*/
@import url("common.css");

:root {
	--visual-02 : url('/img/main/visual_bg_02.png');
	--visual-04 : url('/img/main/visual_bg_04.png');
}

.main {width:100%; overflow:hidden;}

.main .section {width:100%; overflow:hidden; position:relative; padding:var(--gap-160) 0;}
.main .section > .inner {width:92%; max-width:var(--max-w); margin:0 auto; position:relative; z-index:10;}
.main .section h2 {font-size:var(--font-50); font-weight:700; letter-spacing:-2px;}
.main .section h3 {font-size:var(--font-22); font-weight:600; color:var(--main-color-b);}
.main .section .sec-title {width:100%; text-align:center;}
.main .section .sec-title h2 {transform:translateY(30px); opacity:0; transition:transform 0.6s ease-in-out, opacity 0.6s ease-in-out;}
.main .section .sec-title h3 {transform:translateY(30px); opacity:0; transition:transform 0.6s ease-in-out, opacity 0.6s ease-in-out;}
.main .section .sec-title.ty-lf {text-align:left;}
.main .section .sec-title.ty-rt {text-align:right;}
.main .section .sec-conts {width:100%;}
.main .section .more {width:40px; height:40px; border-radius:50%; background:var(--icon-plus) center no-repeat; background-color:#000; display:block; font-size:0;}
.main .section .slider {opacity:0; visibility:hidden;}
.main .section .slider.slick-initialized {opacity:1; visibility:visible;}
.main .section .slider .slick-arrow {width:48px; height:48px; border-radius:50%; box-sizing:border-box; font-size:0; background:#fff; border:1px solid #ccc; position:absolute; z-index:10;}
.main .section .slider .slick-arrow:before {content:""; width:100%; height:100%; background-image:var(--arrow-b); background-repeat:no-repeat; background-position:center; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;}
.main .section .slider .slick-arrow:after {content:""; width:100%; height:100%; border-radius:50%; background:var(--main-color-b); position:absolute; left:0; top:0; transform:scale(0); transition:transform 0.2s linear;}
.main .section .slider .slick-arrow:hover {border-color:var(--main-color-b);}
.main .section .slider .slick-arrow:hover:before {background-image:var(--arrow-w);}
.main .section .slider .slick-arrow:hover:after {transform:scale(1);}
.main .section .slider .slick-next:before {transform:translate(-50%,-50%) scaleX(-1);}

.main .section.on .sec-title h2 {transform:translateY(0); opacity:1; transition-delay:0.3s;}
.main .section.on .sec-title h3 {transform:translateY(0); opacity:1;}


@media screen and (max-width: 1280px) {
	.main .section .more {width:32px; height:32px;}
}

@media screen and (max-width: 768px) {
	.main .section .more {width:26px; height:26px; background-size:12px auto;}
	.main .section .slider .slick-arrow {width:32px; height:32px;}
	.main .section .slider .slick-arrow:before {background-size:7px auto;}
}

@media screen and (max-width: 480px) {
	.main .section .more {width:20px; height:20px; background-size:8px auto;}
	.main .section .slider .slick-arrow {width:30px; height:30px;}
	.main .section .slider .slick-arrow:before {background-size:6px auto;}
}

.main .visual {padding:0; position:relative;}
.main .visual .visual-wrap {width:100%;}
.main .visual .visual-wrap .slick-slide {line-height:0;}
.main .visual .visual-wrap .visual-box {width:100%; position:relative; overflow:hidden;}
.main .visual .visual-wrap .visual-box .bg {width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scale(1.3); z-index:0; transition:transform 8s ease-in-out;}
.main .visual .visual-wrap .visual-box .video-bg {width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:0; background:#000;}
.main .visual .visual-wrap .visual-box .video-bg span {display:block; width:100%; height:100%; position:relative; overflow:hidden;}
.main .visual .visual-wrap .visual-box .video-bg span * {position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%);}
.main .visual .visual-wrap .visual-box .bg:after,
.main .visual .visual-wrap .visual-box .video-bg:after {content:""; width:100%; height:100%; background:rgba(0,0,0,0.4); position:absolute; left:0; top:0; z-index:0;}
.main .visual .visual-wrap .visual-box .visual-conts {width:95%; max-width:var(--max-w); height:100vh; max-height:973px; display:flex; align-items:center; text-align:center; margin:0 auto; z-index:1; position:relative;}
.main .visual .visual-wrap .visual-box .visual-conts .conts-wrap {width:100%; text-align:center;}
.main .visual .visual-wrap .visual-box .visual-conts .title {font-family:var(--Poppins); font-size:60px; font-weight:700; color:#fff; line-height:1.2;/* transform:translateY(30px); opacity:0; transition:transform 0.6s linear, opacity 0.6s linear;*/}
.main .visual .visual-wrap .visual-box .visual-conts .conts {font-size:30px; color:#fff; margin-top:var(--gap-32); line-height:1.5; /*transform:translateY(50px); opacity:0; transition:transform 0.6s linear, opacity 0.6s linear; transition-delay:0.4s;*/}
.main .visual .visual-wrap .visual-02 .bg {background:var(--visual-02) center no-repeat; background-size:cover;}
.main .visual .visual-wrap .visual-04 .bg {background:var(--visual-04) center no-repeat; background-size:cover;}
.main .visual .visual-wrap .slick-slide.on .visual-box .bg {transform:translate(-50%, -50%) scale(1);}
.main .visual .visual-wrap .slick-arrow {width:30px; height:40px; position:absolute; top:50%; transform:translateY(-50%); font-size:0; z-index:10;}
.main .visual .visual-wrap .slick-prev {background:var(--arrow-left) left center no-repeat; background-size:auto 100%; left:3%;}
.main .visual .visual-wrap .slick-next {background:var(--arrow-right) right center no-repeat; background-size:auto 100%; right:3%;}
.main .visual .visual-nav {width:100%; display:flex; align-items:center; justify-content:center; position:absolute; left:0; bottom:var(--gap-80); gap:0 10px; z-index:10;}
.main .visual .visual-nav span {display:block; width:20px; height:20px; position:relative; cursor:pointer; font-size:0;}
.main .visual .visual-nav span svg {position:absolute; left:0; top:0; width:100%; height:100%;}
.main .visual .visual-nav span:before {content:""; width:10px; height:10px; border-radius:50%; background:#CCCCCC; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.main .visual .visual-nav span.active:before {display:none;}
.main .visual .visual-arrow .arrow {width:30px; height:40px; position:absolute; top:50%; transform:translateY(-50%); font-size:0; z-index:10; cursor:pointer;}
.main .visual .visual-arrow .arrow.prev {background:var(--arrow-left) left center no-repeat; background-size:auto 100%; left:3%;}
.main .visual .visual-arrow .arrow.next {background:var(--arrow-right) right center no-repeat; background-size:auto 100%; right:3%;}
.main .visual .visual-wrap .swiper-slide-active .bg {transform:translate(-50%, -50%) scale(1);}

@keyframes circleAni {
	0% {stroke-dashoffset : 100;}
	100% {stroke-dashoffset : 0;}
}



@media screen and (max-width: 1440px) {
	.main .visual .visual-wrap .visual-box .visual-conts .title {font-size:54px;}
}

@media screen and (max-width: 1280px) {
	.main .visual .visual-wrap .visual-box .visual-conts .title {font-size:46px;}
	.main .visual .visual-wrap .visual-box .visual-conts .conts {font-size:24px;}
}

@media screen and (max-width: 768px) {
	.main .visual .visual-wrap .visual-box .visual-conts {width:80%; max-height:800px;}
	.main .visual .visual-wrap .visual-box .visual-conts .title {font-size:40px;}
	.main .visual .visual-wrap .visual-box .visual-conts .conts {font-size:20px;}
	.main .visual .visual-wrap .slick-arrow,
	.main .visual .visual-arrow .arrow {height:32px;}
}

@media screen and (max-width: 480px) {
	.main .section h2 {letter-spacing:-1.5px;}

	.main .visual .visual-wrap .visual-box .visual-conts {max-height:600px;}
	.main .visual .visual-wrap .visual-box .visual-conts .title {font-size:25px;}
	.main .visual .visual-wrap .visual-box .visual-conts .title .blank {display:block;}
	.main .visual .visual-wrap .visual-box .visual-conts .conts {font-size:14px;}
	.main .visual .visual-wrap .slick-arrow,
	.main .visual .visual-arrow .arrow {width:25px; height:28px;}
}


.main .case {z-index:10; min-width:280px; margin:0 auto;}
.main .case .sec-title {margin-bottom:var(--gap-80);}
.main .case .case-wrap .case-box {position:relative; width:100%;}
.main .case .case-wrap .case-box .img-box {width:100%;}
.main .case .case-wrap .case-box .img-box span {display:block; width:100%; height:0; padding-bottom:calc(420 / 800 * 100%); overflow:hidden; position:relative; border-radius:20px;}
.main .case .case-wrap .case-box .img-box span img {display:block; max-width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.main .case .case-wrap .case-box .conts-box {width:55%; max-width:440px; background:#fff; box-sizing:border-box; border:1px solid #fff; box-shadow:5px 5px 10px rgba(0,0,0,0.1); position:absolute; right:40px; bottom:-85px; border-radius:20px;}
.main .case .case-wrap .case-box .conts-box .inner {width:100%; padding:30px; display:flex; align-items:center;}
.main .case .case-wrap .case-box .conts-box .conts {width:calc(100% - 40px); padding-right:10px;}
.main .case .case-wrap .case-box .conts-box .conts > * {line-height:1.5;}
.main .case .case-wrap .case-box .conts-box .conts em {display:block; font-size:var(--font-30); font-weight:700; margin-bottom:var(--gap-16);}
.main .case .case-wrap .case-box .more-box span {display:block; width:100%; height:0; padding-bottom:calc(420 / 800 * 100%); overflow:hidden; position:relative; border-radius:20px; background:#fff; border:1px solid #ccc;}
.main .case .case-wrap .case-box .more-box span > .wrap {width:100%; text-align:center; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.main .case .case-wrap .case-box .more-box p {display:block; font-size:var(--font-30); font-weight:700; color:#666; margin-bottom:var(--gap-32);}
.main .case .case-wrap .case-box .more-box .more {margin:0 auto;}
.main .case .case-wrap .case-box:hover .conts-box {border-color:var(--main-color-b);}
.main .case .case-wrap .slick-slide {width:800px; margin:0 60px; padding-bottom:85px; line-height:1; opacity:0.5; transform:scale(0.8); transition:all 0.8s ease-in-out;}
.main .case .case-wrap .slick-slide .case-box .conts-box {visibility:hidden;}
.main .case .case-wrap .slick-current {opacity:1; transform:scale(1);}
.main .case .case-wrap .slick-current .case-box .conts-box {visibility:visible;}
.main .case .case-wrap .slick-arrow {left:50%; top:calc(50% - 40px); transform:translate(-50%,-50%);}
.main .case .case-wrap .slick-prev {left:calc(50% - 500px);}
.main .case .case-wrap .slick-next {left:calc(50% + 500px);}
.main .case .case-wrap .slick-dots {width:100%; margin-top:var(--gap-40); display:flex; align-items:center; justify-content:center; gap:0 var(--gap-16);}
.main .case .case-wrap .slick-dots li button {width:8px; height:8px; border-radius:50%; font-size:0; background:#ccc;}
.main .case .case-wrap .slick-dots li.slick-active button {background:var(--main-color);}
.main .case .button-box {margin-top:var(--gap-40);}


@media screen and (max-width: 1280px) {
	.main .case .case-wrap .case-box .conts-box {width:60%; right:30px; bottom:-60px;}
	.main .case .case-wrap .case-box .conts-box .inner {padding:20px;}
	.main .case .case-wrap .case-box .conts-box .conts {width:calc(100% - 32px);}
	.main .case .case-wrap .slick-slide {width:620px; margin:0 50px; padding-bottom:60px;}
	.main .case .case-wrap .slick-arrow {top:calc(50% - 30px);}
	.main .case .case-wrap .slick-prev {left:calc(50% - 390px);}
	.main .case .case-wrap .slick-next {left:calc(50% + 390px);}
}

@media screen and (max-width: 1024px) {
	.main .case .case-wrap .case-box .img-box span {border-radius:15px;}
	.main .case .case-wrap .case-box .conts-box {width:64%; border-radius:15px; bottom:-50px;}
	.main .case .case-wrap .case-box .conts-box .inner {padding:20px;}
	.main .case .case-wrap .case-box .conts-box .conts em {font-size:24px;}
	.main .case .case-wrap .case-box .conts-box .conts .txt {font-size:16px;}
	.main .case .case-wrap .case-box .more-box span {border-radius:15px;}
	.main .case .case-wrap .slick-slide {width:500px; margin:0 35px; padding-bottom:50px;}	
	.main .case .case-wrap .slick-prev {left:calc(50% - 310px);}
	.main .case .case-wrap .slick-next {left:calc(50% + 310px);}
}

@media screen and (max-width: 768px) {
	.main .case .case-wrap .case-box .img-box span {border-radius:12px;}
	.main .case .case-wrap .case-box .conts-box {width:70%; border-radius:12px; right:30px; bottom:-40px;}
	.main .case .case-wrap .case-box .conts-box .inner {padding:15px;}
	.main .case .case-wrap .case-box .conts-box .conts {width:calc(100% - 26px);}
	.main .case .case-wrap .case-box .conts-box .conts em {font-size:20px;}
	.main .case .case-wrap .case-box .conts-box .conts .txt {font-size:14px;}
	.main .case .case-wrap .case-box .more-box span {border-radius:12px;}
	.main .case .case-wrap .slick-slide {width:360px; margin:0 25px; padding-bottom:40px;}	
	.main .case .case-wrap .slick-arrow {top:calc(50% - 20px);}
	.main .case .case-wrap .slick-prev {left:calc(50% - 220px);}
	.main .case .case-wrap .slick-next {left:calc(50% + 220px);}
}

@media screen and (max-width: 600px) {
	.main .case .case-wrap .slick-prev {left:calc(50% - 180px);}
	.main .case .case-wrap .slick-next {left:calc(50% + 180px);}
}

@media screen and (max-width: 480px) {
	.main .case .case-wrap .case-box .img-box span {border-radius:8px;}
	.main .case .case-wrap .case-box .conts-box {border-radius:8px; right:25px; width:75%;}
	.main .case .case-wrap .case-box .conts-box .inner {padding:10px;}
	.main .case .case-wrap .case-box .conts-box .conts {width:calc(100% - 20px);}
	.main .case .case-wrap .case-box .conts-box .conts em {font-size:16px;}
	.main .case .case-wrap .case-box .conts-box .conts .txt {font-size:11px;}
	.main .case .case-wrap .case-box .more-box span {border-radius:8px;}
	.main .case .case-wrap .slick-slide {width:calc(100vw - 110px); margin:0;}		
	.main .case .case-wrap .slick-prev {left:calc(50% - 125px);}
	.main .case .case-wrap .slick-next {left:calc(50% + 125px);}
}


.main .best-item {padding-top:0; overflow:visible; z-index:9;}
.main .best-item:before {content:""; width:100%; height:460px; background:url(/img/main/bg_symbol.svg) right center no-repeat; background-size:auto 100%; position:absolute; right:-3%; top:-230px; z-index:0;}
.main .best-item .sec-title {margin-bottom:var(--gap-40);}
.main .best-item .tab {margin-bottom:var(--gap-80);}
.main .best-item .tab ul {width:100%; display:flex; align-items:center; gap:8px var(--gap-16); flex-wrap:wrap;}
.main .best-item .tab ul li {box-sizing:border-box; border-radius:28px; background:#fff; text-align:center; overflow:hidden; border:1px solid var(--main-color-b);}
.main .best-item .tab ul li a {display:block; padding:0 var(--gap-32); font-family:var(--Poppins); font-size:var(--font-18); color:var(--main-color-b); line-height:54px;}
.main .best-item .tab ul li.on {background:var(--main-color-b);}
.main .best-item .tab ul li.on a {color:#fff;}
.main .best-item .item-wrap .item-box {border:1px solid #F8F8F8; background:#F8F8F8; border-radius:20px; overflow:hidden;}
.main .best-item .item-wrap .item-box > a {display:block; width:100%; height:100%;}
.main .best-item .item-wrap .item-box .wrap {width:100%; padding:var(--gap-32); position:relative;}
.main .best-item .item-wrap .item-box .img-box {width:100%; max-width:360px; margin:0 auto;}
.main .best-item .item-wrap .item-box .img-box span {display:block; width:100%; height:0; padding-bottom:calc(220 / 360 * 100%); position:relative; overflow:hidden;}
.main .best-item .item-wrap .item-box .img-box span img {max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block;}
.main .best-item .item-wrap .item-box .conts-box {width:100%; margin-top:10px;}
.main .best-item .item-wrap .item-box .conts-box .tlt {font-family:var(--Poppins); font-size:var(--font-30); font-weight:700; margin-bottom:var(--gap-16); line-height:1.5;}
.main .best-item .item-wrap .item-box .conts-box .conts-area {width:85%; height:60px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.main .best-item .item-wrap .item-box .conts-box .conts {width:100%; display:flex; flex-wrap:wrap; gap:0 30px;}
.main .best-item .item-wrap .item-box .conts-box .conts span {display:block; position:relative; line-height:1.5;}
.main .best-item .item-wrap .item-box .conts-box .conts span:after {content:""; width:1px; height:16px; box-sizing:border-box; border-left:1px solid #000; position:absolute; left:-15px; top:50%; transform:translateY(-50%);}
.main .best-item .item-wrap .item-box .conts-box .conts span:first-child:after {display:none;}
.main .best-item .item-wrap .item-box .more {position:absolute; right:var(--gap-32); bottom:var(--gap-32);}
.main .best-item .item-wrap .slick-list {width:calc(100% - 140px); margin: 0 auto;}
.main .best-item .item-wrap .slick-slide {margin:0 20px; line-height:1;}
.main .best-item .item-wrap .slick-arrow {top:calc(50% - 10px); transform:translateY(-50%);}
.main .best-item .item-wrap .slick-prev {left:0;}
.main .best-item .item-wrap .slick-next {right:0;}
.main .best-item .item-wrap .slick-dots {width:100%; display:flex; align-items:center; justify-content:center; gap:0 var(--gap-24); margin-top:var(--gap-40);}
.main .best-item .item-wrap .slick-dots li {font-size:0;}
.main .best-item .item-wrap .slick-dots li button {font-size:0; width:10px; height:10px; border-radius:50%; background:#ccc;}
.main .best-item .item-wrap .slick-dots .slick-active button {background:var(--main-color);}
.main .best-item .button-box {margin-top:var(--gap-80);}

@media screen and (max-width: 1280px) {
	.main .best-item:before {height:300px; top:-150px;}
	.main .best-item .item-wrap .item-box .conts-box .conts-area {height:72px; -webkit-line-clamp:3;}
	.main .best-item .item-wrap .item-box .conts-box .conts {gap:0 24px;}
	.main .best-item .item-wrap .item-box .conts-box .conts span {font-size:16px;}
	.main .best-item .item-wrap .item-box .conts-box .conts span:after {height:13px; left:-12px;}
}

@media screen and (max-width: 1024px) {
	.main .best-item:before {height:220px; top:-110px;}
	.main .best-item .item-wrap .item-box {border-radius:15px;}
	.main .best-item .item-wrap .item-box .conts-box .conts-area {height:65px;}
	.main .best-item .item-wrap .item-box .conts-box .conts {gap:0 20px;}
	.main .best-item .item-wrap .item-box .conts-box .conts span {font-size:14px;}
	.main .best-item .item-wrap .item-box .conts-box .conts span:after {height:11px; left:-10px;}
	.main .best-item .item-wrap .slick-list {width:calc(100% - 120px);}
	.main .best-item .item-wrap .slick-slide {margin:0 15px;}
}

@media screen and (max-width: 768px) {
	.main .best-item:before {height:150px; top:-75px;}
	.main .best-item .tab ul li {border-radius:22px;}
	.main .best-item .tab ul li a {line-height:42px;}
	.main .best-item .item-wrap .item-box {border-radius:12px;}
	.main .best-item .item-wrap .item-box .conts-box .conts-area {height:72px;}
	.main .best-item .item-wrap .item-box .conts-box .conts {gap:0 24px;}
	.main .best-item .item-wrap .item-box .conts-box .conts span {font-size:16px;}
	.main .best-item .item-wrap .item-box .conts-box .conts span:after {height:13px; left:-12px;}
	.main .best-item .item-wrap .slick-list {width:calc(100% - 100px);}
}

@media screen and (max-width: 480px) {
	.main .best-item:before {height:100px; top:-50px;}
	.main .best-item .tab ul li {border-radius:18px;}
	.main .best-item .tab ul li a {line-height:34px; font-size:10px; padding:0 10px;}
	.main .best-item .item-wrap .item-box {border-radius:8px;}
	.main .best-item .item-wrap .slick-list {width:calc(100% - 80px);}
	.main .best-item .item-wrap .slick-slide {margin:0;}
	.main .best-item .item-wrap .item-box .conts-box .conts-area {height:54px;}
	.main .best-item .item-wrap .item-box .conts-box .conts {gap:0 16px;}
	.main .best-item .item-wrap .item-box .conts-box .conts span {font-size:12px;}
	.main .best-item .item-wrap .item-box .conts-box .conts span:after {height:10px; left:-8px;}
	.main .best-item .item-wrap .slick-arrow {top:calc(50% - 8px);}
	.main .best-item .item-wrap .slick-dots li button {width:8px; height:8px;}
}


.main .partner {background:url(/img/main/partner_bg.png) center no-repeat; background-size:cover;}
.main .partner .sec-title {margin-bottom:var(--gap-140);}
.main .partner .partner-wrap .partner-box {width:100%; overflow:hidden; display:flex; margin-top:var(--gap-40);}
.main .partner .partner-wrap .partner-box:nth-child(1) {margin-top:0;}
.main .partner .partner-wrap .partner-list {display:flex; align-items:center; justify-content:center; flex-flow:row nowrap;}
.main .partner .partner-wrap .partner-list li {width:380px; background:#fff; border-radius:10px; overflow:hidden; margin:0 20px;}
.main .partner .partner-wrap .partner-list li span {display:block; width:100%; height:0; padding-bottom:calc(140 / 380 * 100%); position:relative;}
.main .partner .partner-wrap .partner-list li span i {display:block; width:70%; max-width:240px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.main .partner .partner-wrap .partner-list li span i img {max-width:100%; display:block;}
.main .partner .partner-wrap .rol-left.original {animation:rolL1 180s linear infinite;}
.main .partner .partner-wrap .rol-left.clone {animation:rolL2 180s linear infinite;}
.main .partner .partner-wrap .rol-right.original {animation:rolL3 185s linear infinite;}
.main .partner .partner-wrap .rol-right.clone {animation:rolL4 185s linear infinite;}

@keyframes rolL1 {
	0% {transform:translateX(0);}
	50% {transform:translateX(-100%);}
	50.01% {transform:translateX(100%);}
	100% {transform:translateX(0);}
}

@keyframes rolL2 {
	0% {transform:translateX(0);}
	100% {transform:translateX(-200%);}
}

@keyframes rolL3 {
	0% {transform:translateX(0);}
	50% {transform:translateX(100%);}
	50.01% {transform:translateX(-100%);}
	100% {transform:translateX(0);}
}

@keyframes rolL4 {
	0% {transform:translateX(-200%);}
	100% {transform:translateX(0);}
}

@media screen and (max-width: 1280px) {
	.main .partner .partner-wrap .partner-list li {width:300px;}
}

@media screen and (max-width: 1024px) {
	.main .partner .partner-wrap .partner-list li {width:240px;}
}

@media screen and (max-width: 768px) {
	.main .partner .partner-wrap .partner-list li {width:180px; margin:0 10px; border-radius:8px;}
}

@media screen and (max-width: 480px) {
	.main .partner .partner-wrap .partner-list li {width:100px; margin:0 5px; border-radius:5px;}
}


.main .history {background:url(/img/main/bg_history.png) center no-repeat; background-size:cover;}
.main .history .sec-title {margin-bottom:var(--gap-140);}
.main .history .sec-title > * {color:#fff;}
.main .history .history-wrap {width:100%; display:flex; justify-content:center;}
.main .history .history-wrap .history-box {width:33.33%; padding:0 10px; position:relative; color:#fff;}
.main .history .history-wrap .history-box:before {content:""; width:1px; height:85%; box-sizing:border-box; border:solid rgba(255,255,255,0.3); border-width:0 0 0 1px; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.main .history .history-wrap .history-box:nth-child(1):before {display:none;}
.main .history .history-wrap .history-box .icon {width:80px; height:80px; background-size:cover; background-repeat:no-repeat; background-position:center; display:block; margin:0 auto;}
.main .history .history-wrap .history-box.hs-year .icon {background-image:url(/img/main/icon_bag.svg);}
.main .history .history-wrap .history-box.hs-partner .icon {background-image:url(/img/main/icon_partner.svg);}
.main .history .history-wrap .history-box.hs-case .icon {background-image:url(/img/main/icon_experience.svg);}
.main .history .history-wrap .history-box .counting {width:100%; text-align:center; margin:var(--gap-16) 0 var(--gap-50) 0; font-size:var(--font-30); font-weight:700;}
.main .history .history-wrap .history-box .counting em {font-size:60px; font-weight:700;}
.main .history .history-wrap .history-box .conts {text-align:center;}
.main .history .history-wrap .history-box .conts .tlt {font-size:var(--font-30); font-weight:700; margin-bottom:var(--gap-16);}
.main .history .history-wrap .history-box .conts .txt {color:rgba(255,255,255,0.9);}

@media screen and (max-width: 1280px) {
	.main .history .history-wrap .history-box .icon {width:60px; height:60px;}
	.main .history .history-wrap .history-box .counting em {font-size:48px;}
	.main .history .history-wrap .history-box .conts .txt {font-size:16px;}
}

@media screen and (max-width: 1024px) {
	.main .history .history-wrap .history-box .icon {width:50px; height:50px;}
	.main .history .history-wrap .history-box .counting em {font-size:38px;}
	.main .history .history-wrap .history-box .conts .txt {font-size:14px;}
}

@media screen and (max-width: 768px) {
	.main .history .history-wrap {width:100%; max-width:500px; margin:0 auto; flex-wrap:wrap;}
	.main .history .history-wrap .history-box {width:100%; padding:30px 0;}
	.main .history .history-wrap .history-box:first-child {padding-top:0;}
	.main .history .history-wrap .history-box:last-child {padding-bottom:0;}
	.main .history .history-wrap .history-box:before {width:100%; height:1px; border-width:1px 0 0 0; top:0; transform:none;}
	.main .history .history-wrap .history-box .counting em {font-size:40px;}
	.main .history .history-wrap .history-box .conts .txt {font-size:16px;}
}

@media screen and (max-width: 768px) {
	.main .history .history-wrap .history-box .icon {width:45px; height:45px;}
	.main .history .history-wrap .history-box .counting em {font-size:35px;}
	.main .history .history-wrap .history-box .conts .txt {font-size:14px;}
}


.main .network {background:#F8F9FB;}
.main .network .sec-title {margin-bottom:var(--gap-80);}
.main .network .network-wrap {width:95%; max-width:1680px; margin:0 auto;}
.main .network .network-wrap .map {width:100%; height:0; padding-bottom:calc(760 / 1680 * 100%); position:relative; background:url(/img/main/map.svg) center no-repeat; background-size:cover;}
.main .network .network-wrap .map .map-icon {position:absolute; display:inline-block;}
.main .network .network-wrap .map .map-icon .label {height:50px; padding:0 var(--gap-16); border-radius:24px; border:1px solid var(--main-color-b); background:#fff; color:var(--main-color-b); font-size:var(--font-18); font-weight:600; line-height:48px; left:50%; top:-20px; position:absolute; display:flex; gap:0 8px; align-items:center; justify-content:center; transform:translateX(-50%); visibility:hidden; opacity:0; transition:top 0.3s linear, opacity 0.2s linear, visibility 0.3s linear; z-index:1;}
.main .network .network-wrap .map .map-icon .label span {font-family:var(--Poppins); font-size:22px;}
.main .network .network-wrap .map .map-icon:not(.kor):hover .label {top:-58px; visibility:visible; opacity:1;}
.main .network .network-wrap .map .map-icon.ty-2 .label {top:auto; bottom:-20px; transition:bottom 0.3s linear, opacity 0.2s linear, visibility 0.3s linear;}
.main .network .network-wrap .map .map-icon.ty-2:not(.kor):hover .label {top:auto; bottom:-58px;}
.main .network .network-wrap .map .map-icon p {display:flex; align-items:center; justify-content:center; position:absolute; left:50%; top:-30px; z-index:0; font-size:var(--font-18); font-weight:600; height:30px; transform:translateX(-50%); opacity:1; visibility:visible; transition:opacity 0.4s linear;}
.main .network .network-wrap .map .map-icon:not(.kor):hover p {opacity:0; visibility:visible;}
.main .network .network-wrap .map .map-icon.ty-2 p {top:auto; bottom:-30px;}
.main .network .network-wrap .map .map-icon .mark {width:40px; height:40px; margin:0 auto; position:relative; cursor:pointer;}
.main .network .network-wrap .map .map-icon .mark span {display:block; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; background-color:var(--main-color-b); opacity:0; animation:blink 1.6s cubic-bezier(0.22,0.61,0.36,0.5) infinite;}
.main .network .network-wrap .map .map-icon .mark span:nth-of-type(2) {animation-delay:0.6s;}
.main .network .network-wrap .map .map-icon .mark em {display:block; width:8px; height:8px; border-radius:50%; background:var(--main-color-b); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.main .network .network-wrap .map .map-icon.kor {left:calc(639 / 1680 * 100%); top:calc(324 / 760 * 100%);}
.main .network .network-wrap .map .map-icon.kor .label {background:var(--main-color-b); color:#fff; top:-58px; opacity:1; visibility:visible;}
.main .network .network-wrap .map .map-icon.rus {left:calc(529 / 1680 * 100%); top:calc(177 / 760 * 100%);}
.main .network .network-wrap .map .map-icon.chn {left:calc(496 / 1680 * 100%); top:calc(332 / 760 * 100%);}
.main .network .network-wrap .map .map-icon.vnm {left:calc(546 / 1680 * 100%); top:calc(439 / 760 * 100%);}
.main .network .network-wrap .map .map-icon.kaz {left:calc(367 / 1680 * 100%); top:calc(264 / 760 * 100%);}
.main .network .network-wrap .map .map-icon.ind {left:calc(418 / 1680 * 100%); top:calc(407 / 760 * 100%);}
.main .network .network-wrap .map .map-icon.dxb {left:calc(303 / 1680 * 100%); top:calc(390 / 760 * 100%);}
.main .network .network-wrap .map .map-icon.pol {left:calc(164 / 1680 * 100%); top:calc(234 / 760 * 100%);}
.main .network .network-wrap .map .map-icon.cze {left:calc(124 / 1680 * 100%); top:calc(258 / 760 * 100%);}
.main .network .network-wrap .map .map-icon.usa {left:calc(1278 / 1680 * 100%); top:calc(298 / 760 * 100%);}

@keyframes blink {
	0% {transform:scale(0); opacity: 0.1;}
	50% {opacity: 0.3;}
	100% {transform:scale(1); opacity: 0;}
}

@media screen and (max-width: 1280px) {
	.main .network .network-wrap .map .map-icon .label {font-size:15px; height:45px;}
	.main .network .network-wrap .map .map-icon .label span {font-size:18px;}
	.main .network .network-wrap .map .map-icon:not(.kor):hover .label {top:-52px;}
	.main .network .network-wrap .map .map-icon.ty-2:not(.kor):hover .label {bottom:-52px;}
	.main .network .network-wrap .map .map-icon.kor .label {top:-52px;}
	.main .network .network-wrap .map .map-icon p {font-size:15px; height:24px; top:-24px;}
	.main .network .network-wrap .map .map-icon.ty-2 p {bottom:-24px;}
	.main .network .network-wrap .map .map-icon .mark {width:32px; height:32px;}
}

@media screen and (max-width: 1024px) {
	.main .network .network-wrap .map .map-icon.kor .label {top:50%; left:35px; transform:translateY(-50%);}
}

@media screen and (max-width: 768px) {
	.main .network .network-wrap .map .map-icon .label {font-size:13px; height:42px;}
	.main .network .network-wrap .map .map-icon .label span {font-size:16px;}
	.main .network .network-wrap .map .map-icon:not(.kor):hover .label {top:-48px;}
	.main .network .network-wrap .map .map-icon.ty-2:not(.kor):hover .label {bottom:-48px;}
	.main .network .network-wrap .map .map-icon.kor .label {left:30px;}
	.main .network .network-wrap .map .map-icon p {font-size:13px; height:20px; top:-20px;}
	.main .network .network-wrap .map .map-icon.ty-2 p {bottom:-20px;}
	.main .network .network-wrap .map .map-icon .mark {width:30px; height:30px;}
	.main .network .network-wrap .map .map-icon .mark em {width:6px; height:6px;}
}

@media screen and (max-width: 480px) {
	.main .network .network-wrap .map .map-icon .label {font-size:10px; height:35px; gap:0 3px;}
	.main .network .network-wrap .map .map-icon .label span {font-size:13px;}
	.main .network .network-wrap .map .map-icon:not(.kor):hover .label {top:-40px;}
	.main .network .network-wrap .map .map-icon.ty-2:not(.kor):hover .label {bottom:-40px;}
	.main .network .network-wrap .map .map-icon.kor .label {left:22px;}
	.main .network .network-wrap .map .map-icon p {font-size:11px; height:15px; top:-12px;}
	.main .network .network-wrap .map .map-icon.ty-2 p {bottom:-12px;}
	.main .network .network-wrap .map .map-icon .mark {width:20px; height:20px;}
	.main .network .network-wrap .map .map-icon .mark em {width:4px; height:4px;}
}