/* public  */
body{
      text-align: justify;
}


table tr td{
      text-align: left;
}

.btn:hover {
      color: white;
      text-decoration: none;
}
.btn-intro{
      padding: 6px !important;
    margin-top: 3px;
    background-color: #15837e !important;
    border: 0px !important;
}
.btn-showa{
      background-color: red !important;
    color: #fff !important;
    margin-right: 20px;
}
#footer{
      background-color: #10558e;
      color: #fff;
      padding: 10px 0px;
      
}
.AccPanel ul{
      list-style-type: lower-alpha;
      color:#fff;
      padding-left:10px;
}
.AccPanel ul li a{
      padding-left: 5px;
}
#footer img{
      max-width: 86px;
}

#nextbtn{
      display: none;
}
.wrong-icon{
      display: none;
}
.wrong_note{
      display: none;
}
.right_note{
      display: none;
}

.right-icon{
      display: none;
}

#resetbtn{
      display: none;
}

.footer-msg{
      margin: auto;
text-align: right;
}

.bb1w{
      border-bottom: 1px solid #fff;
}

.maT30{
      margin-top: 30px;
}
.maT15{
      margin-top: 15px;
}
.maL40{
      margin-left: 40px;
}
.maT50{
      margin-top: 50px;
}
.maA{
      margin: auto;
}
.maB10{
      margin-bottom: 10px;
}
.header-icon1{
      margin-left: auto !important;
}

a:hover {
     
      text-decoration: none !important;
    }

.header-icons{
      text-align: center;
}
.header-icons a{
      line-height: 3;
}
.header-icons span{
      font-weight: bold;
}
.header-span0{
      color: #0e3f61;
}
.header_active{
      color: #fff;
}
.header-span1{
      color: #15837e;
}

.header-span2{
      color: #cb5447;
}
.header-span3{
      color: #4c58ce;
}
.header-span4{
      color: #cb5447;
}
.header-span5{
      color: #209e73;
}
.header-span6{
      color: #3065ce;
}
.left-menu{
      display: flex !important;
}
.header-title-info{
      font-size: 12px;
}

.df{
      display: flex;
}
.tl{
      text-align: left;
}
.tr{
      text-align: right;
}

.genres{
     height: 700px;
      overflow-y: auto;
}

.tj{
      text-align: justify;
}
.fr{
      float: right;
}
.tc{
      text-align: center;
}
.tl{
      text-align: left;
}
.b1f td{
      border: 1px solid #fff;
}



/* header-menu */

.nav-menu-div div{
	padding: 0 10px;
      margin: 0 5px;
}

@media (min-width: 576px){
      .modal-dialog {
            max-width: 700px !important;
            margin: 1.75rem auto;
          }
}
	/* 横屏 */
@media only screen and (orientation: landscape) and (max-height: 834px) {
	.pad-view {
            display: block;
      }
      .pc-view {
            display: none;
      }
      .header-logo{
            display: none;
      }
      .header-icon1{
            margin-left: unset !important;
      }
      .nav-menu-div div {
            padding: 0 10px;
            margin: 0 2px;
            
      }
      .ch3-info-title{
            font-size: 20px !important;
      
      }
      .ch2-civ-div{
            /* padding-left: 60px; */
            position: relative;
            left: 20px;
      }

     

		

}

@media (min-width: 992px){
   .col-lg-1 {
      max-width: 11.5% !important;
      }   
}





/* cover-page */
.cover-page{
      margin: 0;
      background:  url("../images/COVER_bg_02.png") no-repeat;
      background-size: 100% 100%;
      background-attachment: fixed;

}
.cover-page-title{
      /* font-family: 'Big Shoulders Display', cursive; */
      font-size: 20px;
}
.cover-page-title-info{
      font-size: 13px;
}
.cover-page-btn{
      border-radius: 50px;
      padding: 10px 25px;
      min-width: 400px;
}

