@import url("footer.css");
@import url("main.css");

/*메인공통*/
h2 { font-size:48px;  text-align:center; font-weight:bold; letter-spacing:-1px}
.sub_txt { font-size:17px; line-height:26px; font-weight:400; letter-spacing:-0.5px; color:#333; text-align: center; margin-bottom: 100px; padding-top:10px}
@media screen and (max-width: 640px) {
	h2 { font-size:32px}
	.sub_txt { font-size:18px; font-weight:400; margin-bottom:30px}
}

/*메인공통*/
/* 팝업 */
#hd_pop {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1000;
  width: 100%;
  height: 0;
}

.hd_pops_footer .hd_pops_reject {
  text-align: left !important;
  padding-left:12px;
  font-size: 15px !important;
}
.hd_pops_footer .hd_pops_close {
  font-size: 15px !important;
}

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

  .hd_pops {position:absolute;border:1px solid #ccc;background:#fff;width: 95%;left:8px !important;top: 75px!important}
  .hd_pops_con {width: auto!important;height: auto!important}
  .hd_pops_con img {width: 100%;height: auto}
  
  .hd_pops_con {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  .hd_pops_footer .hd_pops_reject {
    text-align: left !important;
    padding-left:12px;
    font-size: 13px !important;
  }
  .hd_pops_footer .hd_pops_close {
    font-size: 13px !important;
  }
}

#header .btn_user { float:right; margin:20px 0 0 0; display:block; font-size:19px; color:#444 !important; }
#header .user { position:absolute; right:-35px; top:70px; width:85px; opacity:0; transition:all .3s }
#header .user a { border:1px solid #ccc; font-size: 12px;display:block; height:0; line-height:36px; padding:0 8px; text-transform:uppercase; letter-spacing:0.5px; margin-left:-1px; text-align:center; margin-top:-1px; color:#286bb6 !important; background:#fff;transition: all 0.5s; }
#header .user a:hover { color:#111 }
#header .user.on { opacity:1 }
#header .user.on a { height:36px }

/*헤드메뉴*/
#header_wrap {position: fixed; width:100%; height:81px; background:rgba(0,0,0,0.5); z-index:10}
.scrolled #header_wrap  { background-color:#000; border-bottom:none; -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;}
#header {position:absolute;left:0;top:0px; padding:0 20px; max-width: 1300px;  width:100%; left: 50%; transform:translateX(-50%) ;z-index:6;-webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;}
#header .header-inner {width:100%; height:100% }
#header .gnb { list-style:none; height:100%; position:absolute; right:0px}
#header .gnb > li { float:left; position:relative; display:inline-block; width:100px;  vertical-align:middle; text-align:center;}
#header .gnb > li > a {display:inline-block; line-height:1em; width:100%; color:#fff; font-size:19px; letter-spacing:-0.5px; font-weight:600; text-decoration:none;}
#header .gnb > li > a:hover {color: #fff}
#header .gnb > li.active {background-color: #b0905e}
#header .gnb > li.active > a {color: #fff}
#header .gnb .login {  font-size:12px; width:70px; color:#fff}
#header .gnb .join { font-size:12px; color:#fff; margin-left:20px}
#header .gnb .login a { color:#ddd; font-size:12px}
#header .gnb .login a:hover { color:#fff}
#header .gnb .join a { color:#ddd; font-size:12px}
#header .gnb .join a:hover { color:#fff}
#header .header-inner .menu {cursor:pointer;text-indent:-9999px; position:absolute;top:29px; left:50%;width:25px;height:20px; background-image:url(../img/cate_more.gif); margin-left:200px; border:0; display:none}
#header .header-inner .menu.on {background-image: url(../img/cate_close.gif)}
#header .gnb > li, #header #right-side-open {height:80px;line-height:80px; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;}
#header #right-side-open { position:absolute; right:0; width:100px; cursor:pointer; border-left:1px solid rgba(255,255,255,0.3); text-align:center; display: inline-block; }
#header #right-side-open span{display:inline-block;width:20px; height:20px;font-size:18px;line-height:1em;margin-top:-10px; margin-left:-10px; position:absolute; top:50%;left:50%; color:#fff;}
#header .gnb .snb {list-style:none; display:none;}
#header .logo { margin-left:0px; }
#header .logo a { display:block; width:340px; height:80px; line-height:80px}
#header .logo img { width:100%}
#header .gnb .snb,.device-md #header .gnb .snb{display: none;position: absolute;right: -82px;width: 200px; top:80px; border-top: 0;background-color: #000; z-index:2}
#header .gnb .snb li { font-size:14px; line-height:3.1; text-align:left; border-top:1px solid #414141;}
#header .gnb .snb li a { color:#FFF; display:block; padding-left:20px}
#header .gnb .snb li a:hover {color:#fff;  display:block; background-color:#2253b8; text-decoration:none; line-height:3.1}
#header .gnb .snb li:first-child { border-top:0}

.pc_only {display: inline-block !important;}

@media screen and (max-width: 921px) {
    #header .logo { width:200px; display:block}
	#header .gnb { display:none}
	.scrolled #header_wrap { background-color:#fff}
    .scrolled #header { border-bottom:0}
	.scrolled #open-button { z-index:9999}
    .scrolled #open-button .navicon-line { background-color:#333}
    .pc_only {display: none !important;}
}

/*헤드메뉴*/

/*모바일 오른쪽 메뉴*/
#right-side {background-color:#333;position:fixed; z-index:9999; top:0;right:-400px;max-width:400px; width:100%; height:100%; color:#FFF; padding:30px;-webkit-transition: right .3s ease;-moz-transition: right .3s ease;-ms-transition: right .3s ease;-o-transition: right .3s ease;transition: right .3s ease; box-sizing:border-box; overflow:auto;}
#right-side .side_gnb .call a {text-align:center; display:block;position:relative;background:#6cc043; color:#fff; font-weight:bold; height:5.0em; line-height:5em; border-radius:3px; margin-top:10px; padding:2px 0 4px 0;}
#right-side #btn-close-right-side {position:absolute;top:20px;right:0;color:#fff;width:60px;text-align:center;line-height:40px; font-size:16px; cursor:pointer}
#right-side #btn-close-right-side .fa.fa-times { font-size:18px; padding-top:20px}
.right-side-on #right-side {right:0;}
.right-side-on #wrapper { left:-400px; }
.right-side-on #header { left:-400px; }
.right-side-on #rs-overlay {display:block;}

.side_gnb{position:relative;width:100%;float:left;padding-top:20px;}
.side_gnb p{color:#fff; text-align:center; padding:20px }
.side_gnb .menu-list{display:block;position:relative;border-bottom:1px solid #444; margin-top:60px}
.side_gnb .menu-list>li>a{display:block;position:relative;color:#fff;font-size:15px;line-height:3.8em;padding:0 1.0em;border-top:1px solid #444; text-decoration:none}
.side_gnb .menu-list>li>a i{display:block;position:absolute;top:50%;transform:translateY(-75%) rotate(135deg);-webkit-transform:translateY(-75%) rotate(135deg);right:1.5em;width:5.31%;max-width:32px;border:1px solid #f2f2f2;border-left-width:0;border-bottom-width:0;transition:transform .3s ease;-webkit-transition:-webkit-transform .3s ease;-ms-transition:transform .3s ease}
.side_gnb .menu-list>li.on>a i{-webkit-transform:translateY(-25%) rotate(315deg);transform:translateY(-25%) rotate(315deg)}
.side_gnb .menu-list>li>a i:before{content:"";display:block;position:relative;padding-top:100%}
.side_gnb .depth-2{display:none;}
.side_gnb .depth-2>li { background-color:#ddd}
.side_gnb .depth-2>li>a{display:block;color:#f2f2f2;font-size:1.2em;line-height:3.0em;padding:0 1.5em 0 2.2em;border-bottom:1px solid #fff; color:#000}

/*모바일 오른쪽 메뉴*/
.m_hbar {width:100%;height:1px;border-top:#ddd solid 1px;margin:30px 0;}

/*서브상단*/
.sub_visual{position:relative;max-width:100%;margin:0 auto;overflow:hidden;background-repeat:no-repeat;background-position:center top;}
.sub_visual:hover .bg{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.sub_visual .title_warp { max-width:1300px; margin:0 auto;}
.sub_visual .title_warp .title_page { height:180px; position: relative; margin:0 auto; padding:0 20px;  z-index:2;text-align: center;padding-top:96px;}
.sub_visual .main_title{font-size:38px; font-weight:400; text-align:center !important; color:#fff; letter-spacing:-1px }
.sub_visual h3{font-size:16px;font-weight:400; letter-spacing:-0.5px; color:#fff; opacity:0.8}
.sub_visual .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/sub_visual01.jpg) repeat;}
.sub_visual .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;z-index:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
.sub_visual.tmp {height:80px; background-color:#000;}
.sub_visual.tmp .title_warp {display:none;}

.inBox {float:right;font-size:15px !important; padding:16px 30px 0 0; color:#444 !important;}
.inBox i { color:#888 !important; display:inline-block;}
.inBox a { padding:0 4px 0 0;color:#444;}
.inBox span {padding:0 4px; font-weight:400; color:#444 !important}
.inBox span.strong { padding:0 0 0 8px;color:#444 !important;}

@media screen and (max-width:991px) {
	.inBox {display: none !important;}
	.sub_visual .title_warp { width:100%;margin:0;padding:0;}
	.sub_visual .title_warp .title_page {height:180px}
	.sub_visual h3 { font-size:14px}
	.sub_visual .main_title { font-size:32px;margin-top:-10px;}
	.sub_visual .inBox { font-size:12px}
	.sub_visual .btn-head-cfg {display: none;}
}

/*서브상단*/

/*서브 제목*/
.content_wrap { width:100%;min-height: 800px;}
.content_wrap .txtCon { max-width:1300px; margin:0 auto; font-size:17px; letter-spacing:-0.02em; line-height:1.75; color:#444; font-weight:400; padding:10px 10px 10px 10px; clear:both}
.content_wrap .txtCon .sub_title{margin:40px 0; padding:0; text-align:center;}
.content_wrap .txtCon .sub_title h2 {font-size:42px; color:#333;font-weight:400;}
.content_wrap .txtCon .sub_title p {font-size: 16px; color:#444; word-break:keep-all;}
.content_wrap .txtCon .content_area { width:100%;}
.content_wrap .txtboard { max-width:1300px; margin:0 auto; padding:20px 20px 50px 20px; font-size:17px; line-height:1.75; letter-spacing:-0.02em; clear:both}
.content_wrap .txtboard span { font-size:14px}

@media screen and (max-width:640px) {
    .content_wrap .txtCon { font-weight:400}
	.content_wrap .txtCon .sub_title{margin:26px 0 20px}
	.content_wrap .txtCon .sub_title h2 { font-size:32px}
}

/*서브 제목*/
/* 하단 레이아웃 */
#ft {}
#ft_wr {max-width:1300px !important;margin:0;padding:0px;position:relative;display:inline-block;text-align:left}
#ft_company {font-weight:normal;}
#ft_copy {text-align:center;width:1300px;}

@media screen and (max-width:991px){
  #ft_wr {max-width:100% !important;margin:0;padding:0px;position:relative;display:inline-block;text-align:left}
}