header.unit-info{ width: 100%; height: 512px; position: relative; }
@media all and (min-width: 1600px){
    header.unit-info{ height:720px; }
}
.unit-info .breadcrumb{ position: absolute; top: 70px; padding-left: 0; margin-left: 5%; }
.unit-swipe-content{ width: 40%; min-width: 400px; position: relative; left: 0; top: 100px; }
@media all and (min-width: 1600px){
    .unit-swipe-content{top:180px;}
}
.unit-swipe-star{ width: 100%; position: relative; display: flex; justify-content: flex-start; align-items: center; }
.unit-swipe-scores{ display: flex; justify-content: flex-start; align-items: center; /* flex-wrap: wrap; */ margin-right: 10px; }
.unit-swipe-star-icon{ width: 25px; position: relative; margin-right: 5px; }
.unit-swipe-star-icon img{ width: 100%; vertical-align: bottom; }
.unit-swipe-btn a{color: #ffffff;}
.unit-swipe-btn a:hover, .unit-swipe-btn:hover a{color: #000;}
.unit-swipe-btn:hover{ background: #ffffff; color: #000; }
.unit-swipe-star-number{ font-size: 1.2em; font-weight: 400; color: #FF8400; }
.unit-swipe-star-number em{ font-size: 1.3em; font-weight: 700; }
.unit-swipe-feature{ font-size: 1.2em; font-weight: 300; line-height: 1.2em; color: #ffffff; letter-spacing: .05em; }
p.unit-swipe-info{ font-size: 1.2em; font-weight: 300; line-height: 1.4em; margin: 20px 0; }
.unit-swipe-btn{ width: 170px; height: 40px; position: relative; margin: 10px 0; border: 1px solid #ffffff; box-sizing: border-box; line-height: 40px; text-align: center; font-size: 1.25em; font-weight: 300; color: #ffffff; border-radius: 5000px; transition: .15s linear; cursor: pointer; }
.unit-swipe-btn:hover{ background: #ffffff; color: #3382dc; }

/* category */
.category-all .content-container{ width: 95%; position: relative; margin: 50px auto; display:flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.content-half{/* width: 48%; */position: relative;}
.category-area{ width: 100%; position: relative; background: #212121; margin-top: 20px; }
.category-container{width: 95%;position: relative;margin: 0 auto;padding: 20px 0;}
.category-content{width: 100%;position: relative;display: flex;justify-content: flex-start;align-items: stretch;flex-wrap: wrap;}
.category-item{ padding: 6px 12px; border: 1px solid #4B4040; margin: 11px 7px; border-radius: 2px; font-size: 1em; font-weight: 300; color: #ffffff; position: relative; transition: .15s linear; }
.category-item a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.category-item:hover{ background: #575757; }
.category-content>li>a{font-size:16px;color:#fff;text-decoration:none}
.category-content>li{padding:6px 12px;border:1px solid #4b4040;margin:8px 7px;border-radius:2px;-webkit-transition:all .3s ease 0s;-moz-transition:all .3s ease 0s;-ms-transition:all .3s ease 0s;transition:all .3s ease 0s;cursor:pointer}
.category-content>li{display:inline-block;padding-left:10px;padding-right:10px}
.category-btn{width: 100px;height: 40px;position: relative;margin: 10px 0;background: linear-gradient(96deg, rgba(74, 84, 112, 0.5) 5%, #4a5470 78%);transition: .15s linear;z-index: 2;margin: auto;}
.category-btn a{color: #fff;width: 100%;display: block;}
.category-btn:after{ content: ''; position: absolute; right: 5px; top: 10px; width: 20px; height: 20px; background: url('/img/icon/arrow.png') no-repeat; background-size: cover; z-index: 2; }
.category-btn:before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background: linear-gradient(96deg, #4a5470 5%, #1971c0 78%); transition: .15s linear; z-index: 1; }
.category-btn p{color: #ffffff;font-size: 1em;font-weight: 300;text-align: center;line-height: 40px;position: relative;z-index: 2;}
.category-btn:hover.category-btn:before{ opacity: 1; }

/* ============================================================
SLICK
============================================================ */
.slick-slider .swiper-slide { 
    width: 100%; 
    min-height: 512px; 
    font-size: 18px; color: #fff; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 40px 95px; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    font-size: 14px; color: #ffffff; 
    flex-shrink: 0; position: relative; 
    /* transition-property: transform;  */
}
.slick-slider .swiper-slide:before{ content: ''; display: table; position: absolute; width: 100%; height: 100%; min-height:512px; top: 0; left: 0; background: radial-gradient(circle at 90%, transparent 45%,rgba(0,0,0,.9)); }
@media all and (min-width: 1600px){
    .slick-slider .swiper-slide{height: 720px;}
    .slick-slider .swiper-slide:before{min-height: 720px;}
}

.slick-dots{ bottom: 10px; }
.slick-dots li button:before{ color: #ffffff; font-size: 32px; }
.slick-dots li.slick-active button:before{ color: #ffffff; }
.slick-next{ right: 10px; background: url('../img/icon/next-arrow.svg') no-repeat; background-size: contain; background-position: center; }
.slick-prev{ left: 10px; background: url('../img/icon/next-arrow.svg') no-repeat; background-size: contain; background-position: center; transform: rotate(180deg); margin-top: -25px; }
.slick-next, .slick-prev{ width: 27px; height: 48px; z-index: 2; }
.film-list .slick-next, .film-list .slick-prev{ top: 160px; }
.slick-prev:before, .slick-next:before{ font-size: 0; }
.slick-list{ overflow: visible; }

.slider{ width: 100%; position: relative; margin: 0 auto; overflow: hidden; padding-top: 30px; }
.slider-btn{ width: 180px; position: relative; float: left; margin-right: 15px; transition: .15s linear; cursor: pointer; }
.slider-btn:hover{ transform: translate(0, -10px); }
.slider-btn:hover .unit-related-content:after, .slider-btn:hover .related-content:after{height: 100.5%; opacity: 1}
.slider-btn:hover .film-play-btn{opacity: .7}
.slider-btn:nth-last-child(1){ margin-right: 0; }
.slider-btn-all:after{ content: ''; display: table; clear: both; }
.slider-btn-all .slick-track {min-width: 100%;}
/* ============================================================
content
============================================================ */
/* unit title */
.unit-title{ padding-left: 10px; border-left: 4px solid #fffee5; display: flex; justify-content: space-between; align-items: center; }
.unit-title h2{font-size: 2em;font-weight: 300;color: #fffee5;/* margin: 0 0 20px 0; */margin-top: 10px;}
.unit-title a{ font-size: 1.1em; font-weight: 300; color: #fffee5; transition: .15s linear; }
.unit-title a p{ color: #fffee5; }
.unit-title a:hover{ opacity: .8; }

/* film area */
.unit-related-content{width: 100%;height: 0;padding-bottom: 140%;position: relative;background: rgba(0, 0, 0, .5);}
.unit-related-content img{width: 100%;height: 100%;object-fit: cover;object-position: center;position: absolute;}
.unit-related-content .feature-item{ position: absolute; top: 0; left: 0; }
.unit-related-content .program-item{ position: absolute; bottom: 0; right: 0; }
.unit-related-text{ width: 100%; position: relative; background: rgba(0, 0, 0, .8); padding: 8px 10px; box-sizing: border-box; transition: .15s linear; }
.unit-related-text h5{font-size: 1.1em;font-weight: 400;color: #eeeeee;height: 26px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
.unit-related-text p{ font-size: .85em; font-weight: 300; color: #eeeeee; height: 20px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.unit-related-text .btn-border, .related-text .btn-border{ width: 120px; height: 40px; position: relative; margin: 10px auto; border-radius: 5000px; border: 1px solid #ffffff; box-sizing: border-box; text-align: center; line-height: 38px; color: #ffffff; font-size: 1.1em; font-weight: 400; transition: .15s linear; display: none; }
.unit-related-text .btn-border:hover{ background: #ffffff; color: #333333; }

.film-scores{ display: flex; justify-content: flex-start; align-items: center; }
.film-star-icon{width: 14px;position: relative;margin-right: 3px;margin-top: -3px;}
.film-star-icon img{ width: 100%; vertical-align: bottom; }
.film-star-number{ min-width: 40px; font-size: .8em; font-weight: 400; color: #FF8400; }
.film-star-number em{ font-size: 1.2em; font-weight: 700; }
.related-text .film-scores p{ font-size: .8em; font-weight: 300; color: #c7c7c7; margin-top: 3px; }

.film-play-btn{position:absolute;width:36%;padding-bottom:36%;opacity:0;top:calc((100% - 67px)/2);left:50%;transform:translate(-50%, -25%);z-index:10;transition:.15s linear}
.drama-related-item .related-content .film-play-btn img,.unit-related-content .film-play-btn img{width:101%;vertical-align:bottom}
.related-content .film-play-btn{width:24%;padding-bottom:24%}
.special-list .film-play-btn{width:20%;padding-bottom:20%}
.drama-related-item .film-play-btn{width:20%;padding-bottom:20%; top: calc((100% - 65px)/2); transform: translate(-50%, -20%)}
.related-content:after,.unit-related-content:after{content:'';display:table;position:absolute;width:100%;top:0;left:0;background:rgba(0,0,0,.7);transition:.15s linear;opacity:0}
.unit-related-content .program-item{margin-right:0}

/* horizontal */
.detail-all-item{ position: relative; margin-right: .8%; transition: .15s linear; z-index: 1; }
.detail-all-item.drama-related-item{ position: relative; margin: 0 10px; }
.detail-all-item.drama-related-item:nth-last-child(1){ margin-right: 0; }
/* .detail-all-item.drama-related-item:nth-child(1){ margin-left: 0; } */
.drama-related-item .related-content{ width: 100%; padding-bottom: 66.6667%; position: relative; overflow: hidden; }


.drama-related-item .related-content img{ width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; }
/* ie */
.drama-related-item .related-content img{ height: auto\0; }


/* 4k */
section.special-list{ background: url('/img/web/spec_list_bg.jpg') no-repeat; background-size: cover; background-position: center; }
section.special-list .content-container{ padding-top: 40px; }
section.special-list .slider{ height: 0; padding-bottom: 25%; }
.special-list .drama-related-item .related-content:after{ content: ''; display: table; position: absolute; top: 0; left: 0; width: 100%; padding-bottom: 68%; background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.8), transparent, transparent); opacity: 1; }
@media all and (min-width: 1050px){
    section.special-list .slider{ padding-bottom: 25%; }
}

@media all and (min-width: 1400px){
    section.special-list .slider{ padding-bottom: 20%; }
}

@media all and (min-width: 1600px){
    section.special-list .slider{ padding-bottom: 15%; }
}

section.special-list .slick-slider .slick-list{ width: 95%; position: relative; margin: 0 auto; }

section.special-list .film-list .slick-next, section.special-list .film-list .slick-prev{ top: 110px; }
.tagfor4k{ position: absolute; top: 0; transform: translate(0,-80%); }
section.special-list .drama-related-item .related-content{border-radius: 5px;}
section.special-list .related-text{ bottom: 0; transform: translate(0,-100%); background: none; transition: .15s linear; border-radius: 0 0 5px 5px; }
/* section.special-list .slider-btn:hover .related-text{margin-top:32%; background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .9),rgba(0, 0, 0, .7),rgba(0, 0, 0, 0));} */
section.special-list .related-content .program-item{ z-index: 5; left: 4%; right: auto; bottom: auto; top: 53%; }
section.special-list .related-content .feature-item{top: 10px;}
.special-list .slider-btn:hover .related-content:after{ background: rgba(0, 0, 0, .6); z-index: 5; }
.special-list .slider-btn-nomask:hover .related-content:after{ background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.8), transparent, transparent); z-index: 0; }
.related-text{ width: 100%; position: relative; background: rgba(0, 0, 0, .8); padding: 8px 10px; box-sizing: border-box; transition: .15s linear; }
.related-text h5{ font-size: 1.1em; font-weight: 400; color: #eeeeee; height: 26px; overflow: hidden ; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.related-content .feature-item{ position: absolute; top: 0; left: 0; margin-right: 0; }
.related-content .program-item{ position: absolute; bottom: 0; right: 0; margin-right: 0; }
.video-related .detail-all-item:hover{ box-shadow: 3px 4px 12px rgba(0, 0, 0, .8); z-index: 2; }
.video-related .detail-all-item:hover .related-text{ background: #121212; }
.related-text p{ color: #eeeeee; font-size: .95em; font-weight: 300; transition: .15s linear; line-height: 1.6em; }

/* blog */
.blog-all .content-container{min-width: auto;}
.blog-item{ transition: .15s linear; margin: 0 10px; position: relative; }
/* .blog-item:nth-child(1){ margin-left: 0; } */
.blog-item:nth-last-child(1){ margin-right: 0; }
.blog-item:hover .blog-top img{ transform: scale(1.1); }
.blog-item:hover{ box-shadow: 0 3px 50px rgba(0, 0, 0, 1); z-index: 10; margin-top: -10px; }
.blog-top{ width: 100%; padding-bottom: 66.67%; position: relative; overflow: hidden; }
.blog-top img{ width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; transition: .15s linear; }
.blog-top:after{ content: ''; display: table; position: absolute; width: 100%; height: 105%; top: 0; left: 0; background: rgba(0, 0, 0, .15); z-index: 2; transition: .15s linear; }
.blog-item:hover .blog-top:after{ background: rgba(0, 0, 0, 0); }
.blog-title{ font-size: 1.25em; font-weight:600; color: #333333; margin-bottom: 10px; height: 56px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.blog-text{ width: 100%; position: relative; padding: 25px 0 20px 0; background: #ffffff; }
.blog-text-container{ width: 90%; position: relative; margin: 0 auto; }
.blog-text-container h5{ font-size: 1.05em; font-weight: 500; color: #333333; margin-bottom: 5px; padding-top: 30px; height: 24px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.blog-text-container p{ font-size: 1em; font-weight: 300; color: #333333; height: 70px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.author{ width: 96%; position: absolute; left: 2%; top: -20%; z-index: 3; display: flex; justify-content: flex-start; align-items: flex-end; }
.author-avatar{ width: 32px; height: 32px; position: relative; border-radius: 50%; border: 2px solid #ffffff; overflow: hidden; float: left; }
.author-avatar img{ width: 100%; height: 100%; object-fit: cover; object-position: center; border:none; }
.author h6{ font-size: .8em; font-weight: 400; color: #666666; margin-left: -3px; background: #ffffff; border-radius: 5px; padding: 3px 4px 5px 4px; }
/* .author:after{ content: ''; display: table; clear: both; } */

.blog-recommand{ width: 100%; position: relative; box-sizing: border-box; border-radius: 5px; margin-top: 10px; }
.blog-recommand span{ background: #1971c0; color: #ffffff; border-radius: 5px; padding: 2px 4px; font-weight: 300; font-size: .8em; }
.blog-recommand h4{ width: 100%; position: relative; margin: 0 auto; padding: 5px 0 4px; color: #1971c0; font-size: 1em; font-weight: 400; line-height: 1.5em; height: 25px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }


/*===============================================
popup
===============================================*/
.popup{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .9); z-index: 50; opacity: 0; display: none; }
.popup-content{ z-index: 3; }
.popup.scroll{ overflow-y: scroll; }

/*===============================================
popup 18+
===============================================*/
.warning-18{ width: 90%; max-width: 700px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); }
.warning-18:before{ content: ''; display: table; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0) rotate(30deg); width: 320px; height: 320px; background: linear-gradient(to right, rgba(141, 0, 0, 1.0), rgba(141, 0, 0, 0)); }
.wraning-wrap{ width: 100%; position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.warning-icon{ width: 200px; position: relative; margin: 20px auto; }
.warning-icon img{ width: 100%; vertical-align: bottom; }
.warning-text{ width: calc(100% - 240px); position: relative; color: #ffffff; }
.warning-text h5{ width: 289px; font-size: 2em; font-weight: 700; border-bottom: 5px solid #D80000; margin-bottom: 10px; text-align: center; }
.warning-text p{ font-size: .95em; font-weight: 400; text-align: justify; line-height: 1.4em; }
.warning-btns{ width: 100%; position: relative; margin: 10px auto 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.warning-btn{ width: 48%; height: 50px; position: relative; border-radius: 10px; margin: 10px 0; transition: .15s linear; }
.warning-btn a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; line-height: 50px; color: #ffffff; font-size: 1.2em; }
.warning-not18{ background: #D80000; }
.warning-over18{ background: #02af59 }
.warning-btn:hover{ height: 49px; background: none; border: 1px solid #ffffff; box-sizing: border-box; }
.warning-btn:hover.warning-btn a{ line-height: 46px; }

@media all and (max-width: 550px){
    .warning-text{ width: 100%; }
    .warning-text h5{ position: relative; margin: 0 auto 10px; }
}
.popup.scroll{ overflow-y: scroll; }

/*===============================================
ranking
===============================================*/
.category-area{overflow-y:auto}
.category-area::-webkit-scrollbar{width:5px}
.category-area::-webkit-scrollbar-track{border-radius:10px;background:#000}
.category-area::-webkit-scrollbar-thumb{background:#666;border-radius:10px}
.category-area::-webkit-scrollbar-thumb:hover{background:#444}
.category-area{scrollbar-face-color:#666;scrollbar-highlight-color:#444;scrollbar-track-color:#000;scrollbar-width:5px;scrollbar-border-radius:10px;scrollbar-color:#000;scrollbar-width:thin}
.category-sub{width:100%;position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:20px}
.sub-title h3{font-size:1.1em;font-weight:400;color:#fffee5}
.category-sub-edit p a{font-size:1em;font-weight:300;color:#fffee5;text-decoration:underline}
.ranking-table{width:100%;position:relative;background:0 0;font-size:.85em;font-weight:300;text-align:center;vertical-align:middle}
.ranking-table td{padding:3px 0;min-width:35px;transition:.15s linear}
.ranking-table td a{color:#fff}
.ranking-table td a:hover{text-decoration:underline}
.ranking-table td:nth-child(2){text-align:left}
.ranking-table td:nth-child(4),.ranking-table td:nth-child(5){font-size:.9em}
.ranking-table td:nth-child(1){border-radius:1000px 0 0 1000px}
.ranking-table td:nth-last-child(1){border-radius:0 1000px 1000px 0}
.ranking-table tr:nth-child(1) td{text-align:center;font-weight:400;color:#fffee5;border-bottom:1px solid #666;padding-bottom:5px;font-size:1em}
.ranking-table td:nth-child(4),.ranking-table td:nth-child(5),.ranking-table tr:nth-child(1) td:nth-child(4),.ranking-table tr:nth-child(1) td:nth-child(5){text-align:right}
.ranking-table td:nth-last-child(1),.ranking-table td:nth-last-child(2),.ranking-table td:nth-last-child(3){min-width:60px}
.ranking-table tr:nth-child(2) td{padding-top:10px}
.ranking-up{color:#ff8400}
.ranking-down{color:#79cc88}
.ranking-new{font-size:.9em;color:#fffee5}
.ranking-table tr:hover td{background:#333}
.slick-slide .autoplay{}
.slick-slide .godetail{
    /* display: block; */
    /* height: 100%; */
    /* width: 100%; */
}  

.gallery-movie .swiper-slide.slick-slide{
    display: block;
    margin-top: 20px;
}
.content-container {
    width: 95%;
    min-width: 1200px;
    position: relative;
    margin: 50px auto;
}