@charset "UTF-8";
@import "icofont.css";


.fp-watermark {display: none !important;}
/* layout ============================================================================================================*/
body {overflow: hidden;}
body::-webkit-scrollbar {display: none;}

/* header */
#header {width: 100%;position: fixed;top: 0;left: 0;right: 0;z-index: 10;}
#header .header-inner {height: 80px;width: 100%;max-width: 1500px;display: flex;align-items: center;margin: 0 auto;}
#header .header-inner .logo {width: 163px;margin: 0;transition: 0.8s;opacity: 0;}
#header .header-inner .logo img {width: 100%;}
#header .header-inner .mo-page {display: none;width: 57px;text-align: left;margin-left: auto;}
#header .header-inner .mo-page > span {display: block;font-size: 14px;font-weight: 800;line-height: 170%; /* 23.8px */}
#header .header-inner .mo-page .current {color: #FFF;}
#header .header-inner .mo-page .total {color: rgba(255, 255, 255, 0.32);}
#header .header-inner .mo-page .line {display: block;width: 100%;height: 1px;margin: 4px 0;background: #FFF;}

/* content */
#content section {position: relative;height: 100vh;overflow: hidden;}

    /* nav */
    #nav {position: fixed;top: 0;right: 87px;display: flex;align-items: center;justify-content: center;width: 1px;height: 100vh;background: rgba(255, 255, 255, 0.16);z-index: 100;}
    #nav ul li {margin-bottom: 40px;}
    #nav ul li:last-child {margin-bottom: 0;}
    #nav ul li a {display: inline-flex;justify-content: center;align-items: center;width: 29px;height: 29px;border-radius: 100%;transition: 0.3s;}
    #nav ul li a::after {content: '';position: absolute;display: inline-block;width: 7px;height: 7px;border-radius: 100%;background-color: #FFF;}
    #nav ul li.on a {background-color: rgba(255, 255, 255, 0.16);}

    /* footer */
    #footer {position: relative;background-color: #1B1222;}
    #footer .footer-inner {width: 100%;max-width: 1500px;height: 104px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
    #footer .footer-inner .feela-logo {width: 102px;}
    #footer .footer-inner .feela-logo img {width: 100%;}
    #footer .footer-inner > p {color: rgba(255, 255, 255, 0.60);font-size: 14px;font-weight: 500;line-height: 40px; /* 285.714% */margin: 0;}

/* mail-send ============================================================================================================*/
.mail-send.none {right: -200px;}
.mail-send {position:fixed;right:22px;bottom:62px;display: inline-flex;align-items: center;justify-content: center;z-index: 100;transition: 0.8s;}
.mail-send::before {
    content: '';
    display: inline-block;
	width: 130px; height: 130px;
    border-radius: 100px;
    background-color: #FFF;
    background-image: url(../images/questions.png);
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
    transition: 0.3s;
    animation: spinMotion 5s linear infinite;}
