/* ADL init*/
@charset "UTF-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
@import url('https://fonts.googleapis.com/css?family=Play:400,700');
+@import url('fonts.css');
html,body {}
.msiFooter{background:#fff;border-top:1px solid rgba(0,0,0,.1);position: relative;z-index: 2;color:#888;}
.msiFooter p{margin-bottom:0px;}/*BS5 & MSI footer conflict*/
.msiFooter .info{border:none;}

/* ADL main*/
#ADL-page{background:#eeeae6;color:#222;overflow: hidden}
#ADL-page h1,#ADL-page h2,#ADL-page h3,#ADL-page h4,#ADL-page h5{color:#9d884f;margin-bottom: 1.5rem;line-height: 1.5em;}
#ADL-page p{color:#222;margin-bottom: 1.5rem;line-height: 1.5em;}
#ADL-page p a:link,#ADL-page p a:visited{color:#666;text-decoration: none;}
#ADL-page p.note{color:#888;font-size:12px;}
#ADL-page h1{font-size:1.5rem;}#ADL-page h2{font-size:1.5rem}#ADL-page h3{font-size:1.4rem}#ADL-page h4{font-size:1.3rem}#ADL-page h5{font-size:1.2rem}#ADL-page p{font-size:1rem}
#ADL-page #s2,#ADL-page #s3,#ADL-page #s4,#ADL-page #s5{display:flex;align-items: center;justify-content: center;overflow: hidden;}
.btn:focus,.btn:active {outline: none !important;box-shadow: none;}
@media (min-width: 1400px){
.container-1920 {max-width: 1920px;margin-right: auto;margin-left: auto;}}
@media (min-width: 1600px){
.container-2080 {max-width: 2080px;width:110%;margin-left:-5%}}
@media (min-width: 1921px){
.container-2080 {margin: 0 auto}}
@media (max-width: 1399.98px) {}
@media (max-width: 1199.98px) { ... }
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {
#ADL-page h1{font-size:1.2rem;}#ADL-page h2{font-size:1.15rem}#ADL-page h3{font-size:1.1rem}#ADL-page h4{font-size:1.rem}#ADL-page h5{font-size:.9rem}#ADL-page p{font-size:.8rem}}
@media (max-width: 575.98px) { ... }


/* Loading*/
#loading{z-index:9999;position: fixed;width:100vw;height:100vh;overflow: hidden}
#loading-bg-star{display: flex;justify-content: center;align-items: center;opacity:1;background-image:url(https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/loading-bg.jpg);background-size:cover;background-position:center;transition-duration:1s;height:100%;width:100%;}
#loading-bg-star.active{opacity:0;}
.loading-box{width:500px;text-align: center;position: relative;z-index: 2;}
.loading-box img.adl-logo{width:100%}
.loading-box-intel {display:flex;align-content: center;justify-content: center;align-items: center;margin:20px 0px 30px;font-size: 16px;line-height: 26px; text-align: left;}
.loading-box-intel img{width:80px;margin-right: 20px;}
.loading-box span{color:#9d884f;font-size: 16px;}
#loading-num{color: #9d884f;margin-left:3px;}
.loading-bar-box{background:rgba(255,255,255,.2);border-radius:6px;padding:3px;width:30%;margin: 0px auto;margin-top: 6px;height:10px}
#loading-bar{background:linear-gradient(to right,rgba(144,126,42,0), rgba(157,136,79,1));width:0px;height:4px;border-radius:4px;font-size:10px;font-weight: bold;}
@media (max-width: 1399.98px) { ... }
@media (max-width: 1199.98px) { ... }
@media (max-width: 991.98px) { ... }
@media (max-width: 767.98px) {
.loading-box{width:80%;}
.loading-bg{display: none;}
.loading-bg0{display: block}}
@media (max-width: 575.98px) { ... }
@keyframes loading {
from {transform: scale(0.01);opacity:1}
to {transform: scale(3);opacity:1}}

/*fixed*/
.ADL-msilogo{position:fixed;top: 30px;left:30px;z-index: 6;width:100px;}
.ADL-msilogo img{width:100%}
.ADL-sharebar{position:fixed;bottom: 40px;right:40px;z-index: 6;transform:skew(-10deg, 0deg);}
.ADL-sharebar a:link,.ADL-sharebar a:visited,.ADL-sharebar .btn-share{background:#9d884f;padding:0px;color:#fff;font-size:10px;font-weight: bold;backdrop-filter: blur(5px);border:none;display:block;float: left;margin-left: 5px;}
.ADL-sharebar a:hover,.ADL-sharebar a:active,.ADL-sharebar .btn-share:hover{background:#69582b;}
.ADL-sharebar a img,.ADL-sharebar .btn-share img{transform:skew(10deg, 0deg);width:20px;margin: 13px;padding: 0px}
@media (max-width: 767.98px) {
.ADL-msilogo{top: 25px;left:25px;width:90px;}
.ADL-sharebar{bottom: 30px;right:30px}
.ADL-sharebar a img,.ADL-sharebar .btn-share img{margin: 12px;}}
@media (max-width: 575.98px) {
.ADL-msilogo{top: 23px;left:23px;width:80px;}
.ADL-sharebar{bottom: 20px;right:20px}
.ADL-sharebar a img,.ADL-sharebar .btn-share img{margin: 11px;}}

/*s1 KV*/
#s1{position: relative;overflow: hidden;width:100%;height:120vh;display: flex;align-items: flex-start;justify-content: center;opacity: 0;background:#fff;}
#s1.active{opacity: 1}
#s1:after{content:'';display: block;position: absolute;left:0px;right:0px;bottom:0px;height:200px;background: rgb(0,0,0);background: linear-gradient(0deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);}
#ADL-kv{position:relative;margin: 0px auto 0px;max-width:1200px;width:100%;height:100vh;display: flex;align-items: center;justify-content: center;}
.ADL-img{height:0px;pointer-events:all !important;width: 100%;}
.layer{display: block;position: absolute;background-size: contain;background-position: center center;background-repeat: no-repeat;text-align: center;text-decoration: none;top:auto;}
.layer img{width:100%;max-width:100%}
.layer-item img{width:100%;transition:1s;-webkit-filter: drop-shadow(0px 0px 7px rgba(255,255,255,0));filter: drop-shadow(0px 0px 7px rgba(255,255,255,0));}
.layer-item span{color:rgba(0,0,0,.6);font-size: 16px;display: block;transition:1s;}
.layer-item1 span{position:relative;bottom:0px;}
.layer-item4 span{position:absolute;right:0px;bottom:-20px;}
.layer-item5 span{position:absolute;left:0px;bottom:-20px;}
.layer-item:hover img{transform: translate(0px, -15px);-webkit-filter: drop-shadow(0px 0px 27px rgba(255,255,255,1));filter: drop-shadow(0px 0px 27px rgba(255,255,255,1))}
.layer-item:hover span{color:rgba(0,0,0,1);}
.layer-bg {width:120vw;height: 120vh;left:50%!important;top:50% !important;margin-left: -60vw;margin-top: -60vh;background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/loading-bg.jpg");}
.layer-dragon {width:53%;left:54%!important;margin-left:-20%;margin-top: -36%}
.layer-item1{width:23%;left:49%!important;margin-left: -11.5%;margin-top:7%;z-index: 3}
.layer-item2{width:23%;left:64%!important;margin-right: -11.5%;margin-top:5%;z-index: 2}
.layer-item3{width:22%;right:63%!important;left:auto!important;margin-left: -11%;margin-top:-1%;z-index: 2}
.layer-item4{width:20%;left:63%!important;margin-right: -10%;margin-top:-12%;z-index: 1}
.layer-item5{width:18%;right:75%!important;left:auto!important;margin-left: -9%;margin-top:-7%;z-index: 1}
.layer-content{width:550px;top:80%;left:50%;margin-left: -275px;z-index: 4}
@media (min-width: 1921px) {}
@media (min-width: 2100px) {}
@media (min-width: 2300px) {}
@media (max-width: 1699.98px) {
}
@media (max-height: 800px) {
    .layer-dragon {width:47%;left:54%!important;margin-left:-20%;margin-top: -36%}
    .layer-item1{left:49%!important;margin-left: -11.5%;margin-top:4%;z-index: 3}
    .layer-item2{left:64%!important;margin-right: -11.5%;margin-top:5%;z-index: 2}
.layer-item5{margin-top:-10%}

    .layer-item3{right:63%!important;left:auto!important;margin-left: -11%;margin-top:-1%;z-index: 2}
}
    @media (max-height: 700px) {
        .layer-dragon {width:45%;left:57%!important;margin-left:-20%;margin-top: -36%}
        .layer-item1{left:50%!important;margin-left: -11.5%;margin-top:1%;z-index: 3}
        .layer-item2{left:64%!important;margin-right: -11.5%;margin-top:1%;z-index: 2}
        .layer-item3{right:63%!important;left:auto!important;margin-left: -11%;margin-top:-6%;z-index: 2}}

@media (max-width: 1399.98px) {
.layer-bg {width:130vw;height: 130vh;margin-left: -65vw;margin-top: -75vh;}
.layer-item span{letter-spacing: 0px;font-size: 14px;}}
@media (max-width: 1199.98px) {
.layer-bg {width:160vw;height: 160vh;margin-left: -80vw;margin-top: -85vh;}
.layer-item1{left:49%!important;}
.layer-item3{width:22%;right:63%!important;margin-left: -11%;}
.layer-item4{width:18%;left:64%!important;margin-right: -10%;margin-top:-12%;z-index: 1}
.layer-item5{width:18%;right:75%!important;}
.layer-item span{font-size: 13px;}}
@media (max-width: 991.98px) {
.layer-bg {width:180vw;height: 180vh;margin-left: -90vw;margin-top: -100vh;}
.layer-item span{font-size: 12px;}}
@media (max-width: 880.98px) {
.layer-bg {margin-top: -110vh;}}
@media (max-width: 767.98px) {
.layer-bg {width:240vw;height: 240vh;margin-left: -120vw;margin-top: -125vh;}
.layer-dragon {width:65%;margin-left:-25%;margin-top: -60%}
.layer-item1{left:52%!important;width:27%;}
.layer-item2{left:69%!important;width:27%;}
.layer-item3{right:60%!important;width:26%;}
.layer-item4{width:30%;left:60%!important;top:-60px !important;}
.layer-item5{width:20%;right:74%!important;}
.layer-content{width:70%;top:70%;margin-left:-35%}
.layer-item span{display: none}}
@media (max-width: 640.98px) {
.layer-bg {width:340vw;height: 340vh;margin-left: -170vw;margin-top: -180vh;}
.layer-content{width:80%;top:65%;margin-left:-40%}}
@media (max-width: 575.98px) { ... }


/*s2 Intel + Peak Design + Liquid Metal */
#ADL-page-cpu{height:100vh;background: #fff}
#s2,#s3,#s4,#s5{position:absolute;height:100vh;opacity: 0;width: 100%}
#s2{background:#fff;padding:0px;opacity: 1; z-index: 3}
#s3{background:#fff;padding:0px;z-index: 2}
#s4{background:#fff;padding:0px;z-index: 1}
#s2 h1{margin-bottom:5px;}
.cpu-bg{width:1600px;height:842px;position: absolute;left:50%;margin-left: -800px;margin-top:-421px;}
.cpu-bg img{width:100%;transition:1s;}
.cpu-content{position: absolute;width:40%;margin: 0px auto;left: 0%;right:0%;text-align: center;max-width: 600px}
.cpu-content-1{}
.cpu-content-1 img{width:120px;margin-bottom: 40px}
.btn-intel{background:transparent;color:#000;border:none;position: relative;}
.btn-intel:after{content:'';width:30px;height:30px;background:url('https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/icon-star.png');background-size:cover;display:block;position:absolute;right:-20px;top:0px;animation-duration:1s;animation-name:btn_Shiny;animation-iteration-count: infinite;}
@keyframes btn_Shiny {
0% {-webkit-filter: drop-shadow(0px 0px 3px rgba(202,170,82,0));filter: drop-shadow(0px 0px 3px rgba(202,170,82,0));opacity:.6}
50% {-webkit-filter: drop-shadow(0px 0px 4px rgba(202,170,82,1));filter: drop-shadow(0px 0px 4px rgba(202,170,82,1));opacity:1}
100% {-webkit-filter: drop-shadow(0px 0px 3px rgba(202,170,82,0));filter: drop-shadow(0px 0px 3px rgba(202,170,82,0));opacity:.6}}
.btn-intel:hover:after{content:'';width:40px;height:40px;right:-25px;top:-5px;}
.notelink{background: transparent;border:none;color:#888;}
.data{display:flex;justify-content: center;align-items: center;list-style: none;padding: 0px;}
.data li{font-size:18px;margin:0px 20px;}
.data li span{font-size:32px;margin:0px 8px;position: relative;bottom: -5px;;}
.data li span img{width:24px;margin:0px 0px 0px 10px;}
.data .data-num-note{font-size:12px;;}
.modal{}
.modal-content{color:#333;background:#fff;border: none;border-radius: 0px;padding:30px 60px;position: relative;}
.modal-content img{margin-right: 40px}
.modal-content .btn-close{position:absolute;top:-15px;right:-15px;background: transparent;opacity: 1;border-radius: 50px;width: 40px;height: 40px;overflow: hidden;padding: 0px;}
.modal-content .btn-close img{width:100%}
.modal-content .modal-body{display: flex;justify-content: center;align-items: center;padding: 0px;}
.modal-content .data {display: flex;justify-content: flex-start;}
.modal-content .data-l li {margin: 0px 20px 0px 0px;}
.modal-content .data li span {font-size: 20px;margin: 0px;bottom: 0px;}
.modal-backdrop.show{opacity: .8}
.cpu-content-2{margin: 10vh auto 0vh}
.cpu-cooler{position: absolute;left:50%;top:35vh;width:1400px;height:400px;margin-left:-700px;margin-top:-200px;}
.cpu-cooler div{position: absolute;}
.cpu-cooler div img{width:100%}
.cpu-cooler-bg{width: 100%;}
.cpu-cooler-wleft{width: 40%;left:10%;animation-duration:6s;animation-name:cooler_wleftright;animation-iteration-count: infinite;}
.cpu-cooler-wright{width: 40%;right:10%;animation-duration:6s;animation-name:cooler_wleftright;animation-iteration-count: infinite;}
.cpu-cooler-left{width: 10%;left:0%;top:30%;animation-duration:2s;animation-name:cooler_left;animation-iteration-count: infinite;}
.cpu-cooler-right{width: 10%;right:2%;top:30%;animation-duration:2s;animation-name:cooler_right;animation-iteration-count: infinite;}
.cpu-cooler-backleft{width: 20%;left:20%;top:5%;animation-duration:2s;animation-name:cooler_backleftright;animation-iteration-count: infinite;}
.cpu-cooler-backright{width: 20%;right:25%;top:5%;animation-duration:2s;animation-name:cooler_backleftright;animation-iteration-count: infinite;}
.cpu-cooler-topleft{width: 36%;left:2%;top:14%;animation-duration:2s;animation-name:cooler_topleftright;animation-iteration-count: infinite;animation-delay: 1s;}
.cpu-cooler-topright{width: 36%;right:2%;top:14%;animation-duration:2s;animation-name:cooler_topleftright;animation-iteration-count: infinite;animation-delay: 1s;}
@keyframes cooler_wleftright {0% {opacity:0}30% {opacity:.5;}70% {opacity:.6;transform: translate(0px, -20px);}100% {opacity:0;transform: translate(0px, -30px);}}
@keyframes cooler_left{0%{opacity:0}60%{opacity:.3;}100%{opacity:0;transform: translate(-30px, 5px);}}
@keyframes cooler_right{0%{opacity:0}60%{opacity:.3;}100%{opacity:0;transform: translate(30px, 5px) ;}}
@keyframes cooler_backleftright{0%{opacity:0}60%{opacity:.3;}100%{opacity:0;transform: translate(0px, -10px) scale(.95);}}
@keyframes cooler_topleftright{0%{opacity:.6}60%{opacity:1;transform: translate(0px, -3px) scale(1.02);}100%{opacity:.6;}}
@media (min-width: 1921px) {}
@media (min-width: 2100px) {}
@media (min-width: 2300px) {}
@media (max-width: 1599px) {
.cpu-content{width:50%;}}
@media (max-width: 1399.98px) {
.cpu-bg{width:1400px;margin-left: -700px;height:736px;margin-top:-368px;}
.cpu-content{width:55%;}
.cpu-cooler{top:35vh;width:1260px;height:360px;margin-left:-630px;margin-top:-180px;}}
@media (max-width: 1199.98px) {
.cpu-bg{width:1120px;margin-left: -560px;height:588px;margin-top:-294px;}
.cpu-content{width:60%;}
.data li{font-size:16px;margin:0px 16px;}
.data li span{font-size:28px;margin:0px 6px;bottom: -4px;}
.cpu-cooler{top:35vh;width:980px;height:280px;margin-left:-490px;margin-top:-140px;}}
@media (max-width: 991.98px) {
.cpu-bg{width:980px;margin-left: -490px;height:505px;margin-top:-280px;}
.cpu-content{width:70%;}
.cpu-content-1 img{width:100px;margin-bottom: 25px}
.modal-content .modal-body{display: block;text-align: center;}
.modal-content .data {justify-content: center;}
.modal-dialog {margin:2rem;}
.modal-content img {margin-right:0px;max-width: 100%;}
.modal-content h4{margin-top:30px;}
.modal-content .data-l li {margin: 0px 10px 0px 10px;}
.peak-data-c .data-w{font-size:24px;}
.peak-data-total .data-w{font-size: 30px}
.cpu-cooler{top:35vh;width:840px;height:240px;margin-left:-420px;margin-top:-120px;}
.cpu-bg-2 img{transform: translate(0px, -20px) scale(.9);}}
@media (max-width: 767.98px) {
.cpu-bg{margin-top:-300px;}
.cpu-content{width:85%;margin-top:-10%}
.cpu-content-1{margin: 0vh auto 0vh;width:80%;}
.cpu-content-1 img{width:90px;margin-bottom: 20px}
.cpu-content-2{margin: 10vh auto 0vh;width:80%;}
.data li{font-size:15px;margin:0px 10px;}
.data li span{font-size:24px;margin:0px 4px;bottom: -3px;}
.data li span img{width:22px;margin:0px 0px 0px 8px;}
.data .data-num-note{font-size:11px;;}
.peak-data-cpu .data-w{margin-left:6px;}
.peak-data-gpu .data-w{margin-right:6px;}
.peak-data-c .data-w{font-size:20px;}
.peak-data-total .data-w{font-size: 27px}
.cpu-cooler{top:30vh;width:630px;height:160px;margin-left:-315px;margin-top:-80px;}
.cpu-bg-2 img{transform: translate(20px, -30px) scale(.7);}}
@media (max-width: 575.98px) {
.cpu-content-1{margin: -5vh auto 0vh;}
.cpu-content-2{margin: 0vh auto 0vh;width:80%;}
.data li{font-size:14px;margin:0px 8px;}
.data li span{font-size:20px;margin:0px 3px;bottom: -2px;}
.data li span img{width:20px;margin:0px 0px 0px 6px;}
.data .data-num-note{font-size:8px;}
.peak-data{width:130%;margin-left: -15%;}
.peak-data-c {width: 250px;font-size:12px;background-size: cover;background-position: left}
.peak-data-cpu {margin-top: 0px;background-position: right}
.peak-data-gpu {margin-top: 0px;}
.peak-data-total {width:180px;}
.peak-data-c div {margin-top: 20px;font-weight: bold;}
.peak-data-total div {margin-top: 10px;font-weight: bold;}
.peak-data-c .data-w{font-size:20px;}
.peak-data-total .data-w{font-size: 24px}
.cpu-cooler{top:30vh;width:420px;height:120px;margin-left:-210px;margin-top:-60px;}
.cpu-bg-2 img{transform: translate(30px,-20px) scale(.5);}}

/*s6 GPU */
#s6{width:100%;overflow: hidden;background-color:#fff;}
#s6 .s6-bg{background-color:#fff;background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/gpu-bg.jpg"),url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/gpu-bg-x.jpg");background-size: cover, cover;background-position: center top, center top;background-repeat: no-repeat, repeat-x;padding:14em 0px 20em;}
#s6 h1{margin-bottom:5px;}
#s6 img{width:200px;max-width: 60%;margin-bottom: 20px;}
@media (min-width: 1921px) {}
@media (min-width: 2100px) {
#s6 .s6-bg{background-size: contain;}}
@media (min-width: 2300px) {}
@media (max-width: 1399.98px) {}
@media (max-width: 1199.98px) {
#s6 .s6-bg {background-size: 150%;background-position: center bottom,center bottom;background-size: cover, cover;padding:10em 0px 10em;}}
@media (max-width: 991.98px) {
#s6 .s6-bg {background-size: 170%;background-position: center bottom,center bottom;background-size: cover, cover;padding:10em 0px 5em;}}
@media (max-width: 767.98px) {
#s6 .s6-bg{background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/gpu-bg-m.jpg");background-size: 100%;background-position: center bottom;background-repeat: no-repeat;padding:3em 0px 30em;}}
@media (max-width: 640px) {
#s6 .s6-bg{padding:1em 0px 18em;}}
@media (max-width: 575.98px) {}

/*s7 Aesthetics */
#s7{background:#eeeae6;background-repeat: repeat-x ;padding:20em 0px;overflow: hidden;}
#s7 .container{width:60%;max-width:1600px}
#s7 .ats-box{background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:center;transform:skew(-10deg, 0deg) translate(0px, 50px);transition:1s;height:40vw;}
#s7.active .ats-box{transform: skew(-10deg, 0deg) translate(0px, 0px)}
.ats-box-1{transform-origin: 100% 50% !important;position: relative;right:20px;bottom:200px;background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/aesthetics-1-bg.jpg") ;z-index: 5 ;}
.ats-box-2{transform-origin: 50% 50% !important;background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/aesthetics-1-bg.jpg") ;z-index: 4;}
.ats-box-3{transform-origin: 0% 50% !important;position: relative;left:20px;top:200px;background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/aesthetics-1-bg.jpg") ;}
.ats-box-in{width:100%;text-align: center;transform: skew(10deg, 0deg);margin-bottom: 20%;position:absolute;left:50px;}
.ats-box-in img{max-width:180px}
.ats-box-img{position: absolute;}
.ats-box-img img{width:100%;transform:skew(10deg, 0deg);;}
.ats-box-img-lp1{top:17%;left: -30%;width:125%;}
.ats-box-img-lp2{top:0%;left: 0%;width:100%;overflow: hidden;height:100%}
.ats-box-img-lp2 img{transform-origin: 50% 50% !important;transform:scale(1.25) skew(10deg, 0deg) translate(30px, 30px);}
.ats-box-img-lp3{top:7%;right: -24%;width:115%;}
@media (max-width: 1699.98px) {
#s7 .container{width:70%;}
#s7 .ats-box{height:50vw;}}
@media (max-width: 1399.98px) {
#s7 .container{width:75%;}
#s7 .ats-box{height:60vw;}
.ats-box-in{width:90%;left:80px;margin-bottom:15%;}}
@media (max-width: 1199.98px) {
#s7 .container{width:85%;}
#s7 .ats-box{height:70vw;}
.ats-box-in{width:100%;left:40px;margin-bottom: 10%;}
.ats-box-1{right:-20px;bottom:240px;}
.ats-box-3{left:-20px;top:240px}}
@media (max-width: 991.98px) {
#s7{padding:15em 0px;}
#s7 .ats-box{height:85vw;width:60%;margin-left: 17%;transform: skew(-10deg, 0deg) translate(0px, 0px)}
.ats-box-in{width:100%;left:100px;margin-bottom: 10%;}
.ats-box-1{right:0px;bottom:40px;}
.ats-box-3{left:0px;top:40px}
.ats-box-img-lp1{top:10%;left: -10%;width:130%;}
.ats-box-img-lp3{top:7%;right: -14%;width:120%;}}
@media (max-width: 880px) {
	#s7 .ats-box{height:92vw;}
}
@media (max-width: 767.98px) {
#s7{padding:10em 0px;}
#s7 .ats-box{height:100vw;width:70%;margin-left: 10%}
.ats-box-in{width:100%;left:60px;margin-bottom: 10%;}}
@media (max-width: 575.98px) {
#s7 .ats-box{height:143vw;width:80%;margin-left: 5%}
.ats-box-in{width:100%;left:60px;margin-bottom: 10%;}}



/*s8 Experience */
#s8{background:#eeeae6;padding:10rem 0px 0rem;overflow-x: hidden;}
#s8 .s8-bt-bg{background:#eeeae6;overflow: hidden;}
#s8 .col-lg-4{padding:0px;}
.exp-box{color:#fff;display: flex;align-items: flex-end;justify-content: center;transform: skew(-10deg, 0deg) ;position: relative;transition: .2s;transition-delay: .2s;height:45vw;overflow:hidden; max-height: 800px;}
.exp-box-img{position:absolute;width:100%;height:100%;transform: skew(10deg, 0deg) scale(1.26);background-size:contain;background-repeat: no-repeat;background-position: top;background-color:#eeeae6;}
.exp-box-1 .exp-box-img{background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/experience-1-bg.jpg");transform: skew(10deg, 0deg) scale(1.05) translate(70px, -50px);animation-duration:6s;animation-name:Intelligent_Scenario;animation-iteration-count: infinite;}
.exp-box-2 .exp-box-img{background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/experience-2-bg.jpg");transform: skew(10deg, 0deg) scale(1.26) translate(0px, 40px)}
.exp-box-3 .exp-box-img{background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/experience-3-bg.jpg");transform: skew(10deg, 0deg) scale(1) translate(-30px, 0px)}
.exp-box:after{content:'';display: block;position: absolute;left:0px;right:0px;bottom:0px;height:200px;background: rgb(0,0,0);background: linear-gradient(0deg, rgba(238,234,230,1) 0%,rgba(238,234,230,0) 100%);}
.exp-box-in{width:60%;text-align: center;transform:translate(35px, 0px) skew(10deg, 0deg);z-index: 99;}
.exp-box-in img{width:120px;margin-bottom: 20px;}
.exp-box-1{margin-right:-2px}
.exp-box-3{margin-left:-2px}
.exp-box-1 .exp-box-in{transform:translate(120px, 0px) skew(10deg, 0deg);}
.exp-box-2 .exp-box-in{transform:translate(60px, 0px) skew(10deg, 0deg);}
.exp-box-3 .exp-box-in{transform:translate(0px, 0px) skew(10deg, 0deg);}
@media (min-width: 1921px) {
#s8 .s8-bt-bg{margin-bottom:100px;}
.exp-box{height:45vw }
.exp-box-1 .exp-box-img{transform: skew(10deg, 0deg) scale(1.2) translate(20px, 0px);}
.exp-box-3 .exp-box-img{transform: skew(10deg, 0deg) scale(1.2) translate(0px, 60px);}
.exp-box-in{}}
@media (max-width: 1599.98px) {
.exp-box{height:48vw }
.exp-box-in{width:70%;margin-top: 80px;}
.exp-box-1 .exp-box-img{transform: skew(10deg, 0deg) scale(1.26) translate(10px, -40px);}
.exp-box-1 .exp-box-in{transform:translate(60px, 0px) skew(10deg, 0deg)}
.exp-box-2 .exp-box-in{transform:translate(30px, 0px) skew(10deg, 0deg);}
.exp-box-3 .exp-box-in{transform:translate(0px, 0px) skew(10deg, 0deg);}}
@media (max-width: 1399.98px) {
.exp-box{height:48vw }
.exp-box-in{width:75%;}}
@media (max-width: 1199.98px) {
.exp-box{height:54vw }
.exp-box-1 .exp-box-in{transform:translate(40px, 0px) skew(10deg, 0deg);margin-bottom: 15px;}
.exp-box-2 .exp-box-in{transform:translate(20px, 0px) skew(10deg, 0deg);margin-bottom: 15px;}
.exp-box-3 .exp-box-in{transform:translate(0px, 0px) skew(10deg, 0deg);margin-bottom: 15px;}
.exp-box-in{margin-bottom:75px;}}
@media (max-width: 991.98px) {
.exp-box{height:90vw;width:100%;transform: skew(0deg, 0deg);overflow: hidden;margin: 0 auto;}
.exp-box-1 .exp-box-img,.exp-box-2 .exp-box-img,.exp-box-3 .exp-box-img{transform: skew(0deg, 0deg) scale(1);background-size:100%;background-position:bottom center;}
.exp-box-2 .exp-box-img {transform: skew(0deg, 0deg) scale(1) translate(0px, -30vw);}
.exp-box-1 .exp-box-in,.exp-box-2 .exp-box-in,.exp-box-3 .exp-box-in{transform:translate(0px, 0px) skew(0deg, 0deg);}}
@media (max-width: 767.98px) {
.exp-box{height:140vw;}
.exp-box-1 .exp-box-img{transform:translate(0px, -30vw) scale(1.4);}
.exp-box-2 .exp-box-img{transform:translate(0px, -80vw) scale(1.2);}
.exp-box-3 .exp-box-img{transform:translate(0px, -40vw) scale(1.3);}
.exp-box-1 .exp-box-in,.exp-box-2 .exp-box-in,.exp-box-3 .exp-box-in{transform: skew(0deg, 0deg);}}
@media (max-width: 575.98px) {}
@keyframes Intelligent_Scenario {
0% {background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/experience-1a-bg.jpg")}
33% {background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/experience-1b-bg.jpg")}
66% {background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/experience-1c-bg.jpg")}
100% {background-image:url("https://storage-asset.msi.com/event/2021/nb/2021_ADL_12th/images/experience-1a-bg.jpg")}}

/*s9*/
#s9{position: relative;background:#eeeae6;}
#ADL-page-items{position:absolute;overflow: hidden;width:100%;height:100vh;display: flex;background:#eeeae6;z-index: 2}
#ADL-page-items:before{display: block;position: absolute;top:0px;left:0px;right:0px;content: '';height:300px;background:linear-gradient(0deg, rgba(238,234,230,0) 0%,rgba(238,234,230,1) 100%);    z-index: 1;}
#ADL-page-items .list-line{position: absolute;top:50%;width:45%}
#ADL-page-items .list-line img{width:100%}
#ADL-page-items .list-line-l{left: 0px;z-index: 2;opacity: .6;margin-top: -25%;transform-origin: top left;opacity: .2}
#ADL-page-items .list-line-r{right: 0px;z-index: 2;opacity: .6;margin-top: -25%;transform-origin: top right;opacity: .2}
.list-logo{position:relative;height:50vh;z-index: 2;display: flex;justify-content: center;align-items: center;justify-content: center;    align-items: flex-end;}
.list-logo-box img{max-width:80%;width:600px}
.list-logo-box .icon-12th{width:200px}
@media (min-width: 1921px) {
#ADL-page-items .list-line{width:30%;top:60%;}}
@media (min-width: 2100px) {}
@media (min-width: 2300px) {}
@media (max-width: 1399.98px) {}
@media (max-width: 1199.98px) {  }
@media (max-width: 991.98px) {
.list-logo{height:50vh;}
#ADL-page-items{height:100vh;}}
@media (max-width: 767.98px) {
.list-logo-box img{max-width:92%;width:92%}
.list-logo-box .icon-12th{width:150px}}
@media (max-width: 575.98px) {
#ADL-page-items .list-line{top:50%;width:100%}
#ADL-page-items .list-line-l{left: -40%;margin-top: -50%}
#ADL-page-items .list-line-r{right: -40%;margin-top: -50%}}

/*s10*/
#s10{overflow: hidden;padding-top:50px;padding-bottom:50px;position: relative;z-index: 3;}
#s10 .nav-tabs {border-bottom: none;margin-bottom:70px;margin-top: 70px;}
#s10 .nav-link{color:#afafaf;font-size:24px;border:none;}
#s10 .nav-link:after{content:'';display: block;width: 50%;height:5px;background: #afafaf;position: relative;top:20px;left:25%;border:none;}
#s10 .nav-link:hover{color:#9d884f;}
#s10 .nav-link:hover:after{background:#afafaf;}
#s10 .nav-tabs .nav-item.show ,#s10 .nav-tabs .nav-link.active{background:transparent;color:#9d884f;border:none;}
#s10 .nav-tabs .nav-item.show ,#s10 .nav-tabs .nav-link.active:after{background: #9d884f;}
.item-box{background:#fff;position: relative;transform-origin: 50% 50% !important;opacity:1;display: flex;flex-direction: column;}
.item-box img{margin-top:-120px}
.item-box .item-spec{padding:0px 40px 40px;text-align:center;display: flex;flex-direction: column;justify-content: space-between;flex: auto;}
.item-box .item-top .item-series{font-size:24px;margin-bottom: 30px;color:#000 !important;}
.item-box .item-bottom{margin-top:0px;margin-bottom:20px;}
.item-box .item-bottom h6{margin-top:30px;color:#888;}
.item-box .btn{background:#9d884f;border-radius: 0px;color:#fff;font-size:16px;transform: skew(-10deg, 0deg);padding:5px 20px;}
.item-box .btn-more{background:#525252;}
.item-box .btn:hover{background:#69582b;}
.item-box .btn-more:hover{background:#000;}
.col-content{padding-left:30px;padding-right:30px;margin-top: 120px;}
@media (max-width: 1399.98px){
#s10 .nav-link{font-size:22px;}
.col-content{padding-left:25px;padding-right:25px;margin-top: 120px;}}
@media (max-width: 1199.98px){
#s10 .nav-link{font-size:20px;}
.item-box img{margin-top:-60px}
.item-box .item-spec{padding:0px 20px 20px;}
.item-box .item-spec h3{font-size:36px;}
.item-box .item-spec h5{font-size:16px;}
.item-box .item-spec .item-intro{font-size:15px;}
.col-content{padding-left:20px;padding-right:20px;margin-top:60px;}
.item-box .btn{font-size:14px;}}
@media (max-width: 991.98px) {
.item-box .btn{font-size:14px;}}
@media (max-width: 767.98px){
.item-box .item-spec{padding:0px 20px 10px;}
.item-box .item-spec h3{font-size:32px;}
.item-box .item-spec h5{font-size:15px;}
.item-box .item-spec h6{margin-top:10px}
.item-box .item-spec .item-intro{font-size:14px;}
.item-box .btn{padding:8px 10px;font-size:10px;}
.col-content{padding-left:15px;padding-right:15px;margin-top:60px;}}
@media (max-width: 575.98px){
#ADL-page-items{display: none}
.tab-pane{padding-left: 30px;padding-right: 30px;}
.item-box{margin:0px;}
.item-box img{margin-top:0px;width:90% !important;margin:0px 5%}
.item-box .item-spec{padding:10px;}
.item-box .item-spec h6{font-size:12px;}
.item-box .btn{padding:5px 5px;}
.col-content{padding-left:5px;padding-right:5px;margin-top:30px;}}

/*s11*/
#s11{padding-top:100px;padding-bottom:60px;position: relative;z-index: 2}
#s11:after{display: block;position: absolute;bottom:0px;left:0px;right:0px;content: '';height:300px;background:linear-gradient(0deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);    z-index: 1;}
#s11 .container{position:relative;z-index: 2}
#s11 .footer-icon{height:36px;margin:0px 60px 60px 0px;}
#s11 h2{line-height:1.6em;font-size:24px;margin-bottom: 40px;color:rgba(0,0,0,.6);}
#s11 p{line-height:1.4em;font-size:15px;text-align: justify;text-indent: 20px;color:rgba(0,0,0,.4);}
#s11 .col {padding-right: 30px;padding-left: 30px;}
@media (max-width: 1399.98px){
#s11 .footer-icon{height:34px;margin:0px 60px 60px 0px;}
#s11 .col {padding-left:25px;padding-right:25px;}}
@media (max-width: 1199.98px){
#s11 .footer-icon{height:32px;margin:0px 40px 40px 0px;}
#s11 h2{font-size:23px;}
#s11 p{font-size:14px;}
#s11 .col {padding-left:20px;padding-right:20px;}}
@media (max-width: 991.98px) {
#s11 .footer-icon{height:30px;margin:0px 30px 30px 0px;}}
@media (max-width: 767.98px){
#s11 .footer-icon{height:28px;margin:0px 24px 24px 0px;}
#s11 h2{font-size:20px;}
#s11 p{font-size:13px;margin-bottom:10px}
#s11 .col {padding-left:15px;padding-right:15px;}}
@media (max-width: 575.98px){
#s11 .footer-icon{height:24px;}
#s11 h2{font-size:18px;}
#s11 p{font-size:12px;margin-bottom:8px}
#s11 .col {padding-left:40px;padding-right:40px;}}









.windows-logo{
    height: 32px !important;
    position: absolute !important;
    top: 30px !important;
    right: 8px !important;
}

.windows-logo img{
    height: 32px !important;
    width: auto;
    max-width: none;
}
@media (max-width: 991.98px){
    .windows-logo{
        height: 32px !important;
        right: 0;
        top: 23px !important;
    }
    
    .windows-logo img{
        height: 32px !important;
        width: auto;
        max-width: none;
    }
}