/* 
section> .content-wrap > title-cont > h2 > p.description > span.detail
section> .content-wrap > text-cont > p.title > p.description > span.detail
section> .content-wrap > img-cont > img > p.description > span.detail
section> .content-wrap > item-cont > item > p.title > p.descripton > span.detail
·
*/
/* sub common 시작 */
body{background-color: #fff;}
.sub-common{}
.sub-common .flex-cont{display: flex;}
.sub-common .sub-pc{display: block;}
.sub-common .sub-mo{display: none !important;}
.sub-common .sub-mo-flex{display: none !important;}
.sub-common .sub-mo-inline{display: none !important;}
.sub-common .sub-mo-grid{display: none !important;}

.sub-common .content-wrap{}
.sub-common .title-cont{}
.sub-common .title-cont h2{}
.sub-common .title-cont .description{}
.sub-common .title-cont .detail{}

.sub-common .text-cont{}
.sub-common .text-cont{}
/* sub common 끝 */

/* sub6-1 skinbooster 시작*/

/* sub6-1 skinbooster 끝*/

/* 애니메이션 시작*/
/* 하 to 상 */
@keyframes slideUpFade {
    from {opacity: 0;transform: translateY(50px);}
    to {opacity: 1;transform: translateY(0);}
}
/* 좌 to 우 */
@keyframes slideLeftFade {
    from {opacity: 0;transform: translateX(-50px);}
    to {opacity: 1;transform: translateX(0);}
}
/* 우 to 좌 */
@keyframes slideRightFade {
    from {opacity: 0;transform: translateX(50px);}
    to {opacity: 1;transform: translateX(0);}
}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes zoomInFade {
    from {opacity: 0;transform: scale(1.1);}
    to {opacity: 1;transform: scale(1);}
}

.reveal-up {opacity: 0;animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-up.active {animation-name: slideUpFade;}
.reveal-left {opacity: 0; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-left.active {animation-name: slideLeftFade;}
.reveal-right {opacity: 0; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-right.active {animation-name: slideRightFade;}
.reveal-bg {opacity: 0; animation-duration: 1.2s; animation-timing-function: ease-in-out; animation-fill-mode: forwards;}
.reveal-bg.active {animation-name: fadeIn;}
.reveal-zoom-in {opacity: 0; animation-duration: 1.5s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-zoom-in.active {animation-name: zoomInFade;}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.35s; }
.delay-3 { animation-delay: 0.5s; }
.delay-4 { animation-delay: 0.65s; }
.delay-5 { animation-delay: 0.8s; }

.pc-delay-1 { animation-delay: 0.2s; }
.pc-delay-2 { animation-delay: 0.35s; }
.pc-delay-3 { animation-delay: 0.5s; }
.pc-delay-4 { animation-delay: 0.65s; }
.pc-delay-5 { animation-delay: 0.8s; }
/* 애니메이션 끝*/

@media(max-width: 1024px){
    .sub-common .sub-pc{display: none !important;}
    .sub-common .sub-mo{display: block !important;}
    .sub-common .sub-mo-flex{display: flex !important;}
    .sub-common .sub-mo-inline{display: inline !important;}
    .sub-common .sub-mo-grid{display: grid !important;}

    /* 애니메이션 시작 */
    .pc-delay-1 { animation-delay: unset; }
    .pc-delay-2 { animation-delay: unset; }
    .pc-delay-3 { animation-delay: unset; }
    .pc-delay-4 { animation-delay: unset; }
    .pc-delay-5 { animation-delay: unset; }
    .mo-delay-1 { animation-delay: 0.2s; }
    .mo-delay-2 { animation-delay: 0.35s; }
    .mo-delay-3 { animation-delay: 0.5s; }
    .mo-delay-4 { animation-delay: 0.65s; }
    .mo-delay-5 { animation-delay: 0.8s; }
    /* 애니메이션 끝 */
}