<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.common_left_type .cont_right {display: block; width: 100%; height: auto; float: none;}
.common_left_type .cont_left {display: block; width: 100%; height: auto; float: none;}


.character_sub_box {display: block; float: left; width: 100%; height: auto; padding: 24px; border: 1px solid #ddd;}

.h4_butt {display: block; width: 100%; height: auto; font-weight: bold; text-align: center;}
.h4_butt::before {display: none;}

.img_left_box .text {display: block; width: 50%; height: auto; position: relative; }
.img_left_box .text h4 {display: block; width: 100%; text-align:left; font-size: 40px; margin-top:40px; margin-bottom:20px}
.img_left_box .text h4 strong {color: #005000;}
.img_left_box .text ul li.ch_box {padding: 0; margin-bottom: 10px; background-color: transparent;}
.img_left_box .text ul li.ch_box_2 {color: #005000; font-weight: bold;}
.img_left_box img {width: auto; max-width: 90%; height: auto;}

.ui_btn_download { padding: 0; margin: 0; height: 135px; text-align: center;}
.ui_btn_download .ui_down_wrap {display: inline-block; width: auto; height: auto; position: static; right: auto; margin: 0 auto;}
a.btn_download {display: inline-block; font-size:18px; width: 260px; height: 54px; margin: 0 auto; padding: 6px 24px 6px 12px; background-color:#59bdec; border: 1px solid #212121; color: #212121; line-height: 40px;margin-bottom: 15px;}
a.btn_download::before { width: 40px; height: 40px; background: url(../img/sub/icon_download_wh_new.png) no-repeat center; background-size: contain;}
a.btn_download:hover {color: #fff; background-color: #333;}
a.btn_download:hover::before { width: 40px; height: 40px; background: url(../img/sub/icon_download_wh_new_hover.png) no-repeat center; background-size: contain;}
a.btn_download:last-child{margin-bottom:0px;}

.img_box {display: block; width: 100%; height: auto; margin: 0 auto; text-align: center; position: relative;}
.img_box img {display: block; width: auto; height: auto; object-fit: cover; margin: 0 auto;}

.ch_text_info {display: block; width: 100%; height: auto; text-align:left; font-size:20px}
.ch_text_info li {display: block; }
.ch_text_info li:first-child {margin-left: 0;}

.ch_text_info_2 {display: block; text-align:left; margin:25px 0 0 5px }


.ch_list {display: flex; width: 100%; height: auto; flex-wrap: wrap; justify-content: flex-start;}
.ch_list li {flex: 0 1 auto; width: calc(100% / 5)!important; margin: 0!important; position: relative; padding: 10px 0 30px; margin-bottom: 20px!important;}
.ch_list li img {width: auto; height: auto; object-fit: cover; margin: 0 auto;}
.ch_list li span {position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0);}

.img_box_align {float: left; width: 100%; padding: 40px 20px; border: 2px #ccc solid; margin-bottom: 30px;display: flex;align-items: center;}
.main_img_box { float: left; margin: 0 10%; width:334px; height: auto; text-align: center; position: relative;}
.bg4{background: url(../img/sub/course4_bg.jpg) no-repeat top right;}
.main_character_ani {}
.main_character_ani_e_1,
.main_character_ani_e_2,
.main_character_ani_e_3,
.main_character_ani_e_4 {position: absolute; transform: translate(-50%,-50%); opacity: 0;
  animation-name: main_char_ani_e;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.main_character_ani_e_1 {left: calc(50% - 47%); top: calc(50% - 38%);
  animation-duration: 2s;
  animation-delay: 0s;
}
.main_character_ani_e_2 {right: calc(50% - 53%); top: calc(50% + 29%);
  animation-duration: 2s;
  animation-delay: 1s;
}
.main_character_ani_e_3 {right: calc(50% - 64%); top: calc(50% - 15%);
  animation-duration: 2s;
  animation-delay: 0s;
}
.main_character_ani_e_4 {left: calc(50% - 43%); top: calc(50% + 20%);
  animation-duration: 2s;
  animation-delay: 0s;
}

.img_ani_box {display: block; width: 100%; height: auto; text-align: center; margin: 50px 0 20px 0;}
.img_ani_box li {display: inline-block; width: auto!important; margin: 0!important; margin-left: 20px!important; padding: 0;}
.img_ani_box li:first-child {margin-left: 0!important;}
.img_ani_box li img {
  animation-name: char_ani;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.img_ani_box li:nth-child(1) img {
  animation-delay: 1s;
}
.img_ani_box li:nth-child(2) img {
  animation-delay: 0s;
}
.img_ani_box li:nth-child(3) img {
  animation-delay: 1s;
}

@keyframes main_char_ani_e {
  0% {opacity: 0;}
  47% {opacity: 0;}
  48% {opacity: 1;}
  55% {opacity: 1;}
  56% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes char_ani {
  0% {
    transform: translate3d(0,0,0) scale3d(1,1,1);
  }
  50% {
    transform: translate3d(0,2%,0) scale3d(1,0.95,1);
  }
  100% {
    transform: translate3d(0,0,0) scale3d(1,1,1);
  }
}

@media screen and (max-width: 1200px) {
  .ch_list li {flex: 0 1 auto; width: calc(100% / 4)!important;}
  .main_img_box { float: left; margin: 0 3%;}
  .img_left_box .text{width:54%}
  .img_left_box img { max-width: 85%;}
}


@media screen and (max-width: 950px) {
  .ch_list li {flex: 0 1 auto; width: calc(100% / 4)!important;}
  .main_img_box { float: left; margin: 0 12%;}
  .img_left_box .text{width:100%}
  .img_left_box img { max-width: 80%;}
  .img_box_align{display:inherit;text-align: center;margin: 0 auto;}
  .main_img_box{text-align: center;margin: 0 auto;float: initial;}
   .bg4{background:none}
}

@media screen and (max-width: 800px) {
  .img_ani_box {display: flex; width: 100%;}
  .img_ani_box li {flex: 1 1 auto; width: calc(100% / 3)!important; margin: 0!important;}
  .img_ani_box li img {width: 100%;}
  .ch_list li {flex: 0 1 auto; width: calc(100% / 3)!important;}

}
@media screen and (max-width: 618px) {
  .img_left_box .text ul li.ch_box_2 {display: block; width: 100%; margin: 0 0 10px 0; text-align: left;}
  .img_left_box .text p {text-align: left;}
}
@media screen and (max-width: 600px) {
  .ch_list li {flex: 0 1 auto; width: calc(100% / 2)!important;}
}
@media screen and (max-width: 500px) {
  .main_character_ani_e_1,
  .main_character_ani_e_2,
  .main_character_ani_e_3,
  .main_character_ani_e_4 {display: none;}
  .main_img_box { margin: 0 auto; width:100%}
  .img_left_box img {
    width: auto;
    max-width: 80%;}
 .img_left_box .text{padding:40px 0 0 0 }
 .img_left_box .text h4{text-align:center; font-size:4rem}
  a.btn_download {display:block;font-size:14px; margin-top: 10px;} 
  .img_left_box .text{width:100%}
  a.btn_download{display:block; width:100%;}
}
@media screen and (max-width: 500px) {
  .ch_list li {flex: 0 1 auto; width: 100%!important;}
  .img_left_box .text{width:100%}
}</pre></body></html>