/* skip navigation */
.tts { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

br.mo { display: none; }

section { min-height: 100vh; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; overflow: hidden; }

section h2 .bg { display: inline-block; font-size: 38px; color: #a20810; position: relative; }

section h2 .bg::before { content: ""; width: 110%; height: 35px; background-color: #feab9a; display: inline-block; position: absolute; bottom: -10px; z-index: 1; left: -5%; }

section h2 .bg > span { position: relative; z-index: 2; }

section h2 .big { font-family: 'yg-jalnan'; font-size: 92px; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); margin-top: -10px; }

section h2 .big br { display: none; }

section > div { width: 100%; position: relative; z-index: 2; }

@-webkit-keyframes data { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); }
  100% { -webkit-transform: translateY(0px); transform: translateY(0px); } }

#con01 { background: url(../img/sec_bg.jpg) repeat-x #fbad9d; }

#con01 > .bg { content: ""; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background: url(../img/sec_bg.png) center no-repeat; background-size: cover; z-index: 1; }

#con01 > .bg span { content: ""; display: block; width: 400px; height: 530px; background: url(../img/sec_img_1.png) no-repeat; position: absolute; bottom: 0; -webkit-animation: data 0.7s ease-out 0s; animation: data 0.7s ease-out 0s; }

#con01 > .bg span.left { left: 10%; width: 270px; }

#con01 > .bg span.right { background-image: url(../img/sec_img_2.png); right: 7%; }

#con01 h1 { background: url(../img/logo.png) no-repeat; width: 270px; height: 75px; position: absolute; left: 40px; top: 30px; }

#con01 h1.right { background-image: url(../img/logo_r.png); left: auto; right: 40px; }

#con01 > div h2 .bg { margin-bottom: 30px; }

#con01 > div h2 .big img { width: 100%; display: block; margin: 15px auto 0; max-width: 1240px; }

#con01 > div h2 .big img.mo { display: none; }

#con01 > div video { max-width: 920px; max-height: 520px; background: #000; margin-top: 70px; width: 100%; }

#con02 { background: url(../img/sec2_bg.jpg) repeat-x #b3b1ff; }

#con02::before { content: ""; display: block; width: 100%; height: 100vh; background: url(../img/sec2_bg.png) center no-repeat; position: absolute; background-size: cover; }

#con02 h2 { margin-bottom: 65px; }

#con02 h2 .bg { color: #222222; }

#con02 h2 .bg span span { color: #a82121; }

#con02 h2 .bg::before { background-color: #c8c7fd; }

#con02 .box { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 960px; margin: auto; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#con02 .box li { max-width: 285px; width: 32%; background: #e5e5e5; border-radius: 35px; -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); position: relative; overflow: hidden; }

#con02 .box li::after { content: ""; width: 345px; height: 325px; background: url(../img/border_bg.png) no-repeat; position: absolute; right: -100px; bottom: -150px; z-index: 1; }

#con02 .box li div { width: calc(100% - 8px); height: calc(100% - 8px); background: #fff; border-radius: 25px; padding: 20px 0 40px; position: relative; z-index: 2; }

#con02 .box li div .img { max-width: 145px; width: 90%; display: block; margin: 0 auto; }

#con02 .box li div .img img { width: 100%; }

#con02 .box li div .tit { font-size: 28px; line-height: 1.3; color: #333333; font-weight: 700; }

#con02 .text1 { font-size: 40px; color: #1e1e1e; border-bottom: 3px solid #b0aeea; max-width: 960px; margin: auto; width: 100%; padding: 40px 0 50px; }

#con02 .text1 span { color: #a82121; font-weight: 700; }

#con02 .big { font-size: 43px; font-family: 'yg-jalnan'; color: #151f83; font-size: 92px; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); padding: 40px 0 35px; letter-spacing: -5px; }

#con02 .big span { color: #de2a7a; }

#con02 .big br { display: none; }

#con02 .text3 { font-size: 25px; color: #3b3b47; line-height: 38px; }

#con03 { background: url(../img/sec3_bg.jpg) repeat-x #75d0d7; padding-bottom: 75px; }

#con03::after { content: ""; display: block; width: 663px; height: 629px; background: url(../img/sec3_bg_l.png) no-repeat; position: absolute; left: 0; bottom: -50px; z-index: 1; }

#con03::before { content: ""; display: block; width: 537px; height: 455px; background: url(../img/sec3_bg_r.png) no-repeat; position: absolute; right: 0; top: 0; z-index: 1; }

#con03 h2 { margin-bottom: 65px; }

#con03 h2 .bg { color: #08454b; }

#con03 h2 .bg::before { background-color: #90d4df; }

#con03 h2 .big { color: #000; }

