:root {
--main-color: #9f824a;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@charset "utf-8";
@font-face {
    font-family:'icomoon';
    src:url('/img_up/shop_pds/aramskin/design/news01/icomoon/icomoon.eot');
    src:url('/img_up/shop_pds/aramskin/design/news01/icomoon/icomoon.eot') format('embedded-opentype'),
        url('/img_up/shop_pds/aramskin/desi/img_up/shop_pds/appkorea99/design/app_img/sub_top.jpggn/news01/icomoon/icomoon.ttf') format('truetype'),
        url('/img_up/shop_pds/aramskin/design/news01/icomoon/icomoon.woff') format('woff'),
        url('/img_up/shop_pds/aramskin/design/news01/icomoon/icomoon.svg') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'voice_icomoon';
    src:url('/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot');
    src:url('/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot?#iefix') format('embedded-opentype'),
        url('/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.woff') format('woff'),
        url('/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.ttf') format('truetype'),
        url('/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.svg#icomoon') format('svg');
    font-weight:normal;
    font-style:normal;
}
@keyframes voice_animation {
    from {color:#168fff}
    50% {color:#16b5ff}
    to {color:#168fff}
}
@font-face {
    font-family: 'Eulyoo1945-SemiBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/Eulyoo1945-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Eulyoo1945-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/Eulyoo1945-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 언어 변경 */
#header .nav_inner { position:relative; }
#header .nav_inner .lan_change { position:absolute; top:50%; right:-100px; transform:translateY(-50%); }
#header .nav_inner .lan_change > button { position:relative; width:80px; background:#fff; border-radius:15px; border:1px solid #000; text-align:left; }
#header .nav_inner .lan_change > button > i { position:absolute; top:50%; right:10px; transform:translateY(-50%); }
#header .nav_inner .lan_change ul { padding:0; margin:0; list-style:none; display:none; }

#header .nav_inner .lan_change:hover ul { display:block; }
#header .nav_inner .lan_change ul li,
#header .nav_inner .lan_change ul li a { display:block; }

#header .nav_inner .lan_change,
#header .nav_inner .lan_change > button,
#header .nav_inner .lan_change ul li a { font-size:14px; padding:0 10px; height:30px; line-height:30px; box-sizing:border-box; }

#header .nav_inner .lan_change ul li { border:1px solid #ddd; border-radius: 0 0 15px 15px; background:#fff; }

/* 플로팅 메뉴 */
.right_floating_menu {
  list-style: none;
  position: fixed;
  right: 50px;
  bottom: 30px;
  z-index: 9999;
  text-align: right;
  padding: 0px;
  margin: 0px;
}
.right_floating_menu li + li {
  margin-top: 10px;
}
.right_floating_menu .link_item {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 42px;
  background-color: #fff;
  text-align: left;
  box-shadow: 3px 4px 10px 2px rgba(0, 0, 0, 0.2);
  transition:width .5s ease-in-out; 
}
.right_floating_menu li:hover .link_item {
  width: 254px;
}
.right_floating_menu li:nth-child(2):hover .link_item {
  width: 209px;
}
.right_floating_menu li:nth-child(3):hover .link_item {
  width: 159px;
}

.right_floating_menu .link_item .link_icon {
  display: inline-block;
  height: 84px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 26px;
  line-height: 84px;
  color: #fff;
}
.right_floating_menu .link_item .text {
  display: inline-block;
  margin-left: 10px;
  padding-left:84px;
  font-size: 20px;
  vertical-align: top;
  line-height: 84px;
  color: #000000;
  white-space: nowrap;
}
/* 아이콘 이미지 삽입 */
.right_floating_menu .link_item img, 
.right_floating_menu .link_item i {
    width: 84px;
    height: 84px;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 40px;
    line-height: 76px;
    border-radius: 50%;
    background: #ddd;
    border: 5px solid #fff;
    box-sizing: border-box;
}
/* Layout */
#viewport {min-height:100%; overflow-y:hidden;}
#viewport > #main_view,
#viewport > #sub_view {max-width:100%;width:100%}

.top_banner {display:none;position:relative;z-index:101}
.top_banner img {width:100%;vertical-align:middle}
.top_banner .pc {display:none}
.top_banner.on {display:block}
.top_banner .banner_btn_wrap {position:relative;padding-right:5px;font-size:0;text-align:right;}
.top_banner .banner_btn_wrap div#bn-today-stop {display:inline-block}
.top_banner .banner_btn_wrap div#bn-today-stop label {line-height:13px;font-size:12px;vertical-align:middle}
.top_banner .banner_btn_wrap div#bn-today-stop input {vertical-align:middle}
.top_banner .banner_btn_wrap img {width:14px}
.top_banner .banner_btn_wrap a {display:inline-block;margin-left:10px}

#header {position:relative;z-index:200;background:#fff}
#header .header_bgcolor {position:relative;/*border-bottom:5px solid var(--main-color);*/background:#ffffff;z-index:101}
#header .logo h1 {width:100%;margin:0;padding:0 120px;font-size:0;box-sizing:border-box}
#header .logo h1 span {display:table;width:100%}
#header .logo h1 a {display:table-cell;height:78px;vertical-align:middle;text-align:center}
#header .logo h1 img {width:auto;max-height:78px; transform: translateY(-7px); }
#header .logo button {position:absolute;top:0;bottom:0;width:50px;height:50px;margin:auto;border:none;background:none;font-size:0}
#header .logo button:before {font-family:'icomoon';position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;color:#cbcbcb}
#header .logo #toggle_left {left:0}
#header .logo #toggle_left:before {content:'\e902';width:40px;height:40px;font-size:40px}
#header .logo #toggle_right {right:0}
#header .logo #toggle_right:before {content:'\e905';width:28px;height:28px;font-size:28px}
#header .logo #toggle_right.toggle_search {right:50px}
#header .logo #toggle_right.toggle_search:before {content:'\e901';width:31px;height:31px;font-size:31px}
.search_recomm_wrapper {display:none; position:absolute; top:83px; width:100%; background:#fff; box-shadow:0 2px 4px rgb(0 0 0 / 10%); font-size:0;}
.search_recomm_wrapper.active {display:block;}
.search_recomm {position:relative; padding:30px 0;}
.search_recomm > div {display:inline-block; width:calc(100%/3 - 20px); margin:0 20px 0 0; font-size:17px; vertical-align:top}
.search_recomm > div h4 {margin:0 0 17px 0;}
.search_recomm .recomm_tag a {float:left; height:28px; padding:0 15px; border:1px solid #ccc; background:#fff; font-size:13px; color:#1a1a1a; line-height:28px; box-sizing:border-box; margin:0 10px 10px 0; text-align:center; border-radius:16px;}
.search_recomm .search_recomm_close {display:block; position:absolute; top:30px; right:0; font-size:17px;}

#viewport.left-open #header .logo #toggle_left.on:before,
#viewport.right-open #header .logo #toggle_right.on:before,
#header .logo #toggle_right.toggle_search.on:before {color:var(--main-color)}

#container .contents_wrap {min-height:200px}
#container .contents:after {content:'';display:block;overflow:hidden;clear:both}
#sub_view #container .contents_wrap {padding:0 0 20px}
#sub_view #container .contents_wrap .contents {padding-top:20px}

#footer { overflow:hidden;position:relative; background:#f1f1f1; }
#footer #btn_site_top {position:fixed;bottom:10px;right:10px;z-index:0;width:55px;height:55px;border:none;border-radius:50%;background:var(--main-color);font-size:0;opacity:0;transition:all .2s ease-in-out}
#footer #btn_site_top:before {content:'\e917';font-family:'icomoon';font-size:20px; color:#fff}
#footer #btn_site_top.on {opacity:.6;z-index:1000; display:none;}

@-webkit-keyframes round{
	100%{transform:rotate(360deg)}
}

@keyframes round{
	100%{transform:rotate(360deg)}
}

#footer .out_link_wrapper { max-width:1300px; margin:0 auto; font-size:0; } 
#footer .out_link_wrapper .out_link_gr { display: inline-block; width: 100%;}
#footer .out_link_gr .outer:first-child a{border-left:0;}
#footer .out_link_gr .outer a { position: relative; float: left; width: 33.33%; background-color: #fff; border-left: 1px solid #d6d6d6; padding: 0 30px 0; box-sizing: border-box;height: 75px;line-height: 75px;}
#footer .out_link_gr .outer i {font-size: 20px; position: absolute; top: 50%; bottom: 50%; margin-top: -20px; right: 30px; color: #fff; background: #393939; border-radius: 100%; width: 40px; height: 40px; text-align: center; line-height: 40px;}
#footer .out_link_gr .outer:hover i {-webkit-animation:round 2s ease;animation:round 2s ease}
#footer .out_link_gr p {font-size:20px; font-family: 'GmarketSansMedium'; display: inline-block;margin: 0;padding: 0;color: #333; font-weight: 600; letter-spacing: .05em;}
#footer .fnb ul {display:block; padding:0 4px;list-style:none;font-size:0;text-align:center}

#footer .fnb li {display:inline-block}
#footer .fnb li a {font-weight: bold; display:inline-block;position:relative;height:40px;line-height:40px;padding:0 14px;color:#555555;font-size:17px;text-align:center;white-space:nowrap}
#footer .fnb li:hover a {text-decoration: underline;}

#footer .fnb li:first-child a{text-decoration: underline; color:#ff0000; padding-left:0;}
#footer .fnb li a:before {content: ''; position: absolute; top: 2px; bottom: 0; left: 0; width: 1px; height: 17px; margin: auto; background: rgba(150, 154, 79, .6);}
#footer .fnb li:first-child a:before {display:none}

.finfo {padding:10px 0px 20px;font-size:0;text-align:left}
.finfo .f_logo {display:none}
.finfo p {display:inline-block;position:relative;line-height:16px;margin:0;padding:2px 6px 2px 8px;color:#333;font-size:16px; font-weight: bold;}
.finfo p a {color:#b4b4b4}

.finfo p.mobile_hide {display:none}
.finfo .copyright {line-height:16px;padding:10px 0 0;color:#767676;font-size:13px}
.finfo button {border:1px solid #aaa;border-radius:4px;box-shadow:inset 0 1px 0 white;background:#f6f6f6;font-size:13px;color:#767676;text-align:center}

/* sub page */
.sub_top_bg {width:100%; position:relative; margin-bottom:40px; height:auto; font-size:0; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.sub_top_bg:before {background-image: url(/img_up/shop_pds/appkorea269/design/img/sub_top_2.jpg);}
.sub_top_bg:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center top; background-repeat: no-repeat; background-size: cover;}
.sub_top_bg img {visibility: hidden; max-width: none; height: 80px; vertical-align: top;}
.sub_top_bg .caption { padding-top:70px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; text-align:center; }
.sub_top_bg .caption:before { content:''; position:absolute; top:0; left:50%; transform:translate(-50%, 0); width:1px; height:50px; background:#fff; }
.sub_top_bg .caption h1 { margin:0; font-size:50px; font-family:'GmarketSansLight'; }
.sub_top_bg .caption p { margin:10px 0 0 0; font-size:20px; font-family:'GmarketSansLight'; }

.shgroup {position:relative}
.shgroup > a {display:block;position:relative;width:100%;height:40px;line-height:40px;margin:0;padding:0 40px;border:none;box-sizing:border-box;background:var(--main-color);font-size:16px;color:#ffffff;text-align:center}
.shgroup > a span {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}
.shgroup > a i {display:block;position:absolute;top:0;width:40px;height:40px;font-size:0}
.shgroup > a i:before {content:'';position:absolute;top:50%;left:50%;border:8px solid transparent;opacity:.5}
.shgroup > a i:after {content:'';position:absolute;top:50%;left:50%;border:8px solid transparent}
.shgroup > a i {left:0}
.shgroup > a i:before {margin:-8px 0 0 -12px;border-right-color:#ffffff}
.shgroup > a i:after {margin:-8px 0 0 -10px;border-right-color:var(--main-color)}

#sub_view #container .contents_wrap.mypage .snb {position:relative;width:100%}
#sub_view #container .contents_wrap.mypage .snb > div {overflow-x:scroll}
#sub_view #container .contents_wrap.mypage .snb ul {display:inline-block;min-width:100%;margin:0;padding:0 40px;border-bottom:3px solid var(--main-color);box-sizing:border-box;list-style:none;font-size:0;text-align:center;white-space:nowrap}
#sub_view #container .contents_wrap.mypage .snb ul li {display:inline-block}
#sub_view #container .contents_wrap.mypage .snb ul li a {height:40px;line-height:40px;padding:0 10px;font-size:13px}
#sub_view #container .contents_wrap.mypage .snb ul li.on a {color:var(--main-color)}
#sub_view #container .contents_wrap.mypage .snb i {position:absolute;left:0;top:0;width:40px;height:40px;background:#ffffff}
#sub_view #container .contents_wrap.mypage .snb i.prev:before {content:'';position:absolute;top:0;left:8px;bottom:0;width:0;height:0;margin:auto;border:8px solid transparent;border-right-color:var(--main-color)}
#sub_view #container .contents_wrap.mypage .snb i.prev:after {content:'';position:absolute;top:0;left:9px;bottom:0;width:0;height:0;margin:auto;border:8px solid transparent;border-right-color:#ffffff}
#sub_view #container .contents_wrap.mypage .snb i.next {right:0;left:inherit}
#sub_view #container .contents_wrap.mypage .snb i.next:before {content:'';position:absolute;top:0;right:8px;bottom:0;width:0;height:0;margin:auto;border:8px solid transparent;border-left-color:var(--main-color)}
#sub_view #container .contents_wrap.mypage .snb i.next:after {content:'';position:absolute;top:0;right:9px;bottom:0;width:0;height:0;margin:auto;border:8px solid transparent;border-left-color:#ffffff}

.header_form {position:absolute;right:0;bottom:0;width:100%;padding:10px 0;background:#f9f9f9;background:rgba(255, 255, 255, 0.9);z-index:99;opacity:0;transition:all 0.5s ease}
.header_form.on {bottom:-57px;opacity:1}

.lnb_r {position:absolute; top:50%; right:0; transform:translate(0, -50%); box-sizing:border-box; font-size:0;}
.lnb_r ul {margin:0; padding:0; list-style:none;}
.lnb_r ul > li {display:inline-block; padding:0 3px; font-size:17px; line-height:32px; vertical-align:top;}
.lnb_r ul > li.log_btn { transform:translate(0, 3px); }
.lnb_r ul > li > a {display:block; height:30px; line-height:30px; padding:0 10px; border-radius:32px; color:#fff; background-color:var(--main-color); font-size:13px;}
.search_p {box-sizing:border-box}
.search_p fieldset {position:relative;margin:0;padding:0;border:none}
.search_p legend {display:none}
.search_p span {display:block;margin:0; width:200px; height:32px; /*border-radius:32px; background:#f3f3f3;*/ background:#fff; border:2px solid #f3f3f3;}
.search_p span input {width:100%; height:32px; line-height:32px; margin:0; padding:0 42px; border:none;box-sizing:border-box;background:transparent;color:#a0a0a0;font-size:17px;vertical-align:top}
.search_p span input:focus {outline:none;}
.search_p button {display:block;position:absolute;border:none;padding:0;top:10px;right:0;bottom:10px;margin:auto;width:42px;height:42px;background:transparent;font-size:0}
.search_p button:before {content:'\e901';font-family:'icomoon'; padding:9px; font-size:14px;color:#666}

.search_recomm {}

/* Mobile viewport - PC content display none */
.gnb_p, .lnb_p, .shgroup > .shgroup_pc, .lnb_dep2, .search_btn {display:none}

/* PC CSS */
@media all and (min-width:1024px) {
    /* 음성안내 */
    #voice_guide_wrap {display:inline-block;vertical-align:top}
    #voice_guide_wrap a {display:none;width:16px;height:40px;line-height:40px;font-size:0;text-align:center}
    #voice_guide_wrap a > span {position:absolute;top:-9999px;left:-9999px;text-indent:-9999px}
    #voice_guide_wrap a:before {font-family:'voice_icomoon';font-size:16px}
    #voice_guide_wrap.off a.state_voice_on {display:inline-block}
    #voice_guide_wrap.on a.state_voice_off {display:inline-block}
    #voice_guide_wrap a.state_voice_on:before {
        content:'\e903';color:#168fff;
        transition:all 0.1s ease;
        animation-name:voice_animation;
        animation-duration:1s;
        animation-iteration-count:infinite;
        animation-timing-function:step-end;
    }
    #voice_guide_wrap a.state_voice_off:before {content:'\e902';color:#87909c}

    /* PC viewport - Mobile content display none */
    #header .logo button, .shgroup > a {display:none}

    /* PC display:block */
    .gnb_p, .lnb_p, .shgroup > .shgroup_pc {display:block}

    /* PC 화면 넓이값을 가진 센터유지 */
    .row > .white-space {max-width:1300px !important}
    .top_banner .pc, #header .inner, .gnb_p .inner, .lnb_dep2 > div.dep1_wrap, .search_p, .sub_location, #footer ul, #footer ul p , #footer .finfo, .shgroup, .contents_wrap.mypage, .search_recomm {margin:0 auto;max-width:1300px}

    .top_banner {display:none;position:relative;width:1300px;margin:0 auto;padding:0;background:#ffffff;z-index:101}
    .top_banner.on {display:block}
    .top_banner .pc {display:block}
    .top_banner .mobile {display:none}
    .top_banner .banner_btn_wrap {position:absolute;right:0;bottom:0;padding:5px 10px}
    .top_banner .banner_btn_wrap div#bn-today-stop label {color:#ffffff}

    /* mypage  서브 네비게이션 넓이값 */
    #container .contents_wrap {min-height:500px;}
    #sub_view #container .contents_wrap .contents {padding-top:0}

    .gnb_p {border-bottom:1px solid #ececec; position:relative;font-size:0;text-align:right;background:#ffffff;z-index:101}

    .gnb_p .new_date {display:inline-block;padding:0 20px 0 10px;font-size:13px;font-weight:bold}
    .gnb_p ul {display:inline-block;margin:0;padding:0;list-style:none}
    .gnb_p ul li {display:inline-block}
    .gnb_p ul li a {display:inline-block;position:relative;height:40px;line-height:40px;padding:0 10px;color:#858585;font-size:13px}
    .gnb_p ul li a:hover {color:var(--main-color)}

    #header {border-bottom:none;background:#ffffff}
    #header .nav_inner {/*border-bottom:5px solid var(--main-color);*/background:#ffffff}
    #header .inner:after {content:'';display:block;clear:both}
    #header .logo {float:left;width:240px}
    #header .logo h1 {display:table;width:auto;height:78px;padding:0}
    #header .logo h1 span {display:table-cell;vertical-align:middle}
    #header .inner {position:relative}
    #header .header_bgcolor {border-bottom: 1px solid #ffffff;}
    
    .sub_top_bg img { max-width: none; height: auto;}

    .lnb_p {display:block;float:left;width:734px;margin:0 auto;height:78px; box-sizing:border-box} /* 862 */

    .lnb_p ul {margin:0;padding:0;list-style:none}
    .lnb_p .dep1 {height:85px}
    .lnb_p .dep1:after {clear:both;content:'';display:block}
    .lnb_p .dep1 > li {float:left;position:relative;padding:0 10px;box-sizing:border-box}
    .lnb_p .dep1 > li > a {display:block;overflow:hidden;height:78px;line-height:78px;font-size:20px;font-weight:bold;text-align:center;white-space:nowrap;text-overflow:ellipsis; }
    .lnb_p .dep1 > li.on > a, 
    .lnb_p .dep1 > li > a:hover {color:var(--main-color)}
    .lnb_dep2 {display:block;position:absolute;width:100%;top:79px;background:#fff;z-index:101;transition:all 0.5s ease; height:0px; overflow:hidden;}
    .lnb_dep2.on {opacity:1; height:200px; box-shadow:0 2px 4px rgb(0 0 0 / 10%);}
    .lnb_dep2 .dep1_wrap {box-sizing:border-box;padding-left:240px;}
    .lnb_dep2 .dep1_wrap .dep1_wrap_inner {display:table;width:734px;table-layout:fixed;}
    

    .lnb_dep2 ul {display:table-cell;margin:0;padding:26px 0;list-style:none;vertical-align:top}
    /*.lnb_dep2 ul:hover {background:#eeefed}*/
    .lnb_dep2 ul li {position:relative;margin-bottom:12px;z-index:10}
    .lnb_dep2 ul li:last-child {margin-bottom:0}
    .lnb_dep2 ul li a {display:block;line-height:1.3em;padding:0 10px;font-size:17px;text-align:center;letter-spacing:-0.03em; }
    .lnb_dep2 ul li.on a,
    .lnb_dep2 ul li a:hover {color:var(--main-color);}

    .search_btn {display:block;position:absolute;top:0;right:20px;bottom:0;width:32px;height:32px;line-height:32px;margin:auto 0;font-size:0;text-align:center}
    .search_btn:before {content:'';content:'\e901';font-family:'icomoon';font-size:32px;color:#666;cursor:pointer}
    .search_btn.on:before {content:'\ea0f';font-size:25px}

    .header_form {bottom:0;padding:30px 0}
    .header_form.on {bottom:-97px}

    #footer {padding: 30px 0 50px; border-top: 1px solid #dddddd;}
    #footer .fnb {padding: 25px 0;}
    #footer .fnb ul {padding:0;text-align:left}
    #footer .fnb p {float:right;}
    #footer .fnb p a img {    border-radius: 100px; margin-left:3px;}
    #footer .finfo {text-align:left}
    #footer .copyright {padding-left:8px}

    /* sub page */
    .shgroup > .shgroup_pc.on {margin-top:30px}
    .shgroup > .shgroup_pc h1 {clear:both;margin:0}
    .sub_location {position:relative;margin-top:30px;z-index:90; display:none;}
    .sub_location ul {margin:0;padding:0;list-style:none}
    .sub_location a {display:block}
    .sub_location > ul:after {content:'';display:block;clear:both}
    .sub_location > ul > li {float:left;position:relative;height:24px;line-height:24px;margin-right:20px;font-size:14px}
    .sub_location > ul > li:after {content:'>';display:block;position:absolute;right:-13px;top:0;font-size:12px}
    .sub_location > ul > li:last-child:after {display:none}
    .sub_location > ul > li > a {display:block;position:relative;min-width:90px;padding:0 25px 0 10px;border:1px solid #ececec;font-size:14px;box-sizing:border-box}
    .sub_location > ul > li > a:before {content:'';position:absolute;top:10px;right:5px;width:0;height:0;border-width:5px;border-style:solid;border-color:var(--main-color) transparent; border-bottom:transparent;}
    .sub_location > ul > li ul {display:none;position:absolute;min-width:100%;padding:8px 0;border:1px solid #ececec;background:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .sub_location > ul > li:hover ul {display:block}
    .sub_location > ul > li:hover > a:before {border-top:transparent; border-bottom:5px solid var(--main-color);}
    .sub_location > ul > li ul li {height:24px;line-height:24px}
    .sub_location > ul > li ul li a {display:block;padding:0 10px}
    .sub_location > ul > li ul li:hover a {background:var(--main-color);color:#ffffff; opacity:.3;}
    .sub_location > ul > li ul li.on a {background:var(--main-color);color:#ffffff; opacity:1;}
    #sub_view #container .contents_wrap {padding:30px 0}
    #sub_view #container .contents_wrap:after {clear:both;content:'';display:block}
    #sub_view #container .contents_wrap.mypage .snb {width:100%;margin:0 0 20px}
    #sub_view #container .contents_wrap.mypage .snb > i {display:none !important}
    #sub_view #container .contents_wrap.mypage .snb > div {overflow:auto}
    #sub_view #container .contents_wrap.mypage .snb > div ul {padding:0;white-space:normal;border:none;font-size:0;text-align:left}
    #sub_view #container .contents_wrap.mypage .snb > div ul li {display:inline-block;width:16.6666%;padding:1px;box-sizing:border-box}
    #sub_view #container .contents_wrap.mypage .snb > div ul li:last-child {border-bottom:none}
    #sub_view #container .contents_wrap.mypage .snb > div ul li a {display:block;position:relative;height:40px;line-height:40px;padding:0 20px;border:1px solid #e1e1e1;background:#efefef;font-size:14px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .6);text-shadow:0 0 1px rgba(255, 255, 255, .5)}
    #sub_view #container .contents_wrap.mypage .snb > div ul li.on a,
    #sub_view #container .contents_wrap.mypage .snb > div ul li:hover a {border:1px solid var(--main-color);background:var(--main-color);color:#ffffff;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .3)}
    #sub_view #container .contents_wrap.mypage .contents {overflow:hidden}
    #sub_view #container .contents_wrap.mypage .sub_location {display:none}
}

/* MOBILE - 뷰포트 CSS */
@media all and (max-width:1023px) {
    #viewport {position:relative;width:100%;overflow-x:hidden}
    #viewport #header {width:100%;transition:all 300ms ease}
    #viewport #container {position:relative;z-index:100}
    #viewport #main_view,
    #viewport #sub_view {position:relative;left:0;top:0;transition:all 300ms ease}
    #viewport.app_view #container {padding-top:0}

    .viewport_side > h1 {margin:0;}
    .viewport_side > h1 a {display:block;position:relative;height:50px;line-height:50px;margin:0;padding:0 30px;background:var(--main-color);font-size:14px;color:#ffffff;text-align:center}

    .side_menu ul {margin:0;padding:0;list-style:none}
    .side_menu [role=toggle] > a:before {content:'';position:absolute;top:50%;right:12px;width:0;height:0;margin-top:-2px;border:6px solid transparent;border-top-color:#666}
    .side_menu [role=toggle].active > a:before {margin-top:-8px;border-top-color:transparent;border-bottom-color:#666}
    .side_menu .dep1 > li > a {display:block;position:relative;height:40px;line-height:40px;padding:0 35px 0 12px;border-bottom:1px solid #e6e6e6;background:#fafafa;font-size:13px;font-weight:bold;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .side_menu .dep2 {display:none}
    .side_menu .dep2 > li > a {display:block;position:relative;height:40px;line-height:40px;padding:0 12px 0 24px;border-bottom:1px solid #e6e6e6;background:#fff;font-size:13px;font-weight:bold;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .side_menu .active .dep2 {display:block}

    .side_search {border-bottom:1px solid #e6e6e6;background:#fafafa}
    .side_search fieldset {position:relative;margin:0;padding:8px;border:none}
    .side_search legend {display:none}
    .side_search span {display:block;padding:4px 8px;border:1px solid #ccc;background:#fff}
    .side_search span input {width:100%;margin:0;padding:4px 0;border:none;background:transparent;color:#666}
    .side_search button {position:absolute;border:none;padding:0;top:10px;right:10px;bottom:10px;margin:auto;padding:5px;background:transparent;font-size:0}
    .side_search button:before {content:'\e901';font-family:'icomoon';font-size:24px;color:#666}

    #viewport .viewport_side {visibility:hidden;overflow-y:auto;position:absolute;top:0;width:270px;height:100%;background:#ffffff;z-index:9999;transition:all 300ms ease}
    #viewport #left_side {left:-270px}
    #viewport #right_side {right:-270px}
    #viewport.left-open,
    #viewport.right-open {overflow:hidden;width:100%;height:100%}
    #viewport.left-open #main_view,
    #viewport.left-open #sub_view {left:270px}
    #viewport.right-open #main_view,
    #viewport.right-open #sub_view {left:-270px}
    #viewport.left-open #left_side {visibility:visible;left:0}
    #viewport.right-open #right_side {visibility:visible;right:0}
    #viewport #close_side {display:none;position:absolute;top:0;left:0;bottom:0;left:0;z-index:9998;width:100%;height:100%;box-sizing:border-box;border:none;background:none;text-align:left;text-indent:-9999px;background:rgba(0,0,0,0.6)}
    #viewport.left-open #close_side,
    #viewport.right-open #close_side {display:block}

    .sub_top_bg, 
    .right_floating_menu { display:none; }
}

/* PC - 뷰포트 CSS */
@media all and (min-width:1024px) {
    #viewport #left_side {display:none}
    #viewport #right_side {display:none}
    #viewport #close_side {display:none}

}

@media all and (max-width:767px) {
    #footer .fnb ul{border-top:2px solid #4f4f4f;border-bottom:1px solid #d4d4d4;}
    #footer .fnb p {padding-bottom:10px;}
        #footer #btn_site_top.on {display:none;}
}