/**/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');

.bgaot{ background-color:#c7e2f3 ;}
.bg-ft{background-color: #152c5e;}
.tha{font-family: 'Kanit', sans-serif;}
.ftz25{font-size:25px;}
.cb02{color:#82c3eb}
.cb03{color:#152c5e;}
.cb04{color:#FFFFFF;}


.br1{border-right: 2px solid #f1f1f1;}
.pdr01{ padding-right: 8px; padding-left:10px;}
.pdr02{ padding:0px 20px 0px 10px;}
.pdr03{ padding-bottom: 15px;}
.pdr04{ padding: 0px !important;}
.pdr05{ padding:10px 0px 10px 0px ;}
.pdr06{ padding-bottom: 50px;}
.pdr07{ padding-top:10px;}
.pdr15{ padding-top:40px;}
.pdr16{ padding-left:0.75rem !important;}
.pdr08{padding: 10px 10px 20px 10px;}
.bor3{border-bottom: 2px solid #152c5e;;}
.aqit01{font-size: 15px; line-height: 15px !important;}

.pdr09{padding: 10px 10px 13px 10px;}
.pd-g{margin-left:0.75rem !important; margin-right:0.75rem; }



.aqi-excellent{color: #51aeed;}
.aqi-good{color: #8edd63;}
.aqi-moderrate{color: #fde53a;}
.aqi-unhealthy{color: #fe853c;}
.aqi-bad{color: #f0312c;}

.tz25{font-size:25px;}
.tz20{font-size:20px;}
.tz18{font-size:18px;}
.tz15{font-size:15px;}
.lh15{line-height:15px;}
.lh18{line-height:18px;}
.lh19{line-height:19px;}
.lh20{line-height:20px;}
.lh22{line-height:22px;}

.fw500{font-weight: 500;}
.fw700{font-weight: 700;}
.fw900{font-weight: 300;}


.bg-report{background-color: #61a8e5}
.bga{background-color: #509bdc;}
.bg05{background-color:#244896;}
.bg-excellent{background-color: #51aeed;}
.bg-good{background-color: #72fc60;}
.bg-moderrate{background-color: #fde53a;}
.bg-unhealthy{background-color: #fe853c;}
.bg-bad{background-color: #f0312c;}
.p-5t2{ padding: 0px 30px 30px 40px;}
.p-5t3{ padding: 0px 30px 0px 40px;}
a.st{ text-decoration: none;}

a.btna01, a.btna01C{border: 1px solid #152c5e; border-radius:50px; padding: 4px 20px 6px 20px; font-size:16px; font-weight: 700; 
width:90px !important; text-decoration: none; display: inline-block;  text-align: center;  margin: 15px 5px 15px 5px  ;}
a.btna01{background-color:#FFFFFF; color: #152c5e;  }
a.btna01C{background-color:#152c5e; color: #FFFFFF; }
a.btna01C:hover, a.btna01:hover {background-color:#152c5e; color: #FFFFFF; }
.h01{height: 55em;}

.cb01{color:#244896;}
.txtb01{ color: #152c5e; font-size:15px; font-weight: 600; text-transform: uppercase; padding-top: 20px; padding-left: 0px; line-height:16px;}
.nav-to2{display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;}
.in-left{ background-color: #244896; border-radius: 15px; border: 1px solid #244896;}
.in-txth2{font-size:30px; font-weight: 700; text-transform: uppercase;} .in-txth2 p{ font-size: 18px; font-weight: 600;}
.p-5t{ padding: 30px 30px 10px 40px;}
.p-6t2{ padding: 40px 30px 5px 40px;}


.in-boxl{ background-color: #f7f9f8; border-radius: 0px 0px 20px 20px; margin-bottom: 15px; padding: 10px 30px 10px 30px ;}
.in-boxt{font-size: 12px; padding-left: 38px; background-image:  url("../images/icon-f05.png");  background-repeat: no-repeat;
background-position: 15px 5px;}
.nav-p {display: flex; flex-wrap: wrap;  padding-left: 0 !important; margin-bottom: 0;  list-style: none;}
.nav-p li{padding-right: 5px;;}
.fl-l{ float: left;}
.fl-r{ float: right;}

.aqi-icc{ clear: both;  }
.aqi-icc-box{ background-color:#c7e2f3; margin: 0px 0px 15px 0px; border-radius: 15px;}
.nav-icc{ width: 100% ;display: block; flex-wrap: wrap;  padding-left: 0 !important; margin: 0 0 0 0;  list-style: none;
text-transform: uppercase; text-align: left; }
.nav-icn{ text-align: center;}

.aqi-num{ font-size: 45px; letter-spacing: 1px; font-weight: 800; line-height: 45px; font-family: 'Roboto', sans-serif; padding-top: 3px;}
.aqi-txt01{ color:#000000;font-size: 23px; font-weight: 800; line-height: 30px;}
.aqi-txt02{color: #585d61; font-size: 13px; font-weight: 600;   line-height: 16px;}

.nav-nsul{display: flex; flex-wrap: wrap;  padding-left: 0 !important; margin-bottom:0;  list-style: none; width: 100%; font-family: 'Roboto', sans-serif;}
.nav-nsul li{width: 20%; color: #142d5e; padding: 0px 10px 0px 20px;} .nav-nsul p {margin-bottom:0 !important; font-size:35px; font-weight: 800;color: #00adef; line-height: 35px; 
  letter-spacing: -2px;}
.nsul-t1{ color: #142d5e; font-size:20px; font-weight: 800;}
.nsul-t2{ color: #142d5e; font-weight: 800; font-size:14px; }
.b0r03{border-right: 3px solid #5b707d;}
.b0r04{border-bottom: 3px solid #5b707d;}

.footaot{ max-width: 650px; margin: 0px auto !important; padding-top: 30px;}
.nav-foot{display: flex; flex-wrap: wrap;  padding-left: 0 !important; margin-bottom: 0;  list-style: none; font-family: 'Roboto', sans-serif; width: 100%;}
.nav-foot li{width: 50%; font-size: 15px; line-height: 15px; color: #FFFFFF;} .nav-foot li span{ padding: 5px 0px 10px 10px; }
.nav-foot li a{ color: #FFFFFF;}.nav-foot li a:hover{ color: #82c3eb;}
.nav-foot li img, .nav-foot li span{ float:left; }
.txt-footer{ font-size: 15px; line-height: 15px; color: #8dd3ed; text-align: center; text-transform: uppercase; font-weight: 600;}
.if-h{height: 54.6em;border-radius: 20px !important; border: 2px solid #252775; }
.if-h-data {height: 54.6em; border-radius: 0px 20px 20px 0px !important; }

.br-ra{border-radius: 20px; border: 2px solid #252775; margin-top: 0px;}
.br-ra-in{border-radius: 20px; border: 2px solid #252775; margin-top: 0px; padding-bottom: 50px;}
.br-ra-in2{border-radius: 20px; border: 2px solid #252775; margin-top: 20px;  padding-bottom: 30px;}
.br-radata{border-radius: 00px  20px  20px  0px;}

.txt-m{ color: #c7e2f3; background-color: #244896;
border-radius: 50px; text-transform: uppercase;  padding:10px 10px 10px 10px;
font-size: 16px;
font-weight: 700;
width:100% !important; 
text-decoration: none;
display: inline-block;
text-align: center; line-height: 16px;
margin: 15px 0px 15px 0px;}

.mat01{margin-top: 5%;}

.mos-aqi{/*width: 190px;*/ text-align: center; display: inline-table; padding: 0px 0px 0px 15px;/* background-image:  url("../images/AOT-im-04.png"); 
  background-position: center left; background-repeat: no-repeat;*/}
.inaqi img{ width: 80%;} 
 .img-ic{ width: 100%;} 

.mos{width:100px !important; height: 25px; display:block; text-align: center; padding: 0px 20px 6px 20px; font-size: 15px; font-weight: 700; color: #244896;
  border-radius: 50px; margin: 5px auto;}

.txtms{ font-size: 17px; line-height:17px !important; font-weight:600; color: #123788; display: block; height: 35px;}
.txtmm{ font-size: 17px; line-height:17px !important; font-weight:600; color: #123788; display: block; height: 35px; padding-top: 10px;}

.wicn{ max-width: 1300px;}
.co-aot, .co-aot-last { flex: 1 0 0%; padding-top: 0.75rem;  padding-bottom: 0.75rem;}
.co-aot-last{display: none;}
.co-aot{ width: 20%;} .co-aot-last { width: 0%;}

.aotm{display: block; width:50px; box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.2);
 -webkit-box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.2);
 -moz-box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.2);}
.bot01{padding:11px 8px; display: block;}
a.bt1{ background-color: #FFFFFF;} 
a.bt1A{ background-color: #f6f6f6;} 
a.bt2{ background-color: #00adef;} 
a.bt3{ background-color: #23b8f1;} 
a.bt4{ background-color: #39c0f4;} 
a.bt1:hover, a.bt1A:hover { background-color: #8d9ab6;}
a.bt2:hover, a.bt3:hover, a.bt4:hover{ background-color: #244896;}


.col-aqi { flex: 1 0 0%; padding-top:0;  padding-bottom: 0; font-family: 'Roboto', sans-serif; width: 20px;}
.t01{font-size: 19px; font-weight: 800; white-space: nowrap !important; line-height:14px;} .t01 span{ font-weight: 700; font-size: 14px; margin-left: -4px;}
.t02{font-size: 26px; font-weight: 900; padding: 8px 0px 5px 0px; white-space: nowrap !important;line-height:25px; color: #00adef; letter-spacing: 0px; font-family: 'Oswald', sans-serif;}
.t03{font-size: 14px; white-space: nowrap !important;line-height:14px; padding-bottom: 3px;}
.t04{font-size: 11px; white-space: nowrap !important;line-height:12px; font-weight:800; color: #85939f;}
.br1{border-left-width:2px; border-left-color: #5b707d ; border-left-style: solid;}
.icn-s img{width:90%;}
.mg-da{margin: 0px auto 20px auto;}


.col25{width:20%; display: block; float: left;}
.col25img{width: 100px;}

.infot{ padding: 15px 15px 18px 15px; border-radius: 0px 0px 8px 8px ; background-color: #252775;  width: 200px; margin: 0px auto 30px auto;}
.info-cont{max-width: 1200px; padding-left: 35px; padding-right: 25px; margin: 0px auto 0px auto;}
.infot2 { padding: 15px 15px 18px 15px; border-radius: 0px 0px 8px 8px; background-color: #252775;margin: 0px auto 30px auto;}
.infot3 { padding: 15px 15px 18px 15px; border-radius: 0px 0px 15px 15px; background-color: #252775;margin: 0px auto 30px auto;}


ul.info01{border-top:3px solid #5f6d8a; padding: 0px; margin: 15px 0px -5px 0px;}
ul.info01 li{border-bottom:1px dashed #5f6d8a; padding: 20px 0px 20px 0px; margin: 0px 0px 0px 0px; display: block; }
.info01-end{border-bottom:3px solid #5f6d8a !important;}

.mact{max-width:1200px; margin: 0px auto;}
.info-im{text-align: center;} .info-im img{ max-width: 120px; margin-bottom: 5px; margin-top: 15px;}
.mc01{height: 25px; display: block; border-radius:25px;  color: #FFFFFF; font-size: 15px; font-weight: bold; margin-bottom:10px;}
.inf-last{ display: none; visibility: hidden;}


.tab01{ border: 2px solid #509bdc; padding: 15px 25px; max-width:1150px; margin: 0px auto 10px auto;}

.tab01-t01{ font-size: 15px; line-height: 13px; height: 20px;}
.adv{ font-size:17px; font-weight: 700; padding-top:10px; font-family: roboto, sans-serif;}
.advth{ font-size:17px; font-weight: 700; padding-top:10px; line-height: 15px;}
.imh-t{ width: 80px;}
.aqi01{width: 25px; height: 25px; border-radius: 50px; display: block; margin-top:10px;}
.aqi02{width: 18px; height: 18px; border-radius: 50px; display: block; margin-top:-3px; margin-right: 5px; }

.w50{width:50%;}
.w501{width:50%;}
.w502{width:50%;}
.wtaim{ width: 20%; text-align: left;}
.wta01{ width: 30%; padding-top: 5px; }
.wta02{ width: 15%; padding-top: 5px; }
.wta03{ width: 35%; padding-top: 5px; } 
.wta04{ font-weight: 600; font-size: 17px; padding-top: 10px;}
.wta05{ padding-top: 10px; font-size:15px; line-height: 22px;}
.bor4{border-left: 2px solid #142d5e; padding-left: 25px;}
.pdl10{padding-left: 10px;}

.txt1{ font-family: 'Kanit', sans-serif; font-size: 19px; line-height: 17px !important; color: #123788 !important; font-weight: 500;
padding-top: 25px !important;}
.txt1 span {font-size: 15px;font-weight: 400; }
.txt4{ font-family: 'Kanit', sans-serif; font-size: 13px; color: #5c6584; font-weight: 400;}
.rate1{ font-size: 16px; font-family: 'Roboto', sans-serif; line-height:15px; padding-top: 10px; font-weight:600; 
padding-bottom: 10px;} .rate1 span{ float: left; }

.tableaqi{background-color: #f8f9fa !important;} .tableaqi td tr th {background-color:#f8f9fa !important;}

.retxt{ background-color: #252775; margin: 0px auto 30px auto;  padding: 15px 15px 18px 15px;}
.report-table{width: 95%; margin-left: 10px; margin-right: 10px;}    
.bg-graph{background-color: #eaf0f5;}
.bg-retxt{background-color: #f8f9fa;}
.repa{padding-left: 15px; padding-right: 10px; padding-top:10px; padding-bottom: 10px; }
.matable{margin-top: 0px; margin-bottom: 20px;}
.ren01{ font-size:14px; line-height: 15px; color: #252775; font-weight: 700; } .ren01 span{font-size:12px;color: #646585;line-height: 13px; }
.ren02{ font-size:14px; line-height: 15px; }
.uppt{text-transform: uppercase;}
.ren03{ font-size:13px; line-height: 14px; color: #252775;  } .ren03 span{color: #646585;line-height: 13px; font-weight: 500;display: block; max-width: 300px; }



@media (min-width: 576px) {
  .footaot{ max-width: 600px; margin: 0px auto !important; padding-top: 20px;}
  .txt-m{width:100% ;}
}

@media (max-width: 576px) {
  .inaqi img{ width:80%;}  
  .co-aot{ width:50%;}
  .co-aot-last { display: block;}
  .mos{width:90px!important; height: 25px; display:block; text-align: center; padding: 0px 0px 6px 0px; font-size: 14px; font-weight: 700; color: #244896;
    border-radius: 50px; margin: 5px auto;}
  .txtms{ font-size: 14px; line-height:13px !important; font-weight:400; color: #123788; display: block; height: 25px;}
  .txtb01{padding-top: 0px; padding-left: 10px;}
  .t02{font-size: 25px; padding: 0px 0px 5px 0px; }
  .t01{font-size: 17px; font-weight: 800; white-space: nowrap !important; line-height:14px;} .t01 span{ font-weight: 700; font-size: 11px; margin-left: -2px;}

  .in-boxl { padding: 10px 25px 10px 25px; }
  .icn-s img { width: 150px;}
  .txt-footer{ font-size: 13px; line-height: 14px;  text-align: left; text-transform: uppercase; font-weight: 600;}
  .pdr09 {padding: 15px 0px 20px 0px;}
  .inf-last{ display:inline-block; visibility: visible;}
}

@media (max-width:768px) {
.info-cont{ padding-left: 25px; padding-right: 25px; }
.br-ra{ margin-top: 30px;}
.icn-s img { width: 60%;} 
.nav-icc{ width: 80% ; padding-left: 0 !important; margin: 0 auto  0 auto;   text-align: center; }
.txtms{ font-size: 12px; line-height:12px !important; font-weight:400; color: #123788; display: block; height: 35px; padding-left:15px;}
.mg-da{margin-left:15px; margin-right:15px;}
.info-im{text-align: center;} .info-im img{ max-width:80%;}
.w50{width: 100%;}
.w501{width:100%;}
.w502{width:100%;}
.bor4{border-left: 0px solid #142d5e; padding-left: 0px;}
}
@media (max-width:912px) {
  .imh-t{ width: 80%;}
  .tab01{  padding: 15px 10px; }
  .bor4{ padding-left: 15px;}
  .w501{width:60%;}
  .w502{width:40%;}
    
}
@media (max-width:1400px) {

  .mat01{margin-top: 0%;}
  .txt-m{ padding:10px 30px 10px 30px;}

  .if-h-data{height: 30.6em; }

}



.header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 1rem;
}

.header__sm-menu {
  background: #fff;
  position: absolute;
  width: 100%;
  top: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}

.header__logo-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #333;
  transition: color .3s;
}

a.tat{ color: #244896; font-size: 18px; font-weight: 500;} a.tat:hover{ color: #fff;}
.nt01{  height: 20px; border-right:2px solid #152c5e ; }

.nav-t01{ display:flex; 
  flex-wrap: wrap;
  padding: 0px 0px;
  margin-bottom: 30px; 
  list-style: none;} .nav-t01 li{ display: inline; height: 20px; padding: 0px 10px; border-right:3px solid #344f9f ; font-size: 15px; } 
  .nav-t01 li a{text-decoration: none;color: #152c5e; margin-bottom: -5px;} .nav-t01 li a:hover{color:#c7e2f3}
/*hero*/
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.nav-aqi{z-index:2; padding-top: 10px; padding-bottom: 10px;  position: relative;}

.bg-bann{ background-image: url("../images/AOT-bg-banner01.jpg"); background-repeat: no-repeat;
background-size:cover; background-position: center 0px; background-color: #c7e2f3; padding: 0; height: 700px;}
.anime-aqi{max-width:1320px; margin: 0px auto  0px auto;}
.pad-bn{padding-top: 30px;}
.ani-icc{ width: 550px; padding-right: 150px; margin-top: 100px; padding-bottom: 50px;}
.bnn-top{ margin: -210px 0 0 0; }
.logo01{ width: 200px;}
.logo02{ width: 280px;}
.bnn-in{ margin: 0 auto; max-width: 1552px;}
.mw800{ max-width:800px; margin: 25px auto 25px auto; }
a.wpbutton-wr{color: #c7e2f3;  background-color: #244896; border-radius: 30px; text-transform: uppercase;
  padding: 10px 10px 10px 10px; font-size: 16px; font-weight: 700; width: 100% !important; text-decoration: none;  display: inline-block; text-align: center; line-height: 16px;}
a.wpbutton-pr{color: #000000;  background-color: #e7e7e7; border-radius: 30px; text-transform: uppercase;
  padding: 10px 10px 10px 10px; font-size: 16px; font-weight: 700; width: 100% !important; text-decoration: none;  display: inline-block; text-align: center; line-height: 16px;}
a.wpbutton{color: #c7e2f3;  background-color: #509bdc; border-radius: 30px; text-transform: uppercase;
  padding: 10px 10px 10px 10px; font-size: 16px; font-weight: 700; width: 100% !important; text-decoration: none;  display: inline-block; text-align: center; line-height: 16px;}
a.wpbutton:hover{background-color: #244896;}

.mc{margin: 0 auto;}
.lin1{ background-color: #00adef; height: 4px; width: 95%;}
.rt01H{text-align: center; font-weight: 700;color: white ; background-color: #3398e2; border-radius: 25px; padding-top: 4px; padding-bottom: 3px; }

.rt01{ padding: 15px 10px; font-size:14px; line-height:17px;} .rt01-02 { font-weight: 400; color:  #6c6c6c; font-size:14px; line-height: 15px; }

.lind1{border-bottom: 2px dashed #252775;}
.lind2{border-bottom: 2px solid #252775;}
.aqi03 {margin-top: 7px; float: left;margin-right: 12px;}

.rt02{padding: 1rem 1.5rem; font-size:15px;}
.rt03{display: block; float: left;}
.rt04{ padding: 15px 0px; border-bottom: 2px dashed #252775; font-size:14px; line-height: 15px; } .rt04-sp { font-weight: 700; color:  #252775; width: 200px; display: table; float: left;}
.va-table {width: auto;
  padding: 3px 10px 3px 10px;
  font-weight: 700;
  font-size: 14px;
  color: #203461;
  display: inline-block;
  margin: 5px 5px;
}
.pd3{ padding: 20px 20px 20px 20px; }
.row-report{max-width: 1200px; margin: 0px auto; padding-left: 20px; padding-right: 20px;}
.col-md-4re{ width:39%; float:left; margin-left: 5px; padding-right: 5px;}
.col-md-8re{ width:59%; float:right; margin-left: 5px; padding-right: 5px;}
.col-md-8re,.col-md-4re {display:flex!important; }

.reporttable {width:92%;  }
.td01{width:30%;}
.td02{width:70%;}
.w-blue {color: #5da5ef;}
.w-red {color: #ff0000;}
.fwl {
  font-size: 11px;
  padding-right: 10px;
}

.htxtre {font-size:20px; padding:20px 20px 20px 20px ;  font-weight: 700; color: #252775;}

.row-t05re{max-width: 1200px; margin: 0px auto 15px auto; padding: 10px 20px 10px 20px;}
.rech {width: 100%} .rech td { padding-left:50px; }
.t01re { font-size: 20px; font-weight: 500; white-space: nowrap !important; line-height: 14px;}
.t02re {
  font-size: 28px;
  font-weight: 800;
  padding: 8px 0px 2px 0px;
  white-space: nowrap !important;
  line-height: 25px;
  color: #00adef;
  letter-spacing: 0px;
  font-family: 'roboto', sans-serif;
}
.t04re{font-size:15px; text-align: left; padding-left:20%;  }
.pa3{padding:0px 20px 10px 20px; }
.mosre {
  width:85px !important;

  display: block;
  text-align: center;
  padding: 0px 10px 0px 10px;
  font-size: 16px;
  font-weight: 500;
  color: #c7e2f3;
  border-radius: 50px 50px 50px 50px;
  margin: 5px 0px 5px -10px;
 background-color: #252775;
}
.br1re{
  border-left-width: 2px;
  border-left-color: #5b707d;
  border-left-style: solid;
}

.d-inline {display: inline!important;}
.row-t06re {
  max-width: 1100px;
  margin: 0px auto 15px auto;
  padding: 10px 20px 10px 20px;
}
.btn-sub{ padding: 4px 0px; margin: 40px auto 10px auto; min-width:150px;border-radius: 30px;
  background-color: #252775; color: #FFFFFF; border: 2px solid #252775;}
  .btn-sub:hover{background-color:#ebedee ; color: #252775; border: 2px solid #252775;}
.lable-aqi{border-radius: 30px;  border: 2px solid #252775;}

.form-control {  border: 2px solid #252775!important; border-radius: 30px;background-color: #eaf0f5; margin-top: 10px; margin-bottom: 0px;}
.pw-06{padding-right:5px;}

.inf1{background-color: #61a8e5; height:5px;   border-right: 1px solid #fff;}
.inf2{background-color:  #3d6cd0; height:5px;  border-left: 1px solid #fff;}
.ro01-l{ border-radius: 30px 0px 0px 30px;}
.ro01-r{ border-radius: 0px 30px 30px 0px; }

.inf1, .inf2{ font-size:15px; color: #05032f; text-align: center;}

.w-1100{max-width:1050px; margin: 30px auto 0px auto ;}
.tr01{border-right:2px solid #FFFFFF;}
.ta-ret td {padding-left: 5%;}
.md01{margin: 0px 0px 0px 0px;}
@media (max-width: 1200px) {
  .anime-aqi { max-width: 1000px;}
  .ani-icc{ width: 400px; padding-right: 100px; margin-top: 80px; padding-bottom: 50px;}
  .bnn-top{ margin: -180px 0 0 0; padding-left: -15px; padding-right: -15px; }

  
  .bg-bann{ background-image: url("../images/AOT-bg-banner02.jpg"); background-repeat: no-repeat;
    background-size:cover; background-position: center 50px; background-color: #c7e2f3; height: 500px;}
}

@media (max-width: 912px) {
.col-md-4re {width:99%; margin:0px auto 25px auto; float: none; }
	.col-md-8re {width:99%;margin:0px auto 0px auto;float: none; }
	.reporttable {width:99%;  }
}
@media (max-width: 768px) {
  .anime-aqi { max-width: 95%;}
  .bnn-top{ margin: -50px 0 0 0; padding-left: -15px; padding-right: -15px; }
  .ani-icc{ width: 350px; padding-right: 100px; margin-top: 100px; padding-bottom: 10px;}
  .logo01{ width: 150px;}
  .logo02{ width: 180px;}
  .bg-bann{ background-image: url("../images/AOT-bg-banner02.jpg"); background-repeat: no-repeat;
    background-size:cover; background-position: center 50px; background-color: #c7e2f3; height: 450px;}
    .btn-sub{  margin: 20px auto 10px auto; } 
    .md01{margin: 15px 0px 0px 0px;}
    .form-control {margin-bottom: 10px;}
}

/**/
.form-control-dark {
  border-color: var(--bs-gray);
}
.form-control-dark:focus {
  border-color: #fff;
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}

.text-small {
  font-size: 85%;
}

.dropdown-toggle:not(:focus) {
  outline: 0;
}

.bg-blue01{ background-color: #509bdc;}

.openBtn {
  background: #244896;
  border: none;
  padding: 5px 10px;
  font-size: 17px;
  cursor: pointer;
  border-radius: 30px;
  color: #c7e2f3;
}

.openBtn:hover {
  background: #c7e2f3;
  color: #244896;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: rgb(21,44,94,);
  background-color: rgba(21,44,94, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 55px;
  cursor: pointer;
  color: #c7e2f3;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: #c7e2f3;
  border-radius:25px 0px 0px 25px ;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: left;
  width: 10%;
  padding: 8px 9px 9px 9px;
  background: #152c5e;
  font-size: 26px;
  border: none;
  cursor: pointer;
  border-radius:0px 25px 25px 0px ;
  color: #c7e2f3;
}

.overlay button:hover {
  background: #bbb;
}


/**/
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle {
  z-index: 1500;
}


.footercontainer{ width:100%;}