@charset "utf-8";

@-webkit-keyframes circleMove{0%{transform:translate(0,0);} 25%{transform:translate(0,-1em);} 50%{transform:translate(1em,0);} 75%{transform:translate(0,1em);} 100%{transform:translate(0,0);}}
@keyframes circleMove{0%{transform:translate(0,0);} 25%{transform:translate(0,-1em);} 50%{transform:translate(1em,0);} 75%{transform:translate(0,1em);} 100%{transform:translate(0,0);}}

@-webkit-keyframes heartBoxShake{0%{-webkit-transform:rotate(0deg);}25%{-webkit-transform:rotate(-4deg);}50%{-webkit-transform:rotate(3deg);}75%{-webkit-transform:rotate(-2deg);}100%{-webkit-transform:rotate(0deg);}}
@keyframes heartBoxShake{0%{transform:rotate(0deg);}25%{transform:rotate(-4deg);}50%{transform:rotate(3deg);}75%{transform:rotate(-2deg);}100%{transform:rotate(0deg);}}

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

#wrap {display:flex; flex-direction:column; min-height:100vh; background:linear-gradient(180deg,rgba(255, 255, 254, 1) 0%,rgba(235, 255, 224, 1) 100%);}
#headerWrap {flex-shrink:0;}
#m_conts {display:flex; position:relative; flex-direction:column; flex-grow:1; justify-content:space-between;}
#m_conts:before,
#m_conts:after {content:""; display:block; position:absolute; background:no-repeat 50% 50% / contain; z-index:0;}
#m_conts:before {width:26em; height:26em; background-image:url(../img/main/img_obj_01.png); bottom:11.2em; left:-6em; animation:circleMove 8s linear infinite; -webkit-animation:circleMove 8s linear infinite;}
#m_conts:after {width:26.5em; height:28.5em; background-image:url(../img/main/img_obj_02.png); bottom:9.85em; right:-4.5em; animation:circleMove 8s linear infinite reverse; -webkit-animation:circleMove 8s linear infinite reverse;}
#m_conts > * {z-index:1; position:relative;}


.mainSection {display:flex; flex-grow:1; padding:3em 1em 0; align-items:center;}
.mainSection > .inner {display:flex; flex-wrap:wrap; justify-content:center; max-width:1460px; align-items:center;}
.mainSection > .inner > * {flex-grow:1;}
@media all and (max-width:1024px) {
	.mainSection > .inner {flex-direction:column; max-width:40.5em;}
}