.icon-0{
      color: #fff;
      background-color: #01538d;
      border-color: #01538d;
}
.icon-1{
      color: #fff;
      background-color: #2bb2ac;
      border-color: #2bb2ac;
}
.icon-2{
      color: #fff;
      background-color: #e9796d;
      border-color: #e9796d;
}
.icon-3{
      color: #fff;
      background-color: #6f7bf1;
      border-color: #6f7bf1;
}
.icon-4{
      color: #fff;
      background-color: #f5a450;
      border-color: #f5a450;
}
.icon-5{
      color: #fff;
      background-color: #3dbc91;
      border-color: #3dbc91;
}
.icon-6{
      color: #fff;
      background-color: #5186ee;
      border-color: #5186ee;
}


/* preface-page */
.prefeace-header{
      margin: 0;
      background:  url("../images/MAIN_01.png") no-repeat;
      background-size: 100% ;
      background-attachment: fixed;
     padding: 50px;
}
.coloum-1{
      background-color: #10558e;
      width: 30%;
      height: 12px;
}
.coloum-2{
      background-color: #fff;
      width: 10%;
      height: 12px;

}
.coloum-3{
      background-color: #2b8bbf;
      width: 60%;
      height: 12px;

}
.coloum-4{
      width: 100%;
      border-bottom: 5px solid #2b8bbf;
}
.coloum-5{
      background-color: #2b8bbf;
      width: 100%;
      margin: auto;
      height: 5px;
}
.pre-icons{
      text-align: right;
}
.pre-icons img{
      margin: 0px 5px;
}
.pre-btn1{
      background: url("../images/MAIN_07.png") no-repeat;
      width: 100%;
      min-height: 43px;
      /* background-position: right; */
      text-align: left;
}
.pre-btn2{
      background: url("../images/MAIN_11.png") no-repeat;
      width: 100%;
      min-height: 43px;
      /* background-position: right; */
      text-align: left;

}
.pre-btn3{
      background: url("../images/MAIN_13.png") no-repeat;
      width: 100%;
      min-height: 43px;
      /* background-position: right; */
      text-align: left;

}
.pre-btn4{
      background: url("../images/MAIN_15.png") no-repeat;
      width: 100%;
      min-height: 43px;
      /* background-position: right; */
      text-align: left;

}
.pre-btn5{
      background: url("../images/MAIN_17.png") no-repeat;
      width: 100%;
      min-height: 43px;
      /* background-position: right; */
      text-align: left;

}
.pre-btn6{
      background: url("../images/MAIN_19.png") no-repeat;
      width: 100%;
      min-height: 43px;
      /* background-position: right; */
      text-align: left;

}

.pre-title{
      color: white;
      font-size: 15px;
      font-weight: bold;
}


/* chapter1 */
.header_bg_active{
      background-color: #2bb2ac;
    border-radius: 20px;
}
.c1-top{
      background-color: #2bb2ac;
      height: 50px;
}
.c1-left{
      background-color: #dff0ef;
      color: black;
      height: 700px;
      overflow-y: auto;
}

.c1-left-answer{
      background-color: #f1c1c0;
      color: #fff;
      height: 700px;
      overflow-y: auto;
}
.btn-hide{
      color: #fffefe !important;
      background-color: #7d2726 !important;
      border-radius: 20px !important;
}


.c1-right{
      background-color: #fff;
}
.c1-left-title{
      margin: 30px 20px;
border-bottom: 2px solid;
line-height: 2;
}
.c1-left-msg{
      margin-left: 20px;
}
.c1-right{
      box-shadow:4px 4px 5px #999;
}
.activity_title{
      background-color: #15837e;
      padding: 10px 10px !important;
      border-right: 1px solid #fff;
}
.a_span{
      color: #fff ;
      padding:0px 10px;
}
.activity_left1{
      border-radius: 20px 0px 0px 20px;
}
.activity_right1{
      border-radius: 0px 20px 20px 0px;

}
.a_span_active{
      background-color: #fff;
      color:#15837e !important;
      border-radius: 15px;
      /* padding: 3px; */
}


