@charset "utf-8";

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

/* **************************************** *
 * font set
 * **************************************** */
body,p{font-size:18rem; color:#005F31; word-break: keep-all;}
body{background-color: var(--bg-01);}
body,input,textarea,button,select{font-family:'GyeonggiTitle','Pretendard', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}

p{line-height: 1.666; font-family: var(--lang-ko2); font-weight: 400; letter-spacing: -0.54px;}

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

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

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #FFAD00;
	--c-02: #005F31;
    --c-03: #A1C0A7;
    --c-04: #FFF0CA;

	--b-01: #005F31;
	--b-02: #666666;
    --b-03: #BDBDBD;

	--g-01: #bcbcbc;

	--f-01: #fff;

	--bg-01: #FFF9EC;
	--bg-02: #F6F3E0;
    --bg-03: #F2EED7;

    --bd-01: #E1E1E1;
    --bd-02: #EEEEEE;
    --bd-03: #545454;
    --bd-04: #D9E0DD;

    --gap170:170rem;
    --gap140:140rem;
    --gap130:130rem;
    --gap100:100rem;
    --gap80:80rem;
    --gap54:54rem;

	/* 게시판용 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 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-04:all 0.3s ease;

    --lang-en:"Poppins";
    --lang-ko1:"GyeonggiTitle;";
    --lang-ko2:"Pretendard";

	--font-72:72rem;
	--font-54:54rem;
	--font-34:34rem;
	--font-22:22rem;
    --font-20:20rem;
	--font-18:18rem;
    --font-17:17rem;
    --font-16:16rem;
}

h2,h3,h4,h5,[class^="title-"]{font-family:"GyeonggiTitle" !important; }
h2, .title-h2{font-size: var(--font-72); line-height: 1.25; font-weight: 500;}
h3, .title-h3{font-size: var(--font-54); line-height: 1.296; font-weight: 500;}
h4, .title-h4{font-size: var(--font-34); line-height: 1.44; font-weight: 500;}
h5, .title-h5{font-size:var(--font-22);line-height: 1.363; }

[class^="font-"]{font-family: "Pretendard";}
.font-01{font-size:var(--font-22); line-height: 30rem; font-weight: 500;}
.font-01-01{font-size:var(--font-22); line-height: 36rem; font-weight: 400;}
.font-02{font-size:var(--font-20); line-height: 30rem; font-weight: 600;}
.font-02-b{font-size:var(--font-20); line-height: 28rem; font-weight: 700;}
.font-03{font-size:var(--font-16); line-height: 28rem;}


 /* 컬러 기본 셋 */
 [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(--f-01);} /* 영역만 글자 흰색 */

 
 [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:1480px){
	:root {
		--font-72:62rem;
		--font-54:48rem;
        --font-34:30rem;
		--gap170:140rem
	}
 }

@media all and (max-width:1200px){
	:root {
		--gap170:120rem;
        --gap140:120rem;
        --gap130:110rem;
		--gap80:60rem;

        --font-34:28rem;
		--font-72:52rem;
		--font-54:44rem;
	}
}

@media all and (max-width:1023px){
	:root {
		--font-72:47rem;
		--font-54:34rem;
        --font-34:25rem;
        --font-20:18rem;
        --font-22:18rem;

		--gap170:100rem;
		--gap130:100rem;
        --gap100:80rem;
		--font-17:15rem;
	}

	body,p{font-size:15rem; line-height: 1.5;}
}

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

        --font-54:30rem;
        --font-34:22rem;
        --font-22:16rem;
        --font-18:16rem;

        --gap170:80rem;
        --gap140:60rem;
		--gap130:80rem;
        --gap100:60rem;
	}
}

@media (max-width: 540px){
	/* body,p{font-size:15rem;} */
	:root {
		--font-72:36rem;
		--font-54:28rem;
        --font-34:20rem;
        --font-22:15rem;
        --font-18:15rem;
        --font-16:15rem;


		--gap170:56rem;
        --gap130:56rem;
		--gap80:32rem;
        --gap100:54rem;
		/* --gap54:54rem; */
	}
    .font-01{line-height: 1.5;}
}

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

 .wrap{/* max-width:1520rem; */ margin: 0 102rem;}
 .wrap-narrow{max-width:1408rem; margin: 0 auto;}
 /* .wrap-narrow{max-width:1206rem;} */
 
 @media (min-width:2000px){

    .wrap{ margin: 0 12%;}

 }
 @media all and (max-width:1919px){
	 .wrap-wide{margin: 0 60rem;	 max-width: none;}
 }
 
 @media all and (max-width:1680px){
    .wrap-narrow,
	 .wrap{margin:0 60rem;max-width:none;}
 }
 
 @media all and (max-width:1023px){
	 *[class^="wrap"]{margin:0 40rem;max-width:none;width: auto;}
 }
 
 @media all and (max-width:540px){
	 *[class^="wrap"]{margin:0 20rem;}
 }

 /* **************************************** *
 * 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 */