.mainSection h2 {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; margin-bottom:2.5em;}
.mainSection h2 > * {display:block; position:relative;}
.mainSection h2 strong {font-size:2.5em; font-weight:800; color:#222; font-family:'RiaSans'; word-break:keep-all; text-align:center;}
.mainSection h2 strong em {color:#007e63; background:linear-gradient(90deg,#63d59d 0%,#007e63 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.mainSection h2 strong ~ strong em {color:#f7701c; background:linear-gradient(90deg,rgba(247,148,28,1) 0%,rgba(247,112,28,1) 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.mainSection h2 .icon {display:block; width:4em; height:4em; background:url(../img/main/ico_title.png) no-repeat 50% 50% / contain; margin:0 .6em; -webkit-animation:heartBoxShake 2.8s ease-in-out infinite;animation:heartBoxShake 2.8s ease-in-out infinite;-webkit-transform-origin:50% 70%;transform-origin:50% 70%;}

@media all and (max-width:1024px) {
	.mainSection h2 {font-size:.9em; flex-direction:column;}
}
@media all and (max-width:640px) {
	.mainSection h2 {font-size:.8em;}
}
@media all and (max-width:480px) {
	.mainSection h2 {font-size:.7em;}
}

.mainPopup {display:block; position:relative; border-radius:2.5em; overflow:hidden; width:40.5em; flex-shrink:0; flex-grow:0 !important; margin-right:1.5em;}
.mainPopup .control {display:flex; position:absolute; left:0; right:0; bottom:0; justify-content:center; z-index:2;}
.mainPopup .control > * {display:flex; align-items:center; background:rgba(255,255,255,.6); border-radius:1.5em 1.5em 0 0; padding:0 1.5em; height:2.7em;}
.mainPopup .control h3 {font-family:'RiaSans'; font-weight:800; color:#617663; font-size:13px; margin-right:1em;}
.mainPopup .control button {display:block; position:relative; width:1.3em; height:1.3em; text-indent:-999px; overflow:hidden; background:url(../img/main/spr_icon.svg) no-repeat 0 50% / auto 1.3em;}
.mainPopup .control button + button {margin-left:.15em;}
.mainPopup .control button.prev {background-position-x:0;}
.mainPopup .control button.next {background-position-x:-1.3em;}
.mainPopup .control button.stop {background-position-x:-2.6em;}
.mainPopup .control button.play {background-position-x:-3.9em; display:none;}
.mainPopup .swiper-slide > * {position:relative;}
.mainPopup .swiper-slide > *:before {content:""; display:block; position:relative; padding-top:calc((380 / 810) * 100%); overflow:hidden;}
.mainPopup .swiper-slide img {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:100%; min-height:100%;}
.mainPopup.fix-scroll .swiper-slide a {border-radius:2.5em; overflow:hidden;}

@media all and (max-width:1024px) {
	.mainPopup {max-width:100%; margin:0 auto 2em; flex-shrink:1 !important; flex-grow:1 !important;}
}
@media all and (max-width:640px) {
	.mainPopup {overflow:visible; border-radius:0; display:flex; flex-direction:column-reverse;}
	.mainPopup .slider {border-radius:2.5em; overflow:hidden;}
	.mainPopup .control {position:relative;}
	.mainPopup .control > * {border-radius:0 0 1.5em 1.5em;}
}

.mainQuick {display:block; position:relative; border-radius:2.5em; width:calc(100% - 42em); padding:1.7em 1.9em; background:linear-gradient(180deg,rgba(99,213,157,1) 0%,rgba(0,126,99,1) 100%);}
.mainQuick h3 {position:absolute; top:2em; left:3.4em;}
.mainQuick h3:after {content:""; display:block; position:absolute; width:2.5em; height:2em; background:url(../img/main/ico_quick.svg) no-repeat 50% 50% / contain; left:100%; margin-left:-.3em; top:-.9em; -webkit-animation:heartBounce 0.55s cubic-bezier(.25,.46,.45,.94) infinite alternate; animation:heartBounce 0.55s cubic-bezier(.25,.46,.45,.94) infinite alternate;}
.mainQuick h3 strong {display:block; font-family:'RiaSans'; font-weight:800; color:#fff; line-height:1.4em; font-size:1.75em;}
.mainQuick ul {display:flex; align-items:center; flex-wrap:wrap;}
.mainQuick ul:before {content:"";}
.mainQuick ul:before,
.mainQuick ul > li {display:block; position:relative; padding:.4em; width:50%; flex-grow:1;}
.mainQuick a {display:flex; align-items:center; justify-content:space-between; border-radius:9em; background:rgba(34,34,34,.12); height:3.1em; color:#fff; padding:0 1em 0 1.5em; transition:.3s all; -webkit-transition:.3s all;}
.mainQuick a:after {content:""; display:block; position:relative; width:1.3em; height:1.3em; background:url(../img/main/spr_icon.svg) no-repeat top 50% left -5.2em / auto 1.3em; transition:.3s all; -webkit-transition:.3s all;}
.mainQuick a span {font-size:.9em;font-weight:600;}
.mainQuick a span em {font-size:.85em;font-weight:400;opacity: .7;}
.mainQuick a:hover:after,
.mainQuick a:focus:after {transform:translateX(-.5em); -webkit-transform:translateX(-.5em);}
.mainQuick a:hover,
.mainQuick a:focus {background:rgba(34,34,34,.5);}

@media all and (max-width:1024px) {
	.mainQuick {width:100%;}
}
@media all and (max-width:640px) {
	.mainQuick {padding:1.7em 1em;}
	.mainQuick h3 {position:relative; top:auto; left:auto; text-align:center; margin-bottom:1em;}
	.mainQuick h3:after {left:50%; margin-left:3em;}
	.mainQuick ul:before {display:none;}
	.mainQuick ul > li {width:100%;}
}

.mainNotice {display:flex; align-items:center; justify-content:space-between; position:relative; margin-top:1.5em; background:#fff; border-radius:9em; padding:.8em 2em .8em 3em; box-shadow:.75em 1.25em 2em 0 rgba(45,128,89,.15); margin-left:1.7em;}
.mainNotice:before,
.mainNotice:after {content:""; display:block; position:absolute; width:4.8em; height:4.8em; background:no-repeat 50% 50% / contain; top:50%; left:-2.2em; margin-top:-2.4em;}
.mainNotice:before {background-image:url(../img/main/ico_notice.png); -webkit-animation:heartBoxShake 2.8s ease-in-out infinite reverse; animation:heartBoxShake 2.8s ease-in-out infinite reverse;-webkit-transform-origin:50% 70%;transform-origin:50% 70%;}
.mainNotice:after {background-image:url(../img/main/ico_notice2.png)}
.mainNotice .tit {display:flex; align-items:center; justify-content:space-between; width:7.3em; flex-shrink:0;}
.mainNotice .tit h3 {font-size:1.3em; color:#444; font-weight:800; line-height:1.4em;}
.mainNotice .tit .more {display:block; position:relative; text-indent:-999px; overflow:hidden; width:1.3em; height:1.3em; background:url(../img/main/spr_icon.svg) no-repeat top 50% left -6.5em / auto 1.3em;}

.mainNotice .slider {margin:0 1em; flex-grow:1; height:3.2em; max-width:50.65em;}
.mainNotice .slider .swiper-container {height:100%;}
.mainNotice .slider .swiper-slide {width:50%; padding:0 1.75em;}
.mainNotice .slider .swiper-slide a {display:flex; align-items:center; justify-content:space-between; height:3.2em;}
.mainNotice .slider .swiper-slide a strong {display:block; position:relative; white-space:nowrap; font-weight:600; overflow:hidden; text-overflow:ellipsis; flex-grow:1; margin-right:1em; font-size:.9em; color:#222; padding-left:calc((22 / 18) * 1em);}
.mainNotice .slider .swiper-slide a strong:before {content:""; display:block; position:absolute; font-size:calc((20 / 18) * 1em); top:0; bottom:0; left:0; color:#222; width:.4em; background:url(../img/main/spr_icon.svg) no-repeat top 50% left -10.4em / auto 1.3em;}
.mainNotice .slider .swiper-slide a span {font-size:.8em; color:#666; flex-shrink:0;}

.mainNotice .control {display:flex; align-items:center; flex-direction:column; height:3.2em; width:1.85em; flex-shrink:0; background:#EFEFEF; border-radius:9em;}
.mainNotice .control button {display:block; position:relative; flex-grow:1;text-indent:-999px; overflow:hidden; width:1.3em; height:1.3em; background:url(../img/main/spr_icon.svg) no-repeat top 50% left -7.8em / auto 1.3em;}
.mainNotice .control button.next {background-position-x:-9.1em;}

.mainNotice .slider .no-data {display:block; line-height:3.6em; color:#777; font-size:.9em;}

@media all and (max-width:1024px) {
	.mainNotice {margin-left:0; width:100%;}
	.mainNotice .slider .swiper-slide {width:100%; padding:0;}
}
@media all and (max-width:870px) {
	.mainNotice {padding-left:4em;}
	.mainNotice:before,
	.mainNotice:after {font-size:.7em; left:.5em;}
	.mainNotice .tit {width:5em;}
	.mainNotice .tit h3 {font-size:1em;}
}
@media all and (max-width:580px) {
	.mainNotice .slider .swiper-slide a strong {margin:0;}
	.mainNotice .slider .swiper-slide a span {display:none;}
}
@media all and (max-width:490px) {
	.mainNotice {padding-right:1em;}
	.mainNotice .tit {display:none;}
	.mainNotice .slider {margin-left:0;}
}


.mainFooter {display:flex; align-items:cenetr; text-align:center; justify-content:center; flex-wrap:wrap; padding:2.5em 1em 1.75em;}
.mainFooter > * {display:block; font-size:.75em; color:#777777; line-height:1.5em; margin:0 2em;}
.mainFooter strong {font-weight:400;}
.mainFooter strong:after {content:"|"; margin:0 1em;}
.mainFooter .copy {width:100%;}