@charset "UTF-8";

/*--------------------------------------------------------------------------------
@ HEADER
--------------------------------------------------------------------------------*/
#header {position:absolute;top:0;left:0;width:100%;height:80px;background-color:#fff; z-index:19;-webkit-transition-duration:0.5s;-m-transition-duration: 0.5s;-o-transition-duration:0.5s;-ms-transition-duration:0.5s;transition-duration:0.5s;box-sizing:border-box;}
#header:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:0;-webkit-transition-duration:1s;-m-transition-duration: 1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
#header header {position:relative;max-width:1440px;margin:0 auto;height:100%;z-index:2;display:flex;align-items:center;justify-content:space-between;}
#header h1 {}
#header h1 a {display:flex; line-height:1;}
#header h1 img {vertical-align:revert;}
#header .mlogo { display:none; } 

@media screen and (max-width: 1470px){
	#header header {margin:0 15px;}
}
@media screen and (max-width: 1200px){
	#header header {margin:0 15px;}
}
@media screen and (max-width: 1024px){
	#header {top:0 !important;height:60px;}
	#header h1 {padding:15px 0;}
	#header h1 img {height:15px;}
	#header.nav-up:before {opacity:0.99;}
	
	/*
	#header .mlogo { display:flex;  align-items:center; padding:10px 15px; height:60px; } 
	#header .mlogo a { display:flex;}
	#header .mlogo img {height:15px;}
	*/
}

#header .header-inner { display:flex; align-items:center; } 

