layout.css

@charset "UTF-8";

html,
body,
#container{height:100%}
body{background-color:#f1f2f4}
#container{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
#layout{position:relative;z-index:1;min-height:100%;box-sizing:border-box}

/* gnb  */
#gnb{position:fixed;left:0;top:0;bottom:0;z-index:200;width:300px;overflow-y:auto;overflow-x:hidden;background-color:#f5f5f5;box-sizing:border-box}
#gnb .info{min-height:130px;padding:52px 15px 10px;color:#fff;box-sizing:border-box;background-image:url('/static/images/common/gnb_top_bg.jpg');background-repeat:no-repeat;background-size:cover}
#gnb .info:after{content:'';display:block;clear:both}
#gnb .info .local{position:absolute;left:15px;top:11px}
#gnb .info .local a{position:relative;display:inline-block;padding-left:9px;margin-left:3px;font-size:14px;color:#fff;vertical-align:middle;line-height:1.5}
#gnb .info .local a:first-child{padding-left:0;margin-left:0}
#gnb .info .local a:after{content:'';display:block;position:absolute;left:0;top:4px;height:13px;border-left:1px solid rgba(255,255,255,.4)}
#gnb .info .local a:first-child:after{content:none}
#gnb .info .setup a{display:inline-block;position:absolute;right:15px;top:15px;width:19px;height:20px;font:0/0 a;background-image:url('/static/images/common/layout_sprite.png');background-position:-125px 0;background-repeat:no-repeat;background-size:360px auto} 
#gnb .info .data:after{content:'';display:block;clear:both}
#gnb .info .data .name{display:block;margin-bottom:4px;font-size:23px}
#gnb .info .data .name small{font-size:13px;color:rgba(255,255,255,.8);white-space:nowrap}
#gnb .info .data dl{float:left;margin-right:8px;margin-bottom:2px}
#gnb .info .data dl:after{content:'';display:block;clear:both}
#gnb .info .data dl dt{float:left;width:21px;height:21px;margin-right:5px;margin-top:2px;font:0/0 a;background-image:url('/static/images/common/layout_sprite.png');background-position:-150px -75px;background-repeat:no-repeat;background-size:360px auto}
#gnb .info .data dl:nth-of-type(1) dt{background-position:-150px -50px}
#gnb .info .data dl dd{float:left;font-size:11px}
#gnb .info .data dl dd em{font-size:16px}

#gnb .info.nonmember{padding-top:40px;text-align:center}
#gnb .info.nonmember .text1{font-size:14px}
#gnb .info.nonmember .text2{font-size:18px}
#gnb .info.nonmember .btns{margin-top:8px}
#gnb .info.nonmember .btns .btn{width:90px;height:30px;line-height:28px;color:#fff;border:1px solid #fff;border-radius:20px}

#gnb .myPage{background-color:#fff}
#gnb .myPage:after{content:'';display:block;clear:both}
#gnb .myPage li{float:left;width:25%;box-sizing:border-box;border-bottom:1px solid #e2e2e2;border-right:1px solid #e2e2e2}
#gnb .myPage li:nth-child(4n+4){border-right:none}
#gnb .myPage li a{display:block;position:relative;height:75px;padding-top:43px;font-size:12px;color:#333;text-align:center;line-height:12px;box-sizing:border-box}
#gnb .myPage li a:after{content:'';display:inline-block;position:absolute;left:50%;background-image:url('/static/images/common/icon_gnb.png');background-repeat:no-repeat;background-size:360px auto}
#gnb .myPage li.tree a:after{top:16px;width:23px;height:23px;margin-left:-11px;background-position:0 0}
#gnb .myPage li.low a:after{top:17px;width:26px;height:21px;margin-left:-12px;background-position:-25px 0}
#gnb .myPage li.benefit a:after{top:17px;width:23px;height:21px;margin-left:-10px;background-position:-55px 0}
#gnb .myPage li.cart a:after{top:18px;width:23px;height:20px;margin-left:-12px;background-position:-80px 0}
#gnb .myPage li.order a:after{top:15px;width:20px;height:22px;margin-left:-10px;background-position:-105px 0}
#gnb .myPage li.delivery a:after{top:18px;width:31px;height:19px;margin-left:-17px;background-position:-125px 0}
#gnb .myPage li.balance a:after{top:19px;width:25px;height:22px;margin-left:-12px;background-position:-160px 0}
#gnb .myPage li.number a:after{top:19px;width:20px;height:21px;margin-left:-10px;background-position:-185px 0}
#gnb .myPage li.notice a:after{top:20px;width:24px;height:20px;margin-left:-13px;background-position:-210px 0}
#gnb .myPage li.paynowBiz a{font:0/0 a;}
#gnb .myPage li.paynowBiz a:after{top:10px;width:55px;height:55px;margin-left:-29px;background-position:0 -30px}

#gnb .navigation{background-color:#f5f5f5}
#gnb .navigation a{display:block}
#gnb .depth1 > li{position:relative}
#gnb .depth1 > li:after{content:'';display:inline-block;position:absolute;right:15px;top:25px;width:10px;height:6px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-position:-160px -10px;background-size:360px auto;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in;}
#gnb .depth1 > li.home:after{-webkit-transform:rotate(270deg);transform:rotate(270deg)}
#gnb .depth1 > li.active:after{background-position:-160px 0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#gnb .depth1 > li.active + li{border-top:1px solid #e2e2e2}
#gnb .depth1 > li > .btn{display:block;width:100%;height:50px;line-height:50px;padding:0 5px 0 15px;text-align:left;font-size:16px;color:#000;border-bottom:1px solid #e2e2e2;background-color:#fff;box-sizing:border-box}
#gnb .depth1 > li > .btn:active,
#gnb .depth1 > li.active > .btn{color:#00b6f0;font-weight:bold}
#gnb .depth1 > li:last-child ul{border-bottom:1px solid #e2e2e2}
#gnb .depth2{display:none}
#gnb .depth2 > li{padding:0 15px}
#gnb .depth2 > li:first-child > .btn{border-top:none}
#gnb .depth2 > li > .btn{display:block;position:relative;width:100%;height:45px;padding:12px 25px 12px 10px;text-align:left;color:#333;font-size:14px;border-top:1px solid #e2e2e2;box-sizing:border-box}
#gnb .depth2 > li > .btn:after{content:'';display:inline-block;position:absolute;right:10px;top:18px;width:5px;height:9px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-position:-195px 0;background-size:360px auto}
#gnb .depth2 > li > .low:before{content:'';display:inline-block;position:absolute;right:12px;top:17px;height:11px;border-left:1px solid #adadad;-webkit-transition:all .2s ease-in;transition:all .2s ease-in;border-radius:2px}
#gnb .depth2 > li > .low:after{right:7px;top:22px;width:11px;border-top:1px solid #adadad;background:none;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in;-webkit-transform-origin:50% 0;transform-origin:50% 0}
#gnb .depth2 > li.active > .low{font-weight:bold}
#gnb .depth2 > li.active > .low:before{opacity:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#gnb .depth2 > li.active > .low:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#gnb .depth3{display:none;padding-bottom:10px;padding-left:15px}
#gnb .depth3 > li{position:relative}
#gnb .depth3 > li:after,
#gnb .depth3 > li:before{content:'';display:inline-block;position:absolute;left:13px}
#gnb .depth3 > li:after{top:15px;height:5px;width:1px;background-color:#aeaeae}
#gnb .depth3 > li:before{top:20px;width:6px;height:1px;background-color:#aeaeae}
#gnb .depth3 > li a{display:block;padding:8px 10px 8px 25px;text-align:left;color:#666;font-size:13px}
#gnb .paymentApps{display:none;padding-bottom:20px}
#gnb .paymentApps:after{content:'';display:block;clear:both}
#gnb .paymentApps > li{float:left;padding-left:25px}
#gnb .paymentApps > li:first-child{padding-left:20px}
#gnb .paymentApps > li a{display:inline-block;width:55px;height:55px;font:0/0 a;vertical-align:top;background-image:url('/static/images/common/payment_apps.png');background-size:360px auto;background-repeat:no-repeat}
#gnb .paymentApps .paynowBiz a{background-position:0 0}
#gnb .paymentApps .kpay a{background-position:-60px 0}
#gnb .paymentApps .paynow a{background-position:-120px 0}

#gnb .depth1 > li.active .depth2,
#gnb .depth2 > li.active .depth3,
#gnb .depth2 > li.active .paymentApps{display:block}

#gnb .navigation .content .quick ul li{float:left;width:20%;text-align:center;box-sizing:border-box}
#gnb .navigation .content .quick ul li a{display:block;height:50px;padding:5px;color:#666;border-bottom:1px solid rgba(0,0,0,.1);box-sizing:border-box}

#gnb .footer{position:relative;height:110px;padding-top:15px;padding-left:15px}
#gnb .footer .onair a{display:block;position:absolute;left:15px;bottom:15px;width:70px;height:70px;font:0/0 a;background-image:url('/static/images/common/atomy_onair.png');background-repeat:no-repeat;background-position:0 0;background-size:70px auto;}
#gnb .footer div{overflow:hidden;padding-top:13px}
#gnb .footer div a{position:relative;display:inline-block;padding-left:9px;margin-left:-9px;margin-right:12px;font-size:14px;color:#666;white-space:nowrap}
#gnb .footer div a:after{content:'';display:block;position:absolute;left:0;top:5px;height:10px;border-left:1px solid #c4c4c4}
#gnb .footer .copy{font-size:13px;font-weight:bold}
#gnb .footer a img{vertical-align:sub}
#gnb .footer div a.linkOfficial:last-child{padding-left:0}
#gnb .footer div a.linkOfficial:last-child:after{content:none}
#gnb .footer .social-link{padding:10px 0}
#gnb .footer .social-link a{margin:0 2.5px 0 0;padding:0}
#gnb .footer .social-link a:after{content:none}

#gnb .btnGlobalSites{border-bottom:1px solid #e2e2e2;background-color:#fff}
#gnb .btnGlobalSites h3{display:block;width:100%;height:50px;line-height:50px;padding:0 5px 0 15px;text-align:left;font-size:16px;color:#000;background-color:#fff;box-sizing:border-box}
#gnb .btnGlobalSites ul{display:flex;justify-content:space-around;padding:0 15px}
#gnb .btnGlobalSites li{text-align:center}
#gnb .btnGlobalSites li span{display:block;font-size:11px;color:#989898}
#gnb .btnGlobalSites .globalBizLink{margin:10px 15px 15px;}
#gnb .btnGlobalSites .globalBizLink a{display:flex;align-items:center;justify-content:center;padding:8px 5px;background:#efefef}
#gnb .btnGlobalSites .globalBizLink span{font-size:11px;color:#313131}
#gnb .btnGlobalSites .globalBizLink strong{margin:0 5px 0 8px}

/* Container */  /*.orange 추가*/
#header{position:fixed;left:0;top:0;right:0;height:50px;padding-top:12px;text-align:center;background-color:#00b6f0;z-index:100;box-sizing:border-box}
#header.orange{background-color:#ff9900}
#header.skyblue{background-color:#64d0f3}
#header.white{background-color:#fff}
#header.blue{background-color:#00b6f0}
#header:after{content:'';display:block;clear:both}
#header .logo{display:block;font-size:19px;color:#fff;font-weight:bold;box-sizing:border-box}
#dialog header .btn,
#header .btn{display:inline-block;position:absolute;z-index:110;width:auto;padding:10px;font:0/0 a}
#header.popup{background-color:#fff;border-bottom:1px solid #c6c6c6}
#header.popup .logo{color:#333}
#header.popup.orange{background-color:#ff9900;border-bottom:none}
#header.popup.skyblue{background-color:#64d0f3;border-bottom:none}
#header.popup.blue{background-color:#00b6f0;border-bottom:none}
#header.popup.orange .logo,
#header.popup.skyblue .logo,
#header.popup.blue .logo{color:#fff}
#header.popup.orange .icon.close,
#header.popup.skyblue .icon.close,
#header.popup.blue .icon.close{background-position:-150px -25px}
#header .count{display:inline-block;position:absolute;right:2px;top:3px;width:17px;height:17px;text-align:center;border-radius:50%;background-color:#f9a04f;color:#fff;font-size:11px;font-family:Arial, sans-serif;font-weight:bold;line-height:1;box-sizing:border-box;
	display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;
}
#dialog .icon,
#header .icon{display:inline-block;background-image:url('/static/images/common/layout_sprite.png')}
.btnMenu{left:5px;top:7px}
.btnHome{left:5px;top:5px}
.btnPrev{left:5px;top:7px}
.btnClose{right:5px;top:5px}
.btnSearch{right:50px;top:5px}
.btnShop{right:5px;top:5px}
.btnOffice{right:5px;top:5px}
.btnCart{right:5px;top:5px}
.btnFavorite{right:5px;top:5px}
.btnShop{right:5px;top:2px}
.btnAdd{right:5px;top:2px}
.btnTreeSetting{left:5px;top:5px}
.btnShare{right:5px;top:5px}

