html {
  scroll-behavior: smooth;
}

.inner{max-width: 1440px; margin: 0 auto; padding: 0 20px;}


::-webkit-scrollbar {
    width: 4px;
  }
::-webkit-scrollbar-thumb {
    background-color: #F11D45;
    border-radius:4px
  }
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }


/*header*/

.header{position: fixed; left: 0; top: 0; width: 100%; transition-duration: 1s; z-index: 9998}
.header .inner{max-width: 1620px; display: flex; justify-content: space-between;
    align-items: center;  height: 100px;}
.header .logo{width: 144px; height: 42px; background: url(../img/main/logo.png); background-position: center;
background-repeat: no-repeat; background-size: 100% auto;}
.header .right_sns{display: flex; gap:20px;}
.header .right_sns .down_app{background: #F11D45; color: #fff; font-size: 18px; height: 50px; padding: 0 35px; border-radius: 50px; font-weight: 500;
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.15); line-height: 50px
}


.header .sns_top{display: flex; gap:10px;}
.header .sns_top a{display: flex; width: 50px; height: 50px; background: #F11D45; justify-content: center;
    align-items: center; border-radius: 50px; transition-duration: .5s}


.header .sns_top li:nth-child(1) a:hover{background:#415DA1 }
.header .sns_top li:nth-child(2) a:hover{background:#222 }
.header .sns_top li:nth-child(3) a:hover{background:#EB099F }
.header .sns_top li:nth-child(4) a:hover{background:#EB1009 }

.header.drop{background: rgba(255,255,255,1)}
.header.drop .logo{background-image: url(../img/main/logo.png)}
.header.drop .sns_top a{background: #F11D45}



/*main*/

.main_visual{width: 100%; overflow: hidden; height: 100vh; background: #000; position: relative; z-index: 2;
display: flex;
    justify-content: flex-start;
    align-items: center;}
.main_visual .video_are{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; opacity: .6; z-index: -1}
.main_visual .video_are video{width: 100%; height: 100%; object-fit: cover;}

.main_visual .inner{width: 100%}

.main_visual .txt{padding-bottom: 50px}
.main_visual .txt h2{color: #fff; font-size: 70px; font-weight: 900; line-height: 1.5; word-break: keep-all}
.main_visual .txt p{margin-top: 40px; font-size: 24px; font-weight: 600; word-break: keep-all; line-height: 1.5; color: #fff}
.main_visual .txt p span{font-size: 16px; display: block; font-weight: 400}


.down_visual{display: flex; position: absolute; width: 100%; max-width: 1440px; bottom: 80px; left: 50%; z-index: 2;
    transform: translateX(-50%); gap:20px;     justify-content: flex-start;
    align-items: center; padding: 0 20px}



.down_visual a{gap:15px; display: flex; background: #fff;
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.15); border-radius: 100px; padding: 20px 40px;
justify-content: flex-start;
    align-items: center;}

.down_visual a .down_txt{flex:1}
.down_visual a .down_txt p{font-size: 12px}
.down_visual a .down_txt h3{font-size: 20px; font-weight: bold}



.mid_section{padding: 150px 0;}
.mid_section .inner{display: flex;     align-items: flex-start;
    justify-content: space-between; gap:60px}

.main_txt {
    width: 40%;
    position: sticky;
    top: 100px;
    left: 0;
}
.main_txt h2{font-size: 60px; line-height:1.5; word-break: keep-all; font-weight: 900; color: #222}
.main_txt h2 b{color: #F11D45; font-weight: 900}
.main_txt p{font-size: 18px; line-height: 1.5; word-break: keep-all; margin-top: 30px;}


.info_flex{display: flex; gap:40px; flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start; width: 60%}
.info_flex .box{width: calc(50% - 20px); height: 500px; border: 1px solid #ddd; padding: 40px; position: relative;
display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;}

.info_flex .box:nth-child(2n){margin-top: -60px}


.info_flex .box h3{font-size: 22px; font-weight: bold; line-height: 1.5; word-break: keep-all}
.info_flex .box p{font-size: 16px; line-height: 1.5; word-break: keep-all; color: #444; margin-top: 10px;}
.info_flex .box img{position: absolute; left: 40px; top: 40px;}




.last_main{padding: 200px 0; background: url(../img/main/last.png); background-position: center; background-size: cover; text-align: center}
.last_main .main_txt{width: 100%;}
.last_main .main_txt h2, .last_main .main_txt p{color: #fff}

.last_main .down_visual{position: relative; left: 0; bottom: 0; width: 100%; transform: translateX(0%); margin-top: 80px; justify-content: center;}






/*foot*/

.foot{background: #111; padding: 60px 0}
.foot .inner{display: flex;     align-items: flex-start;
    justify-content: space-between;}


.foot .inner h3{color: #FFF;
font-size: 15px;
font-weight: 800;
letter-spacing: -0.15px;
text-transform: uppercase; opacity: .3; margin-bottom: 30px;}

.foot .inner p{font-size: 16px; color: #fff; word-break: keep-all; line-height: 1.5; display: flex;     gap: 10px;
    justify-content: flex-start;
    align-items: center;}
.foot .inner p + p {margin-top: 5px}


.foot .inner p i{width: 1px; height: 8px; background: #fff; opacity: .5}

.foot .inner p a{background:#F11D45; padding: 10px 15px; border-radius: 50px; color: #fff; }

.foot .priv{text-align: right}

.foot .priv a{border: 1px solid #fff; border-radius: 60px; height: 50px; line-height: 50px; word-break: keep-all; font-size: 16px; color: #fff; padding: 0 30px;
display: inline-block; text-align: center}


.top_btn{width: 85px; height: 85px; border-radius: 10px; background: #F11D45; position: fixed; right: 50px; bottom: 50px;
display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0; transition-duration: 1s; z-index: 9992; box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.15);}
.top_btn p{font-size: 16px; color: #fff; font-weight: bold; text-transform: uppercase;}


.top_btn:hover{gap:5px; border-radius: 50px}

.qr_box{position: fixed; right: 50px; bottom: 155px; z-index: 9996; background: #fff; padding: 20px; border-radius: 10px; transition-duration: 1s;
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.15);}
.qr_box h3{font-size: 14px; word-break: keep-all; display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 10px}

.qr_box img{max-width: 150px}

.qr_box .close_qr{cursor: pointer}
.qr_box.none{opacity: 0; visibility: hidden}




#ctt p,
#ctt li,
#ctt_con {font-family: 'Pretendard' !important; line-height: 1.5 !important; word-break: keep-all; font-size: 14px !important;}
#ctt p *{font-family: 'Pretendard' !important; line-height: 1.5 !important; word-break: keep-all; font-size: 14px !important;}
#ctt table{width: 100% !important}
#ctt table th, #ctt table td{padding: 5px}