.mail-send > i {position: absolute;font-size: 32px;color: #3B2197;transition: 0.3s;}
.mail-send:hover::before {background-color: #3B2197;background-image: url(../images/questions_hover.png);}
.mail-send:hover > i {color: #FFF;}

    @keyframes spinMotion {
        0% { transform:rotate(0deg);}
        100% { transform:rotate(360deg);}
    }

/* 공통 ============================================================================================================*/
video {width: 100%;height: 100%;object-fit: cover;overflow: hidden;}
.video-filter {width: 100%; height: 100%;position: absolute;top: 0; left: 0;}
.inner {position: relative;z-index: 10;}
.inner .title h2 {display: inline-block;}
.inner .line {display: block;height: 5px; background-color: #fff;transition: 1s;}

/* page1 ============================================================================================================*/
.page1 {position: sticky !important;top: 0;}
.page1 .video-filter {background: linear-gradient(181deg, rgba(16, 18, 58, 0.72) 47.48%, rgba(21, 24, 69, 0.00) 69.84%);}
.page1 .inner {padding-top: 0;}
.page1 .visual-logo {display: flex;gap: 5px;width: 100%;max-width: 552px;margin-bottom: 35px;}
.page1 .visual-logo > img {width: calc(50% - 2.5px);}
.page1 .visual-logo > img:first-child {transform: translate(0, 40px);opacity: 0;transition: 0.8s;}
.page1 .visual-logo > img:last-child {transform: translate(0, -40px);opacity: 0;transition: 0.8s;}
.page1 .sub-title {margin-bottom: 20px; transform: translate(0, 40px);opacity: 0;transition: 0.8s;}
.page1 .sub-title > p {font-size: 22px;font-weight: 500;line-height: 42px;}
.page1 .sub-title > p > b {font-weight: 800;}
.page1 .hash-tags {margin-bottom: 50px;opacity: 0;transition: 0.8s;}
.page1 .hash-tags ul {display: flex;flex-wrap: wrap;gap: 16px;}
.page1 .hash-tags ul li {flex-shrink: 0;color: #FFF;font-size: 18px;font-weight: 700;line-height: 100%;padding: 18px 26px;border-radius: 100px;background: rgba(21, 8, 94, 0.82);}
.page1 .ask-btn {display: inline-flex;justify-content: space-between;align-items: center;width: 246px;height: 68px;background-color: #FFF;border: none;border-radius: 100px;padding: 6px 8px 6px 40px;transition: 0.3s;margin-bottom: 160px;}
.page1 .ask-btn > span {color: #3B3F42;font-size: 20px;font-weight: 700;transition: 0.3s;}
.page1 .ask-btn > i {display: inline-flex;justify-content: center;align-items: center;width: 56px;height: 56px;font-size: 24px;color: #FFF;background-color: #222;border-radius: 100px;transition: 0.3s;}
.page1 .ask-btn:hover {background-color: #3B2197;}
.page1 .ask-btn:hover > span {color: #FFF;}
.page1 .ask-btn:hover > i {color: #3B2197;background-color: #FFF;}
.page1 .scroll-ani {display: flex;flex-direction: column;align-items: center;width: 88px;height: 88px;border-radius: 100px;background: rgba(0, 0, 0, 0.70);padding: 17px 0 13px;margin: 0 auto;cursor: pointer;z-index: 10;}
.page1 .scroll-ani > i {font-size: 32px;color: #FFF;margin-bottom: 6px;}
.page1 .scroll-ani > .icon-touch {display: none;}
.page1 .scroll-ani > span {width: 2px;height: 20px;background-color: #FFF;border-radius: 2px;animation: stretchMotion 1.2s ease-out 1;}
    @keyframes stretchMotion {
        0% { height: 0; }
        50% { height: 20px;}
        100% { height: 20px;}
    }


/* page2 ============================================================================================================*/
.page2 .video-filter {background: rgba(16, 18, 58, 0.50);}
.page2 .title {margin-bottom: 60px;}
.page2 .title h2 {font-size: 72px;font-weight: 800;}
.page2 .sub-title > p {font-size: 22px;font-weight: 500;line-height: 42px;margin-bottom: 17px;}

/* page3 ============================================================================================================*/
.page3 .video-filter {background: rgba(43, 26, 50, 0.54);}
.page3 .title {margin-bottom: 25px;}
.page3 .title h2 {font-size: 56px;font-weight: 800;}
.page3 .sub-title {margin-bottom: 54px;}
.page3 .sub-title > p {font-size: 20px;font-weight: 500;line-height: 36px;margin-bottom: 23px;}

.page3 .small-card-list ul {display: flex;gap: 56px;}
.page3 .small-card-list ul li {flex: auto;flex-shrink: 0;display: flex;justify-content: center;background: rgba(20, 19, 24, 0.60);padding: 16px;}
.page3 .small-card-list ul li p {display: inline-block;font-size: 18px;font-weight: 500;line-height: 30px;}
.page3 .small-card-list ul li p > b {color: #6AEE23;font-weight: 700;}

.page3 .card-list-wp > h5 {font-size: 28px;font-weight: 800;line-height: 1;margin-bottom: 20px;}
.page3 .card-list-wp .card-list ul {display: flex;gap: 32px;}
.page3 .card-list-wp .card-list ul li {flex: auto;flex-shrink: 0;width: 328px;height: 320px;background: rgba(20, 19, 24, 0.60);padding: 36px 30px 15px 35px;}
.page3 .card-list-wp .card-list ul li:last-child {margin-right: 0;}
.page3 .card-list-wp .card-list ul li > h6 {height: 68px;font-size: 26px;font-weight: 800;line-height: 32px;margin-bottom: 14px;}
.page3 .card-list-wp .card-list ul li > h6 > span {display: block;font-size: 16px;font-weight: 400;}
.page3 .card-list-wp .card-list ul li > i {color: #6AEE23;font-size: 40px;}
.page3 .card-list-wp .card-list ul li > p {font-size: 17px;font-weight: 400;line-height: 28px;word-break: keep-all;margin-top: 14px;}

/* page4 ============================================================================================================*/
.page4 .video-filter {background: rgba(43, 26, 50, 0.80);backdrop-filter: blur(2px);}
.page4 .title {margin-bottom: 20px;}
.page4 .title h2 {font-size: 56px;font-weight: 800;}
.page4 .sub-title {margin-bottom: 126px;}
.page4 .sub-title > p {font-size: 22px;font-weight: 500;}
.page4 .card-list-wp {overflow: hidden;}
.page4 .card-list-wp > h5 {font-size: 28px;font-weight: 800;line-height: 30px;margin-bottom: 35px;}
.page4 .card-list-wp .card-list ul {display: flex;gap: 32px;transition: 1.5s;}
.page4 .card-list-wp .card-list ul li {flex: auto;flex-shrink: 0;width: calc(100% / 4 - 32px);height: 320px;background: rgba(20, 19, 24, 0.60);padding: 36px 15px 22px 38px;}
.page4 .card-list-wp .card-list ul li > h6 {height: 114px;font-size: 26px;font-weight: 800;line-height: 34px;}
.page4 .card-list-wp .card-list ul li > i {color: #8F4EFF;font-size: 40px;}
.page4 .card-list-wp .card-list ul li > p {font-size: 17px;font-weight: 500;line-height: 28px;word-break: keep-all;margin-top: 15px;}

/* page5 ============================================================================================================*/
.page5 .video-filter {background: rgba(43, 26, 50, 0.80);}
.page5 .title {margin-bottom: 60px;}
.page5 .title h2 {font-size: 56px;font-weight: 800;}
.page5 .card-list-wp {height: 654px;overflow: hidden;}
.page5 .card-list {height: 100%;overflow: hidden;}
.page5 .card-list > ul {height: 100%;transition: 1.5s;}
.page5 .card-list > ul > li {display: flex;height: 100%;padding-bottom: 50px;}
.page5 .card-list > ul > li .order {flex-shrink: 0;width: 43px;color: #F84242;font-size: 32px;font-weight: 800;line-height: 100%;margin-right: 30px;}

.info-area {width: 50%;display: flex;flex-direction: column;justify-content: space-between;}
.info-area .subject {height: 164px;}
.info-area .subject > h5 {font-size: 32px;font-weight: 800;line-height: 100%;margin-bottom: 15px;}
.info-area .subject > p {font-size: 20px;font-weight: 500;}
.info-area .info-box > p {font-size: 22px;font-weight: 400;margin-bottom: 28px;}
.info-area .info-box > p > i {font-size: 34px;margin-right: 13px;vertical-align: middle;}
.info-area .info-box > p > b {font-weight: 700;}
.info-area .info-box ul {display: flex;flex-wrap: wrap;gap: 24px;}
.info-area .info-box ul > li {flex: auto;flex-shrink: 0;width: calc(100% / 2 - 12px);height: 182px;background: #FFF;padding: 23px 0px 0px 23px;}
.info-area .info-box ul .question {display: inline-flex;justify-content: center;align-items: center;width: 30px;height: 30px;border-radius: 100%;background: #170D2E;color: #FFF;font-size: 18px;font-weight: 800;}
.info-area .info-box ul > li > p {color: #170D2E;font-size: 16px;font-weight: 500;line-height: 24px;margin-top: 24px;word-break: keep-all;}

.infographic-area {flex: auto;flex-shrink: 0;width: 727px;background: rgba(22, 10, 35, 0.50);margin-left: 53px;}
.infographic-area .subject {height: 94px;margin: 50px 50px 0;}
.infographic-area .subject > h6 {font-size: 28px;font-weight: 500;}
.infographic-area .subject > h6 > b {font-weight: 800;}
.infographic-area .subject > p {font-size: 18px;font-weight: 400;line-height: 30px;word-break: keep-all;}
.infographic-area .graphic-img {height: calc(100% - 144px);text-align: center;padding: 13px 45px 30px; overflow: hidden;}
.infographic-area .graphic-img > img {width: 100%;height: 100%;object-fit: contain;}
.infographic-area .graphic-img > .mo-img {display: none;}


/* page6 ============================================================================================================*/
.page6 .video-filter {background: rgba(26, 33, 50, 0.80);backdrop-filter: blur(1.5px);}
.page6 .title {margin-bottom: 54px;}
.page6 .title h2 {font-size: 56px;font-weight: 800;}
.page6 .sub-title {margin-bottom: 60px;}
.page6 .sub-title > h4 {font-size: 32px;font-weight: 800;line-height: 1;margin-bottom: 23px;}
.page6 .sub-title > h4 > b {color: #00D9FF;font-size: 36px;margin-right: 18px;}
.page6 .sub-title > p {font-size: 20px;font-weight: 500;line-height: 1;word-break: keep-all;}
.page6 .card-list ul {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 32px;}
.page6 .card-list ul li {flex: auto;flex-shrink: 0;max-width: 440px;height: 232px;background: rgba(20, 19, 24, 0.60);padding: 36px 35px 25px;}
.page6 .card-list ul li > h6 {font-size: 24px;font-weight: 800;margin-bottom: 16px;}
.page6 .card-list ul li > i {color: #00D9FF;font-size: 40px;}
.page6 .card-list ul li > p {font-size: 17px;font-weight: 500;line-height: 28px;margin-top: 16px;word-break: keep-all;}


/* media ============================================================================================================*/

@media (max-width: 767px) {
    #wrap {min-width: 100%;}
    #header .header-inner {max-width: 100%;height: initial;padding-top: 50px;padding-left: 32px;}
    #header .header-inner .logo {width: 130px;}
    #header .header-inner .mo-page {display: block;}
    #nav {display: none;}
    #footer .footer-inner {justify-content: center;align-items: center;flex-direction: column;}
    #footer .footer-inner .feela-logo {width: 90px;}
    #footer .footer-inner > p {color: rgba(255, 255, 255, 0.30);font-size: 12px;font-weight: 400;line-height: 35px;}
    .section .inner {max-width: 100%;padding: 0 32px;}
    .section video {position: absolute;top: 0;z-index: -1;width: 100%;height: 100%;overflow: hidden;}
    .title h2 {word-break: keep-all;}
    .title .line {display: none;}
    .mail-send {right: 25px;bottom: 32px;}
    .mail-send > i {font-size: 30px;}
    .mail-send::before {width: 70px;height: 70px;padding: 20px;background-image: none;animation: none;}
    .mail-send:hover::before {background-image: none;animation: none;}


    /* page1 */
    .page1 .inner {position: relative;height: 100vh;padding: 100px 32px;;}
    .page1 .visual-logo {max-width: 266px;margin-bottom: 15px;}
    .page1 .sub-title > p {font-size: 16px;font-weight: 600;line-height: 22px;margin-bottom: 24px;}
    .page1 .sub-title > p > br {display: none;}
    .page1 .ask-btn {width: 193px;height: 60px;padding: 6px 8px 6px 30px;margin-bottom: 80px;}
    .page1 .ask-btn > span {color: #28146C;font-size: 17px;}
    .page1 .ask-btn > i {width: 48px;height: 48px;background: #311C7B;}
    .page1 .scroll-ani {position: absolute;bottom: 15px;left: 50%;transform: translate(-50%, 0px);}
    .page1 .scroll-ani > .icon-touch {display: block;}
    .page1 .scroll-ani > .icon-mouse {display: none;}
    .page1 .hash-tags {margin-bottom: 25px;}
    .page1 .hash-tags ul {gap: 6px;}
    .page1 .hash-tags ul li {font-size: 15px;padding: 12px 20px;}

    /* page2 */
    .page2 .title h2 {font-size: 40px;text-decoration: underline;text-underline-offset: 10px;}
    .page2 .sub-title > p {font-size: 17px;line-height: 29px;}

    /* page3 */
    .page3 .inner {padding: 152px 32px 32px;} 
    .page3 .title {margin-bottom: 14px;}
    .page3 .title h2 {font-size: 36px;line-height: 56px;text-decoration: underline;text-underline-offset: 10px;}
    .page3 .sub-title {margin-bottom: 30px;}
    .page3 .sub-title > p {font-size: 17px;line-height: 29px;margin-bottom: 0;}
    .page3 .small-card-list ul {display: none;}
    .page3 .card-list-wp > h5 {font-size: 24px;line-height: 30px;margin-bottom: 15px;}
    .page3 .card-list-wp .card-list ul {flex-direction: column;gap: 8px;}
    .page3 .card-list-wp .card-list ul li {width: 100%;height: auto;padding: 32px;}
    .page3 .card-list-wp .card-list ul li > h6 {height: 54px;font-size: 20px;line-height: 100%;}
    .page3 .card-list-wp .card-list ul li > i {font-size: 36px;}
    .page3 .card-list-wp .card-list ul li > p {font-size: 17px;line-height: 24px;}
    .page3 .card-list-wp .card-list ul li > p > br {display: none;}

    /* page4 */
    .page4 .inner {padding: 152px 32px 32px;}
    .page4 .title {margin-bottom: 14px;}
    .page4 .title h2 {font-size: 36px;line-height: 56px;padding-right: 20px;text-decoration: underline;text-underline-offset: 10px;}
    .page4 .sub-title {margin-bottom: 38px;}
    .page4 .sub-title > p {font-size: 17px;line-height: 29px;margin-bottom: 0;}
    .page4 .card-list-wp > h5 {font-size: 24px;line-height: 32px;margin-bottom: 20px;}
    .page4 .card-list-wp .card-list ul {flex-direction: column;gap: 8px;}
    .page4 .card-list-wp .card-list ul li {width: 100%;height: auto;padding: 32px;}
    .page4 .card-list-wp .card-list ul li > h6 {height: auto;font-size: 20px;line-height: 20px;margin-bottom: 32px;}
    .page4 .card-list-wp .card-list ul li > h6 > br {display: none;}
    .page4 .card-list-wp .card-list ul li > i {font-size: 36px;}
    .page4 .card-list-wp .card-list ul li > p {font-size: 17px;line-height: 28px;margin-top: 8px;}
    .page4 .card-list-wp .card-list ul li > p > br {display: none;}

    /* page5 */
    .page5 .inner {padding: 152px 22px 32px;}
    .page5 .title {margin-bottom: 40px;}
    .page5 .title h2 {font-size: 36px;line-height: 56px;padding: 0 10px;text-decoration: underline;text-underline-offset: 10px;}
    .page5 .card-list-wp {height: auto;overflow: initial;}
    .page5 .card-list > ul > li {flex-direction: column;padding-bottom: 70px;}
    .page5 .card-list > ul > li .order {font-size: 24px;line-height: 24px;margin-bottom: 12px;}
    .info-area {width: 100%;}
    .info-area .info-box {display: none;}
    .info-area .subject {height: auto;}
    .info-area .subject > h5 {font-size: 24px;line-height: 24px;margin-bottom: 11px;}
    .info-area .subject > p {font-size: 17px;line-height: 17px;margin-bottom: 19px;}
    .infographic-area {width: 100%;margin: 0;}
    .infographic-area .subject {height: auto;margin: 32px 16px 0;}
    .infographic-area .subject > h6 {font-size: 20px;line-height: 29px;}
    .infographic-area .subject > p {font-size: 16px;line-height: 28px;}
    .infographic-area .graphic-img {height: auto;padding: 28px 16px 32px;}
    .infographic-area .graphic-img > .pc-img {display: none;}
    .infographic-area .graphic-img > .mo-img {display: block;}
    
    /* page6 */
    .page6 .inner {padding: 152px 32px 32px;}
    .page6 .title {margin-bottom: 35px;}
    .page6 .title h2 {font-size: 36px;line-height: 56px;padding-right: 20px;text-decoration: underline;text-underline-offset: 10px;}
    .page6 .sub-title {margin-bottom: 38px;}
    .page6 .sub-title > h4 {font-size: 24px;line-height: 32px;margin-bottom: 11px;}
    .page6 .sub-title > h4 > b {display: block;font-size: 28px;line-height: 28px;margin-bottom: 8px;}
    .page6 .sub-title > p {font-size: 17px;line-height: 29px;}
    .page6 .card-list ul {flex-direction: column;gap: 8px;}
    .page6 .card-list ul li {width: 100%;max-width: 100%;height: auto;padding: 32px;}
    .page6 .card-list ul li > h6 {font-size: 20px;line-height: 20px;margin-bottom: 32px;}
    .page6 .card-list ul li > i {font-size: 36px;}
    .page6 .card-list ul li > p {font-size: 17px;line-height: 28px;margin-top: 8px;}
    .page6 .card-list ul li > p > br {display: none;}
  }
@media (min-width: 768px) and (max-width: 1023px) {
    #wrap {min-width: 100%;}
    #header .header-inner {max-width: 100%;height: initial;padding-top: 50px;padding-left: 32px;}
    #header .header-inner .logo {width: 130px;}
    #header .header-inner .mo-page {display: block;}
    #nav {display: none;}
    #footer .footer-inner {justify-content: center;align-items: center;flex-direction: column;}
    #footer .footer-inner .feela-logo {width: 90px;}
    #footer .footer-inner > p {color: rgba(255, 255, 255, 0.30);font-size: 12px;font-weight: 400;line-height: 35px;}
    .section .inner {max-width: 100%;padding: 0 32px;}
    .section video {position: absolute;top: 0;z-index: -1;width: 100%;height: 100%;overflow: hidden;}
    .title h2 {word-break: keep-all;}
    .title .line {display: none;}
    .mail-send {right: 25px;bottom: 32px;}
    .mail-send > i {font-size: 30px;}
    .mail-send::before {width: 70px;height: 70px;padding: 20px;background-image: none;animation: none;}
    .mail-send:hover::before {background-image: none;animation: none;}


    /* page1 */
    .page1 .inner {position: relative;height: 100vh;padding: 100px 32px;;}
    .page1 .visual-logo {max-width: 266px;margin-bottom: 15px;}
    .page1 .sub-title > p {font-size: 16px;font-weight: 600;line-height: 22px;margin-bottom: 24px;}
    .page1 .sub-title > p > br {display: none;}
    .page1 .ask-btn {width: 193px;height: 60px;padding: 6px 8px 6px 30px;margin-bottom: 80px;}
    .page1 .ask-btn > span {color: #28146C;font-size: 17px;}
    .page1 .ask-btn > i {width: 48px;height: 48px;background: #311C7B;}
    .page1 .scroll-ani {position: absolute;bottom: 15px;left: 50%;transform: translate(-50%, 0px);}
    .page1 .scroll-ani > .icon-touch {display: block;}
    .page1 .scroll-ani > .icon-mouse {display: none;}
    .page1 .hash-tags {margin-bottom: 25px;}
    .page1 .hash-tags ul {gap: 6px;}
    .page1 .hash-tags ul li {font-size: 15px;padding: 12px 20px;}

    /* page2 */
    .page2 .title h2 {font-size: 40px;text-decoration: underline;text-underline-offset: 10px;}
    .page2 .sub-title > p {font-size: 17px;line-height: 29px;}

    /* page3 */
    .page3 .inner {padding: 152px 32px 32px;} 
    .page3 .title {margin-bottom: 14px;}
    .page3 .title h2 {font-size: 36px;line-height: 56px;text-decoration: underline;text-underline-offset: 10px;}
    .page3 .sub-title {margin-bottom: 30px;}
    .page3 .sub-title > p {font-size: 17px;line-height: 29px;margin-bottom: 0;}
    .page3 .small-card-list ul {display: none;}
    .page3 .card-list-wp > h5 {font-size: 24px;line-height: 30px;margin-bottom: 15px;}
    .page3 .card-list-wp .card-list ul {flex-direction: column;gap: 8px;}
    .page3 .card-list-wp .card-list ul li {width: 100%;height: auto;padding: 32px;}
    .page3 .card-list-wp .card-list ul li > h6 {height: 54px;font-size: 20px;line-height: 100%;}
    .page3 .card-list-wp .card-list ul li > i {font-size: 36px;}
    .page3 .card-list-wp .card-list ul li > p {font-size: 17px;line-height: 24px;}
    .page3 .card-list-wp .card-list ul li > p > br {display: none;}

    /* page4 */
    .page4 .inner {padding: 152px 32px 32px;}
    .page4 .title {margin-bottom: 14px;}
    .page4 .title h2 {font-size: 36px;line-height: 56px;padding-right: 20px;text-decoration: underline;text-underline-offset: 10px;}
    .page4 .sub-title {margin-bottom: 38px;}
    .page4 .sub-title > p {font-size: 17px;line-height: 29px;margin-bottom: 0;}
    .page4 .card-list-wp > h5 {font-size: 24px;line-height: 32px;margin-bottom: 20px;}
    .page4 .card-list-wp .card-list ul {flex-direction: column;gap: 8px;}
    .page4 .card-list-wp .card-list ul li {width: 100%;height: auto;padding: 32px;}
    .page4 .card-list-wp .card-list ul li > h6 {height: auto;font-size: 20px;line-height: 20px;margin-bottom: 32px;}
    .page4 .card-list-wp .card-list ul li > h6 > br {display: none;}
    .page4 .card-list-wp .card-list ul li > i {font-size: 36px;}
    .page4 .card-list-wp .card-list ul li > p {font-size: 17px;line-height: 28px;margin-top: 8px;}
    .page4 .card-list-wp .card-list ul li > p > br {display: none;}

    /* page5 */
    .page5 .inner {padding: 152px 22px 32px;}
    .page5 .title {margin-bottom: 40px;}
    .page5 .title h2 {font-size: 36px;line-height: 56px;padding: 0 10px;text-decoration: underline;text-underline-offset: 10px;}
    .page5 .card-list-wp {height: auto;overflow: initial;}
    .page5 .card-list > ul > li {flex-direction: column;padding-bottom: 70px;}
    .page5 .card-list > ul > li .order {font-size: 24px;line-height: 24px;margin-bottom: 12px;}
    .info-area {width: 100%;}
    .info-area .info-box {display: none;}
    .info-area .subject {height: auto;}
    .info-area .subject > h5 {font-size: 24px;line-height: 24px;margin-bottom: 11px;}
    .info-area .subject > p {font-size: 17px;line-height: 17px;margin-bottom: 19px;}
    .infographic-area {width: 100%;margin: 0;}
    .infographic-area .subject {height: auto;margin: 32px 16px 0;}
    .infographic-area .subject > h6 {font-size: 20px;line-height: 29px;}
    .infographic-area .subject > p {font-size: 16px;line-height: 28px;}
    .infographic-area .graphic-img {height: auto;padding: 28px 16px 32px;}
    .infographic-area .graphic-img > .pc-img {display: block;max-width: min-content;margin: 0 auto;}
    .infographic-area .graphic-img > .mo-img {display: none;}
    
    /* page6 */
    .page6 .inner {padding: 152px 32px 32px;}
    .page6 .title {margin-bottom: 35px;}
    .page6 .title h2 {font-size: 36px;line-height: 56px;padding-right: 20px;text-decoration: underline;text-underline-offset: 10px;}
    .page6 .sub-title {margin-bottom: 38px;}
    .page6 .sub-title > h4 {font-size: 24px;line-height: 32px;margin-bottom: 11px;}
    .page6 .sub-title > h4 > b {display: block;font-size: 28px;line-height: 28px;margin-bottom: 8px;}
    .page6 .sub-title > p {font-size: 17px;line-height: 29px;}
    .page6 .card-list ul {flex-direction: column;gap: 8px;}
    .page6 .card-list ul li {width: 100%;max-width: 100%;height: auto;padding: 32px;}
    .page6 .card-list ul li > h6 {font-size: 20px;line-height: 20px;margin-bottom: 32px;}
    .page6 .card-list ul li > i {font-size: 36px;}
    .page6 .card-list ul li > p {font-size: 17px;line-height: 28px;margin-top: 8px;}
    .page6 .card-list ul li > p > br {display: none;}
  
}
@media (min-width: 1024px) and (max-width: 1540px) {
    #nav ul li {margin-bottom: 25px;}
    /* page1 */
    .page1 .ask-btn {margin-bottom: 40px;}

    /* page3 */
    .page3 .inner {padding-right: 130px;}
    .page3 .title {margin-bottom: 20px;}
    .page3 .title h2 {font-size: 50px;}
    .page3 .sub-title {margin-bottom: 26px;}
    .page3 .sub-title > p {line-height: 30px;margin-bottom: 10px;}
    .page3 .small-card-list ul li p {font-size: 17px;line-height: 24px;}
    .page3 .card-list-wp > h5 {font-size: 26px;margin-bottom: 10px;}
    .page3 .card-list-wp .card-list ul li {flex: 1;width: auto;height: auto;}
    .page3 .card-list-wp .card-list ul li > h6 {height: 60px;}

    /* page4 */
    .page4 .inner {padding-right: 130px;}
    .page4 .title h2 {font-size: 50px;}
    .page4 .card-list-wp .card-list ul li > h6 {height: 85px;}
    .page4 .card-list-wp .card-list ul li > p > br {display: none;}

    /* page5 */
    .page5 .inner {padding-right: 130px;}
    .page5 .title {margin-bottom: 40px;}
    .page5 .title h2 {font-size: 50px;}
    .page5 .card-list > ul > li .order {font-size: 28px;}
    .info-area .subject > h5 {font-size: 28px;margin-bottom: 15px;}
    .info-area .info-box > p {font-size: 20px;margin-bottom: 20px;}
    .info-area .info-box > p > i {font-size: 30px;}
    .info-area .info-box ul > li {height: 165px;padding: 16px 20px;}
    .info-area .info-box ul > li > p {margin-top: 10px;}
    .info-area .info-box ul > li > p > br {display: none;}
    .infographic-area {width: 630px;margin-left: 30px;}
    .infographic-area .subject {margin: 35px 35px 0;}
    .infographic-area .subject > p > br {display: none;}
    .infographic-area .graphic-img {padding: 13px 35px 30px;}

    /* page6 */
    .page6 .inner {padding-right: 130px;}
    .page6 .title {margin-bottom: 30px;}
    .page6 .title h2 {font-size: 50px;}
    .page6 .sub-title {margin-bottom: 40px;}
    .page6 .sub-title > h4 {font-size: 30px;margin-bottom: 20px;}
    .page6 .card-list ul {gap: 20px;}
    .page6 .card-list ul li {height: 200px;padding: 30px 30px 25px;}
    .page6 .card-list ul li > h6 {margin-bottom: 10px;}
    .page6 .card-list ul li > p {margin-top: 10px;}
}

@media (min-width: 1024px) {
    .section .inner {position: absolute;top: 50%;left: 50%;display: flex;flex-direction: column;justify-content: center;width: 100%;max-width: 1500px;height: 100%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);padding-top: 80px;}
    .section.page2 .inner {padding-top: 0;}
    /* ani */
    .page5 .card-list > ul li .order { opacity: 0; transform: translateY(-50px);transition: 1s; transition-delay: 0.5s; }
    .page5 .card-list > ul li .info-area .subject { opacity: 0; transform: translateY(-50px); transition: 1s; transition-delay: 0.5s;  }
    .page5 .card-list > ul li .info-box { opacity: 0; transform: translateY(50px);transition: 1s; transition-delay: 0.8s; }
    .page5 .card-list > ul li .subject { opacity: 0; transform: translateY(-50px);transition: 1s; transition-delay: 1.2s; }
    .page5 .card-list > ul li .graphic-img { opacity: 0; transform: translateY(50px);transition: 1s; transition-delay: 1.5s; }
    .page5 .card-list > ul li.ani .order { opacity: 1;transform: translateY(0); }
    .page5 .card-list > ul li.ani .info-area .subject { opacity: 1;transform: translateY(0); }
    .page5 .card-list > ul li.ani .info-box { opacity: 1;transform: translateY(0); }
    .page5 .card-list > ul li.ani .subject { opacity: 1;transform: translateY(0); }
    .page5 .card-list > ul li.ani .graphic-img { opacity: 1;transform: translateY(0); }

}