* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #EBE8DF;
  font-size: 12px;
  line-height: 24px;
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.1em;
  padding-top: 50px;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    padding-top: 64px;
  }
}

a {
  text-decoration: none;
  color: #000;
  transition: color 0.2s;
}
a:hover {
  color: #2F62AE;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #EBE8DF;
  padding: 0 12px 6px 12px;
  display: flex;
  align-items: flex-end;
  z-index: 999;
}
@media screen and (min-width: 768px) {
  #header {
    height: 64px;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
  }
}
#header img {
  display: block;
  width: auto;
  height: 12px;
}
@media screen and (min-width: 768px) {
  #header img {
    height: 16px;
  }
}

main {
  padding: 36px 0 45px 0;
}
@media screen and (min-width: 768px) {
  main {
    padding: 75px 0 123px 0;
  }
}

.container {
  padding: 0 15px;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

h1, .title {
  color: #2F62AE;
  font-size: 20px;
  line-height: 29px;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin: 0 0 15px 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  h1, .title {
    font-size: 24px;
    line-height: 35px;
    margin: 0 0 9px 0;
  }
}

.title-en {
  color: #2F62AE;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 27px 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .title-en {
    font-size: 20px;
    line-height: 29px;
    margin: 0 0 32px 0;
  }
}

h2 {
  color: #2F62AE;
  font-size: 16px;
  line-height: 23px;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin: 0 0 40px 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  h2 {
    line-height: 19px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0 0 22px 0;
  }
}

h3 {
  color: #2F62AE;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 7px 0;
}
@media screen and (min-width: 768px) {
  h3 {
    margin: 0 0 9px 0;
  }
}

@media screen and (min-width: 768px) {
  br.m {
    display: none;
  }
}

.action {
  margin-top: 50px;
  text-align: center;
}

button, input[type=submit], input[type=reset] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.tk-btn {
  display: inline-block;
  padding: 10px;
  background: #2F62AE;
  border: 1px solid #2F62AE;
  color: #EBE8DF;
  font-size: 12px;
  line-height: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-indent: 0.1em;
  border-radius: 5px;
  transition: all 0.2s;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .tk-btn {
    padding: 10px 15px;
    font-size: 16px;
    line-height: 23px;
    border-radius: 10px;
  }
}
.tk-btn:not(:disabled):hover {
  background: #204782;
  color: #EBE8DF;
}
.tk-btn:disabled {
  cursor: no-drop;
  opacity: 0.8;
}

.step-bar {
  width: 213px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 75px;
}
@media screen and (min-width: 768px) {
  .step-bar {
    width: 330px;
    margin-bottom: 105px;
  }
}
.step-bar .step {
  position: relative;
}
.step-bar .num {
  width: 30px;
  height: 30px;
  color: #2F62AE;
  border: 1px solid #2F62AE;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .step-bar .num {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}
.step-bar .num.active {
  color: #fff;
  background: #EE702E;
}
.step-bar .arrow {
  width: 28px;
  height: 6px;
  background-image: url('data:image/svg+xml,<svg width="28" height="6" viewBox="0 0 28 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M23 0.113279L28 3.00003L23 5.88678L23 3.50003L1 3.50003C0.723858 3.50003 0.5 3.27618 0.5 3.00003C0.5 2.72389 0.723858 2.50003 1 2.50003L23 2.50003L23 0.113279Z" fill="%232F62AE"/></svg>');
}
@media screen and (min-width: 768px) {
  .step-bar .arrow {
    display: none;
  }
}
.step-bar .txt {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translate(-50%, 50%);
  text-align: center;
  white-space: nowrap;
  font-size: 10px;
  line-height: 16px;
}
@media screen and (min-width: 768px) {
  .step-bar .txt {
    bottom: -30px;
    font-size: 14px;
    line-height: 24px;
    color: #2F62AE;
    font-weight: 700;
  }
}

#main-nav {
  padding: 0 10px;
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  background: #f8f2ec;
}
@media screen and (min-width: 992px) {
  #main-nav {
    height: 80px;
  }
}
#main-nav .logo {
  display: block;
  width: auto;
  height: 27px;
}
#main-nav .nav-items {
  display: none;
}
@media screen and (min-width: 992px) {
  #main-nav .nav-items {
    width: 670px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 30px;
  }
}
#main-nav .nav-items a {
  font-size: 16px;
  font-weight: 600;
  color: #2F62AE;
  letter-spacing: 0.06em;
}
#main-nav .mob-toogle {
  position: relative;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