.combination .icon{display:inline-block;text-align:center;background-image:url('/static/images/common/layout_sprite01.png');background-repeat:no-repeat;background-size:360px auto;pointer-events:none}
.combination .icon.btnMonth{width:23px;height:24px;background-position:-175px -85px}
.combination .icon.btnDay{width:23px;height:24px;background-position:-205px -85px}
.combination .icon.btnMonths{width:23px;height:24px;background-position:-175px -115px}
.combination .icon.btnDays{width:23px;height:24px;background-position:-205px -115px}
.combination .icon.btnEdit{width:27px;height:28px;background-position:-235px -85px}
.combination .icon.dateY{width:6px;height:6px;background-position:-235px -70px}
.combination .icon.benefitS{width:18px;height:18px;background-position:-235px -120px}
.combination .icon.benefitH{width:18px;height:18px;background-position:-260px -120px}
.combination .icon.semSuc{width:18px;height:18px;background-position:-275px -85px}
.combination .icon.semOne{width:18px;height:18px;background-position:-300px -85px}
.combination .icon.semLoc{width:18px;height:18px;background-position:-325px -85px}

/*.orange 추가*/
#header.orange .icon{display:inline-block;background-image:url('/static/images/common/layout_sprite01.png')}
#header.orange .icon.shop{width:26px;height:29px;background-position:-260px -25px}

