@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	line-height:1.2;
}
body {font-family: 'Montserrat', sans-serif; font-size:16px; color:#202022; overflow-x: hidden;}
address { font-style:normal;}
a { display:block;}
html, body { height:100%;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input, select {
    vertical-align:initial;
}

img { 
	border:none;
	vertical-align:top;
    max-width: 100%;
}

.clearfix:after { 
	content:"";
	display:block;
	clear:both;
}
a:link, a:visited { color:#202022; text-decoration:none;}
a:active, a:hover { color:#202022; text-decoration:none;}

.site-wrap { height:100%;}

/*hidden*/
.hidden { position:absolute; left:-9999px; font-size:1px; width:1px; height:1px; line-height:0; }

/*스킵메뉴*/
#skip_menu { width:300px; position:absolute; z-index:9999;}
#skip_menu a { position:absolute; top:-100px;}
#skip_menu a:hover,
#skip_menu a:active,
#skip_menu a:focus { position:absolute; top:0; width:300px; height:20px; display:block; background:#333; color:#fff; text-align:center; font-size:16px; font-weight:bold;}

:root {
    --innerWidth: 1680px;
    --subWidth:1400px;
}

.btn-text a {position: relative; padding: 12px 28px; border-radius: 30px; background: rgba(255,255,255,0.2); color:#fff; font-weight: bold; display: inline; padding-right: 60px; font-size: 1.125em; transition: 0.15s all;}
.btn-text a::after {position: absolute; content: '→'; right: 24px; top: 50%; transform: translateY(-50%); font-family: 'pretendard'; transition: 0.15s all;}
.btn-text a:hover {background: #000; transition: 0.15s all;}
.btn-point {position: absolute; bottom: 0px; right: 0; width: 0px; height: 0px;transition: 0.15s all;}
.btn-point span:nth-child(1) {display: block;background:url(../img/main/point-hover.png) no-repeat; width: 0px; height: 0px; position: absolute; right: 0; bottom: 0; border-radius: 50% 0 0 0; transition: 0.15s all;}
.btn-point span:nth-child(2) {display: block;position: absolute; width: 0px; height: 0px; font-family: 'pretendard'; font-size: 28px; background: #000; border-radius: 100%; line-height: 60px; text-align: center; color: #fff; right: 0;bottom: 0; transition: 0.15s all;}

#header {background-color: #fff;  position: fixed; left: 0; top: 0; z-index: 99; width: -webkit-fill-available;}
#header .header_wrap { display: flex; align-items: center; justify-content: space-between; max-width:var(--innerWidth); margin: 0 auto; height: 68px;}
#header .header_wrap::after {display: none;}
#header .header_wrap #m_gnb {display: none;}

#header .header_wrap .logo a {display: flex; align-items: center; justify-content: center;}
#header .header_wrap .gnb {display: flex;}
#header .header_wrap .gnb .menuDepth1 {padding: 0 2em; position: relative;}
#header .header_wrap .gnb .menuDepth1 > a {font-weight: bold; padding: 1.5em 0; position: relative;}
#header .header_wrap .gnb .menuDepth1 > a::after {position: absolute; left: 0; bottom: 0; height: 5px; background: #666; content: ''; width: 0; transition: 0.15s all;}
#header .header_wrap .gnb .menuDepth1:hover > a::after {width: 100%; transition: 0.15s all;}
#header .header_wrap .gnb .menuDepth1:hover > a {color: #666; transition: 0.15s all;}
#header .header_wrap .gnb .menuDepth1 .ulDepth2 {display: none;position: absolute; left: 50%; top: 68px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.5); padding: 20px 0; transform: translateX(-50%); width:300px}
#header .header_wrap .gnb .menuDepth1 .ulDepth2 .menuDepth2 {text-align: center;}
#header .header_wrap .gnb .menuDepth1 .ulDepth2 .menuDepth2+.menuDepth2 {margin-top: 4px;}
#header .header_wrap .gnb .menuDepth1 .ulDepth2 .menuDepth2 > a{color: #fff; transition: 0.15s all; padding: 6px; box-sizing: border-box;}
#header .header_wrap .gnb .menuDepth1 .ulDepth2 .menuDepth2 > a:hover {background: #666; font-weight: bold; transition: 0.15s all;}
#header .header_wrap .m-gnb-wrap {display: none;}

#footer {max-width: var(--innerWidth);margin: 0 auto; padding: 3.5em 0;}
#footer .footer_bot {display: flex; justify-content: space-between;}
#footer .footer_info {margin-top: 2rem; color: #444;}
#footer .footer_info span {line-height: 1.8;}
#footer .footer_info span b{margin-right: 4px;}
#footer .footer_info span+span {margin-right: 4px;}
#footer .footer_bot .footer-menu li+li{margin-top: 4px;}
#footer .footer_bot::after {display: none;}
#footer .footer_bot .footer-menu li a {font-weight: bold; text-align: right;}


.top-btn {position: fixed; right: 20px; bottom: 20px; background-color: #000; border-radius: 100%; width: 60px; height: 60px; display: none;}
.top-btn a {width: 100%; height: 100%; line-height: 60px; text-align: center; color: #fff; font-family: 'pretendard'; font-size: 1.25em;}

@media (max-width:1680px) {
    :root {
        --innerWidth: 96%;
    }
    
}

@media (max-width:1024px) {
    body {font-size: 14px;}
    #header .header_wrap > .gnb {display: none;}
    #header .header_wrap .m-gnb-wrap {position: absolute; top: 68px; background: #fff; left: 0; width: 100%; flex-direction: column; display: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.2) 0px 10px 10px -5px;}
    #header .header_wrap .m-gnb-wrap .gnb {flex-direction: column;}
    #header .header_wrap .m-gnb-wrap .gnb .menuDepth1+.menuDepth1 {border-top: 1px solid #ddd;}
    #header .header_wrap .m-gnb-wrap .menuDepth1 .ulDepth2 {position: relative; display: block; left: 0; top: 0; transform: translate(0); width: 100%; border: none; margin-bottom: 1.5em;}
    #header .header_wrap #m_gnb {display: block; width: 30px; height: 22px; margin: 20px 0;}
    #header .header_wrap #m_gnb a {position: relative; width: 100%; height: 100%;}
    #header .header_wrap #m_gnb a span {position: absolute; left: 0; width: 100%; height: 2px; background: #333; transition: 0.15s}
    #header .header_wrap #m_gnb a span:nth-child(1) {top: 0;}
    #header .header_wrap #m_gnb a span:nth-child(2) {top: 50%; transform: translateY(-50%); opacity: 1;}
    #header .header_wrap #m_gnb a span:nth-child(3) {bottom: 0;}
    #header .header_wrap #m_gnb a.on span:nth-child(1) {transform: rotate(45deg) translateY(-50%); top:calc(50% + 1px); transition: 0.15s}
    #header .header_wrap #m_gnb a.on span:nth-child(2) {opacity: 0; transition: 0.15s}
    #header .header_wrap #m_gnb a.on span:nth-child(3) {transform: rotate(135deg) translateY(-50%); top:calc(50% - 1px); transition: 0.15s}


     #footer .footer_bot {flex-direction: column; gap: 2em;}
     #footer .footer_bot .footer-menu li a {text-align: left;}
    .top-btn {width: 40px; height: 40px;}
    .top-btn a {line-height: 40px;}
}

@media (max-width:768px) {
    #footer {padding: 2.5em 0;}
    
    #footer .footer_info {display: flex; flex-wrap: wrap; white-space: normal;}
    #footer .footer_info br {display: none;}
    #footer .footer_info span:not(.blank){width: 50%; padding: 0 10px; box-sizing: border-box; display: flex;flex-direction: column;}
    #footer .footer_info span.blank {display: none;}
    #footer .footer_info span+span {margin-right: 0;}
    #footer .copyright {margin-top: 20px;}
    
}