@import url(modal.css);
@import url(form.css);
/*--------------------------------------------------------------------------
| FONT
|--------------------------------------------------------------------------*/
/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/* NotoKR */
@font-face{
	font-family:'NotoKR';
	font-weight:300;
  src:local('NotoKR light'),
      local('Noto San KR light'),
      url('./fonts/NotoKR/notokr-light.eot') format('embedded-opentype'),
	    url('./fonts/NotoKR/notokr-light.woff2') format('woff2'),
	    url('./fonts/NotoKR/notokr-light.woff') format('woff'),
	    url('./fonts/NotoKR/notokr-light.ttf') format('truetype');
}
@font-face{
	font-family:'NotoKR';
	font-weight:400;
  src:local('NotoKR regular'),
      local('Noto San KR regular'),
	    url('./fonts/NotoKR/notokr-regular.eot') format('embedded-opentype'),
	    url('./fonts/NotoKR/notokr-regular.woff2') format('woff2'),
	    url('./fonts/NotoKR/notokr-regular.woff') format('woff'),
	    url('./fonts/NotoKR/notokr-regular.ttf') format('truetype');
}
@font-face{
	font-family:'NotoKR';
	font-weight:500;
  src:local('NotoKR medium'),
      local('Noto San KR medium'),
	    url('./fonts/NotoKR/notokr-medium.eot') format('embedded-opentype'),
	    url('./fonts/NotoKR/notokr-medium.woff2') format('woff2'),
	    url('./fonts/NotoKR/notokr-medium.woff') format('woff'),
	    url('./fonts/NotoKR/notokr-medium.ttf') format('truetype');
}
@font-face{
	font-family:'NotoKR';
	font-weight:700;
  src:local('NotoKR bold'),
      local('Noto San KR bold'),
	    url('./fonts/NotoKR/notokr-bold.eot') format('embedded-opentype'),
	    url('./fonts/NotoKR/notokr-bold.woff2') format('woff2'),
	    url('./fonts/NotoKR/notokr-bold.woff') format('woff'),
	    url('./fonts/NotoKR/notokr-bold.ttf') format('truetype');
}