/* chapter2 */

.btn-intro-c2{
      padding: 6px !important;
    margin-top: 3px;
    background-color: #b6563d !important;
    border: 0px !important;
}

.c2-top{
      background-color: #e18e65;
      height: 50px;
}
.c2-left{
      background-color: #ffd5c1;
      color: black;
      height: 700px;
      overflow-y: auto;
}

.c2-left-answer{
      background-color: #f1c1c0;
      color: #fff;
      height: 700px;
      overflow-y: auto;
}


.c2-right{
      background-color: #fff;
}
.c2-left-title{
      margin: 30px 20px;
border-bottom: 2px solid;
line-height: 2;
}
.c2-left-msg{
      margin-left: 20px;
}
.c2-right{
      box-shadow:4px 4px 5px #999;
}
.c2-activity_title{
      background-color: #cb5447;
      padding: 10px 5px !important;
      border-right: 1px solid #fff;
}
.a_span{
      color: #fff ;
      padding:0px 10px;
}

.c2-a_span_active{
      background-color: #fff;
      color:#cb5447;
      border-radius: 15px;
      /* padding: 3px; */
}

.c2-table-tr{
      background-color: #b6563d;
      color:#fff;
      border: 1px solid #fff;
}




/* chapter3 */

.c3-header_bg_active{
      background-color: #868fea;
    border-radius: 20px;
}
.c3-top{
      background-color: #868fea;
      height: 50px;
}
.c3-left{
      background-color: #d5d9fd;
      color: black;
      height: 700px;
      overflow-y: auto;
}
.btn-intro-c3{
      padding: 6px !important;
    margin-top: 3px;
    background-color: #4c58ce !important;
    border: 0px !important;
}
.c3-left-answer{
      background-color: #f1c1c0;
      color: #fff;
      height: 700px;
      overflow-y: auto;
}
.btn-hide{
      color: #fffefe !important;
      background-color: #7d2726 !important;
      border-radius: 20px !important;
}
.ch3-info-title{
      font-size: 24px;
      color: #fff;
      position: relative;
      top: 5px;
      margin-left: 10px;
}


.c3-right{
      background-color: #fff;
}
.c3-left-title{
      margin: 30px 20px;
border-bottom: 2px solid;
line-height: 2;
}
.c3-left-msg{
      margin-left: 20px;
}
.c3-right{
      box-shadow:4px 4px 5px #999;
}
.c3-activity_title{
      background-color: #4c58ce;
      padding: 10px 10px !important;
      border-right: 1px solid #fff;
}
.c3-a_span{
      color: #fff ;
      padding:0px 10px;
}
.c3-activity_left1{
      border-radius: 20px 0px 0px 20px;
}
.c3-activity_right1{
      border-radius: 0px 20px 20px 0px;

}
.c3-table-th{
      background-color: #4c58ce;
      color: #fff;
}
.c3-table-border{
      border: 1px solid #4c58ce;
}
.c3-a_span_active{
      background-color: #fff;
      color:#4c58ce !important;
      border-radius: 15px;
      /* padding: 3px; */
}
.c3-s-text-b{
      color: #4c58ce;
}
.c3-bg-text-y{
      background-color: #f6ff0c;
}
.c3-bg-text-b2{
      background-color: #0056b3;
      color:#fff;
}
.c3-bg-text-b3{
      background-color: #f6ff0c;
      color:black;
}

.c3-bg-text-b{
      background-color: #f6ff0c;
      color:black;
}
.c3-ai-span{
      cursor: pointer;
}
.c3-ai-underline{
      /* text-decoration:underline; */
      border-bottom: 1px solid black;
}
.c3-ai-underline2{
      /* text-decoration:underline; */
      border-bottom: 1px solid red;
}
.c3-ai-underline3{
      /* text-decoration:underline; */
      background-color: yellow;
      color: black;
}
.tj-tr tr td{
      text-align: justify;
}
.tl-tr tr td{
      text-align: left;
}
.c3-table-tr td{
      border: 1px solid #868fea;
}
.c3-table tr td{
      border: 1px solid #868fea;
}