#header .icon.menu{width:20px;height:17px;background-position:0 -25px}
#header .icon.menu2{width:24px;height:18px;background-position:-225px 0}
#header .icon.home{width:22px;height:21px;background-position:0 0}
#header .icon.prev{ width:20px;height:16px;background-position:-75px -25px}
#dialog .icon.close,
#header .icon.close{width:17px;height:17px;background-position:-125px -25px}
#header .icon.search{width:20px;height:21px;background-position:-25px -25px}
#header .icon.office{width:28px;height:29px;background-position:-230px -25px}
#header .icon.shop{width:26px;height:29px;background-position:-260px -25px}
#header .icon.cart{width:28px;height:22px;background-position:-200px -25px}
#header .icon.favorite{width:25px;height:21px;background-position:-100px -25px}
#header .icon.treeSetting{width:24px;height:22px;background-position:-150px 0}
#header .icon.plus{width:26px;height:26px;background-position:-175px -50px}
#header .icon.share2{width:22px;height:23px;background-position:-275px 0}

#header.searchSlide .icon.close{width:17px;height:17px;background-position:-150px -25px}
#header.searchSlide .row.search .inputSearch input{height:35px;padding-right:39px;border:none}

#header .header-title{float:left;padding-top:13px}
#header .row.search{display:block;position:relative;margin-top:-4px;padding:0 15px 0 50px}
#header .row.search .inputSearch{display:block}
#header .row.search .inputSearch input{height:35px;padding-right:69px;border:none}
#header .row.search .inputSearch input::-webkit-search-decoration,
#header .row.search .inputSearch input::-webkit-search-cancel-button,
#header .row.search .inputSearch input::-webkit-search-results-button,
#header .row.search .inputSearch input::-webkit-search-results-decoration{display:none}
#header .row.search .btnSearch{top:0;right:20px;width:30px;height:35px;padding:0}
#header .row.search .btnSearch .icon.search{background-position:-50px -25px}
#header .row.search .btnDelete{top:0;right:50px;width:29px;height:35px;padding:0}
#header .row.search .icon.delete{width:17px;height:17px;border-radius:50%;background-color:#dcdcdc;background-image:none}
#header .row.search .icon.delete:after{content:'';display:inline-block;width:6.5px;height:6.5px;margin-top:5.25px;background-size:360px auto;background-image:url('/static/images/common/icon_sprite.png');background-position:-230px -25px}

