/*-----------------------------------------
            common
-------------------------------------------*/
.paging { position:relative; margin-top:30px; padding:0 60px; text-align:center; height: 60px; line-height:60px; border-radius: 8px; border: solid 1px var(--color-border-layout); }
.paging .btn-no { display: inline-block; margin:0 12px;  font-size: 14px; letter-spacing: -0.14px;  color: var(--color-font-url); }
.paging .btn-no.active { font-weight:bold; color:var(--color-font-blue2)}
.paging .prev { position:absolute; left:18px; top:18px; display: block; width:24px; height:24px; background: url('../img/common/btn_paging_prev.png') no-repeat; background-size: 24px auto; }
.paging .next { position:absolute; right:18px; top:18px; display: block; width:24px; height:24px;  background: url('../img/common/btn_paging_next.png') no-repeat; background-size: 24px auto; }
.paging .prev span,
.paging .next span { display: none;}

/*-----------------------------------------
            pc
-------------------------------------------*/
.search-result { padding-top:40px; width:896px; margin:0 auto; }
.search-result .recommend-keyword { position:relative; width:100%; padding:24px 24px 24px 96px; box-sizing: border-box; border-radius: 8px; border: solid 1px var(--color-border-layout); }
.search-result .recommend-keyword h2 { position:absolute; left:24px; top:24px; font-size: 16px; font-weight: bold;  letter-spacing: -0.16px; color: var(--color-font-primary); }
.search-result .recommend-keyword p { display: flex;  flex-wrap: wrap;  gap:20px 32px; }
.search-result .recommend-keyword p a { flex-basis: auto; white-space:nowrap;  font-size: 16px; letter-spacing: -0.16px; color: var(--color-font-primary); }
.search-result .recommend-keyword p a:hover { text-decoration: underline;}
.search-result .ad { margin-top:30px; padding: 24px; border-radius: 8px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06); border: solid 1px rgba(20, 91, 255, 0.5); background-color:var(--color-white); }
.search-result .ad a:hover { text-decoration: underline;}
.search-result .ad .url { display: inline-block; line-height:20px; margin-bottom:14px; font-size: 14px;  line-height:1;  letter-spacing: -0.14px; color: var(--color-font-url); }
.search-result .ad .url .ico { width:20px; height:20px; margin-right:4px; vertical-align: middle; }
.search-result .ad h2 { line-height:24px; font-size: 20px;  font-weight: bold;  letter-spacing: -0.2px; color: var(--color-font-blue); }
.search-result .ad dt { padding-top:12px; overflow: hidden; }
.search-result .ad dd { padding-top:12px }
.search-result .ad dt span {float:left; height:16px; line-height:16px; }
.search-result .ad dt span:after { display: inline-block; content:''; width: 4px; height: 4px;  margin:0 10px; vertical-align: middle; border-radius: 4px; background-color: #d0d0d0; }
.search-result .ad dt span:last-child:after { display: none;} 
.search-result .ad dt a { font-size: 14px; letter-spacing: -0.14px;  color: var(--color-font-blue2); }
.search-result .ad dd { font-size: 14px; letter-spacing: -0.14px; color: var(--color-font-gray2); }

.search-result .news-list { padding-bottom:32px; margin-top:30px;  border-radius: 8px; border: solid 1px var(--color-border-layout);  }
.search-result .news-list .title { padding:20px 24px 16px 24px;  font-size: 20px; font-weight: bold; letter-spacing: -0.2px; border-bottom: solid 1px var(--color-border-layout);   }
.search-result .news { padding:32px 24px 0 24px; }
.search-result .news:first-child { padding-top:28px; }
.search-result .news a:hover { text-decoration: underline;}
.search-result .news .url { display: inline-block; margin-bottom:14px; font-size: 14px;  line-height:1;  letter-spacing: -0.14px; color: var(--color-font-url); }
.search-result .news dt a { line-height:24px; font-size: 18px; font-weight: bold; letter-spacing: -0.18px; color: var(--color-font-blue); }
.search-result .news dd { padding-top:14px; }
.search-result .news dd a {  line-height: 1.57; font-size: 14px; letter-spacing: -0.14px; color: var(--color-font-gray2);}

.search-result .search-list-btns { display: none; }

.video-detail { width:1264px; margin:0 auto; padding:152px 0 0 0; }
.video-detail:after { clear: both; content:''; display: block;}
.video-detail .video-list { float:left;  margin:0 0 0 407px; }
.video-detail .video-list-swiper { width:450px; height:800px; overflow:hidden; border-radius: 16px;  box-shadow: 0 24px 40px 0 rgba(33, 37, 44, 0.16);  }
.video-detail .video-btns { position:relative; width:450px; margin:0 auto; }
.video-detail .aside { float:right; width:300px; }
.video-detail .aside .keywords .tags { padding:0 0 60px 0; justify-content: left; }
.video-detail .banner-pc li { margin-bottom:12px }
.video-detail .banner-pc img { width:100%; }
.video-detail .banner-mo { display: none;}
.video-detail .btn-top { display: none;}


.video-detail .video { position:relative; width:100%;  height:800px;  overflow: hidden;}
.video-detail .video .thumb {position:relative; width:450px; height:100%; }
.video-detail .video  iframe,
.video-detail .video  video { width:100%; height:100%; position:absolute; top: 0; left: 0;  bottom: 0; right: 0;}
.video-detail .video .thumb img { width:100%; object-fit:cover; }
.video-detail .video .thumb:before {  position:absolute; left:0; top:0; display:block; content:''; width:100%; height:100%; object-fit: contain;  opacity: 0.5; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 76%, #000); }
.video-detail .video .info { position:absolute; left:0; bottom:0; width:100%; box-sizing: border-box; padding:20px 16px;  color: var(--color-white);}
.video-detail .video .title { height:22px; line-height:22px; margin-bottom:8px; font-size: 16px;  font-weight: 500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.video-detail .video .user { font-size: 14px; line-height:32px; }
.video-detail .video .user img { width:32px; height:32px; margin-right:4px; border-radius: 32px; vertical-align: middle;}
.video-detail .video-btns { width:258px; margin:0 auto; padding-top:40px; height:48px; text-align:center; overflow: hidden; }
.video-detail .video-btns .inner  div {  position:relative; top:inherit;   vertical-align: top; margin-top:0; font-size:13px; color:var(--color-font-btn); font-weight:500; width: 128.5px; height:48px; line-height:48px; box-sizing: border-box; }
.video-detail .video-btns .inner  div.swiper-button-disabled { opacity: 1;}
.video-detail .video-btns .inner  div:after {  position:absolute; top:0; width:48px; height:48px; content:''; }
.video-detail .video-btns .swiper-button-prev { float:left; left:inherit; justify-content:left; padding-left:60px; text-align: left; border-right:1px solid var(--color-border-layout); } 
.video-detail .video-btns .swiper-button-prev:after { left:0;   background: url('../img/detail/btn_swiper_prev.png') no-repeat; background-size: 48px 48px;} 
.video-detail .video-btns .swiper-button-next { float:left; right:inherit; justify-content:right; padding-right:60px; text-align: right; } 
.video-detail .video-btns .swiper-button-next:after {right:0; background: url('../img/detail/btn_swiper_next.png') no-repeat; background-size: 48px 48px;} 
.video-detail .swiper-notification {  display: none;}
.layer-guide { display: none;}

/*-----------------------------------------
            mobile
-------------------------------------------*/
@media all and (max-width:1023px){

    .search-result { padding:0; width:100%; box-sizing: border-box; }
    .search-result .paging { display: none; }
    .search-result .search-list-btns { display: block; }
    .search-result .recommend-keyword { width:100%; padding:24px 20px 43px 20px; border-radius: 0; border:0;  }
    .search-result .recommend-keyword h2 { margin-bottom:12px; position:relative; left:initial; top:initial; font-size: 16px; letter-spacing: -0.16px; }
    .search-result .recommend-keyword p {  gap:12px 24px; }
    .search-result .recommend-keyword p a { font-size: 16px; letter-spacing: -0.16px;  }

    .search-result .ad { margin-top:0; padding:24px 20px; border-radius: 0; box-shadow:none; border:0; border-top:solid 1px rgba(20, 91, 255, 0.5); border-bottom: solid 1px rgba(20, 91, 255, 0.5); background-color:var(--color-white); }
    .search-result .ad dt { padding-top:2px; }
    .search-result .ad dt span {float:left; margin-top:10px; }

    .search-result .news-list { padding-bottom:0; margin-top:0;  border-radius: 0; border:0;  }
    .search-result .news-list .title {display: none;  }
    .search-result .news { padding:32px 20px 0 20px; }
    .search-result .news:first-child { padding-top:42px; }
    .search-result .news dd { padding-top:12px; }

    .search-list-btns { padding:40px 20px 0 20px; }
    .search-list-btns .btn-more { width: 100%; height: 48px; line-height:48px; font-size: 14px; color:var(--color-font-btn);  font-weight: 500; text-align:center; border-radius: 8px;  border: solid 1px var(--color-border-layout); background:none; }
    .search-list-btns .btn-more:before { display: inline-block; content:''; width:14px; height:14px; margin:-3px 12px 0 0;  background:url('../img/main/btn_more_m.png') no-repeat; background-size: 14px auto;} 
   
    .video-detail { float:left; clear:both; width:100%; height:calc(100vh - 60px); margin:0 auto; padding:0; }
    .video-detail .video-list { position:relative; float:none; width:100%; height:100%; margin:0; }
    .video-detail .video-list-swiper { width:100%; height:100%; overflow:hidden; box-sizing: border-box; border-radius: 0;  box-shadow:none;  }
    .video-detail .swiper-wrapper {display: block;overflow-y: auto;  }
    .video-detail .swiper-slide { position: relative; left: initial; top:initial; padding:0 0 24% 0; box-sizing: border-box;}
    .video-detail .video-btns { position:absolute; left:0; top:0; width:100%; margin:0 auto; padding-top:0; height:auto; text-align:center; overflow: hidden; }
    .video-detail .video-btns .inner { position:relative; margin:0 auto; padding-left:16px; box-sizing: border-box;}
    .video-detail .video-btns .inner div { position:relative; top:inherit; vertical-align: top; margin-top:0; font-size:0; color:var(--color-font-btn); font-weight:500; width:48px; height:48px; line-height:48px; box-sizing: border-box; }
    .video-detail .video-btns .inner div.swiper-button-disabled { opacity: 1;}
    .video-detail .video-btns .inner div:after {  position:absolute; top:0; width:48px; height:48px; content:''; }
    .video-detail .video-btns .swiper-button-prev { float:left; left:inherit; justify-content:left; padding-left:0; text-align: left; border:0; margin-bottom:8px;  } 
    .video-detail .video-btns .swiper-button-prev:after { left:0;   background: url('../img/detail/btn_swiper_prev_m.png') no-repeat; background-size: 48px 48px;} 
    .video-detail .video-btns .swiper-button-next { clear:both; float:left; right:inherit; justify-content:left; padding-right:0;  } 
    .video-detail .video-btns .swiper-button-next:after {right:0; background: url('../img/detail/btn_swiper_next_m.png') no-repeat; background-size: 48px 48px;} 

    .video-detail .aside { float:none; width:100%; }
    .video-detail .aside .keywords,
    .video-detail .banner-pc { display: none;}
    .video-detail .banner-mo { position:fixed; left:0; bottom:0; display: block; width:100%; z-index:2;}
    .video-detail .banner-mo img { width: 100%; }
    .video-detail .btn-top { position:fixed; left:0; top:0; display: block; width:100%; height:60px; background: var(--color-white); z-index:999; }
    .video-detail .btn-top .btn-historyback { position:absolute; left:20px; top:21px; width:26px; height:18px; border:0; background: url('../img/detail/btn_historyback.png') no-repeat; background-size: 26px auto; }
    .video-detail .btn-top .btn-historyback span { display: none;}
    
    .video-detail .video { position:relative; width:100%; height:100%; margin:0 auto; border-radius: 16px;  overflow: hidden;}
    .video-detail .video .thumb { position:relative; width:100%; height:100%;}
    .video-detail .video .thumb img { width:100%; height:100%; object-fit:cover; }
    .video-detail .video .info { bottom:initial; top:0; padding:16px;  }
    .video-detail .video .title { height:20px; line-height:20px; margin-bottom:12px; font-size: 16px;  white-space:normal; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
    .video-detail .video .user { font-size: 14px; line-height:32px; }
    .video-detail .video .user img { width:32px; height:32px; margin-right:4px; border-radius: 32px; vertical-align: middle;}


    .layer-guide { position:fixed; left:0; top:0; width:100%; height:100%; border:0; background:rgba(0, 0, 0, 0.8); z-index:999}
    .layer-guide[open] {
        display: block;
    }      
    .layer-guide .inner { width: 272px; overflow: hidden; margin: 0 auto; margin-top:157px; }
    .layer-guide .txt { clear:both; width: 270x; height: 270px; padding:0;  padding-top:164px; box-sizing: border-box; font-size: 16px;  font-weight: 500; line-height: 1.38;  color: var(--color-font-guide); text-align:center; border-radius: 272px;  object-fit: contain; border: solid 1px rgba(255, 224, 51, 0.3); background: url('../img/detail/ico_guide_layer.png') center 44px no-repeat; background-size: 100px 100px;}
    .layer-guide .btn-layer-close { float:right; width:44px; height:44px; border:0; background: url('../img/detail/btn_close_guide_layer.png') no-repeat; background-size: 44px auto;}
    .layer-guide .btn-layer-close span { display: none;}
}