@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url(https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css);
@import url(css/blank.css);

*{margin:0; padding:0; box-sizing:border-box;letter-spacing:-0.05rem;color:inherit;}
img {border:0;vertical-align:top;}
a {border:0; text-decoration:none; color:inherit;}
ul, li {list-style:none;}
div {display:block;}
html {overflow-y:scroll;height:100%;min-width:320px}
body {height:100%; font-family: "Pretendard Variable", Pretendard, 'Roboto', sans-serif;  color:#000; font-size: 1.2rem;}
.inner,.inner2 {padding: 0 20px;}

.c_lightgray {color:#b0b0b0 !important}
.c_gray {color:#808080 !important}
.c_red {color:#c70000 !important}
.c_white {color:#fff !important}
.c_main {color:#b7a4f4 !important;}

h1,h2,h3,h4 {font-weight:300;line-height:1.3}
h1 {font-size:3rem;}
.sizeh1 {font-size: 50px !important;}
h2 {font-size:2.5rem}
.sizeh2 {font-size: 40px !important;}
h3 {font-size:1.8rem; }
h4 {font-size:1.5rem;}
.sizeh4 {font-size: 1.5rem;}
h5 {font-size:1.3rem; font-weight: 300; line-height:1.55; word-break:keep-all;}
.sizeh5 {font-size: 20px !important;}
p {font-size:1.2rem; line-height:1.6; color:inherit; word-break:keep-all; }
p.small {font-size:1.05rem; letter-spacing: 0;}


.roboto {font-family:'Roboto';}
.thin {font-weight:100;}
.bold {font-weight:700;}
.tight {letter-spacing:-0.05em !important;}
.loose {letter-spacing:0.2em !important;}
.font30 {font-size:30px !important;}
.font20 {font-size:20px !important;}
.txtshadow {text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
.ind5 {text-indent:5px;}



span {color:inherit;}

hr.line {width:100%;height:1px;background-color:#d0d0d0;border:0;}

.float {float:left !important;}
.float_r {float:right !important;}
.left {text-align:left !important}
.right {text-align:right !important}
.center {text-align:center !important}
.clearfix {display:inline-block;width:100%;}
.clearfix:after {content:"";clear:both;}
.flex {display:flex;}
.flex .col1 {flex:1;}
.flex .col2 {flex:2;}
.flex .col3 {flex:3;}
.block {display:inline-block;}
.relative {position:relative;}




.bd_b {border-bottom:1px #333 solid}
.bd_t {border-top:1px #333 solid}
.bd_r {border-right:1px #d0d0d0 solid}
.bd_l {border-left:1px #d0d0d0 solid}



/* 폭 설정 */
.half {width:50% !important}
.col5 {width:20% !important;}
.col4 {width:25% !important;}
.col3 {width:33.33% !important;}
.col3x2 {width:66.66% !important;}
.w10 {width:10% !important;}
.w15 {width:15% !important;}
.w20 {width:20% !important;}
.w30 {width:30% !important;}
.w40 {width:40% !important;}
.w48 {width:48% !important;}
.w55 {width:55% !important;}
.w60 {width:60% !important;}
.w70 {width:70% !important;}
.w75 {width:75% !important;}
.w80 {width:80% !important;}

.w90 {width:90% !important;}
.w100 {width:100% !important;}





#wrap {width:640px; margin: 0px auto; background:#fff; position: relative;}

h1.logo {width:240px;height:50px;background-image:url(images/logo.png);text-indent:-3333px;background-size:contain; background-repeat: no-repeat; background-position: center;}
h1.logo.mono {background-image:url(images/logo_mono.png);}


/* 공통상단 */
#header {width:100%; height:130px; background-color:#303030;}
#header > .inner > * {position:absolute;}
#header .logo {top:40px;left:50%;margin-left:-130px;}
#header .logo a {display:block;height:inherit;}


#menu .language {right:20px;top:70px; position: absolute;}
#menu .language a {width:33px;height:33px;background-repeat:no-repeat;background-size: contain; display:block;text-indent:-3333px;float:left;margin-left:5px; background-color: transparent; border: 0;}
#menu .language a.en {background-image:url(images/language_en.png);}
#menu .language a.ch {background-image:url(images/language_ch.png);}


#header .menu {font-size: 40px; padding: 5px 10px; border:1px #828282 solid; text-align: center; color: #fff; left:20px; top: 35px;}

#header .toggle-side-bar-btn {right: 20px; color: #fff; top: 50px; font-size: 24px;}


#quick {width:100%; max-width: 640px; position: fixed; bottom: 0; z-index: 1000;}
#quick .join {width: 90px; height: 90px; background-image: url(images/quick_join.png); float: right;  position: absolute; bottom: 180px; right: 20px; z-index: 10; filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.15)); background-size: contain; text-indent: -3333px; background-repeat: no-repeat;}
#quick .menu-toggle {width: 80px; height: 80px; background-repeat: no-repeat; background-image: url(images/quick_open.png); float: right; position: absolute; bottom: 20px; right: 20px; z-index: 10; filter:drop-shadow(5px 5px 0 rgba(0,0,0,0.5)); background-size: contain;}
#quick .menu-toggle.on {background-image: url(images/quick_close.png); bottom: 180px !important; -webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
#quick .formbox {width:100%; height: 160px; position: relative; bottom: 0; background-color:rgba(0,0,0,0.8); overflow:hidden; padding:20px;  -webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
#quick .formbox .formtable {width: 48%; margin: 0 1%; float: left;}
#quick .formbox .confirmbox {width: 48%; margin: 0 1%; float: left;}
#quick .formbox .formmail_title_bgcolor span {color: #fff !important;}
#quick .formbox p.small {color: #fff !important;}
#quick .formbox .confirm_btn p {background-color:#9f87eb !important;}



/* 공통 하단 */
#footer { width:100%; display:inline-block; float:left; }


#footer .inner {position: relative; width: 100%; background-color: #303030; padding-bottom: 140px;}
#footer .tel img {width: 100%;}
#footer .cs {width: 100%; border-top: 1px #d0d0d0 solid; padding: 25px 0; 	background: url(images/main_cs.gif);}
#footer .cs .inner {background: url(images/footer_cs.png) center no-repeat; background-size: contain; height: 183px;}
#footer .cs .inner a {width: 50%; display: block; height: inherit; text-indent: -3333px; float: left;}
#footer .logo {float: left; margin: 50px 0 0;}
#footer .sns {float: right; margin-top: 50px;}
#footer .sns a {width:49px;height:49px;background-repeat:no-repeat;display:block;text-indent:-3333px;float:left;margin-right:10px;}
#footer .sns a.instagram {background-image:url(images/footer_sns1.png)}
#footer .sns a.blog {background-image:url(images/footer_sns2.png)}
#footer .sns a.youtube {background-image:url(images/footer_sns3.png)}

#footer .term,#footer .txtbox {width: 100%; display: inline-block; }
#footer .term span {margin-right:10px; font-size: larger;}
#footer .term span:before {content:"|"; margin-right:10px; color:#999;}
#footer .term span.first:before {content:"";margin-right: 0;}
#footer .txtbox span { color: #fff; margin-right: 20px; line-height: 1.6;}

#footer #backtop {width: 44px; height: 44px; background: url(images/backtop.png) no-repeat; position: absolute; bottom: 300px; right: 0; display: block; text-indent: -3333px;}







@media only screen and (max-width:640px) {
	body {font-size: 3.2vw;}

	h1 {font-size:12vw;}
	.sizeh1 {font-size: 12vw !important;}
	h2 {font-size:9vw;}
	.sizeh2 {font-size: 9vw !important;}
	h3 {font-size:6vw; }
	h4 {font-size:4.5vw;}
	.sizeh4 {font-size: 4.5vw;}
	h5 {font-size:3.7vw;}
	.sizeh5 {font-size: 3.7vw !important;}
	p {font-size:3.2vw; line-height:1.6; color:inherit; word-break:keep-all; }
	p.small {font-size:3vw; letter-spacing: 0;}

	.tight {letter-spacing:-0.05vw !important;}
	.loose {letter-spacing:5vw !important;}


	#wrap {width:100%;}	   
	h1.logo {height: 10vw;}
	#header {height: 25vw;}
	#header .logo {top: 7vw;}

	#header .menu {left: 2vw; font-size: 5vw; padding: 1vw 1.5vw; top: 7.5vw; }
	#menu .language {right:20px;top:8vw; }
	#header .language a {height: 6vw; width: 6vw; margin-right: 2vw;}
	#header .toggle-side-bar-btn {font-size: 4vw !important; top: 9vw; right: 10px;}
	.inner,.inner2 {padding: 0 2vw;}

	#quick .join {width:20vw; height:20vw; bottom:  33vw !important;}
	#quick .menu-toggle {width: 18vw; height: 18vw; bottom: 3vw; right: 5vw; filter:drop-shadow(1vw 1vw 0 rgba(0,0,0,0.5));}
#quick .formbox {height: 30vw !important;padding: 2.5vw 2vw !important;}
#quick .formbox .confirm_btn p {font-size: 5vw !important;}
#quick .formbox textarea {height: 8vw;}
#quick .formbox select[name="add1"] {height: 4vw !important;}
#quick .formbox .formmail_border {height: 4vw !important;}
#quick .formbox .formmail_title_bgcolor,#quick .formbox .formmail_cell_bgcolor {padding: 0.5vw 0 !important;}


	#footer .cs .inner {height: 30vw;}
	#footer .logo.mono {background-position: left center !important;}
	#footer .txtbox span {margin-right: 3vw;}
}