@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.main-visual [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.main-visual [data-txt-motion="left"],
.main-visual [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.main-visual [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.main-visual [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.main-visual [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

.main-visual__text [data-txt-motion="hidden"]{opacity: 1;}
.main-visual__bg i{transform: scale(1.2); transition:transform 15s ease;}
.swiper-slide-active .main-visual__bg i{transform: scale(1);}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */

/* main visual */
.main-visual{position:relative; height:var(--height-full);}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap{width:100%;}
.main-visual__bg {position: absolute; top: 50%; left: 50%; width: 100%; height: 100vh; padding:20rem; transform: translate(-50%, -50%);}
.main-visual__bg-inr {overflow: hidden; position: relative; width: 100%; height: 100%; border-radius: var(--br-10);}
.main-visual__bg video {object-fit: cover; width: 100%; height: 100%;}
.main-visual__bg-inr::after {opacity: 0.2; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: #000;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}
.main-visual__video{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.main-visual__btn{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem;color: #fff;font-weight: 600;}
.main-visual__btn::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%;background-size: 8rem;}
.main-visual__btn > i{}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute;bottom: 60rem;left:0;z-index:999;width:100%;}
.main-visual__controls > div{display:flex;align-items:center;justify-content: center;}
.main-visual__count{display:flex; align-items:center; margin:0 50rem; font-size:17rem; color:#fff;}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__count em{}
.main-visual__count i::after{content:""; display:block; width:3rem; height:3rem; margin:0 10rem; background:#fff;}
.main-visual__btn.button-next::after{/* transform:rotate(-90deg); */}
.main-visual__btn.button-prev::after{transform: rotate(180deg);}

.main-visual .swiper-pagination{display:flex; gap:18rem;}
.main-visual .swiper-pagination-bullet{background: var(--f-01);}
.main-visual .swiper-pagination-bullet{opacity:0.4; width:14rem; height:14rem; background:#fff;}
.main-visual .swiper-pagination-bullet-active{opacity:1;}

.main-visual__text{position:absolute; top:37vh; left:50%; margin-left:-720rem; color:#fff; z-index:2;}
.main-visual__text h2{overflow:hidden;line-height:1.3;font-weight:700;font-size:80rem;letter-spacing:-0.5rem;}
.main-visual__text h2 span{font-weight:700; opacity:0;}
.main-visual__text p{margin-top:17rem;font-weight:700;font-size:23rem;opacity: 0;}

.main-visual__bar{position:absolute; bottom:0; z-index:50; width:100%; height:10rem; background:rgba(255,255,255,0.3);}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-01);}
.main-visual .swiper-slide-active .main-visual__bar > i{ width: 100%; transition: var(--progress-duration) linear; }
.main-visual i{position:absolute; left:100rem; bottom:17rem;}
.main-visual i img{width:auto;}

.main-visual__play{position:absolute; top:50%; left:0; z-index:99999; background:#fff; font-size:30rem; cursor:pointer;}
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

@media (max-width:1600px){
	.main-visual__text{left:5%; margin-left:0;}
	.main-visual i{left:50rem;}
	.main-visual i img{height:130rem;}
}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
	.main-visual__bg{padding:15rem;}
	.main-visual__text h2{font-size:70rem;}
	.main-visual i{left:10rem;}
	.main-visual i img{height:100rem;}
}

@media (max-width:860px){
	.main-visual__text h2{font-size:60rem;}
	.main-visual i img{height:80rem;}	
}

@media (max-width:540px){
	.main-visual__bg{height:100%; padding:5rem;}
	.main-visual__text{top:300rem;}
	.main-visual__text h2{line-height:1.2; font-size:31rem;}
	.main-visual i{left:2rem; bottom:5rem;}
	.main-visual i img{height:66rem;}	
}


.main-tit{}
.main-tit > em{display:inline-block; margin-bottom:10rem; font-size:20rem; font-weight: 700; line-height:1em; word-break:keep-all; color:var(--c-01); background: linear-gradient(90deg, var(--c-01), var(--c-01) 50%, rgba(0,161,233,0.2) 0);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;background-position: 100%; transition: all 1.5s; transition-delay: 0.3s;}
.main-tit > h3{display:block; font-size: 55rem; font-weight: 700; color:var(--b-01); word-break:break-word; letter-spacing: -0.5px; background: linear-gradient(90deg, var(--b-01), var(--b-01) 50%, rgba(0, 0, 0, 0.2) 0); background-clip: text; -webkit-background-clip: text;  -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; transition: all 1.5s; transition-delay: 0.3s; }
.main-tit.wt > h3{color:#fff; background: linear-gradient(90deg, #fff, #fff 50%, rgba(255, 255, 255, 0.2) 0); background-clip: text; -webkit-background-clip: text;  -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; transition: all 1.5s; transition-delay: 0.3s; }
.main-tit > p{display:inline-block; margin-top:10rem; font-size:18rem; font-weight:300; color:#666; line-height:1.4em; word-break:keep-all; background: linear-gradient(90deg, #666, #666 50%, rgba(136,136,136,0.2) 0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; transition: all 1.5s; transition-delay: 0.3s;}

.main-tit.motion_in > em,
.main-tit.motion_in > h3,
.main-tit.wt.motion_in > h3,
.main-tit.motion_in > p{background-position: 0% !important;}

/* pd */
.main-product{position:relative; padding:120rem 0;}
.main-product .main-tit{text-align:center; padding:0 100rem 0; margin-bottom:70rem;}
.main-product .main-tit br{display:none;}
.product-list{gap:45rem; height:600rem; margin:0 100rem;}
.product-list > li{width:100%; background:#e9e9e9; transition:all 1s ease; border-radius:var(--br-10); overflow:hidden;}
.product-list > li > a{position:relative; display:block; width:100%; height:100%; padding:30rem; }
.product-list > li > a .btn-arr{position:absolute; top:25rem;; right:25rem; display: flex; justify-content: center; align-items: center; width:55rem; height:55rem; border-radius:50%; background:#fff; padding:4rem; box-sizing:Border-box; z-index:1; opacity:1; transition:all 0.3s ease; opacity:0;}
.product-list > li > a .btn-arr svg{position:relative; overflow:hidden;}
.product-list > li > a .btn-arr svg > *{transition-duration: .5s; transition-timing-function: cubic-bezier(.5,0,.25,1);}
.product-list > li > a .btn-arr svg > .arr2,
.product-list > li > a .btn-arr svg > .arr3{display: flex; position: absolute;}
.product-list > li > a:hover .btn-arr{opacity:1;}
.product-list > li > a .btn-arr svg > .arr3{transform: translate(-200%, 200%);}
.product-list > li > a .btn-arr svg > .arr2{transform: translate(-100%, 100%);}
.product-list > li > a .btn-arr svg > .arr1{transform: translate(0);}
.product-list > li > a:hover .btn-arr svg > .arr1{transform: translate(200%, -200%);}
.product-list > li > a:hover .btn-arr svg > .arr2{transform: translate(100%, -100%);}
.product-list > li > a:hover .btn-arr svg > .arr3{transform: translate(0);}
.product-list > li > a .img{position:absolute; top:50%; left:50%;  display: flex; justify-content: center; align-items: center; width:80%; height:450rem; transform:translate(-50%, -50%) scale(1.2); transition:all 0.5s ease;}
.product-list > li:nth-child(3) > a .img{height:380rem;}
.product-list > li > a .img img{max-width:92%; max-height:90%;}
.product-list > li > a .txt{position:absolute; left:0; bottom:0; padding:50rem 45rem; box-sizing:border-box; opacity:0; transition:all 0.6s ease; transform:translateY(100rem);}
.product-list > li > a .txt > h3{font-size: 30rem; font-weight: 700; color:#fff; line-height:1em; word-break:keep-all;}
.product-list > li > a .txt > h3 > i{display:inline-block; margin-left:5rem; font-size:18rem; font-weight:400;}
.product-list > li > a .txt > ul{display:block; margin-top:15rem;}
.product-list > li > a .txt > ul > li{display:block; font-size: 17rem; font-weight: 300; color:#fff; opacity:0.8; line-height:1.4em; word-break:keep-all;}
.product-list > li > a .txt > ul[data-list] > *::before{background-color:var(--f-01); width:3rem; height:3rem;}
.product-list > li > a .subject{position:relative; display:inline-block;}
.product-list > li > a .subject:before{content:''; position:relative; top:-2rem;display:inline-block; width:6rem; height:6rem; border-radius:50rem; background:var(--c-01); transition:all 0.3s ease;}
.product-list > li > a .subject > em{display:inline-block; padding-left:10rem; font-size: 13rem; font-weight: 700;}
.product-list > li:hover{background:#132B5B url(../img/main/bg-pd.jpg)no-repeat center; background-size:cover;}
.product-list > li > a:hover .subject > *{color:#fff;}
.product-list > li > a:hover .img{top:40%; transform:translate(-50%, -50%) scale(0.9);}
.product-list > li:nth-child(2) > a:hover .img{transform:translate(-50%, -50%) scale(1);}
.product-list > li > a:hover .txt{opacity:1; transform:translateY(0);}

@media (max-width:1700px){
	.product-list{height:550rem; margin:0 80rem; gap:40rem;}
	/*.product-list > li > a:hover .img{top:35%; transform:translate(-50%, -50%) scale(0.8);}*/
}
@media (max-width:1500px){
	.product-list{height:550rem; margin:0 60rem; gap:35rem;}
	.product-list > li > a .img{height:400rem;}
	.product-list > li > a .img img{max-width:90%;}
	.product-list > li:nth-child(3) > a .img{height:350rem;}
	.product-list > li > a .txt{padding:30rem;}
}

@media (max-width:1300px){
	.product-list{margin:0 40rem;}
}

@media (max-width:1200px){
	.product-list{height:450rem; gap:30rem;}
	.product-list > li > a{padding:25rem;}
	.product-list > li > a .btn-arr{width:45rem; height:45rem; top:20rem; right:20rem;}
	.product-list > li > a .img{height:350rem;}
	.product-list > li:nth-child(3) > a .img{height:280rem;}
	.product-list > li > a .txt{padding:25rem;}
	.product-list > li > a .txt > h3{font-size:28rem;}
	.product-list > li > a .txt > h3 > i{font-size:17rem;}
	.product-list > li > a .txt > ul{margin-top:12rem;}
	.product-list > li > a .txt > ul > li{font-size:16rem; margin-bottom:7rem;}
	.product-list > li > a:hover .img{top:35%; transform:translate(-50%, -50%) scale(0.82);}

}

@media (max-width:1024px){
	.main-product{padding:80rem 0;}
	.main-tit > em{font-size:19rem;}
	.main-tit > h3{font-size:48rem;}
	.main-tit > p{font-size:17rem;}

	.main-product .main-tit{margin-bottom:50rem;}
	.main-product .main-tit br{display:block;}
	.product-list{margin:0 30rem; gap:20rem; height:380rem;}
	.product-list > li > a{padding:15rem 20rem;}
	.product-list > li > a .btn-arr{width:40rem; height:40rem; top:15rem; right:15rem;}
	.product-list > li > a .img{height:280rem;}
	.product-list > li:nth-child(3) > a .img{height:230rem;}
	.product-list > li > a:hover .img{top:50%; transform:translate(-50%, -50%) scale(1);}
	.product-list > li > a .txt{padding:20rem;}
	.product-list > li > a .txt > h3{font-size:24rem;}
	.product-list > li > a .txt > h3 > i{font-size:16rem;}
	.product-list > li > a .txt > ul{display:none;}
}

@media (max-width:860px){
	.main-tit > em{font-size:16rem;}
	.main-tit > h3{font-size:37rem;}


	.main-product{padding:70rem 0;}
	.main-product .main-tit{padding:0 30rem; margin-bottom:45rem;}
	.main-product .main-tit br{display:none;}
	.product-list{grid-template-columns: 1fr; gap: 20rem; height:auto;}
	.product-list > li{height:500rem;}
	.product-list > li > a{padding:35rem 40rem;}
	.product-list > li > a .btn-arr{top:30rem; right:30rem;}
	.product-list > li > a .img{top:50%; transform: translate(-50%, -50%) scale(1.2);}
	.product-list > li > a:hover .img{top:45%; transform: translate(-50%, -50%) scale(1);}
	.product-list > li > a .img{height:350rem;}
	.product-list > li:nth-child(3) > a .img{height:300rem;}
	.product-list > li:nth-child(2) > a .img{width:400rem;}
	.product-list > li > a .txt{padding:40rem;}
	.product-list > li > a .txt > ul > li:before{top:6rem;}
	.product-list > li > a:hover .txt > ul{display:block;}
}

@media (max-width:540px){
	.main-tit > em{font-size:12rem;}
	.main-tit > h3{font-size:25rem;}
	.main-tit > p{font-size:13rem;}

	.main-product{padding:40rem 0;}
	.product-list{margin:0 20rem;}
	.main-product .main-tit{padding:0 20rem; margin-bottom:30rem;}
	.main-product .main-tit br{display:block;}
	.product-list > li{height:360rem;}
	.product-list > li > a{padding:15rem 20rem;}
	.product-list > li > a .subject{line-height:1em;}
	.product-list > li > a .subject:before{width:4rem; height:4rem;}
	.product-list > li > a .subject > em{font-size:11rem; padding-left:5rem;}
	.product-list > li > a .btn-arr{top:15rem; right:15rem; width:30rem; height:30rem;}
	.product-list > li > a .img{height:250rem;}
	.product-list > li:nth-child(2) > a .img{width:80%;}
	.product-list > li:nth-child(3) > a .img{height:230rem;}
	.product-list > li > a .txt{padding:25rem 20rem;}
	.product-list > li > a .txt > h3{font-size:20rem;}
	.product-list > li > a .txt > h3 > i{margin-left:3rem;font-size:13rem;}
	.product-list > li > a .txt > ul,
	.product-list > li > a:hover .txt > ul{display:none;}

}
/* feature */
.main-feature{position:relative; padding-bottom:380rem; background:url(../img/main/bg-feature.jpg)no-repeat center top; background-attachment:fixed; background-size:cover; overflow:hidden;}
.main-feature .ringer{position:absolute; top:0; top: -110rem; left:50%; margin-left: -14rem; transform:translateX(-50%); z-index:2;}
.main-feature .ringer img{height:653rem; }
.main-feature .ringer-line{position:absolute; top:0; top:400rem; left:49.6%; transform:translateX(-50%); opacity:0.8;}
.history-line{display:block;position:absolute;overflow:hidden;top:530rem;left:50%;width:6rem; margin-left:-6rem; height:100%;background:transparent;margin-top: 0 !important;}
.history-line__bar{display:block; position:absolute; top:0; left:0; z-index:50; width:100%; border-radius: 0 0 50px 50px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(0, 208, 255, 0.80) 12.22%, #00B0FF 62.22%);}
.list-feature{position:relative; max-width:1515rem; margin:0 auto; padding-top:425rem; flex-wrap: wrap; gap:100rem; z-index:50;}
.list-feature > li{position:relative; padding-top:35rem; flex-direction: column; gap:35rem; width:480rem; height:515rem; background:#fff; border-radius:25rem; overflow:hidden;}
.list-feature > li:nth-child(2n){transform: translateY(140rem);}
.list-feature > li .top{display:flex; justify-content: space-between; align-items: center; padding:0 35rem; box-sizing:border-box; width:100%; height:92rem;}
.list-feature > li .top .txt{}
.list-feature > li .top .txt > em{display:inline-block; margin-bottom:10rem; font-size: 14rem; font-weight: 600; color:var(--c-01); text-transform:uppercase; line-height:1em;}
.list-feature > li .top .txt > h3{display:block; font-size: 28rem; font-weight: 700; line-height:1em; word-break:keep-all; color:var(--b-01);}
.list-feature > li .top .icon{display:flex; justify-content: center; align-items: center; width:80rem; height:80rem; border-radius:500rem; background: rgba(166, 166, 166, 0.08);}
.list-feature > li .top .icon img{width:40rem; height:40rem;}
.list-feature > li .img{width:100%; border-radius:35rem 35rem 0 0; overflow:hidden;}
.list-feature > li .img img{width:100%; height:100%; transform:scale(1); transition:all 0.7s ease;}
.list-feature > li > .txt{position:absolute; left:0; bottom:0; padding:50rem 35rem 30rem; width:100%; background: linear-gradient(0deg,rgba(0, 0, 0, 45%) 0%, rgba(0, 0, 0, 0) 100%); font-size:17rem; font-weight: 300; line-height:1.4em; word-break:keep-all; color:#fff; transform:translateY(100rem); transition:all 0.5s ease; opacity:0;}
.list-feature > li:hover .txt{transform:translateY(0); opacity:1;}


@media (max-width:1600px){
	.list-feature{max-width:100%; margin:0 5%;}
}

@media (max-width:1200px){
	.list-feature{margin:0 40rem; padding-top:300rem;}
	.list-feature > li{width:38%; height:auto;}

}
@media (max-width:1023px){
	.main-feature{padding-bottom: 280rem;}
	.main-feature .ringer{margin-left:-12rem;}
	.main-feature .ringer img{height:510rem;}
	.history-line{top:391rem;}
	.list-feature > li{padding-top:20rem; gap:20rem; border-radius:15rem;}
	.list-feature > li .top{padding:0 20rem; height:64rem;}
	.list-feature > li .top .txt > em{font-size:13rem;}
	.list-feature > li .top .txt > h3{font-size:24rem;}
	.list-feature > li .top .icon{width:64rem; height:64rem;}
	.list-feature > li .top .icon img{width:30rem; height:30rem;}
	.list-feature > li .img{border-radius:20rem 20rem 0 0;}
	.list-feature > li > .txt{padding:40rem 20rem 20rem; font-size:16rem;}
}
@media (max-width:860px){
	.main-feature{background: url(../img/main/m-bg-feature.jpg) no-repeat center top; background-size:275% auto;}
	.list-feature{margin:0 30rem; padding-top:250rem;}
	.list-feature > li{padding-top:15rem; border-radius:12rem;}
	.list-feature > li .top{padding:0 15rem; height:54rem;}
	.list-feature > li .top .txt > em{margin-bottom:8rem;}
	.list-feature > li .top .txt > h3{font-size:20rem;}
	.list-feature > li .top .icon{width:54rem; height:54rem;}
	.list-feature > li .top .icon img{width:24rem; height:24rem;}
	.list-feature > li .img{border-radius:17rem 17rem 0 0; }
	.list-feature > li > .txt{font-size:14rem; padding:30rem 15rem 15rem;}
	.main-feature .ringer{margin-left:-13.5rem;}
	.main-feature .ringer img{height:450rem;}
	.history-line{top:331rem; margin-left:-8rem;}
}
@media (max-width:540px){
	.main-feature{padding-bottom:60rem; background:#BBDCEB url(../img/main/bg-feature3.jpg) no-repeat center top; background-size:295% auto; background-attachment:fixed;}
	.list-feature{gap:30rem; margin:0 20rem;}
	.list-feature > li{width:100%; height:auto; border-radius:10rem; padding-top:15rem; gap:20rem; transform:scale(0.8); transition:all 0.8s ease;}
	.list-feature > li:nth-child(2n){transform:translate(0) scale(0.8);}
	.list-feature > li .top{padding:0 15rem; height:45rem;}
	.list-feature > li .top .txt > em{font-size:12rem; margin-bottom:7rem;}
	.list-feature > li .top .txt > h3{font-size:18rem;}
	.list-feature > li .top .icon{width:45rem; height:45rem;}
	.list-feature > li .top .icon img{width:20rem; height:20rem;}
	.list-feature > li .img{border-radius:15rem 15rem 0 0;}
	.list-feature > li > .txt{padding:30rem 15rem 15rem; font-size:13rem;}
	.main-feature .ringer{margin-left:-7.5rem;}
	.main-feature .ringer img{height:330rem;}
	.history-line{top:214rem; width:5rem; margin-left:-4.5rem;}
	.list-feature > li.on{transform:scale(1);}
	.list-feature > li:nth-child(2n).on{transform:translate(0) scale(1);}
	.list-feature > li.on .txt{transform: translateY(0); opacity: 1;}
}






/* video */
.main-video{position:relative; width:100%;}
.video-container {width: 100%; height:100%;}
.video-wrapper {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.video-wrapper video {width: 100%; height: 100%;}
.play-button-wrapper{position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; pointer-events: none;}
#btn-play{cursor: pointer; pointer-events: auto; fill: #FFF; filter: drop-shadow(0 20px 50px #000);}
#btn-play img{width:100%;}

@media (max-width:540px){
	#btn-play{width:72rem; height:72rem; margin-bottom:28rem;}
}


/* global */
.main-global{position:relative; padding:100rem 0; border-radius:0 0 50rem 50rem; background:#fff; overflow:hidden; z-index:2;}
.main-global .bg{position:relative; left:0; width:100%; height:100%;}
.main-global .bg .arrow{position:absolute; top:0; z-index:2;  opacity:0;  transition:all 0.3s ease; transition-delay: 0.8s;}
.main-global .bg img{width:100%;}
.main-global .bg .country{position: absolute; /*top:50%; left:50%;*/ opacity:0; transform:scale(0); transition:all 0.4s ease;}
.main-global .bg .country .txt{position: absolute; top:50%; transform:translateY(-50%); margin-left:15rem; font-size:13rem; line-height:1.5; letter-spacing:-0.02em; color:#333; font-weight:500;}
.main-global .bg .country .dots{position: relative; display: block; width:6rem; height:6rem; border-radius:50%; background:#000;}
.main-global .bg .country .dots:before{position: absolute; content:''; width:20rem; height:20rem; border:1px solid rgba(51, 51, 51, 0.20); border-radius:50%; top:50%; left:50%; transform:translate(-50%, -50%);}
.main-global .bg .country.country1{top:23%; left:33%; transition-delay: 1.1s;}
.main-global .bg .country.country2{top:44%; left:34%; transition-delay: 1.4s;}
.main-global .bg .country.country3{top:51%; left:21%; transition-delay: 1.5s;}
.main-global .bg .country.country4{top:53%; left:28%; transition-delay: 1.6s;}
.main-global .bg .country.country5{top:56%; left:35%; transition-delay: 1.7s;}
.main-global .bg .country.country6{top:62.5%; left:35.6%; transition-delay: 1.8s;}
.main-global .bg .country.country7{top:31%; left:4%; transition-delay: 1.2s;}
.main-global .bg .country.country8{top:37%; left:12%; transition-delay: 1.3s;}

.head-office{position:absolute; top:14.3vw; left:40.5vw; display: flex; justify-content: center; align-items: center; width:6.22vw; height:6.22vw; background:#fff; border-radius:50%; border:6rem solid var(--c-01); transition-delay: 1.5s; opacity:0; transform:scale(0); transition:all 0.6s ease;}
.head-office:after{position:absolute; top:100%; left:50%; width:1px; height:65rem; border-right:1px dashed var(--c-01); content:""; }
.head-office .logo{height:20rem;}
.main-global .bg .head-office .logo img{width:100%;}
.wave-circle{position:absolute; left: 50%;top: 100%;width: 34rem;height:34rem; transform: translate(-50%, 133%); transition:all 0.3s ease;}
.wave-circle.left-circle{left:auto; margin-left:0; margin-right:5px; right:100%; }
.wave-circle .dot{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:0.3646vw; height:0.3646vw; background-color:var(--c-01); border-radius: 50%;}
.wave-circle .wave-bg > span {background-color:rgba(0, 161, 233, 0.2); border-radius: 50%; -webkit-animation-fill-mode: both; animation-fill-mode: both; position:absolute; left: 0; top: 0px; opacity: 0; margin: 0; width: 100%; height:100%; }
.wave-circle .wave-bg > span{-webkit-animation: wave-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite; animation: wave-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; }
.wave-circle .wave-bg > span:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
.wave-circle .wave-bg > span:nth-child(2) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.wave-circle .wave-bg > span:nth-child(3) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
.wave-circle .wave-bg > span:nth-child(4) { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; }
.head-office-box .wave-circle{left:50%; top:100%; transform:translate(-50%, 1.5625vw); margin-left:1px; opacity:0;}
.head-office-box .wave-circle .wave-bg > span{background-color:rgba(223, 0, 42, 0.1) ;}
.main-global.motion_in .bg .arrow{opacity:1; }
.main-global.motion_in .country{opacity:1; transform:scale(1);}
.main-global.motion_in .head-office{opacity:1; transform:scale(1);}
.main-global .txt-wrap{position: relative; padding-top:50vh; padding-bottom:30vh; margin:0 auto;}
.main-global .txt{position:absolute; top:45%; left:48%; display: block; width:675rem;}
.main-count{position:relative; overflow: hidden; display:flex; justify-content:flex-end;  align-items: baseline; height:140rem; font-size:140rem; font-weight:800; color:#00B0FF; line-height:1em;  padding-right:15rem;}
.num-box{position:relative;}
.num-box:before {position: absolute; right:-14rem; top:-60rem; font-size:40rem; font-weight:bolder; color:#00B0FF; display: block; content: "+";}
.main-count span,
.num-item{font-weight:800;}
.main-count em{display:inline-block; font-size:20rem; font-weight:bold; font-style: italic; color:#222; line-height:1em; word-break:keep-all;}
.motion_in .num-list{animation:count-up-ani 3s forwards;}

@keyframes wave-circle {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0; 
	}
}
@keyframes count-up-ani {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(0, -90%, 0);
	}
}



@media (max-width:1800px){
	.head-office{top: 14vw;}
}

@media (max-width:1600px){
	.head-office{top: 13.7vw;}
}
@media (max-width:1200px){
	.main-global .txt{width:600rem;}
	.main-global .main-tit > h3{font-size:50rem;}
}
@media (max-width:1024px){
	.main-global{padding:80rem 0;}
	.main-global .bg img{width:126%;}
	.main-global .txt{top:40%; left:63%; width:35%;}
	.main-global .txt p br{display:none;}
	.head-office{top:15.7vw; left:50.5vw; width:8vw; height:8vw; border-width:4rem;}
	.head-office .logo{width:80%; height:auto;}
	.main-global .bg .country.country1{left:40%;}
	.main-global .bg .country.country2{left:41%;}
	.main-global .bg .country.country3{left:27%;}
	.main-global .bg .country.country4{left:35%;}
	.main-global .bg .country.country5{left:44.5%;}
	.main-global .bg .country.country6{left:44.6%;}
	.main-global .bg .country.country7{left:4.5%;}
	.main-global .bg .country.country8{left:15%;}
	.main-global .main-tit > h3{font-size:48rem;}
	.main-count{margin-top:20rem; font-size:115rem; height:115rem; justify-content: flex-start}
	.main-count em{font-size:18rem;}
	.num-box:before{top:-48rem;}
}

@media (max-width:860px){
	.main-global{padding:50rem 0 0;}
	.main-global .bg img{width:168%;}
	.main-global .txt{position:relative; top:-80rem; left:5%; width:90%;}
	.main-global .main-tit > h3{font-size:37rem;}
	.main-global .txt p br{display:block;}

	.head-office{top:24.7vw; left:70vw;}
	.main-global .bg .country.country1{left:56%;}
	.main-global .bg .country.country2{left:56%;}
	.main-global .bg .country.country3{left:36%;}
	.main-global .bg .country.country4{left:47%;}
	.main-global .bg .country.country5{left:59.5%;}
	.main-global .bg .country.country6{left:59.6%;}
	.main-global .bg .country.country7{left:6.5%;}
	.main-global .bg .country.country8{left:20%;}
}

@media (max-width:540px){
	.main-global{border-radius:0 0 20rem 20rem;}
	.main-global .main-tit > em{margin-bottom:}
	.main-global .main-tit > h3{line-height:1em; font-size:25rem;}
	.main-global .txt{top:-50rem;}
	.main-count{margin-top:8rem; font-size:70rem; height:70rem; }
	.main-count em{font-size:14rem;}
	.main-global .bg .country .dots{width:3rem; height:3rem;}
	.main-global .bg .country .dots:before{width:10rem; height:10rem;}
	.main-global .bg .country .txt{font-size:10rem; margin-left:9rem; line-height:1em;}
	.head-office{top:20.7vw; left:67.8vw; width:12vw; height:12vw; border-width:3rem; }
	.head-office:after{height:30rem;}
	.wave-circle{top:65%; left:51%; width:24rem; height:24rem;}
	
}	


/* news */
.main-news{position:relative; padding:120rem 0; box-sizing:border-box; background:#1B2736; z-index:1; overflow:hidden;}
.main-news:before{content:''; position:absolute; top:-100rem; left:0; width:100%; height:100rem; background:#1B2736;}
.main-news .obj{position:absolute; top: -137rem; right: -205rem;}
.main-news .top{align-items: flex-end; margin-bottom:55rem;}
.main-news .main-tit > em{margin-bottom:20rem;}
.main-news .top .main-tit > h3{color:#fff; line-height:1em;}
.btn-more{display:flex; align-items: center; gap:7rem; z-index:2;}
.btn-more > span{display:inline-block; font-size:16rem; font-weight:500; color:#fff;}
.btn-more > i{display:inline-block; width:30rem; height:30rem; background:var(--c-01) url(../img/common/ic-arr.svg)no-repeat center; border:1px solid var(--c-01); background-size:13rem auto; border-radius:50rem; transition:all 0.3s ease;}
.btn-more:hover > i{border-color:#fff; background-color:rgba(255,255,255,0);}

@media (max-width:1200px){
	.main-news .obj{width:500rem; top:-118rem;}
	.main-news .obj img{width:100%;}
}
@media (max-width:1023px){
	.main-news{padding:80rem 0;}
	.main-news .obj{width:400rem; top:-96rem; right:-129rem;}
}
@media (max-width:540px){
	.main-news{padding:40rem 0;}
	.main-news .top{display:block; margin-bottom:20rem;}
	.main-news .main-tit > em{margin-bottom:10rem;}
	.btn-more{margin-top:15rem;}
	.btn-more > span{font-size:12rem;}
	.btn-more > i{ width:20rem; height:20rem; background-size:10rem auto;}
	.main-news .obj{width:296rem; top:-67rem; right:-118rem;}
}