@media screen and (min-width: 992px) {
  #main-nav .mob-toogle {
    display: none;
  }
}
#main-nav .mob-toogle span {
  display: block;
  width: 19px;
  height: 2px;
  background: #2F62AE;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#main-nav .mob-toogle span:first-child {
  top: calc(50% - 8px);
}
#main-nav .mob-toogle span:last-child {
  top: calc(50% + 8px);
}

#main-nav-mob {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #EBE8DF;
  z-index: 999;
}
@media screen and (min-width: 992px) {
  #main-nav-mob {
    display: none !important;
  }
}
#main-nav-mob.show {
  display: flex;
  justify-content: center;
  align-items: center;
}
#main-nav-mob .nav-items a {
  display: block;
  color: #2F62AE;
  font-size: 28px;
  font-weight: 600;
  margin: 30px 0;
}
#main-nav-mob .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
#main-nav-mob .close span {
  display: block;
  width: 19px;
  height: 2px;
  background: #2F62AE;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
#main-nav-mob .close span:first-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.eapps-instagram-feed-title {
  color: #2F62AE;
}

body {
  padding-top: 60px;
}
@media screen and (min-width: 992px) {
  body {
    padding-top: 80px;
  }
}

body, main {
  color: #3E3A39;
  font-weight: 400;
}

main {
  padding-top: 0;
  overflow: hidden;
  background-image: url(../img/bg.jpg);
  background-size: 100% auto;
}

section {
  padding: 100px 0;
}

img {
  max-width: 100%;
}

.sec-title {
  text-align: center;
  margin-bottom: 74px;
  color: #2F62AE;
}
.sec-title h2 {
  font-size: 26px;
  line-height: 150%;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 2px 0;
}
.sec-title .sec-title-en {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 150%;
  font-weight: 900;
  letter-spacing: 0.1em;
}

#kv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 999;
  padding: 0;
  background: #000;
}
#kv .bg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#kv .bg.m {
  display: block;
}
@media screen and (min-aspect-ratio: 1) {
  #kv .bg.m {
    display: none;
  }
}
#kv .bg.pc {
  display: none;
}
@media screen and (min-aspect-ratio: 1) {
  #kv .bg.pc {
    display: block;
  }
}
#kv .kv-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -72%);
  width: 32.6180257511vh;
  height: 45.7796852647vh;
}
@media screen and (min-aspect-ratio: 780/1392) {
  #kv .kv-content {
    width: 58.0152671756vw;
    height: 81.4249363868vw;
  }
}
@media screen and (min-aspect-ratio: 1) {
  #kv .kv-content {
    width: 44.2442442442vh;
    height: 72.5725725726vh;
    transform: translate(-50%, -60%);
  }
}
@media screen and (min-aspect-ratio: 2160/1499) {
  #kv .kv-content {
    width: 30.6944444444vw;
    height: 50.3472222222vw;
  }
}
@media screen and (min-aspect-ratio: 740/454) {
  #kv .kv-content {
    width: 44.2442442442vh;
    height: 72.5725725726vh;
  }
}
#kv .title {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
#kv .enter {
  display: block;
  position: absolute;
  width: 40.350877193%;
  height: auto;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;
}
@media screen and (min-aspect-ratio: 1) {
  #kv .enter {
    width: 36.1990950226%;
  }
}
#kv .enter rect {
  transition: all 0.2s;
}
#kv .enter:hover rect {
  fill: #d25a15;
}

