@charset "utf-8";
/* Animating */
@-webkit-keyframes ani-turnRight{0%{-webkit-transform:rotate(0); transform:rotate(0)}100%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}}
@keyframes ani-turnRight{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}}

@-webkit-keyframes ani-turnLeft{0%{-webkit-transform:rotate(0); transform:rotate(0)}100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}}
@keyframes ani-turnLeft{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}}

@-webkit-keyframes ani-turnRight2{0%{-webkit-transform:rotate(0); transform:rotate(0)}100%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}
@keyframes ani-turnLeft{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}

@-webkit-keyframes ani-belling {0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(30deg);transform:rotate(30deg)}}
@keyframes ani-belling {0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(30deg);transform:rotate(30deg)}}

@-webkit-keyframes ani-belling2 {0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}
@keyframes ani-belling2 {0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}


#m_conts {min-height:50vh;}
.mainSection {position:relative; padding-left:2.5em; padding-right:2.5em;}
.mainSection h2, .mainSection h3 {position:relative; margin-bottom:1em;}
.mainSection > h2 > strong,
.mainSection > h3 > strong {display:block;}
.mainSection + .mainSection {margin-top:8em;}
footer {margin-top:0;}

@media all and (max-width:1024px) {
	.mainSection + .mainSection {margin-top:7em;}
}

@media all and (max-width:640px) {
	.mainSection + .mainSection {margin-top:7em; padding-right:1.5em; padding-left:1.5em;}
}

/* --------------------------------------------------
	a태그 빛 효과 : glow 클래스 추가
----------------------------------------------------- */
.mainSection a.btn.glow {overflow:hidden; transition:all .5s ease-in-out; }
.mainSection a.btn.glow:before {content:" "; display:block; width:50em; height:4em; background:rgba(255, 255, 255, .15); position:absolute; top:-10px; left:-800px; transform:rotate(-45deg); transition:all .9s ease-in-out;}
.mainSection a.btn.glow:hover:before {margin-left:300%;}


