@charset "UTF-8";


/* =====  ===== */

#special-edu-dx{}{position:relative;overflow:hidden;}

#special-edu-dx .br-sp{display:none;}

#special-edu-dx-header{}
#special-edu-dx-header .section-base{}
#special-edu-dx-header .section-frame{padding:10px;}
#special-edu-dx-header .section-main{text-align:center;}
#special-edu-dx-header .section-main .logo{width:200px;margin:0px auto;}
#special-edu-dx-header .section-main .logo img{width:100%;height:auto;}


@media screen and (max-width:1440px){}
@media screen and (max-width:1200px){}
@media screen and (max-width:960px){}
@media screen and (max-width:768px){
#special-edu-dx .br-sp{display:block;}
}
@media screen and (max-width:640px){}
@media screen and (max-width:480px){}




/* =====  ===== */

#special-edu-dx-footer{}
#special-edu-dx-footer .section-base{}
#special-edu-dx-footer .section-frame{padding:60px 10px;}
#special-edu-dx-footer .section-main{text-align:center;}
#special-edu-dx-footer .section-main .logo{width:200px;margin:0px auto;}
#special-edu-dx-footer .section-main .logo img{width:100%;height:auto;}
#special-edu-dx-footer .section-main .copyright{margin-top:30px;font-size:80%;}


@media screen and (max-width:1440px){}
@media screen and (max-width:1200px){}
@media screen and (max-width:960px){}
@media screen and (max-width:768px){}
@media screen and (max-width:640px){}
@media screen and (max-width:480px){}




/* =====  ===== */

#special-edu-dx-signboard{
background:
url("/special/edu-dx/assets/img/signboard-image01.png") left calc(50% - 960px) bottom no-repeat,
url("/special/edu-dx/assets/img/signboard-image02.png") left calc(50% + 720px) bottom no-repeat;
overflow:hidden;
}
#special-edu-dx-signboard .section-base{width:1440px;margin:0px auto;}
#special-edu-dx-signboard .section-frame{padding:120px 30px 360px 30px;}
#special-edu-dx-signboard .section-main{text-align:center;}
#special-edu-dx-signboard .section-main .title-sub{margin-bottom:15px;color:#4751A1;font-size:250%;font-weight:500;}
#special-edu-dx-signboard .section-main .title{margin-bottom:60px;color:#4751A1;font-size:600%;font-weight:700;}
#special-edu-dx-signboard .section-main .cnt{width:720px;margin:0px auto;line-height:150%;text-align:justify;}
#special-edu-dx-signboard .section-image{display:none;}
#special-edu-dx-signboard .section-image img{display:block;width:100%;height:auto;}

@media screen and (max-width:1440px){
#special-edu-dx-signboard{background:none;}
#special-edu-dx-signboard .section-base{width:auto;}
#special-edu-dx-signboard .section-main .title-sub{font-size:200%;}
#special-edu-dx-signboard .section-main .title{font-size:500%;}
}
@media screen and (max-width:1200px){}
@media screen and (max-width:960px){
#special-edu-dx-signboard .section-frame{padding:120px 30px;}
#special-edu-dx-signboard .section-main .title{margin-bottom:30px;font-size:400%;}
#special-edu-dx-signboard .section-main .cnt{width:100%;}
}
@media screen and (max-width:768px){
#special-edu-dx-signboard .section-frame{padding:90px 20px 30px 20px;}
#special-edu-dx-signboard .section-main .title-sub{font-size:150%;}
#special-edu-dx-signboard .section-main .title{font-size:300%;}
#special-edu-dx-signboard .section-image{display:block;}
}
@media screen and (max-width:640px){}
@media screen and (max-width:480px){}




/* =====  ===== */

