/* ===== Base ====== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
@font-face {
    font-family: 'noto_sans_th';
    src: url('../font/notosansthai-bold-webfont.woff2') format('woff2'),
         url('../font/notosansthai-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'noto_sans_th';
    src: url('../font/notosansthai-regular-webfont.woff2') format('woff2'),
         url('../font/notosansthai-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

body{
    padding-right: 0;
    background: url('https://www.cotto.com/common/img/003/mooning.png') repeat top center fixed ;
}
.tooltip2 {
    position: relative;
    font-size: 12px;
}
.tooltip2 .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 240px;
    background-color: #555;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip2:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip-bottom {
    top: 135%;
    left: 50%;
    margin-left: -110px;
}
.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}
@media(min-width:992px){
    ._update-box {
        margin-right: 5px ;
    }
}
.row-flex{display: flex; flex-wrap: wrap;}
.row-flex .col{flex-basis: 0; flex-grow: 1; flex-grow: 1; min-width: 0; max-width: 100%;}
.row-flex .col-auto{flex: 0 0 auto; width: auto; max-width: 100%;}
.align-items-start{align-items: start;}
.align-items-center{align-items: center;}
.align-items-end{align-items: end;}
.align-self-end{align-self: end;}
.justify-content-center{justify-content: center;}
.item-list{
	margin: 0; 
	padding: 0;
}
.item-list	> li{
    list-style: none; 
    float: left;
}  
.item-list.fluid > li{
    width: 100%;
}
.item-list:before,
.item-list:after{
	content: ' '; 
	display: table;
}
.item-list:after{
	clear: both;
}
.cover{
	position: relative;
	overflow: hidden;
	margin: 0;
}
.cover .img-cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.cover2{
	position: relative;
	overflow: hidden;
	margin: 0;
    height: 175px;
}
.cover2 .img-cover2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 175px;
    object-fit: cover;
    object-position: center;
}
.title{
	margin: 0;
}
.subtitle{
	margin: 0;
}
.desc{
	margin: 0;
}
.text-limit{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/* -webkit-line-clamp: 1; */
}




/* ===== Default ====== */
.set-mb-lang.disabled,
.v2-bx.disabled{
    pointer-events: none;
    opacity: 0.2;
}
.site-container{
    font-family: 'noto_sans_th','Noto Sans';
    font-weight: 400;
    word-break: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: antialiased;
}
.site-container .container{
    padding: 0 20px;
}
.site-container .container2{
    padding: 0 0px;
    margin-bottom:-30px;
}




/* ===== Slick ====== */
.slider, 
.slider-for, 
.slider-nav{
    position: relative;
    z-index: 80;
    opacity: 0;
    transition: all 200ms ease;
}
[cz-shortcut-listen="true"] .slider.slick-initialized,
[cz-shortcut-listen="true"] .slider-for.slick-initialized,
[cz-shortcut-listen="true"] .slider-nav.slick-initialized{
    opacity: 1;
}
.slider.slick-initialized,
.slider-for.slick-initialized,
.slider-nav.slick-initialized{
    opacity: 1;
}
.slick-track{
    margin: 0;
}
.slick-slider.slick-dotted{
    margin-bottom: 0;
}
.slick-slider .slick-slide{
    outline: none !important;
}
.slick-slider .slick-list .item{
    float: left;
}
.slick-slider .slick-dots{
    bottom: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.slick-slider .slick-dots li{
    margin: 0;
    display: block;
    width: auto;
    height: auto;
}
.slick-slider .slick-dots li + li{
    margin-left: 10px;
}
.slick-slider .slick-dots li.slick-active button{
    background-color: #000;
}
.slick-slider .slick-dots li button{
    padding: 0;
    width: 12px;
    height: 12px;
    background-color: #efefef;
    border-radius: 50%;
}
.slick-slider .slick-dots li button:before{
    display: none;
}
.slick-arrow{
    width: 50px;
    height: 50px;
    background-color: #ddd;
    z-index: 100; 
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    color: #fff !important;
    transition: all 200ms ease-out;
}
.slick-arrow:hover{
    color: #fff;
    opacity: 1;
    background-color: inherit;
}
.slick-arrow:before{
    display: none;
}
.slick-arrow.slick-prev{
    left: -20px;
}
.slick-arrow.slick-next{
    right: -20px;
}
.slick-arrow.slick-disabled{
    opacity: 0.4;
}




/* ===== Home ====== */
.home-block{
    padding: 0 0 40px 0;
}

.hero-banner .cover{
    height: 880px;
}
.hero-banner .slick-dots{
    bottom: 40px;
}
.hero-banner .slick-slider .slick-dots li.slick-active button{
    background-color: #6B8689;
}

.wg-about-vdo{
    position: relative;
}
.wg-about-vdo .cover{
    background-color: #eee;
    padding-top: 56.2%;
}
.wg-about-vdo .link{
    position: absolute;
    z-index: 10;
    width: 90px;
    height: 90px;
    background: url('../img/icon/play.svg') center;
    background-size: cover;
    background-color: rgba(255,255,255,0.7);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.wg-about-content{
    padding: 0px;
}

.wg-about-content video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
  object-fit: fill;
}

.wg-about-ads .title{
    font-size: 34px;
    font-weight: 700;
    color: #fff;
}
.wg-about-ads p{
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.6em;
    color: #fff;
    text-align: center;
}
.wg-about-ads{
    height: 310px;
    background: url('../img/static/wg-about-ads.jpg') center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    margin-top:-7px;
}
.wg-about-ads .inner{
    width: 100%;
}
.wg-about-ads .brand{
    text-align: center;
}
.wg-about-ads .action{
    text-align: center;
    position: relative;
}
.wg-about-ads .action:before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: rgba(255,255,255,0.25);
}
.wg-about-ads .action .btn{
    width: 220px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    border-radius: 0;
    font-size: 16px;
    color: #6B8689;
    text-align: center;
    background-color: #fff;
    position: relative;
    z-index: 10;
    font-weight: 700;
}
.wg-about-ads .action .btn:hover{
    background-color: #6B8689;
    color: #ffffff;
}

