@charset "utf-8";
/* CSS Document */

/* skip */
#skipnav {overflow:hidden; position:absolute; width:100%; z-index:1000;}
#skipnav a {display:block; overflow:hidden; height:1px; width:1px; margin:0 -1px -1px 0; font-size:0; line-height:0; text-align:center;}
#skipnav a:focus, #skipnav a:hover, #skipnav a:active {width:auto; height:20px; margin:0; padding:8px 0 5px; background:#20262c; font-size:12px; font-weight:700; line-height:1; color:#fff;}

.skip_info {display:block; position:absolute; overflow:hidden; width:1px; height:1px; font-size:0; line-height:0; text-indent:100%;}

.innerwrap {max-width:1280px; margin:0 auto;}

/* header ------------------------------- */
header {background:#fdb813; width:100%; position:relative;}
header .head {display:flex; justify-content:space-between; align-items:center; padding:28px 0; position:relative;}
header .head h1 {width:18.75rem; font-size:0;}
header .head h1 img {max-width:120px;}

header .link {display:flex; justify-content:flex-end; width:18.75rem;}
.topmenu {display:flex; justify-content:flex-end; position:absolute; top:15px; right:0;}
.topmenu a {font-size:0.875rem; font-weight:500; position:relative;}
.topmenu a + a {margin-left:10px;}
.topmenu a + a::before {content:''; display:inline-block; background:#e8a911; width:1px; height:10px; margin-right:10px;}

.util {display:flex; margin-top:25px;}
.util a {padding:0 13px; position:relative; text-align:center;}
.util em {display:block; font-size:0.875rem; font-weight:500; font-style:normal; margin-top:5px;}
.util figure {margin:0;}
.util img {max-height:28px;}
.util .cnt {display:flex; justify-content:center; align-items:center; background-color:#f0141c; border-radius:1.25rem; color:#fff; font-size:0.75rem; font-weight:600; width:1.375rem; line-height:1.375rem; padding:0 0.3125rem; position:absolute; top:-0.25rem; right:10px;}

#total_sch {flex:0 0 40%; max-width:440px;}
#total_sch .wrap {display:flex; align-items:center; position:relative;}
#total_sch .wrap input {border:0; border-radius:50px; font-size:1rem; width:100%; height:48px; padding:0 70px 0 25px;}
#total_sch .wrap button {display:flex; justify-content:center; align-items:center; background:#585752; border:0; border-radius:100%; width:38px; height:38px; position:absolute; right:6px;}
#total_sch .wrap button::after {content:''; background:url(../images/common/icon_search.png) 50% 0 no-repeat; background-size:contain; width:20px; height:20px; position:absolute;}
#total_sch .close_btn {display:none; background:none; border:0; width:24px; height:24px; margin:0 0 20px auto; position:relative; text-indent:-9999px;}
#total_sch .close_btn::after {content:''; background:url(../images/content/icon_pop_close.png) 0 0 no-repeat; background-size:contain; width:12px; height:12px; position:absolute;}

header nav {display:flex; align-items:center; height:65px;}
header nav::before {content:''; background:rgba(0,0,0,0.07); width:100%; height:1px; position:absolute; bottom:65px; left:0;}

/* gnb */
#gnb {display:flex; flex:1; max-width:980px; margin:0 auto;}
#gnb > li {flex:1;}
#gnb > li > a {display:block; color:#111; font-size:1.125rem; font-weight:500; padding:20px 5px; position:relative; text-align:center;}
#gnb > li > ul {display:none; background:rgba(255,255,255,1); box-shadow:0px 0px 10px rgba(0,0,0,0.1); border-radius:10px; width:170px; position:absolute; padding:10px 0; margin-top:-7px; z-index:1;}
#gnb > li > ul > li > a {display:block; padding:7px 10px; text-align:center;}

.mArea {display:none;}
/* m_nav */
#m_nav {flex:1;}
#m_nav > li {position:relative;}
#m_nav > li > a {display:flex; align-items:center; border-bottom:solid 1px #e5e5e5; font-weight:600; padding:17px 22px; position:relative;}
#m_nav > li.has_sub > a::after {content:''; background:url(../images/common/mgnb_arrow.png) 50% 0 no-repeat; background-size:contain; width:18px; height:8px; position:absolute; right:20px;}
#m_nav > li.has_sub > a.open::after {transform:rotate(180deg); opacity:1;}
#m_nav > li > ul {display:none; background:#fafafa; padding:8px 0;}
#m_nav > li > ul li a {display:block; font-size:14px; padding:8px 32px;}

/* 상단메뉴 */
.btn_allmenu {display:flex; align-items:center; background:none; border:0; font-size:1.125rem; font-weight:500;}
.btn_allmenu i {margin-right:7px;}
.gnb_allmenu {display:none; background:#333; position:absolute; top:199px; width:200px; z-index:1;}
#allmenu > li {display:flex; border-bottom:1px solid rgba(255,255,255,0.1);}
#allmenu > li > a {display:block; color:#fff; font-weight:600; padding:13px 12px;}
#allmenu > li > ul {display:none; background:#fff; box-shadow:0 5px 16px rgba(0,0,0,0.15); position:absolute; left:200px; width:200px; padding:10px 0;}
#allmenu > li:hover > ul {display:block;}
#allmenu > li > ul > li > a {display:block; font-weight:600; padding:5px 15px;}

.msearch_btn {display:block; background:none; border:0; padding:0 7px; margin:0 5px; text-indent:-9999px;}
.msearch_btn > span {display:block; background:url(../images/common/icon_search_ver2.png) 0 0 no-repeat; background-size:contain; width:18px; height:17px;}

.spinner-master input[type=checkbox] {display:none;}
.spinner-master * {transition:all 0.3s; box-sizing:border-box;}
.spinner-master {position:relative; width:20px; height:20px;}
.spinner-master label {cursor:pointer; position:absolute; z-index:9; height:100%; width:100%; top:2px; left:0;}
.spinner-master .spinner {position:absolute; height:2px; width:100%; padding:0; background-color:rgba(0,0,0,1);}
.spinner-master .diagonal.part-1 {position:relative; float:left;}
.spinner-master .horizontal {position:relative; float:left; margin-top:5px;}
.spinner-master .diagonal.part-2 {position:relative; float:left; margin-top:5px;}
.spinner-master input[type=checkbox]#spinner_mb_on ~ .spinner-spin > .horizontal {opacity:0; margin-top:6px;}
.spinner-master input[type=checkbox]#spinner_mb_on ~ .spinner-spin > .diagonal.part-1 {transform:rotate(135deg); -webkit-transform:rotate(135deg); margin-top:10px;}
.spinner-master input[type=checkbox]#spinner_mb_on ~ .spinner-spin > .diagonal.part-2 {transform:rotate(-135deg); -webkit-transform:rotate(-135deg); margin-top:-10px;}

header.fixed {position:fixed; top:0; z-index:10;}
.prd_page header {position:relative;}

.cmnty_menu {order:1; background:#fff; border-top:1px solid #e0e0e0; padding:15px;}
.cmnty_menu h2 {border-bottom:1px solid #e0e0e0; font-size:1rem; margin-bottom:10px; padding-bottom:5px;}
.cmnty_menu > ul > li + li {margin-top:10px;}
.cmnty_menu > ul > li > a {display:block; font-size:0.875rem;}

footer {background:#222; font-size:14px; padding:2.5rem 0 4.375rem;}
footer * {color:#b8b8b8;}
.foot_menu {border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:15px; margin-bottom:20px;}
.foot_menu a {display:inline-block; margin-right:20px;}
.foot_menu a strong {color:#fff;}
.foot_info {line-height:1.6;}
.foot_info span {display:inline-block; margin-right:15px;}
footer .copy {margin-top:1.5rem;}

.info_zone {border-top:1px solid #ddd; padding:30px 0;}
.info_zone dt {font-size:1.375rem; font-weight:700;}
.cs_center {display:flex;}
.cs_center::before {content:''; background:url(../images/content/cs_tel_icon.png) 0 0 no-repeat; background-size:contain; width:60px; height:60px; margin-right:20px;}
.cs_center .tel > dd > strong {display:block; color:#f28201; font-size:1.75rem; line-height:1.2;}
.cs_center .sub_tel {display:block;}
.bank_info {display:flex;}
.bank_info::before {content:''; background:url(../images/content/bank_info_icon.png) 0 0 no-repeat; background-size:contain; width:73px; height:50px; margin-right:20px;}
.bank_info .name {display:block; color:#888; font-size:1rem; font-weight:400;}
.bank_info .bank_num {display:block; font-size:1.25rem; font-weight:500;}

.quick_wrap {display:block; width:90px; position:fixed; bottom:30px; right:10px; text-align:center; z-index:1;}
.quick_wrap h2 {font-size:0.813rem; margin-bottom:10px;}
.qmenu {background:#fff; border:1px solid #e4e4e4; border-radius:5px; overflow:hidden;}
.qmenu > li + li {border-top:1px solid #e4e4e4;}
.qmenu a {display:block; font-size:0.813rem; padding:7px 3px; text-align:center;}
.quick_recent {background:#fff; border:1px solid #e4e4e4; border-radius:5px; padding:7px; overflow:hidden; margin-top:10px;}
.quick_recent > .item {border:1px solid #e4e4e4;}
.quick_recent > .item + .item {margin-top:7px;}
.go_top {display:block; background:#d3d3d3; border:0; border-radius:100%; color:#fff; font-weight:700; line-height:1; width:50px; height:50px; padding:0; margin:10px auto 0;}
.go_top i {display:block;}
.main_container ~ .quick_wrap {display:none;}



@media screen and (min-width:1025px) {
header.fixed #gnb, header.fixed .topmenu, header.fixed nav::before, header.fixed .util em {display:none;}
header.fixed nav {height:auto;}
header.fixed .util {margin-top:0;}
header.fixed .head {padding:15px 0;}
header.fixed .head h1 {padding-left:130px;}
header.fixed .head h1 img {max-width:80px;}
header.fixed .btn_allmenu {position:absolute; top:29px;}
header.fixed .gnb_allmenu {top:79px;}
header.fixed .util .cnt {right:0;}

.mo_menu {display:none;}
}

@media screen and (min-width:769px) {
.info_zone .wrap {display:flex;}
.info_zone .wrap > div {width:50%;}
}

@media screen and (max-width:1320px) {
.innerwrap {margin-left:20px; margin-right:20px;}
}

@media screen and (max-width:1024px) {
header nav, header .util em, #total_sch, .topmenu {display:none;}
header .head {padding:10px 0;}
header .head h1 {flex:0 0 40%; text-align:center;}
header .head h1 img {max-width:65px;}
.mo_menu {display:flex; align-items:center; width:18.75rem;}
.util {margin-top:0;}
.util a {padding:0 7px;}
.util img {max-height:20px;}
.util .cnt {right:-5px;}

#total_sch.mb_sch {display:block; margin:0 auto; padding:30px 10px; background:#f0f0f0; position:fixed; top:0; left:0; width:100%; height:100%; max-width:none; z-index:10;}
.mb_sch .close_btn {display:flex !important; justify-contnet:center; align-items:center;}
/* .sch_overlay.on {position:fixed; z-index:9; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);} */

/* 모바일 전체메뉴 */
.mArea {width:100%; height:100%; position:fixed; top:0; right:0; background:#f3f3f3; z-index:9; overflow:auto; display:flex; flex-direction:column; transition:all .3s ease-in-out; transform:translateX(-100%); }
.mArea.mb_menu_top {transform: translateX(0);}
.mArea .togglemenu {position:absolute; top:12px; right:10px;}

.mlink .topmenu {display:block; background:#fff; position:relative; top:0; padding:15px;}
.mlink .util {background:#fdb813; justify-content:center;}
.mlink .util a {flex:1; padding:10px;}
.mlink .util a + a {border-left:1px solid rgba(0,0,0,0.07);}
.mlink .util em {display:block;}
.mlink .util .cnt {left:50%; top:4px;}

footer {text-align:center;}
.foot_menu a {padding:5px 10px; margin-right:0;}
.foot_info span {padding:3px 7px; margin-right:0;}

.quick_wrap {display:none !important;}
}

@media screen and (max-width:768px) {
.info_zone .wrap > div {align-items:center; flex-direction:column; text-align:center;}
.info_zone .wrap > div + div {margin-top:30px;}
.info_zone dt {margin:5px 0 5px;}
.cs_center::before {width:45px; height:45px; margin:0 auto;}
.bank_info::before {width:51px; height:35px; margin:0 auto;}
}

.click_type:hover {
    cursor: pointer;
    text-decoration: underline;
}