.rolling-text{white-space: nowrap; will-change: transform; }
.rolling-text__text{font-size: var(--font67);font-weight: bold;display: inline-block;margin: 0 80rem; will-change: transform; font-size: 120rem; line-height: 1.2; font-weight: 400;}


/* button common */
.btn-wrap{text-align: center;}
*.btn-basic{display:inline-flex;justify-content:center;align-items:center;position:relative; font-family: var(--lang-ko2); box-sizing:border-box;padding: 21rem 50rem;font-size: 16rem; border:2px solid;font-weight:500; transition: var(--trans-01);border-radius: 100rem;}
*.btn-basic.bd-green{border-color: var(--c-02); color: var(--c-02);}
*.btn-basic.bd-w{color: var(--f-01); border-color: var(--f-01);}
*.btn-square{ border-radius: 5rem; padding: 13rem; border:1px solid var(--f-01); gap: 16rem;  display: inline-flex; align-items: center;}
*.btn-square span{font-size: 14rem; font-family: var(--lang-ko2); font-weight: 500;}
*.btn-square svg{position: relative; top: 2rem;}


[data-circle]{border-radius: 100%;  border:100rem solid ; display: block; }
[data-circle="green"]{border-color: var(--c-02) !important;}
[data-circle="orange"]{border-color: var(--c-01) !important;}

[data-round]{position: absolute; }
[data-round] svg{ display: block;width: 100%;height: 100%;transform: rotate(-180deg); }

[data-round="1"] svg circle { animation: drawCircle 3s ease-out forwards; animation-delay: .4s;}
[data-round="2"].is_moved svg circle { animation: drawCircle 3s ease-out forwards;}

@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;        
    }
}

.gallery-list:has(.empty_li){display: block;}
.gallery-list li.empty_li{text-align: center; padding: var(--gap100); border-radius: 5rem; background-color: var(--bg-02);}



@media (hover: hover) and (pointer: fine){

    *.btn-basic.bd-green:hover{color: var(--f-01); background-color: var(--c-02);}
    *.btn-basic.bd-w:hover{color: var(--c-02); background-color: var(--f-01);}

}

@media (max-width:1600px){

}
@media (max-width:1480px){
	.rolling-text__text{font-size: 110rem;}
	*.btn-basic{padding: 18rem 45rem;}

	[data-circle]{border:80rem solid}
    .rolling-text__text{margin: 0 34rem;}
}
@media all and (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){
	.rolling-text__text{font-size: 90rem; font-weight: 600;}

	[data-circle]{border:60rem solid}
	
	*.btn-basic{padding: 16rem 33rem; font-size: 15rem;}
    .rolling-text__text{margin: 0 30rem;}
}
@media (max-width:860px){
    *.btn-square{padding: 10rem;}
    *.btn-square span{font-size: 12rem;}
}
@media (max-width: 540px){
	.rolling-text__text{font-size: 47rem; margin: 0 10rem;}
	.rolling-text__text:nth-child(3),.rolling-text__text:nth-child(4){display: none;}

    .gallery-list li{font-size: 13rem;}
	*.btn-basic{padding:15rem 20rem;font-size:14rem;display: flex;}
}


.main-global--wrap{position: relative;display: inline-block;  max-width: 1400rem;}
.main-global--wrap .main-global__list{position: absolute;top: 0; width: 100%; height: 100%;}
.main-global{padding-top: 107rem; position: relative; min-height: var(--height-full); /* padding-bottom: 130rem; */}
.main-global .wrap{height: 100%;display: flex;justify-content: flex-end;}
.main-global__map > img{margin-left: auto; width: 100%;}
.main-global__title{position: absolute; left: 0; bottom:130rem }
.main-global__title a{margin-top: 66rem;}
.main-global__title h3{margin-bottom: 14rem;}

.main-global__list .flag{background-color: var(--f-01); padding: 5rem; border-radius: 5rem; display: inline-block; position: relative;}
.main-global__list .flag img{width: 44rem; border-radius: 5rem;}
.main-global__list .flag svg{position: absolute; left: 50%; bottom: -10rem; transform: translateX(-50%);}
.main-global__list li{position: absolute;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 17rem;}
.main-global__list li i{width: 26rem; height: 26rem; border:7rem solid; background-color: var(--f-01);}
.main-global__list .us{top: 133rem;left: 205rem;transition-delay: .1s;}
.main-global__list .france{top: 99rem;left: 617rem;transition-delay: .2s;}
.main-global__list .sweden{top: 64rem; left: 649rem; transition-delay: .3s;}
.main-global__list .poland{left:  689rem; top: 60rem; transition-delay: .4s;}
.main-global__list .germany{top: 83rem;left: 669rem;transition-delay: .5s;}
.main-global__list .dubai{top: 223rem;right: 501rem;transition-delay: .6s;}
.main-global__list .china{top: 102rem; right: 263rem; transition-delay: .7s;}
.main-global__list .japan{right: 143rem; top: 132rem; transition-delay: .8s;}
.main-global__list .singapore{top: 334rem;right: 229rem;transition-delay: .9s;}
.main-global__list .vietnam{right: 246rem; top:237rem; transition-delay: 1s;} 
.main-global__list .thailand{right: 290rem;top: 251rem;transition-delay: 1.1s;} 
.main-global__list .english{right: 167rem; top: 478rem; transition-delay: 1.2s;} 