/* Pretendard */
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src:local('Pretendard Black'),
      url('./fonts/Pretendard/Pretendard-Black.eot') format('embedded-opentype'),
      url('./fonts/Pretendard/Pretendard-Black.subset.woff2') format('woff2'), 
      url('./fonts/Pretendard/Pretendard-Black.subset.woff') format('woff'),
      url('./fonts/Pretendard/Pretendard-Black.ttf') format('truetype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src:local('Pretendard ExtraBold'),
      url('./fonts/Pretendard/Pretendard-ExtraBold.eot') format('embedded-opentype'),
      url('./fonts/Pretendard/Pretendard-ExtraBold.subset.woff2') format('woff2'), 
      url('./fonts/Pretendard/Pretendard-ExtraBold.subset.woff') format('woff'),
      url('./fonts/Pretendard/Pretendard-ExtraBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src:local('Pretendard Bold'),
      url('./fonts/Pretendard/Pretendard-Bold.eot') format('embedded-opentype'),
      url('./fonts/Pretendard/Pretendard-Bold.subset.woff2') format('woff2'), 
      url('./fonts/Pretendard/Pretendard-Bold.subset.woff') format('woff'),
      url('./fonts/Pretendard/Pretendard-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src:local('Pretendard SemiBold'),
      url('./fonts/Pretendard/Pretendard-SemiBold.eot') format('embedded-opentype'),
      url('./fonts/Pretendard/Pretendard-SemiBold.subset.woff2') format('woff2'), 
      url('./fonts/Pretendard/Pretendard-SemiBold.subset.woff') format('woff'),
      url('./fonts/Pretendard/Pretendard-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src:local('Pretendard Medium'),
      url('./fonts/Pretendard/Pretendard-Medium.eot') format('embedded-opentype'),
      url('./fonts/Pretendard/Pretendard-Medium.subset.woff2') format('woff2'), 
      url('./fonts/Pretendard/Pretendard-Medium.subset.woff') format('woff'),
      url('./fonts/Pretendard/Pretendard-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src:local('Pretendard Regular'),
      url('./fonts/Pretendard/Pretendard-Regular.eot') format('embedded-opentype'),
      url('./fonts/Pretendard/Pretendard-Regular.subset.woff2') format('woff2'), 
      url('./fonts/Pretendard/Pretendard-Regular.subset.woff') format('woff'),
      url('./fonts/Pretendard/Pretendard-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src:local('Pretendard Light'),
      url('./fonts/Pretendard/Pretendard-Light.eot') format('embedded-opentype'),
      url('./fonts/Pretendard/Pretendard-Light.subset.woff2') format('woff2'), 
      url('./fonts/Pretendard/Pretendard-Light.subset.woff') format('woff'),
      url('./fonts/Pretendard/Pretendard-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src:local('Pretendard ExtraLight'),
      url('./fonts/Pretendard/Pretendard-ExtraLight.eot') format('embedded-opentype'),
      url('./fonts/Pretendard/Pretendard-ExtraLight.subset.woff2') format('woff2'), 
      url('./fonts/Pretendard/Pretendard-ExtraLight.subset.woff') format('woff'),
      url('./fonts/Pretendard/Pretendard-ExtraLight.ttf') format('truetype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src:local('Pretendard Thin'),
      url('./fonts/Pretendard/Pretendard-Thin.eot') format('embedded-opentype'),
      url('./fonts/Pretendard/Pretendard-Thin.subset.woff2') format('woff2'), 
      url('./fonts/Pretendard/Pretendard-Thin.subset.woff') format('woff'),
      url('./fonts/Pretendard/Pretendard-Thin.ttf') format('truetype');
}

span.USD{
	float: right;
	border: 1px solid var(--red);
    font-size: 12px;
    color: var(--red);
    padding: 4px;
    border-radius: 4px;
}

.play{font-family:"Play","Pretendard",sans-serif!important}
.poppins{font-family:"Poppins","Pretendard",sans-serif;}
.inter{font-family:"Inter","Pretendard",sans-serif;}


select {
	display: block;
	height: 42px;
    font-family: 'Pretendard';
    font-weight: 600;
    font-size: 14px;
	color: #444;
	line-height: 14px;
	padding: 6px 20px 6px 10px;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--white-color);
	background-image: url('../../images/temp101/icon_arrow_down.svg');
	background-repeat: no-repeat;
	background-position: right 8px top 50%;
	background-size: 12px 12px;
}

select.nosell {
	background-color: var(--light-bgcolor);
}
select::-ms-expand {
	display: none;
}
select:hover {
	border-color: #888;
}
select:focus {
	border-color: #aaa;
	box-shadow: 0 0 0 0px #9f9f9f;
	color: #222;
	outline: none;
}
select option {
	display: block;
	height: 42px;
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 14px;
}


/*--------------------------------------------------------------------------
| COLOR
|--------------------------------------------------------------------------*/

 .brand-color {color: var(--brand-color);}
 .assist-color {color: var(--assist-color);}
 .accent-color {color: var(--accent-color);}

/*--------------------------------------------------------------------------
| TEXT
|--------------------------------------------------------------------------*/

.title-xxxlarge{font-size:56px;line-height:1.2}
.title-xxlarge{font-size:50px;line-height:1.2}
.title-xlarge{font-size:46px;line-height:1.2}
.title-large{font-size:40px;line-height:1.2}
.title-xxmedium{font-size:38px;line-height:1.2}
.title-xmedium{font-size:34px}
.title-medium{font-size:28px}
.title-small{font-size:26px}
.title-xsmall{font-size:24px}
.title-xxsmall{font-size:22px}

.text-large{font-size:20px}
.text-medium{font-size:18px}
.text-small{font-size:17px}
.text-xsmall{font-size:16px}
.text-xxsmall{font-size:15px}



@media (max-width:1400px){
    .title-small{font-size:24px}
    .text-large{font-size:19px}
    .text-medium{font-size:17px}
}
@media (max-width:1280px){
    .title-xxxlarge{font-size:50px}
    .title-xxlarge{font-size:46px}
    .title-large{font-size:38px;}
    .title-xmedium{font-size:32px}
    .title-xlarge{font-size:42px}
    .title-xxmedium{font-size:35px}
    .title-small{font-size:25px}
    .title-xsmall{font-size:20px;}
    .title-xxsmall{font-size:21px}
    .text-large{font-size:18px}
}
@media(max-width:1024px){
    .title-xxxlarge{font-size:42px}
    .title-xxlarge{font-size:40px}
    .title-large{font-size:36px}
    .title-xxmedium{font-size:32px}
    .title-xmedium{font-size:30px}
    .title-medium{font-size:26px}
    .title-small{font-size:24px}
    .title-xsmall{font-size:22px}
    .title-xxsmall{font-size:20px}
    .text-medium{font-size:16px}
}
@media (max-width:768px){
    .title-xxxlarge{font-size:40px}
    .title-xxlarge{font-size:37px}
    .title-xlarge{font-size:36px}
    .title-large{font-size:34px}
    .title-medium{font-size:24px}
    .title-xmedium{font-size:28px}
    .title-xxmedium{font-size:30px}
    .title-small{font-size:22px}
    .title-xsmall{font-size:20px}
    .title-xxsmall{font-size:20px}
}
@media(max-width:640px){
    .title-xxxlarge{font-size:38px}
    .title-xxlarge{font-size:36px}
    .title-large{font-size:32px}
    .title-xxmedium{font-size:28px}
    .title-small{font-size:22px}
    .title-xxsmall{font-size:19px}
    .text-small{font-size:16px}
}
@media(max-width:480px){
    .title-xxxlarge{font-size:32px}
    .title-large{font-size:30px}
    .title-xxmedium{font-size:26px}
    .title-small{font-size:20px}
    .title-xsmall{font-size:17px}
    .title-xxsmall{font-size:18px}
}
@media(max-width:400px){
    .title-xsmall{font-size:16px}
}






/*--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------*/

@charset "utf-8";

html {
	height: 100%;
	font-size: 10px;
  }
  body {
	height: 100%;
	font-family: "Pretendard", "Poppins", "Roboto", "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "NotoKR", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
	/* color:#999999; */
	font-size:100% !important ;
	background-color: #f3f3f3;
  }


/*--------------------------------------------------------------------------
| Common
|--------------------------------------------------------------------------*/

/* Common Class */
.o-hd{overflow:hidden}
.clear:after {content: ".";display: block;clear: both;height: 0;font-size: 0;visibility: hidden;}
.clearfix::after{content:"";display:block;clear:both}
.ellipsis {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.hidden{width:0;height:0;overflow:hidden;visibility:hidden;margin:0;padding:0;font-size:0;line-height:0}
.blind{width:0;height:0;overflow:hidden;font-size:0;line-height:0;text-indent:-9999px}
.visible{visibility:visible;opacity:1}
.pull-left{float:left}
.pull-right{float:right}
.cursor{cursor:pointer!important}
.no-result{padding:130px 20px;font-size:16px;text-align:center;background:#eee}
.video-wrap{position:relative;padding-top:56.2%}
.video-wrap iframe{position:absolute;top:0;right:0;left:0;bottom:0;width:100%;height:100%}
.mask{position:fixed;display:block;top:0;bottom:0;left:0;right:0;visibility:hidden;opacity:0;background:rgba(0,0,0,0.6);cursor:pointer;transition:opacity .25s,visibility .25s;z-index:2500}
.mask.show{visibility:visible;opacity:1}
.editor-contents img{height:auto!important;max-width:100%}
.default-editor table, .default-editor thead, .default-editor tbody, .default-editor tr, .default-editor th, .default-editor td {border:1px solid;border-spacing:revert;border-collapse:unset}
.ic{display:inline-block;position:relative;top:-1px;vertical-align:middle}
.a-under{position:relative;;transition:color .3s;}
.a-under::after{content:"";position:absolute;bottom:0px;left:0;opacity:0;width:0;height:1px;background-color:#191919;transition:width .3s,opacity .3s}
.img-wrap{position: relative;}
.img-wrap > img.img{display:block;max-width:100%;}

/* Common Layout */
.inner{width:100%;max-width:1340px;padding:0 20px;margin:0 auto}
.hide{display:none}
/* Button */
.btn{display:inline-block;text-align:center;cursor:pointer}

/* Wrap */
.wrap{overflow:hidden;opacity:0.03;animation:fadeIn .15s linear forwards}
.wrap.move{animation:fadeOut .075s ease-in-out forwards}

@keyframes fadeIn{
	from{opacity:0.03}
	to{opacity:1}
}
@keyframes fadeOut{
	from{opacity:1}
	to{opacity:0.03}
}
@media (min-width:1025px) {
	body::-webkit-scrollbar{width:8px}
	body::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:5px;background-color:#9f9f9f;background-clip:padding-box;}
	body::-webkit-scrollbar-track{background-color:#eee}
}


/*--------------------------------------------------------------------------
| Animation
|--------------------------------------------------------------------------*/

/* Common Animation */
html:not(.old-ie) .animate-element{transition:visibility 1.1s ease, opacity 1.1s ease, transform 1.1s ease}

/* Fade */
html:not(.old-ie) .fadeIn{visibility:hidden;opacity:0}
html:not(.old-ie) .fadeIn.animated, html:not(.old-ie) body.is-mobile .fadeIn{visibility:visible;opacity:1}
html:not(.old-ie) .fadeInUp{position:relative;visibility:hidden;opacity:0;transform:translateY(110px)}
html:not(.old-ie) .fadeInUp.animated, html:not(.old-ie) body.is-mobile .fadeInUp{visibility:visible;opacity:1;transform:translateY(0)}
html:not(.old-ie) .fadeInDown{position:relative;visibility:hidden;opacity:0;transform:translateY(-110px)}
html:not(.old-ie) .fadeInDown.animated, html:not(.old-ie) body.is-mobile .fadeInDown{visibility:visible;opacity:1;transform:translateY(0)}
html:not(.old-ie) .fadeInRight{position:relative;visibility:hidden;opacity:0;transform:translateX(-110px)}
html:not(.old-ie) .fadeInRight.animated, html:not(.old-ie) body.is-mobile .fadeInRight{visibility:visible;opacity:1;transform:translateX(0)}
html:not(.old-ie) .fadeInLeft{position:relative;visibility:hidden;opacity:0;transform:translateX(110px)}
html:not(.old-ie) .fadeInLeft.animated, html:not(.old-ie) body.is-mobile .fadeInLeft{visibility:visible;opacity:1;transform:translateY(0)}


/* loading */
.loading{background-color:#009fe9;display:table;position:fixed;visibility:visible;opacity:1;width:100%;height:100%;top:0;left:0;z-index:9999;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}
	.loading.loader_hide{visibility:hidden;opacity:0}
#loading_1{}
	#loading_1 .loader_inner{display:table-cell;vertical-align:middle;text-align:center}
	#loading_1 .loader_inner > div{background-color:#fff;height:15px;width:15px;margin-left:3px;border-radius:50%;display:inline-block;-webkit-animation:stretchdelay 0.7s infinite ease-in-out;animation:stretchdelay 0.7s infinite ease-in-out}
    #loading_1 .loader_inner .circ01{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}
	#loading_1 .loader_inner .circ02{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}
	#loading_1 .loader_inner .circ03{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}
	#loading_1 .loader_inner .circ04{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}
    @-webkit-keyframes stretchdelay{0%, 40%, 100%{-webkit-transform:translateY(-10px)} 20%{-webkit-transform:translateY(-20px)}}
    @keyframes stretchdelay{0%, 40%, 100%{transform:translateY(-10px);-webkit-transform:translateY(-10px)} 20%{transform:translateY(-20px);-webkit-transform:translateY(-20px)}}
#loading_2{}
	#loading_2 .loader_inner{display:table-cell;vertical-align:middle;text-align:center}
	#loading_2 .loader_inner .circ{display:inline-block;box-sizing:border-box;width:80px;height:80px;border-radius:100%;border:10px solid rgba(255, 255, 255, 0.2);border-top-color:#FFF;-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear}
	@-webkit-keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
	@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
#loading_3{}
	#loading_3 .loader_inner{display:table-cell;vertical-align:middle;text-align:center}
	#loading_3 .loader_inner .circ, #loading_03 .loader_inner .circ:before, #loading_03 .loader_inner .circ:after{border-radius:50%;background-color:#fff;width:18px;height:18px;transform-origin:center center;display:inline-block}
	#loading_3 .loader_inner .circ{position:relative;background-color:#fff;opacity:1;-webkit-animation:spScaleAlpha 1s infinite linear;animation:spScaleAlpha 1s infinite linear}
	#loading_3 .loader_inner .circ:before, #loading_03 .loader_inner .circ:after{content:'';position:relative;opacity:0.25}
	#loading_3 .loader_inner .circ:before{left:30px;top:0px;-webkit-animation:spScaleAlphaBefore 1s infinite linear;animation:spScaleAlphaBefore 1s infinite linear}
	#loading_3 .loader_inner .circ:after{left:-30px;top:-23px;-webkit-animation:spScaleAlphaAfter 1s infinite linear;animation:spScaleAlphaAfter 1s infinite linear}
	@-webkit-keyframes spScaleAlpha{0%{opacity:1}33%{opacity:0.25}66%{opacity:0.25}100%{opacity:1}}
	@keyframes spScaleAlpha{0%{opacity:1}33%{opacity:0.25}66%{opacity:0.25}100%{opacity:1}}
	@-webkit-keyframes spScaleAlphaBefore{0%{opacity:0.25}33%{opacity:1}66%{opacity:0.25}}
	@keyframes spScaleAlphaBefore{0%{opacity:0.25}33%{opacity:1}66%{opacity:0.25}}
	@-webkit-keyframes spScaleAlphaAfter{33%{opacity:0.25}66%{opacity:1}100%{opacity:0.25}}
	@keyframes spScaleAlphaAfter{33%{opacity:0.25}66%{opacity:1}100%{opacity:0.25}}
#loading_4{}
	#loading_4 .loader_inner{display:table-cell;vertical-align:middle;text-align:center}
	#loading_4 .loader_inner .bar{position:relative;width:10px;height:50px;clear:both;margin:20px auto;border:1px #fff solid;background-color:#fff;-webkit-animation:loadBars 1s infinite linear;animation:loadBars 1s infinite linear}
	#loading_4 .loader_inner .bar:after, #loading_4 .loader_inner .bar:before{content:'';position:absolute;width:inherit;height:inherit;border:inherit;background-color:inherit;top:-1px}
	#loading_4 .loader_inner .bar:before{left:-20px;-webkit-animation:loadBarsBefore 1s infinite linear;animation:loadBarsBefore 1s infinite linear}
	#loading_4 .loader_inner .bar:after{right:-20px;-webkit-animation:loadBarsAfter 1s infinite linear;animation:loadBarsAfter 1s infinite linear}
	@keyframes loadBarsBefore{0%{transform:scale(1, 1)}25%{transform:scale(1, 1.25)}50%{transform:scale(1, 0.75)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}
	@keyframes loadBars{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 1.25)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}
	@keyframes loadBarsAfter{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 0.75)}75%{transform:scale(1, 1.25)}100%{transform:scale(1, 1)}}
#loading_5{}
	#loading_5 .loader_inner{display:table-cell;vertical-align:middle;text-align:center}
	#loading_5 .circ_wrap{width:60px;margin:auto}
	#loading_5 .circ_wrap > div{height:4px;position:relative;width:4px;background:#fff;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.125)}
	#loading_5	.circ01{position:absolute;left:50px;top:0px;animation:loadMove 2s infinite ease-in-out}
	#loading_5	.circ02{position:absolute;left:0px;top:-50px;animation:loadMove 2s infinite ease-in-out;animation-delay:-1s}
	#loading_5	.circ03{position:absolute;left:50px;top:-50px;animation:loadMove 2s infinite ease-in-out;animation-delay:-0.5s}
	#loading_5	.circ04{position:absolute;left:0;top:0;animation:loadMove 2s infinite ease-in-out;animation-delay:-1.5s}
	@keyframes loadMove{0%{left:50px;top:0px}25%{left:0px;top:0px}50%{top:-50px;transform:scale(3);left:0px}75%{top:-50px;left:50px}100%{top:0px;transform:scale(1);left:50px}}
#loading_6{}
	#loading_6 .loader_inner{display:table-cell;vertical-align:middle;text-align:center}
	#loading_6 .spin{height:45px;width:45px;position:relative;display:inline-block;vertical-align:middle}
	#loading_6 .spin span{border-radius:40px;position:absolute;top:0;bottom:0;right:0;left:0;border:3px solid #fff;opacity:0;-webkit-animation:loadScale 1s ease-out infinite;animation:loadScale 1s ease-out infinite}
	#loading_6 .spin span:nth-child(2){-webkit-animation-delay:0.5s;animation-delay:0.5s}
	#loading_6 .spin span:nth-child(3){-webkit-animation-delay:0.3s;animation-delay:0.3s}
	@-webkit-keyframes loadScale{0%{opacity:0;-webkit-transform:scale(0)}70%{opacity:1}100%{opacity:0;-webkit-transform:scale(1)}}
	@keyframes loadScale{0%{opacity:0;transform:scale(0)}70%{opacity:1}100%{opacity:0;transform:scale(1)}}

.none {display:none !important}