/* ---------------------------------------------------------------- Basic -----------------------------------------------------------------*/ .hd_rt {float: right;} .hd_rt a {display: inline-block; vertical-align: middle; margin: 0 9px; font-size: 14px; color: #fff;} dl, dt, dd, ol, ul, li { margin: 0; padding: 0; list-style:none; } .clear { clear: both; display: block; font-size: 0px; height: 0px; line-height: 0; width: 100%; overflow:hidden; } :active, :focus { outline: none !important; } caption {display:none;} /* ---------------------------------------------------------------- Typography -----------------------------------------------------------------*/ .stretched #wrapper { width: 100%; margin: 0; box-shadow: none; } .quick{position:fixed; z-index:999; top:100px; right:0;} .quick_con2 {position:relative;} .event_obj{position:fixed; z-index:99; margin-top:700px; right:30%;} .quick_t .ban{position:absolute;right:35%; padding-top:712px;z-index:1000;} .quick_t .ban_img{position:fixed;} .quick_con3 {position:relative;} .event_obj3{position:fixed; z-index:99; margin-top:700px; right:20%;} .quick_t3 .ban3{position:absolute;right:25%; padding-top:712px;z-index:9999;} .quick_t3 .ban_img3{position:fixed;} .quick_con4 {position:relative;} .event_obj4{position:fixed; z-index:99; margin-top:700px; right:10%;} .quick_t4 .ban4{position:absolute;right:15%; padding-top:712px;z-index:9999;} .quick_t4 .ban_img4{position:fixed;} /* ============================== * layout * ============================== */ #headerWrap{ position:fixed; top:0; left:0; z-index:999; width:100%;} #header { height:81px; border-bottom:1px solid #f1f1f1; background:rgba(255,255,255,0.95)} #header .innerBox { display:flex; align-items: center;} #header h1 { flex:0 0 auto;} #header h1 a { display:block; width:140px; height:40px; ;font-size:0; text-transform: uppercase; background:url('https://channel-static.rebeauty.co.kr/melonps/ko/img/common/logo.png') no-repeat center center / 100%;} #header nav { flex:1 1 auto; height:100%; padding-left:40px;} #header nav ul { display:flex;} #header nav ul li { flex:1 1 auto;} #header nav ul li a { display:flex; position:relative; width:100%; height:80px; padding:0; transition:all .3s ease;} #header nav ul li a span { position:relative; display:inline-flex; height:100%; align-items: center; font-size:16px; color:#7777; transition:all .3s ease;} #header nav ul li a span:after { content:''; display:block; position:absolute; bottom:-1px; left:50%; width:0%; height:2px; background: #111111; opacity:0; transition:all .3s ease;} #header nav ul li.on a span { color:#111111;} #header nav ul li.on a span:after { left:0; width:100%; opacity: 1;} #header nav ul li.active a span { color:#111111;} #header nav ul li.active a span:after { left:0; width:100%; opacity: 1;} #header .language { flex:0 0 auto; position:relative;} #header .language > a { display: block; position:relative; width:40px; font-size:14px; color:#111; text-transform: uppercase;} #header .language > a:after { content:''; display:block; position:absolute; top:50%; right:0; width:7px; height:6px; background:url('../images/common/ico_language_arrow.png') no-repeat; transform: translateY(-50%); transition: all .3s ease;;} #header .language .view { display:none; position:absolute; top:25px; left:-10px; z-index:999; width:60px; padding:5px 10px; border:1px solid #cecece; background:#fff;} #header .language .view a { display:block; padding:2px 0; font-size:14px; color:#111; text-transform: uppercase;} #header .language > a.on:after { transform: translateY(-50%) rotate(180deg);} #header .icoShop { flex:0 0 auto; width:20px; height:20px; margin-left:30px; font-size:0; background:url('../images/common/ico_shop.png') no-repeat center center / 100%;} #header .btnGnbAll { display:none; position:relative; width:50px; height:50px; margin-left:10px; font-size:0;} #header .btnGnbAll span { display:block; position:absolute; top:50%; left:50%; width:26px; height:3px; margin:-2px 0 0 -13px; background:#111;} #header .btnGnbAll span:before { content:''; display:block; position:absolute; top:-8px; width:100%; height:3px; background:#111;} #header .btnGnbAll span:after { content:''; display:block; position:absolute; top:8px; width:100%; height:3px; background:#111;} .gnbAllMenuWrap { visibility: hidden; overflow:hidden; position:fixed; top:81px; left:0; bottom:0; z-index:900; width:100%; background:rgba(0,0,0,0.6); opacity:0; transition: all .3s ease .2s;} .gnbAllMenu { overflow: hidden; overflow-y:auto; position:absolute; top:0; left:0; right:0; max-height:calc(100vh - 81px); background:#78a991; transform: translateY(-100%); transition:all .3s ease;} .gnbAllMenu .innerBox:before { content: ''; display:block; position: absolute; top:0; left:50%; width:1000px; height:100%; background:#fff;} .gnbAllMenu .gnb { position:relative; display:flex; padding:0px 40px 0px 0;} .gnbAllMenu .gnb > div { flex:1 1 auto; padding:40px 0 50px; background:#fff;} .gnbAllMenu .gnb > .brand { flex: 0 0 auto; width:calc(180px + 1.88%);padding-left:80px; background:none} .gnbAllMenu .gnb > .brand h2 { visibility: visible; height:auto;} .gnbAllMenu .gnb > .brand h2 a { color:#fff;} .gnbAllMenu .gnb > .brand .depthBox { display:flex; flex-flow: wrap; margin-top:0px;} .gnbAllMenu .gnb > .brand .depthBox > div { width:100%; margin-bottom:50px;} .gnbAllMenu .gnb > .brand .depthBox h3 { margin-bottom:20px; font-size:15px; color:#e5e5e5;} .gnbAllMenu .gnb > .brand .depthBox ul li { padding-right:10px;} .gnbAllMenu .gnb > .brand .depthBox ul li a { position:relative; padding-left:8px; font-size:13px; color:#fff;} .gnbAllMenu .gnb > .brand .depthBox ul li a:before { content:''; display:block; position:absolute; top:8px; left:0; width:2px; height:2px; border-radius:50%; background:#999999} .gnbAllMenu .gnb h2 { height:0; visibility: hidden;} .gnbAllMenu .gnb h2 a { font-size:16px; text-transform: uppercase; font-weight:bold; color:#111;} .gnbAllMenu .gnb ul li { line-height:1;} .gnbAllMenu .gnb ul li + li { margin-top:8px;} .gnbAllMenu .gnb ul li a { padding-left:20%; font-size:14px; color:#555555;} .gnbAllMenu .gnb ul li.on a { text-decoration: underline;} .gnbAllMenuWrap .bntGnbClose { position:absolute; top:40px; left:50%; width:40px; height:40px; margin-left:600px; font-size:0; background:url('../images/common/btn_gnb_close.png') no-repeat center center / 100%;} .gnbAllMenuWrap.on { visibility: visible; opacity: 1; transition: all .3s ease;} .gnbAllMenuWrap.on .gnbAllMenu { transform: translateY(0); transition: all .3s ease .2s;} /* 메인 */ .mainWrap #header { border-bottom-color:transparent; background:none;} .mainWrap #header h1 a { background-image: url('https://channel-static.rebeauty.co.kr/melonps/ko/img/common/logo_w.png');} .mainWrap #header nav ul li a span { color:#fff;} .mainWrap #header .language > a { color:#fff;} .mainWrap #header .language > a:after { background-image: url('../images/common/ico_language_arrow_w.png');} .mainWrap #header .icoShop { background-image: url('../images/common/ico_shop_w.png');} .mainWrap #header .btnGnbAll span, .mainWrap #header .btnGnbAll span:before, .mainWrap #header .btnGnbAll span:after { background:#fff;} .mainWrap #header.scrollHead .hd_rt a{color:#000;} .mainWrap #header.scrollHead { background:rgba(255,255,255,0.95);} .mainWrap #header.scrollHead h1 a { background-image: url('https://channel-static.rebeauty.co.kr/melonps/ko/img/common/logo.png');} .mainWrap #header.scrollHead nav ul li a span { color:#777;} .mainWrap #header.scrollHead .language > a { color:#111;} .mainWrap #header.scrollHead .language > a:after { background-image: url('../images/common/ico_language_arrow.png');} .mainWrap #header.scrollHead .icoShop { background-image: url('../images/common/ico_shop.png');} .mainWrap #header.scrollHead .btnGnbAll span, .mainWrap #header.scrollHead .btnGnbAll span:before, .mainWrap #header.scrollHead .btnGnbAll span:after { background:#111;} .mainWrap #header.hover { background:rgba(255,255,255,0.95);} .mainWrap #header.hover h1 a { background-image: url('https://channel-static.rebeauty.co.kr/melonps/ko/img/common/logo.png');} .mainWrap #header.hover nav ul li a span { color:#777;} .mainWrap #header.hover .language > a { color:#111;} .mainWrap #header.hover .language > a:after { background-image: url('../images/common/ico_language_arrow.png');} .mainWrap #header.hover .icoShop { background-image: url('../images/common/ico_shop.png');} .mainWrap #header.hover .btnGnbAll span, .mainWrap #header.hover .btnGnbAll span:before, .mainWrap #header.hover .btnGnbAll span:after { background:#111;} /* hover */ html:not(.mobile) #header nav ul li a:hover span { color:#111111;} html:not(.mobile) #header nav ul li a:hover span:after { left:0; width:100%; opacity: 1;} html:not(.mobile) .gnbAllMenu .gnb ul li a:hover { text-decoration: underline;} #wrapper { position: relative; float: none; width: 1200px; margin: 0 auto; background-color: #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); } /* ---------------------------------------------------------------- Slider -----------------------------------------------------------------*/ #slider { position: relative; width: 100%; overflow: hidden; background:#FFF; } /* ---------------------------------------------------------------- 37. Stretched Layout -----------------------------------------------------------------*/ .stretched #wrapper { width: 100%; margin: 0; box-shadow: none; }