.wg-dream{
    margin-top: 50px;
    background: url('../img/background/wg-dream.jpg') center;
    background-size: cover;
    padding-bottom: 90px;
}
.wg-dream .content{
    padding: 50px 0;
}
.wg-dream .content .header{
    width: 450px;
    text-align: center;
}
.wg-dream .content .header .title{
    font-weight: 700;
    font-size: 40px;
    color: #707070;
}
.wg-dream .content .header p{
    margin-top: 5px;
    font-size: 26px;
    color: #707070;
}
.wg-dream .content .header p strong{
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
}
.wg-dream .content .body{
    margin-left: 40px;
}
.wg-dream .content .body p{
    font-size: 16px;
    line-height: 1.6em;
    color: #6B8689;
    margin: 0;
}
.wg-dream .content .body p + p{
    margin-top: 15px;
}
.wg-dream-nav .item-list{
    margin: 0 -5px;
}
.wg-dream-nav .item-list li{
    padding: 0 5px;
    width: calc(100% / 3);
}
.wg-dream-nav .link{
    display: flex;
    width: 100%;
    height: 80px;
    align-items: center;
    padding: 0 30px;
    color: #fff;
    font-size: 28px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
}
.wg-dream-nav .slick-list{
    margin: 0 -5px;
}
.wg-dream-nav .item{
    padding: 0 5px;
}
.wg-dream-for{
    margin-top: 10px;
}
.wg-dream-for .wrapper{
    position: relative;
}
.wg-dream-for .bg{
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 480px;
}

