:root {
    --white : #fff;
    --impact : 'Impact';
    --notosans : 'Noto Sans KR', sans-serif;
}

.__honey {font-family: var(--notosans); overflow: hidden;}
.__honey .__max {max-width: 1920px; margin: 0 auto; width: 100%; }

/* 섹션1 */
.__honey .se01 {height: 925px; position: relative; z-index: 2;}
.__honey .se01 .vid {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; overflow: hidden; background: #000;}
.__honey .se01 .vid iframe {
    width: 100vw;
    height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-height: 100vh;
    min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.__honey .se01 .logo {position: absolute; right: 25px; bottom: 25px;}
.__honey .se01 dl {letter-spacing: -0.05em; color: var(--white); font-family: var(--impact); margin-left: 52px; padding-top: 151px; text-transform: uppercase;}
.__honey .se01 dt {font-size: 60px; letter-spacing: 0.05em; margin-left: 10px;}
.__honey .se01 dd {font-size: 200px; margin-top: 21px; letter-spacing: 0.05em;}


@media screen and (max-width: 1550px) {
    
    .__honey .se01 dt {font-size: 3.8710vw; margin-left: 0.6452vw;}
    .__honey .se01 dd {font-size: 12.9032vw; margin-top: 1.3548vw;}
    .__honey .se01 .logo {width: 43.0968vw;}

}

@media screen and (max-width: 1280px) {
    
    .__honey .se01 dt {font-size: 4.071vw;}
    .__honey .se01 dd {font-size: 11.0032vw;}
    .__honey .se01 .logo {width: 43.0968vw;}

}

@media screen and (max-width:768px) {
    
    .__honey .se01 {height: calc(var(--var, 1vh) * 95);}
    
    .__honey .se01 dl {width: 90%; margin-left: 0; padding-top: 0; margin: 0 auto; padding: 10vw 0 0 0;}
    .__honey .se01 dt {font-size: 4.071vw;}
    .__honey .se01 dd {font-size: 11.0032vw;}
    .__honey .se01 .logo {width: 45%;}
    

}

@media screen and (max-width:400px) {
    
    .__honey .se01 dt {font-size: 25px;}
    .__honey .se01 dd {font-size: 50px;}

}


/* 섹션2 */
.__honey .se02 {height: 829px; position: relative; background: #ffbb00; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 2;}

.__honey .se02 .tbx {pointer-events: none;}
.__honey .se02 dl {color: var(--white); font-family: var(--impact);}
.__honey .se02 dt {font-size: 60px; letter-spacing: 0.05em; text-transform: uppercase; }
.__honey .se02 dd {font-size: 7.8125vw; margin-left: 20px;}
.__honey .se02 p {color: var(--white); font-size: 22px; line-height: calc(30/22); max-width: 1086.65px; margin: 0 auto; margin-top: 45px; word-break: keep-all;}
.__honey .se02 ul {position: absolute; left: 80px; bottom: 0; transform: translateY(50%);}
.__honey .se02 ul li {font-family: var(--impact); letter-spacing: 0.05em; color: #000; font-size: 30px; text-align: left; text-transform: uppercase; }
.__honey .se02 ul li a {color: #000; display: flex; align-items: center;}
.__honey .se02 ul li a i {font-size: 25px; animation: arrowLink 1s infinite alternate both; display: block;}
.__honey .se02 ul li + li {margin-top: 33px;}

@keyframes arrowLink {
    0% {
        transform: translateX(-10%);
    }
    100% {
        transform: translateX(20%);
    }
}

.__honey .se02 .canvasBx {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; transform-origin: left top; }
.__honey .se02 .jelly-circle-canvas {width: 778px; height: 545px; }

@media screen and (min-width:1920px) {
    .__honey .se02 dd {font-size: 150px;}
}

@media screen and (max-width:1550px) {
    
    .__honey .se02 dt {font-size: 3.8710vw;}
    .__honey .se02 dd {font-size: 7.8125vw; margin-left: 0;}
    .__honey .se02 p {font-size: 18px; margin-top: 30px;}
    .__honey .se02 ul { left: 5.1613vw;}
    .__honey .se02 ul li + li {margin-top: 2.1290vw;}
}

@media screen and (max-width:1280px) {
    
    .__honey .se02 dt {font-size: 4.6875vw;}
    .__honey .se02 dd {font-size: 7.6531vw;}
    .__honey .se02 p {font-size: 16px; margin-top: 25px;}
    .__honey .se02 ul { left: 6.2500vw;}
    .__honey .se02 ul li {font-size: 30px;}
    .__honey .se02 ul li + li {margin-top: 2.5781vw;}

}

@media screen and (max-width:768px) {
    .__honey .se02 {height: auto; padding: 15vw 0;}
    .__honey .se02 .canvasBx {position: static; left: auto; top: auto; transform-origin: center;}
    .__honey .se02 .tbx {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 90%;}
    .__honey .se02 dd {font-size: 6.6531vw;}
    .__honey .se02 p {margin: 0; margin-top: 20px; font-size: 14px; word-break: keep-all;}
    .__honey .se02 p br {display: none;}
    .__honey .se02 ul {left: 5vw;}
    .__honey .se02 ul li {font-size: 25px;}
    .__honey .se02 ul li a i {font-size: 20px;}
}

@media screen and (max-width:400px) {
    .__honey .se02 {height: auto; padding: 25vw 0;}
    .__honey .se02 dt {font-size: 8.6875vw;}
    .__honey .se02 dd {font-size: 6.6531vw;}
}


/* 섹션3 */
.__honey .se03 {

    --radius : 30px;

    padding-top: 150px; padding-bottom: 135px; background: url(../img/se03_Bg.png) no-repeat center/cover;
}
.__honey .se03 .screen{max-width: 1215px; margin: 0 auto; background: #000; border-radius: var(--radius); position: relative;}
.__honey .se03 .screen::after {content: ''; display: block; padding-bottom: calc(744.96/1207.65 * 100%);}
.__honey .se03 .screen .img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: calc(100% - var(--radius)); width: calc(100% - var(--radius)); display: flex; align-items: center; justify-content: center;}

.__honey .se03 .__listScreen .list {margin-top: 108px; }

.__honey .se03 .key {margin-left: 80px; margin-top: 50px;}
.__honey .se03 .key dt {font-size: 100px; letter-spacing: 0.05em; color: #171c28; font-family: var(--impact); text-transform: uppercase;}
.__honey .se03 .key dd {font-size: 22px; line-height: calc(40/22); color: #000000; margin-top: 35px;}


@media screen and (max-width:1550px) {
    
    .__honey .se03 .screen {width: 90%; margin: 0 auto;}

    .__honey .se03 .key {margin-left: 5.1613vw;}
    .__honey .se03 .key dt {font-size: 6.4516vw;}
    .__honey .se03 .key dd {font-size: 16px; margin-top: 30px;}

}

@media screen and (max-width:1280px) {
    
    .__honey .se03 .key dt {font-size: 8.4516vw;}

}

@media screen and (max-width: 768px) {
    .__honey .se03 {

        --radius : 15px;
    
        padding: 20vw 0;
    }

    .__honey .se03 .__listScreen .list {margin-top: 15vw;}

    .__honey .se03 .key {width: 90%; margin: 0 auto; margin-top: 25px;}
    .__honey .se03 .key dt {font-size: 10vw;}
    .__honey .se03 .key dd {margin-top: 25px; word-break: keep-all; font-size: 14px;}
    .__honey .se03 .key dd br {display: none;}

}

@media screen and (max-width:400px) {

    .__honey .se03 .__listScreen .list {margin-top: 20vw;}

    .__honey .se03 .key dd {font-size: 12px; margin-top: 20px;}
}


/* 섹션4 */
.se04 .banner {display: flex;background: url(../img/se04_banner.jpg) no-repeat center/cover;  padding: 40px 0; padding-left: 250px;}
.se04 .banner li + li {margin-left: 245px;}
.se04 .banner dt {font-size: 30px; letter-spacing: 0.05em; font-family: var(--impact); color: var(--white); text-transform: uppercase;}
.se04 .banner dd {font-size: 22px; color: var(--white); margin-top: 25px;}


@media screen and (max-width:1550px) {
    .se04 .banner {padding: 40px 10%; max-width: 1450px; margin: 0 auto; justify-content: space-between;}
    .se04 .banner li + li {margin-left:0;}
    .se04 .banner dt {font-size: 28px}
    .se04 .banner dd {font-size: 20px;}
}

@media screen and (max-width:1280px) {
    .se04 .banner {padding: 40px 10%;}
    .se04 .banner dt {font-size: 24px}
    .se04 .banner dd {font-size: 18px;}
}

@media screen and (max-width:768px) {
    .se04 .banner {padding: 30px calc(5% - 10px); flex-wrap: wrap;}
    .se04 .banner li {flex: 1 1 calc(33% - 25px); white-space: nowrap; margin: 10px;}
    .se04 .banner li + li {margin-left:10px;}
    .se04 .banner dt {font-size: 22px}
    .se04 .banner dd {font-size: 16px; margin-top: 15px;}
}

@media screen and (max-width:400px) {
    .se04 .banner dt {font-size: 20px}
    .se04 .banner dd {font-size: 14px;}
}


/* 섹션5 */
.__honey .se05 {background: url(../img/se05_bg.jpg) no-repeat bottom/cover; padding-bottom: 387px; padding-top: 170px; }
.__honey .se05 .t_list {display: flex; align-items: center;margin-top: -65px; flex-wrap: wrap; justify-content: center; font-family: var(--impact);}
.__honey .se05 .t_list li {margin: 55px 70px 0; font-size: 104px; color: #2b3141; letter-spacing: 0.05em; text-transform: uppercase;}

.__honey .se05 .__listScreen .list {margin-top: 300px;}

@media screen and (max-width:1550px) {
    .__honey .se05 .t_list {margin-top: -3.5484vw;}
    .__honey .se05 .t_list li {font-size: 5.7097vw; margin: 3.5484vw 4.5161vw 0;}
}

@media screen and (max-width:768px) {
    .__honey .se05 {padding: 20vw 0 25vw;}

    .__honey .se05 .t_list {margin-top: -3.5484vw;}
    .__honey .se05 .t_list li {font-size: 6.7097vw; margin: 3.5484vw 3.5161vw 0;}

    .__honey .se05 .__listScreen .list {margin-top: 20vw;}
}


/* 공유섹션 */
.__listScreen {
    --radius : 30px;
    position: relative; overflow: hidden;
}
.__listScreen .list {display: flex; max-width: 1325px; margin: 0 auto; align-items: flex-start; position: relative; z-index: 2;}
.__listScreen .list li {position: relative; flex: 1; background: #000; border-radius: var(--radius);}
.__listScreen .list li::after {content: ''; display: block; padding-bottom: calc(1138.96/579.65 * 100%);}
.__listScreen .list li + li {margin-left: 165px; margin-top: 200px;}
.__listScreen .list li .img {position: absolute; left: 50%; top: 50%; width: calc(100% - var(--radius)); height: calc(100% - var(--radius)); display: flex; align-items: center; justify-content: center; transform: translate(-50%,-50%);}

.__listScreen .txt {position: absolute; top: calc(50% + 140px); transform: translateY(-50%); left: 0;}
.__listScreen .txt li {font-size: 104.03px; letter-spacing: 0.05em; color: #2b3141; font-family: var(--impact); white-space: nowrap; text-transform: uppercase;}
.__listScreen .txt li + li {margin-top: 210px;}
.__listScreen .txt li:nth-of-type(1) {transform: translateX(2%);}
.__listScreen .txt li:nth-of-type(2) {transform: translateX(-38%);}

@media screen and (max-width:1550px) {
    .__listScreen .list {width: 90%; margin: 0 auto;}
    .__listScreen .list li + li {margin-left: 10.6452vw; margin-top: 12.9032vw;}

    .__listScreen .txt {top: calc(50% + 9.0323vw); }
    .__listScreen .txt li {font-size: 6.7116vw;}
    .__listScreen .txt li + li {margin-top: 13.5484vw;}
}

@media screen and (max-width:768px) {
    .__listScreen {
        --radius : 15px;
    }
}