/*------ section-gpu ------*/

.GS66-gpu{margin-top:0px;padding-bottom:200px;}
.GS66-gpu-nvlogo{width:200px;}
.GS66-gpu .section-gpu-img{margin:-200px -250px -100px -150px; pointer-events: none;}
.GS66-gpu-tab-content{position:relative;z-index:2}
.GS66-gpu .nav-tabs {border-bottom:none;margin-top:15px;}
.GS66-gpu .nav-tabs>li>a{border:none;}
.GS66-gpu .nav>li>a {position: relative;display: block;padding: 0px 25px 10px 0px;border-bottom: 5px solid #333;color:#666;margin-right:20px;}
.GS66-gpu .nav>li>a h3{margin:2px 0px;font-size:40px;}
.GS66-gpu .nav-tabs>li.active>a,.GS66-gpu .nav-tabs>li.active>a:focus,.GS66-gpu .nav-tabs>li.active>a:hover {background:none !important;border:none;border-bottom:5px solid #8cc63f;color:#8cc63f;}
.GS66-gpu .nav>li>a:focus,.GS66-gpu .nav>li>a:hover {background-color:transparent;color:#fff;border-bottom:5px solid #fff;}
.GS66-gpu .tab-content>.tab-pane {padding-top:0px;}
.GS66-gpu .tab-content .content-box{display: flex; justify-content: space-between; align-items: center;}
.GS66-gpu .tab-content .content-box .txtbox,.GS66-gpu .tab-content .content-box .imgbox{width: 95%;}
.GS66-gpu .tab-content .content-box .imgbox{width: 95%; text-align: center;}

.GS66-gpu  .video-sec__video {
    position: relative;
  
    width: 100%;
    height: auto;

  }

  .GS66-gpu  .video-sec__video:before {
    content: "";
    display: block;
  }

  .GS66-gpu .video-sec__video:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    /*background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 70%);*/
    pointer-events: none;
  }

  .GS66-gpu .video-sec__video a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background:#141414 no-repeat center 56%;
    background-size: cover;
    /*background-image: url(https://storage-asset.msi.com/global/picture/image/feature/nb/2020_CML/GE/GE66/01-video-bg.jpg);*/
  }
  .GS66-gpu #gpu-tab-3 .video-sec__video a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background: none;
    background-size: cover;
    /*background-image: url(https://storage-asset.msi.com/global/picture/image/feature/nb/2020_CML/GE/GE66/01-video-bg.jpg);*/
  }
  .GS66-gpu  #gpu-tab-3 .video-sec__play-btn {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80px;
    width: 80px;
    background: url(https://storage-asset.msi.com/global/picture/image/feature/nb/GS66-RTX30/01-video-play.png)
      no-repeat center;
    background-size: contain;
    border-radius: 50%;
     /*opacity: 0.5;*/
    transition: 1s;
  }
  .GS66-gpu #gpu-tab-1 .video-sec__video a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    background-size: cover;
    
  }
  .GS66-gpu  #gpu-tab-1 .video-sec__play-btn {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80px;
    width: 80px;
    background: url(https://storage-asset.msi.com/global/picture/image/feature/nb/GS66-RTX30/01-video-play.png)
      no-repeat center;
    background-size: contain;
    border-radius: 50%;
    
     /*opacity: 0.5;*/
    transition: 1s;
  }

  .GS66-gpu  .video-sec__video a:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: 1s;
  }

  .GS66-gpu  .video-sec__video a:hover:before {
    /*opacity: 0.5;*/
  }

  .GS66-gpu  .video-sec__video a:hover .video-sec__play-btn {
    opacity: 1;
    animation: play-btn-light 3s infinite;
  }

  .GS66-gpu  .video-sec__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80px;
    width: 80px;
    height: 80px;
    background: url(https://storage-asset.msi.com/global/picture/image/feature/nb/GS66-RTX30/01-video-play.png)
      no-repeat center;
    background-size: contain;
    border-radius: 50%;
    
    /*opacity: 0.5;*/
    transition: 1s;
  }
  @keyframes play-btn-light {
    0%,
    100% {
      box-shadow: 0px 0px 10px 3px rgba(255, 255, 255, 0.3);
    }

    50% {
      box-shadow: 0px 0px 10px 3px #fff;
    }
  }