#special-edu-dx-intro{
margin-top:-240px;
background:url("/special/edu-dx/assets/img/intro-bg.jpg") repeat-x center bottom;
overflow:hidden;
}
#special-edu-dx-intro .section-base{width:1440px;margin:0px auto;}
#special-edu-dx-intro .section-frame{padding:0px 30px 90px 30px;}
#special-edu-dx-intro .section-main{display:flex;}
#special-edu-dx-intro .section-main .item{width:33.33%;}
#special-edu-dx-intro .section-main .item-base{margin:0px 40px;}
#special-edu-dx-intro .section-main .item-frame{}
#special-edu-dx-intro .section-main .item-main{text-align:center;}
#special-edu-dx-intro .section-main .item-main .free{margin-bottom:15px;font-size:150%;font-weight:500;}
#special-edu-dx-intro .section-main .item-main .free span{display:inline-block;margin-left:5px;padding:5px;background:#000;color:#fff;}
#special-edu-dx-intro .section-main .item-main .thumb{margin-bottom:30px;}
#special-edu-dx-intro .section-main .item-main .thumb img{width:100%;height:auto;}
#special-edu-dx-intro .section-main .item-main .label-sub{margin-bottom:10px;font-size:125%;font-weight:500;}
#special-edu-dx-intro .section-main .item-main .label{margin-bottom:30px;color:#4751A1;font-size:150%;font-weight:500;}
#special-edu-dx-intro .section-main .item-main .btn{}
#special-edu-dx-intro .section-main .item-main .btn a{display:inline-block;padding:10px 40px;background:#4751A1;border-radius:30px;color:#fff;font-size:125%;font-weight:500;line-height:100%;text-decoration:none;box-shadow:3px 3px 6px 0px rgba(0, 0, 0, 0.2);}
#special-edu-dx-intro .section-main .item-main .btn a:hover{background:#636ECE;}


@media screen and (max-width:1440px){
#special-edu-dx-intro .section-base{width:auto;}
#special-edu-dx-intro .section-main .item-main .free{font-size:125%;}
#special-edu-dx-intro .section-main .item-main .label-sub{font-size:100%;}
#special-edu-dx-intro .section-main .item-main .label{font-size:125%;}
#special-edu-dx-intro .section-main .item-main .btn a{font-size:100%;}
#special-edu-dx-intro .section-main .item-base{margin:0px 10px;}
}
@media screen and (max-width:1200px){}
@media screen and (max-width:960px){
#special-edu-dx-intro{margin-top:0px;background:#E4EEF7;}
#special-edu-dx-intro .section-frame{padding:30px 30px;}
#special-edu-dx-intro .section-main{display:block;}
#special-edu-dx-intro .section-main .item{width:100%;}
#special-edu-dx-intro .section-main .item:not(:last-child){margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid #ccc;}
#special-edu-dx-intro .section-main .item-base{margin:0px;}
#special-edu-dx-intro .section-main .item-main .free{font-size:100%;}
#special-edu-dx-intro .section-main .item-main .thumb{display:none;}
#special-edu-dx-intro .section-main .item-main .label-sub{margin-bottom:5px;}
#special-edu-dx-intro .section-main .item-main .label-sub{font-size:125%;}
#special-edu-dx-intro .section-main .item-main .label{margin-bottom:15px;font-size:150%;}
}
@media screen and (max-width:768px){
#special-edu-dx-intro .section-frame{padding:30px 20px;}
}
@media screen and (max-width:640px){
#special-edu-dx-intro .section-main .item-main .label{font-weight:700;}
}
@media screen and (max-width:480px){}




/* =====  ===== */

