@charset "utf-8";

:root{
    --white-color: #FFFFFF;
    --text-color:#232323;
    --tab-text-color:#333333;
    --tab-content-color:#666666;
    --active-color:#00BCD4;
    --site-header-height:70px;
    --big-banner-height:500px;
    --tab-menue-height:10rem;
    --tab-banner-height:30rem;
}

/*공통 style*/
html{font-size:10px;height: 100%}
body *{font-family: "Nanum Gothic", sans-serif;}
body{height: 100%;}
.wrap{width: 100%;height: 100%}
.container{width: 100%;height: 100%;max-width: 1425px;margin: 0 auto;padding:0 20px;}
.justifyBetween{justify-content: space-between;}
.alignSelfEnd{align-self: flex-end;}
html, body {
    overflow:hidden;
}
.scroll-box{width: 100%;overflow: scroll; scroll-behavior: smooth;-ms-overflow-style: none;scrollbar-width: none;}
.scroll-box::-webkit-scrollbar {display: none;}


/*헤더 style*/
header {width: 100%;height: var(--site-header-height);background-color: #00BCD4;position: fixed;z-index: 10;top:0;}
header .header-content{width:100%;height:100%;display: flex;justify-content:space-between;align-items: center;}
header .logo-box{display: flex;justify-content: flex-start;align-items: center;height: 100%;width: 50%;padding-left: 18rem;cursor: pointer;}
header .logo-box img{width: 143px;height: 38px;display: block;}
header .menu-box{display: flex;width: 50%;justify-content: center;column-gap: 88px;}
header .menu-box .menu-item{color:var(--white-color);font-size: 16px;}
main {padding-top: var(--site-header-height);height: 100%;overflow:hidden;}
.content-box{height:100%;transition-duration: 0.7s;transition-property: transform;}
.content-box.active {transform: translateY(calc(var(--big-banner-height) * -1));}

.bigBanner-section{width: 100%;height: var(--big-banner-height);display: flex;;justify-content: center;align-items: center;background-image: url("../images/big-banner.png");background-size: cover;}
.bigBanner-section .text-box {width: 100%;}
.bigBanner-section .text-box > p{font-size: 32px;font-weight: 400;text-align: center;line-height: 1.5;color:var(--white-color);}
.bigBanner-section .text-box > p em{font-weight: 900;}
.bigBanner-section .text-box > p .color{color:#FFE84B;}

.bigBanner-section .button-box{display: flex;justify-content: center;column-gap: 6rem;width: 100%;max-width: 1200px;margin: 60px auto 0;}
.bigBanner-section .button-box > a{width: calc((100% - 120px) /  3);height:60px;display: flex;justify-content: center;align-items: center;border:2px solid var(--white-color);border-radius: 40px;font-size: 18px;font-weight: 900;color:var(--white-color);transition-duration: 0.6s;transition-property: background-color;}
.bigBanner-section .button-box > a::before{content:'';background-size: cover;margin-right: 1.6rem;background-repeat: no-repeat;}
.bigBanner-section .button-box > a.android::before{content:'';background-image: url("../images/icons/icon-android.svg");width: 24px;height: 30px;}
.bigBanner-section .button-box > a.ios::before{content:'';background-image: url("../images/icons/icon-ios.svg");width: 21px;height: 24px;}
.bigBanner-section .button-box > a.pc::before{content:'';background-image: url("../images/icons/icon-pc.svg");width: 24px;height: 24px;}
.bigBanner-section .button-box > a:hover{background-color: rgba(255,255,255,0.3);}

.tab-box{height: calc(100%);overflow: hidden}
.tab-box .tab-list{display: flex;justify-content: center;height: var(--tab-menue-height);width: 100%;column-gap: 9rem;}
.tab-box .tab-list .tab-item{width: 10rem;min-width:10rem;height:100%;}
.tab-box .tab-list .tab-item a{width:100%;height:100%;display: flex;justify-content: center;align-items: center;position: relative;color:var(--text-color);font-size: 2rem;}
.tab-box .tab-list .tab-item a::after{content:'';width: 0;height: 0.4rem;background-color:var(--active-color);position: absolute;left: 50%;bottom:0;transform: translateX(-50%);transition-duration: 0.3s;transition-property: width;}
.tab-box .tab-list .tab-item.active a::after{width: 100%;}
.tab-box .tab-list .tab-item a:focus{outline: none;}
.tab-box .tab-list .tab-item a:focus-visible{outline: 2px solid var(--active-color);outline-offset: -2px;}

.tab-box .tab-top{border-top:0.2rem solid #ECECEC;border-bottom:0.2rem solid #ECECEC;}
.tab-box .tab-top .tab-banner-box{height: var(--tab-banner-height);position: relative;overflow: hidden;}
.tab-box .tab-top .tab-banner-box .tab-banner{width: 100%;height: var(--tab-banner-height);display: flex;align-items: center;background-color: #ffffff;position: absolute;top:0;left: 0;}
.tab-box .tab-top .tab-banner:nth-of-type(1) .img-box{height: 19.7rem;margin-right: 10rem;}
.tab-box .tab-top .tab-banner:nth-of-type(2) .img-box{height: 25.5rem;margin-right: 10rem;}
.tab-box .tab-top .tab-banner:nth-of-type(3) .img-box{height: 25.3rem;margin-right: 20rem;}
.tab-box .tab-top .tab-banner:nth-of-type(4) .img-box{height: 24.2rem;margin-right: 20rem;}

.tab-box .tab-top .tab-banner-box .tab-banner .text-box{transition-duration:0.6s;transition-property: transform,opacity;transform: translateY(-30%);z-index: 1;opacity: 0;}
.tab-box .tab-top .tab-banner-box .tab-banner .text-box h2{font-size: 3.2rem;font-weight: 900;color:var(--tab-text-color);}
.tab-box .tab-top .tab-banner-box .tab-banner .text-box p{font-size: 2.4rem;font-weight: 400;color:var(--tab-content-color);line-height:1.5;margin-top: 2.4rem;}
.tab-box .tab-top .tab-banner-box .tab-banner .img-box{transition-duration: 0.6s;transition-property: opacity;z-index: 1;opacity: 0;}
.tab-box .tab-top .tab-banner-box .tab-banner .img-box :is(picture,img){display: block;height: 100%;}
.tab-box .tab-content{background-image:url("../images/bg.png");background-repeat:no-repeat;background-position: center;background-size: cover;height: calc(100% - var(--tab-banner-height) - var(--tab-menue-height));}
.tab-box .tab-content .content-box{text-align: center;height:100%;position: relative;}
.tab-box[data-tab='1'] .tab-top .tab-banner-box .tab-banner:nth-of-type(1) :is(.text-box,.img-box){transform: translateX(0);opacity: 1;}
.tab-box[data-tab='2'] .tab-top .tab-banner-box .tab-banner:nth-of-type(2) :is(.text-box,.img-box){transform: translateX(0);opacity: 1;}
.tab-box[data-tab='3'] .tab-top .tab-banner-box .tab-banner:nth-of-type(3) :is(.text-box,.img-box){transform: translateX(0);opacity: 1;}
.tab-box[data-tab='4'] .tab-top .tab-banner-box .tab-banner:nth-of-type(4) :is(.text-box,.img-box){transform: translateX(0);opacity: 1;}

@media all and (max-height:1200px) {
    html {font-size: 0.76vh;}
    :root{
        --tab-banner-height:28rem;
    }

    .tab-box .tab-list .tab-item {width: 14rem;min-width: 14rem;}
    .tab-box .tab-list .tab-item a {font-size: 2.6rem;}
    .tab-box .tab-top .tab-banner-box .tab-banner {padding-left: 25rem;padding-right: 10rem;}
    .tab-box .tab-top .tab-banner-box .tab-banner .text-box h2 {font-size: 3.6rem;}
    .tab-box .tab-top .tab-banner-box .tab-banner .text-box p {font-size: 2.6rem;}
}

@media all and (min-height:1000px) and (min-width:860px) {
    html {font-size: 8px;}
}

@media all and (max-width:1100px) {
    .bigBanner-section .text-box {padding: 0 20px;}
    .tab-box .tab-top .tab-banner-box .tab-banner {padding-left: 0;padding-right: 0;}
/*

    .bigBanner-section .text-box > p {font-size: 20px;line-height: 1.75;}

*/
}

@media all and (max-width:860px) {
    :root{
        --tab-menue-height:6.7rem;
        --big-banner-height:50rem;
        --tab-banner-height:26rem;
    }

    html {font-size: 1.8vw;}
    .mobile_hidden{display: none;}
    header .logo-box {padding-left: 0;}
    header .menu-box {display: none;}
    .bigBanner-section {align-items: flex-end;}
    .bigBanner-section .text-box {margin-bottom: 3rem;}
    .bigBanner-section .text-box > p {letter-spacing: -0.05em;line-height: 1.8; font-size: 18px;}
    .bigBanner-section .button-box {row-gap: 10px;flex-direction: column; margin: 3rem auto 0;}
    .bigBanner-section .button-box > a {width: 100%;height:6rem;border-radius: 5rem;font-size: 1.8rem;}
    .tab-box .tab-list {display: flex;justify-content: space-between;height: var(--tab-menue-height);width: 100%;column-gap: unset;}
    .tab-box .tab-list .tab-item a {font-size: 1.6rem;}
    .tab-box .tab-list .tab-item {width: 10rem;min-width: 10rem;}
    .tab-box .tab-top .tab-banner-box .tab-banner {flex-direction: column; padding-top: 3rem;}
    .tab-box .tab-top .tab-banner-box .tab-banner .text-box{width: 100%;}
    .tab-box .tab-top .tab-banner-box .tab-banner .text-box h2{font-size: 2rem;}
    .tab-box .tab-top .tab-banner-box .tab-banner .text-box p{font-size: 1.4rem;}
    .tab-box .tab-top .tab-banner-box .tab-banner .img-box{width: 100%;display: flex;justify-content: flex-end;}
    .tab-box .tab-top .tab-banner:nth-of-type(1) .img-box {height: 10rem;margin-bottom: 1.2rem;margin-right: 0;}
    .tab-box .tab-top .tab-banner:nth-of-type(2) .img-box {height: 10rem;margin-bottom: 1.2rem;margin-right: 0;}
    .tab-box .tab-top .tab-banner:nth-of-type(3) .img-box {height: 10rem;margin-bottom: 1.2rem;margin-right: 0;}
    .tab-box .tab-top .tab-banner:nth-of-type(4) .img-box {height: 10rem;margin-bottom: 1.2rem;margin-right: 0;}

    .tab-box .tab-content{background-image:url("../images/bg-mobile.png");}

}

@media all and (max-width:450px) {
    :root{
        --tab-menue-height:6.7rem;
        --big-banner-height:65rem;
        --tab-banner-height:26rem;
    }
    .bigBanner-section .button-box > a {height: 8rem;}
    .tab-box .tab-list .tab-item a {font-size: 2rem;}
    .bigBanner-section .text-box > p {font-size: 18px;}
    .tab-box .tab-top .tab-banner-box .tab-banner .text-box h2{font-size: 3.2rem;}
    .tab-box .tab-top .tab-banner-box .tab-banner .text-box p{font-size: 1.6rem;}
    .tab-box .tab-top .tab-banner:nth-of-type(1) .img-box {height: 8rem;margin-bottom: 1.2rem;margin-right: 0;}
    .tab-box .tab-top .tab-banner:nth-of-type(2) .img-box {height: 9rem;margin-bottom: 1.2rem;margin-right: 0;}
    .tab-box .tab-top .tab-banner:nth-of-type(3) .img-box {height: 9rem;margin-bottom: 1.2rem;margin-right: 0;}
    .tab-box .tab-top .tab-banner:nth-of-type(4) .img-box {height: 10rem;margin-bottom: 1.2rem;margin-right: 0;}

}

/* MeetNote renewal feature pages */
.tab-box .tab-content .content-box > .feature-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(48rem, 52rem);
    justify-content: center;
    align-items: center;
    gap: 4rem;
    width: 100%;
    height: 100%;
    padding: 6rem 0 8rem;
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8%);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.tab-box .tab-content .feature-visual,
.tab-box .tab-content .overview-features {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

@media all and (min-width: 1101px) {
    .tab-box .tab-content .feature-visual {
        position: relative;
        left: -4rem;
    }

    .tab-box .tab-content .feature-copy,
    .tab-box .tab-content .overview-features {
        position: relative;
        left: -10rem;
    }

    .tab-box .tab-content .feature-copy {
        top: -3rem;
    }

    .tab-box .tab-content .feature-panel:nth-of-type(4) .feature-copy {
        top: -15rem;
    }
}

@media all and (min-width: 1101px) and (max-width: 1399px) {
    .tab-box .tab-content .feature-visual,
    .tab-box .tab-content .feature-copy,
    .tab-box .tab-content .overview-features {
        left: 0;
    }
}

.tab-box .tab-content .feature-visual img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 881px);
    max-height: 100%;
    object-fit: contain;
}

.tab-box .tab-content .overview-panel {
    grid-template-columns: minmax(0, 1fr) minmax(48rem, 52rem);
    gap: 4rem;
}

.tab-box .tab-content .overview-visual img {
    width: auto;
    max-width: min(100%, 880px);
}

.tab-box .tab-content .overview-features img {
    display: block;
    width: min(100%, 52rem);
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.tab-box .tab-content .feature-copy {
    align-self: center;
    width: 100%;
    text-align: left;
}

.tab-box .tab-content .feature-title {
    display: flex;
    align-items: center;
    margin-bottom: 2.3rem;
}

.tab-box .tab-content .feature-title > img {
    flex: 0 0 auto;
    width: 6.4rem;
    height: 6.4rem;
    margin-right: 1.6rem;
}

.tab-box .tab-content .feature-title p {
    margin: 0 0 0.4rem;
    color: #00BCD4;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.25;
}

.tab-box .tab-content .feature-title h2 {
    color: #232323;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}

.tab-box .tab-content .feature-copy > ul {
    padding-left: 6.8rem;
}

.tab-box .tab-content .feature-copy > ul li {
    position: relative;
    color: #4e4e4e;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.55;
    word-break: keep-all;
}

.tab-box .tab-content .feature-copy > ul li + li {
    margin-top: 1.1rem;
}

.tab-box .tab-content .feature-copy > ul li::before {
    content: '';
    width: 0.2rem;
    height: 0.2rem;
    position: absolute;
    top: 0.75em;
    left: -1.4rem;
    border-radius: 50%;
    background: currentColor;
}

.tab-box .tab-content .feature-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    position: absolute;
    left: 50%;
    bottom: 6rem;
    z-index: 3;
    transform: translateX(-50%);
}

.tab-box .tab-content .feature-pagination button {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background-color: #D6D9E3;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.tab-box[data-tab='1'] .tab-content .feature-panel:nth-of-type(1),
.tab-box[data-tab='2'] .tab-content .feature-panel:nth-of-type(2),
.tab-box[data-tab='3'] .tab-content .feature-panel:nth-of-type(3),
.tab-box[data-tab='4'] .tab-content .feature-panel:nth-of-type(4) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.tab-box[data-tab='1'] .feature-pagination button:nth-child(1),
.tab-box[data-tab='2'] .feature-pagination button:nth-child(2),
.tab-box[data-tab='3'] .feature-pagination button:nth-child(3),
.tab-box[data-tab='4'] .feature-pagination button:nth-child(4) {
    width: 3rem;
    background-color: #00BCD4;
}

@media all and (max-height: 1200px) and (min-width: 861px) {
    .tab-box .tab-content .content-box > .feature-panel {
        gap: 3rem;
        padding: 4rem 0 7rem;
    }

    .tab-box .tab-content .feature-copy > ul li {
        font-size: 2rem;
        line-height: 1.45;
    }

    .tab-box .tab-content .feature-copy > ul li + li {
        margin-top: 0.8rem;
    }
}

@media all and (max-width: 1100px) and (min-width: 861px) {
    .tab-box .tab-content .content-box > .feature-panel,
    .tab-box .tab-content .overview-panel {
        grid-template-columns: minmax(0, 1.25fr) minmax(34rem, 1fr);
        gap: 2rem;
    }

    .tab-box .tab-content .feature-title h2 {
        font-size: 2.8rem;
    }
}

@media all and (max-width: 860px) {
    .tab-box .tab-content .content-box > .feature-panel,
    .tab-box .tab-content .overview-panel {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        grid-template-rows: 1fr;
        gap: 1rem;
        padding: clamp(10px, 2vw, 18px) 0 clamp(28px, 6vw, 48px);
        overflow: hidden;
    }

    .tab-box .tab-content .feature-visual img,
    .tab-box .tab-content .overview-visual img {
        width: auto;
        max-width: 100%;
    }

    .tab-box .tab-content .overview-features img {
        width: auto;
        max-width: 100%;
    }

    .tab-box .tab-content .feature-copy {
        min-width: 0;
        align-self: center;
        padding-bottom: 0;
    }

    .tab-box .tab-content .feature-title {
        justify-content: flex-start;
        margin-bottom: clamp(6px, 1.5vw, 10px);
    }

    .tab-box .tab-content .feature-title > img {
        width: clamp(28px, 7vw, 42px);
        height: clamp(28px, 7vw, 42px);
        margin-right: clamp(6px, 1.5vw, 10px);
    }

    .tab-box .tab-content .feature-title p {
        font-size: clamp(10px, 2.8vw, 14px);
    }

    .tab-box .tab-content .feature-title h2 {
        font-size: clamp(13px, 3.8vw, 19px);
        white-space: normal;
    }

    .tab-box .tab-content .feature-copy > ul {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 clamp(4px, 1.5vw, 10px) 0 clamp(16px, 4vw, 28px);
    }

    .tab-box .tab-content .feature-copy > ul li {
        font-size: clamp(10px, 2.7vw, 14px);
        line-height: 1.4;
    }

    .tab-box .tab-content .feature-copy > ul li + li {
        margin-top: clamp(2px, 0.7vw, 4px);
    }

    .tab-box:is([data-tab='2'], [data-tab='3'], [data-tab='4']) .feature-pagination {
        bottom: clamp(10px, 2.5vw, 18px);
    }
}