|
|
@@ -661,11 +661,15 @@ header {
|
|
|
position: fixed;left: 0;top: 0;width: 100%;z-index: 80;
|
|
|
position: sticky;left: 0;top: 0;width: 100%;transition: top 0.3s;/* background-color: #fff; */
|
|
|
}
|
|
|
+header::after{content: '';display: block;clear: both;}
|
|
|
header .htop {position: relative;height: 55px;-webkit-box-sizing: border-box;box-sizing: border-box;/*border: rgba(0, 0, 0, 0.1) solid 1px;*/ border-bottom: 1px solid rgba(0, 0, 0, 0.1); background-color: #fff;}
|
|
|
+header .htop:after {content: '';display: block; clear: both;}
|
|
|
header #htopSub{border-bottom: 0px solid #e5e5e5;box-sizing: border-box;}
|
|
|
-header #htopSubs{border-bottom: 1px solid #000000;box-sizing: border-box;}
|
|
|
-header .htop h1 {display: inline-block;position: relative;height: 40px;line-height: 4.0rem;vertical-align: top;margin: 10px 0 0 10px;font-size: 1.8rem;color: #222;}
|
|
|
-header .htop h1 img {position: relative;top: 50%;left: 0;right: 0;transform: translate(0, -50%);margin: 0px 0;}
|
|
|
+header #htopSubs{border-bottom: 0px solid #000000;box-sizing: border-box;}
|
|
|
+header .htop h1 {display: inline-block;position: relative;width: 10.666rem;height: 100%;line-height: 4.5rem;vertical-align: middle;margin: 0px 0 0 2.0rem;font-size: 1.8rem;color: #222;}
|
|
|
+header .htop h1#htopTitle {display: inline-block;position: relative;max-width: 18rem;width: auto;height: 100%;line-height: 4.5rem;vertical-align: middle;padding: 0px 1.5rem 0px 0rem;font-size: 1.8rem;color: #222;}
|
|
|
+header .htop h1 a {height: 100%;width: 100%;display: block;}
|
|
|
+header .htop h1 img {position: absolute;top: 50%;left: 0;right: 0;transform: translate(0, -50%);margin: 0px 0;width: 10.666rem;height: auto;line-height: 1.6rem;vertical-align: middle;}
|
|
|
header .htop .btn_back {margin: 10px 0 0 15px;width: 35px;height: 35px;}
|
|
|
header .htop .btn_back span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;}
|
|
|
header .htop .btn_back span i {display: block;position: absolute;background: #222;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
|
|
|
@@ -673,35 +677,52 @@ header .htop .btn_back span i.gl1 {left: 0;top: 6px;width: 12px;height: 2px;-web
|
|
|
header .htop .btn_back span i.gl2 {left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);width: 24px;height: 2px;}
|
|
|
header .htop .btn_back span i.gl3 {left: 0;bottom: 6px;width: 12px;height: 2px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
|
|
|
header .htop .btn_back:active span i {left: -20px;}
|
|
|
+
|
|
|
+
|
|
|
+header .htop .button_wrap {height: 5.5rem; float: right; padding: 1.6rem 0 0; margin: 0 2.5rem 0 0; box-sizing: border-box;}
|
|
|
+header .htop .button_wrap .search { margin:0 1.1666rem 0 0; }
|
|
|
+header .htop .button_wrap .search img{width: 2.0rem;}
|
|
|
+header .htop .button_wrap .store img{width: 1.6rem;}
|
|
|
+header .htop .button_wrap .store img:nth-child(1) { height: 2rem; }
|
|
|
+header .htop .button_wrap .store span { width: 2.1rem; height: 1.4rem; position: absolute; top: 1.2rem; right: 1.5rem; background: #fd4802; border-radius: 0.8rem; font-size: 0.8rem; color: #fff; line-height: 1.6rem;}
|
|
|
+
|
|
|
+
|
|
|
header .subs {}
|
|
|
|
|
|
-header .btn_gnb {position: absolute;top: 0px;right: -45px;width: 35px;height: 35px;z-index: 10;}
|
|
|
+
|
|
|
+header .btn_gnb {position: absolute;top: 0px;right: -4.5rem;width: 3.5rem;height: 100%;z-index: 10;}
|
|
|
header .btn_gnb span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;}
|
|
|
-header .btn_gnb span i {display: block;position: absolute;left: 0;width: 24px;height: 2px;background: #222;-webkit-transition: all 0.15s ease-out;transition: all 0.15s ease-out;}
|
|
|
-header .btn_gnb span i.gl1 {top: 6px;}
|
|
|
-header .btn_gnb span i.gl2 {bottom: 6px;}
|
|
|
-header .btn_gnb.on span i {width: 24px;top: 10px;background: #222;}
|
|
|
-header .btn_gnb.on span i.gl1 {transform: rotate(45deg);-webkit-transform: rotate(45deg);}
|
|
|
-header .btn_gnb.on span i.gl2 {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
|
|
|
-
|
|
|
-header .subs .btn_gnbs {position: absolute;top: 0px;right: -45px;width: 35px;height: 35px;z-index: 10;}
|
|
|
+header .btn_gnb span i {display: block;position: absolute;left: 0;width:100%;height: 100%;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
|
|
|
+/* header .btn_gnb span i.gl1 {top: 6px;} */
|
|
|
+/* header .btn_gnb span i.gl2 {bottom: 6px;} */
|
|
|
+/* header .btn_gnb.on span i {width: 24px;top: 10px;background: #222;} */
|
|
|
+/* header .btn_gnb.on span i.gl1 {transform: rotate(45deg);-webkit-transform: rotate(45deg);} */
|
|
|
+/* header .btn_gnb.on span i.gl2 {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);} */
|
|
|
+
|
|
|
+header .subs .btn_gnbs {position: absolute;top: 0px;right: -2.0rem;width: 3.5rem;height: 4.5rem;z-index: 10;}
|
|
|
+header .subs .btn_gnbs span i {display: block;position: absolute;left: 0;width: 100%;height: 100%;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
|
|
|
+/* header .subs .btn_gnbs span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;} */
|
|
|
+/* header .subs .btn_gnbs span i {display: block;position: absolute;left: 0;width: 24px;height: 2px;background: #222;-webkit-transition: all 0.15s ease-out;transition: all 0.15s ease-out;} */
|
|
|
header .subs .btn_gnbs span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;}
|
|
|
-header .subs .btn_gnbs span i {display: block;position: absolute;left: 0;width: 24px;height: 2px;background: #222;-webkit-transition: all 0.15s ease-out;transition: all 0.15s ease-out;}
|
|
|
-header .subs .btn_gnbs span i.gl1 {top: 6px;background: #222;}
|
|
|
-header .subs .btn_gnbs span i.gl2 {bottom: 6px;background: #222;}
|
|
|
-header .subs .btn_gnbs.on span i {width: 24px;top: 10px;background: #222;}
|
|
|
-header .subs .btn_gnbs.on span i.gl1 {transform: rotate(45deg);-webkit-transform: rotate(45deg);}
|
|
|
-header .subs .btn_gnbs.on span i.gl2 {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
|
|
|
+header .subs .btn_gnbs span i {background: url(/images/mo/ico_btn_more.png) no-repeat;background-size: 1.3rem 0.733rem;background-position: 50% 50%;}
|
|
|
+/* header .subs .btn_gnbs span i.gl1 {top: 6px;background: #222;} */
|
|
|
+/* header .subs .btn_gnbs span i.gl2 {bottom: 6px;background: #222;} */
|
|
|
+/* header .subs .btn_gnbs.on span i {width: 24px;top: 10px;background: #222;} */
|
|
|
+header .subs .btn_gnbs.on span i {transform: rotate(-180deg);-webkit-transform: rotate(-180deg);}
|
|
|
+/* header .subs .btn_gnbs.on span i.gl1 {transform: rotate(45deg);-webkit-transform: rotate(45deg);} */
|
|
|
+/* header .subs .btn_gnbs.on span i.gl2 {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);} */
|
|
|
|
|
|
header.hide {display: none;}
|
|
|
header.main .htop {border: rgba(255, 255, 255, 0.2) solid 1px;background-color: #222222;}
|
|
|
header.main .htop.bright {background-color: transparent;}
|
|
|
-header.main .htop h1 {margin: 10px 0 0 20px;width: 95px;}
|
|
|
-header.main .btn_gnb span i {background: #fff;}
|
|
|
-header.main .btn_gnb.on span i {background: #222;}
|
|
|
-
|
|
|
-header .hmenu {position: absolute;left: 0;bottom: 100%;background-color: rgba(0, 0, 0, 0.5);padding: 0 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100vh;-webkit-transition: all 0 ease-out;transition: all 0 ease-out;}
|
|
|
-header .hmenu .inner {padding: 0 25px;background-color: #fff;position: relative;top: 0;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
|
|
|
+/* header.main .htop h1 {margin: 10px 0 0 20px;width: 95px;} */
|
|
|
+header.main .btn_gnb span i {background: url(/images/mo/ico_btn_more_w.png) no-repeat;background-size: 1.3rem 0.733rem;background-position: 50% 50%;}
|
|
|
+header.main .btn_gnb.on span i {transform: rotate(-180deg);-webkit-transform: rotate(-180deg);}
|
|
|
+/* header.main .btn_gnb span i {background: #fff;} */
|
|
|
+/* header.main .btn_gnb.on span i {background: #222;} */
|
|
|
+
|
|
|
+header .hmenu {position: absolute;left: 0;bottom: 100%;background-color: rgba(0, 0, 0, 0.0);padding: 0 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100vh;-webkit-transition: all 0 ease-out;transition: all 0 ease-out;}
|
|
|
+header .hmenu .inner {padding: 0;background-color: #fff;position: relative;top: 0;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
|
|
|
header .hmenu.on {bottom: 0;}
|
|
|
header .hmenu.on .inner {top: 100%;}
|
|
|
header .hmenu .scrollWrap {height: calc(100vh - 50px);-webkit-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;}
|
|
|
@@ -716,9 +737,12 @@ header .hmenu .tnb ul > li a{display: block; padding: 5px 0; color: #888; font-w
|
|
|
header .hmenu .tnb ul > li a.on{color: #222; font-weight: 400; border-bottom: #9f7952 solid 2px;}
|
|
|
*/
|
|
|
|
|
|
-header .hmenu .bng{background: #ffffff; padding-top: 40px;}
|
|
|
-header .hmenu .bng .d1 > li{position: relative;}
|
|
|
-header .hmenu .bng .d1 > li > a{display: block; padding: 8px 0; font-size: 2.8rem; font-family: 'Lato'; color: #222;}
|
|
|
+header .hmenu .bng{background: #ffffff;}
|
|
|
+header .hmenu .bng .d1 > li{position: relative;height: 7.2rem;border-bottom: 0.1rem solid #eeeeee;}
|
|
|
+header .hmenu .bng .d1 > li > a{display: block;padding: 0 2.0rem;line-height: 7.2rem;font-size: 1.8rem;font-weight: 400; font-family: 'Lato'; color: #222;}
|
|
|
+header .hmenu .bng .d1 > li > a::after{content: '';display: block; clear:both;}
|
|
|
+header .hmenu .bng .d1 > li > a span{float: right;}
|
|
|
+header .hmenu .bng .d1 > li > a span img{opacity: 0.3;max-width: 8.333rem;max-height: 4.533rem;width: auto;height: auto;vertical-align: middle;}
|
|
|
header .hmenu .bng .d1 > li.folder::before{content: ''; display: block; position: absolute; right: 5px; top: 15px; width: 1px; height: 12px; background-color: #222;}
|
|
|
header .hmenu .bng .d1 > li.folder::after{content: ''; display: block; position: absolute; right: 0; top: 20px; width: 12px; height: 1px; background-color: #222;}
|
|
|
header .hmenu .bng .d1 > li.folder.on::before{display: none;}
|
|
|
@@ -737,13 +761,13 @@ header .hmenu .bng .d3 > li{position: relative; padding-left: 15px;}
|
|
|
header .hmenu .bng .d3 > li::before{content: ''; display: block; position: absolute; left: 2px; top: 15px; width: 4px; height: 4px; background-color: #999;}
|
|
|
header .hmenu .bng .d3 > li > a{display: block; padding: 8px 0; font-size: 1.5rem; color: #222;}
|
|
|
|
|
|
-header .hmenu .bnb{background-color: #f5f5f5; margin: 30px -25px 0 -25px; padding: 30px 25px; position: relative;}
|
|
|
+header .hmenu .bnb{background-color: #f5f5f5; position: relative;}
|
|
|
header .hmenu .bnb ul > li{position: relative;}
|
|
|
header .hmenu .bnb ul > li::after{content: ''; display: block; position: absolute; right: 2px; top: 20px; width: 10px; height: 10px; border: #9f7952 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
|
|
|
header .hmenu .bnb ul > li > a{display: block; padding: 8px 0; font-size: 1.5rem; color: #9f7952;}
|
|
|
|
|
|
|
|
|
-header .hmenus {position: absolute;left: 0;bottom: 100%;background-color: rgba(0, 0, 0, 0.5);padding: 0 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100vw;height: 100vh;-webkit-transition: all 0 ease-out;transition: all 0 ease-out;}
|
|
|
+header .hmenus {position: absolute;left: 0;bottom: 100%;background-color: rgba(0, 0, 0, 0.0);padding: 0 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100vw;height: 100vh;-webkit-transition: all 0 ease-out;transition: all 0 ease-out;}
|
|
|
header .hmenus .inner {padding: 0 25px;background-color: #fff;position: relative;top: 0;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
|
|
|
header .hmenus.on {bottom: 0;}
|
|
|
header .hmenus.on .inner {top: 100%;}
|
|
|
@@ -759,7 +783,7 @@ header .hmenus .tnb ul > li a{display: block; padding: 5px 0; color: #888; font-
|
|
|
header .hmenus .tnb ul > li a.on{color: #222; font-weight: 400; border-bottom: #9f7952 solid 2px;}
|
|
|
*/
|
|
|
|
|
|
-header .hmenus .bng{background: #ffffff; padding-top: 40px;}
|
|
|
+header .hmenus .bng{background: #ffffff;}
|
|
|
header .hmenus .bng .d1 > li{position: relative;}
|
|
|
header .hmenus .bng .d1 > li > a{display: block; padding: 8px 0; font-size: 2.8rem; font-family: 'Lato'; color: #222;}
|
|
|
header .hmenus .bng .d1 > li.folder::before{content: ''; display: block; position: absolute; right: 5px; top: 15px; width: 1px; height: 12px; background-color: #222;}
|
|
|
@@ -780,12 +804,25 @@ header .hmenus .bng .d3 > li{position: relative; padding-left: 15px;}
|
|
|
header .hmenus .bng .d3 > li::before{content: ''; display: block; position: absolute; left: 2px; top: 15px; width: 4px; height: 4px; background-color: #999;}
|
|
|
header .hmenus .bng .d3 > li > a{display: block; padding: 8px 0; font-size: 1.5rem; color: #222;}
|
|
|
|
|
|
+header .hmenus .bng{position: relative; width:100%; height:100%;background:rgba(0,0,0,.0); z-index:600;}
|
|
|
+/* header .hmenus .bng .nav_box.active{visibility:visible;} */
|
|
|
+header .hmenus .bng .lap{position:absolute; top:0; left:0; padding:0; width:100%; background:#fff;}
|
|
|
+header .hmenus .bng .nav_list{min-height:15rem; max-height:40rem; overflow-y:auto;}
|
|
|
+/* header .hmenus .bng .nav_box .nav_close{position:absolute; bottom:-3.8rem; left:50%; width:1.6rem; height:1.6rem; background-image: url(/images/mo/ico_pop_cls_w.png); background-repeat:no-repeat; background-position:center center; font-size:0; text-indent:-999999px; background-size: contain; -webkit-transform:translateX(-50%); transform:translateX(-50%);} */
|
|
|
+header .hmenus .bng .nav_list {padding:0;}
|
|
|
+header .hmenus .bng .nav ul {}
|
|
|
+header .hmenus .bng .nav ul > li {}
|
|
|
+header .hmenus .bng .nav ul > li .daps1{display:block; font-size:1.4rem; color:#666; font-weight:300; line-height:5rem; border-bottom:1px solid #ddd;}
|
|
|
+header .hmenus .bng .nav ul > li .daps2 li > a{display:block; font-size:1.4rem; font-weight:300; color:#222; line-height:4rem;}
|
|
|
+header .hmenus .bng .nav ul > li .daps2 li.on > a{color:#fd4802; font-weight:500; line-height:5rem;}
|
|
|
+
|
|
|
header .hmenus .bnb{background-color: #f5f5f5; margin: 30px -25px 0 -25px; padding: 30px 25px; position: relative;}
|
|
|
header .hmenus .bnb ul > li{position: relative;}
|
|
|
header .hmenus .bnb ul > li::after{content: ''; display: block; position: absolute; right: 2px; top: 20px; width: 10px; height: 10px; border: #9f7952 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
|
|
|
header .hmenus .bnb ul > li > a{display: block; padding: 8px 0; font-size: 1.5rem; color: #9f7952;}
|
|
|
|
|
|
|
|
|
+
|
|
|
/* gnb */
|
|
|
body.header-show .app .gnb{top: 50px;}
|
|
|
.app .gnb {position: -webkit-sticky; position: sticky; top: 0px; padding-right: 50px; background-color: #000; z-index: 9; transition: top 0.3s; width: 100%;}
|
|
|
@@ -907,7 +944,7 @@ footer .collapse .infos > li.fn{clear: both; padding-left: 0;}
|
|
|
footer .collapse .infos.on{padding: 0px 0px 20px 0; height: auto;}
|
|
|
|
|
|
/* sub page slide nav */
|
|
|
-.lnb{padding: 1.46rem 2.0rem 1.3rem 2.0rem; border-bottom: #e5e5e5 solid 1px; box-sizing: border-box;}
|
|
|
+.lnb{padding: 1.46rem 2.0rem 1.0rem 2.0rem; border-bottom: #e5e5e5 solid 1px; box-sizing: border-box;}
|
|
|
.lnb .swiper-wrapper{transform: translate3d(0px, 0px, 0px);}
|
|
|
.lnb ul > li{width: auto; text-align: center;}
|
|
|
.lnb ul > li button,
|
|
|
@@ -938,8 +975,8 @@ footer .collapse .infos.on{padding: 0px 0px 20px 0; height: auto;}
|
|
|
/* page nav */
|
|
|
.pnb ul{border-bottom: #e5e5e5 solid 1px;}
|
|
|
.pnb ul::after{content: ''; display: block; clear: both;}
|
|
|
-.pnb ul > li{float: left; width: auto; padding: 0 2.6rem;}
|
|
|
-.pnb ul > li:first-child{padding: 0 2.6rem 0 2.0rem;}
|
|
|
+.pnb ul > li{float: left; width: auto; padding: 0 1.6rem;}
|
|
|
+.pnb ul > li:first-child{padding: 0 1.6rem 0 1.0rem;}
|
|
|
.pnb ul > li a{display: block; width: 100%; padding: 1.46rem 0 1.3rem 0; text-align: center; position: relative;}
|
|
|
.pnb ul > li a.on{color: #fd4802;}
|
|
|
.pnb ul > li a.on::after{content: ''; display: block; width: 100%; height: 3px; background-color: #fd4802; color: #fd4802; position: absolute; bottom: 0; left: 50%; right: 50%; transform: translate(-50%);}
|
|
|
@@ -1241,7 +1278,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- z-index: 19;
|
|
|
+ z-index: 1000;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
|
@@ -1257,7 +1294,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
|
|
|
position: fixed;
|
|
|
top: 50%;
|
|
|
left: 0;
|
|
|
- z-index: 20;
|
|
|
+ z-index: 1001;
|
|
|
min-width:13.3rem;
|
|
|
max-width: 95%;
|
|
|
background-color: rgba(255, 255, 255,1);
|
|
|
@@ -1598,7 +1635,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
|
|
|
|
|
|
/* modal */
|
|
|
/* modal popup */
|
|
|
-.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:999999;padding:0px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center;}
|
|
|
+.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:999;padding:0px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center;}
|
|
|
.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em;}
|
|
|
.blocker.behind{background-color:transparent;}
|
|
|
.modal{display:none; vertical-align:middle;position:relative;z-index:2;max-width:960px;box-sizing:border-box;width:90%;background:#fff;padding:0;text-align:left; -webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;}
|
eskim