@charset "utf-8";

/* m_txt */
.m_txt{color:#000;}
.m_txt h3{font-size: 42px; word-break: keep-all;}
.m_txt p{font-size: 17px; font-weight: 400; color:#555555; margin-top: 25px; word-break: keep-all;}

@media  all and (max-width:1280px) {
    .m_txt h3{font-size: 38px;}
}
@media  all and (max-width:1024px) {
    .m_txt h3{font-size: 35px;}
}
@media  all and (max-width:768px) {
    .m_txt h3{font-size: 32px;}
    .m_txt p{font-size: 16px; margin-top: 20px;}
}
@media  all and (max-width:500px) {
    .m_txt h3{font-size: 28px;}
}

/* m_btn */
.m_btn{}
.m_btn .btn{}
.m_btn .btn.btn1 a, .m_btn .btn.btn1 button{display: inline-block; background: var(--color1); color:#fff; font-size: 18px; font-weight: 600; line-height: 60px; padding: 0 35px; border-radius: 5px;}

@media all and (max-width:1280px) {
    .m_btn .btn.btn1 a, .m_btn .btn.btn1 button{line-height: 56px; font-size: 17px; padding: 0 30px;}
}
@media all and (max-width:1024px) {
    
}
@media all and (max-width:768px) {
    .m_btn .btn.btn1 a, .m_btn .btn.btn1 button{line-height: 52px; font-size: 16px; padding: 0 26px;}
}
@media all and (max-width:500px) {
    
}

/* mVisual */
#mVisual{height: 1000px; width: 100%; position: relative; min-height: 720px;}
#mVisual .visual{height: 100%; width: 100%; position: relative;}
#mVisual .visual > div{height: 100%;}
#mVisual .visual > div > div{height: 100%;}
#mVisual .visual .mv{position: relative; height: 100%; width: 100%;}
#mVisual .visual .mv .img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;;}
#mVisual .visual .mv .img img{}
#mVisual .visual .mv .inner{height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
#mVisual .visual .mv .inner .txt{color:#fff; display: flex; flex-direction: column; justify-content: center; height: 100%;}
#mVisual .visual .mv .inner .txt h4{font-weight: 500; font-size: 40px; margin-bottom: 10px;}
#mVisual .visual .mv .inner .txt h3{font-size: 64px;}
#mVisual .visual .mv .inner .txt span{background: var(--color1); padding: 5px 15px; display: inline-block;margin-top: 8px;}
#mVisual > .inner{position: absolute; left: 50%; transform: translateX(-50%); bottom: 120px;}
#mVisual > .inner .gague{height: 2px; width: 100%; background-color: rgba(255,255,255,0.23); position: relative;}
#mVisual > .inner .gague .bar{position: absolute; height: 2px; width: 0; background: var(--color1);}

@media  all and (max-width:1280px) {
    #mVisual{height: 100vh;}
    #mVisual .visual .mv .inner .txt h4{font-size: 36px;}
    #mVisual .visual .mv .inner .txt h3{font-size: 56px;}
    #mVisual > .inner{bottom: 100px;}
}
@media  all and (max-width:1024px) {
    #mVisual .visual .mv .inner .txt h4{font-size: 32px;}
    #mVisual .visual .mv .inner .txt h3{font-size: 50px;}
    #mVisual .visual .mv .inner .txt span{padding: 4px 12px;}
    #mVisual > .inner{bottom: 80px;}
}
@media  all and (max-width:768px) {
    #mVisual .visual .mv .inner .txt h4{font-size: 29px;}
    #mVisual .visual .mv .inner .txt h3{font-size: 45px;}
    #mVisual > .inner{bottom: 7%;}
}
@media  all and (max-width:500px) {
    #mVisual .visual .mv .inner .txt h4{font-size: 25px;}
    #mVisual .visual .mv .inner .txt h3{font-size: 40px;}
    #mVisual .visual .mv .inner .txt span{padding: 4px 9px;}
}

/* sec1 */
#sec1{margin: 120px 0;}
#sec1 .m_txt{text-align: center;}
#sec1 .cont{margin-top: 50px;}
#sec1 .cont .box{position: relative; opacity: .5; transition: .4s; transform: scale(0.9);max-width: 1200px;  aspect-ratio: 24 / 11.4; width: 100%;}
#sec1 .cont .box.slick-current{opacity: 1; transform: scale(1);}
#sec1 .cont .box .img{}
#sec1 .cont .box .img img{max-width: 1200px;  aspect-ratio: 24 / 11.4; object-fit: cover; width: 100%; height: 100%;}
#sec1 .cont .box .txt{position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.7); opacity: 0; transition: .4s;}
#sec1 .cont .box.box.slick-current .txt{opacity: 1;}
#sec1 .cont .box .txt .l_cont{display: flex; align-items: center; color:#fff; padding-left: 40px;}
#sec1 .cont .box .txt .l_cont h3{font-size: 24px; margin-right: 60px; white-space: nowrap;}
#sec1 .cont .box .txt .l_cont p{font-size: 16px; white-space: nowrap;}
#sec1 .cont .box .txt .btn{}
#sec1 .cont .box .txt .btn a{display: flex; width: 70px; aspect-ratio: 1 / 1; background: var(--color1); justify-content: center; align-items: center; color:#fff; font-size: 30px; font-weight: 300;}

@media all and (max-width:1280px) {
    #sec1{margin: 100px 0;}
    #sec1 .cont{margin-top: 45px;}
    #sec1 .cont .box .img img{max-width: 80vw; min-height: 420px; object-fit: cover;}
    #sec1 .cont .box .txt{height: 65px;}
    #sec1 .cont .box .txt .l_cont{padding-left: 30px;}
    #sec1 .cont .box .txt .l_cont h3{font-size: 22px; margin-right: 45px;}
    #sec1 .cont .box .txt .btn a{width: 65px;}
}
@media all and (max-width:1024px) {
    #sec1{margin: 90px 0;}
}
@media all and (max-width:768px) {
    #sec1{margin: 80px 0;}
    #sec1 .cont{margin-top: 40px;}
    #sec1 .cont .box{max-width: 85vw; min-height: 0px; object-fit: cover; aspect-ratio: 16/11;}
    #sec1 .cont .box .img img{max-width: 85vw; min-height: 0px; object-fit: cover; aspect-ratio: 16/11;}
    #sec1 .cont .box .txt{height: 60px;}
    #sec1 .cont .box .txt .l_cont h3{font-size: 20px; margin-right: 5%;}
    #sec1 .cont .box .txt .l_cont p{font-size: 15px;}
    #sec1 .cont .box .txt .btn a{width: 60px;}
}
@media all and (max-width:500px) {
    #sec1{margin: 70px 0;}
    #sec1 .cont .box .txt{height: 50px;}
    #sec1 .cont .box .txt .l_cont{padding-left: 20px;}
    #sec1 .cont .box .txt .l_cont p{display: none;}
    #sec1 .cont .box .txt .l_cont h3{font-size: 19px;}
    #sec1 .cont .box .txt .btn a{width: 50px;}
}


/* sec2 */
#sec2{background: #faf8f6; padding: 120px 0;}
#sec2 .inner{}
#sec2 .inner .m_txt{text-align: center;}
#sec2 .inner .cont{margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap:40px; mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 85%);}
#sec2 .inner .cont .box{}
#sec2 .inner .cont .box a{position: relative;}
#sec2 .inner .cont .box a .img{}
#sec2 .inner .cont .box a .img img{width: 100%;}
#sec2 .inner .cont .box a .txt{background-color: #faf8f6; position: absolute; bottom: 0; left: 0; font-size: 18px; font-weight: 600; color:#000000; padding: 15px 25px;}
#sec2 .inner .m_btn{text-align: center;}

@media all and (max-width:1280px) {
    #sec2{padding: 100px 0;}
    #sec2 .inner .cont{margin-top: 45px; gap:30px;}
    #sec2 .inner .cont .box a .txt{font-size: 17px; padding: 12px 20px;}
}
@media all and (max-width:1024px) {
    #sec2{padding: 90px 0;}
}
@media all and (max-width:768px) {
    #sec2{padding: 80px 0;}
    #sec2 .inner .cont{margin-top: 40px; grid-template-columns: repeat(2, 1fr); gap:20px;}
    #sec2 .inner .cont .box a .txt{font-size: 16px; padding: 10px 16px;}
}
@media all and (max-width:500px) {
    #sec2{padding: 70px 0;}
    #sec2 .inner .cont{gap:15px; grid-template-columns: repeat(1, 1fr); mask-image: linear-gradient(to bottom, #000 70%, transparent 90%);}
    #sec2 .inner .cont .box a .txt{font-size: 15px; padding: 8px 14px;}
}


/* sec3 */
#sec3{padding: 120px 0;}
#sec3 .inner{}
#sec3 .inner .m_txt{text-align: center;}
#sec3 .inner .cont{margin-top: 60px;}
#sec3 .inner .cont li{border-bottom: 1px solid #cccccc;}
#sec3 .inner .cont li a{display: flex; justify-content: space-between; align-items: center; padding: 20px 30px;}
#sec3 .inner .cont li a .l_cont{display: flex; gap:50px; align-items: center;}
#sec3 .inner .cont li a .l_cont .tag{font-size: 15px; line-height: 40px; padding: 0 25px; color:var(--color1); border: 1px solid var(--color1); border-radius: 60px;}
#sec3 .inner .cont li a .l_cont .tag.off{color:#444; border: 1px solid #444;}
#sec3 .inner .cont li a .l_cont h3{font-size: 16px; font-weight: 500; color:#000000;}
#sec3 .inner .cont li a .r_cont{display: flex; align-items: center; gap:60px;}
#sec3 .inner .cont li a .r_cont .cate{font-size: 16px; font-weight: 500; color:#000000; opacity: 0.8;}
#sec3 .inner .cont li a .r_cont .date{font-size: 16px; color:#000;}

@media all and (max-width:1280px) {
    #sec3{padding: 100px 0;}
    #sec3 .inner .cont{margin-top: 50px;}
    #sec3 .inner .cont li a{padding: 15px 25px;}
    #sec3 .inner .cont li a .l_cont{gap:40px;}
    #sec3 .inner .cont li a .r_cont{gap:40px;}
    #sec3 .inner .cont li a .l_cont .tag{padding: 0 20px; line-height: 38px;}
}
@media all and (max-width:1024px) {
    #sec3{padding: 90px 0;}
    #sec3 .inner .cont{margin-top: 40px;}
}
@media all and (max-width:768px) {
    #sec3{padding: 80px 0;}
    #sec3 .inner .cont{margin-top: 30px;}
    #sec3 .inner .cont li a{padding: 12px 10px;}
    #sec3 .inner .cont li a .l_cont{gap:17px;}
    #sec3 .inner .cont li a .r_cont{display: none;}
    #sec3 .inner .cont li a .l_cont .tag{padding: 0 16px; line-height: 34px;}
}
@media all and (max-width:500px) {
    #sec3{padding: 70px 0;}
    #sec3 .inner .cont{margin-top: 25px;}
}


/* sec4 */
#sec4{background-color: #faf8f6; padding: 120px 0;}
#sec4 .inner{display: flex; gap:50px; align-items: center;}
#sec4 .inner .l_cont{width: 467px; position: relative;}
#sec4 .inner .l_cont .img{}
#sec4 .inner .l_cont .img img{width: 100%;}
#sec4 .inner .l_cont .txt{position: absolute; color:#fff; padding: 70px 50px; width: 100%; top: 0; left: 0;}
#sec4 .inner .l_cont .txt h3{font-size: 42px; margin-bottom: 20px;}
#sec4 .inner .l_cont .txt p{font-size: 17px; word-break: keep-all; line-height: 1.7em;}
#sec4 .inner .r_cont{width: calc(100% - 467px);}
#sec4 .inner form{width: 100%;}
#sec4 .inner form .box{margin-bottom: 20px;}
#sec4 .inner form .box.w2{display: grid; grid-template-columns: repeat(2, 1fr); gap:20px; }
#sec4 .inner form .box .input{position: relative;}
#sec4 .inner form .box p{font-size: 16px; font-weight: 400; color:#000; margin-bottom: 12px;}
#sec4 .inner form .box p span{color:var(--color1);}
#sec4 .inner form .box .input input, #sec4 .inner form .box .input select{background-color: #fff; border: 1px solid #ddd; height: 54px; border-radius: 5px; padding: 0 20px; width: 100%; font-family: 'Pretendard', sans-serif; font-size: 15px;}
#sec4 .inner form .box .input button{position: absolute; top:50%; transform: translateY(-50%); right: 10px; line-height: 34px; background-color: #000; color:#fff; border-radius: 5px; padding: 0 12px;}
#sec4 .inner form .box .flex{display: grid; gap:20px; grid-template-columns: repeat(3, 1fr);}
#sec4 .inner form .box textarea{background-color: #fff; border: 1px solid #ddd; height: 54px; border-radius: 5px; padding: 20px; width: 100%; resize: none; height: 140px; font-family: 'Pretendard', sans-serif; font-size: 15px;}
#sec4 .inner form .inquiry_btn{display: flex; align-items: center; justify-content: flex-end;}
#sec4 .inner form .inquiry_btn .agree{display: flex; align-items: center; margin-right: 30px;}
#sec4 .inner form .inquiry_btn .agree input{width: 17px; height: 17px; border-radius: 2px; border: 1px solid #dddddd; margin-right: 10px;}
#sec4 .inner form .inquiry_btn .agree p{font-size: 15px; color:#555555;}
#sec4 .inner form .inquiry_btn .agree p a{font-weight: 600; color:#000000; text-decoration: underline; text-underline-position: under;}
#sec4 .inner form .inquiry_btn .m_btn{}

@media all and (max-width:1280px) {
    #sec4{padding: 100px 0;}
    #sec4 .inner{gap:40px; align-items: flex-start;}
    #sec4 .inner .l_cont{width: 40vw;}
    #sec4 .inner .l_cont .txt{padding: 60px 40px;}
    #sec4 .inner .l_cont .txt h3{font-size: 37px; margin-bottom: 15px;}
    #sec4 .inner .l_cont .txt p{font-size: 16px;}
    #sec4 .inner .r_cont{width: calc(100% - 40vw);}
    #sec4 .inner form .box{margin-bottom: 15px;}
    #sec4 .inner form .box.w2{gap:15px;}
    #sec4 .inner form .box p{margin-bottom: 10px;}
    #sec4 .inner form .box .input input, #sec4 .inner form .box .input select{height: 50px;}
    #sec4 .inner form .box .flex{gap:15px;}
    #sec4 .inner form .box textarea{height: 120px;}
    #sec4 .inner form .inquiry_btn .agree{margin-right: 25px;}
}
@media  all and (max-width:1024px) {
    #sec4{padding: 90px 0;}
    #sec4 .inner form .box .input input, #sec4 .inner form .box .input select{height: 46px; padding: 0 10px;}
    #sec4 .inner form .box{margin-bottom: 12px;}
    #sec4 .inner form .box.w2{gap:12px;}
    #sec4 .inner form .box .flex{gap:12px;}
    #sec4 .inner form .box p{font-size: 15px; margin-bottom: 8px;}
    #sec4 .inner form .box .input button{line-height: 31px; padding: 0 10px; right: 5px;}
    #sec4 .inner form .box textarea{height: 100px; padding: 10px;}
    #sec4 .inner form .inquiry_btn .agree{margin-right: 20px;}
    #sec4 .inner form .inquiry_btn .agree input{width: 15px; height: 15px; margin-right: 6px;}
    #sec4 .inner form .inquiry_btn .agree p{font-size: 14px;}
}
@media  all and (max-width:768px) {
    #sec4{padding: 80px 0;}
    #sec4 .inner{flex-direction: column;}
    #sec4 .inner .l_cont{width: 100%;}
    #sec4 .inner .l_cont .img{display: none;}
    #sec4 .inner .l_cont .txt{ text-align: center; position: relative; padding: 0;}
    #sec4 .inner .l_cont .txt h3{color:#000; font-size: 32px;}
    #sec4 .inner .l_cont .txt p{color:#000;}
    #sec4 .inner .r_cont{width: 100%;}
}
@media  all and (max-width:500px) {
    #sec4{padding: 70px 0;}
    #sec4 .inner form .box.w2, #sec4 .inner form .box .flex{grid-template-columns: repeat(1, 1fr);}
}

/* Layer Pop */
.layer_pop{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none;}
.layer_pop .pop_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7);}
.layer_pop .pop_cont{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); animation: popUp 0.3s ease-out;}
@keyframes popUp {
    from {opacity: 0; transform: translate(-50%, -45%);}
    to {opacity: 1; transform: translate(-50%, -50%);}
}
.layer_pop .pop_head{padding: 20px 30px; background: #fff; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;}
.layer_pop .pop_head h3{font-size: 20px; font-weight: 700; color: #000;}
.layer_pop .pop_head .close_btn{font-size: 24px; color: #999; background: none; border: none; cursor: pointer; transition: 0.3s;}
.layer_pop .pop_head .close_btn:hover{color: #000; transform: rotate(90deg);}
.layer_pop .pop_body{padding: 30px; max-height: 70vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ddd transparent;}
.layer_pop .pop_body::-webkit-scrollbar{width: 6px;}
.layer_pop .pop_body::-webkit-scrollbar-thumb{background: #ddd; border-radius: 10px;}
.layer_pop .pop_body .txt_box h4{font-size: 17px; font-weight: 600; color: #000; margin-bottom: 15px;}
.layer_pop .pop_body .txt_box p{font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 15px; word-break: keep-all;}
.layer_pop .pop_body .txt_box ul{margin-bottom: 20px;}
.layer_pop .pop_body .txt_box ul li{font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 10px; word-break: keep-all;}
.layer_pop .pop_body .txt_box ul li strong{color: #000; font-weight: 600;}

@media all and (max-width:768px) {
    .layer_pop .pop_head{padding: 15px 20px;}
    .layer_pop .pop_head h3{font-size: 18px;}
    .layer_pop .pop_body{padding: 20px;}
}