/* chapter4 */
.c4-header_bg_active{
      background-color: #868fea;
    border-radius: 20px;
}
.c4-top{
      background-color: #f5a540;
      height: 50px;
}
.c4-left{
      background-color: #ffe3c6;
      color: black;
      height: 700px;
      overflow-y: auto;
}

.c4-left-answer{
      background-color: #f1c1c0;
      color: #fff;
      height: 700px;
      overflow-y: auto;
}

.c4-btn-intro{
      background-color: #cb5447 !important;
      color: #fff !important;
      margin-top: 5px;
      border-color: #cb5447 !important;
}

.c4-right{
      background-color: #fff;
}
.c4-left-title{
      margin: 30px 20px;
border-bottom: 2px solid;
line-height: 2;
}
.c4-left-msg{
      margin-left: 20px;
}
.c4-right{
      box-shadow:4px 4px 5px #999;
}
.c4-activity_title{
      background-color: #4c58ce;
      padding: 10px 10px !important;
      border-right: 1px solid #fff;
}
.c4-a_span{
      color: #fff ;
      padding:0px 10px;
}
.c4-activity_left1{
      border-radius: 20px 0px 0px 20px;
}
.c4-activity_right1{
      border-radius: 0px 20px 20px 0px;

}
.c4-a_span_active{
      background-color: #fff;
      color:#15837e !important;
      border-radius: 15px;
      /* padding: 3px; */
}
.c4-s-text-b{
      color: #cb5447;
}
.c4-bg-text-1{
      background-color: #f5a450;
}
.c4-bg-text-2{
      background-color: #fff6ed;
}
.c4-ai-span{
      cursor: pointer;
}
.c4-ai-underline{
      text-decoration:underline;
}
.c4-activity_title{
      background-color: #cb5447;
      padding: 10px 10px !important;
      border-right: 1px solid #fff;
}
.c4-a_span_active{
      background-color: #fff;
      color:#cb5447 !important;
      border-radius: 15px;
      /* padding: 3px; */
}
.tb-b0{
      border: 0px solid !important;
}

.c4-table-h{
      background-color: #f5a450;
      color: #fff;
}
.c4-table-td-border{
      border: 1px solid #cb5447;
}
.c4-tb-bg1{
      background-color: #f5a450;
      color: #fff;
}
.c4-tb-bg2{
      background-color: #fff6ed;
      color: #cb5447;
}






/* chapter5 */
.c5-header_bg_active{
      background-color: #868fea;
    border-radius: 20px;
}
.c5-top{
      background-color: #58cca5;
      height: 50px;
}
.c5-left{
      background-color: #d6fbee;
      color: black;
      height: 700px;
      overflow-y: auto;
}

.c5-left-answer{
      background-color: #f1c1c0;
      color: #fff;
      height: 700px;
      overflow-y: auto;
}



.c5-right{
      background-color: #fff;
}
.c5-left-title{
      margin: 30px 20px;
border-bottom: 2px solid;
line-height: 2;
}
.c5-left-msg{
      margin-left: 20px;
}
.c5-right{
      box-shadow:4px 4px 5px #999;
}
.c5-activity_title{
      background-color: #4c58ce;
      padding: 10px 10px !important;
      border-right: 1px solid #fff;
}
.c5-a_span{
      color: #fff ;
      padding:0px 10px;
}
.c5-activity_left1{
      border-radius: 20px 0px 0px 20px;
}
.c5-activity_right1{
      border-radius: 0px 20px 20px 0px;

}
.c5-a_span_active{
      background-color: #fff;
      color:#15837e !important;
      border-radius: 15px;
      /* padding: 3px; */
}
.c5-s-text-b{
      color: #209e73;
}
.c5-bg-text-1{
      background-color: #f5a450;
}
.c5-bg-text-2{
      background-color: #fff6ed;
}
.c5-ai-span{
      cursor: pointer;
}
.c5-ai-underline{
      text-decoration:underline;
}
.c5-activity_title{
      background-color: #209e73;
      padding: 10px 10px !important;
      border-right: 1px solid #fff;
}
.c5-a_span_active{
      background-color: #fff;
      color:#209e73 !important;
      border-radius: 15px;
      /* padding: 3px; */
}