#about {
  position: relative;
  padding: 0;
  font-size: 14px;
  line-height: 200%;
  letter-spacing: 0.08em;
  text-align: center;
  z-index: 1;
  height: calc(200vh - 120px);
}
@media screen and (min-width: 992px) {
  #about {
    height: calc(200vh - 160px);
  }
}
#about .about-inner {
  width: 100%;
  height: 50%;
}
#about svg {
  height: auto !important;
}
#about .window-boy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  z-index: -1;
}
@media screen and (min-width: 992px) {
  #about .window-boy {
    height: calc(100vh - 80px);
  }
}
#about .window-boy .bm {
  width: 230px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-107px, -277px);
  height: 0;
  overflow: hidden;
}
@media screen and (min-width: 700px) {
  #about .window-boy .bm {
    height: auto;
    transform: translate(-322px, -50%);
  }
}
@media screen and (min-width: 992px) {
  #about .window-boy .bm {
    width: 380px;
    transform: translate(-500px, calc(-50% + 30px));
  }
}
#about .window-boy .bm-m {
  width: 184px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-86px, -323px);
  overflow: hidden;
}
@media screen and (min-width: 700px) {
  #about .window-boy .bm-m {
    height: 0;
    transform: translate(-322px, -50%);
  }
}
@media screen and (min-width: 992px) {
  #about .window-boy .bm-m {
    width: 380px;
    transform: translate(-500px, -50%);
  }
}
#about .window-girl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  z-index: -1;
}
@media screen and (min-width: 992px) {
  #about .window-girl {
    height: calc(100vh - 80px);
  }
}
#about .window-girl .bm {
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-90px, 100px);
  height: 0;
  overflow: hidden;
}
@media screen and (min-width: 700px) {
  #about .window-girl .bm {
    height: auto;
    transform: translate(118px, -50%);
  }
}
@media screen and (min-width: 992px) {
  #about .window-girl .bm {
    width: 300px;
    transform: translate(180px, -50%);
  }
}
#about .window-girl .bm-m {
  width: 220px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-104px, 132px);
  overflow: hidden;
}
@media screen and (min-width: 700px) {
  #about .window-girl .bm-m {
    height: 0;
    transform: translate(118px, -50%);
  }
}
@media screen and (min-width: 992px) {
  #about .window-girl .bm-m {
    width: 424px;
    transform: translate(130px, -50%);
  }
}
#about .text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translate(0, -50%);
}
#about .text p {
  margin: 0 0 16px 0;
}
#about .text p:last-child {
  margin: 0;
}
#about .text.text2 {
  opacity: 0;
}
#about .flowers {
  display: none;
}
@media screen and (min-width: 700px) {
  #about .flowers {
    display: flex;
    justify-content: center;
    position: absolute;
    top: calc(50% + 130px);
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
#about .flowers img {
  display: block;
  width: 15px;
  margin: 0 3px;
}

#countdown {
  padding-bottom: 0;
}
@media screen and (min-width: 700px) {
  #countdown {
    padding: 50px;
  }
}
#countdown .container > div {
  position: relative;
}
@media screen and (min-width: 500px) {
  #countdown .container > div {
    width: 450px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 992px) {
  #countdown .container > div {
    width: 800px;
  }
}
#countdown .container > div img {
  display: block;
  width: 100%;
}
#countdown .container > div .day {
  position: absolute;
  top: calc((100vw - 30px) * 0.096);
  left: 59.8%;
  color: #fffd6a;
  font-weight: 700;
  font-size: 5vw;
}
@media screen and (min-width: 500px) {
  #countdown .container > div .day {
    top: 44px;
    left: 267px;
    font-size: 30px;
    letter-spacing: -0.5px;
  }
}
@media screen and (min-width: 992px) {
  #countdown .container > div .day {
    top: 90px;
    left: 476px;
    font-size: 49px;
  }
}