@keyframes cursor{ 
  0%{border-right: 1px solid #fff} 
  50%{border-right: 5px solid #ddd} 
  100%{border-right: 1px solid #fff} 
}

/* --------------------------------------------------
	mainIntroWrap
----------------------------------------------------- */

.mainIntroWrap {padding-top:8em; padding-bottom:8em;}
.mainIntroWrap > .inner {display:flex;max-width:1520px;flex-direction:row;flex-wrap: nowrap;justify-content:space-between;align-items:flex-start;}
.mainIntroWrap .Lcont {width:40em;}
.mainIntroWrap .Lcont .typing-txt {display:inline-block; min-height:3em; font-size:3.2em; font-weight:900; letter-spacing: -.02em; word-break:keep-all; vertical-align:middle;}
.mainIntroWrap .Lcont .typing-txt em {color:#2D27DE;  font-family:'nexonfootballB'; font-weight:bold;}
.mainIntroWrap .Lcont .typing-txt .point {display:inline-block; color:#2D27DE;}
 
.mainIntroWrap .Lcont .txt {margin-bottom:3.1em;}
.mainIntroWrap .Lcont .txt > * {display:inline-block; color:#333; font-weight:700;}
.mainIntroWrap .Lcont a {position:relative; display:block; width:18em; padding:1em 2em 1em 4em; background:#2D27DE url(../img/common/intro_free_ico.svg) no-repeat top 50% left 2em; color:#fff; border-radius:5em; text-align:left;}
.mainIntroWrap .Lcont a span {font-size:.9em; font-weight:800;}
.mainIntroWrap .Lcont a .arrow {display: inline-block; position:absolute; left:70%; top:50%; transform: translateY(-50%); width:3em; height:3px; background:#fff; border-radius:3px; margin-right:2em; transition:all .5s ease-in-out;}
.mainIntroWrap .Lcont a .arrow:after {content: ''; position:absolute; right:0; top:50%; display:block; transform: translateY(-50%); display:block; background: url(../img/common/btn_ico_arrow.svg) no-repeat 0 0;width:.706em; height:1em; margin-right: -.3em;background-size: contain;}
.mainIntroWrap .Lcont a:hover {width:20em;}
.mainIntroWrap .Lcont a:hover .arrow {width:4em;}

.mainIntroWrap .Rcont {position:absolute; right:-1em; top:-2em; z-index:1;}
.mainIntroWrap .Rcont .obj {width:38.05em; height:26.75em; background:url(../img/common/puppy_ty1.svg) no-repeat 50% 50%; background-size:contain;}
.mainIntroWrap .Rcont .obj:before {content:""; display:block; position:relative; background:no-repeat center bottom; background-size:contain; left:13em; top:11em; width:10em; height:7em; background-image:url(../img/common/puppy_ty1_arm.svg);}
.mainIntroWrap .Rcont .obj:before {-webkit-animation:ani-turnLeft 1.1s linear infinite alternate both; animation:ani-turnLeft 1.1s linear infinite alternate both;}
.mainIntroWrap .Rcont::before {content:''; position:absolute; width:2.4em; height:2.7em; left:3em; bottom:1em; background-image:url(../img/main/obj_twinkle01.svg); animation-delay:.6s; transform:scale(1); animation:fireworks1 1s infinite alternate; z-index:9; background-size:100%;}
.mainIntroWrap .Rcont::after {content:''; position:absolute; width:2.65em; height:3.2em; right:1em; top:-1em; background-image:url(../img/main/obj_twinkle02.svg); animation-delay:.6s; transform:scale(1); animation: fireworks1 2s infinite alternate; background-size:100%;}

@keyframes fireworks1 {
    0% {
        transform:scale(.3);
        opacity:0;
    }

    100% {
        transform: scale(1);
    }
}


@media all and (max-width:1800px) {
	.mainIntroWrap .Rcont {position:absolute; right:-1em; top:auto; bottom:-10em; }
	.mainIntroWrap .Rcont .obj {width:29em; height:20em;}
	.mainIntroWrap .Rcont .obj:before {left:10.5em; top:8.5em; width:7em; height:5em;}
}
@media all and (max-width:1140px) {
	.mainIntroWrap > .inner {display:block; }
	.mainIntroWrap .Rcont {width:auto;margin-top:2em;}
}

@media all and (max-width:1024px) {
	.mainIntroWrap {padding:0; padding-top:7em; padding-bottom:5em;}
	.mainIntroWrap .Lcont  {text-align:center; width:100%;}
	.mainIntroWrap .Lcont .typing-txt {display:block; font-size:2.5em; text-align:center;}
	.mainIntroWrap .Lcont a {margin:0 auto;}
	.mainIntroWrap .Rcont {position:relative; right:auto; top:auto; bottom:auto;}
	.mainIntroWrap .Rcont .obj {margin:0 auto; }
}

@media all and (max-width:640px) {
	.mainIntroWrap .Lcont .typing-txt {font-size:1.8em;}
	.mainIntroWrap .Rcont .obj {width:20em; height:15em;}
	.mainIntroWrap .Rcont .obj:before {left:7.2em; top:5em; width:5em; height:5em;}
}


/* --------------------------------------------------
	mainAboutWrap
----------------------------------------------------- */

.mainAboutWrap {padding:8em 0; background:#EFF1F7; margin-top:0!important;}
.mainAboutWrap > .inner {display:flex; max-width:1520px; flex-direction:column; flex-wrap:wrap; justify-content:center; align-items:center; text-align:center;}
.mainAboutWrap h3 > strong {display:block;}
.mainAboutWrap h3 > * {display:inline-block; font-size:2.4em; font-weight:900; letter-spacing: -.02em; word-break:keep-all; vertical-align:middle;}
.mainAboutWrap h3 em.logo {display:inline-block; width:2.4064em; height:1.2032em; background:url(../img/common/logo_blue.svg) no-repeat 50% 50%; background-size:contain; overflow:hidden; text-indent:-9999px; vertical-align:middle;}
.mainAboutWrap .txt {margin-top:1.5em; margin-bottom:4.5em;}
.mainAboutWrap .txt > p + p {margin-top:2em;}
.mainAboutWrap a {position:relative; display:block; width:13.5em; padding:1em 2em 1em 4em; background:#0F62FD url(../img/common/about_chat_ico.svg) no-repeat top 53% left 2.5em; color:#fff; border-radius:5em; text-align: left;}
.mainAboutWrap a span {font-size:.9em; font-weight:800;}
.mainAboutWrap a .arrow {display:inline-block; position:absolute; left:65%; top:50%; transform:translateY(-50%); width:3em; height:3px; background:#fff; border-radius:3px;margin-right:2em;transition:all .5s ease-in-out;}
.mainAboutWrap a .arrow:after {content: ''; position:absolute; right:0; top:50%; display:block; transform:translateY(-50%); display:block; background: url(../img/common/btn_ico_arrow.svg) no-repeat 0 0;width:.706em; height:1em; margin-right: -.3em;background-size: contain;}
.mainAboutWrap a:hover {width:15.5em;}
.mainAboutWrap a:hover .arrow {width:4em;}


.mainAboutWrap .icons ul li.icon {position:absolute; display:block; width:5em; height:5em; background:#fff; border-radius:.5em; overflow:hidden; box-shadow:0 0 1em 0 rgba(0,0,0,0.05);}
.mainAboutWrap .icons ul .ty1 {left:15%; top:0%; opacity:0; animation:icons1 4s linear infinite; animation-fill-mode:forwards;}
.mainAboutWrap .icons ul .ty2 {right:15%; top:0%; opacity:0; animation:icons1 4s linear infinite; animation-fill-mode:forwards;}
.mainAboutWrap .icons ul .ty3 {left:5%; top:50%; opacity:0; animation:icons2 5s linear infinite; animation-fill-mode:forwards; animation-delay:.5s;}
.mainAboutWrap .icons ul .ty4 {right:5%; top:50%; opacity:0; animation:icons1 5s linear infinite; animation-fill-mode:forwards; animation-delay:.5s;}
.mainAboutWrap .icons ul .ty5 {left:20%; top:90%; opacity:0; animation:icons1 6s linear infinite; animation-fill-mode:forwards; animation-delay:.7s;}
.mainAboutWrap .icons ul .ty6 {right:20%; top:90%;opacity:0; animation:icons2 6s linear infinite; animation-fill-mode:forwards; animation-delay:.7s;} 

@keyframes icons1 { 
  10%{
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  80%{
    opacity: 0;
    transform: translateY(-100px);
  }
  100%{
    opacity: 0;
    transform: translateY(-100px);
  }
}

@keyframes icons2 {
  10%{
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  80%{
    opacity: 0;
    transform: translateY(-80px);
  }
  100%{
    opacity: 0;
    transform: translateY(-80px);
  }
}

@media all and (max-width:1140px) {
	.mainAboutWrap {padding:7em 0;}
	.mainAboutWrap h3 > *  {font-size:2em;}
	.mainAboutWrap .icons ul li.icon {width:4em; height:4em;}
}

@media all and (max-width:1024px) {
	.mainAboutWrap .icons {display:none;}
}

@media all and (max-width:640px) {
	.mainAboutWrap h3 > *  {font-size:1.8em;}
}
/* --------------------------------------------------
	mainFunctionWrap
----------------------------------------------------- */

.mainFunctionWrap h3 em:after {content:''; display:inline-block; width:.577em; height:.577em; margin-right:-1em; background:url(../img/main/ico_funtion_tit.svg) no-repeat 0 0; background-size:contain; position:absolute; right:0;}
.mainFunctionWrap h3 > strong {display:block;}
.mainFunctionWrap h3 > * {display:inline-block; font-size:2.6em; font-weight:900; letter-spacing: -.02em; word-break:keep-all; vertical-align:middle; position:relative;}
.mainFunctionWrap .tab-group > .inner  {display:flex; max-width:1520px; flex-wrap:nowrap; align-items:flex-start; flex-direction: row; justify-content:space-between;}

.mainFunctionWrap .tab-group .Lcont .txt p:last-child {font-weight:700;}
.mainFunctionWrap .tab-group .tabs ul  {display:flex; width:49.5em; gap:1.5em; flex-direction:row; flex-wrap:nowrap; justify-content:center;}
.mainFunctionWrap .tab-group .tabs ul li {width:25%; }
.mainFunctionWrap .tab-group .tabs ul li button {display:flex; width:100%; flex-direction:column; flex-wrap:wrap; align-items:center; justify-content:center; padding:1.5em 1em; border:1px solid #E6E6E6; border-radius:.5em; text-align:center; box-sizing:border-box;}
.mainFunctionWrap .tab-group .tabs ul li button i {display:block; width:2.85em; height:2.85em; background:url(../img/main/ico_function01.svg) no-repeat 0 0; background-size:contain;}
.mainFunctionWrap .tab-group .tabs ul li button i.ty2 {background:url(../img/main/ico_function02.svg) no-repeat 0 0; background-size:contain;}
.mainFunctionWrap .tab-group .tabs ul li button i.ty3 {background:url(../img/main/ico_function03.svg) no-repeat 0 0; background-size:contain;}
.mainFunctionWrap .tab-group .tabs ul li button i.ty4 {background:url(../img/main/ico_function04.svg) no-repeat 0 0; background-size:contain;}
.mainFunctionWrap .tab-group .tabs ul li button h4 {margin:.75em 0 .5em; font-weight:800; color:#111;}
.mainFunctionWrap .tab-group .tabs ul li button p {color:#444; font-size:.8em;}
.mainFunctionWrap .tab-group .tabs ul li:hover button,
.mainFunctionWrap .tab-group .tabs ul li:focus button {box-shadow:0 0 1em 0 rgba(0,0,0,0.05);}
.mainFunctionWrap .tab-group .tabs ul li:hover button:before,
.mainFunctionWrap .tab-group .tabs ul li:focus button:before,
.mainFunctionWrap .tab-group .tabs ul li button.on:before {content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:2px solid #2D27DE; border-radius:.5em;}

.mainFunctionWrap li button .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;}
.mainFunctionWrap li button.on .selected {display:block;}
.mainFunctionWrap .tab-con {display:none; position:relative; padding:3em 5em 4em; background:#EFF1F7; border-radius:1em; text-align:center;}
.mainFunctionWrap .tab-con.on {display:block;}
.mainFunctionWrap .tab-con video {width:100%; border-radius:1em; text-align:center;}
.mainFunctionWrap .tab-content {position:relative; margin-top:6em;}
.mainFunctionWrap .btnWrap {position:absolute; display:block; left:50%; bottom:0; transform: translateX(-50%); margin-bottom:-1.5em;}
.mainFunctionWrap .btnWrap a {position:relative; display:block; width:13.5em; padding:1em 2em; background:#2D27DE; border-radius:5em;  text-align:left; display:flex; align-items:center; justify-content:space-between;}
.mainFunctionWrap .btnWrap a span {font-size:.9em; font-weight:800; color:#fff;}
.mainFunctionWrap .btnWrap a .arrow {display:inline-block; width:3em; height:3px; background:#fff; transition:all .5s ease-in-out; position:relative; border-radius:10px;}
.mainFunctionWrap .btnWrap a .arrow:after {content: ''; position:absolute; right:0; top:50%; display:block; transform:translateY(-50%); display:block; background: url(../img/common/btn_ico_arrow.svg) no-repeat 0 0;width:.706em; height:1em; margin-right: -.3em;background-size: contain;}
.mainFunctionWrap .btnWrap a:hover {width:14.5em;}
.mainFunctionWrap .btnWrap a:hover .arrow {width:4em;}



@media all and (max-width:1480px) {
	.mainFunctionWrap .tab-group > .inner {flex-direction:column; align-items:center; text-align:center;}
	.mainFunctionWrap .tab-group > .inner > div + div {margin-top:2em;}
	.mainFunctionWrap h3 > strong {display:inline-block;}
	.mainFunctionWrap h3 em:after {right:0;}
}

@media all and (max-width:1140px) {
	.mainFunctionWrap h3 > * {font-size:2em;}
}

@media all and (max-width:1024px) {
	.mainFunctionWrap h3 > strong {display:block;}
	.mainFunctionWrap .tab-group .tabs ul {flex-wrap:wrap;width: auto;}
	.mainFunctionWrap .tab-group .tabs ul li {width: 45%;}
	.mainFunctionWrap .tab-con {padding:2em 2em 3em;}
	.mainFunctionWrap .tab-content {margin-top:3em;}
	.mainFunctionWrap .tab-group .Lcont .txt p {display:inline-block}
}

@media all and (max-width:640px) {
	.mainFunctionWrap h3 > * {font-size:1.8em;}
	.mainFunctionWrap .tab-con {padding:1em .5em 3em;}
	.mainFunctionWrap .tab-group .tabs ul li button {padding:1.5em .5em;}
}


/* --------------------------------------------------
	mainReviewWrap
----------------------------------------------------- */

.mainReviewWrap h3 > strong {display:block;}
.mainReviewWrap h3 > * {display:inline-block; font-size:2.6em; font-weight:900; letter-spacing: -.02em; word-break:keep-all; vertical-align:middle; position:relative;}
.mainReviewWrap h3 em {color:#3367F8;}
.mainReviewWrap h3 em.logo {display:inline-block; width:2.4064em; height:1.2032em; background:url(../img/common/logo_black.svg) no-repeat 50% 50%; background-size:contain; overflow:hidden; text-indent:-9999px; vertical-align:middle;}
.mainReviewWrap h3 strong + em:after {content:''; display:inline-block; width:.577em; height:.577em; margin-right:-1em; background:url(../img/main/ico_review_tit.svg) no-repeat 0 0; background-size:contain; position:absolute; right:0;}

.mainReviewWrap .ConReview > .inner {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; align-content:center; max-width:1520px;}

.mainReviewWrap .ConReview .ReviewList {max-width:44.5em;}
.mainReviewWrap .ConReview .ReviewList ul li {position:relative; border:2px solid #EFEDED; background:#fff; border-radius:1em 1em 0 1em;  padding:1.2em 2em 1.2em 2.5em;}
.mainReviewWrap .ConReview .ReviewList ul li .box {position:relative; display:block;}
.mainReviewWrap .ConReview .ReviewList ul li .box .icon {position:relative;}
.mainReviewWrap .ConReview .ReviewList ul li .box .icon:before {content:''; position:absolute; display:block; top:50%; left:0; margin-left:-4.5em; width:3.5em; height:3.5em; background-image:url(../img/main/ico_review_male.svg); background:no-repeat 50% 50%; border-radius:100%; overflow:hidden; }
.mainReviewWrap .ConReview .ReviewList ul li .box .icon.male:before {background-image:url(../img/main/ico_review_male.svg);}
.mainReviewWrap .ConReview .ReviewList ul li .box .icon.female:before {background-image:url(../img/main/ico_review_female.svg);}
.mainReviewWrap .ConReview .ReviewList ul li .box .name {margin-bottom:.5em; font-weight:800; font-size:.9em;}
.mainReviewWrap .ConReview .ReviewList ul li .box .txt {font-size:.85em; color:#444;}
.mainReviewWrap .ConReview .ReviewList ul li .box .txt > * {display:block;}
.mainReviewWrap .ConReview .ReviewList ul li .box .star {display:block; position:absolute; right:0; top:0; width:4em; height:.8em; background:url(../img/main/ico_star.svg) no-repeat 0 0; background-size:contain;}

.mainReviewWrap .slider .swiper-container {padding-left:3em; height:26em;}

.mainReviewWrap .ConReview .ReviewList .control {display:block; position:absolute; top:0; margin-top:14em; left:0;}
.mainReviewWrap .ConReview .ReviewList .control button {display:inline-block; position:relative; width:1em; height:1em; text-indent:-9999px; overflow:hidden; vertical-align:middle;}
.mainReviewWrap .ConReview .ReviewList .control button:before {content:''; display:block; position:absolute; width:1em; height:1em; background:url(../img/main/spr_prev.svg) no-repeat 0 0; background-size:contain;}
.mainReviewWrap .ConReview .ReviewList .control button.next:before {background:url(../img/main/spr_next.svg) no-repeat 0 0; background-size:contain;}
.mainReviewWrap .ConReview .ReviewList .control button + button {margin-left:2.3em;}
.mainReviewWrap .ConReview .ReviewList .control:before {content:''; display:block; position:absolute; top:0; left:50%; margin-right:-.5em; height:1.35em; border-left:1px solid #ccc;}

.mainReviewWrap .Card-box {margin-top:6.2em; padding:3.5em 5em; background:#EFF1F7; border-radius:1em;}
.mainReviewWrap .Card-box ul {display:flex; gap:2em; flex-direction:row; flex-wrap:nowrap; align-content:center;}
.mainReviewWrap .Card-box ul li {display:block; width:33.33%; padding:2.5em 0 3em; background:#fff; border-radius:1em; text-align:center;}
.mainReviewWrap .Card-box ul li > * {display:block;}
.mainReviewWrap .Card-box ul li > * + * {margin-top:.75em;}
.mainReviewWrap .Card-box ul li .counter {color:#3367F8; font-size:2em; font-weight:900; }
.mainReviewWrap .Card-box ul li strong {font-size:1.5em; font-weight:900; }
.mainReviewWrap .Card-box ul li .tit {font-size:1.1em; font-weight:800;}
.mainReviewWrap .Card-box ul li .txt {font-size:.9em; color:#333;}

.mainReviewWrap .puppy {width:26em; height:16em; background:url(../img/common/puppy_ty2.svg) no-repeat 50% 50%; background-size:contain; position:absolute; bottom:-8em; z-index:2; left:-2em; }
.mainReviewWrap .puppy:before {content:""; display:block; position:relative; background:no-repeat center bottom; background-size:contain; left:13em; top:11.7em; width:6em; height:2.7em; background-image:url(../img/common/puppy_ty2_arm.svg);}
.mainReviewWrap .puppy:before {-webkit-animation:ani-turnRight2 1.1s linear infinite alternate both; animation:ani-turnRight2 1.1s linear infinite alternate both;}
.mainReviewWrap .puppy:after {content:""; display:block; position:relative; background:no-repeat center bottom; background-size:contain; left:3em; top:-1em; width:5em; height:5em; background-image:url(../img/common/puppy_ty2_speech.svg);}
.mainReviewWrap .puppy:after {-webkit-animation:ani-bounce-ball 1s cubic-bezier(.165,.84,.44,1.00) infinite alternate both;animation:ani-bounce-ball 1s cubic-bezier(165,.84,.44,1.00) infinite alternate both;}

.flow-wrap  {position:absolute; top:42%; left:0; display:flex; z-index:-1;}
.flow-wrap .flowing-txt {display:flex; flex:0 0 auto; white-space: nowrap; overflow:hidden; transition:0.3s; font-size:5em; font-weight:900; color:#F3F3F3;}
.flow-wrap .flowing-txt p {animation:textLoop 25s linear infinite; padding-right:1em; letter-spacing:5px;}


@media all and (max-width:1400px) {
	.mainReviewWrap .ConReview .ReviewList {max-width:30em;}
	.mainReviewWrap .slider .swiper-container {height:32em;}
}

@media all and (max-width:1140px) {
	
	.mainReviewWrap h3 {display:inline-block;}
	.mainReviewWrap h3 > strong {display:inline-block;}
	.mainReviewWrap h3:after {top:0; margin-right:-2em;}
	.mainReviewWrap h3 > * {font-size:2em;}
	
	.mainReviewWrap .ConReview > .inner {display:block; }
	.mainReviewWrap .ConReview > .inner .Lcont {text-align:left; margin-bottom:7em;}
	.mainReviewWrap .ConReview > .inner > div + div {margin-top:2em;}
	.mainReviewWrap .ConReview .ReviewList {max-width:100%;}
	.mainReviewWrap .ConReview .ReviewList .control {top:8em; margin-top:0;}
	.mainReviewWrap .slider .swiper-container {padding-left:2em; height:24em;}
	
	.mainReviewWrap .puppy {width:18em; height:10em; top:3em; right:0; left:auto;}
	.mainReviewWrap .puppy:before {left:9em; top:7.3em; width:4em; height:2em; background-image:url(../img/common/puppy_ty2_arm.svg);}
	.mainReviewWrap .puppy:after {display:none;}
	.mainReviewWrap .Card-box {padding:1.5em 2em;}
	.mainReviewWrap .Card-box ul li {padding:1.5em 0 2em;}
	.mainReviewWrap .ConReview .ReviewList ul li {padding:1em 1em 1em 2.5em;}
	.mainReviewWrap .Card-box ul li .counter {font-size:1.5em;}
	.flow-wrap {top:auto;}
}

@media all and (max-width:1024px) {
	.mainReviewWrap .Card-box ul {flex-wrap:wrap;}
	.mainReviewWrap .Card-box ul li {width:100%;}
	.mainReviewWrap .ConReview .ReviewList ul li .box .txt > * {display:inline;}
	.mainReviewWrap .Card-box ul li strong {font-size:1.2em;}
}

@media all and (max-width:640px) {
	.mainReviewWrap h3 > * {font-size:1.8em;}
	.mainReviewWrap .Card-box ul li .ico,
	.mainReviewWrap .Card-box ul li .ico > * {height:3.5em;}
	.mainReviewWrap .Card-box ul li > * + * {margin-top:0.5em;}
	.mainReviewWrap .Card-box ul li strong {font-size:1em;}
	.mainReviewWrap .ConReview > .inner .Lcont {text-align:center; }
	.mainReviewWrap .ConReview .ReviewList .control {top:8em; margin-top:0; left:50%; transform:translateX(-50%); webkit-transform:translateX(-50%);}
	.mainReviewWrap .slider .swiper-container {height:22em;}
	.mainReviewWrap .puppy {display:none;}
	
	
}

@media all and (max-width:450px) {
	.mainReviewWrap .slider .swiper-container {height:23em;}
}


/* --------------------------------------------------
	mainRecommWrap
----------------------------------------------------- */

.mainRecommWrap {text-align:center;}
.mainRecommWrap .tit {position:relative; display:inline-block;}
.mainRecommWrap h3 > strong {display:block;}
.mainRecommWrap h3 > * {display:inline-block; font-size:2.4em; font-weight:900; letter-spacing: -.02em; word-break:keep-all; vertical-align:middle;}
.mainRecommWrap h3 em.logo {display:inline-block; width:2.4064em; height:1.2032em; background:url(../img/common/logo_purple.svg) no-repeat 50% 50%; background-size:contain; overflow:hidden; text-indent:-9999px; vertical-align:middle;}

.mainRecommWrap .slider .swiper-container {width:78em; padding:4em 1em 1em 1em;}
.mainRecommWrap .slider .swiper-container .swiper-slide {min-width:13.5em; width:13.5em;}
.mainRecommWrap .slider .swiper-container .swiper-slide:nth-child(even) {margin-top:3em;}
.mainRecommWrap ul li {position:relative; width:20%;}
.mainRecommWrap ul li div {position:relative; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; border-radius:1em; height:12.5em; background:#fff; box-shadow:0 0 1em 0 rgba(0,0,0,0.05);}
.mainRecommWrap ul li strong {display:block; font-weight:800;}
.mainRecommWrap ul li div i {position:absolute; left:50%; top:0; margin-top:-1.75em; transform:translateX(-50%); width:3.5em; height:3.5em; background:url(../img/main/ico_people01.svg) no-repeat 0 0; background-size:contain;} 

.mainRecommWrap ul li div i.ty2  {background:url(../img/main/ico_people02.svg) no-repeat 0 0; background-size:contain;}
.mainRecommWrap ul li div i.ty3 {background:url(../img/main/ico_people03.svg) no-repeat 0 0; background-size:contain;}
.mainRecommWrap ul li div i.ty4 {background:url(../img/main/ico_people04.svg) no-repeat 0 0; background-size:contain;}
.mainRecommWrap ul li div i.ty5 {background:url(../img/main/ico_people05.svg) no-repeat 0 0; background-size:contain;}

.mainRecommWrap .tit .fireEffect > * {position:absolute; background-size:auto 100%; background:no-repeat 0 0; }
.mainRecommWrap .tit .fireEffect .ty1 {width:2.4em; height:2.7em; left:0; bottom:0; margin-left:-9em; margin-bottom:2em; background-image:url(../img/main/obj_twinkle01.svg); animation-delay:.6s; transform:scale(1); animation:fireworks1 1s infinite alternate;}
.mainRecommWrap .tit .fireEffect .ty2 {width:2.65em;height:3.2em; right:0; bottom:0; margin-right:-8em; margin-bottom:5em; background-image:url(../img/main/obj_twinkle02.svg);animation-delay:.6s;transform:scale(1);animation: fireworks1 2s infinite alternate;}


@media all and (max-width:1480px) {
	.mainRecommWrap h3 > * {font-size:2em;}
	.mainRecommWrap h3 > strong {display:inline-block;}
	
}


@media all and (max-width:640px) {
	.mainRecommWrap h3 > * {font-size:1.8em;}
	.mainRecommWrap .slider .swiper-container {width:auto;}
	.mainRecommWrap .slider .swiper-container .swiper-slide:nth-child(even) {margin-top:0;}
}



/* --------------------------------------------------
	mainAskWrap
----------------------------------------------------- */

.mainAskWrap .inner {max-width:1720px; margin:0 auto; margin-bottom:7em; background-image:url(../img/main/ask_bg.png); background-repeat:no-repeat; background-size:cover; background-attachment:fixed;background-position:center;border-radius:1em;overflow:hidden;}
.mainAskWrap > .inner {display:flex; padding:5.5em 5em; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between;}
.mainAskWrap h3 > strong {display:block;}
.mainAskWrap h3 > * {font-size:2.4em; color:#fff; font-weight:900;}
.mainAskWrap a {position:relative; display:inline-block; padding:1.25em 7.5em 1.25em 4.5em; background:#fff url(../img/common/ask_ico.svg) no-repeat top 50% left 2.5em; color:#312E98; font-size:.9em; font-weight:800; border-radius:5em;}
.mainAskWrap a:after {content:''; display:inline-block; position:absolute; right:2.2em; margin-top:.1em; width:3.875em; height:1.1878em; padding-top:.7em; background:url(../img/common/ico_link_purple.svg) no-repeat top 50% right 0;}

@media all and (max-width:1480px) {
	.mainAskWrap h3 > * {font-size:2em;}
	
}

@media all and (max-width:960px) {
	.mainAskWrap h3 {text-align:center; margin-bottom:1em;}
	.mainAskWrap h3 > * {font-size:1.5em;}
	.mainAskWrap > .inner {flex-wrap:wrap; flex-direction:column; justify-content:center; padding:3em 1em;}
}