#con03 h2 .big span:nth-child(1) { color: #f94e67; font-size: 180px; }

#con03 h2 .big span:nth-child(2) { color: #14656d; }

#con03 .box { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1300px; margin: auto; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#con03 .box li { max-width: 390px; width: 32%; background: #e5e5e5; border-radius: 35px; -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); position: relative; overflow: hidden; }

#con03 .box li::after { content: ""; width: 345px; height: 325px; background: url(../img/border_bg.png) no-repeat; position: absolute; right: -100px; bottom: -150px; z-index: 1; }

#con03 .box li div { width: calc(100% - 10px); height: calc(100% - 10px); background: #fff; border-radius: 25px; padding: 40px 0 60px; position: relative; z-index: 2; }

#con03 .box li div .img { max-width: 275px; width: 90%; display: block; margin: 0 auto 30px; }

#con03 .box li div .img img { width: 100%; }

#con03 .box li div .tit { font-size: 38px; line-height: 32px; color: #333333; font-weight: 700; }

#con04 { background: url(../img/sec4_bg.jpg) center; background-size: cover; height: auto; padding: 90px 0; }

#con04 h2 .bg { color: #222222; margin-bottom: 40px; }

#con04 h2 .bg::before { background-color: #ffc6ce; }

#con04 h2 .bg br { display: none; }

#con04 h2 .big { color: #ee2b62; font-size: 82px; }

#con04 .instar { max-width: 1000px; margin: auto; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#con04 .instar div { position: relative; background: #fff; max-width: 440px; width: 48%; padding: 25px 25px 45px 25px; font-size: 18px; text-align: left; margin-top: 70px; -webkit-box-shadow: 30px 30px 50px rgba(0, 0, 0, 0.15); box-shadow: 30px 30px 50px rgba(0, 0, 0, 0.15); }

#con04 .instar div img { width: 100%; }

#con04 .instar div p { color: #444; line-height: 26px; }

#con04 .instar div p:nth-child(1) { font-size: 28px; color: #000; font-weight: 700; }

#con04 .instar div p:nth-child(2) { margin: 20px 0; }

#con04 .instar div p.icon img { width: 100%; display: block; }

#con04 .instar div p.bot { position: absolute; bottom: 20px; }

#con04 .event { background: #ffecef; overflow: hidden; border-radius: 20px; font-size: 24px; line-height: 42px; max-width: 1000px; margin: 50px auto; width: 100%; position: relative; min-height: 240px; -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); }

#con04 .event::after { content: ""; width: 395px; height: 243px; background: url(../img/sec4_img_3.png) no-repeat; position: absolute; right: 20px; bottom: 0; z-index: 1; }

#con04 .event .info { position: relative; z-index: 2; text-align: left; padding: 30px 40px; }

#con04 .event .info > span { font-weight: 700; }

#con04 .event .info > span:nth-of-type(1) { color: #108da0; }

#con04 .event .info > span.bg { position: relative; display: inline-block; font-size: 28px; color: #000; }

#con04 .event .info > span.bg::before { content: ""; width: 103%; height: 25px; background-color: #ffd9df; display: inline-block; position: absolute; bottom: -0px; z-index: 1; left: -2%; }

#con04 .event .info > span.bg > span { position: relative; z-index: 2; }

#con04 .event .info > span.bg:nth-of-type(3), #con04 .event .info > span.bg:nth-of-type(4) { color: #e62a46; }

#con04 .user { max-width: 1000px; margin: auto; width: 100%; }

#con04 .user label { border-radius: 20px; background-color: #fdf5f8; display: block; -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); text-align: left; padding: 20px; position: relative; cursor: pointer; }

#con04 .user label + label { margin-top: 20px; }

#con04 .user label span { color: #000; font-size: 26px; font-weight: 800; display: inline-block; vertical-align: middle; min-width: 190px; }

#con04 .user label span::before { content: ""; width: 8px; height: 8px; background: #f94e67; border-radius: 50%; display: inline-block; margin: 0 15px; position: relative; top: -5px; }

#con04 .user label span button { color: #666; font-size: 20px; font-weight: 600; }

#con04 .user label input[type="text"] { font-size: 28px; border: 0; vertical-align: middle; font-weight: 600; }

#con04 .user label input[type="text"]::-webkit-input-placeholder { color: #cccccc; }

#con04 .user label input[type="text"]:-ms-input-placeholder { color: #cccccc; }

#con04 .user label input[type="text"]::-ms-input-placeholder { color: #cccccc; }

#con04 .user label input[type="text"]::placeholder { color: #cccccc; }

#con04 .user label input[type="text"]:focus { outline: 0; }

#con04 .user label input[type="checkbox"] { display: none; }

