@charset "utf-8"; /* 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%;min-width:1090px;} /* Prevent layout shift when scrollbars appear/disappear */ html{ overflow-y: scroll; } body, input, textarea, select, button, table {font-family: Open Sans, NanumBarunGothic, Malgun Gothic, Dotum, Apple SD Gothic Neo, AppleGothic, Helvetica, sans-serif;font-size: 12px;-webkit-font-smoothing: antialiased} img, fieldset, button {border: 0} ul, ol {list-style: none} em, address {font-style: normal} a {text-decoration: none} a:hover, a:active, a:focus {text-decoration: none} .blind {overflow: hidden;position: absolute;top: 0;left: 0;width: 1px;height: 1px;font-size: 0;line-height: 0} .edge {position: absolute;top: 12px;right: 4px;width: 0;height: 0;border-width: 0 8px 8px;border-style: solid;border-color: transparent transparent #333} .clear {clear: both} .cf{zoom:1;} .cf:after{display:table;clear:both;content:"";} /* Skip to content */ .skip {margin: 0} .skip > a {display: block;overflow: hidden;height: 0;line-height: 28px;text-align: center} .skip > a:focus {height: auto} /* Layout */ .container {min-width:1090px;background-color: #fff} .header {position: relative;z-index: 2;width:1000px;height: 100%;margin: 0 auto;} .header > .side {float: right;z-index: 2;margin: 39px 0 0 22px;line-height: 20px} .visual {overflow: hidden;position: relative;z-index: 1;width: 100%} .body {position: relative;padding: 0} .body .content {} .body.fixed-width {width:1000px;margin: 0 auto} .header:after, .body:after {display: block;clear: both;content: ''} .content {} .content:after {display: block;clear: both;content: ''} .content > :first-child {margin-top: 0} /* Header */ .header > h1 {float: left;padding: 20px 0;margin-right: 32px;line-height: 60px;} .header > h1 img {vertical-align: middle;max-height: 40px;} .header > .logo-item a {font-size: 24px;color: #888;} .header > .logo-item a:hover {color: #444;} /* Fixed Header */ .container.fixed_header {padding-top: 100px} .fixed_header .header_wrap {position: absolute;top: 0;left: 0;right: 0;width: auto;z-index: 1000;padding: 0;} .fixed_header .header_wrap.shrink {position: fixed;top: 0;width: 100%;min-width:1090px; /* keep PC fixed layout; remove if you want fully fluid */z-index: 1000;border-bottom: 1px solid #e1e1e1;background-color: #fff;-webkit-animation: ani-header 0.5s forwards;animation: ani-header 0.5s forwards;left: 0;right: 0;} .fixed_header .header_wrap.shrink .header > h1 {padding: 0} .fixed_header .header_wrap.shrink .gnb > ul > li > a {line-height: 60px} .fixed_header .header_wrap.shrink .header > .side {margin: 19px 0 0 22px} .fixed_header .header_wrap.shrink .search_area {padding: 0 20px} /* Footer */ .footer {border-top: 1px solid #e4e4e4;border-bottom: 3px solid #cda25a;background-color: #f1f1f1;font-family: Open Sans, NanumBarunGothic, Malgun Gothic, Dotum, Apple SD Gothic Neo, AppleGothic, Helvetica, sans-serif} .footer a:hover, .footer a:focus {text-decoration: none} .footer .f_info_area {overflow: hidden;width:1000px;margin: 0 auto;padding: 48px 0 40px} .footer .f_cr_area {padding: 19px;background-color: #555} .footer .copyright {font-size: 13px;color: #f1f1f1;line-height: 16px} .footer .copyright a {color: #f1f1f1} .footer .copyright a:hover, .footer .copyright a:focus, .footer .copyright a:active {color: #cda25a} .footer .copyright span {display: inline-block;margin-left: 60px} .footer .sub_desc {margin-bottom: 16px;font-size: 13px;color: #888;line-height: 22px} .footer .f_info {float: left;width: 240px;margin-right: 65px} .footer .f_logo {overflow: hidden;max-width: 100%;margin-bottom: 16px;font-size: 24px;color: #555} .footer .f_logo.log_txt a {font-size: 24px;font-weight: bold;color: #555} .footer .f_logo img {max-width: 240px} .footer .f_info2 {overflow: hidden;margin-top: 7px} .footer .site_map > ul {display: inline-block;overflow: hidden;background: url(../img/bg_sitemap.png) repeat-y} .footer .site_map > ul li {float: left;width: 282px;margin: 0 0 0 24px} .footer .site_map > ul li:first-child, .footer .site_map > ul li.clear {clear: both;margin-left: 0} .footer .site_map > ul li a {display: inline-block;margin: 0 0 20px;padding: 0 23px;font-size: 18px;color: #555} .footer .site_map > ul ul {overflow: hidden;margin: 0 0 10px} .footer .site_map > ul ul li {margin-left: 0} .footer .site_map > ul ul a {margin: 0 0 13px;font-size: 13px;font-weight: normal;color: #888;line-height: 18px} .footer .site_map > ul ul a:hover, .footer .site_map > ul ul a:focus, .footer .site_map > ul ul a:active {color: #555} .footer .f_cr_area .mobile-footer-member {display: none;} /* button */ .btn_item {display: inline-block;margin: 35px 0;padding: 0 27px;height: 50px;font-family: "Open Sans";background-color: #555;font-size: 14px;line-height: 50px;letter-spacing: 1px;color: #FFF;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out} .btn_item:hover, .btn_item:active .btn_item:focus {background-color: #CBA061;color: #fff} .btn_item + .btn_item {margin-left: 10px;} /* Login */ .header > .side > ul > li {float: left;position: relative} .header > .side > ul:after {display: block;clear: both;content: ''} .header > .side > ul > li > a {display: block;width: 22px;height: 22px;margin-left: 12px;font-size: 22px;line-height: 22px;color: #888;text-align: center} .header > .side > ul > li > a:hover, .header > .side > ul > li > a:focus, .header > .side > ul > li > a:active, .header > .side > ul > li.on > a {color: #444} .header > .side > ul .ly {position: relative;position: absolute;top: 100%;right: 0;margin-top: 13px;background-color: #f9f9f9} .header > .side > ul .ly.ly_login {overflow: hidden;margin-top: 0;background: url('../img/blank.gif') 0 0 repeat;height: 0} .header > .side > ul .ly.ly_login ul {position: relative;margin-top: 18px;padding: 8px 0;background-color: #333;z-index: 3} .header > .side > ul .on .ly.ly_login {height: auto} .header > .side > ul .ly a {display: block;min-width: 120px;height: 40px;padding: 0 20px;line-height: 40px;font-size: 13px;color: #9d9d9d} .header > .side > ul .ly a:hover {color: #cda25a;text-decoration: none} .header > .side > ul > li .login_after {overflow: hidden;width: 40px;height: 40px;margin-top: -9px;border-radius: 100%} .header > .side > ul > li .login_after img {width: 40px;height: 40px} .header > .side > ul > li .login_after ~ .ly_login .edge {right: 11px} /* Magazine Header Type */ .custom_area {display: none} .magazine .header {text-align: center} .magazine .header > h1 {float: none;display: inline-block;margin: 0;padding: 80px 0 20px;vertical-align: top} .magazine .header > .side {float: none;position: absolute;top: 0;right: 0;margin: 30px 0 0} .magazine .gnb {float: none;max-width: 100%;margin-bottom: 40px} .magazine .gnb > ul {display: inline-block;vertical-align: top} .magazine .gnb > ul > li > a {position: relative;line-height: 60px} .magazine .gnb > ul > li > a:after {position: absolute;top: 50%;left: -1px;width: 1px;height: 16px;margin-top: -8px;background-color: #888;content: ''} .magazine .gnb > ul > li:first-child > a:after {background: none} .magazine .gnb > ul .depth2:after {background: none} .magazine .gnb > ul .depth2, .magazine .gnb > ul .depth3 {background-color: #f7f7f7} .magazine .gnb > ul .depth2 a, .magazine .header > .side > ul .ly a {color: #999} .magazine .header > .side > ul .ly a:hover {color: red} .magazine .gnb > ul > li > a:hover, .magazine .gnb > ul > li > a:focus, .magazine .gnb > ul > li > a:focus, .magazine .gnb > ul > li.on > a, .magazine .header > .side > ul > li.on > a, .magazine .header > .side > ul .ly a:hover {color: #cda25a} .magazine .header > .side > ul .ly.ly_login ul {background-color: #f7f7f7;text-align: left} .magazine .edge {border-color: transparent transparent #f7f7f7} .magazine .header > .side > ul > li > a:hover, .magazine .header > .side > ul > li > a:focus, .magazine .header > .side > ul > li > a:active {color: #cda25a} .magazine .custom_area {display: block;position: absolute;top: 30px;left: 0} .magazine .custom_area li {float: left;margin-right: 30px} .magazine .custom_area a {font-size: 13px;line-height: 15px;color: #999} .magazine .custom_area a:hover, .magazine .custom_area a:hover, .magazine .custom_area a:hover {color: #cda25a} .magazine .search_area {padding: 10px 20px} /* Onepage Header Type */ .onepage .header_wrap {position: absolute;top: 0;left: 0;width: 100%;z-index: 1000} .onepage .gnb > ul {background: url(../img/blank.gif) 0 0 repeat} .onepage .gnb > ul > li > a {line-height: 60px;color: #f6f6f6} .onepage .gnb > ul > li > a:hover, .onepage .gnb > ul > li > a:focus, .onepage .gnb > ul > li > a:focus, .onepage .gnb > ul > li.on > a {color: #fff} .onepage .shrink .gnb > ul > li > a {color: #888} .onepage .shrink .gnb > ul > li > a:hover, .onepage .shrink .gnb > ul > li > a:focus, .onepage .shrink .gnb > ul > li > a:focus, .onepage .shrink .gnb > ul > li.on > a {color: #444} .onepage .header > .side > ul > li > a {color: #f6f6f6} .onepage .header > .side > ul > li > a:hover, .onepage .header > .side > ul > li > a:focus, .onepage .header > .side > ul > li > a:active, .onepage .header > .side > ul > li.on > a {color: #fff} .onepage .search_area .btn_close {color: #f6f6f6} .onepage .shrink .search_area .btn_close {color: #888} .onepage .gnb > ul .depth2:after {background: none} .onepage .gnb {margin-top: 20px} .onepage .header > h1 {padding: 20px 0 0} .onepage .search_area input[type=text] {color: #f6f6f6} .onepage .shrink .search_area input[type=text] {color: #888} .onepage .visual.sub.sub_type3 {margin-top: -100px;} /* Search */ .search_wrap {position: relative;width:1000px;margin: 0 auto} /* ===== top_search (검색창) ===== */ .top_search{width:456px;height:46px;background:#3b4890} .typea .top_search{width:364px} .search_area {display: none;position: absolute;top: 0;left: 0;width: 1060px;padding: 20px;z-index: 3;z-index: 3} .search_area input {font-size: 13px;vertical-align: top} .search_area input[type=text] {position: relative;width: 100%;height: 40px;padding: 10px 0;border: 0;background-color: transparent;font-size: 40px;color: #444;-webkit-appearance: none;} .search_area input[type=text]:focus {outline: 0} .search_area input[type=text]::-ms-clear {display: none} .search_area .btn_close {position: absolute;top: 50%;right: 0;width: 20px;height: 20px;margin-top: -10px;font-size: 22px;color: #888;text-align: center;line-height: 20px} /* GNB */ .gnb {float: right;position: relative;z-index: 1;max-width: 742px;height: 100%;font-size: 13px} .gnb a {text-decoration: none;white-space: nowrap} .gnb > ul > li {float: left;position: relative;text-align: left} .gnb > ul:after {display: block;clear: both;content: ''} .gnb > ul > li > a {display: block;position: relative;padding: 0 20px;line-height: 100px;font-size: 15px;font-weight: 700;color: #888} .gnb > ul > li > a:hover, .gnb > ul > li > a:focus, .gnb > ul > li > a:focus, .gnb > ul > li.on > a {color: #444} .gnb > ul .depth2 {display: none;position: absolute;top: 100%;left: 0;z-index: 2;padding: 8px 0;background-color: #333} .gnb > ul .depth2 > li {position: relative} .gnb > ul .depth2:after {position: absolute;top: -3px;left: 0;width: 100%;height: 3px;background-color: #cda25a;content: ''} .gnb > ul .depth2 a {display: block;position: relative;min-width: 170px;height: 40px;padding: 0 30px 0 20px;line-height: 40px;font-size: 13px;color: #9d9d9d} .gnb > ul .depth2 a:hover, .gnb > ul .depth2 a:active, .gnb > ul .depth2 a:focus, .gnb > ul .depth2 > li.on > a {color: #cda25a} .gnb > ul .depth3 {display: none;position: absolute;top: -8px;left: 100%;z-index: 2;padding: 8px 0;background-color: #333} .gnb > ul .depth2 > li.more > a:after {position: absolute;right: 20px;content: '>'} .onepage .shrink .header > .side > ul > li > a {color: #444;} .onepage .shrink .gnb {margin-top: 0;} .magazine .shrink .gnb {margin-bottom: 10px;} .magazine .shrink h1 {margin-top: 10px;} .magazine .header_wrap.shrink .gnb > ul > li > a {line-height: 40px;} /* VISUAL */ .visual.sub {position: relative;padding: 35px 0;background-color: #f6f6f6;line-height: 30px} .visual.sub .sub_title {position: relative;z-index: 2;width:1000px;margin: 0 auto} .visual.sub .sub_title h1 {position: relative;font-weight: 700;font-family: Raleway, NanumBarunGothic, Malgun Gothic, Dotum, Apple SD Gothic Neo, AppleGothic, Helvetica, sans-serif;font-size: 17px;color: #444} .visual.sub .sub_title h1:after {position: absolute;top: 115%;left: 0;width: 22px;height: 2px;background-color: #444;content: ''} .visual.sub .bg_img {display: none;position: absolute;top: 0;left: 0;z-index: 0;width: 100%;height: 100%;background-position: 50% 50%;background-repeat: no-repeat;background-size: cover} .visual.sub.sub_type2 {padding: 70px 0} .visual.sub.sub_type2 .bg_img {display: block} .visual.sub.sub_type2 .sub_title h1 {color: #fff;font-weight: 400;font-size: 23px;letter-spacing: 1px} .visual.sub.sub_type2 .sub_title h1:after, .visual.sub.sub_type3 .sub_title h1:after {background: none} .visual.sub.sub_type3 {padding: 250px 0 210px;line-height: 40px;text-align: center} .visual.sub.sub_type3 .bg_img {display: block;background-attachment: fixed;background-size: auto auto} .visual.sub.sub_type3 .sub_title h1 {font-size: 39px;font-weight: 400;color: #fff;letter-spacing: 2px} /* LNB */ .body.fixed-width .lnb > ul {position: relative;z-index: 1;margin: 0;padding: 40px 0 0} .body.fixed-width .lnb > ul > li {margin-bottom: 40px} .body.fixed-width .lnb > ul > li > a, .body.fixed-width .lnb > ul > li > span {display: block;line-height: 21px;margin-bottom: 14px;font-size: 15px;color: #444} .body.fixed-width .lnb ul ul li.on a {color: #cda25a} .body.fixed-width .lnb ul ul a {display: block;padding: 10px 0;font-size: 14px;line-height: 20px;color: #888;text-decoration: none} .body.fixed-width .lnb ul ul a:hover, .body.fixed-width .lnb ul ul a:focus, .body.fixed-width .lnb ul ul a:active {color: #cda25a} .body.fixed-width .lnb img {vertical-align: top} .body.fixed-width.left .lnb, .body.fixed-width.right .lnb {float: left;width: 260px;padding: 0 0 16px} .body.fixed-width.left .content, .body.fixed-width.right .content {float: right;width: 900px;min-height: 400px;padding: 40px 0 100px} .body.fixed-width.right .lnb {float: right} .body.fixed-width.right .content {float: left} .body.fixed-width.none .lnb {display: none} .body.fixed-width.none .content {float: none;width:1000px} /* Scroll to top link */ .btn_top {display: none;position: fixed;right: 0;bottom: 57px;z-index: 1000;width: 48px;height: 48px;background-color: #555;font-size: 24px;color: #fff;text-align: center;opacity: 0.8;filter: alpha(opacity=80)} .btn_top:hover {background-color: #cda25a;color: #fff;text-decoration: none;opacity: 1;filter: alpha(opacity=100)} .btn_top i {line-height: 48px} .swiper-container {height: 600px;font-family: Raleway, NanumBarunGothic, Dotum, AppleGothic, Helvetica, sans-serif;} .swiper-container > div > div {display: table;height: 600px;color: #fff;background-size: cover;} .swiper-container > div > div > div {display: table-cell;vertical-align: middle;} .swiper-container > div > div > div > div {width:1000px;margin: 0 auto;} .swiper-container h1 {font-weight: 700;margin: 0 0 19px 0;font-size: 60px;line-height: 70px;text-decoration: none;} .swiper-container p {font-size: 20px;line-height: 22px;} .swiper-button {position: absolute;top: 50%;display: none;margin:-25px 0 0 0;} .swiper-container:hover .swiper-button {display: block;} .swiper-button.left {left: 20px;} .swiper-button.right {right: 20px;} .swiper-button i {width: 50px;line-height: 50px;text-align: center;font-size: 24px;color: #fff;} .swiper-button button {background-color: #333;border-radius: 50px;background-color: rgba(0, 0, 0, 0.2);cursor: pointer;} .swiper-pagination {position: absolute;left: 0;text-align: center;bottom: 5px;width: 100%;} .swiper-pagination-switch {display: inline-block;width: 10px;height: 10px;border-radius: 10px;background: #fff;opacity: 0.6;margin: 0 3px;cursor: pointer;} .swiper-active-switch {background: #fff;opacity: 1;} @media all and (max-width: 479px) { body, html {min-width: 100%;} a.btn_top {display: none;} /* Layout */ .container {min-width: 100%;background-color: #fff} .header {position: relative;z-index: 2;width: 100%;height: auto;margin: 0 auto;} .magazine .header {text-align:left;} .magazine .header > h1 {text-align:left;display:block;padding:0 15px;} .header > .side {display: none;} .body.fixed-width {width: auto;margin: 0} .header:after, .body:after {clear: both;content: ''} .body {padding: 0;} .content {} .content:after {clear: both;content: ''} .content > :first-child {margin-top: 0;} .body.fixed-width.none .content {width:auto;} .content img {max-width: 100%;height: auto} .body.fixed-width.left .content, .body.fixed-width.right .content {width: auto;float: none;min-height: 100%;padding: 40px 0;} /* Header */ .header > h1 {float: none;margin-right: 0;padding: 0 15px;line-height: 50px;display: block;} .header > h1 img {max-height: 15px;padding: 0;margin: 0;} .header.sub_type3 {position: absolute;} /* Fixed Header */ .container.fixed_header {padding-top: 0} .header_wrap.shrink {display: none;} .onepage .header > h1 {padding: 0 14px;} .fixed_header .header_wrap {position: static;top: 0;left: 0;width: 100%;z-index: 1000} .fixed_header .header_wrap.shrink {position: fixed;top: 0;width: 100%;z-index: 1000;border-bottom: 1px solid #e1e1e1;background-color: #fff;animation: ani-header 0.5s forwards;} .fixed_header .header_wrap.shrink .header > h1 {padding: 0} .fixed_header .header_wrap.shrink .gnb > ul > li > a {line-height: 60px} .fixed_header .header_wrap.shrink .header > .side {margin: 19px 0 0 22px} .fixed_header .header_wrap.shrink .search_area {padding: 0 20px} /* Footer */ .footer {border-top: 1px solid #e4e4e4;border-bottom: 3px solid #cda25a;background-color: #f1f1f1;} .footer a:hover, .footer a:focus {text-decoration: none} .footer .f_info_area {width: auto;margin: 0;padding: 0;} .footer .f_cr_area {padding: 0;background-color: #555;color: #fff;} .footer .copyright {width: auto;margin: 0;font-size: 12px;color: #f1f1f1;line-height: 16px} .footer .copyright span {display: inline-block;margin-left: 0px} .footer .sub_desc {display: none;} .footer .f_info {float: none;width: auto;margin-left: 0;margin-right: 0;} .footer .f_logo {padding: 8px 15px;margin-bottom: 0;} .footer .f_logo.log_txt a {font-size: 16px;font-weight: bold;color: #555} .footer .f_logo img {max-width: auto;max-height: 30px;} .footer .f_info2 {display: none;} .footer .site_map {display: none;} .footer .f_info2 {display: none;} .footer .f_logo {padding: 8px 15px;} .footer .f_logo img {max-height: 30px;} .footer .sub_desc {display: none;} .footer .f_cr_area {padding: 0;background-color: #555;color: #fff;} .footer .f_cr_area p {margin: 0;padding: 8px 14px;} .footer .f_cr_area a {color: #fff;} .footer .f_cr_area .mobile-footer-member {padding: 0;margin: 0;border-top: 1px solid #444;list-style: none;overflow: hidden;display: block;} .footer .f_cr_area .mobile-footer-member li {float: left;width: 50%;border-left: 1px solid #444;box-sizing: border-box;} .footer .f_cr_area .mobile-footer-member li:first-child {border-left: 0;} .footer .f_cr_area .mobile-footer-member li a {display: block;line-height: 32px;text-align: center;} /* button */ .btn_item {display: inline-block;margin: 35px 0;padding: 0 27px;height: 50px;font-family: "Open Sans";background-color: #555;font-size: 14px;line-height: 50px;letter-spacing: 1px;color: #FFF;transition: all .2s ease-in-out;} .btn_item:hover, .btn_item:active .btn_item:focus {background-color: #CBA061;color: #fff} .btn_item + .btn_item {margin-left: 10px;} /* Login */ .header > .side {display: none;} .header > .custom_area {display:none;} /* Search */ .search_wrap {display: none;} .gnb {float: none;position: static;z-index: 1;max-width: 100%;height: 100%;font-size: 1em;background: #fff;} .onepage .gnb {margin-top:0;} .magazine .gnb {margin-bottom:0;} .gnb a {white-space: normal;font-size: 14px;display: block;padding: 10px 0;border-top: 1px solid #eee;} .gnb > ul {display: none;padding: 0 14px 14px 14px;max-height: 240px;overflow-x: scroll;border-bottom: 1px solid #eaeaea;background: #fff;-webkit-overflow-scrolling: touch;} .magazine .gnb > ul {display:none;} .gnb > ul > li {float: none;position: static;} .gnb > ul > li:first-child > a {border-top: 0;} .gnb > ul:after {display: none;} .magazine .gnb > ul > li > a, .gnb > ul > li > a {position: static;padding: 10px 0;line-height: normal;font-size: normal;color: #555;font-weight: bold;} .onepage .gnb > ul > li > a {color: #555;line-height: normal} .onepage .gnb > ul > li > a:hover, .onepage .gnb > ul > li > a:focus, .onepage .gnb > ul > li > a:focus, .onepage .gnb > ul > li.on > a {color:#555;} .magazine .gnb > ul .depth2, .magazine .gnb > ul .depth3, .gnb > ul .depth2 {display: block;position: static;padding: 0;background-color: #fff} .gnb > ul .depth2 > li {position: static} .gnb > ul .depth2:after {display: none} .gnb > ul .depth2 a {position: static;min-width: 100%;height: auto;padding: 10px 0;line-height: normal;color: #555;} .gnb > ul .depth3 {display: block;position: static;background-color: #fff;padding: 0;} .gnb > ul .depth3 a {color: #999;} .gnb > ul .depth2 > li.more > a:after {display: none;} /* GNB */ .gnb {float: none;position: static;z-index: 1;max-width: 100%;height: 100%;font-size: 1em;display: block;} .gnb #mobile_menu_btn {display: block;} .gnb .menu_btn {height: 22px;width: 44px;display: block;position: absolute;top: 14px;right: 3px;display: inline-block;} .gnb .menu_btn .menu_bar {width: 20px;height: 14px;position: relative;top: 4px;left: 12px;} .gnb .menu_btn .menu_bar div{height:0;border-top:2px solid #383431;position:absolute} .header.sub_type3 .gnb .menu_btn .menu_bar div{border-top:2px solid #fff} .gnb .menu_btn .menu_bar div.btn1{width:20px;top:0} .gnb .menu_btn .menu_bar div.btn2{width:20px;top:6px;transition:all .1s} .gnb .menu_btn .menu_bar div.btn3{width:20px;bottom:0} .gnb .menu_btn.opened .menu_bar div.btn1{top:6px;width:20px;transform:rotate(45deg)} .gnb .menu_btn.opened .menu_bar div.btn2{top:6px;display:none} .gnb .menu_btn.opened .menu_bar div.btn3{top:6px;width:20px;transform:rotate(-45deg)} .body .lnb{display:none} .body .content{overflow:visible} .visual{box-sizing:border-box} .visual.sub{position:relative;padding:15px 14px 30px 14px;background-color:#f6f6f6;line-height:30px} .visual.sub .sub_title{position:relative;z-index:2;width:auto;margin:0} .visual.sub .sub_title h1{position:relative;font-weight:700;font-family:Raleway,NanumBarunGothic,Malgun Gothic,Dotum,Apple SD Gothic Neo,AppleGothic,Helvetica,sans-serif;font-size:17px;color:#444} .visual.sub .sub_title h1:after{position:absolute;top:115%;left:0;width:22px;height:2px;background-color:#444;content:''} .visual.sub .bg_img{display:none;position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;background-size:cover} .visual.sub.sub_type2{padding:40px 15px} .visual.sub.sub_type2 .bg_img{display:block} .visual.sub.sub_type2 .sub_title h1{color:#fff;font-weight:400;font-size:23px;letter-spacing:1px} .visual.sub.sub_type2 .sub_title h1:after, .visual.sub.sub_type3 .sub_title h1:after{background:0 0} .visual.sub.sub_type3{padding:80px 0 0;line-height:40px;text-align:center} .visual.sub.sub_type3 .bg_img{display:block;background-attachment:fixed;background-size:auto auto} .visual.sub.sub_type3 .sub_title{padding:100px 0 70px 0} .visual.sub.sub_type3 .sub_title h1{font-size:23px;font-weight:400;color:#fff;letter-spacing:2px} .swiper-container{height:270px;font-family:Raleway,NanumBarunGothic,Dotum,AppleGothic,Helvetica,sans-serif} .swiper-container>div>div{display:table;height:270px;color:#fff} .swiper-container>div>div>div{display:table-cell;vertical-align:middle} .swiper-container>div>div>div>div{padding:0 14px;width:auto;margin:0} .swiper-container h1{font-weight:600;margin:0 0 10px 0;font-size:24px;line-height:30px;text-decoration:none} .swiper-container p{font-size:14px;line-height:18px} } /* header animation */ @keyframes ani-header{0%{top:-60px}100%{top:0}} /* ========================= js-like (screenshot tone) for .js_* ========================= */ :root{--js-blue:#3a4a8f;--js-blue2:#2f3f7f;--js-line:#d9dde6;--js-line2:#eceff5;--js-bg:#fff;--js-soft:#f6f7fb;--js-soft2:#fbfcff;--js-text:#222;--js-muted:#666} /* 중앙 고정폭 */ .js_inner{width:1000px;margin:0 auto} /* 상단(사진엔 얇은 상단 여백만 있고, 파란바가 핵심) */ .js_topbar{background:#fff;border-bottom:1px solid var(--js-line);font-size:12px} .js_topbar .js_inner{display:flex;justify-content:space-between;align-items:center;height:34px} .js_topbar a{ color:var(--js-muted); font-weight:600; } .js_topbar a:hover{ color:var(--js-text); text-decoration:underline; } .js_sep{ margin:0 8px; color:#b7bcc8; } /* 헤더: 로고 왼쪽 / 검색은 가운데에 보이게 */ .js_header{background:#fff;border-bottom:0} .js_header_row{position:relative;display:flex;align-items:flex-start;height:120px;padding:0} /* 로고 */ .js_logo{margin:0;width:220px} .js_logo a{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--js-text)} .js_logo img{max-height:34px;display:block} /* 검색 영역: 가운데 배치 (absolute로 중앙 고정) */ .js_search{position:absolute;left:30%;top:50%;transform:translate(-50%,-50%);width:420px} .js_search_form{display:flex;align-items:center;height:45px;background:#fff;border:2px solid var(--js-blue);border-radius:2px;overflow:hidden} .js_search_form input{flex:1;height:45px;border:0;outline:0;padding:0 10px;font-size:12px;color:var(--js-text)} .js_search_form input::placeholder{color:#9aa2b1} .js_search_form button{width:44px;height:45px;border:0;background:var(--js-blue);color:#fff;font-weight:800;cursor:pointer} /* (선택) 검색 버튼을 돋보기처럼 보이게 하고 싶으면 텍스트 대신 아이콘 */ .js_search_form button{font-size:0;position:relative} .js_search_form button:before{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border:2px solid #fff;border-radius:50%;transform:translate(-2px,-2px)} .js_search_form button:after{content:"";position:absolute;width:8px;height:2px;background:#fff;transform:rotate(45deg);right:12px;bottom:10px} /* 파란 GNB 바 */ /* 바 전체 */ .js_nav{position:relative;min-width:1000px;background-color:#3b4890;border:1px solid #3b4890;border-width:1px 0} /* 1160 고정폭 대응 */ .width1160 .js_nav{position:relative;min-width:1000px;height:44px;background-color:#3b4890;border:1px solid #3b4890;border-width:1px 0} /* 내부 중앙 정렬 */ .js_nav .js_inner{width:1000px;margin:0 auto} /* 메뉴 리스트 */ .js_nav_list{display:flex;align-items:center;height:44px;list-style:none} /* 메뉴 아이템 */ .js_nav_list li{position:relative} /* 메뉴 링크 */ .js_nav_list a{display:block;padding:0 10px;line-height:44px;font-size:12px;font-weight:700;color:#fff;text-decoration:none;white-space:nowrap} /* hover 효과 */ .js_nav_list a:hover{background-color:#2f3f7f;text-decoration:none} /* 메뉴 사이 구분선 (선택) */ .js_nav_list li+li::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;margin-top:-7px;background-color:rgba(255,255,255,.2)} /* 본문 영역: 가운데/여백/2컬럼 */ .js_body{background:#fff;padding:12px 0 24px} .js_grid{display:flex;gap:12px;align-items:flex-start} /* 메인 */ .js_main{flex:1;min-width:0} /* 우측 사이드: 사진처럼 1열 박스들 */ .js_aside{width: 250px} /* 공통 박스(사이드/위젯) */ .js_box{border:1px solid var(--js-line);background:#fff;margin-bottom:10px} .js_box h3{margin:0;padding:8px 10px;font-size:12px;font-weight:900;border-bottom:1px solid var(--js-line);background:var(--js-soft2)} /* 리스트류 */ .js_list,.js_ol{margin:0;padding:8px 10px} .js_list{ list-style:none; } .js_list li{ padding: 6px 0; border-bottom:1px solid var(--js-line2); } .js_list li:last-child{ border-bottom:0; } .js_list a{ color:#2b2f3a; font-weight:700; } .js_list a:hover{ text-decoration:underline; } .js_ol{padding:8px 10px 8px 28px} .js_ol li{ padding:6px 0; } .js_ol a{ color:#2b2f3a; font-weight:700; } .js_ol a:hover{ text-decoration:underline; } /* 로그인 버튼 박스 */ .js_login_actions{padding:10px;display:flex;gap:8px} .js_btn{flex:1;display:inline-block;text-align:center;padding:8px 0;background:var(--js-blue2);color:#fff;font-weight:900;border-radius:2px;text-decoration:none} .js_btn:hover{ background: var(--js-blue); } .js_btn_light{background:var(--js-soft);color:#2b2f3a} .js_btn_light:hover{ background:#e9edf7; } .js_small{padding:10px;margin:0;color:var(--js-muted);font-size:12px} /* 배너 */ .js_banner{height:120px;background:var(--js-soft);border:1px solid var(--js-line2);display:flex;align-items:center;justify-content:center;color:#888} /* 반응형: 화면이 좁아지면 아래로 */ @media (max-width: 1240px){ .js_inner{ width:100%; padding: 0 12px; } .js_search{ width: min(520px, calc(100% - 24px)); } .js_grid{ flex-direction:column; } .js_aside{ width:auto; } .js_logo{ width:auto; } .js_header_row{ height:auto; padding:12px 0; } .js_search{ position:static; transform:none; margin: 10px 0 0; width:100%; } } /* ===== Fix: stuck to top (remove legacy paddings) ===== */ body,html{margin:0!important;padding:0!important} /* xedition의 fixed_header 옵션이 켜져있으면 container가 100px 내려감 */ .container.fixed_header{padding-top:0!important} /* 기존 .body 패딩도 내려가 보이게 함 */ .body{padding:0!important} /* 새 프레임 본문도 위로 딱 */ .js_body{padding-top:0!important;margin-top:0!important} /* 혹시 상단에 visual/sub 영역이 남아있으면 숨기거나 패딩 제거 */ .visual{margin:0!important;padding:0!important} .js_userbox{ padding:10px; } .js_user_name{ margin:0 0 8px; font-size:12px; color:#222; } .js_user_name strong{ font-weight:900; } .js_user_stats{list-style:none;margin:0 0 10px;padding:0;border-top:1px solid var(--js-line2)} .js_user_stats li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--js-line2);font-size:12px} .js_user_stats .k{ color:#666; font-weight:700; } .js_user_stats .v{ color:#222; font-weight:900; } /* ===== Login box Level UI (cjs-style) ===== */ .lvui_title{font-weight:900;font-size:13px;display:flex;align-items:baseline;gap:6px;margin:0 0 10px} .lvui_lv{ color:#5b5ce6; } .lvui_sep{ color:#bdbdbd; font-weight:800; } .lvui_pt{ color:#8c8c8c; font-weight:900; } .lvui_bar{height:10px;background:#e6e6e6;border-radius:999px;overflow:hidden} .lvui_fill{height:100%;background:#5b5ce6;border-radius:999px} .lvui_sub{margin-top:10px;color:#8c8c8c;font-weight:900;font-size:13px} /* ========================================================= cjs-style "최근 방문" bar (exact line+size) + placement fix - Must sit inside .js_grid and align with content - Flex-wrap so the bar takes a full row above main/aside ========================================================= */ /* ensure first-row full width inside the 2-col flex grid */ .js_grid{ flex-wrap: wrap; } .cjs_linebar_inplace{flex:0 0 100%;width:100%} /* cjs clone of .newvisit_history */ .cjs_linebar{ background: transparent; } .cjs_linebar_in{position:relative;height:38px;line-height:38px;padding:0 66px 0 12px;margin:0 0 10px;background:#f3f3f3;vertical-align:top;box-sizing:border-box;color:#444;display:flex;align-items:center;gap:10px} .cjs_linebar_in::before{content:"";position:absolute;left:0;top:0;display:block;width:100%;height:38px;border:1px solid #d5d5d5;box-sizing:border-box;pointer-events:none} .cjs_linebar.visit_bookmark .cjs_linebar_in::before{border-width:0 1px 1px} .cjs_linebar_label{flex:0 0 auto;font-size:12px;font-weight:700;color:#444} .cjs_linebar_caret{ margin-left: 6px; font-size: 11px; color: #666; } .cjs_linebar_track{flex:1;min-width:0;overflow:hidden} .cjs_linebar_list{list-style:none;margin:0;padding:0;display:flex;align-items:center;white-space:nowrap} .cjs_linebar_list li{ display: inline-flex; align-items: center; } .cjs_linebar_list a{color:#444;font-weight:500;font-size:12px;text-decoration:none;padding:0 4px} .cjs_linebar_list a:hover{ text-decoration: underline; } .cjs_line_sep{ margin: 0 6px; font-size: 11px; color: #bdbdbd; } .cjs_line_x{border:0;background:0 0;padding:0;margin:0 6px 0 0;cursor:pointer;font-size:12px;color:#9a9a9a;line-height:1} .cjs_line_x:hover{ color: #333; } /* === Channel / fixed sidebar tweaks (added) === */ /* Keep side sections from stretching and allow sticky to work */ .ch-grid{align-items:flex-start;} .ch-side{position:sticky; top:20px; align-self:flex-start;} /* If any ancestor sets overflow:hidden, sticky breaks. Ensure content allows overflow. */ .body .content{overflow:visible !important;} /* ===== cjsinside-like header positioning ===== */ .cjshead{position:relative;width:1000px;height:120px;margin:0 auto} .cjshead .js_logo{position:absolute;top:20px;left:0;width:260px;margin:0;padding:0} .cjshead .js_logo img{max-height:40px} .cjshead .js_search{position:absolute;left:272px;top:52px;transform:none;width:456px;margin:0} .cjshead .js_search_form{display:flex;align-items:center;width:456px;height:46px;background:#3b4890;padding:4px;box-sizing:border-box;border:0;border-radius:0} .cjshead .js_search_form input{flex:1;height:38px;background:#fff;border:0;outline:0;padding:0 9px;font-size:14px;font-weight:700;color:#333} .cjshead .js_search_form input::placeholder{color:#999;font-weight:700} .cjshead .js_search_form button{width:45px;height:44px;margin-left:0;border:0;background:#3b4890;color:#fff;font-size:0;position:relative;cursor:pointer} .cjshead .js_search_form button:before{content:'';position:absolute;inset:0;margin:auto;width:14px;height:14px;border:2px solid #fff;border-radius:50%;transform:translate(-2px,-2px)} .cjshead .js_search_form button:after{content:'';position:absolute;width:8px;height:2px;background:#fff;transform:rotate(45deg);right:12px;bottom:10px} /* ===== cjsinside-like body grid ===== */ .main_content{width:1000px;margin:17px auto 0} .left_content{float:left;width:728px} .right_content{float:right;width:250px} .main_content:after{display:table;clear:both;content:''} .js_grid{display:block;gap:0;align-items:flex-start;flex-wrap:nowrap} .js_main{float:left;width:728px} .js_aside{float:right;width:250px} .cjs_linebar_inplace{float:left;width:100%} /* ===== cjsinside-like GNB bar ===== */ .gnb_bar{min-width:1000px;background-color:#3b4890;border:1px solid #3b4890;border-width:1px 0} .gnb{width:1000px;height:44px;margin:0 auto} .gnb .js_nav_list{height:44px} .gnb .js_nav_list a{font-size:14px;font-weight:700;letter-spacing:0.025em;text-shadow:0 -1px #1f2552} .gnb .js_nav_list a:hover{text-decoration:underline;background:none} /* cjs class aliases for compatibility */ .cjs_logo{overflow:hidden;position:absolute;top:20px;left:0;text-align:center} .cjs_logo a,.cjs_logo a img{display:block} .wrap_search{position:absolute;left:272px;top:52px} .top_search{width:456px;height:46px;background:#3b4890} .top_search .in_keyword{background:transparent;width:100%;height:38px;padding:0 9px;border:none;outline:none;color:#333;font-size:14px;font-weight:700} .top_search .bnt_search{float:left;width:45px;height:44px} /* ===== Fix: GNB alignment & bar visibility ===== */ .js_nav .js_inner{height:44px} .js_nav_list{justify-content:flex-start;padding:0;margin:0} .js_nav_list li{list-style:none} /* ===== Fix2: force GNB list to the left ===== */ .js_nav{width:100%;} .js_nav .js_inner{width:1000px!important;margin:0 auto!important;display:block!important;text-align:left!important} .js_nav_list{display:flex!important;justify-content:flex-start!important;align-items:center!important;width:auto!important;margin:0!important;padding:0!important} /* In case some global rule adds auto margins */ .js_nav_list{margin-left:0 !important;margin-right:auto !important;} /* ===== Fix3: js_inner may be flex-end / right-aligned ===== */ .js_nav{position:relative;} .js_nav .js_inner{width:1000px!important;margin:0 auto!important;display:flex!important;justify-content:flex-start!important;align-items:center!important;text-align:left!important} /* kill any float/right alignment coming from legacy rules */ .js_nav_list{float:none!important;position:relative!important;left:0!important;right:auto!important} /* if some rule pushes the list with auto margins */ .js_nav_list{margin-left:0 !important;margin-right:0 !important;} /* also ensure nav right area doesn't steal space */ .js_nav .js_nav_list + *{margin-left:0 !important;} /* ===== Fix4: override gnb_pc/gnb flex-end rules ===== */ /* The DOM shows: