@charset "utf-8";

/* 
font-family: 'Montserrat', sans-serif;
*/

label, input, select{vertical-align:middle;}
body{font-size:14px; font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', Dotum, "돋움",Gulim, "굴림", Verdana, Tahoma, AppleGothic, sans-serif; color:#333; letter-spacing:0; }
input, textarea, select{ font-family:'Noto Sans KR', sans-serif !important; }
input[type="checkbox"]{ border:1px solid #ddd;}


/* header */
#header {position: absolute; z-index: 10000; top: 0; left: 0; width: 100%;}
#header .h_inner {max-width: 1820px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; position: relative;}
#header .logo {font-size: 0; display: block; width: 207px; height: 30px; background: url(../images/common/logo.png) no-repeat center; position: absolute; left: 0; top: 66px;}
#sub #header .logo {transform: translateZ(0)!important; opacity: 1!important;}

#sub #header .menu_bx .menu_w {transform: translateZ(0)!important; opacity: 1!important;}



/* footer */
#footer {text-align: center; background-color: #eeeeee; padding: 80px 20px 53px;}
#footer p {font-family: 'Montserrat', sans-serif; font-size: 16px; color: #cccccc; word-break: keep-all; text-transform: uppercase; margin-top: 31px;}
#footer .top_btn {position: fixed; bottom: 30px; right: 30px; width: 80px; height: 80px; background: url(../images/icon/top_btn.png) no-repeat center #111111; border-radius: 50%; font-size: 0; cursor: pointer; z-index: 100;}
#footer .instagram {display: inline-block; position: fixed; width: 27px; height: 27px; background: url(../images/icon/instagram1.png) no-repeat center; bottom: 135px; right: 56px; z-index: 100; font-size: 0;}
#footer .info {font-size: 0; text-align: center; max-width: 830px; margin: 51px auto 0;}
#footer .info li {font-size: 16px; line-height: 30px; color: #aaaaaa; word-break: keep-all; display: inline-block; margin: 0 19px;}
#footer .privacy_btn {color: #888888; font-weight: 700; cursor: pointer;}
/*#footer .info li span {color: #aaaaaa;}*/

#main #footer .top_btn {z-index: -1; visibility: hidden; opacity: 0; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s;}
#main #footer .top_btn.on {z-index: 100; visibility: visible; opacity: 1; transition-delay: 0.3s;}
/*#main #footer .instagram {display: none!important;}*/
#main #footer .instagram {bottom: 56px; z-index: 10000; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; opacity: 0; /*transform: translate3d(100px,0,0);*/}
#main #footer .instagram.mOn {opacity: 1; transform: translateZ(0);}
#main #footer .instagram.on {bottom: 135px;}

	
	
	
/* s_visual */
#s_visual {background-color: #000000;}
#s_visual .sv_inner {max-width: 1400px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; padding: 245px 0 60px;}
#s_visual .ttl_bx strong {display: block; font-family: 'Montserrat', sans-serif; font-size: 60px; color: #ffffff; font-weight: 700; word-break: keep-all;}





/* 팝업 */
.pop_bx {position: fixed; box-sizing: border-box; width: 100%; height: 100%; top: 0; left: 0; z-index: 100000; background-color: rgba(0,0,0,0.8); overflow-y: auto; display: none;}
.pop_bx .pop_w {display: table; width: 100%; height: 100%;}
.pop_bx .pop_c {display: table-cell; vertical-align: middle; padding: 110px 0; position: relative;}
.pop_bx .close_btn_w {position: absolute; left: 50%; top: 60px; text-align: right; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); max-width: 1820px; width: calc(100% - 40px); font-size: 0;}
.pop_bx .close_btn_w span {display: inline-block; width: 28px; height: 28px; background: url(../images/icon/close_btn.png) no-repeat center; cursor: pointer;}
.pop_bx .v_bx {max-width: 960px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;}
.pop_bx .v_w {position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.pop_bx .v_w iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#privacy_pop .privacy_bx {background-color: #000000; max-width: 960px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 48px 40px 40px; text-align: left;}
#privacy_pop .privacy_bx .ttl {font-size: 40px; color: #ffffff; font-weight: 700; word-break: keep-all; margin-bottom: 23px;}
#privacy_pop .privacy_bx .txt_bx {height: 340px; box-sizing: border-box; overflow-y: auto; border: 1px solid #444444; background-color: #111111; padding: 0px 20px 40px;}





.pc_show2 {display: block!important;}
.m_show2 {display: none!important;}

/* PC */
@media all and (min-width:1025px){
	.pc_show{ display:block !important;}
	.pc_i_show{ display:inline-block !important;}
	.m_show{ display:none !important;}
	.m_i_show{ display:none !important;}
	
	
	/* header */
	#main #header {height: 100%; overflow: hidden;}
	#main #header .h_inner {height: 100%;}
	#main #header .sns_btn {display: none!important;}
	#header .menu_bx {position: absolute; right: 0; top: 40px; display: inline-block!important; text-align: right; height: 100%;}
	#header .menu_bx .dep1 {writing-mode: vertical-rl; white-space: nowrap; transform: rotate(180deg); padding-top: 50px;}
	#header .menu_bx .dep1:last-child {padding-top: 0;}
	#header .menu_bx .dep1 > a {font-family: 'Montserrat', sans-serif; font-size: 16px; color: #666666; font-weight: 700; letter-spacing: 0.05em; word-break: keep-all; line-height: 40px; display: block; position: relative; overflow: hidden; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; transition-delay:0.2s;}
	#header .menu_bx .dep1 > a::after{content: ''; position: absolute; height: 100%; width: 100%; top: 0; right: 0; background: #fff; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); z-index: 2;}
	#header .menu_bx .dep1 > a:hover {color: #fff;}
	#header .menu_bx .dep1 > a:hover::after{-webkit-transform: translate3d(-38px,0,0) !important;transform: translate3d(-38px,0,0) !important;}
	#header .menu_bx .dep1.on > a, #main #header .menu_bx .dep1.dep00 > a {color: #fff;}
	#header .menu_bx .dep1.on > a::after, #main #header .menu_bx .dep1.dep00 > a::after {-webkit-transform: translate3d(-38px,0,0) !important;transform: translate3d(-38px,0,0) !important;}
	#header .menu_bx .dep1.on > a span, #main #header .menu_bx .dep1.dep00 > a span {position: relative; z-index: 1;}
	#header .menu_bx .sns_btn {position: absolute; right: 0; top: -40px;}
	#header .menu_bx .sns_btn a {position: absolute; right: 6px; bottom: 56px; width: 27px; height: 27px; font-size: 0; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;}
	#header .menu_bx .instagram {background: url(../images/icon/instagram1.png) no-repeat center;}
	#header .menu_bx .instagram:hover {background: url(../images/icon/instagram2.png) no-repeat center;}
	#sub #header .menu_bx .sns_btn {display: none!important;}
	
	
	/* footer */
	#footer .instagram {-webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;}
	/*#footer .instagram:hover {background: url(../images/icon/instagram2.png) no-repeat center;}*/
	
	
	
	
	/* s_visual */
	#s_visual .tab_box .dep2_wrap {font-size: 0px; margin-top: 72px;}
	#s_visual .tab_box .dep2_wrap > li {display: inline-block; margin-right: 42px;}
	#s_visual .tab_box .dep2_wrap > li:last-child {margin-right: 0;}
	#s_visual .tab_box .dep2_wrap > li > a {display: block; line-height: 43px; position: relative; font-size: 20px; color: #999999; font-weight: 700; word-break: keep-all; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
	#s_visual .tab_box .dep2_wrap > li > a::before {content: ''; width: 0%; height: 2px; background-color: #fff; position: absolute; bottom: 0; left: 0;}
	#s_visual .tab_box .dep2_wrap > li > a:hover {color: #fff;}
	#s_visual .tab_box .dep2_wrap > li.on > a {color: #fff;}
	#s_visual .tab_box .dep2_wrap > li.on > a::before {width: 100%;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){	
	.pc_show{ display:none !important;}
	.pc_i_show{ display:none !important;}
	.m_show{ display:block !important;}
	.m_i_show{ display:inline-block !important;}

	
	/* header */
	#header {position: fixed; height: 70px; background-color: #000000; overflow: hidden;}
	#header .logo {width: 156px; height: 23px; background-size: 156px 23px!important; top: 24px; z-index: 2; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;}
	#header .logo.on {background: url(../images/common/logo_on.png) no-repeat center;}
	#header .menu_btn {width: 20px; height: 20px; position: absolute; top: 25px; right: 0; cursor: pointer; z-index: 2;}
	#header .menu_btn span {width: 100%; height: 2px; background-color: #ffffff; position: absolute; left: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
	#header .menu_btn.on span {background-color: #000000;}
	#header .menu_btn span:nth-child(1) {top: 0;}
	#header .menu_btn.on span:nth-child(1) {top: 50%; margin-top: -1px; transform: rotate(135deg);}
	#header .menu_btn span:nth-child(2) {top: 9px;}
	#header .menu_btn.on span:nth-child(2) {opacity: 0;}
	#header .menu_btn span:nth-child(3) {bottom: 0;}
	#header .menu_btn.on span:nth-child(3) {bottom: auto; top: 50%; margin-top: -1px; transform: rotate(-135deg);}
	
	#header .menu_bx {position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; background-color: #fff; box-sizing: border-box; display: none;}
	#header .menu_bx .menu_w {position: fixed; width: 100%; height: calc(100% - 180px); top: 70px; left: 0; box-sizing: border-box; padding: 0 20px; overflow-y: auto; text-align: center; padding: 92px 0 40px; transform: translateZ(0)!important; opacity: 1!important;}
	#header .menu_bx .dep1 {margin-bottom: 38px;}
	#header .menu_bx .dep1:last-child {margin-bottom: 0;}
	#header .menu_bx .dep1 > a {font-family: 'Montserrat', sans-serif; font-size: 25px; color: #000000; font-weight: 700; display: block;}
	#header .menu_bx .dep1 > a span {display: inline-block; line-height: 32px; position: relative;}
	#header .menu_bx .dep1.on > a span::before, #main .menu_bx .dep1.dep00 > a span::before {content: ''; width: 100%; height: 15px; background-color: #eeeeee; position: absolute; left: 0; bottom: 0; z-index: -1;}
	#header .menu_bx .sns_btn {height: auto!important; position: absolute; bottom: 67px; width: 100%; left: 0; font-size: 0; text-align: center; transform: translateZ(0)!important; opacity: 1!important;}
	#header .menu_bx .sns_btn a {width: 20px; height: 20px; display: inline-block;}
	#header .menu_bx .sns_btn a.instagram {background: url(../images/icon/instagram3.png) no-repeat center; background-size: 20px;}
	#header .menu_bx .btm_txt {position: absolute; bottom: 27px; left: 0; width: 100%; text-align: center; font-size: 10px; color: #cccccc; word-break: break-all; font-family: 'Montserrat', sans-serif; text-transform: uppercase;}
	


	/* footer */
	#footer {padding: 40px 20px 25px;}
	#footer img {max-width: 85px;}
	#footer p {margin-top: 13px; font-size: 10px;}
	#footer .instagram {display: none!important;}
	#footer .top_btn {display: none!important;}
	#footer .info {margin-top: 25px; max-width: 570px;}
	#footer .info li {font-size: 11px; line-height: 20px; margin: 0 10px;}
	
	
	
	
	/* s_visual */
	#s_visual {padding-top: 70px;}
	#s_visual .sv_inner {padding: 44px 0 30px;}
	#s_visual .ttl_bx strong {font-size: 25px;}
	#s_visual .tab_box .dep2_wrap {font-size: 0; margin-top: 38px;}
	#s_visual .tab_box .dep2_wrap > li {display: inline-block; margin-right: 30px;}
	#s_visual .tab_box .dep2_wrap > li:last-child {margin-right: 0;}
	#s_visual .tab_box .dep2_wrap > li > a {font-size: 15px; color: #999999; font-weight: 700; display: block; line-height: 26px; position: relative;}
	#s_visual .tab_box .dep2_wrap > li > a::before {content: ''; width: 0%; height: 1px; background-color: #fff; position: absolute; left: 0; bottom: 0;}
	#s_visual .tab_box .dep2_wrap > li.on > a {color: #fff;}
	#s_visual .tab_box .dep2_wrap > li.on > a::before {width: 100%;}
	
	
	
	/* 팝업 */
	.pop_bx .pop_c {padding: 50px 0;}
	.pop_bx .close_btn_w {position: relative; width: 100%; right: auto; top: auto; margin-bottom: 15px;}
	.pop_bx .close_btn_w span {width: 20px; height: 20px; background-size: 20px 20px;}
	
	#privacy_pop .privacy_bx {padding: 23px 20px 20px;}
	#privacy_pop .privacy_bx .ttl {font-size: 22px; margin-bottom: 15px;}
	#privacy_pop .privacy_bx .txt_bx {padding: 5px 15px 20px; height: 180px;}
}

/* 모바일 */
@media all and (max-width:768px){
	.pc_show2 {display: none!important;}
	.m_show2 {display: block!important;}
	
	
	/* footer */
	#footer .info {max-width: 250px;}
	#footer .info li {width: 100%; margin: 0;}
}