@media all and (max-width:1200px){
    .main-global__list li i{width: 20rem; height: 20rem; border:5rem solid}
    .main-global__list .flag {padding: 3rem;}
   
    .main-global__list .us{top: 83rem;left: 165rem; }
    .main-global__list .france{top: 83rem; left: 497rem; }
    .main-global__list .sweden{top: 34rem; left: 549rem; }
    .main-global__list .poland{left:  589rem; top: 30rem; }
    .main-global__list .germany{top:62rem; left: 618rem; }
    .main-global__list .dubai{top: 163rem; right: 327rem; }
    .main-global__list .china{top: 82rem; right: 223rem; }
    .main-global__list .japan{right: 123rem; top: 102rem; }
    .main-global__list .singapore{top: 235rem; right: 229rem; }
    .main-global__list .vietnam{right: 201rem; top: 203rem; } 
    .main-global__list .thailand{right: 200rem; top: 301rem; } 
    .main-global__list .english{right: 137rem; top: 378rem; } 
}

@media all and (max-width:1023px){
    .main-global__list li i{width: 12rem; height: 12rem; border:3rem solid;}
    .main-global__list .flag{padding: 2rem;border-radius: 3rem;}
    .main-global__list .flag img{width: 34rem;border-radius: 3rem;}
  
    .main-global__list .us{top: 62rem;left: 135rem;}
    .main-global__list .france{top: 76rem;left: 404rem;}
    .main-global__list .sweden{top: 44rem;left: 441rem;}
    .main-global__list .poland{left: 469rem;top: 41rem;}
    .main-global__list .germany{top: 52rem;left: 488rem;}
    .main-global__list .dubai{top: 137rem;right: 267rem;}
    .main-global__list .china{top: 72rem;right: 181rem;}
    .main-global__list .japan{right: 103rem;top: 92rem;}
    .main-global__list .singapore{top: 196rem;right: 190rem;}
    .main-global__list .vietnam{right: 164rem;top: 173rem;} 
    .main-global__list .thailand{right: 160rem;top: 251rem;} 
    .main-global__list .english{right: 107rem;top: 319rem;} 
   
}

@media (max-width:860px){
    .main-global__list .us{top: 49rem;left: 110rem;}
    .main-global__list .france{top: 48rem;left: 324rem;}
    .main-global__list .sweden{top: 25rem;left: 352rem;}
    .main-global__list .poland{left: 379rem;top: 21rem;}
    .main-global__list .germany{top: 36rem;left: 398rem;}
    .main-global__list .dubai{top: 104rem;right: 207rem;}
    .main-global__list .china{top: 51rem;right: 141rem;}
    .main-global__list .japan{right: 73rem;top: 61rem;}
    .main-global__list .singapore{top: 159rem;right: 152rem;}
    .main-global__list .vietnam{right: 134rem;top: 154rem;} 
    .main-global__list .thailand{right: 120rem;top: 191rem;} 
    .main-global__list .english{right: 77rem;top: 240rem;} 
}

@media (max-width: 540px){
    .main-global__list .flag{display: none;}
    .main-global__list li i {width: 8rem; height:8rem ; border:2rem solid; position: relative;}
    .main-global__list li i::before{content: '';display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8rem;height: 8rem;border-radius: 50%;background: radial-gradient(circle, rgb(244 239 34 / 30%) 100%, transparent 70%);animation: pulse 2s infinite ease-out;}
   
    .main-global__list .us{top: 39rem;left: 60rem;}
    .main-global__list .france{top: 48rem;left: 145rem;}
    .main-global__list .sweden{top: 36rem;left: 158rem;}
    .main-global__list .poland{left: 170rem;top: 32rem;}
    .main-global__list .germany{top: 31rem;left: 183rem;}
    .main-global__list .dubai{top: 62rem;right: 100rem;}
    .main-global__list .china{top: 41rem;right: 68rem;}
    .main-global__list .japan{right: 39rem;top: 51rem;}
    .main-global__list .singapore{top: 80rem;right: 65rem;}
    .main-global__list .vietnam{right: 77rem;top: 90rem;} 
    .main-global__list .thailand{right: 50rem; top: 111rem;} 
    .main-global__list .english{right: 37rem;top: 132rem;} 
}


@keyframes pulse {
    0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    }
    100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
    }
}