#ticket .pc {
  display: none;
}
@media screen and (min-width: 992px) {
  #ticket .pc {
    display: block;
  }
}
@media screen and (min-width: 992px) {
  #ticket .ticket-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 630px;
    margin: 0 auto;
  }
}
#ticket .ticket-items .ticket-item {
  margin-bottom: 55px;
}
@media screen and (min-width: 992px) {
  #ticket .ticket-items .ticket-item {
    width: 258px;
  }
}
#ticket .ticket-items .ticket-item .ticket-name-price {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
@media screen and (min-width: 992px) {
  #ticket .ticket-items .ticket-item .ticket-name-price {
    display: none;
  }
}
#ticket .ticket-items .ticket-item .ticket-name {
  color: #2F62AE;
  font-size: 18px;
  line-height: 150%;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 4px;
}
@media screen and (min-width: 992px) {
  #ticket .ticket-items .ticket-item .ticket-name {
    font-size: 23px;
    margin: 0 0 20px 0;
  }
}
#ticket .ticket-items .ticket-item .ticket-price {
  font-family: "League Gothic", sans-serif;
  color: #2F62AE;
  font-size: 22px;
  line-height: 150%;
  margin: 0 4px;
}
@media screen and (min-width: 992px) {
  #ticket .ticket-items .ticket-item .ticket-price {
    font-size: 40px;
    margin: 16px 0 0 0;
  }
}
#ticket .ticket-items .ticket-item .ticket-info {
  max-width: 358px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media screen and (min-width: 992px) {
  #ticket .ticket-items .ticket-item .ticket-info {
    max-width: none;
    align-items: center;
  }
}
#ticket .ticket-items .ticket-item .ticket-info img {
  display: block;
  width: 160px;
  margin: 0 10px;
}
@media screen and (min-width: 992px) {
  #ticket .ticket-items .ticket-item .ticket-info img {
    width: 100%;
    margin: 0 0 30px 0;
  }
}
#ticket .ticket-items .ticket-item .ticket-info .ticket-text {
  font-size: 13px;
  line-height: 200%;
  letter-spacing: 0.06em;
  margin: 0 10px;
}
#ticket .ticket-items .ticket-item .ticket-info .ticket-text div {
  padding-left: 26px;
  position: relative;
  background-size: 17px auto;
  background-repeat: no-repeat;
  background-position: 0 5px;
}
#ticket .ticket-items .ticket-item .ticket-info .ticket-text div.line-ticket {
  background-image: url(/property/happyland/img/icon-ticket.png);
}
#ticket .ticket-items .ticket-item .ticket-info .ticket-text div.line-ticket2 {
  background-image: url(/property/happyland/img/icon-ticket2.png);
}
#ticket .ticket-items .ticket-item .ticket-info .ticket-text div.line-flag {
  background-image: url(/property/happyland/img/icon-flag.png);
}
#ticket .ticket-items .ticket-item .ticket-info .ticket-text div.line-gift {
  background-image: url(/property/happyland/img/icon-gift.png);
}
#ticket .ticket-items .ticket-item .ticket-info .ticket-text div.line-love {
  background-image: url(/property/happyland/img/icon-love.png);
}
#ticket .ticket-items .ticket-item .ticket-info .ticket-text span {
  font-size: 11px;
  line-height: 190%;
  color: #EC6619;
  display: block;
}
#ticket .act {
  display: flex;
  justify-content: center;
  align-items: center;
}
#ticket .act a {
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: 900;
  color: #fff;
  background: #EC6619;
  text-align: center;
  padding: 13px 16px;
  border-radius: 50px;
  transition: all 0.2s;
}
@media screen and (min-width: 992px) {
  #ticket .act a {
    font-size: 23px;
    line-height: 28px;
    font-weight: 700;
    padding: 19px 26px;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
}
#ticket .act a:hover {
  background: #d15a16;
}

