.course-tt {
  color: #111;
  font-weight: 300;
  text-align: center;
}
.course-ms{
  text-align: center;
  color:#111;
  font-weight: 300;
}
.course-ms span{
  font-weight: 500;
}
.styleA {
  border-bottom: 1px solid #dadada;
  display: flex;
  justify-content: center;
}
.styleA span {
  color: #111;
  line-height: 2;
  padding-left: 5.2vw;
  padding-right: 5.2vw;
  position: relative;
  letter-spacing: 1px;
}

.styleA span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.2vw;
  min-width: 30px;
  max-width: 60px;
  height: 3.2vw;
  min-height: 30px;
  max-height: 58px;
  background: url(../img/course/left.png) no-repeat center;
  background-size: contain;
}

.styleA span:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3.2vw;
  min-width: 30px;
  max-width: 60px;
  height: 3.2vw;
  min-height: 30px;
  max-height: 58px;
  background: url(../img/course/right.png) no-repeat center;
  background-size: contain;
}

.styleB {
  border-bottom: 1px solid #dadada;
}

.styleB-ms {
  color: #111;
  line-height: 2;
  letter-spacing: 1px;
  text-align: center;
  width: 67%;
  margin-left: auto;
  margin-right: auto;
}

.styleB ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.styleB ul li {
  width: calc((100% - 40px) / 2);
  margin-right: 40px;
}

.styleB ul li:nth-child(2n) {
  margin-right: 0;
}
.styleB ul li:last-child {
  margin-right: 0;
}
.styleB-img {
  width: 100%;
  height: 25.5vw;
  min-height: 210px;
  max-height: 488px;
  position: relative;
  overflow: hidden;
}

.styleB-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.styleB-img:hover img {
  transform: scale(1.05);
}

.styleB-info h4 {
  color: #111;
  font-weight: 300;
  text-align: center;
}

.styleB-info p {
  color: #111;
  text-align: center;
}