/* 검색 150615 */
#header.searchSlide .row.search{display:block;position:relative;margin-top:-4px;padding:0 50px 0 15px}
#header.searchSlide .row.search .btnSearch{right:55px}
#header.searchSlide .row.search .btnDelete{right:85px} 

.office #header{background-color:#64d0f3}
.tree #header{background-color:#fff}
.tree #header .btnLevel{position:relative;display:inline-block;padding-right:20px;font-weight:bold;font-size:20px;color:#333}
.tree #header .btnLevel:after{content:'';display:inline-block;position:absolute;right:0;top:13px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:0;border-top:5px solid #333;pointer-events:none}

section.gate #header{padding:0 20px;height:60px}
section.gate #header .logo{float:left;padding-top:10px}
section.gate #header .logo a{display:block;width:51px;height:43px;overflow:hidden}
section.gate #header .navMember{float:right}
section.gate #header .groupBtn{float:right;padding-top:12px}
section.gate #header .btn{display:inline-block;position:relative;padding-top:19px;vertical-align:middle}
section.gate #header .btn + .btn{margin-left:15px}
section.gate #header .btn:after{content:'';display:inline-block;position:absolute;left:50%;right:0;top:0;background-image:url('/static/images/common/layout_sprite.png');background-repeat:no-repeat;background-size:360px auto}
section.gate #header .btnLogin:after{width:17px;height:17px;margin-left:-8px;background-position:-25px 0}
section.gate #header .btnJoin:after{width:15px;height:18px;margin-left:-8px;background-position:-50px 0}
section.gate #header .btn span{color:#000;font-size:11px}

