@charset "utf-8";
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

/* Common */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select{margin:0;padding:0;-webkit-text-size-adjust: none}
body, html{width:100%;height:100%;}
body, input, textarea, select, button, table{font-family: 'NanumSquare', sans-serif , 'Open Sans';font-size: 12px;-webkit-font-smoothing: antialiased;}
img, fieldset, button {border:0} ul, ol, li{list-style: none} a {text-decoration: none}
img{vertical-align:top}
body{;overflow-x:hidden;overflow-y:auto; -ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */}
body::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
video{outline:none;border:0}
.container{width:100%;}
.red{color:#C94642}
.maple{font-family: 'MaplestoryOTF';font-weight:300}

/* header */
.admin_menu{position:fixed;top:50%;left:0;z-index:99999;background:#fff;padding:10px;border:1px solid #eee;box-shadow:0px 0px 5px #eee;transform:translateY(-50%);}
.admin_menu a{color:#272727;display:block;text-align:center;padding:10px}
.admin_menu.on .admin_toggle{border-bottom:1px solid #999;margin-bottom:10px}
.admin_menu .hidden{display:none}
.admin_menu.on .hidden{display:block}
.admin_menu.on a:hover{color:#1d5ca9}

.header{width:100%;margin:0 auto;position:fixed;top:0;left:0;z-index:9999;transition:0.5s;}
.header.main{background:rgba(255,255,255,0);}
.header .header_fix{width:calc(100% - 100px);padding:0 50px;margin:0 auto;max-width:1680px;overflow:hidden;}
.header .logo{float:left;width:120px;height:100px;margin:0px;transition:0.5s;background:url('../img/logo.png') no-repeat center;background-size:cover;transition:0.5s}
.header .logo a{display:block;width:100%;height:100%}
.header .header_center{overflow:hidden;float:right;width:calc(100% - 240px);}
.header .header_center .quick_gnb{display:none}
.header .gnb{float:right;position:relative;}
.header .gnb ul{overflow:hidden;float:right;}
.header .gnb ul li{float:left;padding:0 0px;text-align:center;width:200px;}
.header .gnb ul li a{color:#222;font-size:17px;line-height:100px;position:relative;overflow:hidden;transition:0.5s;margin:0 auto}
.header .gnb ul li a.on:after{content:'';width:100%;height:2px;background:#e71419;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

.header .quick_gnb{float:right;position:relative;margin-right:40px;display:none}
.header .quick_gnb a{color:#fff;font-size:21px;line-height:96px;padding-right:20px;position:relative;overflow:hidden;display:block;transition:0.5s}
.header .quick_gnb a span{display:block;width:24px;height:3px;background:#fff;position:absolute;transition:0.5s}
.header .quick_gnb a .m_btn1{top:40%;right:0%}
.header .quick_gnb a .m_btn2{top:50%;right:0%;width:18px}
.header .quick_gnb a .m_btn3{top:60%;right:0}
.header .quick_gnb a:hover .m_btn1{
-moz-animation:scale_change 1s linear infinite;
-ms-animation:scale_change 1s linear infinite;
-o-animation:scale_change 1s linear infinite;
-webkit-animation:scale_change 1s linear infinite;
animation:scale_change 1s linear infinite;	
}
.header .quick_gnb a:hover .m_btn2{
-moz-animation:scale_change2 1s linear infinite;
-ms-animation:scale_change2 1s linear infinite;
-o-animation:scale_change2 1s linear infinite;
-webkit-animation:scale_change2 1s linear infinite;
animation:scale_change2 1s linear infinite;	
}
.header .quick_gnb a:hover .m_btn3{
-moz-animation:scale_change 1s linear infinite;
-ms-animation:scale_change 1s linear infinite;
-o-animation:scale_change 1s linear infinite;
-webkit-animation:scale_change 1s linear infinite;
animation:scale_change 1s linear infinite;	
}

.header.nav-up{background:rgba(255,255,255,0.95);box-shadow:0 0 2px #ddd;opacity:0}
.header.nav-up .logo{background:url('../img/logo.png') no-repeat center;background-size:cover;}
.header.nav-up .gnb ul li a{color:#262626;}
.header.nav-up .quick_gnb a{color:#262626;}
.header.nav-up .quick_gnb a span{background:#262626}
.header.nav-up:hover{opacity:1}
.header.nav-up.on{opacity:1}

.detail_menu{position:fixed;width:600px;height:100vh;min-height:1000px;top:0;right:-600px;z-index:99991;background:#fff;transition:0.5s;box-shadow:0 0 2px #ddd}
.detail_menu .dm_close{position:absolute;top:80px;right:80px;display:block;}
.detail_menu .dm_close span{display:block;width:24px;height:3px;background:#262626;position:absolute;transition:0.5s}
.detail_menu .dm_close .m_btn1{transform:rotate(45deg);top:50%}
.detail_menu .dm_close .m_btn2{transform:rotate(-45deg);top:50%}
.detail_menu.on{right:0}
.detail_menu .gnb_sub{padding:100px 30px}
.detail_menu .gnb_sub .depth1 li{overflow:hidden;padding:12px 24px}
.detail_menu .gnb_sub .depth1 li .depth1_a{font-size:21px;color:#262626;line-height:30px}
.detail_menu .gnb_sub .depth1 li.on .depth1_a{font-weight:700}
.detail_menu .gnb_sub .depth1 li.on .m_depth1{display:block}
.detail_menu .gnb_sub .depth1 li .m_depth1{display:none}
.detail_menu .gnb_sub .depth1 li .m_depth1 a{font-size:17px;color:#aaa;line-height:30px}
.detail_menu .gnb_sub .depth1 li .m_depth1 a.on{font-weight:700;color:#262626}



/* body */
.page_top{margin-top:100px;width:100%;height:400px;position:relative;}
.page_top .textbox{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;text-align:center;display:block;margin-top:20px;}
.page_top .textbox h3{font-size:64px;}
.page_top .textbox p{font-size:24px;}


.body{min-height:100vh;transition:0.5s;overflow:hidden;position:relative}
.body .content{width:calc(100% - 20px);max-width:1440px;margin:0 auto;padding:100px 10px 0;min-height:1000px;overflow:hidden}



.btn_top{position:fixed;bottom:95px;right:35px;width:40px;height:40px;font-size:20px;display:none;background:#262626;color:#fff;border-radius:10px;outline:none;border:1px solid #fff}
.btn_top:hover{background:#c5b8a8;color:#444}



/* footer */
.footer{overflow:hidden;background:#fafafa;border-top:1px solid #eee}
.footer .ft_info{text-align:center;}
.footer .ft_info ul{padding:20px 0}
.footer .ft_info ul li{font-size:14px;line-height:24px}
.footer .ft_info ul li img{margin-left:10px;}
.footer .ft_info ul span{font-size:12px;}




/* Animate */
@keyframes scale_change {
  from {width:24px;}
	to {width:8px;}
}
@-webkit-keyframes scale_change {
  from {width:24px;}
	to {width:8px;}
}
@-moz-keyframes scale_change {    
	from {width:24px;}
	to {width:8px;}
}
@-webkit-keyframes scale_change {
	from {width:24px;}
	to {width:8px;}
}

@keyframes scale_change2 {
  from {width:8px;}
	to {width:24px;}
}
@-webkit-keyframes scale_change2 {
  from {width:8px;}
	to {width:24px;}
}
@-moz-keyframes scale_change2 {    
	from {width:8px;}
	to {width:24px;}
}
@-webkit-keyframes scale_change2 {
	from {width:8px;}
	to {width:24px;}
}


/* Responsive */
@media all and (max-width:1440px){
	.admin_menu{display:none}

	.header .header_fix{width:calc(100% - 80px);padding:0 40px;}
	.header .logo{height:80px;width:80px;}
	.header .gnb ul li{width:180px;}
	.header .gnb ul li a{font-size:17px;line-height:80px;}


	.page_top{height:360px;margin-top:80px;}
	.page_top .textbox h3{font-size:54px;}
	.page_top .textbox p{font-size:21px;}

}

@media all and (max-width:1024px){
	.header .header_fix{width:calc(100% - 40px);padding:0 20px;}
	.header .gnb{display:none}
	.header .header_center .quick_gnb{display:block}
	.header .quick_gnb{display:block;margin-right:10px}
	.header .quick_gnb a{line-height:76px}
	.header.nav-up{opacity:1}
	.detail_menu{width:500px;}


	.page_top{height:320px;margin-top:0;}
	.page_top .textbox h3{font-size:42px;}
	.page_top .textbox p{font-size:19px;}

}

@media all and (max-width:768px){
	.header .header_fix{width:calc(100% - 20px);padding:0 10px;}
	.header .logo{height:60px;width:60px;margin:10px 0;}
	.detail_menu{width:400px;}
	.detail_menu .gnb_sub .depth1 li .depth1_a{font-size:19px}

	.page_top{height:320px;}
	.page_top .textbox h3{font-size:42px;}
	.page_top .textbox p{font-size:19px;}
}


@media all and (max-width:540px){
	.detail_menu{width:320px;}
	.detail_menu .gnb_sub .depth1 li .depth1_a{font-size:18px}

}

@media all and (max-width: 480px){

	.page_top{height:270px;}
	.page_top .textbox h3{font-size:32px;}
	.page_top .textbox p{font-size:17px;}

}

@media all and (max-width:425px){
	.detail_menu{width:300px;}
	.detail_menu .gnb_sub .depth1 li .depth1_a{font-size:17px}
}