.styleC-img {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.styleC-img > img {
  width: auto;
  max-width: 84%;
  height: auto;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.styleC-img .wrap {
  position: relative;
}

.styleC-img .styleC-info {
  width: 360px;
  height: 200px;
  padding-top: 0;
  padding-bottom: 0;
 /* padding-left: 4.7vw;
  padding-right: 4.7vw;*/
  color: #fff;
  margin-right: 0;
  margin-left: auto;
  margin-top: -6.25vw;
  position: relative;
}
.styleC-img .styleC-info > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.styleC-img .styleC-info.pink {
  background: var(--pink);
}

.styleC-img .styleC-info.green {
  background: var(--green);
}

.styleC-img .styleC-info.blue {
  background: var(--blue);
}

.styleC-img .styleC-info.orange {
  background: var(--orange);
}

.styleC-img .styleC-info.red {
  background: var(--red);
}
.styleC-img .styleC-info.art {
  background: var(--art);
}
.styleC-img .styleC-info.art{
  color: #000;
}
.styleC-info .info-box {
  letter-spacing: 1px;
  position: relative;
  display: none;
}

.styleC-info .info-num {
  line-height: 1;
  font-weight: 300;
}

.styleC-info .info-ms {
  margin-top: 10px;
  position: relative;
  display: none;
}

.styleC ul {
  width: 47%;
}

.styleC ul li {
  color: #111;
  padding-left: 20px;
  line-height: 26px;
  position: relative;
}

.styleC ul li:before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.styleC ul li.pink:before {
  background: var(--pink);
}

.styleC ul li.green:before {
  background: var(--green);
}

.styleC ul li.blue:before {
  background: var(--blue);
}

.styleC ul li.orange:before {
  background: var(--orange);
}

.styleC ul li.red:before {
  background: var(--red);
}
.styleC ul li.art:before {
  background: var(--art);
}
.styleD {
  border-top: 1px solid #dadada;
}

.styleD-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.styleD-box li {
  background: #fff;
  width: 32%;
  margin-right: 2%;
  margin-bottom: 30px;
  height: auto;
  max-height: none;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
  position: relative;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.styleD-box li:nth-child(3n) {
  margin-right: 0;
}
.styleD-box li.art{
  background: var(--art);
}
.styleD1 .styleD-box li:nth-child(4) {
  width: 66%;
}

.styleD1 .styleD-box li:nth-child(5) {
  margin-right: 0;
  flex-direction: column;
}

.styleD2 .styleD-box li:nth-child(4) {
  width: 66%;
}
.styleD3 .styleD-box li:nth-child(1) {
  width: 66%;
}
.styleD3 .styleD-box li:nth-child(2) {
  margin-right: 0;
}
.styleD-box li.pink:hover {
  background: var(--pink);
}

.styleD-box li.green:hover {
  background: var(--green);
}

.styleD-box li.blue:hover {
  background: var(--blue);
}

.styleD-box li.orange:hover {
  background: var(--orange);
}

.styleD-box li.red:hover {
  background: var(--red);
}
.styleD-box li.art:hover {
  background: #111;
}
.styleD-info {
  width: 100%;
  min-height:360px;
  padding: 3vw 2.9vw;
  position: relative;
}

.styleD1 .styleD-box li:nth-child(4) .styleD-info {
  width: 50%;
  height: 100%;
}

.styleD2 .styleD-box li:nth-child(4) .styleD-info {
  width: 50%;
  height: 100%;
}
.styleD3 .styleD-box li:nth-child(1) .styleD-info {
  width: 50%;
  height: 100%;
}
.styleD3 .styleD-box li:nth-child(2) .styleD-info {
  height: 100%;
}
.styleD-info:before {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 2vw;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 13.5px 0 13.5px;
  border-color: #fff transparent transparent transparent;
  z-index: 2;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  display: none;
}
.styleD-box li.art .styleD-info:before{
  border-color: var(--art) transparent transparent transparent;
}
.styleD-info h4 {
  color: #111;
  font-weight: 300;
  margin-bottom: 20px;
}

.styleD-info p {
  color: #111;
  line-height: 1.8;
}
.styleD-box li.art .styleD-info h4 {
  color: #000;
}
.styleD-box li.art .styleD-info p {
  color: #000;
}
.styleD1 .styleD-box li:nth-child(4) .styleD-info p span {
  color: var(--color);
  padding-left: 20px;
  position: relative;
  line-height: 30px;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
}

.styleD1 .styleD-box li:nth-child(4) .styleD-info p span:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color);
}

.styleD1 .styleD-box li:nth-child(4) .styleD-info:before {
  content: "";
  position: absolute;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13.5px 0 13.5px 13px;
  border-color: transparent transparent transparent #fff;
}

.styleD1 .styleD-box li:nth-child(5) .styleD-info:before {
  content: "";
  position: absolute;
  top: auto;
  bottom: -13px;
  left: 2vw;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 13.5px 0 13.5px;
  border-color: #fff transparent transparent transparent;
}

.styleD2 .styleD-box li:nth-child(4) .styleD-info p span {
  color: var(--color);
  padding-left: 20px;
  position: relative;
  line-height: 30px;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
}

.styleD2 .styleD-box li:nth-child(4) .styleD-info p span:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color);
}

.styleD2 .styleD-box li:nth-child(4) .styleD-info:before {
  content: "";
  position: absolute;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13.5px 0 13.5px 13px;
  border-color: transparent transparent transparent #fff;
}

.styleD3 .styleD-box li:nth-child(1) .styleD-info:before {
  content: "";
  position: absolute;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13.5px 0 13.5px 13px;
  border-color: transparent transparent transparent #fff;
}
.styleD3 .styleD-box li:nth-child(2) .styleD-info:before{
  display: none;
}
.styleD-box li.pink:hover .styleD-info:before {
  border-color: var(--pink) transparent transparent transparent;
}

.styleD-box li.green:hover .styleD-info:before {
  border-color: var(--green) transparent transparent transparent;
}

.styleD1 .styleD-box li.green:nth-child(4):hover .styleD-info:before {
  border-color: transparent transparent transparent var(--green);
}

.styleD1 .styleD-box li.green:nth-child(5):hover .styleD-info:before {
  border-color: var(--green) transparent transparent transparent;
}

.styleD2 .styleD-box li.blue:nth-child(4):hover .styleD-info:before {
  border-color: transparent transparent transparent var(--blue);
}
.styleD2 .styleD-box li.red:nth-child(4):hover .styleD-info:before {
  border-color: transparent transparent transparent var(--red);
}
.styleD3 .styleD-box li.orange:nth-child(1):hover .styleD-info:before {
  border-color: transparent transparent transparent var(--orange);
}
.styleD-box li.blue:hover .styleD-info:before {
  border-color: var(--blue) transparent transparent transparent;
}