#special-edu-dx-library{overflow:hidden;}
#special-edu-dx-library .section-base{position:relative;z-index:10;width:1440px;margin:0px auto;}
#special-edu-dx-library .section-frame{padding:120px 30px 0px 30px;}
#special-edu-dx-library .section-main{}
#special-edu-dx-library .section-main .item{position:relative;}
#special-edu-dx-library .section-main .item-base{width:50%;}
#special-edu-dx-library .section-main .item-frame{}
#special-edu-dx-library .section-main .item-main{}
#special-edu-dx-library .section-main .item-main .free{margin-bottom:15px;font-size:150%;font-weight:500;}
#special-edu-dx-library .section-main .item-main .free span{display:inline-block;margin-left:5px;padding:5px;background:#000;color:#fff;}
#special-edu-dx-library .section-main .item-main .label-set{margin-bottom:30px;}
#special-edu-dx-library .section-main .item-main .label-set .label-sub{margin-bottom:10px;font-size:200%;font-weight:500;}
#special-edu-dx-library .section-main .item-main .label-set .label{color:#4751A1;font-size:300%;font-weight:500;line-height:150%;}
#special-edu-dx-library .section-main .item-main .headline{margin-bottom:15px;font-size:150%;font-weight:500;line-height:150%;}
#special-edu-dx-library .section-main .item-main .cnt{line-height:150%;text-align:justify;}
#special-edu-dx-library .section-main .item-main .btn{margin-top:30px;}
#special-edu-dx-library .section-main .item-main .btn a{display:inline-block;padding:10px 40px;background:#4751A1;border-radius:30px;color:#fff;font-size:125%;font-weight:500;line-height:100%;text-decoration:none;box-shadow:3px 3px 6px 0px rgba(0, 0, 0, 0.2);}
#special-edu-dx-library .section-main .item-main .btn a:hover{background:#636ECE;}
#special-edu-dx-library .section-main .item-main .feature{margin-top:60px;}
#special-edu-dx-library .section-main .item-main .feature ul{}
#special-edu-dx-library .section-main .item-main .feature li{}
#special-edu-dx-library .section-main .item-main .feature li:not(:last-child){padding-bottom:30px;}
#special-edu-dx-library .section-main .item-main .feature .ads{margin-bottom:15px;color:#4751A1;font-size:125%;font-weight:500;line-height:150%;}
#special-edu-dx-library .section-main .item-main .feature .cnt{line-height:150%;text-align:justify;}
#special-edu-dx-library .section-main .item-image{position:absolute;right:0;top:0;}
#special-edu-dx-library .section-main .item-image img{width:auto;height:720px;}
#special-edu-dx-library .section-sub{margin-top:60px;}
#special-edu-dx-library .section-sub .item{}
#special-edu-dx-library .section-sub .item-base{}
#special-edu-dx-library .section-sub .item-frame{}
#special-edu-dx-library .section-sub .item-main{width:55%;padding:0px 40px;}
#special-edu-dx-library .section-sub .item-main .ads{margin-bottom:15px;color:#4751A1;font-size:150%;font-weight:500;line-height:150%;}
#special-edu-dx-library .section-sub .item-main .cnt{line-height:150%;text-align:justify;}
#special-edu-dx-library .section-sub .item-sub{display:flex;width:45%;}
#special-edu-dx-library .section-sub .item-sub .image{}
#special-edu-dx-library .section-sub .item-sub .image img{width:100%;height:auto;}
#special-edu-dx-library .section-app{position:relative;margin-top:-60px;padding:120px 30px 60px 30px;background:#E4EEF7;text-align:center;}
#special-edu-dx-library .section-app .label-sub{margin-bottom:10px;font-size:150%;font-weight:500;}
#special-edu-dx-library .section-app .label{color:#4751A1;font-size:200%;font-weight:500;}
#special-edu-dx-library .section-app .btn{margin-top:30px;}
#special-edu-dx-library .section-app .btn a{display:inline-block;padding:10px 40px;background:#4751A1;border-radius:30px;color:#fff;font-size:125%;font-weight:500;line-height:100%;text-decoration:none;box-shadow:3px 3px 6px 0px rgba(0, 0, 0, 0.2);}
#special-edu-dx-library .section-app .btn a:hover{background:#636ECE;}


#special-edu-dx-library01 .item-frame{display:flex;align-items:center;}
#special-edu-dx-library02 .item-frame{display:flex;flex-direction:row-reverse;align-items:center;margin-top:-60px;}
#special-edu-dx-library03 .item-frame{display:flex;align-items:center;margin-top:-60px;}
#special-edu-dx-library04 .item-frame{display:flex;flex-direction:row-reverse;align-items:center;margin-top:-60px;}


