@import url(../font/S-CoreDream/S-CoreDream1.css);
@import url(../font/S-CoreDream/S-CoreDream2.css);
@import url(../font/S-CoreDream/S-CoreDream3.css);
@import url(../font/S-CoreDream/S-CoreDream4.css);
@import url(../font/S-CoreDream/S-CoreDream5.css);
@import url(../font/S-CoreDream/S-CoreDream6.css);
@import url(../font/S-CoreDream/S-CoreDream7.css);
@import url(../font/S-CoreDream/S-CoreDream8.css);
@import url(../font/S-CoreDream/S-CoreDream9.css);
* {
  margin: 0px;
  padding: 0px;
  font-family: "S-CoreDream-4Regular", sans-serif;
}

html,
body {
  width: 100%;
}

.eventBox {
  width: 181px;
  position: fixed;
  height: auto;
  top: 165px;
  right: 50%;
  margin-right: -891px;
  transition: all 0.2s ease;
}
.eventBox img {
  display: block;
  width: 100%;
  transition: all 0.2s ease;
}
.eventBox .mobileNone {
  margin-top: 5px;
}
.eventBox p {
  display: none;
}
.eventBox .iconBox {
  display: flex;
  justify-content: space-between;
  border-radius: 30px;
  width: 100%;
  margin: auto;
  margin-top: 18px;
}
.eventBox .iconBox .iconBtn {
  width: 20%;
  line-height: 0px;
  margin-top: 0px;
  background-color: #e7647f;
}
.eventBox .iconBox .iconBtn img {
  display: block;
}
.eventBox .iconBox .iconHome {
  display: flex;
  justify-content: center;
  align-items: center;
}
.eventBox .iconBox .iconHome img {
  width: 80%;
}

.allArea {
  width: 100%;
  height: 100;
  display: flex;
  flex-flow: column;
  align-items: center;
  min-width: 320px;
}

.section1 {
  width: 100%;
  transition: all 0.5s;
  max-width: 1470px;
  padding: 0 35px 90px;
  box-sizing: border-box;
}
.section1 video {
  width: 100%;
  z-index: 400;
  position: relative;
}