.styleD-box li.orange:hover .styleD-info:before {
  border-color: var(--orange) transparent transparent transparent;
}

.styleD-box li.red:hover .styleD-info:before {
  border-color: var(--red) transparent transparent transparent;
}
.styleD-box li.art:hover .styleD-info:before {
  border-color: #111 transparent transparent transparent;
}
.styleD-box li:hover h4 {
  color: #fff;
}

.styleD-box li:hover p {
  color: #fff;
}

.styleD-box li:hover p span {
  color: #fff !important;
}

.styleD-box li:hover p span:before {
  background: #fff !important;
}
.styleD-box li.art:hover .styleD-info h4 {
  color: var(--art);
}
.styleD-box li.art:hover .styleD-info p {
  color: var(--art);
}
.styleD-img {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.styleD1 .styleD-box li:nth-child(4) .styleD-img {
  width: 50%;
  height: 100%;
}

.styleD2 .styleD-box li:nth-child(4) .styleD-img {
  width: 50%;
  height: 100%;
}
.styleD3 .styleD-box li:nth-child(1) .styleD-img {
  width: 50%;
  height: 100%;
}
.styleD3 .styleD-box li:nth-child(2) .styleD-img{
    display: none;
}
.styleD-img img {
  width: 100%;
  height:auto;
  /*object-fit: cover;*/
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.styleD-box li:hover .styleD-img img {
  transform: scale(1.05);
}

.styleE {
  border-bottom: 1px solid #dadada;
}

.styleE-title {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #dadada;
  gap: 4vw;
}

.styleE-title li {
  position: relative;
  color: #111;
}

.styleE-title li:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0px;
  height: 2px;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.styleE-title li.pink:before {
  background: var(--pink);
}

.styleE-title li.green:before {
  background: var(--green);
}

.styleE-title li.blue:before {
  background: var(--blue);
}

.styleE-title li.orange:before {
  background: var(--orange);
}

.styleE-title li.red:before {
  background: var(--red);
}
.styleE-title li.art:before {
  background: var(--art);
}
.styleE-title li.pink.cur {
  color: var(--pink);
}

.styleE-title li.green.cur {
  color: var(--green);
}

.styleE-title li.blue.cur {
  color: var(--blue);
}

.styleE-title li.orange.cur {
  color: var(--orange);
}

.styleE-title li.red.cur {
  color: var(--red);
}
.styleE-title li.art.cur {
  color: var(--art);
}
.styleE-title li.cur::before {
  width: 100%;
}

.styleE-item {
  width: 100%;
  display: none;
  animation: fadeInUp 0.8s forwards;
}

.styleE-item.cur {
  display: block;
}

.styleE-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.styleE-box .styleE-left {
  width: 53%;
}

.styleE-li li {
  color: #111;
  padding-left: 20px;
  line-height: 26px;
  position: relative;
}

.styleE-li li span {
  font-weight: bold;
}

.styleE-li li:before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.styleE-li li.pink:before {
  background: var(--pink);
}

.styleE-li li.green:before {
  background: var(--green);
}

.styleE-li li.blue:before {
  background: var(--blue);
}

.styleE-li li.orange:before {
  background: var(--orange);
}

.styleE-li li.red:before {
  background: var(--red);
}
.styleE-li li.art:before {
  background: var(--art);
}
.styleE-box .styleE-img {
  width: 40%;
  max-width: 640px;
  position: relative;
  height: 39.6vw;
  min-height: 400px;
  max-height: 760px;
  overflow: hidden;
}

.styleE-box .styleE-img:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 47%;
  max-width: 300px;
  height: 11.25vw;
  min-height: 100px;
  max-height: 216px;
  background: url(../img/course/e-icon.png) no-repeat center;
  background-size: contain;
  z-index: 5;
  display: none;
}

.styleE-box .styleE-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.styleE-box .styleE-img:hover img {
  transform: scale(1.05);
}
.styleF-img{
  width: 100%;
  position: relative;
  height: 31.25vw;
  max-height: 600px;
  overflow: hidden;
}
.styleF-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
.styleF-img:hover img {
  transform: scale(1.05);
}
.styleF-ms{
  color: #111;
  line-height: 1.8;
}
.styleG-box{
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.styleG-box li{
  width: 32%;
  margin-right: 2%;
  background: #fff;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  padding-left: 3vw;
  padding-right: 3vw;
}
.styleG-box li:nth-child(3n){
  margin-right: 0;
}
.styleG-box li.orange:hover{
  background: var(--orange);
}
.styleG-box .styleG-info h4{
  color:#111;
  font-weight: 300;
}
.styleG-box .styleG-info p{
  color: #111;
  margin-top: 20px;
  line-height: 1.8;
}
.styleG-box li:hover h4{
  color: #fff;
}
.styleG-box li:hover p{
  color: #fff;
}
.styleH{
  border-bottom: 1px solid #dadada;
}
.styleH-img{
  width: 100%;
  position: relative;
  height: 31.25vw;
  max-height: 600px;
  overflow: hidden;
}
.styleH-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
.styleH-img:hover img {
  transform: scale(1.05);
}
.styleH ul{
  width: 100%;
  display: flex;
  flex-wrap:wrap;
}
.styleH ul li{
  width: calc(100% / 3);
  padding-left: 3vw;
  padding-right: 3vw;
  position: relative;
  color: #111;
  line-height: 30px;
  text-align: center;
}
.styleH ul li:before{
  content: "";
  position: absolute;
  left: -4px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.styleH ul li.art:before{
  background: var(--art);
}
.styleZ ul{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.styleZ ul li{
  width: calc(94% / 3);
  margin-right: 3%;
  margin-bottom: 45px;
}
.styleZ ul li.art{
  background:var(--art);
}
.styleZ .styleZ-img{
  width: 100%;
  height: 33.4vw;
  max-height: 640px;
  position: relative;
  overflow: hidden;
}
.styleZ .styleZ-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
.styleZ ul li:hover .styleZ-img img{
  transform: scale(1.05);
}
.styleZ .styleZ-info{
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}
.styleZ .styleZ-info h4{
  color: #000;
  line-height: 1;
  letter-spacing: 2px;
}
.styleZ .styleZ-info p{
  color: #000;
  line-height: 1.8;
}
@media only screen and (min-width:1950px) {
  .styleC-img .styleC-info {
    margin-top: -120px;
  }

  .styleD-info {
    padding: 60px;
  }

  .styleE-title {
    gap: 60px;
  }
  .styleG-box li{
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media only screen and (min-width:769px) {
  .styleD-box li:nth-child(3n+2) {
    flex-direction: column-reverse;
  }

  .styleD-box li:nth-child(3n+2) .styleD-info:before {
    content: "";
    position: absolute;
    top: -13px;
    left: 2vw;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 13.5px 13px 13.5px;
    border-color: transparent transparent #fff transparent;
    z-index: 2;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
  }
  .styleD-box li.art:nth-child(3n+2) .styleD-info:before{
    border-color: transparent transparent var(--art) transparent;
  }
  .styleD-box li.pink:nth-child(3n+2):hover .styleD-info:before {
    border-color: transparent transparent var(--pink) transparent;
  }

  .styleD-box li.green:nth-child(3n+2):hover .styleD-info:before {
    border-color: transparent transparent var(--green) transparent;
  }

  .styleD-box li.blue:nth-child(3n+2):hover .styleD-info:before {
    border-color: transparent transparent var(--blue) transparent;
  }

  .styleD-box li.orange:nth-child(3n+2):hover .styleD-info:before {
    border-color: transparent transparent var(--orange) transparent;
  }

  .styleD-box li.red:nth-child(3n+2):hover .styleD-info:before {
    border-color: transparent transparent var(--red) transparent;
  }
  .styleD-box li.art:nth-child(3n+2):hover .styleD-info:before {
    border-color: transparent transparent #111 transparent;
  }
  .styleD2 .styleD-box li:nth-child(3){
    position: absolute;
    top: 0;
    right: 0;
    height: calc(100% - 30px);
    max-height:calc(100% - 30px);
  }
 /* .styleD2 .styleD-box li:nth-child(3) .styleD-info{
    height: 360px;
    min-height: 360px;
  }
  .styleD2 .styleD-box li:nth-child(3) .styleD-img{
    height: calc(100% - 360px);
  } */
  .styleH ul li:nth-child(1):before{
    display: none;
  }
  .styleZ ul li:nth-child(3n){
     margin-right: 0;
  }
}

@media only screen and (max-width:1440px) {
  .styleC ul {
    width: 57%;
  }
}
@media only screen and (max-width:1300px) {
  .styleD-info{
    min-height: 220px;
    padding: 20px;
  }
 /* .styleD1 .styleD-box li:nth-child(4) .styleD-info p{
    height: 300px;
    overflow-y: auto;
  } */
}
@media only screen and (max-width:1100px) {
  .styleE-box {
    align-items: flex-end;
  }
}

@media only screen and (max-width:768px) {
  .styleA span {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 16px;
  }
  .styleB-ms{
    width: 100%;
  }
  .styleB ul li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .styleB ul li:last-child {
    margin-bottom: 0;
  }

  /*.styleC-img .styleC-info {
    padding: 20px;
  }*/
  .styleC-img .styleC-info{
      width: 160px;
      height: 89px;
  }
  .styleC-info .info-num {
    font-size: 20px;
  }

  .styleC-info .info-unit {
    font-size: 16px;
  }

  .styleC-info .info-ms {
    margin-top: 5px;
  }

  .styleC ul {
    width: 90%;
  }

  .styleD-box li {
    width: 100%;
    height: auto;
    max-height: none;
    margin-right: 0;
  }

  .styleD1 .styleD-box li:nth-child(4) {
    width: 100%;
  }

  .styleD1 .styleD-box li:nth-child(4) .styleD-info {
    width: 100%;
    height: auto;
  }

  .styleD1 .styleD-box li:nth-child(4) .styleD-info:before {
    top: auto;
    transform: none;
    bottom: -13px;
    left: 2vw;
    border-width: 13px 13.5px 0 13.5px;
    border-color: #fff transparent transparent transparent;
  }

  .styleD1 .styleD-box li.green:nth-child(4):hover .styleD-info:before {
    border-color: var(--green) transparent transparent transparent;
  }

  .styleD1 .styleD-box li:nth-child(4) .styleD-img {
    width: 100%;
    height: auto;
  }

  .styleD2 .styleD-box li:nth-child(4) {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .styleD2 .styleD-box li:nth-child(4) .styleD-info {
    width: 100%;
    height: auto;
  }

  .styleD2 .styleD-box li:nth-child(4) .styleD-info:before {
    top: auto;
    transform: none;
    bottom: -13px;
    left: 2vw;
    border-width: 13px 13.5px 0 13.5px;
    border-color: #fff transparent transparent transparent;
  }

  .styleD2 .styleD-box li.blue:nth-child(4):hover .styleD-info:before {
    border-color: var(--blue) transparent transparent transparent;
  }

  .styleD2 .styleD-box li:nth-child(4) .styleD-img {
    width: 100%;
    height: auto;
  }
.styleD3 .styleD-box li:nth-child(1) {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .styleD3 .styleD-box li:nth-child(1) .styleD-info {
    width: 100%;
    height: auto;
  }

  .styleD3 .styleD-box li:nth-child(1) .styleD-info:before {
    top: auto;
    transform: none;
    bottom: -13px;
    left: 2vw;
    border-width: 13px 13.5px 0 13.5px;
    border-color: #fff transparent transparent transparent;
  }

  .styleD3 .styleD-box li.orange:nth-child(1):hover .styleD-info:before {
    border-color: var(--orange) transparent transparent transparent;
  }

  .styleD3 .styleD-box li:nth-child(1) .styleD-img {
    width: 100%;
    height: auto;
  }
  .styleD3 .styleD-box li:nth-child(2){
    width: 100%;
    height: auto;
    max-height: none;
  }
  .styleD-info {
    padding: 20px;
    min-height: 0;
  }

  .styleE-box .styleE-left {
    width: 100%;
  }

  .styleE-box .styleE-img {
    width: 100%;
  }
  .styleG-box li{
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .styleG-box li:last-child{
    margin-bottom: 0;
  }
  .styleH ul li{
    width: 100%;
  }
  .styleZ ul li{
    width:calc((100% - 15px) / 2);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .styleZ ul li:nth-child(2n){
    margin-right: 0;
  }
  .styleZ .styleZ-img{
    min-height: 204px;
  }
  .styleZ .styleZ-info h4{
    font-size: 18px;
  }
}