@charset "utf-8";

/* 웹폰트 */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');}
@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  src: url(/font/NanumBarunGothic/NanumBarunGothic.eot);
  src: local('Nanum Barun Gothic Bold'),
       local('NanumBarunGothic'),
       url(/font/NanumBarunGothic/NanumBarunGothic.eot?#iefix) format('embedded-opentype'),
       url(/font/NanumBarunGothic/NanumBarunGothic.woff2) format('woff2'),
       url(/font/NanumBarunGothic/NanumBarunGothic.woff) format('woff'),
       url(/font/NanumBarunGothic/NanumBarunGothic.ttf) format('truetype');}
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* ------------------------------------------------ 1)태그초기화 -----------------------------------------------------------------------------  */
html, body{margin:0px;padding:0;font-size:13px;color:#777;height:100%;background-color:#fff;font-family:'Nanum Barun Gothic','나눔바른고딕','Nanum Gothic',Malgun Gothic, NgWeb, 나눔고딕,돋움,Dotum, AppleGothic,sans-serif;}
div, span, p, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
hr,legend, caption {display:none;}
img {border:none; vertical-align:top;}
input {margin:0;font-family: NanumGothic,sans-serif;}
hr {display:none;}
address {font-style:normal;}
em{font-style:normal;}
table{margin:0;padding:0;word-break:break-all;border-collapse:collapse;}
td {font-size:13px;}
caption {position:absolute; visibility:hidden; width:0; height:0; overflow:hidden; font-size:0;}
fieldset {border:0;padding:0; margin:0;}
legend {position:absolute; visibility:hidden; width:0; height:0; overflow:hidden; font-size:0;}
a{ text-decoration: none ;color:#5a5a5a}
a:hover{ text-decoration:none;}

input.checkbox{width:13px; height:13px; vertical-align:middle;}
input.radio{width:13px; height:13px; margin-top:-1px; vertical-align:middle;}
input[type="text"] {height:15px;padding:4px;line-height:1; font-size:1em; border:1px solid #ecf0f1; font-size:12px; vertical-align:middle;}
input[type="text"].bderN{border:0;}
input[type="checkbox"]{width:13px;height:13px;margin:0;padding:0;vertical-align:middle;}
input[type="radio"]{width:13px;height:13px;vertical-align:middle;margin-top:-1px;_margin-top:0;}
select {vertical-align:middle;font-size:13px;line-height:20px;padding:4px;border:1px solid #ecf0f1;color:#777;}
select option{font-family:NanumGothic,"나눔고딕";}

/*공통 클래스 모음 */
.floL{ float:left}
.floR{ float:right}
.posR{ position:relative}
.posA{ position:absolute}
.t-c{text-align:center !important}
.t-l{text-align:left !important}
.clr{*zoom:1}
.clr:after{ content: ""; display: block; clear:both; }
.w1300{width:1300px; margin: 0px auto}
.w100{width: 100%; margin: 0px auto  }
.DtC{display:table;margin:25px auto;}
.indent{position: absolute; top: 0px; left: -9999px; font-size: 0px; line-height: 0px }
.notxt{text-indent: -9999px; font-size: 0px; line-height: 0px }
.hide{ display:none; }
.bgn a{background:none !important}
.pdt-10{padding-top:10px;}
.pdt-13{padding-top:13px;}
.pdt-20{padding-top:20px;}
.pdl-50{padding-left:50px !important}
.pdb-15{padding-bottom:15px !important}
.mgb-50{margin-bottom:50px !important;}
.mg0{margin:0 !important;}
.mgb-10{margin-bottom:10px;}
.mgb-15{margin-bottom:15px;}
.mgl-30{margin-left:30px;}
.mgl-20{margin-left:20px;}
.mgl-50{margin-left:50px;}
.mgt-30{margin-top:30px;}
.mgt-50{margin-top:50px;}
.mgt-70{margin-top:70px;}
.mgt-10{margin-top:10px;}
.bnon0{background:none !important;}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px #fff inset; }


/*준비중입니다*/
.Ready{width:1000px;height:750px;margin:0 auto;padding-top:50px;background:url(../images/os/ready.jpg) no-repeat center top;text-align:center;font-size:20px;line-height:40px;color:#454545;}
.BtnPosition{width:300px;margin:50px auto;}
.BasicBtn{display:inline-block;border-radius:3px;text-align:center;}
.BasicBtn a{display:block;text-decoration:none;padding:10px 20px;background:#454545;color:#fff;border-radius:3px;text-align:center;font-size:13px;font-weight:bold;cursor:pointer;}
.BasicBtn a:hover{background:#232323;}

/*skip네비게이션*/
#skipnavi{position:absolute;top:-50px;left:0;z-index:999;width:100%;}
#skipnavi a{display:block;position:absolute;top:0;width:100%;} 
#skipnavi a:focus,#skipnavi a:active,#skipnavi a:hover{position:absolute;left:0px;top:50px;color:#ddd;font-weight:bold;font-size:13px; text-align:center;background:#fff;padding:5px 0;}

/*공통 레이아웃*/
#wrap{width:100%;min-width:1300px;background-color:#fff;position:relative;}
#header{width:100%;min-width:1300px;}
#Container{width:1300px;margin:0 auto;}
#container{width:1300px;margin:0 auto;}
#content{float:right;width:1050px;margin:0 0 15px 45px;}
#sidebar{width:200px;float:left;position:relative;}
#footer{min-width:1300px;clear:both;position:relative;padding-bottom:15px;}

/* header*/
#header #RightFixed{position:fixed;width:80px;height:100%;background:#e60032;right:0px;top:0;display:inline-block;z-index:999;}
#RightFixed ul{position:relative;margin-top:100px;}
#RightFixed ul li{display:inline-block;width:100%;height:80px;text-align:center;border-bottom:1px solid #ee5476;}
#RightFixed ul li:first-child{height:100px;}
#RightFixed ul li a{display:block;color:#fff;text-align:center;}
#RightFixed ul li a:hover{opacity:0.8;}
.TopMall{height:50px;padding-top:50px;background:#2cab38 url(../images/os/new_img1/common/right-mall.png) no-repeat center top 15px;}
.TopLog{height:30px;padding-top:50px;background:url(../images/os/new_img1/common/icon-login.png) no-repeat center top 15px;}
.TopMem{height:30px;padding-top:45px;background:url(../images/os/new_img1/common/icon-member.png) no-repeat center top 15px;}
.TopOffice{height:30px;padding-top:50px;background:url(../images/os/new_img1/common/icon-office.png) no-repeat center top 15px;}
.TopShare{z-index:1004;height:30px;padding-top:50px;background:url(../images/os/new_img1/common/icon-share.png) no-repeat center top 15px;}

/* btn */
.btn {display:inline-block;cursor:pointer;background:#fff;border:1px solid #bbb;height:34px;padding:6px 12px;font-size:14px;line-height:18px}
.btn.btn-default {}
.btn.btn-default:hover {background:#eee;border-color:#bbb}
.btn.btn-default:focus {background:#ddd;border-color:#bbb}
.btn.btn-primary {background-color:#007ec4;border-color:#005A8C;color:#fff}
.btn.btn-primary:hover {background-color:#158CCF;border-color:#005A8C}
.btn.btn-primary:focus {background-color:#005A8C;border-color:#005A8C}
.btn.btn-default[disabled] {background:#fafafa!important;border-color:#ccc!important;color:#aaa}
.btn.btn-primary[disabled] {background:#3F9DD0!important;border-color:#537FA9!important;color:#ACD3E8;box-shadow:none!important}

.btn.btn-left {float:left;margin:0 5px 0 0!important}

/* tabs */
.tabs_container {padding:10px 5px 0;border-bottom:1px solid #ddd}
.tabs_container:after {content:'';clear:both;display:table}
.tabs_container > .tab {float:left;line-height:40px;cursor:pointer;border-bottom:2px solid transparent;color:#555;margin:0 15px;margin-bottom:-1px;font-size:14px}
.tabs_container > .tab.active {border-color:#007ec4;color:#000}
.tabs_container > .tab:hover {color:#000}
.page_container {}
.page_container > .page {display:none}
.page_container > .page.active {display:block}

 /* gnb */
#header .gnbWrap{position:fixed;z-index:997;left:50px;top:50px;width:240px;height:600px;background:url(../images/os/new_img1/common/gnb-bg.png) repeat;display:inline-block;padding:50px 20px 20px 20px;}
#header .gnbWrap h1{position:relative;width:220px;margin:0 auto;display:block;}
#gnb{width:100%;margin:50px auto 0 auto;position:relative;}

#gnb > li{float:none;width:100%;display:inline-block;height:49px;line-height:50px;background:url(../images/os/new_img1/common/gnb-underline.png) repeat-x center bottom;}
#gnb > li > a{width:100%;height:49px;display:block;font-size:15px;color:#fff;text-align:left;font-weight:normal;padding-left:20px;}
#gnb > li > a.on{color:#e60032;background:url(../images/os/new_img1/common/gnb-menubg.png) repeat !important;}
#gnb li a{display:block;}
#gnb .subMenu{width:230px;display:none;}
#gnb .subMenu ul{overflow:hidden;width:230px;border:1px solid #000;background:url(../images/os/new_img1/common/gnb-bg.png) repeat !important;position:relative;margin:-50px 0 0 230px;}
#gnb .subMenu li{height:44px;line-height:45px;}
#gnb .subMenu li a{height:44px;line-height:45px;background:url(../images/os/new_img1/common/gnb-underline.png) repeat-x center bottom !important;font-size:14px;text-align:left;color:#fff;padding-left:30px;} 
#gnb .subMenu li a.on,#gnb .subMenu li a:hover{color:#e60032;background:url(../images/os/new_img1/common/gnb-menubg.png) repeat !important;}

/* footer */
#footer{clear:both;position:relative;width:100%;background:#000;}
#footer .FooterTop{width:100%;height:50px;position:relative;text-align:center;background:#343434;}
#footer .FooterTop ul{display:inline-block;}
#footer .FooterTop ul li{float:left;}
#footer .FooterTop ul li:first-child{color:#e60032;}
#footer .FooterTop ul li a{display:block;margin-left:20px;line-height:50px;font-weight:bold;font-size:14px;color:#999;}
#footer .FooterTop ul li a:hover{color:#fff;}
#footer .FooterContWrap{width:100%;}
.FooterContWrap .FooterCont{width:1300px;margin:10px auto 20px auto;position:relative;}
.FooterContWrap .FooterCont address{text-align:center;font-size:13px;line-height:18px;color:#555;position:relative;padding-top:15px;}
.FooterContWrap .FooterCont address p{font-size:12px;color:#777;margin-top:7px;}

.FooterContWrap .FooterCont .goTop{position:absolute;display:inline-block;z-index:998;width:60px;height:60px;border-radius:5px;background:#333;right:0;top:0px;}
.FooterContWrap .FooterCont .goTop a{display:block;width:60px;height:60px;border-radius:5px;text-align:center;}
.FooterContWrap .FooterCont .goTop a img{margin-top:20px;}
.FooterContWrap .FooterCont .goTop a:hover{background:#222;}

/*레이어팝업*/
#mask{position:absolute;left:0;top:0;z-index:9000;background:#000;display:none;}
#boxes .window {position:absolute;width:850px;height:500px;display:none;z-index:9999;}
#boxes #dialog{width:850px;height:900px;overflow:hidden;padding-top:100px;}
#boxes #dialog .close{position:absolute;top:300px;right:0}
#boxes #dialog iframe{width:800px;height:450px;overflow:hidden;margin-top:200px;}

/* 공통 */
.btnf,
.btnf * {margin:0; padding:0; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; border:0; font-size:12px; 
        white-space:nowrap; vertical-align:middle; overflow:visible; color:#fff;}
.btnf *{cursor:pointer; cursor:hand; vertical-align:middle; text-align:center}

/* 전체상품 버튼 디자인 */
.lgty1{background-color:#000; width:150px; height:32px; line-height:32px; text-align:center; color:#fff !important;}

.item-webdesign{margin-bottom:100px;width:1300px;height:100%;}
.item-figure{position:relative;display:block;margin:0 auto;padding:0;overflow:hidden;background:none;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;}
.item-figure img{position:relative;display:block;opacity:0.95;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  -moz-transition: opacity 0.35s, -moz-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale3d(1.0, 1.0, 1);
  -moz-transform: scale3d(1.0, 1.0, 1);
  transform: scale3d(1.0, 1.0, 1);}
.item-figure p{position:absolute;right:0;bottom:0;margin:2em;padding:0 1em;max-width:100px;text-align:center;opacity:0;color:#ffffff;
  -webkit-transition: opacity 0.35s;
  -moz-transition: opacity 0.35s;
  transition: opacity 0.35s;}
.item-figure:hover img{opacity:0.9;
  -webkit-transform: scale3d(0.98, 0.98, 1);
  -moz-transform: scale3d(0.98, 0.98, 1);
  transform: scale3d(0.98, 0.98, 1);}
.item-figure:hover .overlay:before {
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
  -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);}
.item-figure:hover p{opacity: 1;
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;}
.overlay::before {content: "";position: absolute;top:0;left:0;width:300%;height:300%;background: rgba(255, 255, 255, 0.2);
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition: -moz-transform 0.6s;
  transition: transform 0.6s;
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
  -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);}
.overlay > a {position: absolute;top:0;left:0;width:100%;height:100%;z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0;}

/* 공유하기 */
.popModal{position:absolute;background:#444;box-shadow:0 2px 6px rgba(0,0,0,0.3);text-align:center;max-width:300px;min-width:300px;height:60px !important;z-index:9997;box-sizing:border-box}
.popModal .close {line-height:12px;font-size:25px;font-weight:bold;font-family:serif;position:absolute;right:8px;top:8px;color:#000;opacity:0.2;padding:0;cursor:pointer;background:transparent;border:0;outline:0}
.popModal .close:hover {opacity:1}
.popModal .popModal_content {margin:15px auto;word-wrap:break-word;font-family:sans-serif;font-size:14px;font-weight:initial;font-style:initial;color:initial;text-decoration:initial;text-transform:initial;padding:initial}
.popModal .popModal_content.popModal_contentOverflow {max-height:60px;overflow-y:auto;overflow-x:hidden;margin:15px -8px;padding:0 7px}
.popModal .popModal_content:before {content:'';position:absolute;left:0;right:0;height:20px;bottom:-20px}
.popModal .popModal_content.popModal_asMenu {margin:0;}
.popModal .popModal_content.popModal_asMenu ul {list-style:none;padding:0}
.popModal.bottomRight .popModal_content.popModal_asMenu ul {text-align:right;margin-top:0px !important;}
.popModal .popModal_content.popModal_asMenu ul > li {float:left !important;width:19.8% !important;height:60px !important;color:#000;display:inline-block;border-bottom:0px !important;}
.popModal .popModal_content.popModal_asMenu ul > li > a{width:40px;height:40px;margin:10px auto;border-radius:20px;text-indent:-9999;font-size:0;line-height:0;}

.popModal .popModal_content.popModal_asMenu .SnsTwitter{background:#00aced url(../images/os/new_img1/common/sns-twitter.png) no-repeat 50% 50%;}
.popModal .popModal_content.popModal_asMenu .SnsFacebook{background:#3b5998 url(../images/os/new_img1/common/sns-facebook.png) no-repeat 50% 50%;}
.popModal .popModal_content.popModal_asMenu .SnsBand{background:#3abf66 url(../images/os/new_img1/common/sns-band.png) no-repeat 50% 50%;}
.popModal .popModal_content.popModal_asMenu .SnsKakaostory{background:#fce000 url(../images/os/new_img1/common/sns-kakaostory.png) no-repeat 50% 50%;}
.popModal .popModal_content.popModal_asMenu .SnsLink{background:#000 url(../images/os/new_img1/common/sns-link.png) no-repeat 50% 50%;}
.popModal .popModal_content.popModal_asMenu ul > li > a:hover{opacity:0.5;}

.popModal .popModal_footer {background:#444;padding:15px;border-top:1px solid #444;text-align:right;position:absolute;bottom:0;left:0;right:0}
.popModal .popModal_footer button{margin:0 0 0 5px}
.popModal:before,
.popModal:after {content:'';position:absolute;border:10px solid transparent}
.popModal:after {z-index:1}
.popModal.bottomLeft:before,
.popModal.bottomRight:before,
.popModal.bottomCenter:before {border-top-width:0;border-bottom-color:#444;top:-10px;left:6px}
.popModal.bottomLeft:after,
.popModal.bottomRight:after,
.popModal.bottomCenter:after {border-top-width:0;border-bottom-color:#444;top:-9px;left:6px}
.popModal.bottomRight:before,
.popModal.bottomRight:after {left:auto;right:6px}
.popModal.bottomCenter:before,
.popModal.bottomCenter:after {left:50%;margin-left:-10px}
.popModal.leftTop:before,
.popModal.leftCenter:before {border-right-width:0;border-left-color:#444;top:6px;right:-10px}
.popModal.leftTop:after,
.popModal.leftCenter:after {border-right-width:0;border-left-color:#444;top:6px;right:-9px}
.popModal.rightTop:before,
.popModal.rightCenter:before {border-left-width:0;border-right-color:#444;top:6px;left:-10px}
.popModal.rightTop:after,
.popModal.rightCenter:after {border-left-width:0;border-right-color:#444;top:6px;left:-9px}
.popModal.leftCenter:before,
.popModal.rightCenter:before {top:50%;margin-top:-10px}
.popModal.leftCenter:after, 
.popModal.rightCenter:after {top:50%;margin-top:-10px}
@media (max-width:600px){
.popModal {position:relative;top:10px!important;left:auto!important;right:auto!important;width:100%!important;max-width:none}}
/* animation */
.animated {animation-duration:0.2s;animation-fill-mode:both;transform:translateZ(0);backface-visibility:hidden}
.fadeInLeft {animation-name:fadeInLeft}
.fadeOutLeft {animation-name:fadeOutLeft}
.fadeInRight {animation-name:fadeInRight}
.fadeOutRight {animation-name:fadeOutRight}
.fadeInTop {animation-name:fadeInTop}
.fadeInTopBig {animation-name:fadeInTopBig}
.fadeOutTop {animation-name:fadeOutTop}
.fadeInBottom {animation-name:fadeInBottom}
.fadeOutBottom {animation-name:fadeOutBottom}

@keyframes fadeInLeft {
  0% {opacity:0;transform:translateX(-10px)}
  100% {opacity:1;transform:translateX(0)}
}
@keyframes fadeOutLeft {
  0% {opacity:1;transform:translateX(0)}
	100% {opacity:0;transform:translateX(-10px)}
}

@keyframes fadeInRight {
  0% {opacity:0;transform:translateX(10px)}
  100% {opacity:1;transform:translateX(0)}
}
@keyframes fadeOutRight {
  0% {opacity:1;transform:translateX(0)}
	100% {opacity:0;transform:translateX(10px)}
}

@keyframes fadeInTop {
  0% {opacity:0;transform:translateY(-10px)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes fadeOutTop {
  0% {opacity:1;transform: translateY(0)}
	100% {opacity:0;transform:translateY(-10px)}
}

@keyframes fadeInTopBig {
  0% {opacity:0;transform:translateY(-100%)}
  100% {opacity:1;transform:translateY(0)}
}

@keyframes fadeInBottom {
  0% {opacity:0;transform:translateY(10px)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes fadeOutBottom {
  0% {opacity:1;transform:translateY(0)}
	100% {opacity:0;transform:translateY(10px)}
}