@charset "utf-8";

@font-face {
    font-family: 'Elice Digital Baeum';
    src: url('font/EliceDigitalBaeum_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Elice Digital Baeum';
    src: url('font/EliceDigitalBaeum_Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'nexon_lv2';
    src: url('font/nexon_lv2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nexon_lv2M';
    src: url('font/nexon_lv2_Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root{--color:#0F52F0; --color_sub01:#0056A4; --color_sub02:#1CAEE9; --color01:#7027E5; --color02:#3A37E2; --color03:#207AEE; --color04:#0CA3C3; --color05:#0DAA5F; --wrapMx:1380px; --wrap:92%}
body{font-size: 16px; letter-spacing: -0.5px; line-height: 1.5; word-break:keep-all; word-wrap:break-word; overflow-wrap:anywhere; overflow-x:hidden; overflow-wrap:break-word}
body, select, textarea, input, button {font-family:'nexon_lv2'; color: #333;  font-smooth:always; -webkit-font-smoothing: antialiased; }
a:link, a:visited{color:inherit}
.sfont{font-size: .9em;}
.wrap{width: var(--wrap); max-width: var(--wrapMx); margin: auto;}

#lnb{display: flex; align-items: center; justify-content: space-between; padding:clamp(15px, 1vw, 30px) 0px; }
h1{width:180px; font-size: 0px; }
#main h1{margin-left: 2.2rem;}
:where(.menu li, #tab li) a[target=_blank]{position: relative;}
:where(.menu li, #tab li) a[target=_blank]:after {display: inline-block; content: ''; position: relative; top: -.5rem; margin-left: .4rem; width: 6px; height: 6px;background: url(/seochang/img/inc/ic_blank.png) no-repeat right center / 200%}
:where(.menu li) a[target=_blank]:after{top: -.4rem; margin-left: .2rem; background-position-x:left; transform:scale(.9)}

footer{background: #222}
footer *, footer a:link, footer a:visited{color: #aaa; text-shadow:0px 0px 2px rgba(0,0,0,.5)}
footer .wrap{display: flex; gap:5%; flex-wrap:wrap; justify-content: space-between; padding: 1.6em 0px;}
footer .foo.wrap{padding: 3.8em 0px;}
footer .fooL .foo_logo{margin-bottom: 1.1em; width:180px}
footer .fooL address{line-height: 1.6; font-size: .95em;}
footer .fooL .foo_tel{margin-top: .5rem;}
footer .fooL .foo_tel li{line-height: 140%; font-size: .9em; color: #888;}
footer .fooL .foo_tel li a{color: inherit; letter-spacing: 0px;}
footer .fooR{flex-grow:1; max-width: 800px;}
footer .fooR>ul{display: flex; justify-content: flex-end}
footer .fooR>ul>li:not(:last-child){flex-grow:1}
footer .fooR>ul>li>a{font-weight: bold;}
footer .fooR>ul>li .tit{display: none;}
footer .fooR>ul>li ul{margin-top: 1em;}
footer .fooR>ul>li ul li{margin:8px 0px; line-height: 100%;}
footer .fooR>ul>li ul a{color: #777; font-size: .9em}
footer .copy{border-top:1px solid rgba(255,255,255,.1); letter-spacing: 0px;}
footer .copy .copyright{font:.95em "Elice Digital Baeum", sans-serif; }
footer .copy ul{display: flex; gap: 2em; color: #fff}
footer .menu a:hover{color: #aaa;}
footer :where(.menu li) a[target=_blank]:after{opacity: .5;}

.dp_footer{display: none;}
footer .dp_footer{display: block;}
footer .dp_nofooter{display: none;}

.login>a {display:none;}

/***************************************************************************************************************************/


@media screen and (max-width:1400px){
	#main h1{margin-left: 0rem;}
}

@media screen and (max-width:1024px){
	footer .foo.wrap{padding:25px 15px; justify-content: center;}
	footer .fooL{display:flex; flex-direction:column; align-items: center; text-align: center; }
	footer .fooR{max-width: 100%; margin-top: 2em;}
}

@media all and (min-width:801px){
	nav{flex-grow:1; max-width: 620px;}
	nav>ul{display: flex; justify-content: space-between;}
	nav>ul>li{position: relative;}
	nav>ul>li>a{padding:20px 0px; ;font-size: 1.18em; font-weight: bold;}
	nav>ul>li>a:hover{color:var(--color_sub01); font-weight: 200; font-family:'nexon_lv2M'; font-weight: bold;}
	nav>ul .submenu{display: none; position: absolute; left: 50%; margin-left: -105px; top: calc(100% + 15px); width:210px; padding: 2em 2.5em; background:var(--color_sub01); border-radius:10px; z-index: 2; box-shadow:0px 1px 5px rgba(0,0,0,.8); word-break:keep-all}
	#main nav>ul .submenu{background:var(--color)}
	nav>ul .submenu .tit{display: none;}
	nav>ul .submenu ul>li{color: #fff;}
	nav>ul .submenu ul>li a{display: block; position: relative; left: 0px; padding: 5px 0px; transition:all ease .2s; font-size: .93rem;}
	nav>ul .submenu ul>li a:hover{left: -5px; font-family:'nexon_lv2M'; text-shadow:0px 0px 2px rgba(0,0,0,.3)}
}

@media screen and (max-width:800px){
	body{font-size: 14px; padding-top: .5em;}
	h1, nav .logo{width:40%; min-width: 140px; max-width: 180px;}
	h2 a{display: block; padding-top:20%; width: 40px; height: 40px; font-size: 0px;}
	h2 a:before{display: block; content: ''; top: 5px; margin-left: 15%; width: 70%; height: 3px; background: var(--color_sub01); box-shadow:0px 8px 0px var(--color), 0px 16px 0px  var(--color05)}
	nav {position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; padding-top: .5em; background: #fff; ; z-index: 990}
	nav .logo{margin: 10px 4%;}
	nav .menu{position: relative; border-top:3px solid var(--color_sub01); font-size: 15px; height: 100%; }
	nav .menu>li{border-bottom:1px solid #ddd}
	nav .menu>li>a{display: block; padding: 15px 20px; /* width: clamp(150px, 40%, 180px);  */font-weight: bold}
	nav .menu .submenu{display: none; position: absolute; top: 0px; left: clamp(150px, 40%, 180px); padding:0px 10px; width:calc(100% - clamp(150px, 40%, 180px)); height: 100%; background:var(--color) }
	nav .menu .submenu:before{display: block; opacity: .8;  content: ''; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background:url(/seochang/img/inc/bg.png) no-repeat right bottom / 300%; z-index:0}
	nav .menu .submenu .tit{padding: 1rem; font-family: "Elice Digital Baeum", sans-serif; font-size: 1.1em; font-weight: bold; border-bottom:1px solid rgba(0,0,0,.1); color: var(--color_sub02);;}
	nav .menu .submenu ul{position: relative; padding-top: 10px; ; z-index:1}
	nav .menu .submenu ul li a{display: block; padding: 7px 20px}
	nav .menu .submenu ul li.select a:before{content: '- ';}
	nav .menu>li.select{color: #fff; border-color:var(--color)}
	nav .menu>li.select>a{background:var(--color); text-shadow:0px 0px 2px rgba(0,0,0,.2)}
	nav .menu>li.select .submenu{display: block; }
	nav .closeMenu{position: absolute; right: 4%; top: 20px;}
	nav .closeMenu a{display: block; width: 40px; height:40px; font-size: 0px;}
	nav .closeMenu a:After,
	nav .closeMenu a:Before{display: block; content: ''; position: absolute; left: 50%; margin-left:-15px; top: 50%; width: 30px; height:1px; background:#666; transform:rotate(45deg)}
	nav .closeMenu a:Before{transform:rotate(-45deg)}
	footer .fooR{display: none;}
	footer .copy ul{gap:0px; flex-direction:column; text-align: right;}
}