#info .info-items {
  max-width: 344px;
  margin: 0 auto;
}
@media screen and (min-width: 992px) {
  #info .info-items {
    max-width: 823px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #info .info-items > div:nth-child(2) {
    width: 400px;
  }
}
#info .info-items .info-item {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
@media screen and (min-width: 992px) {
  #info .info-items .info-item {
    margin-bottom: 60px;
  }
}
#info .info-items .info-item img {
  display: block;
  width: 85px;
  margin-right: 20px;
}
@media screen and (min-width: 992px) {
  #info .info-items .info-item img {
    width: 91px;
    margin-right: 28px;
  }
}
#info .info-items .info-item .info-text {
  flex: 1;
}
#info .info-items .info-item .info-text b {
  font-size: 14px;
  line-height: 180%;
}
@media screen and (min-width: 992px) {
  #info .info-items .info-item .info-text b {
    font-size: inherit;
    line-height: inherit;
  }
}
#info .info-items .info-item .info-text .star {
  color: #EA5514;
}
#info .info-items .info-item .info-text .info-title {
  color: #2F62AE;
  font-size: 16px;
  line-height: 150%;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 2px 0;
}
@media screen and (min-width: 992px) {
  #info .info-items .info-item .info-text .info-title {
    letter-spacing: 0.06em;
    margin: 0 0 13px 0;
  }
}
#info .info-items .info-item:nth-child(2) {
  align-items: flex-start;
}
#info .info-items .info-item:nth-child(2) img {
  margin-top: 5px;
}

#rules {
  text-align: center;
  font-size: 14px;
  line-height: 200%;
  padding-top: 30px;
}
@media screen and (min-width: 992px) {
  #rules {
    padding-top: 80px;
  }
}
#rules .sec-title {
  margin-bottom: 35px;
}
@media screen and (min-width: 992px) {
  #rules .sec-title {
    margin-bottom: 52px;
  }
}
#rules .act {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
@media screen and (min-width: 992px) {
  #rules .act {
    margin-bottom: 14px;
  }
}
#rules .act a {
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: 900;
  color: #fff;
  background: #EC6619;
  text-align: center;
  padding: 13px 16px;
  border-radius: 50px;
  transition: all 0.2s;
}
@media screen and (min-width: 992px) {
  #rules .act a {
    font-size: 23px;
    line-height: 28px;
    font-weight: 700;
    padding: 19px 26px;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
}
#rules .act a:hover {
  background: #d15a16;
}

#contact {
  text-align: center;
  font-size: 14px;
  line-height: 200%;
  padding-top: 30px;
}
@media screen and (min-width: 992px) {
  #contact {
    padding-top: 90px;
  }
}
#contact .sec-title {
  margin-bottom: 32px;
}
@media screen and (min-width: 992px) {
  #contact .sec-title {
    margin-bottom: 55px;
  }
}
#contact .title {
  font-size: 18px;
  line-height: 150%;
  font-weight: 700;
  color: #2F62AE;
  letter-spacing: 0.06em;
  margin: 36px 0 12px 0;
}
@media screen and (min-width: 992px) {
  #contact .title {
    font-size: 23px;
    margin: 66px 0 20px 0;
  }
}
#contact .socials {
  width: 260px;
  margin: 97px auto 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#contact .socials a img {
  display: block;
  width: auto;
  height: 48px;
  transition: opacity 0.2s;
  border-radius: 50%;
}
#contact .socials a img:hover {
  opacity: 0.9;
}

#fixed-booking {
  position: fixed;
  bottom: 100px;
  right: 0;
  width: 115px;
  z-index: 1;
}
@media screen and (min-width: 1400px) {
  #fixed-booking {
    width: 191px;
  }
}

