@charset "utf-8";

/*
* File       : site-custom.css
* Author     : B-WORKER
*      
 * SUMMARY:
 * 0) ROOT
 * 1) WRAP
 * 2) SITE CUSTOM 
    - 사이트 전반적으로 함께 쓰이는 속성
	- 메인, 서브 함께 쓰이는 속성
*/

/* **************************************** *
 * font set
 * **************************************** */
body{font-size:17rem; color:#999;}
body,input,textarea,button,select{font-family:'Manrope', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}

p{line-height: 1.41;}

@media (max-width:860px){
	body{font-size:15rem;}
	body,
	p,
	li,
	a{font-family:-apple-system,'Manrope', BlinkMacSystemFont, Sans-serif;}
}

@media (max-width:540px){
	body{letter-spacing: -0.1rem; font-size:15rem;}
	p {line-height: 1.6; font-size:15rem;}
}

/* **************************************** *
 * global root
 * **************************************** */
 :root {
    --w:#fff;
	--c-01: #0D7E37;
	--c-02: #FB0103;

    --default:#999999;

	--b-01: #333333;
	--b-02: #C2C2C2;

	--g-01: #bcbcbc;

	--bg-01: #F6F6F6;

	--br-01: #ddd;
    --br-02: #e1e1e1;

	/* 게시판용 root */
	--border-01: #eee;

	--trans-01:all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-02:all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-03:all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-04:all 0.5s ease;

	--font-60:60rem;
	--font-36:35rem;
	--font-23:23rem;
    --font-23:22rem;
    --font-20:20rem;
	--font-16:16rem;
	--font-14:14rem;

    --gap:140rem;
    --main-wrap:250rem;
}

h3,.font-h3{font-size:var(--font-60); line-height: 1.11; font-weight: 700; color: var(--b-01);}
h4,.font-h4{font-size:var(--font-36); line-height: 1.36; font-weight: 700; }
h5,.font-h5{font-size:var(--font-23); line-height: 1.34; font-weight: 700; }
b{font-weight: 700;}

 /* 컬러 기본 셋 */
 [data-color="c1"]{color:var(--c-01) !important;}
 [data-color="c2"]{color:var(--c-02) !important;}
 [data-color="b1"]{color:var(--b-01) !important;}
 [data-color="b2"]{color:var(--b-02) !important;}

 [data-color="w"],
 [data-color="w"] *{color: var(--w);} /* 영역만 글자 흰색 */

 [data-bg="1"]{background-color: var(--bg-01) !important;}
 [data-bg="2"]{background-color: var(--bg-02) !important;}
 
 /* boarder 값 기본 셋 */
 [data-border]{border:1px solid;}
 [data-radius]{overflow:hidden;}
 [data-radius="10"]{border-radius:max(0.5208vw, 5rem);}
 [data-radius="20"]{border-radius:max(1.0417vw, 10rem);}

@media all and (max-width:1820px){
	:root {
         --main-wrap:210rem;
    }
}
@media all and (max-width:1200px){
	:root {
        --main-wrap:72rem;

		--font-60:48rem;
        --font-36:30rem;
        --font-23:20rem;
        --font-23:18rem;
        --font-20:18rem;

        --gap:120rem;
	}
}

@media all and (max-width:1023px){
	:root {
        --main-wrap:62rem;
        --font-60:36rem;
        --font-36:24rem;
        --font-23:18rem;
        --font-20:16rem;

        --gap:100rem;
	}
}

@media (max-width:860px){
	:root {
        --main-wrap:40rem;
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;

        --font-60:32rem;
        --font-36:22rem;

        --gap:80rem;
	}
}

@media (max-width: 540px){
	:root {
        --main-wrap:22rem;

        --font-60:28rem;

        --gap:56rem;
	}
}

/* **************************************** *
 * wrapper
 * **************************************** */
 *[class^="wrap"]{position:relative;margin:0 auto;}

 :root {
     --wrap:100rem;
 }

 .sub-wrap{margin: 0 183rem 0 var(--wrap)}

 .side-wrap{margin-left: var(--wrap); margin-right: 83rem;}
 .wrap-wide{margin-left: var(--wrap); margin-right: var(--wrap)}
 .wrap-narrow{max-width:1206rem;}
 
 @media all and (max-width:1919px){
	 .wrap-wide{margin: 0 60rem;	 max-width: none;}
    
 }
 
 /* @media all and (max-width:1600px){
	 .wrap{margin:0 120rem 0 60rem; max-width:none;}
 }
  */
  @media all and (max-width:1480px){
    :root {
     --wrap:60rem;
  }
	 .sub-wrap{margin:0 120rem 0 var(--wrap); max-width:none;}
      .side-wrap{margin-right: 60rem;}
 }
 

 @media all and (max-width:1023px){
     :root {
        --wrap:40rem;
    }
	 *[class^="wrap"]{margin:0 var(--wrap); max-width:none;width: auto;}
     .sub-wrap{margin: 0 var(--wrap); }
     .side-wrap{margin-right: 0}
 }
 
 @media all and (max-width:540px){
     :root {
        --wrap:20rem;
    }
	 *[class^="wrap"],.sub-wrap{margin:0 var(--wrap);}
 }

 /* **************************************** *
 * swiper set
 * 
 * 사이트 기본 슬라이드 스타일에 맞게 마음껏 수정하면 됩니다.
 * 특정 페이지에서만 다른 스타일 슬라이드를 사용한다면 부모 클레스 상쇄하여 사용 
 * **************************************** */
 .swiper-controls .wrap *{cursor:pointer;}
 .swiper-container img{width:100%;}
 .swiper-controls > div{cursor: pointer;}
 .button-next.swiper-button-disabled,
 .button-prev.swiper-button-disabled{opacity:0.5;}
 
 .swiper-controls{display:flex; justify-content:center; align-items:center;}
 .swiper-controls *[class^="swiper-btn--"]{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem; font-weight: 600;}
 .swiper-controls *[class^="swiper-btn--"]::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(/theme/basic/img/common/arrow-basic.svg) no-repeat 50% 50%;background-size: 8rem;}
 .swiper-controls .swiper-btn--prev{flex-direction: row-reverse;}
 
 .swiper-controls .swiper-btn--next::after{/* transform:rotate(-90deg); */}
 .swiper-controls .swiper-btn--prev::after{transform: rotate(180deg);}
 .swiper-controls .swiper-button-disabled{opacity: 0.5;}
 
 .swiper-pagination-bullet{width:10rem; height:10rem; background:#fff; border-radius:100%;}
 .swiper-pagination{display:flex; gap:15rem;}


/* **************************************** *
 * site custom
 * **************************************** */
/* tag common */
p{line-height:1.6; font-weight:300;}

.point{position: relative;}
.point::before{content: "";width: 12rem;height: 12rem;background-color: var(--c-02);position: absolute;top: 0rem;left: -20rem;}

/* button common */
*.btn-basic{display:inline-flex;align-items:center;position:relative;box-sizing:border-box;}
*.btn-basic .plus,
.plus{width: 51rem; height: 51rem; border-radius: 100%; display: inline-flex; justify-content: center; align-items: center; border:1px solid var(--b-01); transition: all 0.3s ease; }
.plus > em{width: 13rem; height:13rem; position:relative;}
.plus > em i{width: 13rem; height:1px; background:var(--b-01); display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); transition: all 0.3s ease;}
.plus > em i:nth-child(1){transform:translateY(-50%) rotate(90deg);}
.plus > em i:nth-child(2){opacity: 0;}
.plus.white{border-color: var(--w);}
.plus.white > em i{background-color: var(--w);}