.-space1.link{background-color: #74563F;}
.-space1 .bg{background-color: #74563F;}
.-space1 .btn{color: #74563F;}
.-space1 .slick-arrow{background-color: #74563F;}

.-space2.link{background-color: #629187;}
.-space2 .bg{background-color: #629187;}
.-space2 .btn{color: #629187;}
.-space2 .slick-arrow{background-color: #629187;}

.-space3.link{background-color: #3A3A3A;}
.-space3 .bg{background-color: #3A3A3A;}
.-space3 .btn{color: #3A3A3A;}
.-space3 .slick-arrow{background-color: #3A3A3A;}

.wg-dream-for .header{
    position: relative;
    z-index: 10;
    margin: 0 40px;
    padding-top: 35px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.wg-dream-for .header .icon{
    width: 70px;
    margin-right: 15px;
}
.wg-dream-for .header .title{
    color: #fff;
    font-size: 24px;
    line-height: 1.4em;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
}
.wg-dream-for .header p{
    color: #fff;
    font-size: 16px;
    line-height: 1.6em;
    margin: 0;
}
.wg-dream-for .body{
    margin-top: 40px;
    position: relative;
    z-index: 10;
}
.wg-dream-for .body .topic{
    margin-bottom: 45px;
}
.wg-dream-for .body .topic .title{
    font-weight: 700;
    font-size: 42px;
    color: #fff;
    text-transform: uppercase;
}
.wg-dream-for .body .topic .desc{
    font-size: 16px;
    color: #fff;
    line-height: 1.6rm;
    opacity: 0.5;
}
.wg-dream-for .body .col-1{
    width: 440px;
    margin-right: 30px;
}
.wg-dream-for .body .col-1 .cover{
    padding-top: 58.2%;
}
.wg-dream-for .body .col-2{
    width: 300px;
    margin-right: 30px;
}
.wg-dream-for .body .col-2 .cover{
    padding-top: 130%;
}
.wg-dream-for .body .inner{
    margin-top: 5px;
}
.wg-dream-for .body .inner p{
    color: #fff;
    font-size: 15px;
    line-height: 1.6em;
}
.wg-dream-for .body .inner p + p{
    margin-top: 20px;
}
.wg-dream-for .body .action{
    margin-top: 30px;
}
.wg-dream-for .body .btn{
    width: 140px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-radius: 0;
    font-size: 16px;
    text-align: center;
    background-color: #fff;
    position: relative;
    z-index: 10;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
}

.space-list .slick-list .item{
    padding: 0 40px;
}
.space-list .slick-arrow.slick-prev{
    left: auto;
    right: 50px;
    top: auto;
    bottom: 0;
    transform: translate(0);
}
.space-list .slick-arrow.slick-next{
    right: 0;
    top: auto;
    bottom: 0;
    transform: translate(0);
}
.space-list .slick-slider .slick-dots{
    width: auto;
    left: 50%;
    margin-left: 305px;
    line-height: 50px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.space-list .slick-slider .slick-dots .number{
    padding: 0 4px;
    opacity: 0.4;
    cursor: pointer;
}
.space-list .slick-slider .slick-dots .slick-active .number{
    opacity: 1;
    text-decoration: underline;
}
/*.space-list .pagingSpace{
    position: absolute;
    bottom: 0;
    right: 200px;
    width: 60px;
    line-height: 50px;
    font-size: 24px;
    font-weight: 700;
}*/

.wg-blog{
    background-color: #F0F3F3;
    padding: 60px 0;
}
.wg-blog .whead{
    margin-bottom: 40px;
}
.wg-blog .whead .title{
    font-size: 40px;
    color: #707070;
    line-height: 1em;
}
.wg-blog .whead strong{
    font-weight: 700;
}
.wg-blog .whead .action{
    margin-bottom: 10px;
}
.wg-blog .whead .btn{
    padding: 0 15px;
    height: 50px;
    width: 150px;
    line-height: 50px;
    border-radius: 0;
    background-color: #fff;
    color: #6B8689;
    font-size: 16px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    transition: all 200ms ease;
}
.wg-blog .whead .btn:hover{
    background-color: #6B8689;
    color: #fff;
}
.wg-blog-list .item-list{
    margin: 0 -10px;
}
.wg-blog-list .item-list .item:nth-child(1){
    width: 46%;
}
.wg-blog-list .item-list .item:nth-child(1) .cover{
    padding-top: 50%;
}
.wg-blog-list .item-list .item:nth-child(1) .title{
    -webkit-line-clamp: 2;
}
.wg-blog-list .item-list .item:nth-child(1) .desc{
    -webkit-line-clamp: 2;
}
.wg-blog-list .item{
    padding: 0 10px;
    width: 27%;
}
.wg-blog-list .wrapper{
    height: 435px;
    background-color: #fff;
}
.wg-blog-list .cover{
    padding-top: 70%;
}
.wg-blog-list .inner{
    padding: 20px;
}
.wg-blog-list .title{
    color: #707070;
    font-size: 20px;
    line-height: 1.2em;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    -webkit-line-clamp: 3;
}
.wg-blog-list .date{
    margin-top: 5px;
    color: #6B8689;
    font-size: 12px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
}
.wg-blog-list .badge{
    margin-top: 10px;
    border-radius: 0;
    padding: 4px 8px 3px 8px;
    background-color: #D30000;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    font-size: 12px;
    color: #fff;
    line-height: 1em;
}
.wg-blog-list .desc{
    margin-top: 15px;
    font-size: 14px;
    color: #707070;
    line-height: 1.4em;
    -webkit-line-clamp: 3;
}

.wg-banner{
    padding: 60px 0;
}
.wg-banner .wrapper{
    position: relative;
}
.wg-banner .cover{
    height: 330px;
}
.wg-banner .cover:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}
.wg-banner .inner{
    padding: 0 130px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.wg-banner .title{
    font-size: 30px;
    color: #fff;
    line-height: 1.4em;
}
.wg-banner .action{
    margin-top: 25px;
}
.wg-banner .action .btn{
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border-radius: 0;
    font-size: 18px;
    text-align: center;
    background-color: #fff;
    color: #6B8689;
    position: relative;
    z-index: 10;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    transition: all 200ms ease;
}
.wg-banner .action .btn span{
    margin-right: 4px;
}
.wg-banner .action .btn:hover{
    background-color: #6B8689;
    color: #fff;
}

.wg-gallery{
    padding: 20px 0 60px 0;
}
.wg-gallery .whead{
    text-align: center;
    margin-bottom: 40px;
}
.wg-gallery .whead .title{
    font-size: 40px;
    color: #707070;
}
.wg-gallery .whead strong{
    font-weight: 700;
}
.wg-gallery .menu .item-list{
    margin: 0 -5px;
}
.wg-gallery .menu li{
    padding: 0 5px;
    width: 25%;
}
.wg-gallery .menu .row-flex{
    width: 100%;
}
.wg-gallery .menu .link{
    text-align: center;
    display: flex;
    align-items: center;
    height: 80px;
    border: 1px solid #e1e1e1;
    color: #707070;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    font-size: 22px;
}
.wg-gallery .menu .active .link{
    border-color: transparent;
    background-color: #6B8689;
    color: #fff;
}
.wg-gallery .menu .active .link img{
    filter: brightness(0) invert(1);
}
.wg-gallery .menu .active .link .icon:after{
    background-color: #fff;
    opacity: 0.2;
}
.wg-gallery .menu .icon{
    margin: 0 15px;
    width: 50px;
    position: relative;
}
.wg-gallery .menu .icon:after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -15px;
    margin: auto;
    width: 1px;
    height: 40px;
    background-color: #e1e1e1;
}
.wg-gallery-list{
    margin-top: 20px;
}
.wg-gallery-list .item-list{
    margin: 0 -5px;
}
.wg-gallery-list .item-list .item{
    padding: 0 5px;
    width: calc(100% / 3);
}
.wg-gallery-list .item-list .item .item{
    width: 50%;
}
.wg-gallery-list .link{
    display: block;
    margin-bottom: 10px;
    position: relative;
}
.wg-gallery-list .cover{
    padding-top: 100%;
}
.wg-gallery-list .brand{
    margin-bottom: 10px;
}
.wg-gallery-list .brand .cover{
    padding: 0;
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wg-gallery-list .brand .cover .img-cover{
    object-fit: contain;
}
.wg-gallery-list .more{
    background-color: rgba(0,0,0,0.4);
    display: flex;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 50px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
}
.wg-gallery-more{
    display: none;
}




/* ===== Detail ====== */
.detail-block{
    position: relative;
}
.detail-block:before{
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 360px;
}
.detail-block .container{
    position: relative;
    z-index: 10;
}

.detail-block.-space1:before{
    background-color: #74563F;
}
.detail-block.-space1 .header .btn:hover{
    color: #74563F;
}
.detail-block.-space1 .detail-info .topic .title{
    color: #74563F;
}
.detail-block.-space1 .detail-product .whead strong{
    color: #74563F;
}
.detail-block.-space1 .detail-product .whead .btn{
    background-color: #74563F;
}
.detail-block.-space1 .detail-product-list .slick-dots li.slick-active button{
    background-color: #74563F;
}

.detail-block.-space2:before{
    background-color: #629187;
}
.detail-block.-space2 .header .btn:hover{
    color: #629187;
}
.detail-block.-space2 .detail-info .topic .title{
    color: #629187;
}
.detail-block.-space2 .detail-product .whead strong{
    color: #629187;
}
.detail-block.-space2 .detail-product .whead .btn{
    background-color: #629187;
}
.detail-block.-space2 .detail-product-list .slick-dots li.slick-active button{
    background-color: #629187;
}

.detail-block.-space3:before{
    background-color: #3A3A3A;
}
.detail-block.-space3 .header .btn:hover{
    color: #3A3A3A;
}
.detail-block.-space3 .detail-info .topic .title{
    color: #3A3A3A;
}
.detail-block.-space3 .detail-product .whead strong{
    color: #3A3A3A;
}
.detail-block.-space3 .detail-product .whead .btn{
    background-color: #3A3A3A;
}
.detail-block.-space3 .detail-product-list .slick-dots li.slick-active button{
    background-color: #3A3A3A;
}

.detail-block .header{
    overflow: hidden;
    position: relative;
    z-index: 10;
    padding: 60px 0;
}
.detail-block .header .row-flex > div{
    position: relative;
}
.detail-block .header .icon{
    width: 240px;
    position: absolute;
    top: -35px;
    right: 100%;
    opacity: 0.1;
}
.detail-block .header .icon img{
    width: 100%;
}
.detail-block .header .title{
    /* font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal; */
    font-weight: 700;
    font-size: 40px;
    color: #fff;
    line-height: 1.4em;
    text-transform: uppercase;
}
.detail-block .header .desc{
    font-size: 28px;
    color: #fff;
    line-height: 1.4em;
}
.detail-block .header .btn{
    height: 50px;
    line-height: 46px;
    padding: 0 20px;
    border-radius: 0;
    font-size: 18px;
    text-align: center;
    border: 2px solid #fff;
    color: #fff;
    position: relative;
    z-index: 10;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    transition: all 200ms ease;
}
.detail-block .header .btn span{
    margin-right: 4px;
}
.detail-block .header .btn:hover{
    background-color: #fff;
    border-color: transparent;
}
.detail-image .cover{
    height: 800px;
}
.detail-info{
    background: url('../img/background/tile.jpg') center;
    background-size: cover;
    padding: 30px 45px;
    margin-top: -110px;
    position: relative;
    z-index: 5;
}
.detail-info .topic{
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 25px;
    position: relative;
}
.detail-info .topic:after{
    content: '';
    position: absolute;
    left: 0;   
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 1px;
    background-color: #aaa;
}
.detail-info .topic .title{
    font-weight: 700;
    line-height: 1.2em;
    font-size: 36px;
    text-transform: uppercase;
}
.detail-info .topic .sub{
    color: #3B3B3B;
    line-height: 1.4em;
    font-size: 22px;
    margin: 0;
}
.detail-info .desc{
    font-size: 16px;
    line-height: 1.6em;
    text-align: center;
}
.detail-gallery{
    margin-top: 20px;
}
.detail-gallery .link{
    display: block;
    margin-bottom: 20px;
}
.detail-gallery .item-list{
    margin: 0 -10px;
}
.detail-gallery .item-list .item{
    padding: 0 10px;
}
.detail-gallery .item-list .item:nth-child(1){
    width: 46%;
}
.detail-gallery .item-list .item:nth-child(1) .cover{
    height: 480px;
}
.detail-gallery .item-list .item:nth-child(2){
    width: 27%;
}
.detail-gallery .item-list .item:nth-child(2) .cover{
    height: 180px;
}
.detail-gallery .item-list .item:nth-child(2) .link + .link .cover{
    height: 280px;
}
.detail-gallery .item-list .item:nth-child(3){
    width: 27%;
}
.detail-gallery .item-list .item:nth-child(3) .cover{
    height: 280px;
}
.detail-gallery .item-list .item:nth-child(3) .link + .link .cover{
    height: 180px;
}

.detail-plan{
    margin-top: 20px;
    position: relative;
}
.detail-plan:before{
    content: '';
    position: absolute;
    width: 800px;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255,255,255,0.05);
}
.detail-plan .cover{
    position: relative;
    z-index: 20;
    margin: 50px 0;
    width: 540px;
    height: 500px;
}
.detail-plan .inner{
    position: relative;
    z-index: 20;
    padding: 0 40px;
}
.detail-plan .inner .title{
    color: #fff;
    line-height: 1.2em;
    font-weight: 700;
    font-size: 28px;
    margin: 0;
}
.detail-plan .inner .desc{
    color: #fff;
    font-size: 16px;
    line-height: 1.6em;
    margin: 20px 0 0 0;
}
.detail-product{
    margin: 40px -80px 0;
    padding: 60px 80px 100px 80px;
    background-color: #fff;
}
.detail-product .whead{
    margin-bottom: 40px;
}
.detail-product .whead .title{
    font-size: 40px;
    color: #707070;
    text-transform: uppercase;
    line-height: 1em;
}
.detail-product .whead strong{
    font-weight: 700;
}
.detail-product .whead .btn{
    padding: 0 15px;
    height: 50px;
    line-height: 50px;
    border-radius: 0;
    color: #fff;
    font-size: 16px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    transition: all 200ms ease;
}
.detail-product-list .slick-list{
    margin: 0 -10px;
}
.detail-product-list .item{
    padding: 0 10px;
	border:1px solid #fff;
}
.detail-product-list .item:hover{
    border:1px solid #ccc;
}
.detail-product-list .cover{
    padding-top: 100%;
}
.detail-product-list .inner{
    margin-top: 15px;
}
.detail-product-list .title{
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    -webkit-line-clamp: 2;
    font-size: 16px;
    line-height: 1.4em;
    text-transform: uppercase;
    color: #707070;
}
.detail-product-list .price{
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.4em;
    font-weight: 700;
    color: #707070;
}
.detail-product-list .slick-dots{
    position: relative;
    margin-top: 50px;
}




/* ===== Coupon ====== */
.modal-open .wg-coupon{
    transform: translate(0, 100%);
    bottom: 0;
}
.wg-coupon{
    text-align: center;
    position: fixed;
    z-index: 100;
    bottom: 30px;
    right: 25px;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: antialiased;
    transition: all 400ms ease;
}
.wg-coupon .icon{
    width: 200px;
}
.wg-coupon .icon img{
    width: 100%;
}
.wg-coupon .btn{
    margin-top: 3px;
    padding: 0 15px;
    height: 38px;
    width: 182px;
    line-height: 38px;
    border-radius: 0;
    background-color: #D30000;
    color: #fff;
    font-size: 16px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.5);
}
.wg-coupon .btn:hover{
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 3px 10px 0 rgba(0, 0, 0, 0);
}
.modal-dialog.modal-md{
    width: 560px;
}
.coupon-modal{
    padding: 25px 20px 10px 20px;
    font-family: 'noto_sans_th','Noto Sans';
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: antialiased;
}
.coupon-modal h2{
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    font-size: 34px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 25px;
}
.coupon-modal .icon{
    text-align: center;
}
.coupon-modal .inner{
    margin: auto;
    margin-top: 5px;
    width: 386px;
    text-align: center;
    background-color: #EEF3F4;
    padding: 25px 40px 45px 40px;
}
.coupon-modal p{
    font-family: 'noto_sans_th','Noto Sans';
    font-size: 16px;
    line-height: 1.6em;
    margin: 0;
}
.coupon-modal p strong{
    display: block;
    font-size: 20px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    margin-bottom: 5px;
}
.coupon-modal p span{
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
}
.coupon-modal .action{
    margin-top: -25px;
    text-align: center;
}
.coupon-modal .action .btn{
    padding: 0 30px;
    height: 50px;
    line-height: 50px;
    border-radius: 0;
    background-color: #D30000;
    color: #fff;
    font-size: 18px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.5);
}
.coupon-modal .action .btn:hover{
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 3px 10px 0 rgba(0, 0, 0, 0);
}
.coupon-modal .row a img{
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.5);
}
.coupon-modal .row a img:hover{
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 3px 10px 0 rgba(0, 0, 0, 0);
}

.coupon-block .container{
    padding: 0 20px;
}
.coupon-page{
    height: 100vh;
    justify-content: center;
    align-content: center;
}
.coupon-page .wrapper{
    background-color: #F3F3F3;
    width: 800px;
    padding: 40px;
    margin: auto;
}
.coupon-page .print{
    background-color: #F3F3F3;
    width: 100%;
    margin: auto;
    padding-bottom:40px;
}
.coupon-page .print .tabl{
    font-size:16px;
    align:center;
    margin-left:40px;
}
.coupon-page .print .h_tabl1{
    font-size:28px;
    display: flex;
    justify-content: center;
    margin-top:20px;
}
.coupon-page .print .h_tabl2{
    font-size:20px;
    line-height:1.5;
    display: flex;
    justify-content: center;
    color:#D30000;
}
.coupon-page .print .h_tabl3{
    font-size:18px;
    line-height:2;
    font-weight:bold;	
    margin-left:60px;
}
.coupon-page .channel{
    background-color: #FFF;
    width: 800px;
    margin: auto;
    margin-top: 30px;
    height: 50vh;
}
.coupon-page .channel a img{
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.5);
}
.coupon-page .channel a img:hover{
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 3px 10px 0 rgba(0, 0, 0, 0);
}
.coupon-page .wrapper h2{
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    font-size: 34px;
    text-align: center;
    margin: 0;
}
.coupon-page .wrapper .icon{
    width: 503px;
    margin: 10px auto;
    position: relative;
    text-align: center;
}
.coupon-page .wrapper .icon .code{
    position: absolute;
    top: 50%;
    left: 0;
    width: 236px;
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    color: #D30000;
    font-size: 30px;
    font-family: 'noto_sans_th','Noto Sans';
    margin-top: 2px;
}
.coupon-page .wrapper .inner{
    text-align: center;
    position: relative;
    margin-top: 30px;
    padding-top: 30px;
}
.coupon-page .wrapper .inner:before{
    content: '';
    position: absolute;
    width: 60px;
    height: 1px;
    background-color: #aaa;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.coupon-page .wrapper p{
    font-family: 'noto_sans_th','Noto Sans';
    font-size: 16px;
    line-height: 1.6em;
    margin: 0;
}
.coupon-page .wrapper p strong{
    display: block;
    font-size: 20px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    margin-bottom: 5px;
}
.coupon-page .wrapper p span{
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
}
.coupon-page .wrapper .action{
    margin-top: 20px;
    margin-bottom: 5px;
    text-align: center;
}
.coupon-page .wrapper .action .row-flex{
    margin: 0 -5px;
}
.coupon-page .wrapper .action .row-flex > div{
    padding: 0 5px;
}
.coupon-page .wrapper .action .btn{
    padding: 0 30px;
    width: 188px;
    height: 50px;
    line-height: 50px;
    border-radius: 0;
    background-color: #D30000;
    color: #fff;
    font-size: 16px;
    font-family: 'noto_sansthmed','noto_sansmed';
    font-weight: normal;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.5);
}
.coupon-page .wrapper .action .btn:hover{
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 3px 10px 0 rgba(0, 0, 0, 0);
}

.coupon-page .wrapper,
.coupon-page .wrapper:before,
.coupon-page .wrapper:after,
.coupon-page .wrapper *,
.coupon-page .wrapper *:before,
.coupon-page .wrapper *:after{
    -webkit-box-sizing: unset;
    -moz-box-sizing: unset;
    box-sizing: unset;
    text-align: left;
}
.coupon-page .wrapper h2{text-align: left;}
/*.coupon-page .wrapper ol li{display: block; float: left; width: 100%;}*/






/*G-style*/
.DCustom-page{}
.DCustom-page .container{padding: 0 20px;}
.DCustom-page .into{padding: 36px 0 50px 0;}
.DCustom-page .into .title{font-size: 43px; line-height: 0.9; color: #6B8689; text-transform: uppercase; margin-bottom: 20px;}
.DCustom-page .into .desc{font-size: 19px; line-height: 1.4em; color: #707070; margin: 0;}
.DCustom-page .status-bar{padding: 35px 0; border-top: 1px solid #EFEFEF;}
.DCustom-page .status-bar .icon{max-width: 60px; margin-right: 50px;}
.DCustom-page .status-bar .icon > .lazy{max-height: 100%; height: 100%; width: 100%;}
.DCustom-page .status-bar .h-title{font-size: 40px; color: #707070; line-height: 1; text-transform: uppercase;}
.DCustom-page .status-bar li{position: relative;}
.DCustom-page .status-bar li+li{margin-left: 30px;}
.DCustom-page .status-bar li:before,
.DCustom-page .status-bar li:after{content: ''; position: absolute; top: 0; bottom: -34px; margin: auto;
    height: 6px; background-color: #E2E2E2;
    border-radius: 80px;
}
.DCustom-page .status-bar li:before{right: 50%; margin-right: 45px; width: 30%;}
.DCustom-page .status-bar li:after{left: 50%; margin-left: 45px; width: 30%;}
.DCustom-page .status-bar li:first-child:before{display: none;}
.DCustom-page .status-bar li:last-child:after{display: none;}
.DCustom-page .status-bar .txt{color: #CCCCCC; font-size: 18px; font-weight: 700; line-height: 1; text-align: center; margin-bottom: 15px;}
.DCustom-page .status-bar .number{width: 70px; height: 70px; background-color: #F8F8F8; position: relative;
    display: flex; align-items: center; justify-content: center; margin: 0 auto;
    font-size: 23px; font-weight: 700; color: #E2E2E2;
    border-radius: 50%;
}
.DCustom-page .status-bar .number:before{content: ''; position: absolute; top: -5px; right: -5px; left: -5px; bottom: -5px;
    border: 1px solid #707070; opacity: 0;
    border-radius: 50%;
}
.DCustom-page .status-bar .current .txt{color: #6B8689;}
.DCustom-page .status-bar .current .number{background-color: #ED1D24; color: #fff;}
.DCustom-page .status-bar .current .number:before{opacity: 0.2;}
.DCustom-page .status-bar .active .txt{color: #6B8689;}
.DCustom-page .status-bar .active .number{background-color: #6B8689; color: #fff;}
.DCustom-page .status-bar .active .number:before{opacity: 0;}
.DCustom-list{padding-bottom: 105px;}
.DCustom-list .item-list{margin: -12px;}
.DCustom-list .item-list > li{padding: 12px; width: calc(100%/3);}
.DCustom-list .link{display: block; position: relative; overflow: hidden;
    transition: all 400ms ease;
}
.DCustom-list .thumb{position: relative;}
.DCustom-list .thumb .cover{padding-bottom: 100%; z-index: 0;}
.DCustom-list .thumb .cover > .lazy{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.DCustom-list .content{position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff;
    display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px;
    transition: all 400ms ease;
}
.DCustom-list .content:before{content: ''; position: absolute; z-index: 1; background-color: #000000; 
    top: 0; left: 0; width: 100%; height: 100%; opacity: 0.43; pointer-events: none;
    background-blend-mode: luminosity;
    transition: all 400ms ease;
}
.DCustom-list .content .title{font-size: 26px; line-height: 1em; margin-bottom: 20px;
    height: 1em; -webkit-line-clamp: 1; position: relative; z-index: 2; text-align: center;
}
.DCustom-list .content .desc{font-size: 19px; line-height: 1.5em; text-align: center;
    max-height: 3em; -webkit-line-clamp: 2; position: relative; z-index: 2;
}
.DCustom-list .more{position: absolute; bottom: -100%; left: 0; width: 100%; height: 50%; color: #707070;
    display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px 30px;
    transition: all 400ms ease;
}
.DCustom-list .more:before{content: ''; position: absolute; z-index: 1; background-color: #fff; 
    top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; pointer-events: none;
    transition: all 400ms ease;
}
.DCustom-list .more .title{font-size: 14px; line-height: 1.5em;
    max-height: 4.5em; -webkit-line-clamp: 3; position: relative; z-index: 2; text-align: center;
}
.DCustom-list .more .action{padding-top: 25px; text-align: center; position: relative; z-index: 2;}
.DCustom-list .more .action .btn{display: inline-block; background-color: #6B8689; width: 180px; height: 50px; line-height: 50px;
    font-size: 16px; font-weight: bold; color: #fff;
    border-radius: 0; border: 0; padding: 0;
}

.DCustom-list .link:hover{box-shadow: 10px 13px 16px rgba(0, 0, 0, 0.16);}
.DCustom-list .link:hover .content{height: 50%;}
.DCustom-list .link:hover .content:before{opacity: 0.34;}
.DCustom-list .link:hover .more{bottom: 0;}

.DCustom-customize{position: relative; width: 1440px; margin: 0 auto;}
.DCustom-customize .row-flex{margin: 0;}
.DCustom-customize .row-flex > div{padding: 0;}
.DCustom-customize .mCSB_inside>.mCSB_container{margin-right: 9px;}
.DCustom-customize .mCSB_scrollTools{width: 5px;}
.DCustom-customize .mCSB_scrollTools a+.mCSB_draggerContainer{margin: 0;}
.DCustom-customize .mCSB_scrollTools .mCSB_draggerRail{background-color: #fff; width: 5px;}
.DCustom-customize .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width: 5px;background-color: #6B8689;}

.DCustom-product-select{display: flex; flex-wrap: wrap; width: 436px;}
.DCustom-product-select .tab-nav{flex: 0 0 auto; width: auto; max-width: 100%;}
.DCustom-product-select .nav-tabs{background-color: transparent; width: 100px; border: 0;}
.DCustom-product-select .nav-tabs>li{margin-bottom: 0; height: calc(886px/5); width: 100%;}
.DCustom-product-select .nav-tabs>li>a{border: 0; margin: 0; border-radius: 0; padding: 30px 10px 20px 10px; background-color: #6B8689;
    display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%;
    transition: all 200ms ease;
}
.DCustom-product-select .nav-tab-icon{max-width: 48px; margin: 0 auto; text-align: center;}
.DCustom-product-select .nav-tab-icon .lazy{max-width: 48px; max-height: 52px; object-fit: contain; object-position: center;
    filter: brightness(200%) grayscale(1);
    transition: all 200ms ease;
}
.DCustom-product-select .nav-tab-txt{padding-top: 15px; font-size: 14px; font-weight: 700; text-align: center; 
    line-height: 1.4em; color: #fff;
    transition: all 200ms ease;
}
.DCustom-product-select .nav-tabs>li.active>a,
.DCustom-product-select .nav-tabs>li.active>a:hover,
.DCustom-product-select .nav-tabs>li.active>a:focus{border: 0;}
.DCustom-product-select .active .link{background-color: #fff;}
.DCustom-product-select .active .nav-tab-icon .lazy{filter: brightness(1) grayscale(0);}
.DCustom-product-select .active .nav-tab-txt{color: #6B8689;}
.DCustom-product-select .tab-content{flex-basis: 0; flex-grow: 1; min-width: 1px; max-width: 100%; padding: 0 20px;}
.DCustom-product-select .tab-content .h-title{height: 70px; display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid #E2E2E2; text-align: center; font-size: 22px; font-weight: bold; line-height: 1; color: #000000;
}
.DCustom-product-select .tab-content .mcscroll{height: 638px;}
.DCustom-product-select .tab-content .item-list{padding: 0;}
.DCustom-product-select .tab-content li{width: 100%; padding: 10px 0;}
.DCustom-product-select .tab-content li+li{border-top: 1px solid #E2E2E2;}
.DCustom-product-select .wrapper {position: relative;}
.DCustom-product-select .wrapper input[type='checkbox'],
.DCustom-product-select .wrapper input[type='radio']{margin-top: 0; position: absolute; z-index: 5; opacity: 0; width: 100%; height: 100%; 
    top: 0; left: 0; cursor: pointer;
}
.DCustom-product-select .tag{position: absolute; z-index: 2; top: 0; left: 10px; bottom: 0; margin: auto;
    width: 83px; height: 38px; opacity: 0; font-size: 16px; font-weight: 700; line-height: 38px; text-align: center;
    transition: all 200ms ease;
}
.DCustom-product-select .tag.-in{background-color: #6B8689; color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.DCustom-product-select .tag.-out{border: 2px solid #9BB9BC; line-height: 34px; color: #6B8689; background-color: #fff;}
.DCustom-product-select .tag-check{position: absolute; z-index: 2; bottom: 0; right: 0; opacity: 0;
    width: 0; height: 0; font-size: 20px; color: #fff;
    border-style: solid; border-width: 0 0 42px 48px;
    border-color: transparent transparent #6B8689 transparent;
    transition: all 200ms ease;
}
.DCustom-product-select .tag-check > span{position: absolute; z-index: 3; right: 4px; bottom: -38px;}
.DCustom-product-select .box{width: 100%; display: flex; align-items: center; position: relative;}
.DCustom-product-select .box+.box{margin-top: 5px;}
.DCustom-product-select .box+.box:before{content: '+'; font-size: 30px; color: #fff; width: 36px; height: 36px;
    position: absolute; z-index: 1; left: 22px; top: -20px; line-height: 34px; text-align: center;
    border: 3px solid #fff; background-color: #3B3B3B;
    border-radius: 50%;
}
.DCustom-product-select .thumb{flex: 0 0 auto; width: auto; max-width: 100%; position: relative;}
.DCustom-product-select .thumb .cover{position: relative; padding-bottom: 100%; width: 80px;}
.DCustom-product-select .thumb .cover>.lazy{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.DCustom-product-select .content{flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; padding-left: 12px;}
.DCustom-product-select .content .title{font-size: 13px; color: #3B3B3B; line-height: 1.5em; margin-bottom: 3px;
    max-height: 3em; -webkit-line-clamp: 2;
}
.DCustom-product-select .content .desc{font-size: 9px; color: #9C9C9C; line-height: 1.5em; margin-bottom: 2px;
     max-height: 1.5em; -webkit-line-clamp: 1;
 }
.DCustom-product-select .content .price{font-size: 14px; color: #3B3B3B; line-height: 1.5em; padding-top: 4px;}
.DCustom-product-select .wrapper:hover .tag.-in{opacity: 1;}
.DCustom-product-select .wrapper:hover input[type='checkbox']:checked ~ .data .tag.-in,
.DCustom-product-select .wrapper:hover input[type='radio']:checked ~ .data .tag.-in{opacity: 0;}
.DCustom-product-select .wrapper input[type='checkbox']:checked ~ .data .tag.-out,
.DCustom-product-select .wrapper input[type='radio']:checked ~ .data .tag.-out{opacity: 1;}
.DCustom-product-select .wrapper input[type='checkbox']:checked ~ .data .tag.-out,
.DCustom-product-select .wrapper input[type='radio']:checked ~ .data .tag.-out{opacity: 1;}
.DCustom-product-select .wrapper input[type='checkbox']:checked ~ .data .tag-check,
.DCustom-product-select .wrapper input[type='radio']:checked ~ .data .tag-check{opacity: 1;}

.DCustom-product-customize .room{position: relative; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);}
.DCustom-product-customize .room .logo{position: absolute; z-index: 99; top: 0px; right: 25px; max-width: 120px; pointer-events: none;}
.DCustom-product-customize .room .logo>.lazy{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.DCustom-product-customize .room .cover{position: relative; z-index: 0; padding-bottom: 100%;}
.DCustom-product-customize .room .cover+.cover{position: absolute; top: 0; left: 0; width: 100%;}
.DCustom-product-customize .room .cover>.lazy{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}

.DCustom-product-selected{width: 295px; padding: 0 20px;}
.DCustom-product-selected .h-title{height: 70px; display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid #E2E2E2; text-align: center; font-size: 22px; font-weight: bold; line-height: 1; color: #000000;
}
.DCustom-product-selected .mcscroll{height: 640px; margin-top: -1px;}
.DCustom-product-selected li{width: 100%; padding: 18px 0;}
.DCustom-product-selected li+li{border-top: 1px solid #E2E2E2;}
.DCustom-product-selected .txt-cate{font-size: 11px; font-weight: 700; line-height: 1; color: #6B8689; margin-bottom: 10px;}
.DCustom-product-selected .box{width: 100%; display: flex; align-items: center; position: relative;}
.DCustom-product-selected .box+.box{margin-top: 30px;}
.DCustom-product-selected .thumb{flex: 0 0 auto; width: auto; max-width: 100%; position: relative;}
.DCustom-product-selected .thumb .cover{position: relative; padding-bottom: 100%; width: 55px;}
.DCustom-product-selected .thumb .cover>.lazy{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.DCustom-product-selected .content{flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; 
    padding-left: 12px; padding-right: 40px;
}
.DCustom-product-selected .content .title{font-size: 12px; color: #3B3B3B; line-height: 1.5em;
    max-height: 3em; -webkit-line-clamp: 2;
}
.DCustom-product-selected .content .price{font-size: 14px; color: #3B3B3B; line-height: 1.5em; font-weight: 700;}
.DCustom-product-selected .action{position: absolute; right: 5px; top: 0; bottom: 0; margin: auto; width: 18px; height: 18px;}
.DCustom-product-selected .action .link{width: 100%; height: 100%; background-color: #D5D5D5;
    display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff;
    border-radius: 50%;
    transition: all 200ms ease;
}
.DCustom-product-selected .action .link span{line-height: 18px;}
.DCustom-product-selected .action .link:hover{background-color: #D30010;}
.DCustom-product-selected li .wrapper + .wrapper{margin-top: 6px;}

.DCustom-customize-end .end-menu{padding: 35px 0; display: flex; justify-content:space-between; width: 100%;}
.DCustom-customize-end .end-menu > .col-auto{-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none;}
.DCustom-customize-end .end-menu .total-box{display: flex;}
.DCustom-customize-end .end-menu .total{padding-right: 30px;}
.DCustom-customize-end .end-menu .total .txt{font-size: 14px; font-weight: 700; line-height: 1.2; color: #000000; margin-bottom: 2px;}
.DCustom-customize-end .end-menu .total .price{font-size: 30px; font-weight: 700; line-height: 1.2; color: #000000;}
.DCustom-customize-end .end-menu .action .btn{width: 176px; height: 50px; line-height: 50px; text-align: center; padding: 0; border: 0;
    font-size: 16px; color: #fff; border-radius: 0; position: relative;
}
.DCustom-customize-end .end-menu .action .btn .feather{position: absolute; top: 0; bottom: 0; margin: auto; 
    width: 16px; height: 16px; font-size: 14px;
    transition: all 200ms ease;
}
.DCustom-customize-end .end-menu .action.-I .btn{background-color: #9BB9BC;}
.DCustom-customize-end .end-menu .action.-I .btn .feather{left: 25px;}
.DCustom-customize-end .end-menu .action.-I .btn:hover .feather{left: 10px;}
.DCustom-customize-end .end-menu .action.-II .btn{background-color: #6B8689;}
.DCustom-customize-end .end-menu .action.-II .btn .feather{right: 25px;}
.DCustom-customize-end .end-menu .action.-II .btn:hover .feather{right: 10px;}

.DCustom-finalize{position: relative;}
.DCustom-finalize .h-title{font-size: 25px; font-weight: 700; color: #1A1818; line-height: 1.5em; text-transform: uppercase;
    position: relative; padding-right: 32px; padding-top: 10px; display: inline-flex; margin: 0;
}
.DCustom-finalize .h-title:before{content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 13px; 
    background-color: #ED1D24;
}
.DCustom-finalize-cate{width: 345px; padding-left: 40px;}
.DCustom-finalize-cate .mcscroll{height: 755px;}
.DCustom-finalize-cate .mCSB_inside>.mCSB_container{margin-right: 9px;}
.DCustom-finalize-cate .mCSB_scrollTools{width: 5px;}
.DCustom-finalize-cate .mCSB_scrollTools a+.mCSB_draggerContainer{margin: 0;}
.DCustom-finalize-cate .mCSB_scrollTools .mCSB_draggerRail{background-color: #fff; width: 5px;}
.DCustom-finalize-cate .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width: 5px;background-color: #6B8689;}
.DCustom-finalize-cate .item-list{margin: -5px -5px; padding: 5px;}
.DCustom-finalize-cate .item-list>li{width: 50%; padding: 5px 5px;}
.DCustom-finalize-cate .wrapper{background-color: #fff; padding: 10px; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.DCustom-finalize-cate .thumb{position: relative;}
.DCustom-finalize-cate .thumb .cover{position: relative; padding-bottom: 100%; width: 100%;}
.DCustom-finalize-cate .thumb .cover>.lazy{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.DCustom-finalize-cate .content{padding-top: 10px;}
.DCustom-finalize-cate .content .title{font-size: 11px; color: #1A1818; line-height: 1.5em; margin-bottom: 5px;
    height: 3em; -webkit-line-clamp: 2;
}
.DCustom-finalize-cate .content .price{font-size: 13px; color: #1A1818; line-height: 1.5em; font-weight: 700;}
.DCustom-finalize-ProductList{padding-top: 45px;}
.DCustom-finalize-ProductList .head{padding-top: 21px;}
.DCustom-finalize-ProductList .body{padding-top: 18px; padding-bottom: 12px;}
.DCustom-finalize-ProductList .table{padding-right: 40px; margin-bottom: 0;}
.DCustom-finalize-ProductList .table .box+.box{padding-top: 10px;}
.DCustom-finalize-ProductList .table .col-I{min-width: 64px;}
.DCustom-finalize-ProductList .table .col-II.desc{padding-right: 10px;}
.DCustom-finalize-ProductList .table .col-IV{min-width: 72px; text-align: right;}
.DCustom-finalize-ProductList .table .col-IV{min-width: 72px; text-align: right;}
.DCustom-finalize-ProductList .table .title{font-size: 16px; font-weight: 700; line-height: 1.5; color: #1A1818;padding: 5px 0;}
.DCustom-finalize-ProductList .table .desc{font-size: 15px; font-weight: 400; line-height: 1.5; color: #1A1818;padding: 5px 0;}
.DCustom-finalize-ProductList .table .desc strong{font-weight: 700;}
.DCustom-finalize-ProductList .total{padding-top: 40px; padding-bottom: 12px;}
.DCustom-finalize-ProductList .total .col-auto{background-color: #000000;}
.DCustom-finalize-ProductList .total .col{margin-left: 7px; margin-right: -24px; background-color: #EEEEEE;}
.DCustom-finalize-ProductList .total .txt{min-width: 154px; font-size: 21px; color: #fff; text-align: center;
    display: flex; align-items: center; justify-content: center; padding: 15px; line-height: 1.2;
}
.DCustom-finalize-ProductList .total .content{padding: 15px 65px 15px 15px; text-align: right; font-size: 21px; line-height: 1.2;}
.DCustom-finalize-ProductList .total .content span{display: inline-block; vertical-align: middle; margin-right: 15px;}
.DCustom-finalize-ProductList .note{font-size: 16px; line-height: 1.5em; color: #1A1818; padding-top: 20px;}
.DCustom-finalize-ProductList .note .link{color: #1A1818;
    transition: all 200ms ease;
}
.DCustom-finalize-ProductList .note .link:hover{color: #ED1D24;}
.DCustom-finalize-other{width: 345px; padding-left: 45px; padding-top: 45px;}
.DCustom-finalize-other .FloorPlan{padding: 20px 20px; background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.DCustom-finalize-other .FloorPlan .head{padding-left: 10px;}
.DCustom-finalize-other .FloorPlan .body{padding-top: 10px;}
.DCustom-finalize-other .FloorPlan .body .cover{position: relative; padding-bottom: 80%; width: 100%;}
.DCustom-finalize-other .FloorPlan .body .cover>.lazy{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center;
}
.DCustom-finalize-other .other-more{padding: 20px 20px; background-color: #fff; margin-top: 15px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.DCustom-finalize-other .other-more .title{font-size: 16px; line-height: 1.5; color: #1A1818; margin-bottom: 5px;}
.DCustom-finalize-other .other-more .brand{position: relative;}
.DCustom-finalize-other .other-more .line{padding-top: 8px; position: relative;}
.DCustom-finalize-other .other-more .line .lazy{margin-right: 5px;}
.DCustom-finalize-other .other-more .line .txt{font-size: 21px; font-weight: 700; line-height: 1; padding-top: 2px;
    display: inline-block; vertical-align: middle;
}
.DCustom-finalize-other .other-more .line .link{display: block; margin-top: 10px; font-size: 22px; color: #ED1D24;
    transition: all 200ms ease;
}
.DCustom-finalize-other .other-more .line .link:hover{color: #f00;}
.DCustom-finalize-other .other-more .line .qrcode{position: absolute; right: 0; top: -45px;}
.DCustom-finalize-other .other-more .line .qrcode .link{margin-top: 0;}
.DCustom-finalize-other .other-more .line .qrcode .lazy{object-fit: contain; object-position: center; 
    max-width: 97px; max-height: 97px; margin: 0;
}
.DCustom-finalize-other .other-more .content{padding-top: 25px;}
.DCustom-finalize-other .other-more .content span{font-size: 13px; line-height: 1.5; color: #1A1818;}
.DCustom-finalize-other .other-more .content span strong{font-weight: 700;}
.DCustom-finalize-other .other-more .content p{margin:12px 0 0 0;font-size: 12px; line-height: 1.5; color: #1A1818;}
.DCustom-finalize-other .other-more .content p strong{font-weight: 700;}
.DCustom-finalize-other .other-more .content p .link{ color: #1A1818; transition: all 200ms ease;}
.DCustom-finalize-other .other-more .content p .link:hover{color: #f00;}
.DCustom-finalize-end{padding-top: 110px; padding-bottom: 70px;display: flex; justify-content:space-between; width: 100%;}
.DCustom-finalize-end > .col-auto{-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none;}
.DCustom-finalize-end .action:after{content: ''; display: table; clear: both;}
.DCustom-finalize-end .action .btn{height: 50px; line-height: 50px; text-align: center; padding: 0; border: 0;
    font-size: 16px; color: #fff; border-radius: 0; position: relative; text-transform: uppercase; float: left;
}
.DCustom-finalize-end .action .btn .feather{position: absolute; top: 0; bottom: 0; margin: auto; 
    width: 16px; height: 16px; font-size: 14px;
    transition: all 200ms ease;
}
.DCustom-finalize-end .action .btn .icon{position: relative; top: 0;
    transition: all 200ms ease;
}
.DCustom-finalize-end .action .btn+.btn{margin-left: 20px;}
.DCustom-finalize-end .action.-I .btn{background-color: #9BB9BC; min-width: 310px;}
.DCustom-finalize-end .action.-I .btn .feather{left: 25px;}
.DCustom-finalize-end .action.-I .btn:hover .feather{left: 10px;}
.DCustom-finalize-end .action.-II .btn.-I{width: 176px; background-color: #ED1D24;}
.DCustom-finalize-end .action.-II .btn.-II{width: 176px; background-color: #6B8689;}
.DCustom-finalize-end .action.-II .btn.-III{width: 50px; background-color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);}
.DCustom-finalize-end .action.-II .btn.-I .icon{margin-right: 15px; padding-right: 15px; border-right: 1px solid #F36166;}
.DCustom-finalize-end .action.-II .btn.-I:hover .icon{top: -3px;}
.DCustom-finalize-end .action.-II .btn.-II .icon{margin-right: 15px;}
.DCustom-finalize-end .action.-II .btn.-II:hover .icon{top: -3px;}
.DCustom-finalize-end .action.-II .btn.-III:hover .icon{top: -3px;}


.DCustom-product-select .tab-content li.disable{
    pointer-events: none;
    opacity: 0.8;
}


.no-content{
    width: 100%;
    text-align: center;
    padding: 5rem 0;
}