#introduction {
  text-align: center;
}
#introduction .swiper {
  width: 70%;
  overflow: visible;
}
#introduction .swiper .swiper-pagination {
  line-height: 1;
  bottom: 173px;
}
#introduction .swiper .swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  background: #2F62AE;
  margin: 0 6px;
}
#introduction .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #EE702E;
}
#introduction img {
  width: 100%;
  margin: 0 auto 50px auto;
}
@media screen and (min-width: 768px) {
  #introduction img {
    margin: 0 auto 20px auto;
  }
}
#introduction img.m {
  display: block;
}
@media screen and (min-width: 768px) {
  #introduction img.m {
    display: none;
  }
}
#introduction img.pc {
  display: none;
}
@media screen and (min-width: 768px) {
  #introduction img.pc {
    display: block;
  }
}
#introduction .t1 {
  color: #2F62AE;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
  #introduction .t1 {
    font-size: 17px;
  }
}
#introduction .t2 {
  color: #EE702E;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
  #introduction .t2 {
    font-size: 15px;
  }
}
#introduction .modal-btn {
  margin-top: 50px;
}
#introduction .modal-btn span {
  color: #2F62AE;
  cursor: pointer;
}
#introduction .modal-btn span:hover {
  text-decoration: underline;
}

#experience img {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: -50px auto 0 auto;
}
#experience .video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
#experience .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#partner .item-title {
  position: relative;
  margin-bottom: 20px;
}
#partner .item-title:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 76px;
  width: calc(100% - 76px);
  height: 2px;
  transform: translate(0, -50%);
  background: #EE702E;
}
#partner .item-title span {
  color: #2F62AE;
  font-size: 16px;
  font-weight: 600;
}
#partner .items {
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #partner .items {
    display: flex;
    justify-content: space-between;
  }
}
#partner .item {
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  #partner .item {
    margin-bottom: 0;
  }
}
#partner .item img {
  display: block;
  width: 100%;
  max-width: 800px;
}
@media screen and (min-width: 768px) {
  #partner .item:nth-child(1) {
    width: 300px;
  }
}
#partner .item:nth-child(1) img {
  max-width: 65px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #partner .item:nth-child(1) img {
    max-width: 110px;
    margin-top: 46px;
  }
}
@media screen and (min-width: 768px) {
  #partner .item:nth-child(2) {
    width: calc(100% - 360px);
  }
}

#credit br.pc {
  display: none;
}
@media screen and (min-width: 768px) {
  #credit br.pc {
    display: block;
  }
}
#credit .item {
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  margin-bottom: 35px;
}
#credit .item .item-title {
  color: #EE702E;
  font-weight: 700;
  margin-bottom: 12px;
}
@media screen and (min-width: 1000px) {
  #credit .items-lists {
    display: flex;
    width: 980px;
    justify-content: space-between;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1400px) {
  #credit .items-lists {
    width: 1220px;
    margin-top: 50px;
  }
}
@media screen and (min-width: 1000px) {
  #credit .items-lists .items-list {
    width: 30%;
  }
}
#credit .items-lists .item {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}
#credit .items-lists .item .item-title {
  color: #2F62AE;
  min-width: 102px;
  margin-right: 14px;
}
@media screen and (min-width: 1000px) {
  #credit .items-lists .item .item-title {
    min-width: 75px;
  }
}
@media screen and (min-width: 1400px) {
  #credit .items-lists .item .item-title {
    min-width: 120px;
  }
}
#credit .items-lists .item div:nth-child(2) {
  min-width: 50%;
}

.eapps-instagram-feed-posts-item-user-image-wrapper {
  width: 36px;
}

#end {
  padding-top: 40px;
}
@media screen and (min-width: 700px) {
  #end {
    padding-top: 0;
  }
}
#end .container {
  display: flex;
  justify-content: center;
}
#end .links {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
#end .links a {
  display: block;
  padding: 6px 12px;
  background: #EC6619;
  color: #fff;
  border-radius: 4px;
  margin-right: 12px;
  transition: all 0.2s;
}
#end .links a:hover {
  background: #d15a16;
}
#end .links a:last-child {
  margin-right: 0;
}/*# sourceMappingURL=home.css.map */