#wrapper {position:relative; width:100%; height:auto; min-height:100%; -webkit-overflow-scrolling:touch; } #wrapper header {position:fixed; top:0; left:0; width:100%; z-index:101;transform:translateY(0%); transition: all .3s; } #wrapper header.hid {transform:translateY(-100%);} #wrapper header.open { } #wrapper header .hd_bg {position:absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(/images/bg_menu_cover1.jpg) no-repeat; background-position:top center !important; background-size:cover !important; z-index: 2; transition:all .5s;} #wrapper header .hd_bg:after {content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.0);} /* #wrapper header .hd_bg.b_1 { background-color: red !important; } #wrapper header .hd_bg.b_2 { background-color: brown !important; } #wrapper header .hd_bg.b_3 { background-color: #693e3e !important; } #wrapper header .hd_bg.b_4 { background-color: #3576a1 !important; } #wrapper header .hd_bg.b_5 { background-color: orange !important; } */ #wrapper header m_count {display:none;} #wrapper header .hd_wrp {position:relative; } #wrapper header .top_pos {position:relative; max-width:var(--default_wd); width:100%; height:var(--default_nav); left:0; right:0; margin:auto; font-size:0; z-index: 3; transition:all .3s;} #wrapper header .top_pos:hover {height:220px;} #wrapper header .top_pos .logo {position: absolute; left: 0px; top:20px; font-size:0; z-index: 1; cursor:pointer; } #wrapper header .top_pos .logo img {height:65px; display:inline-block;} /* transform:skewX(-15deg); */ #wrapper header .top_pos .menu {display:inline-block; width:calc(100% - 450px); margin-left:180px; height: 100%; transition:all .3s; padding:0; border: 0px solid red;} #wrapper header .etc_box {height:var(--bg_sub_notice_h); border-bottom:0px solid #eee; position:relative; margin:auto; z-index:2; } #wrapper header .etc_box:before {content:""; position:absolute; top:0; left:0; width:calc(50% - 700px); height:100%; background:var(--bg_sub_notice);} #wrapper header .etc_box:after {content:""; position:absolute; top:0; right:0; width:calc(50% - 700px); height:var(--bg_sub_notice_h_s); background:var(--bg_sub_notice_s);} #wrapper header .etc_box .eb_pos {position:absolute; top:0; left:0; right:0; margin:auto; z-index:2; max-width:var(--default_wd); width:100%; height:100%; padding:0 0; font-size:0;} #wrapper header .etc_box .eb_pos .sp_sec {position:relative; display:inline-block; vertical-align:top; height:100%; font-size:0;} #wrapper header .etc_box .eb_pos .sp_sec.s1 {width:400px; background:var(--bg_sub_notice); z-index:1; padding:0 20px; border-radius:0 0 5px 0;} #wrapper header .etc_box .eb_pos .sp_sec.s1:after {content:""; position:absolute; top:0; right:-var(--bg_sub_notice_h); border-left:calc(var(--bg_sub_notice_h) - 40px) solid var(--bg_sub_notice); border-bottom:var(--bg_sub_notice_h) solid transparent; display:none;} #wrapper header .etc_box .eb_pos .sp_sec.s2 {width:calc(100% - 750px); height: var(--bg_sub_notice_h_s); padding: 0 0 0 100px; background:var(--bg_sub_notice_s);} #wrapper header .etc_box .eb_pos .sp_sec.s2:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2);} #wrapper header .etc_box .eb_pos .sp_sec.s3 {width:350px; height: var(--bg_sub_notice_h_s); background:var(--bg_sub_notice_s);} #wrapper header .etc_box .eb_pos .sp_sec.s3:before {content:""; position:absolute; top:0; left:-30px; border-right:30px solid #001b33; border-top:60px solid transparent; display:none;} #wrapper header .etc_box .eb_pos .sp_sec h2, #wrapper header .etc_box .eb_pos .sp_sec .call_con {position:relative; display:inline-block; vertical-align:middle;} #wrapper header .etc_box .eb_pos .sp_sec h2 {position: absolute; color:#fff; font-size:10px; font-weight:400;} #wrapper header .etc_box .eb_pos .sp_sec .call_con {width:100%; padding-left:20px;} #wrapper header .etc_box .eb_pos .sp_sec .call_con:before {content:""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 35px; border-left: 1px dashed rgba(255,255,255,0.15);} #wrapper header .etc_box .eb_pos .sp_sec.s1 h2 {top: 50%; left: 0; } #wrapper header .etc_box .eb_pos .sp_sec.s2 h2 {top: 50%; left: 25px; background: #0161ce; color: rgba(255,255,255,0.8); padding:1px 8px; border-radius: 30px; transform: translateY(-50%);} #wrapper header .etc_box .eb_pos .sp_sec count {position: absolute; top: 50%; right: 50px; transform: translateY(-50%); font-size:11px; color:#eee;;} #wrapper header .etc_box .eb_pos .sp_sec count point {color:orange;} #wrapper header .plus_area {position:absolute; bottom:-60px; right:0; width:50%; height:60px; background:#f4f4f4;transform:translate(0,10px); transition:all .7s;border-radius: 35px 0 0 35px; z-index: 1;-webkit-backdrop-filter: blur(50px); backdrop-filter: blur(5px);} #wrapper header.hid .plus_area {/*transform:translateY(-100%); transform:translate(100%,10px);*/ opacity: 0;transform:translate(0, -100%);} #wrapper header .pa_wd {position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width:calc(var(--default_wd)/2); width:100%;} #wrapper header .pa_wd .lastest {position:relative; padding-right:70px;} #wrapper header .pa_wd .kakao {position: absolute; top: 50%; right: 25px; transform: translateY(-50%); width:30px; font-size:0; background:#ffe500; text-align:left; border-radius:100%;} #wrapper header .pa_wd .kakao:after {content:""; display:block; padding-top:100%;} #wrapper header .pa_wd .kakao i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:22px; color:#000;} #wrapper header .pa_wd .kakao span {display:inline-block; vertical-align:middle; font-size:12px; color:#333; padding-left:10px; display:none;} #wrapper header .pa_wd .kakao_channel a {position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid red; opacity:0;} #wrapper header .pa_wd .kakao_channel a img {position:absolute; top:0; left:0; width:100%; height:100%;} #wrapper header button {position:absolute; top:0; left:0; width:80px; border: 0; padding:0; margin: 0; cursor: pointer; background: transparent; transition:all .3s; z-index:1; display:none;} #wrapper header button:after {content:""; display: block; padding-top:100%;} #wrapper header button i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:#fff;transition:all .3s; } #wrapper header .icon {position:absolute; top:0; width:80px; border: 0; padding:0; margin: 0; cursor: pointer; background: transparent; transition:all .3s;} #wrapper header .icon:after {content:""; display: block; padding-top:100%;} #wrapper header .icon i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:#fff;transition:all .3s; } #wrapper header .icon.user {right:80;} #wrapper header .icon.cart {right:0; z-index:1;} #wrapper header .etc_box .latest_aca_list {position: relative;height: var(--bg_sub_notice_h_s); overflow: hidden;} #wrapper header .etc_box .latest_aca_list ul.real_study {position: absolute;top: 0;left: 0;right: 0; width: calc(100% - 160px);} #wrapper header .etc_box .latest_aca_list ul.real_study li {height: 60px;font-size: 0; text-align: left; width: 100%;text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} #wrapper header .etc_box .latest_aca_list ul.real_study li.none {font-size: 11px; color:#eee; line-height:60px;} #wrapper header .etc_box .latest_aca_list ul.real_study li a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;} #wrapper header .etc_box .latest_aca_list ul.real_study li h4, #wrapper header .etc_box .latest_aca_list ul.real_study li when {display: inline-block; vertical-align: middle; height: 60px;line-height: 60px;} #wrapper header .etc_box .latest_aca_list ul.real_study li h4 {font-size: 12px; color: #fff; font-weight: 500;} #wrapper header .etc_box .latest_aca_list ul.real_study li when {font-size: 11px; color: #ddd; font-weight: 300;} #wrapper .contents {position:relative; min-height:100%; height:auto; padding: 0px 0 var(--btm_pad) 0; transition:all .3s; font-size:15px; background: #fff; transition: all .3s; } #wrapper .contents .nav_sub_area {position:relative; width:100%; left:0; right:0; margin:50px auto 0 auto; padding:0; transition:all .3s; overflow:hidden; z-index:10;} #wrapper .contents .q_area {position:relative; max-width:var(--default_wd); width:100%; left:0; right:0; margin:0 auto; padding:0 28px; font-size:0; border:0px solid #eee; } #wrapper .contents .q_area:before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:300%; height:1px; z-index:1; border-top:1px dashed #eee;} #wrapper .contents .q_area > i {display:inline-block; vertical-align:middle; font-size: 18px; color:#000; background: #fff; position: relative; z-index: 1;} #wrapper .contents .q_area > img {display:none;} #wrapper .contents .plus_area {position:absolute; top:90px; right:0; width:50%; height:60px; background:#f4f4f4;border-radius: 35px 0 0 35px; z-index: 100;/*-webkit-backdrop-filter: blur(50px); backdrop-filter: blur(5px);*/} #wrapper .contents .pa_wd {position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width:calc(var(--default_wd)/2); width:100%;} #wrapper .contents .pa_wd .lastest {position:relative;/* padding-right:70px;*/} #wrapper .contents .pa_wd .kakao {position: absolute; top: 50%; right: 25px; transform: translateY(-50%); width:30px; font-size:0; background:#ffe500; text-align:left; border-radius:100%; display:none;} #wrapper .contents .pa_wd .kakao:after {content:""; display:block; padding-top:100%;} #wrapper .contents .pa_wd .kakao i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:22px; color:#000;} #wrapper .contents .pa_wd .kakao span {display:inline-block; vertical-align:middle; font-size:12px; color:#333; padding-left:10px; display:none;} #wrapper .contents .pa_wd .kakao_channel a {position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid red; opacity:0;} #wrapper .contents .pa_wd .kakao_channel a img {position:absolute; top:0; left:0; width:100%; height:100%;} #wrapper footer {position:absolute; left: 0;bottom: 0; width:100%; height:var(--btm_pad); background:#fafafa; transition: all .3s; z-index:2; overflow: hidden;} #wrapper footer ul.color {position:absolute; width:100%; bottom:0; left:0; display:flex; z-index:1;} #wrapper footer ul.color li {flex:1; height:3px;} #wrapper footer ul.color li.c1 {background:#000;} #wrapper footer ul.color li.c2 {background:#fc9103;} #wrapper footer ul.color li.c3 {background:#056faf;} #wrapper footer ul.color li.c4 {background:#4bad26;} #wrapper footer ul.color li.c5 {background:#fc0304;} #wrapper footer ul.color li.c6 {background:#98419c;} .content_hdbx {position:fixed; top:0; left:0; width:100%; height:70px; text-align:center; border-bottom:0px solid #eee; background:#003e67; z-index:1001;transition:all .2s;transform: translateY(-100%);} .content_hdbx.move {transition:all .2s;transform: translateY(0%);} .content_hdbx .cwb_pos {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:var(--default_wd); width:100%; padding:0 25px; text-align:left; transition:all .5s;} .content_hdbx.move .cwb_pos {transition:all .5s;} .content_hdbx .title_box {display:inline-block; width:100%; position:relative;} .content_hdbx h2 {position:relative; font-family:var(--neo); font-size:18px; line-height:120%; color:#fff;} .content_hdbx h2 span {display:inline-block; vertical-align:middle;} .content_hdbx h2 .c1 {font-weight:600; color:#eee; padding-right:5px; } .content_hdbx h2 .c2 {font-weight:800;} .content_hdbx .location_box {position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:0; line-height:100%;} .content_hdbx .location_box i, .content_hdbx .location_box a {display:inline-block; vertical-align:middle; transition:all .2s; line-height:100%;} .content_hdbx .location_box i {font-size:13px; color:rgba(255,255,255,0.7); } .content_hdbx .location_box a {font-size:13px; color:rgba(255,255,255,0.7); font-family:var(--neo); font-weight:bold;} .content_hdbx .location_box a:hover {color:#fff; transition:all .2s;} .content_hdbx .location_box a.last {color:yellow} .content_hdbx .location_box a:first-child {color:#fff; font-weight:bold;} .content_hdbx .location_box i {display:inline-block; vertical-align:middle; padding:0 5px; font-size:13px;} .sub_nv_ar {position:relative; border-bottom:1px solid var(--default_sel_line); background:#fff; display:none; width:100%; z-index:11;} .sub_nv_ar nav {position:relative; left:0; right:0; max-width:var(--default_wd); width:100%; height:var(--default_sel_nav); margin:auto;} .sub_nv_ar nav > ul {position:relative; font-size:0;border-left:1px solid var(--default_sel_line);} .sub_nv_ar nav > ul > li {display:inline-block; vertical-align:middle; position:relative; width:calc(50% - (var(--default_sel_nav)/2)); height:100%; border-right:1px solid var(--default_sel_line); background:#fff;} .sub_nv_ar nav > ul > li.home {width:var(--default_sel_nav); position:relative; border-right:1px solid var(--default_sel_line);} .sub_nv_ar nav > ul > li.home:after {content:""; display:block; padding-top:100%; } .sub_nv_ar nav > ul > li > a {position:absolute; top:0; left:0; width:100%; height:100%; font-size:15px; cursor:pointer;} .sub_nv_ar nav > ul > li > a > span {position:absolute; top:50%; left:0; width:100%; padding:0 35px 0 20px; text-align:left; transform:translateY(-50%); line-height:120%; font-size:13px; color:rgba(0,0,0,0.8); transition:all .2s; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-weight:bold;} .sub_nv_ar nav > ul > li > a > i {position:absolute; top:50%; line-height:100%; font-size:25px; color:#383838; transform:translateY(-50%);} .sub_nv_ar nav > ul > li > a > i.xi-home-o {left:50%; transform:translate(-50%, -50%);} .sub_nv_ar nav > ul > li > a > i.xi-angle-down-min {right:10px;} .sub_nv_ar nav > ul > li .list {position:absolute; top:var(--default_sel_nav); left:-1; ; width:calc(100% + 2px); z-index:10;} .sub_nv_ar nav > ul > li .list.l1 {width:calc(100% + 2px);} .sub_nv_ar nav > ul > li .list.l2 {width:calc(100% + 1px);} .sub_nv_ar .empty {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fafafa; z-index: 1;} ul.sub_sel_cate {position:relative; top:0; left:0; width:100%; border:1px solid var(--default_sel_line); border-width:0 1px 1px 1px; background:#fafafa;} ul.sub_sel_cate > li {display:inline-block; letter-spacing: 0em; width: 100% !important; font-family:var(--neo) ; border-top: 1px solid var(--default_sel_line);} ul.sub_sel_cate > li > a {position:relative !important; font-size:13px; display:block; padding:15px 20px; color:#333;} ul.sub_sel_cate > li > a.on {color:red; font-weight:bold;} ul.sub_sel_cate.sub > li > a.on {color:#2979df; font-weight:bold;} ul.sub_sel_cate > li > ul.depth3 {position:relative; padding:0px 20px 25px 20px; border-top:1px dashed var(--default_sel_line);} ul.sub_sel_cate > li > ul.depth3 li {display:inline-block; letter-spacing: 0em; width: 100% !important; font-family: var(--neo); border:0;} ul.sub_sel_cate > li > ul.depth3 li > a {position:relative !important; font-size:15px; display:block; color:#333;} ul.sub_sel_cate > li > ul.depth3 li > a.on {color:red;} ul.sub_sel_cate > li > ul.depth3 li > a:before {content:"ㆍ"; } .title_area {position:relative; z-index:10; } .title_area .ta_wrap {position:relative; left: 0; right: 0; max-width: 1500px; width: calc(100% - 50px); height: 350px; margin: auto; border-bottom:1px dashed #c9c9c9;} .title_area .ta_wrap:before, .title_area .ta_wrap:after {content:""; position:absolute; bottom:0; width: 7px; height: 7px; border:1px solid #c9c9c9; background: #fff; border-radius: 100%; transform: translateY(50%);} .title_area .ta_wrap:before {left: 0;} .title_area .ta_wrap:after {right: 0;} .title_area .title_box {position:absolute; bottom:40px; left:50%; transform:translateX(-50%); max-width:var(--default_wd); width:100%; margin:0 auto; padding:0 25px; text-align:left; z-index:1;} .title_area .title_box h2 {position:relative; font-family:var(--neo); line-height:120%; color:#000; padding:0 0 0 0px;} .title_area .title_box h2 span {display:inline-block; vertical-align:middle; line-height:110%} .title_area .title_box h2 .c1 {/*font-family:var(--neo); font-weight:normal;*/ font-weight:500; color:#555; letter-spacing:-0.05em; width:100%; font-size:15px; padding:0 0 7px 3px; display:none;} .title_area .title_box h2 .c2 {font-weight:800; font-size:25px;} .title_area ul.color {position:absolute; top:50%; left:0; transform:translateY(-50%); width:14px; font-size:0; line-height:100%;} .title_area ul.color li {display:inline-block; vertical-align:middle; width:calc(50% - 4px); margin:2px; border-radius:100%; line-height:100%;} .title_area ul.color li:after {content:""; display:block; padding-top:100%;} .title_area ul.color li.cr1 {background:#000;} .title_area ul.color li.cr2 {background:#fc9103;} .title_area ul.color li.cr3 {background:#056faf;} .title_area ul.color li.cr4 {background:#4bad26;} .title_area ul.color li.cr5 {background:#fc0304;} .title_area ul.color li.cr6 {background:#98419c;} .title_area .location_set {position:absolute; left:0; right:0; max-width:var(--default_wd); margin:auto; bottom:0px; padding: 0 27px; font-size:0; line-height:100%; text-align:left;} .title_area .url {display:inline-block; width:100%; font-size:9px; line-height:100%; padding:0 0 8px 0; color:#ccc; letter-spacing:0.05em; display:none;} .title_area .location_box {display:inline-block; white-space:nowrap; padding: 13px 0 2px 2px; font-size:0; line-height:100%;} .title_area .location_box > i, .title_area .location_box a {display:inline-block; vertical-align:middle; transition:all .2s; line-height:100%;} .title_area .location_box > i {font-size:12px; color:rgba(0,0,0,0.7); } .title_area .location_box a {font-size:12px; color:rgba(0,0,0,0.7); font-family:var(--neo); } .title_area .location_box a:hover {color:black; transition:all .2s;} .title_area .location_box a.last {color:#000; font-weight:600;} .title_area .location_box a:first-child {color:black; } .title_area .location_box a i {font-size:14px;} .title_area .location_box > i {display:inline-block; vertical-align:middle; padding:0 5px; font-size:10px;} @media screen and (max-width: 1160px){ #wrapper {min-height:auto;} #wrapper header {background:#fff; height:80px; border-bottom:1px solid #eee;} #wrapper header m_count {display:block; position:absolute; top:50%; right:20px; font-size:12px; transform:translateY(-50%); font-weight:500; color:#000;} #wrapper header m_count point {color:red; font-weight:600;} #wrapper header .hd_bg {display:none;} #wrapper header .top_pos, #wrapper header .top_pos:hover {height:100%;} #wrapper header .top_pos .logo {transform: translate(-50%, -50%); top:50%; left: 50%; width:auto; height:45%; text-align:center;} #wrapper header .top_pos .logo img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:auto; height:100%;} #wrapper header .top_pos .logo img.hanji {width:auto; height:50px;} #wrapper header .top_pos .logo span {display:none;} #wrapper header .top_pos .logo .logo_txt {width:auto; padding:0; display:none;} #wrapper header .top_pos .logo .logo_txt h2 {text-align:center;} #wrapper header .top_pos .logo .hanji_logo {width:180px;background: url(/images/logo_hanji.png) no-repeat; transform:translate(-50%, -50%); left:50%;} #wrapper header .top_pos .menu {display:none;} #wrapper header .plus_area {bottom:0; z-index:3;-webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); width:80px; height:100%; background:none;transform:none;border-radius: 0;} #wrapper header .pa_wd {left:50%; transform: translate(-50%, -50%); max-width:auto; width:auto;} #wrapper header .pa_wd .lastest {display:none;} #wrapper header .pa_wd .kakao {left:50%; right:initial; transform: translate(-50%, -50%); width:35px; font-size:0; background:#ffe500; text-align:left; border-radius:100%;} #wrapper header button {position:fixed; top:0; left:0; display:inline-block;} #wrapper header button i {color:#000;} #wrapper header .icon i {color:#000;} #wrapper header .etc_box {display:none;} #wrapper header .etc_box .eb_pos {padding:0 0px;} #wrapper header .etc_box .eb_pos .sp_sec.s1 {width:400px; background:var(--bg_sub_notice); z-index:1;} #wrapper header .etc_box .eb_pos .sp_sec.s2 {width:calc(100% - 400px); padding: 0 0 0 125px; } #wrapper header .etc_box .eb_pos .sp_sec.s3 {display:none;} #wrapper header .etc_box .eb_pos .sp_sec count {right: 20px;} #wrapper header .etc_box .eb_pos .sp_sec .call_con {padding-left:30px;} #wrapper header .etc_box .eb_pos .sp_sec .call_con:before {display:none;} #wrapper .contents {padding: 80px 0 var(--btm_pad) 0;} #wrapper .contents .nav_sub_area {display:none;} #wrapper .contents .plus_area {position:fixed; top:0; width:80px; height:80px; background:none;border-radius: 0; transform:translateY(0); transition: all .3s; z-index:102;} #wrapper .contents .plus_area.hid {transform:translateY(-100%);} #wrapper .contents .pa_wd {left:50%; transform: translate(-50%, -50%); max-width:auto; width:auto;} #wrapper .contents .pa_wd .lastest {display:none;} #wrapper .contents .pa_wd .kakao {left:50%; right:initial; transform: translate(-50%, -50%); width:35px; font-size:0; background:#ffe500; text-align:left; border-radius:100%;} .sub_nv_ar {display:inline-block; } .sub_nv_ar nav > ul {border:0;} .sub_nv_ar nav > ul > li.navi_sub_m2_box {border:0;} .sub_nv_ar nav > ul > li.navi_sub_m2_box ul.sub_sel_cate {border-width:0 0px 1px 1px;} .sub_nv_ar nav > ul > li > a > span { padding:0 30px 0 15px; font-size:12px;} .sub_nv_ar nav > ul > li > a > i {font-size:16px;} .sub_nv_ar nav > ul > li > a > i.xi-angle-down-min {right:8px;} .title_area .ta_wrap {width: 100%; height: auto; border:0;} .title_area .ta_wrap:before, .title_area .ta_wrap:after {display:none;} .title_area .title_box {padding:35px 35px 0 35px; position:relative; bottom:initial;} .title_area .title_box h2 .c1 {display:none} .title_area .title_box h2 .c2 {} .title_area .location_box {display:none;} } @media screen and (max-width: 650px){ #wrapper header {height:55px; } #wrapper header m_count {right:15px; font-size:10px;} #wrapper header .top_pos .logo img.hanji {height:25px;} #wrapper header .top_pos .logo .logo_txt h2 {font-size:15px;} #wrapper header .top_pos .logo .hanji_logo {width:110px;} #wrapper header .plus_area {width:55px;} #wrapper header .pa_wd .kakao {width:25px; } #wrapper header .pa_wd .kakao i {font-size:18px;} #wrapper header button {width:55px; } #wrapper header button i {font-size:20px;} #wrapper header .icon {width:55px;} #wrapper header .icon i {font-size:20px;} #wrapper header .icon.user {right:35px;} #wrapper header .icon.cart {right:0;} #wrapper .contents {padding: 55px 0 var(--btm_pad) 0; } #wrapper .contents .nav_sub_area {padding:25px 22px 0 22px;} #wrapper .contents .plus_area { width:55px; height:55px; } #wrapper .contents .pa_wd .kakao {width:25px; } #wrapper .contents .pa_wd .kakao i {font-size:18px;} #wrapper footer {/*position:relative; height:auto;*/} .content_hdbx {height:55px;} .content_hdbx .cwb_pos {padding:0 20px;} .content_hdbx h2 {font-size:14px;} .content_hdbx .location_box {display:none;} ul.sub_sel_cate > li > a {font-size:11px; padding:10px 15px;} .title_area .title_box {margin:30px auto 0 auto; padding:0 25px;} .title_area .title_box h2 .c2 {font-size:20px;} } /* 하단정보 */ .btm_nav {position:relative; font-size:0; overflow:hidden; background:#fff; padding:0 0 20px 0;} .btm_info {position:relative; margin:0 auto; max-width:var(--default_wd); width:100%; padding:50px 50px; font-size:0; background:#fafafa;} .btm_info .logo {display:inline-block; vertical-align:top; width:60px; position:absolute; top: 50px; right: 50px; z-index:1;} .btm_info .logo img {width:100%;} .btm_info .info_box {display:inline-block; vertical-align:top; width:100%; text-align:left; padding:0 0 0 0px; position:relative; z-index:1;} .btm_info .detail {display:inline-block; vertical-align:top; width:100%; font-size:0;} .btm_info .detail span {display:inline-block; vertical-align:middle; padding:0px 10px 0px 0; font-size:12px; color:#555; line-height:150%;font-family: var(--neo); font-weight: 600;} .btm_info .detail span.cmp {width:100%; padding:0px 10px 10px 0; font-size:17px; color:#000; font-weight: 700;} .btm_info .detail span.cmp img {width:35px; display:inline-block; vertical-align:middle; padding-right:5px;} .btm_info .detail span a {color:#555;} .btm_info .detail span i {display:inline-block; padding-right:5px; vertical-align:middle; color:#000;} .btm_info .detail span em {display:inline-block; padding-right:5px; font-style:normal; color:#555; font-weight: 300;} .btm_info p {display:inline-block; width:100%; font-size:11px; color:rgba(0,0,0,0.45); padding-top:7px;} .btm_info .rest {position:absolute; top:30px; left:770px; width:200px;} .btm_info .rest h4 {position:relative; font-size:15px; font-weight:600; color:#000; padding:0 0 15px 0;} .btm_info .rest h4 i {display:inline-block; vertical-align:middle; position:relative; font-size:17px; font-weight:normal; color:#000; padding:0 5px 3px 0;} .btm_info .rest .bnk_bx {position:relative; line-height:110%; border-left:1px dashed #ddd; padding:3px 0 3px 18px; width:calc(100% - 5px); margin:0 0 0 5px;} .btm_info .rest .bnk_bx bank, .btm_info .rest .bnk_bx b_num, .btm_info .rest .bnk_bx who {position:relative; line-height:110%; display:inline-block; width:100%; font-weight:500;} .btm_info .rest .bnk_bx bank {font-size:12px; color:#333;} .btm_info .rest .bnk_bx b_num {font-size:12px; padding:4px 0 7px 0;font-weight:900; color:#000;} .btm_info .rest .bnk_bx who {font-size:12px; color:#000;} .btm_info .copy {display:inline-block; width:100%; font-size:11px; color:rgba(0,0,0,0.7); padding-top:20px;} .btm_info .copy span {color:#000; display:inline-block; padding:0 10px;} .btm_info ul.sns_bnr {position:relative; margin-top:25px; font-size:0; text-align:center;} .btm_info ul.sns_bnr li {display:inline-block; vertical-align:middle; font-size:20px; margin-right:10px; color:#000;} .btm_info ul.sns_bnr li:last-child {margin:0;} .btm_info .logo_line {position:absolute; top:0; right:0; height:100%; opacity:0.05;} .btm_info .logo_line img {height:100%; } .select_replace {position:relative; font-size:0; margin-top:15px;} .select_replace > h3{display:inline-block; vertical-align:top; width:100%; text-align:left; position:relative; font-size:0; border:1px solid #eee;border-radius:3px;} .select_replace > h3:first-child {margin:0;} .select_replace > h3 span{display:inline-block; width:100%; font-size:12px; line-height:40px; padding:0 15px; background:#fff; border-radius:7px; color:#333;position:relative; transition:all .3s; cursor:pointer;} .select_replace > h3 span > i{position:absolute; top:50%; right:10px; transform:translateY(-50%); font-size:13px; color:#333;} ul.sr_kind{position:absolute; bottom:50px; left:0; width:100%;transition:all .3s; z-index:10; visibility: hidden; opacity: 0; background:#fff; border:1px solid #eee; padding:15px; border-radius:7px;max-height:300px; height:auto;} ul.sr_kind.show{bottom:45px; transition:all .3s;opacity: 1; visibility: visible; } ul.sr_kind {overflow-y:overlay;} ul.sr_kind:: {-ms-overflow-style: none;} ul.sr_kind::-webkit-scrollbar {background: transparent; width:2px; height:2px; border-radius:15px;} ul.sr_kind::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); border-radius:15px; } ul.sr_kind li {position:relative; font-size:12px; color:#333; transition:all .3s; cursor:pointer; padding:3px 0;} @media screen and (max-width: 1160px){ .btm_nav {display:none;} .btm_info {width:100%; padding:40px;} .btm_info .info_box {padding:0 0 0 0px; width:100%;} .btm_info .rest {position:relative; width:100%; top:0; left:0;} .btm_info .rest h4 {font-size:12px; font-weight:500; padding:0 5px 0 0; display:inline-block;} .btm_info .rest h4 i {font-size:12px; padding:0 5px 0px 0;} .btm_info .rest .bnk_bx {border-left:0; padding:0px 0 0px 0px; width:auto; margin:0 0 0 0px; display:inline-block; } .btm_info .rest .bnk_bx bank, .btm_info .rest .bnk_bx b_num, .btm_info .rest .bnk_bx who {width:auto;} .btm_info .rest .bnk_bx bank {font-size:12px; color:#333;} .btm_info .rest .bnk_bx b_num {font-size:12px; padding:0 5px ;font-weight:700; color:#000;} .btm_info .rest .bnk_bx who {font-size:12px; color:#000;} .btm_info ul.sns_bnr {margin-top:15px; text-align:left;} .select_replace {display:none;} } @media screen and (max-width: 800px){ .btm_info {padding:30px;} .btm_info .logo {width:100%; text-align:left;} .btm_info .logo img {width:40px;} .btm_info .info_box {padding:0px 0 0 0; width:100%; text-align:left;} .btm_info .detail span {padding:0 10px 3px 0; font-size:11px; line-height:100%;} .btm_info .detail span.cmp {font-size:13px; font-weight: 700;} .btm_info .detail span i {padding-right:2px;} .btm_info .detail .hd {display:none;} .btm_info p {font-size:10px; line-height:150%;} .btm_info p .hd {display:none;} .btm_info .copy {font-size:10px; padding-top:10px;} .btm_info .copy span {font-size:0; padding:0 2px;} .btm_info ul.sns_bnr li {font-size:18px; margin-right:7px;} .btm_info .logo_line {transform: translateX(20%);} } @media screen and (max-width: 650px){ .btm_info .detail span {font-size:10px; line-height:100%;} .btm_info .rest {margin-top:5px;} .btm_info .rest h4 {font-size:10px; font-weight:500; padding:0 5px 0 0; display:inline-block;} .btm_info .rest h4 i {font-size:10px; padding:0 0px 0px 0;} .btm_info .rest .bnk_bx bank {font-size:10px;} .btm_info .rest .bnk_bx b_num {font-size:10px; } .btm_info .rest .bnk_bx who {font-size:10px;} .btm_info p {font-size:9px; line-height:150%;} .btm_info .copy {font-size:9px;} } .bg_color {position: fixed; left:0; width: 100%; height: calc(100% - 50px); z-index: -10;} .bg_color.b_top {top:0;} .bg_color.b_bottom {bottom:0;} .color_t {background:#fff;} .color_b {background:#fafafa;} /* 한지축제 D-Day 카운트 */ .biz_wrap .count_day {position:absolute; top:-50px; right:-20px; width:100px; font-size:0; color:#000; text-align:right; } .biz_wrap .count_day .dday, .biz_wrap .count_day .now_festival {display:inline-block; vertical-align:middle;width:100%;} .biz_wrap .count_day .dday span, .biz_wrap .count_day .dday em {display:inline-block; vertical-align:middle; line-height:100%;} .biz_wrap .count_day .dday span {font-family:var(--neo); font-weight:800; color:#ddd; font-size:30px;} .biz_wrap .count_day .dday em {font-family:var(--neo); font-weight:900; font-size:30px; color:#beff00; font-style:normal;} .biz_wrap .count_day .now_festival {font-family:var(--neo); font-weight:700; color:#333; line-height:110%; margin-top:15px;font-size:0; } .biz_wrap .count_day .now_festival span {display:inline-block; font-size:12px; font-weight:900; color:red;} .biz_wrap .count_day .now_festival span.ready {color:orange;} .biz_wrap .count_day .now_festival span.ing {color:#438919;} .biz_wrap .count_day .now_festival span.pass {color:red;} @media screen and (max-width: 650px){ .biz_wrap .count_day {top:-35px; right:-15px; } .biz_wrap .count_day .dday span {font-size:18px;} .biz_wrap .count_day .dday em {font-size:18px;} .biz_wrap .count_day .now_festival {margin-top:10px;} .biz_wrap .count_day .now_festival span {font-size:11px;} .biz_wrap .since {top:15px; left:15px; font-size:10px;} } /**/ ul.mbr_login_box {position:absolute; top:50%; left:0; transform:translateY(-50%); text-align:center; width:100%; font-size:0;} ul.mbr_login_box li {display:inline-block; vertical-align:middle; position:relative;} ul.mbr_login_box li a {display:block; font-size:12px; color:#fff;border-left:1px solid rgba(255,255,255,0.1); padding:0 15px; line-height:110%;} ul.mbr_login_box li:first-child a {border:0;}