.office #header,
section.shop #header{text-align:center}

#body{min-height:100%;padding-top:50px;box-sizing:border-box}
#body.popup{background-color:#fff}
#body.snbOn{padding-bottom:71px}
#body.footerOn{padding-bottom:121px}
#body.snbOn.footerOn{padding-bottom:181px}
.container #body{padding-bottom:40px}
#body .contents{min-height:100%}

/* Footer */
.snbOn #footer{bottom:60px}
#footer .fixContent{height:111px;padding-top:15px;color:#666;text-align:center;box-sizing:border-box;background-color:#e4e5e7;box-sizing:border-box}
#footer nav{font-size:0}
#footer nav a{position:relative;margin-left:10px;padding-left:10px;font-size:12px}
#footer nav a:after{content:'';display:inline-block;position:absolute;left:0;top:2px;height:10px;border-left:1px solid #c9c9c9}
#footer nav a:first-child{padding-left:0;margin-left:0}
#footer nav a:first-child:after{content:none}
#footer address{margin-top:7px;font-size:0}
#footer address div span{position:relative;margin-left:5px;padding-left:5px;font-size:11px}
#footer address div span:after{content:'';display:inline-block;position:absolute;left:0;top:1px;height:10px;border-left:1px solid #c9c9c9}
#footer address div span:first-child{padding-left:0;margin-left:0}
#footer address div span:first-child:after{content:none}
#footer .copy{font-size:10px;margin-top:8px}
#footer .copy span{font-family:verdana, Arial;color:#666!important}