*.btn-basic .default{min-width: 152rem; display: inline-flex; overflow: hidden; position: relative; justify-content: center; align-items: center; border-radius: 100rem; height: 51rem;  transition: all 0.3s ease; border:1px solid var(--b-01); background-color: var(--b-01); color: var(--w); font-size:14rem; font-weight: 400;}
*.btn-basic .default i{color: var(--w); position: relative; z-index: 1;} 
*.btn-basic .default::before{content: ""; width: 0; height: 100%; background-color: var(--w); left: 0; top: 0; position: absolute; transition: all 0.5s ease; }

 *.btn-basic:hover .plus:not(.white){background-color: var(--b-01);}
 *.btn-basic:hover .plus > em i{background-color: #fff; height: 1.2px;}
 *.btn-basic:hover .plus > em i:nth-child(1){transform: translateY(-50%) rotate(50deg); top: 4rem; width: 9rem; right: -1px;}
 *.btn-basic:hover .plus > em i:nth-child(2){opacity: 1;}
 *.btn-basic:hover .plus > em i:nth-child(3){transform:translateY(-50%) rotate(-50deg); top: 10rem; width: 9rem; right: -1px}
 *.btn-basic:hover .default::before{width: 100%; }
 *.btn-basic:hover .default i{color: var(--b-01);}

@media (hover: hover) and (pointer: fine){
	/* *.btn-basic:hover{background: #422694;color:#fff !important;border-color: #422694;} */
}

@media all and (max-width:1023px){
	*.btn-basic .default{height: 48rem; min-width: 142rem;}
    *.btn-basic .plus, .plus{height: 48rem; width: 48rem;}
    .plus > em{width: 10rem; height:10rem; }
    .plus > em i{width: 10rem;}
    .point::before{width: 10rem; height: 10rem;}
    @media (hover: hover) and (pointer: fine){
         *.btn-basic:hover .plus > em i:nth-child(1){transform: translateY(-50%) rotate(50deg); top: 3rem; width: 6rem; right: -1px;}
        *.btn-basic:hover .plus > em i:nth-child(3){transform:translateY(-50%) rotate(-50deg); top: 8rem; width: 6rem; right: -1px}

    }
}
@media (max-width:860px){
    .point::before{width: 8rem; height: 8rem; top: -3rem; left: -12rem;}
}
@media (max-width: 540px){
	*.btn-basic{font-size:14rem;}
    p{line-height:1.4}
    *.btn-basic .default{height:40rem; min-width: 126rem;}
    *.btn-basic .plus, .plus{height:40rem; width:40rem;}
}



.main-partners__map .spot{width: 12rem; height: 12rem; margin: 0 auto; cursor: pointer; position: relative; border-radius: 50rem; background-color: var(--c-01); display: block;}
.main-partners__map .spot::after{content: ""; width: 100%; height: 100%; position: absolute; transform: scale(1.5); background-color: var(--c-01); border-radius: 100%; opacity: 0.2;animation:zomm_out 2s ease 0s infinite; }
@keyframes zomm_out{
    0%{transform: scale(1); opacity: .7;}
    90%, 100%{transform: scale(3); opacity: 0;}
}
.main-partners__map .map-inner{position: relative; aspect-ratio:3 / 1.7; width: 100%;/* padding-left: 131rem; *//* display: flex; *//* align-items: center; */justify-content: center;/* height: 100%; */}
.main-partners__map img{width: 100%;height: auto;display: block;position: absolute;left: 0;top: 0;} 
.main-partners__map ul {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.main-partners__map ul li{position: absolute; }
.main-partners__map ul li.korea{left: 50.5%;top: 38%;z-index: 1;}
.main-partners__map ul li.china{left: 47.6%;top: 41%;}
.main-partners__map ul li.finland{left: 18%;top: 19%;}
.main-partners__map ul li.europe{left: 8.4%;top: 33.4%;}
.main-partners__map ul li.turkey{left: 19%;top: 36%;}
.main-partners__map ul li.thailand{left: 43%;top: 51%;}
.main-partners__map ul li.indonesia{left: 47.5%;top: 61.2%;}
.main-partners__map ul li.india{left: 34%;top: 49%;}
.main-partners__map ul li.uae{left: 27%;top: 45%;}
.main-partners__map ul li.on{z-index: 2;}

.main-partners__show{display: flex;  flex-direction: column; position: absolute; left: 50%; transform: translateX(-50%) translateY(20rem); bottom: 0; opacity: 0; visibility: hidden;  transition: all .4s;}  
.main-partners__show .main-partners__line{width: 1px; height: 78rem; border-right: 1px solid var(--c-01); display: block; margin: 0 auto;}
.main-partners__box{border-radius: 5rem;width: 251rem;background-color: #fff;padding: 16rem;border:1px solid var(--c-01);box-shadow: 28px 18px 30px 0 rgba(0, 0, 0, 0.20);}
.main-partners__box strong{color: var(--c-01);display: inline-block;font-size: 20rem;border-bottom: 2px solid var(--c-01);padding-bottom: 0rem;margin-bottom: 9rem;}
.main-partners__box strong + p{margin-top: 2rem;}
.main-partners__box p{font-size: 14rem;margin-top: 0rem;line-height: 1.4;}
.main-partners__box > a{display: inline-block;margin-top: 19rem;margin-bottom: 0;/* border-bottom:1px solid; */font-weight:500;font-size: 12rem;width: initial;}

@media (min-width: 861px) and (hover: hover) and (pointer: fine){
    .main-partners__map ul li.on .main-partners__show{opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);} 
    .main-partners__map ul li.on .spot::after{animation: none; border:1px solid var(--c-01); width: 36rem; height: 36rem; opacity: 1; left: 50%; top: 50%; background-color: transparent; transform: scale(1) translate(-50%,-50%);}

}


@media all and (max-width:1023px){
   

    .main-partners__box strong{font-size: 18rem;}
    .main-partners__box strong + p{margin-top: 6rem;}
    .main-partners__info{right: 60rem;}
}

@media (min-width: 861px) and (hover: hover) and (pointer: fine){
    .main-partners__map ul li.on .spot::after{width: 26rem; height: 26rem;}
}

@media (max-width:860px){
    .main-partners__map .spot {width: 8rem; height: 8rem;}
}

@media (max-width: 540px){

    .main-partners__map .spot{width: 5rem; height: 5rem;}
}

.scroll-down .arrow{display:inline-flex;flex-direction:column;gap:3rem;align-items:center;}
.scroll-down .arrow svg{opacity:0;transform:translateY(-10rem); animation:arrowFadeDown 2s infinite cubic-bezier(0.23,1,0.32,1);}
.scroll-down .arrow svg:nth-child(2){animation-delay:0.3s;}


@keyframes arrowFadeDown{
  0%{opacity:0;transform:translateY(-10rem);}
  30%{opacity:1;}
  100%{opacity:0;transform:translateY(0);}
}