.c5-table-h{
      background-color: #209e73;
      color: #fff;
}
.c5-table-td-border{
      border: 1px solid #209e73;
}





/* chapter6 */
.c6-header_bg_active{
      background-color: #868fea;
    border-radius: 20px;
}
.c6-top{
      background-color: #a7beea;
      height: 50px;
}
.c6-left{
      background-color: #f0f9fe;
      color: black;
      height: 700px;
      overflow-y: auto;
}

.c6-left-answer{
      background-color: #f1c1c0;
      color: #fff;
      height: 700px;
      overflow-y: auto;
}



.c6-right{
      background-color: #fff;
}
.c6-left-title{
      margin: 30px 20px;
border-bottom: 2px solid;
line-height: 2;
}
.c6-left-msg{
      margin-left: 20px;
}
.c6-right{
      box-shadow:4px 4px 5px #999;
}
.c6-activity_title{
      background-color: #285ca7;
      padding: 10px 10px !important;
      border-right: 1px solid #fff;
}
.c6-a_span{
      color: #fff ;
      padding:0px 10px;
}
.c6-activity_left1{
      border-radius: 20px 0px 0px 20px;
}
.c6-activity_right1{
      border-radius: 0px 20px 20px 0px;

}
.c6-a_span_active{
      background-color: #fff;
      color:#15837e !important;
      border-radius: 15px;
      /* padding: 3px; */
}
.c6-s-text-b{
      color: #209e73;
}
.c6-bg-text-1{
      background-color: #285ca7;
}
.c6-bg-text-2{
      background-color: #fff6ed;
}
.c6-ai-span{
      cursor: pointer;
}
.c6-ai-underline{
      text-decoration:underline;
}
.c6-activity_title{
      background-color: #285ca7;
      padding: 10px 10px !important;
      border-right: 1px solid #fff;
}
.c6-a_span_active{
      background-color: #fff;
      color:#285ca7 !important;
      border-radius: 15px;
      /* padding: 3px; */
}


.c6-table-h{
      background-color: #285ca7;
      color: #fff;
}
.c6-table-td-border{
      border: 1px solid #285ca7;
}

.c6-show-text-btn{
      float: right;
      background-color: #285ca7 !important;
      color: #fff !important;
      margin-top: 5px;
}

.c6-show-text-btn2{
      /* float: right; */
      background-color: #285ca7 !important;
      color: #fff !important;
      margin-top: 5px;
}
.c6-btn-intro{
      background-color: #0056b3 !important; 
      color:#fff !important;
      margin-top: 5px;
      border-color: #0056b3 !important;
}



@media screen and (orientation: portrait) {
      html {
            width: 100vmin;
            height: 100vmax;
      }

      body {
            width: 100vmin;
            height: 100vmax;
      }

      #gyroContain {
            width: 100vmax;
            height: 100vmin;
            transform-origin: top left;
            transform: rotate(90deg) translate(0, -100vmin);
      }

      #wrong-msg {
            display: block;
      }
}

@media screen and (orientation: landscape) {
      html {
            width: 100vmax;
            height: 100vmin;
      }

      body {
            width: 100vmax;
            height: 100vmin;
      }

      #gyroContain {
            width: 100vmax;
            height: 100vmin;
      }

      #wrong-msg {
            display: none;
      }
}