@charset "UTF-8";

body{position:relative; background:#f0f2f5; overflow-x:hidden;}
body:after{content:""; display:block; clear:both;}

/* header */
header{float:left; position:absolute; top:0; left:0; width:15%; height:100%; background:#053e4e; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header a.logo{position:relative; display:block; width:100%; height:10rem;}
header a.logo img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:block; width:83%; height:auto;}
header a.logo img.m-logo{display:none;}
header nav{width:100%; height:auto;}
header nav > ul{padding:0 1rem;}
header nav > ul > li{display:block; margin-bottom:1rem;}
header nav > ul > li > div{position:relative; width:100%; height:3.5rem; line-height:3.5rem; padding:0 1.5rem; border:1px solid rgba(255, 255, 255, 0.8); border-radius:0.5rem; color:#fff; font-size:1.25rem; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header nav > ul > li > div.link{cursor:pointer;}
header nav > ul > li > div.link:after{content:""; position:absolute; top:50%; right:1.5rem; transform:translateY(-50%) rotate(-90deg); display:inline-block; width:1rem; height:1rem; background:url("../img/arrow_wh.svg") right center / 100% auto no-repeat; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header nav > ul > li > div.one a{display:block; color:#fff;}
header nav > ul > li > div:hover{background:rgba(255, 255, 255, 0.2);}
header nav > ul > li > div.one.active,
header nav > ul > li.open div.link{background:#fff; border-color:#fff; box-shadow:0 8px 30px rgba(0, 0, 0, 0.2); color:#053e4e; font-family:"NotoKr_B";}
header nav > ul > li > div.one.active a{color:#053e4e; font-family:"NotoKr_B";}
header nav > ul > li.open div.link:after{transform:translateY(-50%) rotate(0); background-image:url("../img/arrow_bk.svg");}
header nav > ul > li.default ul.submenu{display:block;}
header nav > ul > li ul.submenu{display:none; width:100%; height:auto; padding:1rem 1.5rem;}
header nav > ul > li ul.submenu li{margin-bottom:0.5rem;}
header nav > ul > li ul.submenu li a{position:relative; display:block; padding-left:1rem; color:#fff; font-size:1.125rem;}
header nav > ul > li ul.submenu li a:before{content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); display:inline-block; width:6px; height:1px; background:#fff;}
header nav > ul > li ul.submenu li.active a{font-weight:bold; text-decoration:underline;}
header.close{left:-15%;}
header a.h-btn{display:block; position:absolute; top:0; right:-3.5rem; width:3.5rem; height:3.5rem; background:#053e4e; border-top-right-radius:0.8rem; border-bottom-right-radius:0.8rem; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header a.h-btn span.line{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:inline-block; width:45%; height:0; border-radius:5px; background:#fff; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header a.h-btn span.line:before,
header a.h-btn span.line:after{content:""; position:absolute; top:50%; left:50%; display:inline-block; width:100%; height:3px; border-radius:5px; background:#fff; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header a.h-btn span.line:before{transform:translate(-50%, -50%) rotate(45deg);}
header a.h-btn span.line:after{transform:translate(-50%, -50%) rotate(-45deg);}
header a.h-btn.close{box-shadow:2px 2px 20px rgba(0, 0, 0, 0.5);}
header a.h-btn.close span.line{height:3px;}
header a.h-btn.close span.line:before{top:-9px; transform:translateX(-50%) rotate(0);}
header a.h-btn.close span.line:after{top:9px; transform:translateX(-50%) rotate(0);}

/* contents */
div.page-wrap{float:right; width:85%; height:auto; padding:3% 3% 0; background:#f0f2f5; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
div.page-wrap > div.top{width:100%; height:auto; padding-bottom:1rem; margin-bottom:2rem; border-bottom:1px solid #d0d0d0;}
div.page-wrap > div.top a.top-link{display:inline-block; width:auto; height:2.5rem; line-height:2.5rem; padding:0 1.25rem; border:1px solid #333; border-radius:1.5rem; background:#fff; font-size:1rem; font-family:"Montserrat_M";}
div.page-wrap > div.top div.left{float:left;}
div.page-wrap > div.top div.left a.top-link.home:before{content:""; display:inline-block; width:1rem; height:1rem; transform:translateY(2px); margin-right:0.3rem; background:url("../img/top_home.svg") center / cover no-repeat;}
div.page-wrap > div.top div.right{float:right;}
div.page-wrap > div.top div.right ul{display:inline-block;}
div.page-wrap > div.top div.right ul li{display:inline-block; font-size:1.125rem;}
div.page-wrap > div.top div.right ul.r01 li.user span.name{display:inline-block; font-family:"NotoKr_B";}
div.page-wrap > div.top div.right ul.r01 li.user span.name:before{content:""; display:inline-block; width:1.125rem; height:1.125rem; margin-right:0.5rem; transform:translateY(2px); background:url("../img/top_user.svg") center / cover no-repeat;}
div.page-wrap.close{width:100%;}

/* footer */
div.copy{width:100%; height:auto; padding:3rem 0 1.5rem; text-align:center; color:#aaa; font-size:0.8rem; font-family:"Montserrat_R";}
a.btn-top{position:fixed; bottom:-5rem; right:1rem; display:block; width:5rem; height:5rem; line-height:5rem; border-radius:50%; background:#333; box-shadow:0 10px 30px rgba(0, 0, 0, 0.5); color:#fff; font-family:"Montserrat_M"; text-align:center; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
a.btn-top.on{bottom:1rem; z-index:99;}


@media screen and (max-width:1600px){}

@media screen and (max-width:1440px){
	header nav > ul > li > div{padding:0 1rem;}
	header nav > ul > li > div.link:after{right:1rem;}
	header nav > ul > li ul.submenu{padding:1rem;}
}

@media screen and (max-width:1366px){}

@media screen and (max-width:1280px){
	header{width:20%;}
	header a.h-btn{right:-3rem; width:3rem; height:3rem;}
	header.close{left:-20%;}

	div.page-wrap{width:80%;}
}

@media screen and (max-width:1200px){}

@media screen and (max-width:1024px){
	html{font-size:15px;}
	
	header{position:fixed; width:100%; height:5rem; box-shadow:0 5px 30px rgba(0, 0, 0, 0.4); z-index:100;}
	header nav{display:none;}
	header a.logo{width:15rem; height:100%; margin-left:3%;}
	header a.logo img{width:100%;}
	header a.logo img.p-logo{display:none;}
	header a.logo img.m-logo{display:block;}
	header a.h-btn{right:0; width:5rem; height:5rem;}
	header a.h-btn.close{box-shadow:none;}
	header.close{left:0;}
	header.close:before{content:""; position:fixed; top:5rem; left:0; display:block; width:100%; height:100vh; background:rgba(0, 0, 0, 0.5); z-index:-1;}
	header nav{position:absolute; top:5rem; left:0; background:#fff; padding:2rem;}
	header.close nav{display:block; height:100vh; overflow-y:auto;}
	header.close nav > ul > li > div{border:1px solid #ccc; color:#333;}
	header.close nav > ul > li > div.link:after{background-image:url("../img/arrow_bk.svg");}
	header.close nav > ul > li > div.one a{color:#333;}
	header.close nav > ul > li ul.submenu li a{color:#333;}
	header.close nav > ul > li ul.submenu li a:before{background:#333;}
	header.close nav > ul > li > div.one.active,
	header.close nav > ul > li.open div.link{border-color:#333; color:#333; box-shadow:0 3px 30px rgb(0 0 0 / 20%);}
	
	div.page-wrap{float:none; width:100%; margin-top:5rem;}
	div.page-wrap > div.top{display:none;}
	div.page-wrap > div.top div.right ul{width:100%;}
	div.page-wrap > div.top div.right ul.r01{position:absolute; top:1rem; left:50%; transform:translateX(-50%);}
	
}

@media screen and (max-width:768px){}

@media screen and (max-width:640px){
	div.page-wrap{padding:5% 5% 0;}
}

@media screen and (max-width:480px){
	html{font-size:14px;}

	header{height:4.5rem;}
	header a.h-btn{width:4.5rem; height:4.5rem;}
	header.close nav{top:4.5rem; padding:2rem 1rem;}

	div.page-wrap{margin-top:4.5rem;}
	div.page-wrap > div.top.on{top:4.5rem; height:10rem;}
	div.page-wrap > div.top div.right ul.r01 li{width:100%;}
	div.page-wrap > div.top div.right ul.r01 li.user:after{display:none;}
	div.page-wrap > div.top div.right ul.r01 li.session{margin-top:0.5rem;}
	div.page-wrap > div.top div.right ul.r01 li.session > a{width:3rem; font-size:1rem;}
	div.page-wrap > div.top.on div.left a,
	div.page-wrap > div.top div.right ul.r02 li{margin-top:5rem;}

	div.copy{padding:1.5rem 0;}

	a.btn-top{width:4rem; height:4rem; line-height:4rem;}
}
	

@media screen and (max-width:375px){

	div.page-wrap > div.top a.top-link{padding:0 1rem; font-size:0.95rem;}
	
}

@media screen and (max-width:320px){
	html{font-size:13px;}
	div.page-wrap > div.top a.top-link{font-size:0.9rem;}
}