#con04 .user label input[type="checkbox"] + p { width: 38px; height: 38px; background: url(../img/checkBox.png) no-repeat; position: absolute; right: 20px; top: 15px; display: block; }

#con04 .user label input[type="checkbox"]:checked + p { background-position: -38px 0; }

#con04 .user > button { letter-spacing: 10px; margin-top: 30px; font-family: 'yg-jalnan'; color: #fff; font-size: 30px; background: #f94e67; display: block; border-radius: 20px; width: 100%; padding: 20px; -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); }

#con04 .user > button::before { content: ""; width: 32px; height: 25px; background: url(../img/sec4_icon1.png) no-repeat; display: inline-block; margin-right: 15px; }

.ager { position: fixed; width: 800px; min-height: 500px; z-index: 100; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border-radius: 20px; -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); padding: 40px 50px; font-size: 18px; line-height: 36px; color: #fff; display: none; }

.ager.on { display: block; }

.ager button { margin: 0 auto; padding: 15px 40px; display: block; font-size: 22px; background: #000; border-radius: 10px; margin-top: 30px; }

.ager p { padding-left: 17px; margin-bottom: 10px; }

.ager p.star { margin-top: 20px; padding-left: 0px; }

.img_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: top; -ms-flex-align: top; align-items: top; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 800px; padding: 150px 0 100px; width: 2000px; position: relative; left: calc(50% - 1100px); }

.img_list .swiper-container { position: relative; width: 100%; }

.img_list .swiper-container > .swiper-slide__content { position: absolute; top: 0; }

.img_list .swiper-slide { position: relative; }

.img_list .swiper-slide img { -o-object-fit: cover; object-fit: cover; display: block; width: 100%; width: 235px; height: 290px; border-radius: 15px; -webkit-transition: all 200ms linear; transition: all 200ms linear; -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); opacity: 0.7; position: relative; }

.img_list .swiper-slide.swiper-slide-active { width: 540px !important; }

.img_list .swiper-slide.swiper-slide-active img { width: 465px !important; height: 574px; -webkit-box-shadow: 25px 25px 15px rgba(0, 0, 0, 0.4); box-shadow: 25px 25px 15px rgba(0, 0, 0, 0.4); opacity: 1; left: 10px; }

.img_list .swiper-button-next, .img_list .swiper-button-prev { width: 60px !important; height: 75px !important; background: url(../img/sec4_icon2.png) no-repeat; top: calc( 50% + 135px) !important; }

.img_list .swiper-button-next { background-position: -60px 0; }

.img_list .swiper-button-next:after, .img_list .swiper-button-prev:after { display: none; }

.img_list .swiper-button-prev, .img_list .swiper-rtl .swiper-button-next { left: calc( 50% - 230px) !important; }

.img_list .swiper-button-next, .img_list .swiper-rtl .swiper-button-prev { right: calc( 50% - 430px) !important; }

