@charset "utf-8";

br.mo{display: none;}
br.br1280{display: none;}
#mVisual {position:relative;overflow:hidden;  }
#mVisual .mvWrap  {width:100%; height:100vh; }
#mVisual section { padding-top: 0; }

.mv.slick-slide,
.mvWrap .slick-track,
.mvWrap .slick-list{ position:relative; height:100%; outline:none; }

#mVisual .mv{ background-repeat: no-repeat; background-size: cover; height: 100%; position: relative;}

.mv.mv1 { background-image:url('/images/main/mv1_260812.webp'); background-position: center center;}
.mv.mv2 { background-image:url('/images/main/mv2.jpg'); background-position: 80% center; }
.mv.mv3 { background-image:url('/images/main/mv3.jpg'); background-position: center center; }

#mVisual .mv .mv-txt {display:flex; align-items: end; justify-content:space-between;  max-width:1480px;  margin:0 auto; height:calc(100% - 120px); width: 100%; }
#mVisual .mv .mv-txt div {color:#fff;}
#mVisual .mv .mv-txt div h3{font-size: 5.6rem; line-height: 7rem;}
#mVisual .mv .mv-txt div p{font-size: 2rem; margin: 40px 0 70px; line-height: 3rem;}

.mvWrap .progress { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); width: 1480px; height: 3px; background: rgba(255,255,255,0.25); overflow: hidden; z-index: 5; }
.mvWrap .progress .bar {display: block;width: 0;height: 100%;background: #122663;}
.mv_arrows {position: absolute;left: 50%; transform: translateX(-50%); bottom: 200px;z-index: 10;display: flex;gap: 15px;width: 1480px;justify-content: end;}
.mv_prev,
.mv_next {width: 5rem;height: 5rem;border: 1px solid rgba(255,255,255,0.4); color: #fff;cursor: pointer;font-size: 0;position: relative; border-radius: 100px;}
.mv_prev::before,
.mv_next::before {content: '<';position: absolute;top: 50%;left: 53%;width: 10px;height: 10px;border-top: 1px solid #fff;border-right: 1px solid #fff;transform: translate(-50%, -50%) rotate(225deg);}
.mv_next::before {transform: translate(-50%, -50%) rotate(45deg); left: 47%;}


@media all and (max-width:1500px) {
    #mVisual .mv .mv-txt {max-width: 90%;}
    .mvWrap .progress {max-width: 90%;}
    .mv_arrows {width: 90%; bottom: 160px;}
    #mVisual .mv .mv-txt div h3{font-size: 5rem;}
}
@media all and (max-width:1280px) {
    br.br1280{display: block !important;}
    #mVisual .mv .mv-txt div h3{font-size: 5rem;}
    #mVisual .mv .mv-txt div p{font-size: 1.8rem; margin: 3rem 0 6rem;}
}
@media all and (max-width:980px) {
    .mvWrap .progress {bottom: 5%;}
    .mv_arrows {bottom: 8%;}
}
@media all and (max-width:768px) {
    br.mo{display: block !important;}
    #mVisual .mv .mv-txt div h3{font-size:4.7rem;line-height: 6rem;}
}
@media all and (max-width:480px) {
    #mVisual .mv .mv-txt div h3{font-size: 4rem; line-height: 5rem;}
    #mVisual .mv .mv-txt div p{font-size: 1.6rem; margin: 2rem 0 4rem;}
    .mv_arrows {gap: 1rem;}
    .mv_prev,
    .mv_next {width: 4rem;height: 4rem;}
}


.p-Part{padding: 140px 0 !important;}
.m-part{margin-top: 100px;}

@media all and (max-width:1280px) {
    .p-Part{padding: 120px 0 !important;}
    .m-part{margin-top: 0;}
}
@media all and (max-width:980px) {
    .p-Part{padding: 100px 0 !important;}
}
@media all and (max-width:780px) {
    .p-Part{padding: 80px 0 !important;}
}
@media all and (max-width:480px) {
    .p-Part{padding: 60px 0 !important;}
}


.m_txt{display: flex; justify-content: space-between; color: #222;}
.m_txt h4{font-size: 1.8rem; font-weight: 500; font-family: 'poppins'; margin-bottom: 4rem; opacity: 0.5;}
.m_txt h3{font-size: 5.6rem;}
.m_txt h3 span{color: #122663;}
.m_txt p{color: #666; font-size: 1.8rem; font-weight: 500; margin: 3rem 0 5rem; line-height: 2.8rem;}
a.more{display: flex; gap: 2rem; padding: 1.5rem 3rem; border: 1px solid rgba(55,55,55,0.2); color: #222; font-size: 1.9rem; font-weight: bold; border-radius: 100px; align-items: center;}
a.more span{font-weight: 500; color: #122663; font-family: 'suit';}
a.more:hover{background: #122663; color: #fff;}
a.more:hover span{color: #fff;}

@media all and (max-width:1280px) {
    .m_txt h3{font-size: 5rem;}
    .m_txt p{font-size: 1.6rem;}
    a.more{font-size: 1.7rem;}
}

@media all and (max-width:980px) {
    .m_txt{flex-wrap: wrap;}
    .m_txt .lt{width: 100%;}
    .m_txt h3{font-size: 4.5rem;}
    .m_txt p{margin: 2rem 0 4rem;}
    a.more{font-size: 1.7rem;}
}
@media all and (max-width:768px) {
    .m_txt h3{font-size: 4rem;}
    a.more{font-size: 1.5rem;}
}
@media all and (max-width:480px) {
    .m_txt h3{font-size: 3.5rem;}
    .m_txt p{font-size: 1.5rem;margin: 2rem 0 3rem;}
    a.more{font-size: 1.4rem; padding: 1rem 2.5rem;}
}



#m_bento{background: #f6f6f6;}
#m_bento .cont{ display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
#m_bento .cont .lt,
#m_bento .cont .rt{min-width: 0;}
#m_bento .cont .lt{height: 100%;}
#m_bento .cont .box{height: 100%;}
#m_bento .cont .box a{ display: block; position: relative; overflow: hidden; height: 100%; border-radius: 10px;}
#m_bento .cont .rt ul{display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem;height: 100%;}
#m_bento .cont .box .img{ width: 100%; height: 100%; position: relative;}
#m_bento .cont .box .img:after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent, transparent);}
#m_bento .cont .box .img img{ display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.2); transition: 0.3s;}
#m_bento .cont .box:hover .img img{filter: saturate(1); transition: 0.3s;}
#m_bento .cont .box .txt{ position: absolute; inset: 0; padding: 3rem; display: flex; flex-direction: column;justify-content: space-between; color: #fff; opacity: 0.5; transition: 0.3s;}
#m_bento .cont .box:hover .txt{opacity: 1; transition: 0.3s;}
#m_bento .cont .box .txt h3{font-size: 3.4rem; margin-bottom: 2rem;}
#m_bento .cont .box .txt p{font-weight: 500; font-size: 1.6rem; line-height: 2.6rem;}
#m_bento .cont .box .txt h4{font-size: 2.7rem;}
#m_bento .cont .box .txt .arrow{text-align: right; opacity: 0; transition: 0.3s;}
#m_bento .cont .box:hover .txt .arrow{opacity: 1; transition: 0.3s;}


@media all and (max-width:1280px) {
    #m_bento .cont .box .txt h3{font-size: 3rem;}
    #m_bento .cont .box .txt h4{font-size: 2.5rem;}
}
@media all and (max-width:980px){
    #m_bento .cont{grid-template-columns: 1fr; margin-top: 5rem;}
}
@media all and (max-width:480px){
    #m_bento .cont{margin-top: 4rem;}
    #m_bento .cont .box .txt{padding: 2rem;}
    #m_bento .cont .box .txt h3{font-size: 2.5rem;}
    #m_bento .cont .box .txt p{font-size: 1.5rem; line-height: 2.5rem;}
    #m_bento .cont .rt ul{grid-template-columns: repeat(1, 1fr);}
    #m_bento .cont .rt ul li{max-height: 15rem;}
}


#m_global{background: #121212; }
#m_global .s-inner{display: flex; align-items: center;}
#m_global .lt{width: 50%;}
#m_global .m_txt{color: #fff; flex-wrap: wrap;}
#m_global .m_txt h3{width: 100%;}
#m_global .m_txt p{width: 100%; color: #fff; opacity: 0.8;}
#m_global .m_txt a.more{color: #fff; border: 1px solid #373737;}
#m_global .m_txt a.more span{color: #fff;}
#m_global .m_txt a.more:hover{border: 1px solid #122663;}
#m_global .rt{width: 50%;}

@media all and (max-width:1280px){
    #m_global .s-inner{flex-wrap: wrap;}
    #m_global .lt{width: 100%;}
    #m_global .rt{width: 100%;}
}


#m_feature .f-inner{display: flex; max-width: 100% !important; height: 100vh;}
#m_feature .lt{width: 50%;}
#m_feature .ft_box{width: 100%; position: relative; height: 50%;}
#m_feature .ft_box .img{height: 100%;}
#m_feature .ft_box .img img{width: 100%; height: 100%; object-fit: cover; transition: 0.3s; filter: grayscale(1) brightness(0.3);}
#m_feature .ft_box:hover img{transition: 0.3s; filter: grayscale(0.5) brightness(0.8);}
#m_feature .ft_box .txt{position: absolute; bottom: 0;left: 0; color: #fff; padding: 5rem 8rem; display: flex; justify-content: space-between; align-items: end; width: 100%;background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-top: 1px solid rgba(255,255,255,0.2);}
#m_feature .ft_box .txt .info h3{font-size: 3.2rem; margin-bottom: 1rem;}
#m_feature .ft_box .txt .info p{font-size: 2rem; opacity: 0.5;}
#m_feature .ft_box .txt .count h3{font-size: 3rem;font-weight: 100;}
#m_feature .ft_box .txt .count h3 span{font-size: 7.2rem; font-weight: bold;}
#m_feature .rt{width: 50%;}
#m_feature .rt .ft_box{height: 50%;}

@media all and (max-width:1480px){
    #m_feature .ft_box .txt{padding: 3rem 5rem;}
    #m_feature .ft_box .txt .info h3{font-size: 2.7rem;}
    #m_feature .ft_box .txt .info p{font-size: 1.8rem;}
    #m_feature .ft_box .txt .count h3 span{font-size: 6rem; font-weight: bold;}
}
@media all and (max-width:1280px){
    #m_feature .f-inner{flex-wrap: wrap; height: 120vh;}
    #m_feature .lt{width: 100%;}
    #m_feature .rt{width: 100%;}
    #m_feature .ft_box{ height: calc(120vh/4);}
    #m_feature .rt .ft_box{ height: calc(120vh/4);}
}
@media all and (max-width:768px){
    #m_feature .ft_box .txt .count h3 span{font-size: 5rem;}
}
@media all and (max-width:480px){
    #m_feature .ft_box .txt{padding: 3rem 2rem;}
    #m_feature .ft_box .txt .info h3{font-size: 2.5rem;}
    #m_feature .ft_box .txt .info p{font-size: 1.6rem;}
    #m_feature .ft_box .txt .count h3 span{font-size: 4rem;}
}


#m_contact{background: url('/images/main/m_contact_bg_260511.jpg') center center / cover no-repeat;}
#m_contact .s-inner{display: flex; color: #fff;}
#m_contact .lt{width: 50%;}
#m_contact .lt .m_txt{color: #fff; flex-wrap: wrap;}
#m_contact .lt .m_txt h3{width: 100%;}
#m_contact .lt .m_txt p{width: 100%; color: #fff; opacity: 0.8;}
#m_contact .rt{width: 50%; padding: 0 4rem;}
#m_contact .inquiry_wrap {width: 100%;}
#m_contact .form_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
#m_contact .field input,
#m_contact .field select,
#m_contact .field textarea { width: 100%; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: rgba(255, 255, 255, 0.8); border-radius: 10px; padding: 0 2rem; height: 60px; font-size: 1.6rem; transition: 0.3s; font-family: 'pretendard';}
#m_contact .field select option{color: #222;}
#m_contact .field textarea { height: 220px; padding: 20px; }
#m_contact .field input::placeholder,
#m_contact .field textarea::placeholder {color: rgba(255,255,255,0.6);}
#m_contact .field input:focus,
#m_contact .field textarea:focus,
#m_contact .field select:focus { border-color: #4c7dff; background: rgba(255,255,255,0.1); }
#m_contact .form_bottom { margin-top: 3rem; display: flex; justify-content: space-between; align-items: center; }
#m_contact .agree_box { display: flex; align-items: center; gap: 10px; }
#m_contact .agree_box input {display: none;}
#m_contact .check_icon { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; position: relative; display: inline-block; }
#m_contact .agree_box input:checked + .check_icon::after { content: ""; position: absolute; left: 5px; top: 2px; width: 6px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
#m_contact .agree_txt {font-size: 1.6rem;opacity: 0.8;}
#m_contact .agree_txt a{color: #fff; text-decoration: underline;}
#m_contact .submit_btn {background: #122663;color: #fff;border: none;border-radius: 40px;padding: 0 4rem;height: 6rem;font-size: 1.8rem;font-weight: 600;cursor: pointer;display: flex;align-items: center;gap: 2rem; font-family: 'pretendard'; transition: 0.3s;}
#m_contact .submit_btn .arrow {font-family: 'suit'; font-weight: 500;}
#m_contact .submit_btn:hover {background: #fff; color: #122663; transition: 0.3s;}
.field.full {grid-column: 1 / -1;}


@media all and (max-width:1080px){
    #m_contact .s-inner{flex-wrap: wrap;}
    #m_contact .lt{width: 100%;}
    #m_contact .rt{width: 100%;padding: 0;}
}
@media all and (max-width:480px){
    #m_contact .form_bottom{flex-wrap: wrap; justify-content: center; gap: 2rem;}
    #m_contact .agree_box{width: 100%;}
    #m_contact .submit_btn {}
}



.layer{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:3000000; background:rgba(0,0,0,0.45); }
.layer .layer_wrap{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; max-width:700px; border-radius:10px; background:#fff; text-align:left; letter-spacing:-0.5px; box-shadow:0 0 50px rgba(0,0,0,0.6); }
.layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#333;  border-radius:0 10px 0 10px; color: #fef7eb;}
.layer .close_btn a{display: block;color: #FFF;padding:14px 18px; font-size:2.2rem; font-weight:bold;}
.layer .layer_wrap .DB_info_detail{width:100%;  margin:18px auto; padding-bottom:16px; line-height:18px; color: #67747d; font-size:12px;}
.layer .layer_wrap .DB_info_detail h2{padding:28px 20px;border-bottom:1px solid #eee; font-size:2.2rem;; font-weight:bold; color:#0e2838}
.layer .layer_wrap .DB_info_detail_wrap p{padding:8px;margin-bottom:12px; font-size:1.5rem; line-height:1.4em;}
.layer .layer_wrap .DB_info_detail_wrap{width:98%; height:360px; padding:8px 16px; overflow:auto; box-sizing:border-box;}
.layer .layer_wrap .DB_info_detail_wrap dl dt{  font-size:1.8rem; display:block; background: #cfcfcf; border-radius:3px;  padding:1em; font-weight: bold; color:#0e2838}
.layer .layer_wrap .DB_info_detail_wrap dl dd{ font-size:1.6rem; margin-bottom:16px; padding:0.5em; line-height:1.6em; box-sizing:border-box;}