@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Quantico:400,700');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,400,700&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Audiowide');

@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Audiowide');
@font-face { font-family: 'NIXGONM-Vb'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/NIXGONM-Vb.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GoyangIlsan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GoyangIlsan.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 100; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 300; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 400; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 500; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 700; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 900; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); 
 }


/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button,figure,figcaption{margin:0;padding:0;box-sizing:border-box;}
a, img, fieldset {border:0;}
dl,ul,ol,menu,li{list-style:none;}
body,th,td,input,select,textarea,button{line-height:1.2; font-weight:100; color:#222;/*  font-family:'notokr', */font-family: 'Noto Sans KR', sans-serif,HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif, dotum;}
a{color:#222;text-decoration:none;}
a:hover{text-decoration:none;}
a:active{background-color:transparent;}
address,cite,code,dfn,em,var{font-style:normal;font-weight:100;}
h1,h2,h3,h4,h5,h6 {font-weight:400;font-size:100%;}
textarea {resize:none;}
img {line-height:0; vertical-align:top;    max-width: 100%;}
form, fieldset {width:100%; display:block;}
table {border-collapse:collapse; border-spacing:0;}
b,strong {font-weight:700;}
/* 공통 class */
.none {display: none;}
.sdonly {position:absolute; top:0 !important; left:0 !important; line-height:0 !important; font-size:0 !important; width:0 !important; height:0 !important; color:transparent !important; overflow:hidden !important;} /*사운드리더 only */
.sdonly:before, .sdonly:after {display:none !important;}
::selection {background:#333; background: rgba(0,0,0,0.5); color:#fff;}
.ov-bg {background: #000; opacity: 0.8; filter: alpha(opacity=80);top:0;left:0; right:0; height:100%; z-index: 61; position: fixed; display: none;}
/**/
select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select::-ms-expand {display: none;}
input[type=text],input[type=password] {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input::-ms-clear {display: none;}
input:focus {outline: none;}
button:focus {outline: none;}
img {-ms-interpolation-mode:bicubic !important;}
html {font-size: 100%;-webkit-text-size-adjust: none;-ms-text-size-adjust: none;}
/*JOO STYLE*/
.clr:after {content:''; display:block; clear:both;}
.clr > li {float:left;}
.tal {text-align:left;}
.tar {text-align:right;}
.tac {text-align:center;}
.fl {float:left;}
.fr {float:right;}
.f100 {font-weight:100;}
.f400 {font-weight:400;}
.fwb {font-weight:bold;}
.txt_o {color:#faab00;}
.txt_75 {color:#757575;}
button {border:0; background: none; cursor:pointer;}
.font_q {font-family: 'Quantico', sans-serif;}
/*MAIN*/
html, body {height:100%;}
#allWrapper {position: relative;height:100%;}
/**/
#container {height:100%;}
.header {/* position: fixed; */ position: absolute;top:0; left:0; right:0;z-index:999;}
.h_logo {position: absolute; left:80px; top:60px;z-index:1;}
.btn_menu { position: fixed;   /*position: absolute*/;top:80px; right:80px; font-weight:bold; display:block;letter-spacing: 3px; padding:5px; box-sizing:border-box; text-align:center;word-break: break-all;width:44px;height:44px;  /*  border: 1px solid #5d5d5d; */    font-family: 'Audiowide', sans-serif;
    color: #fbb400;
    font-size: 14px;}

/**/
.menu {position: fixed; top:0; right:0; bottom:0; left:0; background: #171717; color:#fff;  transform:translate(0, -100%); transition: all 0.8s ease;    z-index: 99; }
.menu .line > span {/*background: rgba(255,255,255,0.1);*/}
.gnb {position: absolute; top:0; left:0; bottom:0; height:100%; width:50%; display:table; table-layout:fixed; vertical-align:middle;}
.gnb .gnb_inner {display:table-cell; vertical-align:middle;/*margin-left:33.33%;*/}
.gnb ul {display:inline-block; margin-top:-40px; padding-left: 33.33%}
.gnb ul li {position: relative;margin-top: 40px; padding-left:40px; height:60px; overflow:hidden; }
.gnb ul li a {position: absolute; top:0; left:0; right:0; bottom:0;}
.gnb ul li div {height:120px; font-size:52px;transition:all 0.3s ease;font-weight:bold;font-family: 'Audiowide', 'Noto Sans KR', sans-serif;}
.gnb ul li b { display:block; line-height:1;position: absolute;left: 0;top: 10px;font-size:18px; color:#fabc00;font-family: 'Quantico', 'Noto Sans KR', sans-serif; font-weight:bold;    border-bottom: 1px solid #fabc00;}
.gnb ul li div:after {display:block; color:#fabc00; font-size:48px;;}
.gnb ul li:hover div {margin-top:-60px; }
.gnb ul li.gnb1 div:after {content:'서치앤이'; }
.gnb ul li.gnb2 div:after {content:'할수있는'; }
.gnb ul li.gnb3 div:after {content:'여러가지'; }
.gnb ul li.gnb4 div:after {content:'알아보기'; }
.menu .h_img {position: absolute; top:0; right:0; bottom:0; height:100%; width:50%; display:table; /*table-layout:fixed;*/ vertical-align:middle;}
.menu .h_img span {display:table-cell; vertical-align:middle;padding-right:33.33%; text-align: center;}
.menu.on {transform:translate(0, 0); }
.menu.on .btn_back {position: fixed; top:80px; right:80px; font-weight:bold; display:block;letter-spacing: 3px; padding:5px; box-sizing:border-box; text-align:center;word-break: break-all;width:44px;height:44px; border:1px solid #fff; font-family: 'Quantico', sans-serif; color:#fff; font-size:14px;}
/**/
.line1,
.line2,
.line3,
.line4,
.line5 {width:1px;height:100%;position: absolute;top:0;bottom:0;background:rgba(255,255,255,0.2);z-index:1;}
.line1 {left:16.66666667%;}
.line2 {left:33.33333333%;}
.line3 {left:50%}
.line4 {left:66.66666667%;}
.line5 {left:83.33333333%;}
.line6 {width:100%;height:1px;position: absolute;top:50%;background:rgba(255,255,255,0.2);z-index:1;}
/***************1024 ~ 1500px****************/
@media screen and (max-width: 1400px){
.menu .h_img span img {width:236px;}
.h_logo {left:50px; top:50px;}
.btn_menu,
.menu.on .btn_back {top:50px; right:50px; }
.btn_menu{font-size:60px !important; width:auto; height:auto;}

a.fixbtn{width: 100px !important; height: 100px !important; bottom: 30px !important;}
.main_nav a{font-size:30px !important;}
}
/***************패드 1024px****************/
@media screen and (max-width: 1023px){
/**/
.line {display:none;}
.gnb {width:100%;}
.gnb .gnb_inner {padding-left:0; text-align:center;}
.gnb ul {text-align:left; padding-left: 0}
.menu .h_img {display:none;}

/**/
}
/***************모발 ~ 767px****************/
@media screen and (max-width:767px){
#allWrapper {min-height:auto;}
.h_logo {left:5%; top:30px;}
.h_logo img {width:70px;}
.btn_menu,
.menu.on .btn_back  {top:5% !important; right:25px; width:38px;height:38px; padding: 2px;letter-spacing: 2px;}
.gnb ul {margin-top:-70px;}
.gnb ul li {height:32px;margin-top:30px;padding-left:25px;}
.gnb ul li b {font-size:11px; top:5px;}
.gnb ul li div {font-size:27px;height:64px; line-height:32px;}
.gnb ul li div:after {font-size:27px;}
.gnb ul li:hover div {margin-top:-32px;}

}



#hd_login_msg {display: none}


a.fixbtn {border-radius: 50%; display: block; cursor: pointer;  background:#171717 url(../images/fixbtn.png) no-repeat 50% 50%; transition: all 0.3s ease;
 width: 70px; height: 70px; position: fixed; bottom: 30px; right: 30px; z-index: 998;background-size: 30px; border:1px solid rgba(256,256,256,0.3);}
 a.fixbtn:hover, a.fixbtn:active {opacity: 1}
.fixmenu {position: fixed; right: 0px; bottom: 130px; overflow: hidden; width: auto;}
.fixmenu li {margin-top:2px;position: relative; right: -200px; transition: all 0.3s ease; height: 32px; width: 0;}
.fixmenu li a {background: #333; border:1px solid #222;  padding: 7px 0px 7px 10px; font-size: 14px;font-weight: normal; border-radius: 15px 0 0 15px; color: #eee; display: block;  width: 160px; text-align: center; 00; box-shadow: 3px 3px 3px rgba(0,0,0,0.2);border-right: 0; position: absolute; top:0;}
.fixmenu li a:hover {background: #fabc00; color:#000;}
.fixmenu li a:before {position: absolute; top:11px; left: 8px; content: ''; width: 7px; height: 7px; background: #fff; border-radius: 50%; display: block; opacity: 0.8}
a.fixbtn.on {transform: rotate(-45deg);}

.fixmenu.on {z-index: 97; width:auto;}
.fixmenu.on li {right: 0; width: 170px;}
.fixmenu li:nth-child(1) { transition-delay: 0.5s }
.fixmenu li:nth-child(2) { transition-delay: 0.4s }
.fixmenu li:nth-child(3) { transition-delay: 0.3s }
.fixmenu li:nth-child(4) { transition-delay: 0.2s }
.fixmenu li:nth-child(5) { transition-delay: 0s }

@media screen and (max-width:619px){
  a.fixbtn {width: 60px !important; height: 60px !important; background-size: 15px ;right: 5%; bottom: 10px; }
  .fixmenu {bottom: 60px; right: 10px;}
}


.bg-gray { background-color: #f7f7f7; }
.pd-none {padding:0px !important;}
.pd-10 {padding:10px !important;}
.pd-20 {padding:20px !important;}
.pd-30 {padding:30px !important;}
.pd-40 {padding:40px !important;}
.pd-50 {padding:50px !important;}
.pd-60 {padding:60px !important;}
.pd-70 {padding:70px !important;}
.pd-80 {padding:80px !important;}
.pd-90 {padding:90px !important;}
.pd-100 {padding:100px !important;}

.mg-top-10 {margin-top:10px;}
.mg-top-20 {margin-top:20px;}
.mg-top-30 {margin-top:30px;}
.mg-top-40 {margin-top:40px;}
.mg-top-50 {margin-top:50px;}
.mg-top-60 {margin-top:60px;}
.mg-top-70 {margin-top:70px;}
.mg-top-80 {margin-top:80px;}
.mg-top-90 {margin-top:90px;}
.mg-top-100 {margin-top:100px;}

.mg-bt-10 {margin-bottom:10px;}
.mg-bt-20 {margin-bottom:20px;}
.mg-bt-30 {margin-bottom:30px;}
.mg-bt-40 {margin-bottom:40px;}
.mg-bt-50 {margin-bottom:50px;}
.mg-bt-60 {margin-bottom:60px;}
.mg-bt-70 {margin-bottom:70px;}
.mg-bt-80 {margin-bottom:80px;}
.mg-bt-90 {margin-bottom:90px;}
.mg-bt-100 {margin-bottom:100px;}

.rowSubject {font-size: 25px;  font-family: 'GoyangIlsan','Noto Sans KR'; font-weight: 400;text-align: center;color:#000;padding: 68px 0 20px !important;}
.rowSubject:after {content: ""; display: block; width: 60px; border-bottom: 5px solid #000; margin: 5px auto;}
.cateSubject{position: absolute;top:59%;text-align:center;width:100%;color:#fff; font-family: 'GoyangIlsan','Noto Sans KR';font-weight:400;}
.cateSubject h3 {font-size: 24px;}
.cateSubject p {font-size: 15px;line-height: 1.6;}