@charset "utf-8";

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 300;
	src: url('../font/Pretendard-Light.eot');
	src: url('../font/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
		 url('../font/Pretendard-Light.woff2') format('woff2'),
		 url('../font/Pretendard-Light.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 400;
	src: url('../font/Pretendard-Regular.eot');
	src: url('../font/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
		 url('../font/Pretendard-Regular.woff2') format('woff2'),
		 url('../font/Pretendard-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 500;
	src: url('../font/Pretendard-Medium.eot');
	src: url('../font/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
		 url('../font/Pretendard-Medium.woff2') format('woff2'),
		 url('../font/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 600;
	src: url('../font/Pretendard-SemiBold.eot');
	src: url('../font/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
		 url('../font/Pretendard-SemiBold.woff2') format('woff2'),
		 url('../font/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 700;
	src: url('../font/Pretendard-Bold.eot');
	src: url('../font/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../font/Pretendard-Bold.woff2') format('woff2'),
		 url('../font/Pretendard-Bold.woff') format('woff');
}

/* Montserrat */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../font/Montserrat-Regular.eot');
  src: url('../font/Montserrat-Regular.eot?#iefix') format("embedded-opentype"),
	   url('../font/Montserrat-Regular.woff2') format("woff2"),
	   url('../font/Montserrat-Regular.woff') format("woff");
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../font/Montserrat-Medium.eot');
  src: url('../font/Montserrat-Medium.eot?#iefix') format("embedded-opentype"),
       url('../font/Montserrat-Medium.woff2') format("woff2"),
	   url('../font/Montserrat-Medium.woff') format("woff");
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../font/Montserrat-SemiBold.eot');
  src: url('../font/Montserrat-SemiBold.eot?#iefix') format("embedded-opentype"),
       url('../font/Montserrat-SemiBold.woff2') format("woff2"),
	   url('../font/Montserrat-SemiBold.woff') format("woff");
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../font/Montserrat-Bold.eot');
  src: url('../font/Montserrat-Bold.eot?#iefix') format("embedded-opentype"),
       url('../font/Montserrat-Bold.woff2') format("woff2"),
	   url('../font/Montserrat-Bold.woff') format("woff");
}

/*Reset*/
legend,caption,.blind{display: none;}
html{font-size:10px;}
body{margin: 0; padding: 0;}
div,p,h1,h2,h3,h4,h5,h6,ol,li,dl,dt,dd,ul,pre,form,fieldset,legend,input,textarea,button,select,table,th,td{margin:0;padding: 0;border:0;}
ul,ol,li,dl{list-style: none;}
img{border:0;vertical-align: top;}
address,caption,cite,code,dfn,em,var{font-style: normal;}
blockquote,q{quotes: none;}
blockquote:before,blockquote:after,q:after{content:""; content: none;}
form,fieldset{border:0;}
input,select,textarea,button{font-size:100%;vertical-align: middle;}
button{border:0;background-color: transparent;cursor:pointer;}
a{color:inherit; text-decoration:none;}
table{width:100%; *border-collapse:collapse; border-spacing:0; table-layout:fixed;}
strong,h1,h2,h3,h4,h5,h6{font-weight:700;}
img{max-width:100%;}
/* common */
body,th,td,input,select,textarea,button{color:#000; font-size:10px; line-height:1.5;  font-family:'Pretendard', sans-serif; font-weight:400; letter-spacing:-0.03em; word-break:keep-all;}

@-moz-document url-prefix(){
 body,th,td,input,select,textarea,button{font-weight:300} /* 모질라전용핵 */
 h1,h2,h3,h4,h5,h6{font-weight:300;}
}   

@media (hover: hover) and (pointer: fine){
a:hover,a:active,a:focus{text-decoration:none; }
}

article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary,main {display:block;}

.blind{display:none;}
.group:after{clear:both; content:""; visibility:hidden; display:block; height:0;}

.f_mont{font-family: 'Montserrat', sans-serif; }

/* skiptoContent */
#skiptoContent{position:fixed;top:0;left:0;width:100%;z-index:999}
#skiptoContent a{display:block;position:absolute;top:0;left:-9999px;width:100%;height:26px;background:#0a94b2;color:#fff;font-size:12px;line-height:26px;text-align:center}
#skiptoContent a:focus, #skiptoContent a:active{left:0%;text-decoration:none}
#skiptoContent a:hover{text-decoration:underline}

/* header */
header{height:100px; position:fixed; z-index:55; width:100%; background: rgb(34,34,34); background: linear-gradient(90deg, rgba(34,34,34,1) 0%, rgba(28,28,28,1) 10%, rgba(98,16,178,1) 100%); box-shadow:2px 5px 8px 1px rgba(0, 0, 0, 0.2);}
#headerWrap .inner{position:relative;}
header h1{position:absolute; top:0; z-index:66; left:0; height:100px;}
header h1 a{width:178px; height:100%; background:url(../../images/common/logo_test.png) no-repeat; background-position:center center; background-size:178px auto;font-size:0px; display:block;}
#headerWrap.on{border-bottom:1px #e5e5e5 solid; }

#headerWrap .gnb{text-align:right;}
#headerWrap .gnb > li{display:inline-block; vertical-align:top; position:relative; text-align:center;}
#headerWrap .gnb > li.active:after{display:block;}
#headerWrap .gnb > li.active:before{content:""; display:block; width:0; height:0; border-bottom:10px solid #fff; border-left:10px solid transparent; border-right:10px solid transparent; position:absolute; top:75px; left:50%; transform:translateX(-50%); z-index:50;}
#headerWrap .gnb > li h2{height:100px;  box-sizing:border-box;}
#headerWrap .gnb > li h2 a{display:inline-block; padding:0 3.5rem; height:100px; line-height:100px; font-family: 'Montserrat', sans-serif; font-size:2.1rem; font-weight:600; vertical-align:bottom; color:#fff; letter-spacing:0;}
#headerWrap .gnb > li.active h2 a{color:#ff75eb;}
#headerWrap .gnb li ul{background:#fff; display:none; position:absolute; top:85px; left:50%; transform:translateX(-50%); width:220px; padding:20px 0; text-align:center; box-sizing:border-box; box-shadow:0px 0px 10px rgba(0,0,0,0.2); }
#headerWrap .gnb li ul li{display:block; }
#headerWrap .gnb li ul li a{display:block; font-size:1.8rem; padding:0.5rem 1rem; font-weight:500;}

footer{background:#222; padding:6rem 0;}
footer .f_wrap{display:flex; align-items:center; justify-content: space-between;}
footer .logo_box img{opacity:0.5;}

footer .cont_box{padding-right:20rem;}
footer .cont_box ul.ft_list{font-size:0; margin-bottom:2rem;}
footer .cont_box ul.ft_list li{position:relative; display:inline-block; font-size:1.7rem; padding-left:1.7rem; margin-left:1.7rem; color:#fff;}
footer .cont_box ul.ft_list li:not(:first-child):before{content:""; display:block; width:1px; height:15px; background:rgba(255,255,255,0.3); position:absolute; top:6px; left:0;}
footer .cont_box ul.ft_list li:first-child{padding-left:0; margin-left:0;}
footer .cont_box .info_box p{color:rgba(255,255,255,0.3); font-size:1.6rem; margin-top:0.5rem;}
footer .cont_box .info_box p:first-child{margin-top:0;}
footer .cont_box .info_box p .bar{display:inline-block; width:1px; height:13px; background:rgba(255,255,255,0.3); margin:0 1rem;}

/*관련사이트*/
footer .site_box .family-site {position:relative; border:1px solid #ccc; margin-top:1.5rem;}
footer .site_box .family-site .btn-open-site{display:block; font-size:1.6rem; width:20rem; padding:1rem 1.5rem; box-sizing:border-box; text-align:left;  color:#fff;}
footer .site_box .family-site .btn-open-site:before{content: ""; position:absolute; top:50%; transform:translateY(-50%); right:2rem; display: block; width: 0; height: 0; border-bottom: 6px solid #fff; border-left: 6px solid transparent; border-right: 6px solid transparent; transition: 0.3s;}
footer .site_box .family-site .btn-open-site.on:before{transform: rotate(180deg);}
footer .site_box .site_list{display:none; position:absolute; bottom:4.6rem; left:-1px; width:100%; background:#fff; border:1px solid #ccc;}
footer .site_box .site_list ul{max-height:44.5rem; overflow:auto; border-top:1px dashed #ccc;}
footer .site_box .site_list ul:first-child{border-top:0; margin-top:0; padding-top:0;}
footer .site_box .site_list li a{display:block; padding:0.75rem 1.25rem 0.625rem; font-size:1.3rem; text-align:left; color:#000; border-top: 1px solid #e0e0e0; }
footer .site_box .site_list li:first-child a{border-top:0;}
footer .site_box .site_list li:hover a{text-decoration:underline;}
footer .site_box .site_list li a i{font-size:1.2rem; padding-left:0.3rem; color:#000; }
footer .site_box .link_btn a{display:inline-block;  width:20rem; background:#7c0de7; border-radius:5px; text-align:center; padding:1rem; box-sizing:border-box;}
footer .site_box .link_btn a img{height:33px;}



#m-menu{display:none;}


.inner{max-width:1300px; margin:0 auto;}
.inner_1100{max-width:1100px; margin:0 auto;}
.inner_1000{max-width:1000px; margin:0 auto;}

.dot_list li{position:relative; padding-left:20px; font-size:1.8rem; line-height:1.3em; margin-top:1.5rem;}
.dot_list li:first-child{margin-top:0;}
.dot_list li span{position:absolute; top:0; left:0;}


@media (hover: hover) and (pointer: fine) {
#headerWrap .gnb li ul li a:hover{background:#7630c8; color:#fff;}
}

@media (max-width:1400px) {
header h1{left:30px;}

.inner{padding:0 1.5rem;}

footer .cont_box{padding-right:0;}
}

@media (max-width:1200px) {
header h1{left:20px;}
header h1 a{width:150px; background-size:150px auto;}
#headerWrap .gnb > li h2 a{padding:0 2.1rem;}
}

@media (max-width:1024px) {

header{height:70px; }
header h1{height:70px; left:15px; margin-left:0;}
header h1 a{width:130px; background-size:130px auto;}

#m-menu{display:block;}
#headerWrap{display:none;}

.m-menu-btn{position:absolute; cursor:pointer; z-index:999; display:block;}
.m-menu-btn button{display:block; text-align:center; font-size:0;}
.m-menu-btn.m-menu-btn-open{right:10px; top:13px;}
.m-menu-btn.m-menu-btn-open button{color:#fff; background:rgba(0,0,0,0.35); height:45px; width:45px; line-height:45px; border-radius:4px;}
.m-menu-btn.m-menu-btn-open button i{margin-left:2px;}
.m-menu-btn.m-menu-btn-close{position:fixed; top:0px; right:260px;}
.m-menu-btn.m-menu-btn-close button{background:#7630c8; width:50px; height:50px; line-height:50px;color:#fff; border-radius:4px 0 0 4px;}
.m-menu-btn button i{font-size:25px; vertical-align:middle;}
.mobile-menu-box{display:none; position:fixed; width:100%; height:100%; top:0; left:0; z-index:999; overflow:hidden;overflow-y:auto;background:rgba(0,0,0,0.5);}
header .m-menu-list{position:absolute; width:220px; height:auto; min-height:100%;  z-index:99;  right:0%;background:#fff;padding:0 2rem 2rem;}
header .m-menu-list h1{display:none;}
header .m-menu-list .gnb{margin-left:0;}
header .m-menu-list .gnb{padding-top:1rem; padding-top:0; height:auto;}
header .m-menu-list .gnb li{display:block; width:100%; text-align:left; padding:6px 0;}
header .m-menu-list .gnb > li{margin-top:1rem;}
header .m-menu-list .gnb li ul{position:relative; top:0; padding-bottom:0; margin-left:0; padding-top:0; border-left-width:0;}
header .m-menu-list .gnb{text-align:left; padding-right:0;}
header .m-menu-list .gnb li:first-child ul{margin-left:0px;} 
header .m-menu-list .gnb li:first-child h2{padding-left:0px;}
header .m-menu-list .gnb li h2{margin-bottom:0.5rem;}
header .m-menu-list .gnb li h2 a{display:block; border-bottom:2px #7630c8 solid; font-family: 'Montserrat', sans-serif; font-size:2rem; line-height:35px; color:#7630c8; text-align:left; padding:0; text-shadow:none;}
header .m-menu-list .gnb li:hover h2{height:auto;}
header .m-menu-list .gnb li li a{font-size:1.7rem;}

.gnb li:hover ul,
.gnb ul li.current ul{margin-top:0; border-top:0;}

footer{padding:5rem 0;}
footer .f_wrap{flex-direction: column;}
footer .cont_box{text-align:center; margin:3rem 0;}



}


@media (max-width:768px) {

footer{padding:4rem 0;}
footer .logo_box img{height:40px;}
footer .cont_box ul.ft_list{margin-bottom:1.5rem;}


}