/* qrshop button */
.qrshop_btn { display:inline-flex; align-items:center; justify-content:center; min-width:10rem; font-size:1rem; color:#fff; font-weight:700; padding:0.75rem 1.875rem; background:#5c0da6; border-radius:1.406rem; transition:all 0.5s; margin-left:1.5625rem; }  
.qrshop_btn:hover { background:#2631a4; } 
@media screen and (max-width: 640px){
	.qrshop_btn { min-width:revert; font-size:0.875rem; } 
} 


/*모바일 버튼*/
#header__mobile {display:none;} 


/*----------------------------------------------------------------------
# 메인 CSS 
----------------------------------------------------------------------*/

/*----------------------------------------------------------------------
@ MAIN COMMON 
----------------------------------------------------------------------*/
#main > section {padding-top:6.25rem;padding-bottom:6.25rem; overflow:hidden;  }

.main_title_wrap { position:relative; } 
.main_title {position:relative; display:flex; flex-direction:column; align-items:center; row-gap:1.25rem; font-size:2.5rem; color:#000; font-weight:600; padding:0rem;line-height:1; }
.main_title h2 { font-family:'Montserrat'; font-size:3.75rem; color:#fff; font-weight:700; letter-spacing:0.1em; line-height:1.083; transition:all 0.4s; } 
.main_title p { font-size:1.375rem; color:#fff; font-weight:500; text-align:center; } 


@media screen and (max-width: 1024px){
	.main_title h2 { font-size:3rem; } 
}
@media screen and (max-width: 1024px){
	#main > section {padding-top:5rem;padding-bottom:5rem;}
}
@media screen and (max-width: 640px){
	.main_title h2 { font-size:2.5rem; } 
	.main_title p { font-size:1rem; } 
}
@media screen and (max-width: 480px){

}
/* 스마트폰 가로 */
@media screen and (min-width : 767px) and (max-width: 1023px) and (orientation : landscape ) {
	/*.main_title h2 { font-size:2rem; }*/
}



/*----------------------------------------------------------------------
@ MAIN LINE
----------------------------------------------------------------------*/
.main_line { position: absolute; top: 0; left: calc(50% - 0px); transform: translateX(-50%); width: 1px; height: 100vh; background:rgba(255,255,255,0.2); z-index: 4;  }
.main_line:after { content: ""; position: absolute;  top: 0; left: 0; width: 100%; height: 300px; background: linear-gradient(to bottom, rgba(255,255,255,0) , rgba(255,255,255, 1) ); animation: rain 2.5s infinite; border-radius: 100% }

@keyframes rain {
	0% { transform: translateY(-300px) } 
	to { transform: translateY(calc(100vh + 100px)) }
}



/*----------------------------------------------------------------------
@ MAIN CONTACT
----------------------------------------------------------------------*/
#main_contact { display:flex; align-items:center; justify-content:center; position:relative; padding-top:0 !important; padding-bottom:0 !important; min-height:calc(var(--vh, 1vh) * 100); background:url('/images/main/contact_bg.jpg') no-repeat center center / cover;  } 
.main_contact { position:relative; display:flex; align-items:center; width:100%; height:100%; z-index:3; } 
.main_contact .main_title { align-items:flex-start; } 
.main_contact .main_title h2 { letter-spacing:0; } 

.main_contact .inner { position:relative; display:flex; align-items:center; width:100%; max-width:1440px; margin:0 auto; z-index:3; } 
.main_contact .inner .left { display:flex; flex-direction:column; width:50%; padding-right:1.25rem; } 
.main_contact .inner .right { display:flex; flex-direction:column; align-items:center; width:50%; } 

.main_contact .address { display:flex; flex-direction:column; row-gap:0.625rem; margin-top:3.125rem; } 
.main_contact .address span { font-size:1.5625rem; color:#fff; font-weight:600; } 
.main_contact .address span.line:after {content:'';clear:both; display:inline-block;width:1px;height:15px;margin:0 12px 3px 15px;background-color:#fff;vertical-align:middle; }
.main_contact .address span.line:last-child:after {content:none;}

.main_contact .btns1 { display:flex; align-items:center; gap:0.875rem; margin-top:3.125rem; }
.main_contact .btns1 a { display:inline-flex; align-items:center; justify-content:center; gap:0.25rem; min-width:10rem; height:2.5rem; font-size:1rem; color:#fff; font-weight:400; border:1px solid #fff; border-radius:0.3125rem; padding:0.5rem 1.25rem; } 
.main_contact .btns1 a span { font-size:1.25rem; } 

.main_contact .app { }
.main_contact .app h3 { font-size:3.125rem; color:#fff; font-weight:700; }
.main_contact .app h3 b { font-family:'Montserrat'; font-weight:700; } 
.main_contact .app p { font-size:1.4375rem; color:#fff; font-weight:300; line-height:1.52; margin-top:1.875rem;  }
.main_contact .app p b { font-weight:700; } 
.main_contact .app p.en { font-family:'Montserrat'; font-size:1.0625rem; color:#26b4c9; font-weight:600; line-height:1; letter-spacing:0.2em; margin-top:0; margin-bottom:0.625rem; }

.main_contact .btns2 { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1.25rem; margin-top:1.875rem; }
.main_contact .btns2 a { display:flex; align-items:center; justify-content:center; width:16.875rem; height:4.375rem; font-size:1.25rem; color:#fff; font-weight:700; background:#26b4c9; border-radius:0.625rem; transition:all 0.4s; }
.main_contact .btns2 a:first-child {/* background:#4f607f; */} 


@media screen and (max-width: 1470px){
	.main_contact .inner { padding:0 15px; } 
	.main_contact .inner .right { padding-left:1.25rem; } 
}
@media screen and (max-width: 1280px){
	.main_contact .app h3 { font-size:2.5rem; } 
	.main_contact .app p { font-size:1.25rem; } 
	.main_contact .btns2 a { width:revert; height:revert; font-size:1.125rem; padding:1rem 1.5625rem; } 
}
@media screen and (max-width: 1024px) {
	.main_contact .app h3 { font-size:2rem; } 
	.main_contact .app p { font-size:1.125rem; } 
	.main_contact .btns2 a { font-size:1.125rem; } 

	.main_contact .address span { font-size:1.25rem; } 
}
@media screen and (max-width: 900px) {
	.main_contact .inner { flex-direction:column; row-gap:3.125rem;  } 
	.main_contact .inner .left { width:100%; padding-right:0; }
	.main_contact .inner .right { width:100%; padding-left:0; align-items:flex-start; } 
} 
@media screen and (max-width: 640px) {
	.main_contact .app h3 { font-size:1.75rem; } 
} 

@media screen and (max-width: 480px) {
	.main_contact .address { font-size:1.125rem; } 
	.main_contact .app h3 { font-size:1.5rem; } 
	.main_contact .app p { font-size:1.125rem; }
	.main_contact .app p br { display:none; } 
	.main_contact .app a { height:3rem; font-size:1.125rem; } 
} 








/*--------------------------------------------------------------------------------
@ FOOTER
--------------------------------------------------------------------------------*/
#footer {background:#000;}
#footer footer {position:relative;}
#footer .clear {clear:both}
#footer legend {display:none;}
#footer #layer-file-footer {display:none;position:absolute;padding:20px;border:1px solid #333;background:#fff;z-index:30;top:-250px !important;left:160px !important;}
#footer .btnTop { display:none; position:absolute;right:20px; top:revert; bottom:calc(100% - 1.875rem); width:3.75rem;height:3.75rem; border:1px solid #111; background:#111; border-radius:3.75rem; cursor:pointer;z-index:99; overflow:hidden; transition:height 0.4s; }
#footer .btnTop.fixed { position:fixed; top:revert; bottom:20px; } 
#footer .btnTop.active { display:flex } 
#footer .btnTop_wrap { display:flex !important; align-items:center; justify-content:center; height:100%; } 
#footer .btnTop .material-icons { min-height:36px; font-size:36px; color:#fff; z-index:2; text-align:center; transition:all 0.5s cubic-bezier(.165,.84,.44,1); } 
#footer .btnTop .material-icons:after { content:''; display:block; width:3px; height:0px; margin-top:-20px; margin-left:17px; border-radius:2px; background:#fff; transition: height 0.5s cubic-bezier(.165,.84,.44,1); } 
#footer .btnTop .material-icons.active { color:#fff; } 
#footer .btnTop span.back { position:absolute; left:0px; bottom:-100%; width:100%; height:100%; background:var(--menu);z-index:1;} 
#footer .btnTop:hover { height:calc(3.125rem * 2); } 
#footer .btnTop:hover .material-icons { margin-top:-10px; } 
#footer .btnTop:hover .material-icons:after { height:3.125rem; } 

@media screen and (max-width: 640px) {
	#footer .btnTop { right:15px; } 
} 


.f_bottom { padding:1.875rem 0; border-top:1px solid #303030;  } 
.f_bottom .f_inner { display:flex; align-items:revert; justify-content:space-between; max-width:1440px; margin:0 auto; } 

.f_bottom .f_top_left { }
.f_bottom .f_top_right { display:flex; flex-direction:column; gap:0.625rem; min-width:220px; padding-top:5px; } 
.f_bottom .f_top_right > a { font-size:1rem; color:#fff; font-weight:400; padding:0.625rem 1.875rem; line-height:1; border:1px solid #fff; transition:all 0.3s; }
.f_bottom .f_top_right > a .material-icons { font-size:1.5rem; margin-bottom:0px; } 
.f_bottom .f_top_right > a:hover { color:#111; background:#fff; } 
.f_bottom .f_top_right select { display:block; width:100%; height:revert; padding:0.7rem 1rem; background:url(/images/board/select_bg_off.png) no-repeat; background-position:calc(100% - 15px) 50%; border:1px solid #fff;font-size:0.938rem;color:#fff;background-color:#000; box-sizing:border-box; } 

.f_top_right .links { display:flex; align-items:center; justify-content:flex-end; gap:1.875rem; } 
.f_top_right .links a { position:relative; font-size:0.9375rem; color:#fff; transition:all 0.4s ease; } 
.f_top_right .links a:after { content:''; position:absolute; right:-1rem; top:3px; width:1px; height:0.75rem; background:#fff; } 
.f_top_right .links a:last-child:after { display:none; } 		


.f_bottom {  font-size:1rem; color:#999; font-weight:400; }
.f_bottom .f_bottom_title { margin-bottom:1.25rem; } 
.f_bottom p { margin-bottom:10px; } 
.f_bottom .companyname { color:#fff; } 

.f_bottom span { word-break:keep-all; } 
.f_bottom span.line:after {content:'';clear:both; display:inline-block;width:1px;height:12px;margin:0 12px 2px 15px;background-color:#999;vertical-align:middle; }
.f_bottom span.line:last-child:after {content:none;}

.f_bottom .copy { font-size:0.875rem; color:#fff; margin-top:1.875rem; margin-bottom:0;  } 


@media screen and (max-width:1470px){
	.f_bottom .f_inner { margin:0 15px; } 
}

@media screen and (max-width: 1200px){
	.f_bottom .f_inner { margin:0 15px; } 
}
@media screen and (max-width: 1024px){
	.f_bottom .f_inner { align-items:flex-start; flex-direction:column; } 
	.f_bottom .f_top_right { margin-top:0.938rem; } 

	.f_top_right .links { justify-content:flex-start; } 
}	
@media screen and (max-width: 768px){
	.f_bottom { text-align:center; } 
	.f_bottom .f_inner { align-items:center; } 
	.f_bottom .copy { text-align:center; } 

	.f_top_right .links { justify-content:center; } 
} 
@media screen and (max-width: 640px){
	.footer { padding:1.25rem; } 
	.f_bottom p { display:flex; flex-direction:column; } 
	.f_bottom p span.line { margin-bottom:4px; } 
	.f_bottom p span.line:after { display:none;  }	
	.f_bottom .copy { margin-top:revert; } 
}
@media screen and (max-width: 540px){
}
@media screen and (max-width: 414px){
} 



body {background-color:#fff;}


.popup { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); opacity:0; transition: opacity .25s ease; z-index: 9999; visibility: hidden; } 
.popup.active { opacity:1; visibility: visible; } 

/*.popup .login-modal { position:relative; width:100%; max-width:30rem; padding:3.125rem; background:#fff; border-radius:1.25rem; box-shadow: 0 2px 16px #ffff0060; } */
.popup .login-modal { position: absolute; left: 50%; bottom:10%; width:100%; max-width:32rem; padding:3.125rem; background:#fff; border-radius:1.25rem; box-shadow: 0 2px 16px #ffff0060; transform: translate(-50%, 30px); opacity:0; transition: all .35s cubic-bezier(.22,.61,.36,1); } 
.popup.active .login-modal { transform: translate(-50%, 0); opacity:1; } 



.popup .login-modal a.close { position:absolute; right:3.125rem; top:3.125rem; } 
.popup .login-modal a.close span { font-size:1.875rem; } 

.popup .login_form {  display:none; flex-direction:column; row-gap:0.625rem; } 
.popup .login_form.hide { display:none; } 
.popup .login_form.active { display:flex; } 


.popup form {  } 
.popup form h4 { display:flex; align-items:center; gap:0.5rem; font-size:1.5625rem; color:#000; font-weight:700; padding-bottom:0.625rem; border-bottom:1px solid #e9e9e9; } 
.popup form h4.sm { font-size:1.375rem; } 

.popup form input { width:100%;  height:3rem; padding:0.625rem 0.813rem;border:0.1875rem solid transparent;font-size:1rem; border-radius: 0.3125rem; background:#f4f4f6; box-sizing:border-box; transition:all 0.4s; }
.popup form a.btn { display:flex; align-items:center; justify-content:center; width:100%; height:3rem; font-size:1.125rem; color:#fff; font-weight:700; background:#26b4c9; border-radius:0.3125rem; transition:all 0.4s; }
.popup form p { font-size:1rem; color:#666; line-height:1.5; margin-top:0.625rem; text-align:center; } 
.popup form p a { color:#26b4c9; font-weight:500; } 

.popup .linkgroup { display:flex; align-items:center; justify-content:center; gap:1.875rem; margin-top:0.25rem; } 
.popup .linkgroup a { position:relative; font-size:1rem; color:#26b4c9; font-weight:500;  } 
.popup .linkgroup a:after { content:''; position:absolute; top:0.3125rem; right:-0.9375rem; width:1px; height:0.75rem; background:#ccc; } 
.popup .linkgroup a:last-child:after { display:none; }