/* Gate Main */
.gateMain #header{height:50px;background-color:#fff;box-sizing:border-box}
.gateMain #header .btnMenu{left:8px;top:6px}
.gateMain #header .btns{position:absolute;right:16px;top:8px}
.gateMain #header .btns span{position:relative;display:inline-block;margin-left:10px}
.gateMain #header .btns span:after{content:'';display:inline-block;position:absolute;left:50%;top:0;background-image:url('/static/images/common/layout_sprite.png');background-size:360px auto;background-repeat:no-repeat;}
.gateMain #header .btns .login:after{width:16px;height:17px;margin-top:1px;margin-left:-8px;background-position:-25px 0}
.gateMain #header .btns .logout:after{width:19px;height:17px;margin-left:-8px;margin-top:1px;background-position:-250px 0}
.gateMain #header .btns .join:after{width:21px;height:19px;margin-left:-9px;background-position:-50px 0}
.gateMain #header .btns span a{display:block;padding-top:22px;font-size:10px;color:#000;position:relative;z-index:1}

.gateMain .preload{position:absolute;left:0;top:0;right:0;bottom:0}
.gateMain .preload .item{height:100%}
.gateMain .preload .item a{display:block;width:100%;height:100%}
.gateMain .preload .verticalCenter{height:100%;min-height:inherit}

.gateMain #body{padding:50px 0 55px}
.gateMain #body .slider{padding-top:80.55555555555556%;overflow:hidden}
.gateMain #body .slider .listSlide,
.gateMain #body .slider .slick-list,
.gateMain #body .slider .slick-track{height:100%}
.gateMain #body .slider .slick-slide{padding-top:0}
.gateMain #body .slider .item{text-align:center}
.gateMain #body .slider .item a{height:100%;color:#fff;font-size:22px;background-repeat:no-repeat;background-size:cover;box-sizing:border-box}
.gateMain #body .slider .item a.press,
.gateMain #body .slider .item a:active{opacity:1}
.gateMain #body .slider .item a .summary{opacity:1;-webkit-transition:opacity .2s;transition:opacity .2s}
.gateMain #body .slider .item a:active .summary{opacity:.6}
.gateMain #body .slider .item a .verticalCenter{height:100%;min-height:inherit}
.gateMain #body .slider .item a .content{box-sizing:border-box}
.gateMain #body .slider .item a .content .text{position:relative;padding-top:75px;padding-left:10px;padding-right:10px;line-height:1.3}
.gateMain #body .slider .item a .content .text:after{content:'';display:inline-block;position:absolute;left:50%;top:0;width:65px;height:54px;margin-left:-33px;background-image:url('/static/images/common/logo_white_129x108.png');background-size:65px auto;background-repeat:no-repeat}
.gateMain #body .slider .item a .content .summary{display:inline-block;height:32px;margin-top:14px;font-size:14px;padding:4.5px 25px 0;border:2px solid #fff;border-radius:20px;box-sizing:border-box}
.gateMain #body .slider .item.overview a{background-image:url('/static/images/common/company.jpg')}
.gateMain #body .slider .item.socialShare a{background-image:url('/static/images/common/company_head_bg_05.jpg')}
.gateMain #body .slider .item.seminars a{background-image:url('/static/images/common/company_head_bg_08.jpg')}
.gateMain #body .slider .item.vision a{background-image:url('/static/images/common/company_head_bg_03.jpg')}
.gateMain #body .slider .item.years a{background-image:url('/static/images/common/years.png')}
.gateMain #body .slider .item.years a .content .text:after{content:none}
.gateMain #body .slider .indicator{text-align:right;padding-right:15px}
.gateMain #body .slider .indicator li{bottom:0}
.gateMain #body .slider .indicator li button{font:0/0 a;position:relative;bottom:25px;width:10px;height:10px;margin-left:3px;vertical-align:top;background-color:transparent;border:2px solid #fff;border-radius:50%;box-sizing:border-box}
.gateMain #body .slider .indicator li.slick-active button,
.gateMain #body .slider .indicator li.active button{background-color:#fff;border:none}

