@charset "utf-8";
/********************
** header
********************/
header{background:transparent; transition: ease-in-out 0.3s;}
header.scroll{background:#fefefe;}
.menu span{border:2px solid #fefefe; border-width:2px 2px 0 0; transform:rotate(45deg)}

/********************
** mainBanner
********************/
.mainBannerA{left:50%;top:70px; transform:translateX(-50%)}
@keyframes bannerWobble {
0% { transform:translateY(0px) rotate(0deg); }
30% { transform:translateY(-8px) rotate(4deg); }
60% { transform:translateY(-7px)  rotate(3deg); }
100% { transform: translateY(-8px)  rotate(4deg); }
}
@keyframes bannerWobbleOut {
0%   { transform: translateY(-8px) rotate(4deg); }
30%  { transform: translateY(0) rotate(0deg); }
60%  { transform: translateY(0) rotate(1deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.mainBannerA .mainBannerAImg {    transform: rotate(0deg);transition: transform 0.3s ease-out; transform-origin: 80% 80%;}
.mainBannerA:hover .mainBannerAImg {animation: bannerWobble 0.3s ease-out forwards;}
.mainBannerA .mainBannerAImg.exit {animation: bannerWobbleOut 0.2s ease-in forwards;}

/********************
** intro
********************/
.aboutPointWord{left:50%; top:50%; transform:translate(-50%, -50%); white-space: nowrap; background: linear-gradient(90deg, #f7f8f8, #fff, #f7f8f8);
    -webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text; text-fill-color: transparent; z-index: -1;}


/********************
** use
********************/
.useCnt{width:calc(25% - 18px)}
.useCntImg{overflow:hidden; line-height: 0;}
.maskImg{overflow:hidden; line-height: 0;}

/********************
** symptom
********************/
.symptomCnt{width:calc(50% - 12px)}

/********************
** how
********************/
.howCnt{width:calc(33.3333% - 16px)}
.howCntDetailNum{left:32px; top:32px}
.seriousTit{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.howCntDetail{bottom:32px}


/********************
** ourEfforts
********************/
.ourEffortsTit .pSpe{color:#2027e9}

/********************
** method
********************/
.methodTit{color:#2027e9}
.methodPart{width:calc(33.333333% - 16px); align-self: stretch;}
.practiceImg{right:0; bottom:0}

/********************
** footer
********************/
.footerImg{right:0; top:0;}
footer a{word-break: break-all;}
footer a span{text-decoration: underline;}