.gpu-tab-ul{list-style:none;margin-right:-150px;padding-inline-start:0px;margin-bottom:20px;}
.gpu-tab-ul li{position:relative;margin-top:10px;display: block;height:16px;}
.gpu-tab-ul li .gpu-tab-li-itemname{position:absolute;z-index:2;line-height:16px;font-size:18px;font-family: 'DINCond-Bold';padding-left:0px;}
.gpu-tab-ul li .gpu-tab-li-value{position:absolute;top:0px;width:50px;height:100%;background:#369;text-align:right;line-height:16px;font-size:20px;font-family:'DINCond-Bold';padding-right:10px;}
.gpu-tab-ul li .gpu-tab-li-value span{padding:0px 5px;}
.active .gpu-tab-ul li .gpu-tab-li-bar1{width:100%;background: -webkit-linear-gradient(left,rgba(0,72,255,0),rgba(86,151,0,1));}
.active .gpu-tab-ul li .gpu-tab-li-bar2{width:85%;background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(86,151,0,1));}
.active .gpu-tab-ul li .gpu-tab-li-bar3{width:70%;background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(86,151,0,1));}
.active .gpu-tab-ul li .gpu-tab-li-bar4{width:50%;background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.2));}
.GS66-gpu-note{color:#777;}
#gpu-tab-1 h1,#gpu-tab-2 h1,#gpu-tab-3 h1,#gpu-tab-4 h1,#gpu-tab-5 h1{margin-top:100px;}
.GS66-gpu-img-comparison{position:relative;}
.GS66-gpu-img-comparison #comparison-slider{position:absolute;left:22.4%;right:21.7%;top:14.6%;bottom:33%;}
.GS66-gpu-img-comparison .GS66-gpu2-main{}
#comparison-slider {position: relative;overflow: hidden;margin: auto;}
#comparison-slider .txt{position: absolute;top: 0;z-index: 3;}
#comparison-slider .txt-before{left: 3%;width: 100%;}	
#comparison-slider .vd-before{position: relative;}
#comparison-slider .vd-after{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;}
#comparison-slider .vdbox,#comparison-slider .vdbox2{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;overflow: hidden;}
#comparison-slider img {width: 100%;display:block;}
#comparison-slider .resize {position: absolute;top:0;left: 0;height: 100%;width: 50%;overflow: hidden;z-index: 10;}
#comparison-slider .handle {position:absolute; left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background: #000;cursor: ew-resize;z-index: 10;}
#comparison-slider .handle:after {position: absolute;top: calc(50% - 30px);width: 60px;height: 60px;left: -30px;content:'\21d4';color:white;font-weight:bold;font-size:20px;text-align:center;line-height:60px;background: #8cc63f;border-radius: 50%;transition:all 0.3s ease;}
#comparison-slider .handle.draggable:after {width: 60px;height: 60px;font-size:30px;left: -30px;}
#comparison-slider .video-wrapper:after{content: "";width: 100%;height: 100%;position: absolute;top:0;left: 0;display: block;z-index: 1000;}
#comparison-slider .video-wrapper{position: relative;padding-bottom: 56.25%;overflow: hidden;z-index: 1;}
#comparison-slider .video-wrapper iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#comparison-slider{background:#000;}
#comparison-slider,.vd-before{height:344px;width:610px;}
.GS66-gpu-2-before,.GS66-gpu-2-after{position:absolute;width:140px;top:52%;z-index:22222;}
.GS66-gpu-2-before{left:16%;}
.GS66-gpu-2-after{right:16%;top:8%;}
@media (max-width: 1599px) {
#comparison-slider,.vd-before{height:311px;width:550px;}}
@media (max-width: 1399px) {
.GS66-gpu .section-gpu-img{margin:-80px -250px -100px -150px;}
#comparison-slider,.vd-before{height:298px;width:523px;}
.GS66-gpu-2-before,.GS66-gpu-2-after{width:100px;top:35%;}}
@media (max-width: 1199px) {
.GS66-gpu .section-gpu-img{margin:-20px -250px -100px -150px;}
#comparison-slider,.vd-before{height:298px;width:513px;}}
@media (max-width: 991px) {
.gpu-tab-ul {margin-right:0px;}
#gpu-tab-1 h1,#gpu-tab-2 h1,#gpu-tab-3 h1{margin-top:30px;}
.GS66-gpu .section-gpu-img {margin: -30px -50px 0px -50px;}
#comparison-slider,.vd-before{height:243px;width:430px;}
.GS66-gpu .tab-content .content-box{display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
}

@media (max-width: 767px) {
.GS66-gpu{margin-top:0px;padding-bottom:0px;}
.GS66-gpu-content{text-align:center}
.GS66-gpu .nav-tabs{text-align:center;margin-top:35px;}
.nav-tabs>li{float:none;display:inline-block;width:32%;}
.GS66-gpu .nav>li>a {text-align:center;margin:5px;padding-right:10px}
.GS66-gpu .nav>li>a h3 {margin: 2px 0px;font-size:24px;}
.GS66-gpu .nav>li>a span{font-size:12px;font-family: 'DINCond-Bold';}
.GS66-gpu-tab-content{margin:30px 10px;}
.GS66-gpu .section-gpu-img {margin:-50px -150px 50px -150px;}
#gpu-tab-1 h1,#gpu-tab-2 h1,#gpu-tab-3 h1{text-align:center}
#gpu-tab-2 p,#gpu-tab-3 p{text-align:center}
#comparison-slider,.vd-before{height:250px;width:440px;}

}

@media (max-width: 640px) {
.GS66-gpu-img-comparison #comparison-slider{left:20%;right:20%;top:20%;bottom:20%;}
.GS66-gpu2-main{opacity:0}
#comparison-slider,.vd-before{height:220px;width:380px;}
.GS66-gpu-2-before,.GS66-gpu-2-after{width:80px;top:38%;}
.GS66-gpu-2-before{left:18%;}
.GS66-gpu-2-after{right:18%;}}