/* BASIC css start */
/* 롤링배너 */
#event .MS_img-wrap { position: relative; width: 100%; overflow: hidden; }
#event .event-imgs { position: relative; }
#event .MS_img-area { float: left; }
#event .MS_img-area:not(:first-child) { display: none; }
#event .MS_img-area img { width: 100%; }
#event .pagination { position: relative; left: 0; text-align: center; width: 100%; }
#event .pagination .swiper-pagination-switch { display: inline-block; margin: 0 2px; text-indent: -9999px; background: url(/images/d3/m_01/bull/event_now@2x.gif) no-repeat 0 50%; background-size: 19px 7px; width: 10px; height: 10px; }
#event .pagination .swiper-active-switch { background-position: -12px 50%; }
/* //롤링배너 */
.main h3 {font-size:1.250em; display: inline-block; margin:45px 0 18px 0; padding-top:6px; border-top:1px solid #3b3b3b;}
.main .topBanner {margin-top:15px;}
.main .topBanner .topBannerLeft {width:49%; float:left; position:relative;}
.main .topBanner .topBannerRight {width:49%; float:right; position:relative;}
.main .topBanner img {width:100%; vertical-align:top;}
.main .topBanner .topBannerTitle {width:100%; font-size:1.083em; font-weight:bold; padding:2px 0; background-color:rgba(0,0,0,0.4);; text-align:center; color:#fff; position:absolute; bottom:0; left:0;}


/* 배너관련 */
.section {overflow:hidden}
.main_slBox {position:relative; overflow:hidden}
.main_slBox .swiper-wrapper {overflow:hidden}

.main_slBox .swiper-slide {position:relative; overflow:hidden}
.main_slBox .swiper-slide img {width:100%;}

.main_slBox .txt {opacity:0; font-size:15px; padding:1vw 0; color:#080f6b; line-height:1.5em; font-weight:700}
.main_slBox .swiper-slide-active .txt {opacity:1; transform: translateX(100%); animation: scroll-left 18s linear infinite;}

.main_slBox .swiper-pagination {bottom:2vw; left:50%; transform: translateX(-50%);}

.main_slBox .swiper-pagination .swiper-pagination-switch {display:inline-block; width:11px; height:11px; background:rgba(255,255,255,0.5); border-radius:50%; margin:0 5px;}
.main_slBox .swiper-pagination .swiper-active-switch {background:#90c31f}


#f2s-rolling-container2  {display:none}
/*#f2s-rolling-container2 .swiper-container{width:100%; height:auto;}
.f2s-swiper img{width:100%;}
.swiper-wrapper{height:auto !important;}
.swiper-wrapper .swiper-slide{height:auto !important;}
.swiper-container > .swiper-pagination{left: 50%; bottom: 10px; transform: translate(-50%, 0);}
#f2s-rolling-container2 .swiper-pagination-bullet{border-radius:100% !important; width:12px !important; height:12px !important; opacity:2; margin-right:3px;}
#f2s-rolling-container2 .swiper-pagination-bullet:last-child{margin-right:0;}*/

#container #contents .main .cs_banner{width:94%; margin:20px auto 0}
#container #contents .main .cs_banner:after{content:""; display:block; clear:both;}
#container #contents .main .cs_banner > div{width:49%; height:110px; float:left; margin:0 2% 2% 0; text-align:center; background:#f5f5f5; border:1px solid #e9e9e9; box-sizing:border-box; position:relative;}
#container #contents .main .cs_banner > div:nth-child(2n){margin-right:0;}

#container #contents .main .cs_banner > div .row{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width: max-content;}
#container #contents .main .cs_banner > div .row img{height:40px; display:none;} 
#container #contents .main .cs_banner > div .row .text{text-align:left; padding-left:55px; background-size:auto 40px !important;}
#container #contents .main .cs_banner > div .row .text p{font-weight:700; font-size:15px; line-height:1; color:#212121;  letter-spacing:-0.1em; margin-bottom:13px; padding-top:7px; position:relative;}
#container #contents .main .cs_banner > div .row .text p:after{content:""; display:block; clear:both; position:absolute; top:0; left:0; background:#333333; width:13px; height:2px;}
#container #contents .main .cs_banner > div .row .text span{display:block; font-weight:500; line-height:1; color:#747474;  letter-spacing:-0.06em; margin-top:4px}
#container #contents .main .cs_banner > div .row .text span.red{color:#e31f1f !important;}

#container #contents .main .cs_banner > div:nth-child(1) .row .text{background:url(/design/okmark119/cs_banner_icon02.png) no-repeat center left; }
#container #contents .main .cs_banner > div:nth-child(2) .row .text{background:url(/design/okmark119/cs_banner_icon03.png) no-repeat center left; }
#container #contents .main .cs_banner > div:nth-child(3) .row .text{background:url(/design/okmark119/cs_banner_icon04.png) no-repeat center left; }
#container #contents .main .cs_banner > div:nth-child(4) .row .text{background:url(/design/okmark119/cs_banner_icon05.png) no-repeat center left; }

#container #contents .main .cs_banner > div:nth-child(4){background:#333333; }
#container #contents .main .cs_banner > div:nth-child(4) .row .text p{color:#fff;}
#container #contents .main .cs_banner > div:nth-child(4) .row .text p:after{background:#fff;}
#container #contents .main .cs_banner > div:nth-child(4) .row .text span{color:#fff;}

#container #contents .main .cs_banner > div {animation: bounce-in-left 0.7s; animation-timing-function: ease-out; animation-fill-mode: both !important;}
#container #contents .main .cs_banner > div:nth-child(1) {animation-delay: 0.3s;}
#container #contents .main .cs_banner > div:nth-child(2) {animation-delay: 0.4s;}
#container #contents .main .cs_banner > div:nth-child(3) {animation-delay: 0.5s;}
#container #contents .main .cs_banner > div:nth-child(4) {animation-delay: 0.6s;}
#container #contents .main .cs_banner > div:nth-child(5) {animation-delay: 0.7s;}

#container #contents .main .quick_banner .ubox {position:relative; height:70px; overflow:hidden}
#container #contents .main .quick_banner p{color:#1a7e5c; font-size:15px; font-weight:bold; display:block; line-height:1.5em; text-align:center; margin:10px 0;  transform: translateX(100%); animation: scroll-left 9s linear infinite;}
#container #contents .main .quick_banner p img{display:inline-block; margin-left:5px; height:35px;}

#container #contents .main .quick_banner .box {background:#fcf4f4; padding:40px 0;}
#container #contents .main .quick_banner .box ul {width:94%; margin:0 auto;}
#container #contents .main .quick_banner .box ul:after{content:""; display:block; clear:both;}
#container #contents .main .quick_banner .box ul li{opacity:0;width:49%; float:left; margin:0 2% 10px 0; text-align:center; }
#container #contents .main .quick_banner .box ul li img{width:100%;}
#container #contents .main .quick_banner .box ul li:nth-child(2n){margin-right:0;}
#container #contents .main .quick_banner .box ul li span{display:block; line-height:1; margin-top:10px; font-weight:bold; color:#343434;}

#section3.active .quick_banner .box ul li {opacity:1; animation: fade-in-up 0.7s;animation-timing-function: ease-out;  animation-fill-mode: both !important;}
#section3.active .quick_banner .box ul li:nth-child(1) {animation-delay: 0.3s;}
#section3.active .quick_banner .box ul li:nth-child(2) {animation-delay: 0.4s;}
#section3.active .quick_banner .box ul li:nth-child(3) {animation-delay: 0.5s;}
#section3.active .quick_banner .box ul li:nth-child(4) {animation-delay: 0.6s;}
#section3.active .quick_banner .box ul li:nth-child(5) {animation-delay: 0.7s;}
#section3.active .quick_banner .box ul li:nth-child(6) {animation-delay: 0.8s;}
#section3.active .quick_banner .box ul li:nth-child(7) {animation-delay: 0.9s;}
#section3.active .quick_banner .box ul li:nth-child(8) {animation-delay: 1s;}


#container #contents .main .list_shopping2x{width:94%; margin:20px auto 0;}
#container #contents .main .list_shopping2x h3{font-size:16px; font-weight:bold; margin:20px auto; position:relative; width: auto; display: inline-block; border-top:0; line-height:1; padding:0;}
#container #contents .main .list_shopping2x h3:after{content:""; display:block; clear:both; position:absolute; top:7px; left:-35px; background:#343434; width:30px; height:2px;}
#container #contents .main .list_shopping2x h3:before{content:""; display:block; clear:both; position:absolute; top:7px; right:-35px; background:#343434; width:30px; height:2px;}
#container #contents .main .list_shopping2x .list_shoppingInfo .listPrice{display:none;}
#container #contents .main .list_shopping2x li{margin:0 2% 10px 0; width:49%; float:left; box-sizing:border-box; text-align:center}
#container #contents .main .list_shopping2x li:nth-child(2n){margin-right:0;}
#container #contents .main .list_shopping2x li a{border:1px solid #e4e4e4; padding:0;}
#container #contents .main .list_shopping2x .list_shoppingInfo{margin-top:0; line-height:30px; font-weight:bold;}
#container #contents .main .list_shopping2x .moer{display:inline-block;background:#aa0a0a; color:#fff; width:auto; margin:30px 0; padding:0px 15px; line-height:40px; height:auto;}

#container #contents .main .items {opacity:0;}
#section4.active .items {opacity:1; animation: fade-in-up 0.7s;animation-timing-function: ease-out;  animation-fill-mode: both !important; animation-delay: 0.3s}

@media only screen and (max-width: 540px) {
    #container #contents .main .cs_banner > div{height:140px;}
    #container #contents .main .cs_banner > div:nth-child(n+3){height:170px;}	
    #container #contents .main .cs_banner > div .row .text p:after{left:50%; transform: translate(-50%, -0);}
    #container #contents .main .cs_banner > div .row img{display:inline-block;} 
    #container #contents .main .cs_banner > div .row .text{text-align:center; margin-top:15px; padding-left:0; background:none !important;} 
}

/* BASIC css end */