@media screen and (max-width:1440px){
#special-edu-dx-library .section-base{width:auto;}
#special-edu-dx-library .section-main .item-main .free{font-size:125%;}
#special-edu-dx-library .section-main .item-main .label-set .label-sub{font-size:150%;}
#special-edu-dx-library .section-main .item-main .label-set .label{font-size:200%;}
#special-edu-dx-library .section-main .item-main .headline{font-size:125%;}
#special-edu-dx-library .section-main .item-main .btn a{font-size:100%;}
#special-edu-dx-library .section-main .item-main .feature .ads{font-size:100%;}
#special-edu-dx-library .section-sub .item-main .ads{font-size:125%;}
#special-edu-dx-library .section-app .label-sub{font-size:125%;}
#special-edu-dx-library .section-app .label{font-size:150%;}
#special-edu-dx-library02 .item-frame{margin-top:0px;}
#special-edu-dx-library03 .item-frame{margin-top:0px;}
#special-edu-dx-library04 .item-frame{margin-top:0px;}
}
@media screen and (max-width:1200px){}
@media screen and (max-width:960px){

#special-edu-dx-library .section-main .item-base{width:100%;}
#special-edu-dx-library .section-main .item-image{position:relative;right:unset;top:unset;width:60%;margin:30px auto 0px auto;}
#special-edu-dx-library .section-main .item-image img{width:100%;height:auto;}
#special-edu-dx-library .section-sub .item:not(:last-child){margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid #ccc;}
#special-edu-dx-library .section-sub .item-main{width:100%;margin-bottom:30px;padding:0px;}
#special-edu-dx-library .section-sub .item-sub{width:80%;margin:0px auto;}
#special-edu-dx-library01 .item-frame{display:block;}
#special-edu-dx-library02 .item-frame{display:block;}
#special-edu-dx-library03 .item-frame{display:block;}
#special-edu-dx-library04 .item-frame{display:block;}
}
@media screen and (max-width:768px){
#special-edu-dx-library .section-frame{padding:90px 20px 0px 20px;}
#special-edu-dx-library .section-main .item-main .free{font-size:100%;}
#special-edu-dx-library .section-main .item-main .label-set .label-sub{font-size:125%;}
#special-edu-dx-library .section-main .item-main .label-set .label{font-size:200%;}
#special-edu-dx-library .section-sub .item-sub{width:100%;}
#special-edu-dx-library .section-main .item-main .label-set .label{font-weight:700;}
#special-edu-dx-library .section-app .label{font-weight:700;}
}
@media screen and (max-width:640px){}
@media screen and (max-width:480px){}




/* =====  ===== */

#special-edu-dx-cbt{overflow:hidden;}
#special-edu-dx-cbt .section-base{width:1440px;margin:0px auto;}
#special-edu-dx-cbt .section-frame{padding:120px 30px 0px 30px;}
#special-edu-dx-cbt .section-main{}
#special-edu-dx-cbt .section-main .item{position:relative;}
#special-edu-dx-cbt .section-main .item-image{position:absolute;left:55%;top:0;}
#special-edu-dx-cbt .section-main .item-image img{width:auto;height:420px;}
#special-edu-dx-cbt .section-main .item-base{width:50%;}
#special-edu-dx-cbt .section-main .item-frame{}
#special-edu-dx-cbt .section-main .item-main{}
#special-edu-dx-cbt .section-main .item-main .free{margin-bottom:15px;font-size:150%;font-weight:500;}
#special-edu-dx-cbt .section-main .item-main .free span{display:inline-block;margin-left:5px;padding:5px;background:#000;color:#fff;}
#special-edu-dx-cbt .section-main .item-main .label-set{margin-bottom:30px;}
#special-edu-dx-cbt .section-main .item-main .label-set .label-sub{margin-bottom:10px;font-size:200%;font-weight:500;}
#special-edu-dx-cbt .section-main .item-main .label-set .label{color:#4751A1;font-size:300%;font-weight:500;line-height:150%;}
#special-edu-dx-cbt .section-main .item-main .list{}
#special-edu-dx-cbt .section-main .item-main .list ul{}
#special-edu-dx-cbt .section-main .item-main .list li{padding:10px 0px 10px 40px;background:url("/special/edu-dx/assets/img/icon-check.svg") no-repeat left center;font-size:125%;font-weight:500;line-height:130%;}
#special-edu-dx-cbt .section-main .btn{margin-top:30px;}
#special-edu-dx-cbt .section-main .btn a{display:inline-block;padding:10px 40px;background:#4751A1;border-radius:30px;color:#fff;font-size:125%;font-weight:500;line-height:100%;text-decoration:none;box-shadow:3px 3px 6px 0px rgba(0, 0, 0, 0.2);}
#special-edu-dx-cbt .section-main .btn a:hover{background:#636ECE;}
#special-edu-dx-cbt .section-sub{margin-top:120px;}
#special-edu-dx-cbt .section-sub .image{position:relative;z-index:100;text-align:center;}
#special-edu-dx-cbt .section-sub .image img{width:100%;height:auto;}
#special-edu-dx-cbt .section-app{position:relative;margin-top:-60px;padding:120px 30px 60px 30px;background:#E4EEF7;text-align:center;}
#special-edu-dx-cbt .section-app .label-sub{margin-bottom:10px;font-size:150%;font-weight:500;}
#special-edu-dx-cbt .section-app .label{color:#4751A1;font-size:200%;font-weight:500;}
#special-edu-dx-cbt .section-app .btn{margin-top:30px;}
#special-edu-dx-cbt .section-app .btn a{display:inline-block;padding:10px 40px;background:#4751A1;border-radius:30px;color:#fff;font-size:125%;font-weight:500;line-height:100%;text-decoration:none;box-shadow:3px 3px 6px 0px rgba(0, 0, 0, 0.2);}
#special-edu-dx-cbt .section-app .btn a:hover{background:#636ECE;}


