@charset "utf-8";
.comingsoon {width:100%;text-align: center;}
.comingsoon img {width: 100%;}
.global_map {
    text-align: center;
    width: 100%;
    position: relative;
    margin-bottom: 5%;
}
.global_map > img {/* width:100%; */}
.global_map svg {}
.global_map svg .map_img {z-index:-2;}

.global_map svg .on:hover rect{fill:#000;}
.global_map svg .on:hover text{fill:#fff;}
.global_map .text_area {
    position: absolute;
    top: 43%;
    left: 47%;
}
.global_map .text_area h4 {
    font-size: var(--font-size50);
}
.global_map .text_area p {
    font-size: var(--font-size20);
    text-align: left;
    padding-left: 0.5em;
}

.network_box .arrow span {display:inline-block; width:631px; height:242px; margin:-30px 0 0 129px; background:url("/images/content/network_arrow.png") no-repeat; background-size:100% auto; }
@keyframes arrow-ani {
	0% {
		opacity:0;
		-moz-transform: scale(0);
		transform:scale(0);
	}
	100% {
		opacity:1.0;
		-moz-transform: scale(1);
		transform:scale(1);
	}
}

@keyframes nation-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; } 
}
.network_circle{position:absolute;left: 37%;top: 17%;display:inline-block;width: 260px;height: 260px;cursor:pointer;}
.network_circle img {z-index:2;position: absolute;left: 36%;top: 30%;}
.network_circle > span:nth-child(2) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s; 
}
.network_circle > span:nth-child(3) {
	-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
}
.network_circle > span:nth-child(4) {
	-webkit-animation-delay: 2s;
		animation-delay:2s;
}
.network_circle > span:nth-child(5) {
	-webkit-animation-delay: 2.5s;
		animation-delay:2.5s;
}
.network_circle > span:nth-child(6) {
	-webkit-animation-delay: 4s;
		animation-delay:4s;
}
.network_circle > span {
	background-color: rgb(179 28 39 / 10%);
	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%;
	-webkit-animation: nation-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
	animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite;
	}

.map_point {
    position: absolute;
    background-color: #fff;
    border-radius: 3em;
    box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
}
.map_point:before{content:"";width: 16px;height: 16px;background-color: var(--color-main);border: 4px solid #fff;position:absolute;border-radius:50%;bottom: -50%;left: 50%;transform: translate(-50%, 50%);}

.map_point a{width: 100%;height: 100%;display: block;text-transform: uppercase;font-size: 15px;padding: 0.2em 1.5em;}
.map_point:hover {background-color:#000}
.map_point:hover a {color:#fff}
.map_point.p1 {left: 30%; top: 22%;}
.map_point.p2 {left: 37.5%;top: 43%;}
.map_point.p3 {
    left: 13%;
    top: 14%;
}
.map_point.p4 {
    left: 29%;
    top: 40%;
}
.map_point.p5 {
    right: 29%;
    top: 21%;
}
.mySwiper, .mySwiper2 {
    overflow: hidden;
}
.sec2, .sec2-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FBFBFF;
    height: 535px;
}
.sec2-1 {display:flex;flex-direction: row-reverse;justify-content: flex-start;}
.sec2 .mySwiper, .sec2-1 .mySwiper2 {width:50%;height: 100%;}
.sec2 .text {width: 40%;position: relative;padding: 0 6% 0 0;}
.sec2-1 .text {padding: 0 0 0 6%;}
.sec2 div h4 {
    font-size: var(--font-size30);
    font-weight: 600;
    padding-bottom: 1em;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sec2 .swiper-button{position: relative;padding-top: 7em;width: 160px;z-index: 7;}
.sec2 .swiper-button-next,
.sec2 .swiper-button-prev{
    top: unset;
    background-color: #fff;
    padding: 1em 1.2em;
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 2px 2px 10px rgba(34,34,34,0.09);
}

.sec2 .swiper-button-next{
    /* left: 12%; */
}

.sec2 .swiper-button-prev{
    left: 0;
    z-index: 11;
}

.sec2 .swiper-button-next:after, 
.swiper-rtl .swiper-button-prev:after,
.sec2 .swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    font-size: .9em;
    color: #000;
}
.sec2 .swiper-button-next.swiper-button-disabled, .sec2 .swiper-button-prev.swiper-button-disabled {opacity:unset;}

/* FHD - 1920 / 24인치이상 */
@media only screen and (min-width: 1024px) and (max-width:1700px) {	
	.global_map > img {width:100%;}
	.sec2, .sec2-1 {height:40vh}
	.sec2 .mySwiper, .sec2-1 .mySwiper2 {width:60%}
	.sec2 .text {width:35%}
}

/* PC (해상도 1023px)*/ 
@media only screen and (max-width:1023px) {
	.global_map > img {width:100%;}
	.sec2 {flex-wrap:wrap;height: auto;padding: 0 5%;}
	.sec2 .mySwiper, .sec2-1 .mySwiper2 {width:100%;}
	.sec2 .text {width:100%;padding: 3rem 0 10%;}
	.sec2 .swiper-button {padding: 3rem 0;float: right;}
}

/* 모바일 가로, 테블릿 세로 (해상도 ~ 767px)*/ 
@media only screen and (max-width:767px) {
	.network_circle {width: 120px;height: 120px;left: 22%;top: -6%;}
	.network_circle img {width:50px;/* top: -6%; */}
	.global_map {
    height: auto;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}
	.global_map .text_area {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    top: unset;
    bottom: 0;
}
	.global_map .text_area h4 {font-size:10vw}
	.global_map .text_area p {text-align:center}
	.map_point {display:none;}
}