.section2 {
  width: 100%;
  background-color: #e5e5e5;
  height: auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  transition: all 0.5s;
}
.section2 .centerBox {
  max-width: 1470px;
  padding: 50px 35px 90px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.section3 {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  transition: all 0.5s;
}
.section3 .centerBox {
  max-width: 1470px;
  width: 100%;
  padding: 50px 35px 90px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.cardBasic {
  display: block;
  width: 679px;
  height: auto;
  background-color: white;
  position: relative;
  margin-top: 40px;
  transition: all 0.5s;
  opacity: 0;
  transform: translateY(80px);
}
.cardBasic .cornerTxt {
  padding: 8px 10px;
  box-sizing: border-box;
  color: white;
  font-weight: 700;
  margin-bottom: 20px;
}
.cardBasic .imgBox {
  width: 100%;
  line-height: 0px;
}
.cardBasic .imgBox img {
  display: block;
  line-height: 0px;
  width: 100%;
}
.cardBasic .textArea {
  padding: 20px 15px 0px;
  box-sizing: border-box;
  padding-bottom: 60px;
}
.cardBasic .textArea h4 {
  color: green;
  line-height: 1.6em;
}
.cardBasic .textArea h3 {
  font-size: 22px;
  margin-bottom: 10px;
  line-height: 1.6em;
  height: calc(1.6em * 2);
  -webkit-line-clamp: 2;
  word-break: keep-all;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: left;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.cardBasic .textArea .txtBox {
  font-size: 1rem;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.6em;
  text-align: left;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.cardBasic .textArea .rowLine1 {
  height: calc(1.6em * 1);
  -webkit-line-clamp: 1;
}
.cardBasic .textArea .rowLine2 {
  height: calc(1.6em * 2);
  -webkit-line-clamp: 2;
}
.cardBasic .textArea .rowLine3 {
  height: calc(1.6em * 3);
  -webkit-line-clamp: 3;
}
.cardBasic .textArea .rowLine4 {
  height: calc(1.6em * 4);
  -webkit-line-clamp: 4;
}
.cardBasic .moreBox {
  text-align: right;
  position: absolute;
  bottom: 10px;
  right: 15px;
  padding-right: 30px;
  background: url(../images/icon6.png) no-repeat right center;
}

.youtubeCardOut {
  width: 680px;
  margin-top: 40px;
}
.youtubeCardOut .youtubeCard {
  height: 0px;
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}
.youtubeCardOut .youtubeCard iframe,
.youtubeCardOut .youtubeCard object {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cardNewsOut {
  width: 680px;
  height: auto;
  margin-top: 40px;
}
.cardNewsOut .cardNews {
  height: 0px;
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}
.cardNewsOut .cardNews img {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000;
}

.cardType2 {
  width: 320px;
}

.cardType2_1, .cardType2_2 {
  width: 320px;
  height: 550px;
  background-color: rgba(247, 125, 112, 0.2);
}
.cardType2_1 .cornerTxt, .cardType2_2 .cornerTxt {
  margin-bottom: 0px;
}
.cardType2_1 .backW, .cardType2_2 .backW {
  display: block;
  width: 100%;
  height: 20px;
  background-color: white;
}
.cardType2_1 .conBox, .cardType2_2 .conBox {
  height: 451px;
  color: #000;
}
.cardType2_1 .moreBox, .cardType2_2 .moreBox {
  background: url(../images/icon6.png) no-repeat right center;
  color: #000;
}

.cardType2_1white {
  background-color: white;
}

.cardType2_2 {
  background-color: transparent;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.cardType2_2 .imgBox img {
  width: 100%;
}
.cardType2_2 .moreBox {
  background: url(../images/icon7.png) no-repeat right center;
  color: #000;
}

.cardType3 {
  width: 680px;
  height: 269px;
}
.cardType3 .conBox {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: space-between;
}
.cardType3 .imgBox {
  line-height: 0px;
  width: 190px;
}
.cardType3 .textArea {
  width: calc(100% - 190px);
  padding: 0px 20px;
  box-sizing: border-box;
  height: 210px;
}

.cardType3_1 {
  width: 680px;
  height: 257.88px;
  background-color: rgba(247, 125, 112, 0.2);
}
.cardType3_1 .cornerTxt {
  margin-bottom: 0px;
}
.cardType3_1 .backW {
  display: block;
  width: 100%;
  height: 20px;
  background-color: white;
}
.cardType3_1 .conBox {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: space-between;
}
.cardType3_1 .imgBox {
  line-height: 0px;
  width: 300px;
}
.cardType3_1 .textArea {
  width: calc(100% - 300px);
  padding: 0px 20px;
  box-sizing: border-box;
  position: relative;
  height: 100%;
}
.cardType3_1 .textArea h3 {
  margin-top: 10px;
}
.cardType3_1 .textArea .txtBox {
  font-size: 1rem;
  overflow: hidden;
}
.cardType3_1 .textArea .moreBox {
  bottom: 10px;
  right: 10px;
}

.specialCard {
  display: flex;
  width: 680px;
  height: 220px;
  justify-content: space-between;
}
.specialCard .imgBox {
  width: 210px;
}
.specialCard .cornerTxt {
  margin-bottom: 0px;
}
.specialCard .backW {
  display: block;
  width: 100%;
  height: 20px;
  background-color: white;
}
.specialCard .conBox {
  width: calc(100% - 220px);
  background-color: #e67980;
}
.specialCard .conBox .textArea {
  padding: 10px;
  color: white;
}
.specialCard .moreBox {
  background: url(../images/icon7.png) no-repeat right center;
  color: #fff;
}

.imgCard {
  width: 320px;
  height: 220px;
  position: relative;
}
.imgCard img {
  width: 100%;
  height: auto;
}

.greenB {
  background-color: #92c52b;
}

.skyblueB {
  background-color: #38abb8;
}

.browonB {
  background-color: #b58f6b;
}

.redB {
  background-color: #ea545e;
}

.orangeB {
  background-color: #f08300;
}

.blueB {
  background-color: #4d61a8;
}

.yellowB {
  background-color: #f5ac1a;
}

.pulpleB {
  background-color: #936caf;
}

.pinkB {
  background-color: #f77d70;
}

.pulple2B {
  background-color: #57508f;
}

.tealB {
  background-color: #26a08f;
}

.brown2B {
  background-color: #a46453;
}

.skyblue2B {
  background-color: #81bce2;
}

.red2B {
  background-color: #de5e49;
}

.pink {
  background-color: #f77d70;
}

.green2B {
  background-color: #59ad59;
}

a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.brM {
  display: none;
}

.brP {
  display: block;
}

@media screen and (max-width: 1782px) {
  .topBtn {
    top: calc(100% - 130px);
  }

  .eventBox {
    width: 170px;
    position: fixed;
    height: 50px;
    top: 100%;
    margin-top: -70px;
    z-index: 1000;
    right: 20px;
    margin-right: 0px;
  }
  .eventBox .iconBox {
    display: none;
  }
  .eventBox img {
    display: none;
  }
  .eventBox a {
    width: 170px;
    height: 50px;
    background-color: pink;
    top: 90%;
    right: 20px;
    margin: 0px;
    background-color: pink;
    border-radius: 50px;
    background: url(../images/eventBtn3.png) no-repeat left center/50px #f0cfd8;
  }
  .eventBox a p {
    display: block;
    line-height: 50px;
    color: black;
    text-align: left;
    padding-left: 50px;
    font-size: 17.9px;
  }
  .eventBox .mobileNone {
    background: url(../images/eventBtn1.png) no-repeat left center/50px #dfe4f9;
    margin-top: 10px;
  }
}
@media screen and (max-width: 1470px) {
  .section2 .centerBox {
    max-width: 679px;
  }

  .section3 .centerBox {
    max-width: 679px;
  }

  .cardBasic .conBox h3 {
    font-size: 1.2rem;
  }

  .cardType2 {
    width: calc(50% - 20px);
  }

  .cardType2_1, .cardType2_2 {
    width: calc(50% - 20px);
    height: 510px;
  }
  .cardType2_1 .conBox, .cardType2_2 .conBox {
    height: 451px;
  }

  .imgCard {
    width: calc(50% - 20px);
    height: auto;
  }
}
@media screen and (max-width: 768px) {
  .section2 .centerBox {
    max-width: 679px;
  }

  .section3 .centerBox {
    max-width: 679px;
  }

  .cardBasic .conBox {
    height: auto;
  }
  .cardBasic .conBox h3 {
    font-size: 1.2rem;
  }

  .cardType2 {
    width: calc(50% - 20px);
  }
  .cardType2 .conBox {
    height: auto;
  }

  .cardType2_1, .cardType2_2 {
    width: calc(50% - 20px);
    height: 510px;
  }
  .cardType2_1 .conBox, .cardType2_2 .conBox {
    height: auto;
  }

  .brM {
    display: block;
  }

  .brP {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .section1 {
    padding-bottom: 55px;
    padding-top: 0px;
  }

  .section2 .centerBox,
.section3 .centerBox {
    padding-bottom: 55px;
    padding-top: 15px;
  }

  .cardBasic {
    margin-top: 40px;
    height: auto;
  }
  .cardBasic .conBox {
    flex-flow: column;
  }
  .cardBasic .conBox h3 {
    font-size: 1rem;
    word-break: keep-all;
    margin-bottom: 3px;
  }
  .cardBasic .conBox h3 br {
    display: none;
  }
  .cardBasic .conBox .conBox {
    padding: 5px 5px 40px;
  }
  .cardBasic .imgBox {
    max-width: 100%;
    width: 100%;
  }
  .cardBasic .textArea {
    padding: 10px 10px 50px;
    width: 100%;
  }

  .cardType2 {
    width: calc(50% - 5px);
  }
  .cardType2_1, .cardType2_2 {
    width: calc(50% - 5px);
    height: auto;
  }
  .cardType2_1 .conBox, .cardType2_2 .conBox {
    height: auto;
  }

  .cardType3_1,
.cardType3 {
    width: calc(50% - 5px);
  }
  .cardType3_1 .textArea,
.cardType3 .textArea {
    height: auto;
  }

  .imgCard {
    width: calc(50% - 5px);
    height: auto;
  }

  .specialCard .imgBox {
    display: flex;
    justify-content: center;
    width: calc(50% - 5px);
    overflow: hidden;
  }
  .specialCard .imgBox img {
    width: auto;
    height: 100%;
  }
  .specialCard .conBox {
    width: calc(50% - 5px);
  }
  .specialCard .conBox .textArea {
    padding: 10px 10px 50px;
  }
}
@media screen and (max-width: 425px) {
  .section1 {
    width: 100%;
    max-width: 1470px;
    padding: 0 15px 45px;
    box-sizing: border-box;
  }

  .section2 .centerBox {
    padding: 5px 15px 45px;
  }

  .section3 .centerBox {
    padding: 5px 15px 45px;
  }

  .specialCard {
    flex-flow: column;
  }
  .specialCard .imgBox {
    width: 100%;
  }
  .specialCard .conBox {
    width: 100%;
  }
  .specialCard .conBox .textArea {
    padding: 10px 10px 50px;
  }

  .imgCard {
    width: 100%;
  }
}
@media screen and (max-width: 320px) {
  .cardBasic {
    width: 100%;
  }
}