@media screen and (max-width:1440px){
#special-edu-dx-cbt .section-base{width:auto;}
#special-edu-dx-cbt .section-main .item-main .free{font-size:125%;}
#special-edu-dx-cbt .section-main .item-main .label-set .label-sub{font-size:150%;}
#special-edu-dx-cbt .section-main .item-main .label-set .label{font-size:250%;}
#special-edu-dx-cbt .section-main .item-main .list li{font-size:100%;}
#special-edu-dx-cbt .section-main .item-main .btn a{font-size:100%;}
#special-edu-dx-cbt .section-app .label-sub{font-size:125%;}
#special-edu-dx-cbt .section-app .label{font-size:150%;}
}
@media screen and (max-width:1200px){}
@media screen and (max-width:960px){
#special-edu-dx-cbt .section-frame{padding:60px 30px 0px 30px;}
#special-edu-dx-cbt .section-main .item-image{position:relative;left:unset;top:unset;width:100%;margin-bottom:60px;}
#special-edu-dx-cbt .section-main .item-image img{width:100%;height:auto;}
#special-edu-dx-cbt .section-main .item-base{width:100%;}
#special-edu-dx-cbt .section-sub{margin-top:60px;}
}
@media screen and (max-width:768px){
#special-edu-dx-cbt .section-frame{padding:60px 20px 0px 20px;}
#special-edu-dx-cbt .section-main .item-main .free{font-size:100%;}
#special-edu-dx-cbt .section-main .item-main .label-set .label-sub{font-size:125%;}
#special-edu-dx-cbt .section-main .item-main .label-set .label{font-size:200%;}
#special-edu-dx-cbt .section-main .item-main .label-set .label{font-weight:700;}
#special-edu-dx-cbt .section-app .label{font-weight:700;}
}
@media screen and (max-width:640px){}
@media screen and (max-width:480px){}




/* =====  ===== */