@media (max-width: 999px) { section { min-height: auto; padding: 60px 30px; }
  section h2 .bg { font-size: 30px; }
  section h2 .big { line-height: 1.2; }
  section h2 .big br { display: block; }
  #con01 { padding-top: 100px; }
  #con01 h1 { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-transform-origin: left top; transform-origin: left top; }
  #con01 h1.right { -webkit-transform-origin: right top; transform-origin: right top; }
  #con01 > .bg { height: 100%; background-position: center top; background-size: contain; }
  #con01 > .bg span { bottom: auto; top: 150px; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation: none; animation: none; }
  #con01 > .bg span.left { left: 0%; }
  #con01 > .bg span.right { right: -5%; }
  #con01 > div h2 .big { padding-bottom: 130px; }
  #con01 > div h2 .big img { display: none; width: 80%; }
  #con01 > div h2 .big img.mo { display: block; }
  #con02 .big { line-height: 1.2; }
  #con02 .big br { display: block; }
  #con02 .text1 { line-height: 1.2; }
  #con02 .text1 span { display: block; }
  #con03 h2 .big { font-size: 72px; }
  #con04 { padding: 60px 30px 200px; }
  #con04 h2 .big { font-size: 68px; }
  #con04 .event::after { bottom: -40px; }
  #con04 .event .info { padding: 30px 40px 200px; } }

@media (max-width: 767px) { br.mo { display: block; }
  section { padding: 30px 15px 20px; }
  section h2 .bg { font-size: 18px; }
  section h2 .bg::before { height: 15px; bottom: -5px; }
  section h2 .big { font-size: 32px; }
  #con01 { padding-top: 60px; }
  #con01 h1 { -webkit-transform: scale(0.4); transform: scale(0.4); left: 15px; top: 15px; }
  #con01 h1.right { left: auto; right: 15px; }
  #con01 > .bg { height: 100%; }
  #con01 > .bg span { top: 150px; -webkit-transform: scale(0.3); transform: scale(0.3); }
  #con01 > .bg span.left { left: 10%; -webkit-transform-origin: left top; transform-origin: left top; }
  #con01 > .bg span.right { right: 5%; -webkit-transform-origin: right top; transform-origin: right top; }
  #con01 > div h2 .bg { margin-bottom: 15px; }
  #con01 > div h2 .big { padding-bottom: 100px; }
  #con01 > div h2 .big img { width: 300px; }
  #con01 > div video { margin-top: 20px; }
  #con02 { padding-bottom: 30px; }
  #con02 h2 { margin-bottom: 35px; }
  #con02 .box li { border-radius: 20px; }
  #con02 .box li div { border-radius: 15px; padding: 10px  5px 15px; width: calc(100% - 5px); height: calc(100% - 5px); }
  #con02 .box li div .tit { font-size: 13px; }
  #con02 .text1 { font-size: 18px; padding: 20px 0 30px; }
  #con02 .big { font-size: 44px; letter-spacing: -1px; padding: 20px 0; }
  #con02 .text3 { font-size: 16px; line-height: 1.4; }
  #con02 .text3 br { display: none; }
  #con03 h2 { margin-bottom: 30px; }
  #con03 h2 .big { font-size: 36px; }
  #con03 h2 .big span:nth-child(1) { font-size: 70px; }
  #con03 .box li { border-radius: 20px; }
  #con03 .box li div { border-radius: 15px; padding: 10px  5px 15px; width: calc(100% - 5px); height: calc(100% - 5px); }
  #con03 .box li div .img { margin: 0 auto 5px; }
  #con03 .box li div .tit { font-size: 16px; line-height: 1.2; }
  #con04 { padding: 30px 15px 80px; }
  #con04 h2 .big { font-size: 32px; margin-bottom: 0px; }
  #con04 .instar div { margin-top: 30px; padding: 10px 10px 30px 10px; }
  #con04 .instar div p { font-size: 12px; line-height: 1.3; }
  #con04 .instar div p:nth-child(1) { font-size: 18px; }
  #con04 .instar div p:nth-child(2) { margin: 10px 0; }
  #con04 .instar div p:nth-child(2) br { display: none; }
  #con04 .instar div p.bot { bottom: 10px; font-size: 10px; }
  #con04 .event { margin: 20px  auto; font-size: 15px; line-height: 1.4; position: relative; border-radius: 10px; }
  #con04 .event::after { background-size: contain; width: 300px; background-position: center bottom; bottom: 0px; left: calc(50% - 150px); }
  #con04 .event .info { padding: 20px 10px 200px; text-align: center; }
  #con04 .event .info > span.bg { font-size: 16px; }
  #con04 .event .info > span.bg::before { height: 15px; }
  #con04 .user label { border-radius: 10px; padding: 10px; }
  #con04 .user label + label { margin-top: 10px; }
  #con04 .user label span { font-size: 16px; min-width: auto; }
  #con04 .user label span::before { width: 5px; height: 5px; margin: 0 5px; top: -3px; }
  #con04 .user label span button { font-size: 14px; display: block; margin-top: 5px; }
  #con04 .user label input[type="text"] { font-size: 16px; margin-top: 8px; width: 100%; }
  #con04 .user label input[type="checkbox"] + p { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-transform-origin: right top; transform-origin: right top; }
  #con04 .user > button { letter-spacing: 5px; margin-top: 20px; font-size: 24px; border-radius: 10px; }
  .ager { width: 96%; height: auto; left: 2%; top: calc( 50% - 250px); border-radius: 10px; padding: 20px; font-size: 15px; line-height: 1.4; }
  .ager button { padding: 10px 40px; font-size: 18px; border-radius: 8px; margin-top: 20px; }
  .img_list { height: 400px; padding: 100px 0 100px; width: 1000px; left: calc(50% - 538px); }
  .img_list .swiper-slide img { width: 120px; height: 148px; border-radius: 10px; }
  .img_list .swiper-slide.swiper-slide-active { width: 240px !important; }
  .img_list .swiper-slide.swiper-slide-active img { width: 200px !important; height: 247px; }
  .img_list .swiper-button-next, .img_list .swiper-button-prev { -webkit-transform: scale(0.7); transform: scale(0.7); top: calc( 50% + 80px) !important; }
  .img_list .swiper-button-prev, .img_list .swiper-rtl .swiper-button-next { left: calc( 50% - 130px) !important; }
  .img_list .swiper-button-next, .img_list .swiper-rtl .swiper-button-prev { right: calc( 50% - 210px) !important; } }
/*# sourceMappingURL=common.css.map */