.gateMain #nav{position:fixed;left:0;bottom:0;right:0}
.gateMain #nav:after{content:'';display:block;clear:both}
.gateMain #nav a{display:block;position:relative;float:left;width:50%;height:55px;padding:18px 0 0 20px;font-size:17px;color:#fff;background-color:#64d0f3;font-weight:bold;box-sizing:border-box}
.gateMain #nav a:first-child{background-color:#00b6f0}
.gateMain #nav a:after{content:'';display:inline-block;position:absolute;right:15px;top:22px;width:8px;height:13px;background-image:url('/static/images/common/icon_sprite.png');background-position:-205px 0;background-size:360px auto;background-repeat:no-repeat}

.gateMain .quick{display:table;width:100%;border-bottom:1px solid #e2e2e2}
.gateMain .quick span{display:table-cell;width:33.3333%;text-align:center;box-sizing:border-box;vertical-align:top}
.gateMain .quick span:first-child a{ border-left:none}
.gateMain .quick span a{display:table;position:relative;width:100%;height:115px;padding-top:78px;font-size:14px;color:#333;border-left:1px solid #e2e2e2;background-color:#fff;box-sizing:border-box}
.gateMain .quick span a:after{content:'';display:inline-block;position:absolute;left:50%;top:19px;background-image:url('/static/images/common/icon_gate_main.png');background-size:360px auto;background-repeat:no-repeat;pointer-events:none}
.gateMain .quick .marketing a:after{width:39px;height:49px;margin-left:-20px;background-position:0 0}
.gateMain .quick .seminar a:after{width:39px;height:50px;margin-left:-20px;background-position:-50px 0}
.gateMain .quick .onair a:after{width:53px;height:51px;margin-left:-26.5px;background-position:-100px 0}
.gateMain .quick span a .title{ display:table-cell;height:37px;padding:0 2px;font-weight:400;line-height:1.1;vertical-align:middle;}

.gateMain .row.info{display:table;width:100%;table-layout:fixed;background-color:#f1f2f4}
.gateMain .row.info h2{margin-bottom:4px;font-size:13px;color:#333}
.gateMain .row.info h2 a{display:block;font-size:13px;color:#333}
.gateMain .row.info section{display:table-cell;box-sizing:border-box}
.gateMain .row.info .notice{width:66%;padding:20px}
.gateMain .row.info .notice .content li{height:20px;white-space:nowrap}
.gateMain .row.info .notice .content li a{display:inline-block;max-width:100%;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#666;}
.gateMain .row.info .notice .content li.new{position:relative;padding-right:20px}
.gateMain .row.info .notice .content li.new:after{content:'';display:inline-block;width:16px;height:16px;margin-top:3px;vertical-align:top;background-image:url('/static/images/common/icon_new.png');background-repeat:no-repeat;background-size:360px auto;background-position:0 0}
.gateMain .row.info .happyCenter{width:34%;padding:20px 0}
.gateMain .row.info .happyCenter .tel{font-size:20px;color:#00b6f0;line-height:1.2}
.gateMain .row.info .happyCenter .mail{font-size:12px;color:#00b6f0;line-height:1.2}
.gateMain .row.info .happyCenter .fax{font-size:14px;color:#00b6f0;line-height:1.2}

/* Shop,Office */
.shop #footer .fixFoot{position:absolute;background-color:#e4e5e7}
.shop .snbOn #footer .fixFoot{bottom:61px;height:45px;text-align:center;box-sizing:border-box} /* 임시 */

/* Tab Bar (SNB) */
#snb{position:fixed;left:0;bottom:0;right:0;z-index:100;display:table;width:100%;background-color:#fff;border-top:1px solid #e1e1e6}
#snb span{display:table-cell;width:20%;text-align:center}
#snb span a{position:relative;display:block;height:60px;padding-top:38px;font-size:10px;box-sizing:border-box}
#snb span a:active,
#snb span.active a{color:#06a7e2}
#snb span a:after{content:'';display:block;position:absolute;left:50%;top:14px;background-image:url('/static/images/common/layout_sprite.png');background-size:360px auto;background-repeat:no-repeat}

#snb.officeSnb span a:active,
#snb.officeSnb span.active a{color:#64d0f3}
#snb.officeSnb span a:after{background-image:url('/static/images/common/layout_sprite01.png')}

#snb .home a:after{width:22px;height:22px;margin-left:-11px;background-position:0 -50px}
#snb .order a:after{width:20px;height:21px;margin-left:-10px;background-position:-25px -50px}
#snb .shiping a:after{width:32px;height:20px;margin-left:-16px;background-position:-50px -50px}
#snb .balance a:after{width:25px;height:22px;margin-left:-12px;background-position:-85px -50px}
#snb .cart a:after{width:23px;height:20px;margin-left:-12px;background-position:-125px -50px}
#snb .cart .count{line-height:1;position:absolute;left:50%;top:50%;z-index:1;min-width:17px;width:auto;height:17px;padding:0 2px;text-align:center;border-radius:50%;background-color:#f9a04f;color:#fff;font-size:11px;font-family:Arial, sans-serif;font-weight:bold;box-sizing:border-box;margin:-26px 0 0 4px;
	display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;
}
#snb .tree a:after{width:23px;height:21px;margin-left:-11px;background-position:-25px -100px}
#snb .benefit a:after{width:23px;height:21px;margin-left:-11px;background-position:-50px -100px}
#snb .lowerSales a:after{width:26px;height:22px;margin-left:-12.5px;background-position:-75px -100px}
#snb .mySchedule a:after{width:20px;height:21.5px;margin-left:-10px;background-position:-125px -100px}

#snb .record a:after{width:23px;height:21px;margin-left:-12px;background-position:-50px -150px}
#snb .notice a:after{width:24px;height:19px;margin-left:-12px;background-position:-75px -150px}

#snb .home a:active:after,
#snb .home.active a:after{background-position:0 -75px}
#snb .order a:active:after,
#snb .order.active a:after{background-position:-25px -75px}
#snb .shiping a:active:after,
#snb .shiping.active a:after{background-position:-50px -75px}
#snb .balance a:active:after,
#snb .balance.active a:after{background-position:-85px -75px}
#snb .cart a:active:after,
#snb .cart.active a:after{background-position:-125px -75px}
#snb .tree a:active:after,
#snb .tree.active a:after{background-position:-25px -125px}
#snb .benefit a:active:after,
#snb .benefit.active a:after{background-position:-50px -125px}
#snb .lowerSales a:active:after,
#snb .lowerSales.active a:after{background-position:-75px -125px}
#snb .mySchedule a:active:after,
#snb .mySchedule.active a:after{background-position:-125px -125px}

#snb .record a:active:after,
#snb .record.active a:after{background-position:-50px -175px}
#snb .notice a:active:after,
#snb .notice.active a:after{background-position:-75px -175px}

/* gnb */
.nav_lang_en_us #gnb .myPage li.notice a{letter-spacing:-1px}
.nav_lang_en_us #gnb .myPage li.low a, 
.nav_lang_en_us #gnb .myPage li.benefit a, 
.nav_lang_en_us #gnb .myPage li.delivery a{line-height:12px;padding-top:43px}
.nav_lang_en_us #gnb .myPage li.cart a{line-height:12px;padding-top:44px}
.nav_lang_en_us #snb span a{line-height:18px}
.nav_lang_en_us #snb span.benefit a,
.nav_lang_en_us #snb span.lowerSales a{line-height:9px;top:-5px}


/* 가로모드 (iPhone4 기준이상) */
@media screen and (min-width:480px){
    .nav_lang_en_us #gnb .myPage li.notice a{letter-spacing:0 !important}

    .nav_lang_en_us #gnb .myPage li.low a, 
    .nav_lang_en_us #gnb .myPage li.benefit a, 
    .nav_lang_en_us #gnb .myPage li.delivery a,
    .nav_lang_en_us #gnb .myPage li.cart a{line-height:45px !important;padding-top:35px !important}
}

/* Nexus 5X ~ */
@media screen and (min-width:412px){
    .nav_lang_en_us #gnb .myPage li.delivery a{line-height:45px !important;padding-top:35px !important}
    .nav_lang_en_us #gnb .myPage li.cart a{line-height:45px !important;padding-top:35px !important}
}
.nav_lang_es_mx #gnb .info.nonmember .btns .btn{min-width:90px;width:auto;padding:0 10px;}

간단 설명

---