@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: 1240px; }
body, input, textarea, select, button, table { font-family: 'Nanum Gothic', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; color: #111 }
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; color: inherit; }
.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 }

/* 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: 1240px; background-color: #fff }
.header { position: relative; z-index: 2; width: 1100px; height: 100%; margin: 0 auto; zoom: 1 }
.header > .side { display: none; 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: 100%; margin: 0 auto }
.header:after, .body:after { display: block; clear: both; content: '' }
.content { zoom: 1 }
.content:after { display: block; clear: both; content: '' }
.content >:first-child { margin-top: 0 }
.content img { max-width: 100%; height: auto }

/* Header */
.header > h1 { float: left; padding: 20px 0; margin-right: 32px; line-height: 50px; }
.header > h1 img { vertical-align: middle; max-height: 40px; }

/* 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: auto; min-width: 1240px; 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 { background-color: #111; }
.footer a:hover, .footer a:focus { text-decoration: none }
.footer .f_info_area { overflow: hidden; width: 1200px; margin: 0 auto; padding: 82px 0 36px; border-bottom: 1px solid #222 }
.footer .f_cr_area { padding: 19px; }
.footer .copyright { width: 1200px; margin: 0 auto; font-size: 13px; line-height: 16px; color: #999;}
.footer .copyright span.name { color: #ffb606 }
.footer .copyright a.privacy_link { color: #ffb606; display: inline-block; float: right; padding-right: 30px }
.footer .copyright a:hover, .footer .copyright a:focus, .footer .copyright a:active { color: #ffb606 }
.footer .sub_desc { margin-bottom: 16px; color: #999; line-height: 36px; padding-left: 10px; box-sizing: border-box }
.footer .sub_desc a { color: inherit; }
.footer .f_info { float: left; width: 440px; box-sizing: border-box; padding-left: 20px }
.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 .sub_social a { font-size: 24px; color: #999; display: inline-block; margin-right: 20px; }
.footer .sub_social a:hover { color: #fff; }
.footer .f_info2 { overflow: hidden; margin-top: 0px }
.footer .site_map > ul { display: inline-block; overflow: hidden; padding-top: 12px }
.footer .site_map > ul li { float: left; width: 126.66px;}
/*.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 30px; font-size: 16px; font-weight: 700; color: #ccc }
/*.footer .site_map > ul ul { overflow: hidden; margin: 0 0 80px }*/
/*.footer .site_map > ul ul li { margin-left: 0 }*/
.footer .site_map > ul ul a { margin: 0 0 16px; font-size: 13px; font-weight: normal; color: #999;}
.footer .site_map > ul li:nth-child(2) ul li:last-child a { color: #ffb606 }
.footer .site_map > ul ul a:hover, .footer .site_map > ul ul a:focus, .footer .site_map > ul ul a:active { text-decoration: underline; }
.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 }

/* 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; color: inherit; font-weight: 700 }
.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 18px; line-height: 100px; font-size: 16px; font-weight: 700; color: #111 }
.gnb > ul > li > a:hover, .gnb > ul > li > a:focus, .gnb > ul > li > a:focus, .gnb > ul > li.on > a { color: #111 }
.gnb > ul .depth2 { display: none; position: absolute; top: 100%; left: 0; z-index: 2; padding: 8px 0; background-color: #ebebeb }
.gnb > ul .depth2 > li { position: relative }
.gnb > ul .depth2:after { position: absolute; top: -3px; left: 0; width: 100%; height: 3px; background-color: #111; content: '' }
.gnb > ul .depth2 a { display: block; position: relative; min-width: 140px; height: 40px; padding: 0 30px 0 20px; line-height: 40px; font-size: 14px; color: #111:font-weight:700; }
.gnb > ul .depth2 a:hover, .gnb > ul .depth2 a:active, .gnb > ul .depth2 a:focus, .gnb > ul .depth2 > li.on > a { text-decoration: underline; }
.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: '>' }

/* VISUAL */
.visual.sub { position: relative; padding: 35px 0; background-color: #f6f6f6; line-height: 30px }
.visual.sub .sub_title { position: relative; z-index: 2; width: 1100px; margin: 0 auto }
.visual.sub .sub_title h1 { position: relative; font-weight: 700; font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', '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: 36px; letter-spacing: 2px; text-align: center; }
.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: 100% }

/* Scroll to top link */
.btn_top { display: none; position: fixed; right: 0; bottom: 57px; z-index: 1000; width: 48px; height: 48px; background-color: #0066ff; font-size: 24px; color: #fff; text-align: center; opacity: 0.8; filter: alpha(opacity=80) }
.btn_top:hover { background-color: #ce5a57; 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, ng, '돋움', Dotum, AppleGothic, Helvetica, 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: 1200px; 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: 20px; 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; zoom: 1 }
    .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 { zoom: 1; }
    .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; display: block; }
    .header > h1 img { max-height: 24px; 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; -webkit-animation: ani-header 0.5s forwards; 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 { background-color: #111; }
    .footer a:hover, .footer a:focus { text-decoration: none }
    .footer .f_info_area { width: auto; margin: 0; padding: 0; border-bottom: 1px solid #222 }
    .footer .f_cr_area { padding: 0; background-color: #555; color: #fff; }
    .footer .copyright { width: auto; margin: 0; font-size: 12px; color: #999; line-height: 16px }
    .footer .copyright span { display: inline-block; margin-left: 0px }
    .footer .sub_desc { margin-bottom: 15px; color: #999; line-height: 20px; padding-left: 0; font-size: 12px; text-align: center; }
    .footer .sub_social { text-align: center; margin-bottom: 16px}
    .footer .sub_social a { display: inline-block; margin: 0 5px }
    .footer .f_info { float: none; width: auto; margin-left: 0; margin-right: 0; padding-left: 0; }
    .footer .f_logo { padding: 20px 0 0; margin-bottom: 10px; text-align: center; }
    .footer .f_logo.log_txt a { font-size: 16px; font-weight: bold; color: #555 }
    .footer .f_logo img { max-width: auto; max-height: 20px; }
    .footer .f_info2 { display: none; }
    .footer .site_map { display: none; }
    .footer .f_cr_area { padding: 8px; background-color: #111; color: #999; text-align: center; }
    .footer .f_cr_area p { margin: 0; padding: 8px 14px; }
    .footer .f_cr_area a { color: #fff; }    
    .footer .copyright a.privacy_link { display: none; }
    .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 { 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 10px; line-height: normal; font-size: normal; color: #111; font-weight: bold; background: #e7e7e7; box-sizing: border-box; }
    .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 16px; line-height: normal; color: #555; box-sizing: border-box; }
    .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: 34px; width: 44px; display: block; position: absolute; top: 14px; right: 3px; display: inline-block; }
    .gnb .menu_btn .menu_bar { width: 24px; height: 14px; position: relative; top: 6px; left: 10px; }
    .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: 24px; top: 0; }
    .gnb .menu_btn .menu_bar div.btn2 { width: 24px; top: 6px; transition: all 0.1s }
    .gnb .menu_btn .menu_bar div.btn3 { width: 24px; bottom: 0; }
    .gnb .menu_btn.opened .menu_bar div.btn1 { top: 6px; width: 20px; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); 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; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
    .body { }
    .body .lnb { display: none; }
    .body .content { overflow: hidden; }
    .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, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', '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: none }
    .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, ng, '돋움', Dotum, AppleGothic, Helvetica, 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; }
    .swiper-pagination { bottom: 8px; }
}

/* header animation */
@-webkit-keyframes ani-header {
    0% { top: -60px }
    100% { top: 0px }
}
@keyframes ani-header {
    0% { top: -60px }
    100% { top: 0px }
}