@charset "utf-8";

/* main */
.mainContainer .content {max-width: 1500px !important;}
.mainSectionBlock {position:relative; margin-bottom: 20px;}
.mainSectionBlock .left {width:49.7%; max-width: 745px;}
.mainSectionBlock .right {position:absolute;right:0;top:0;width:49.7%;max-width: 745px;height:100%;}
.mainSectionBlock .right .vod {position:relative; height:100%;}
.mainSectionBlock .right .vod .ykVideo {width:100%; height:100%;}
.mainSectionBlock .secondArea {padding-top:0;}
.mainSectionBlock a img {width:100%;}

.mainSlide .slideList a {display:block;}
.mainSlide .slick-dots {position: absolute; left:50%; bottom: 25px; width: auto !important; text-align: center; z-index: 140;}
.mainSlide .slick-dots li {display: inline-block; position: relative; width: 12px; height: 12px; margin: 0 6px; background: #d3d3d3; border-radius: 6px;}
.mainSlide .slick-dots li button {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); cursor:pointer;}
.mainSlide .slick-dots li.slick-active {background: #ffc628;}
.mainSlide .slideControl {position: absolute; margin-left:30px; bottom: 24px; z-index: 145;}/*left: 54.5% !important; 반영안되서 jsp에인라인으로넣음 20170427*/
.mainSlide .slideControl button img {width: 100%;}
.mainSlide .slideControl .play {display:none;}
.mainSlide .slideControl.control .pause {display:none;}
.mainSlide .slideControl.control .play {display:block;}

.mainVisualBanner {position: relative; overflow: hidden; max-width: 1500px; text-align: center; z-index: 140;}
.promotionBanner {position: relative; overflow: hidden; max-width: 745px; text-align: center; z-index: 140;}
.brandBanner {height:100%;}

/* 모바일 비주얼 */
.web .mVisual {display:none;}
.mVisual {padding-bottom:20px;}
.mVisual .slick-dots {position:absolute;left:0;bottom:20px;width:100%;text-align:center;z-index: 5;}
.mVisual .slick-dots li {display: inline-block; position:relative;width:6px;height:6px;margin-right:10px;background:#d3d3d3;border-radius:5px;}
.mVisual .slick-dots li.slick-active {background:#ffc628;}
.mVisual .slick-dots li button{position:absolute;left:0;top:0;width:6px;height:6px;opacity:0;filter: alpha(opacity=0);}
.mVisual .slick-dots li:last-child {margin-right:0;}

.web .mLink {display:none;}
.mLink {margin:0 -15px;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;}
.mLink ul {overflow:hidden;width:100%;margin-top:-1px;}
.mLink li {float:left;width:50%;border-top:1px solid #f0f0f0;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
.mLink li:nth-child(odd) {border-right:1px solid #f0f0f0;}
.mLink li a {display:block;padding:0 25px;line-height:40px;}
.mLink li a > span img {width:15px;margin-top:-2px;}
.mLink li.has_sub a > span {display:block;background:url('../../../../../../../content/dam/mamonde/mamonde2016/cn/zh/images/main/bg_mLink_li.png') no-repeat right center;background-size:11px auto;}
.mLink li.has_sub a.on {background:#f0f0f0;}
.mLink li.has_sub a.on span {background-image:url('../../../../../../../content/dam/mamonde/mamonde2016/cn/zh/images/main/bg_mLink_li_on.png');}
.mLink li .depth2 {display:none;position:relative;left:-100%;width:200%;padding-bottom:10px;background:#f0f0f0;}
.mLink li .depth2 li {width:100%;padding-top:5px;}
.mLink li .depth2 a {padding:0 45px;line-height:36px;}
.mLink li .depth3 {position:relative;left:0%;padding-bottom:12px;margin:0 25px;border-bottom:1px solid #ffffff}
.mLink li .depth3 li {width:50%;padding-top:0;}
.mLink li .depth2 li:last-child .depth3 {border-bottom:0;}
.mLink li .depth3 a {padding:0 20px;color:#666;line-height:30px;}


/* 제품롤링 */
.mainContainer .tit {padding-top:20px;text-align:center;font-size:20px;}
.mainContainer .pdtList li.pdtItem {height:auto;}
.mainContainer .pdtList li.pdtItem .item > a {height:auto;}
.mainContainer .pdtList li.pdtItem .opt_price {padding-top:3px;}
.mainContainer .pdtList .slick-arrow {position: absolute; top: 32%; width: 24px; height: 48px; line-height: 0; text-indent: -9999em; cursor: pointer; font-size: 0; z-index: 100;}
.mainContainer .pdtList .slick-prev {left: 0; background: url('../../../../../../../content/dam/mamonde/mamonde2016/cn/zh/images/common/arr_left6.png') no-repeat 0 0;}
.mainContainer .pdtList .slick-next {right: 0; background: url('../../../../../../../content/dam/mamonde/mamonde2016/cn/zh/images/common/arr_right6.png') no-repeat 0 0;}
.mainContainer .pdtList .slick-dots {position: relative; width: 100%;text-align: center; z-index: 140;}
.mainContainer .pdtList .slick-dots li {display: inline-block; position: relative; width: 6px; height: 6px; margin: 0 6px; background: #d3d3d3; border-radius: 3px;}
.mainContainer .pdtList .slick-dots li button {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0);}
.mainContainer .pdtList .slick-dots li.slick-active {background: #ffc628;}
.mobile .mainContainer .pdtListArea {margin-top:0;}
.mobile .mainContainer .pdtList li.pdtItem .item .pdtInfo .opt_tit {font-size:13px;}
.mobile .mainContainer .pdtList li.pdtItem .opt_price {font-size:12px;}
.web .mainContainer .tit {padding-top:23px;font-size:32px;}
.web .mainContainer .pdtListArea {padding-top:10px;}
.web .mainContainer .pdtList li.pdtItem .pdtInfo {margin-top:10px;}
.web .mainContainer .pdtList .slick-dots {padding:25px 0 40px;}
.web .mainContainer .pdtList .slick-dots li {width: 12px; height: 12px; margin: 0 6px;border-radius: 6px;}