#special-edu-dx-offline-playback{overflow:hidden;}
#special-edu-dx-offline-playback .section-base{width:1440px;margin:0px auto;}
#special-edu-dx-offline-playback .section-frame{padding:120px 30px 0px 30px;}
#special-edu-dx-offline-playback .section-main{}
#special-edu-dx-offline-playback .section-main .item{position:relative;}
#special-edu-dx-offline-playback .section-main .item-image{position:absolute;left:55%;top:0;}
#special-edu-dx-offline-playback .section-main .item-image img{width:auto;height:420px;}
#special-edu-dx-offline-playback .section-main .item-base{width:50%;}
#special-edu-dx-offline-playback .section-main .item-frame{}
#special-edu-dx-offline-playback .section-main .item-main{}
#special-edu-dx-offline-playback .section-main .item-main .free{margin-bottom:15px;font-size:150%;font-weight:500;}
#special-edu-dx-offline-playback .section-main .item-main .free span{display:inline-block;margin-left:5px;padding:5px;background:#000;color:#fff;}
#special-edu-dx-offline-playback .section-main .item-main .label-set{margin-bottom:30px;}
#special-edu-dx-offline-playback .section-main .item-main .label-set .label-sub{margin-bottom:10px;font-size:200%;font-weight:500;}
#special-edu-dx-offline-playback .section-main .item-main .label-set .label{color:#4751A1;font-size:300%;font-weight:500;line-height:150%;}
#special-edu-dx-offline-playback .section-main .item-main .label-set .icon{}
#special-edu-dx-offline-playback .section-main .item-main .cnt{margin-bottom:15px;line-height:150%;text-align:justify;}
#special-edu-dx-offline-playback .section-main .item-main .list{}
#special-edu-dx-offline-playback .section-main .item-main .list ul{}
#special-edu-dx-offline-playback .section-main .item-main .list li{padding:10px 0px 10px 40px;background:url("/special/edu-dx/assets/img/icon-check.svg") no-repeat left center;font-size:125%;font-weight:500;line-height:130%;}
#special-edu-dx-offline-playback .section-main .btn{margin-top:30px;}
#special-edu-dx-offline-playback .section-main .btn a{display:inline-block;padding:10px 40px;background:#4751A1;border-radius:30px;color:#fff;font-size:125%;font-weight:500;line-height:100%;text-decoration:none;box-shadow:3px 3px 6px 0px rgba(0, 0, 0, 0.2);}
#special-edu-dx-offline-playback .section-main .btn a:hover{background:#636ECE;}
#special-edu-dx-offline-playback .section-sub{margin-top:60px;display:flex;justify-content:center;}
#special-edu-dx-offline-playback .section-sub .image{position:relative;z-index:100;}
#special-edu-dx-offline-playback .section-app{position:relative;margin-top:-60px;padding:120px 30px 60px 30px;background:#E4EEF7;text-align:center;}
#special-edu-dx-offline-playback .section-app .label-sub{margin-bottom:10px;font-size:150%;font-weight:500;}
#special-edu-dx-offline-playback .section-app .label{color:#4751A1;font-size:200%;font-weight:500;}
#special-edu-dx-offline-playback .section-app .btn{margin-top:30px;}
#special-edu-dx-offline-playback .section-app .btn a{display:inline-block;padding:10px 40px;background:#4751A1;border-radius:30px;color:#fff;font-size:125%;font-weight:500;line-height:100%;text-decoration:none;box-shadow:3px 3px 6px 0px rgba(0, 0, 0, 0.2);}
#special-edu-dx-offline-playback .section-app .btn a:hover{background:#636ECE;}

@media screen and (max-width:1440px){
#special-edu-dx-offline-playback .section-base{width:auto;}
#special-edu-dx-offline-playback .section-main .item-main .free{font-size:125%;}
#special-edu-dx-offline-playback .section-main .item-main .label-set .label-sub{font-size:150%;}
#special-edu-dx-offline-playback .section-main .item-main .label-set .label{font-size:250%;}
#special-edu-dx-offline-playback .section-main .item-main .list li{font-size:100%;}
#special-edu-dx-offline-playback .section-main .item-main .btn a{font-size:100%;}
#special-edu-dx-offline-playback .section-app .label-sub{font-size:125%;}
#special-edu-dx-offline-playback .section-app .label{font-size:150%;}
}
@media screen and (max-width:1200px){}
@media screen and (max-width:960px){
#special-edu-dx-offline-playback .section-frame{padding:60px 30px 0px 30px;}
#special-edu-dx-offline-playback .section-main .item-image{position:relative;left:unset;top:unset;width:100%;margin-bottom:60px;}
#special-edu-dx-offline-playback .section-main .item-image img{width:100%;height:auto;}
#special-edu-dx-offline-playback .section-main .item-base{width:100%;}
#special-edu-dx-offline-playback .section-sub{margin-top:60px;}
#special-edu-dx-offline-playback .section-sub .image img{width:100%;height:auto;}
}
@media screen and (max-width:768px){
#special-edu-dx-offline-playback .section-frame{padding:60px 20px 0px 20px;}
#special-edu-dx-offline-playback .section-main .item-main .free{font-size:100%;}
#special-edu-dx-offline-playback .section-main .item-main .label-set .label-sub{font-size:125%;}
#special-edu-dx-offline-playback .section-main .item-main .label-set .label{font-size:200%;}
#special-edu-dx-offline-playback .section-main .item-main .label-set .label{font-weight:700;}
#special-edu-dx-offline-playback .section-app .label{font-weight:700;}
}
@media screen and (max-width:640px){}
@media screen and (max-width:480px){}




/* =====  ===== */



@media screen and (max-width:1440px){}
@media screen and (max-width:1200px){}
@media screen and (max-width:960px){}
@media screen and (max-width:768px){}
@media screen and (max-width:640px){}
@media screen and (max-width:480px){}