@charset "UTF-8";


:root{

    --fs110: 11rem;
    --fs105: 10.5rem;
    --fs88: 8.85rem;
	--fs70: 7.0rem;
    --fs65: 6.5rem;
    --fs66: 6.6rem;
    --fs56: 5.6rem;
    --fs50: 5.0rem;
    --fs45: 4.5rem;
    --fs42: 4.2rem;
    --fs40: 4.0rem;
    --fs35: 3.5rem;
    --fs34: 3.4rem;
	--fs32: 3.2rem;
    --fs30: 3.0rem;
	--fs28: 2.8rem;
    --fs27: 2.7rem;
    --fs26: 2.6rem;
	--fs24: 2.4rem;
    --fs23: 2.3rem;
	--fs22: 2.2rem;
	--fs20: 2.0rem;
    --fs19: 1.9rem;
	--fs18: 1.8rem;
    --fs17: 1.7rem;
    --fs16: 1.6rem;
	--fs14: 1.4rem;
}

html {color: #262626;}
.visual {background: url('../img/visual.png')no-repeat; background-size: cover; background-position: center;}
.visual{  position: relative;  position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;  font-family: 'SBAggro';;}
.visual .width{ padding: 20px 0; text-align: left;  background: url('../img/visualbg.png')no-repeat; background-size: 20%; background-position: center right 32%;}
.visual .width p{font-size: var(--fs24); color: #fff; }
.visual .width p span{font-weight: 700; font-size: var(--fs24); color: #fff; }
.visual .width h2{margin-top: 30px; font-family: 'GmarketSans'; font-weight: 300; font-size: var(--fs50);  color: #fff; line-height: 1.6;}
.visual .width h2 span{ font-family: 'GmarketSans'; font-weight: 700; font-size: var(--fs50);  color: #fff; line-height: 1.6;}
.visual .scroll {width: 3%; height: auto; position: absolute; bottom: 5%; left: 11%; animation: ani1 1.0s infinite ease-in-out;}
.visual .scroll img {width: 100%; height: auto;}

/* 비주얼 비디오 */
/* .visual #player {filter: brightness(70%); object-fit: cover; height: 100%; width: 100%; position: absolute; left: 0; top: 0;} */



@media all and (max-width: 1400px){
}
@media all and (max-width: 1200px){}
@media all and (max-width: 1024px){
    .visual .scroll {width: 8%; bottom: 4%; left: 44%;  }
}
@media all and (max-width: 900px){
    .visual .width{  background-position: center right 0%; background: url('../img/visualbg.png')no-repeat; background-size: 60%; background-position: center right 10%;}
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
}
@media all and (max-width: 650px){
    .visual .scroll {width: 15%; }
.visual .width h2{ line-height: 1.4; font-size: var(--fs45);}
.visual .width h2 span{line-height: 1.4; font-size: var(--fs45);}
}

@keyframes ani1 {
    0% {bottom: 5%;}
    50% {bottom: 6%;}
    100% {bottom: 5%;}
}

.title{text-align: center; margin-bottom: 80px;}
.title h4{ font-size: var(--fs22); font-weight: 700;}
.title h3{ font-size: var(--fs42); font-weight: 700;}
.title h3 span{ font-size: var(--fs42); font-weight: 700; color: #0079c4;}
.title P{ font-size: var(--fs22);}
.title h3 {margin: 15px 0 30px 0;}

@media all and (max-width: 1400px){
}
@media all and (max-width: 1200px){}
@media all and (max-width: 1024px){
    .title{text-align: center; margin-bottom: 40px;}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
}
@media all and (max-width: 650px){
}

/****************/
#page1 {z-index: 9999;}
#page1 .bg1 {}
#page1 { width: 100%; background: #fff; padding-bottom: 173px; }
#page1::after { clear: both; display: block; content: ""; }
#page1 .intro_section_wrap { width: 100%; word-break: keep-all; }

.intro_section_title { float: left; height: 360px; width: 680px; background: #06174b; color: #fff; position: relative; padding: 40px; text-align: right; }
.intro_section_title::before { content: ""; display: inline-block; width: 490px; height: 1px; position: absolute; background: #384770; z-index: 1; top: 0; left: 40px; }
.intro_section_title h2 {text-align: center; font-size: 48px; font-weight: normal; margin-top: 100px; position: relative; }
.intro_section_title h2::before { content: ""; display: inline-block; width: 70px; height: 1px; position: absolute; background: #fff; z-index: 1; top: 50%; right: -40px; transform: translateY(-50%); }
.intro_section_title span { display: block; margin-top: 50px; }

.introSWrap dl { float: left; max-width: calc(100% - 950px); width: 100%; color: #1c1c1c; margin: 100px 0 0 80px; box-sizing: border-box; }
.introSWrap dl dt {  font-weight: 600; color: #06174b; font-size: 4.125rem; line-height: 42px; position: relative; }
.introSWrap dl dt span{  font-weight: 800;}
.introSWrap dl dt::before { content: ""; display: inline-block; width: 90px; height: 1px; position: absolute; background: rgb(6, 23, 75, 0.3); z-index: 1; top: 170%; left: -100px; transform: translateY(-50%); }
.introSWrap dl dd {color: #494949; font-size: 1.425rem;  margin-top: 25px; line-height: 26px; }

@media screen and (max-width:1600px){
    .introSWrap dl {max-width:calc(100% - 820px);}
    
    }
@media screen and (max-width:1400px){
.intro_section_title {width:420px } 
.intro_section_title:before {height:0;}
.introSWrap dl {max-width:calc(100% - 520px);}
.introSWrap dl dt br {display:none;}
.introSWrap dl dd br {display:none;}

}
@media all and (max-width: 1024px){
    #page1 {padding-bottom: 60px; }
}
@media screen and (max-width:900px){
#intro_section {padding-bottom:50px;}
.intro_section_title { width:100%; background:#fff; height:auto; padding:0}
.intro_section_title h2 { font-size:32px; text-align:left; margin-top:40px;}
.intro_section_title h2:before { height:0px;}
.intro_section_title span {display:none;}

.introSWrap dl {max-width:100%; width: 92%; margin:0 auto; margin-left: 4%;}
.introSWrap dl dt {font-size: 5.4375rem; line-height:24px; margin-top:30px;}
.introSWrap dl dt:before {height:0;}
.introSWrap dl dd {font-size: 2.7375rem;}
	
}




#page2 {position: relative; z-index: 8;}
#page2 .bg2{position: absolute; right: 0; top: -11.5%; width: 43%; height: auto; ;}
#page2 .bg2 img{ width: 100%; height: auto;}
 #page2 .box_wrap {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 80px 0;}
 #page2 .box_wrap .box {width: 31.7%;}
 #page2 .box_wrap .box img {width: 100%;}
 #page2 .box_wrap .box h4{margin: 35px 0 20px 0; font-size: var(--fs27); font-weight: 800;}
 #page2 .box_wrap .box p{ font-size: var(--fs17); line-height: 1.4;}
 #page2 .box_wrap .box.service-box-click {position: relative;}
 #page2 .box_wrap .box.service-box-click::after {
     content: '자세히 보기';
     position: absolute;
     bottom: 20px;
     right: 20px;
     background: #0079c4;
     color: #fff;
     padding: 8px 15px;
     border-radius: 5px;
     font-size: var(--fs14);
     font-weight: 600;
     opacity: 0;
     transition: opacity 0.3s ease;
 }
 #page2 .box_wrap .box.service-box-click:hover::after {
     opacity: 1;
 }

 #page3 {width: 100%; padding: 280px 0;}
 #page3 {background: url('../img/bg3.png')no-repeat; background-size: cover; background-position: center;}
 #page3 .txtbox h4{font-size: var(--fs22); font-weight: 700; color: #fff;}
 #page3 .txtbox h2{margin: 18px 0 45px 0; font-size: var(--fs56); font-weight: 300; color: #fff;}
 #page3 .txtbox h2 span{font-size: var(--fs21); font-weight: 800; color: #fff;}
 #page3 .txtbox p{ width: 50%;font-size: var(--fs21);color: #fff; line-height: 1.4;}

 @media all and (max-width: 1400px){
}
@media all and (max-width: 1200px){}
@media all and (max-width: 1024px){
    #page2 .bg2{top: -0%; width: 43%;}
    #page2 .box_wrap {gap: 40px 0;}
    #page3 {width: 100%; padding: 140px 0;}
    #page3 .txtbox p{ width: 100%;}
    #page3 .txtbox p{font-size: 14px;}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
    #page2 .box_wrap .box {width: 49%;}
}
@media all and (max-width: 768px){
}
@media all and (max-width: 650px){
    #page2 .box_wrap .box {width: 100%;}
}
 #page4 {background: url('../img/bg4.png')no-repeat; background-size: cover; background-position: center;}
 #page4 .imgbox {display: flex; justify-content: center;}
 #page4 .imgbox img {width: 74%; height: auto;}
 @media all and (max-width: 1400px){
}
@media all and (max-width: 1200px){}
@media all and (max-width: 1024px){
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
    #page4 .imgbox img {width: 70%; }
}
@media all and (max-width: 650px){
}
 #page5 {background: url('../img/bg5.png')no-repeat; background-size: cover; background-position: center;}
#page5 .title h3 {color: #fff;}
#page5 .title p {color: #fff;}
#page5 #applyform1 {display: flex; justify-content: space-between; flex-wrap: wrap;}
#page5 .form_box .form_im {width: 49%;}
#page5 .form_box .form_txt {width: 49%; height: 100%;}

#page5 .form_im .box {margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}
#page5 .form_im .box:last-child {margin-bottom: 0px}
#page5 .form_im .box .con_title {width: 15%;}
#page5 .form_im .box .in_box {width: 85%;}

#page5 .form_im .box h4 { font-size: var(--fs20); font-weight: 700; color: #fff;} 
#page5 .form_im .box h4 span {font-size: var(--fs20); font-weight: 700; color: red;} 

#page5 .form_im .box .in_box input {display: inline-block; width: 100%; line-height: 42px; height: 42px; font-size: var(--fs20); font-weight: 600; }
#page5 .form_im .box .in_box input::placeholder {padding: 12px 15px; color:#d5d5d5 ;}

#page5 .form_box .form_txt .in_box input {display: inline-block; width: 100%; line-height: 42px; height: 205px; font-size: var(--fs20); font-weight: 600; }
#page5 .form_box .form_txt .box .in_box input::placeholder {padding: 12px 15px; color:#d5d5d5 ;}
#page5 .check {display: flex; justify-content: center;}
#page5 .check label {padding: 12.3px; color: #fff; font-size: var(--fs17);}
#page5 .check label span {cursor: pointer; color: #fff; border-bottom: 1px solid #fff; font-size: var(--fs17); }
#page5 .check label span:hover {color: #bbf2ff; border-bottom: 1px solid #fff; }
#page5 .submit { font-size: var(--fs20); font-weight: 700; height: 42px; line-height: 42px; width: 100%; text-align: center; color: #fff; background: #0079c4;}

#page5 .flie_box {display: flex; margin-top: 60px; flex-wrap: wrap;}
#page5 .flie_box>div {border: 1px solid #fff; width: 50%; padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: center;}
#page5 .flie_box>div:first-child {border-right: none;}
#page5 .flie_box .box img{height: 64px; width: auto;}
#page5 .flie_box .box a {padding: 12px 0; text-align: center; width: 100%; font-size: var(--fs22); font-weight: 700; color: #fff;}
#page5 .flie_box .box span {text-align: center; width: 100%; font-size: var(--fs18); color: #0079c4;}

@media all and (max-width: 1400px){
}
@media all and (max-width: 1200px){}
@media all and (max-width: 1024px){
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
    #page5 .form_box .form_im {width: 100%; margin-bottom: 20px;}
#page5 .form_box .form_txt {width: 100%; }
}
@media all and (max-width: 768px){
}
@media all and (max-width: 650px){
    #page5 .flie_box>div {width: 100%; }
    #page5 .flie_box>div:first-child {border-right: 1px solid #fff; margin-bottom: 20px;}
}



#banner {padding: 90px 0; background: url('../img/banner.png')no-repeat; background-size: cover; background-position: center;}
#banner h3 {font-weight: 800; font-size: var(--fs32); text-align: center; color: #fff;}
#banner p {margin-top: 22px; font-size: var(--fs20); text-align: center; color: #fff;}

@media all and (max-width: 1400px){
}
@media all and (max-width: 1200px){}
@media all and (max-width: 1024px){
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
}
@media all and (max-width: 650px){
    #banner { background-position: top left;}
}


#page6  {padding-bottom: 0;}

#page6 .width {display: flex; justify-content: space-between; flex-wrap: wrap;}
#page6 .width .title {width: 35%;}
#page6 .width .title h4 {text-align: left; color: #0079c4;}
#page6 .width .title h3 {text-align: left; font-size: var(--fs65); font-weight: 800;}
#page6 .width .title p {text-align: left; color: #494949;}
#page6 .width .mapbox {border: 1px solid #b2b2b2; width: 65%; overflow: hidden;}
#page6 .width .mapbox #daumRoughmapContainer1718946484797 {width: 100% !important;}
.wrap_controllers {display: none;}
#page6 .width .map_cacao {gap: 0 3px; margin-top: 60px; border-radius: 7px; padding: 12px 0; width: 39%; display: flex; justify-content: center; align-items: center; background: #0079c4;}
#page6 .width .map_cacao a {font-size: var(--fs16); font-weight: 700; color: #fff;}

@media all and (max-width: 1400px){
}
@media all and (max-width: 1200px){}
@media all and (max-width: 1024px){
    #page6 .width .map_cacao {margin-top: 30px;}
}
@media all and (max-width: 900px){
    #page6 .width .map_cacao { width: 100%; }
    #page6  {padding: 60px 0;}
    #page6 .width .title {width: 100%;}
    #page6 .width .mapbox { width: 100%;}
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
}
@media all and (max-width: 650px){
}


/* 팝업 */
.pop_wrap {display: none;position: fixed;top: 0;left: 0;background: rgb(0, 0, 0, 0.3);width: 100%;  height: 100%;  z-index: 9999;}
.pop_wrap .pop-inner {position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 90%;  max-width: 768px;  height: 45vh;  max-height: 760px;  padding: 50px 20px;  background: #fff;  line-height: 25px;}
.pop-close {  position: absolute;  top: 5px;  right: 0;  width: 30px;  height: 30px;  cursor: pointer;}
.pop-close i{font-size: 24px;}
.pop_wrap .pop-inner h3{text-align: center; font-size: 2.0rem; font-weight: bold; margin-bottom: 20px;}
.pop-text{height: 40vh; overflow-y: scroll;}

/* PDF 모달 팝업 */
.pdf_pop_wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.pdf_pop-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    height: 85vh;
    max-height: 900px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pdf_pop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: #0079c4;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.pdf_pop-header h3 {
    font-size: var(--fs24);
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.pdf_pop-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s ease;
    color: #fff;
}

.pdf_pop-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pdf_pop-close i {
    font-size: 28px;
    color: #fff;
}

.pdf_pop-content {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

.content-wrapper {
    padding: 50px 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.content-section {
    margin-bottom: 0;
}


.content-section p {
    font-size: 16px;
    line-height: 2.0;
    color: #333;
    margin-bottom: 20px;
    text-align: justify;
    word-break: keep-all;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 30px 25px;
    }
    
    
    .content-section p {
        font-size: 15px;
        line-height: 1.8;
    }
    
    .pdf_pop-inner {
        width: 95%;
        height: 90vh;
    }
}

/* 서비스 박스 호버 효과 */
#page2 .box_wrap .box.service-box-click {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#page2 .box_wrap .box.service-box-click:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 121, 196, 0.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 반응형 디자인 */
@media all and (max-width: 1024px) {
    .pdf_pop-inner {
        width: 95%;
        height: 80vh;
        max-height: 800px;
    }
    
    .pdf_pop-header {
        padding: 15px 20px;
    }
    
    .pdf_pop-header h3 {
        font-size: var(--fs20);
    }
}

@media all and (max-width: 768px) {
    .pdf_pop-inner {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .pdf_pop-header {
        padding: 12px 15px;
    }
    
    .pdf_pop-header h3 {
        font-size: var(--fs18);
    }
    
    .pdf_pop-close {
        width: 35px;
        height: 35px;
    }
    
    .pdf_pop-close i {
        font-size: 24px;
    }
}


#ft {padding: 45px 0; display: flex; justify-content: left; flex-wrap: wrap; background: #06174b;}
#ft>div {width: 100%;}
#ft .flogo img{display: block;}
#ft .foot_info{ padding: 35px 0;}
#ft .foot_info p{color: #fff; font-size: var(--fs14); font-weight: 300; line-height: 1.8; text-align: left;}
#ft .foot_info p>span{color: #fff; font-size: var(--fs14); font-weight: 700; line-height: 1.8; text-align: left;}
#ft .copyright span{display: block; color: #566bab; font-size: var(--fs14); font-weight: 300; line-height: 1.8; text-align: left;}

@media all and (max-width: 1400px){

}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){

}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){

}
@media all and (max-width: 650px){
}


.quick_banner{z-index: 99; right: 10px; top: 35%; position: fixed; border-radius: 40px; overflow: hidden; display: flex; flex-direction: column;}
.quick_banner img{width: 85px;}

.pic_lt_block li .last_title{word-break: break-all !important;}


/* 폰트 반응형 */
@media all and (max-width: 1200px) {
    :root {
        --fs110: 10rem;
        --fs105: 9.5rem;
        --fs88: 8rem;
        --fs70: 6.5rem;
        --fs65: 6rem;
        --fs66: 6.1rem;
        --fs56: 5.1rem;
        --fs50: 4.5rem;
        --fs45: 4.0rem;
        --fs42: 3.8rem;
        --fs40: 3.6rem;
        --fs35: 3.2rem;
        --fs34: 3.1rem;
        --fs32: 3.0rem;
        --fs30: 2.8rem;
        --fs28: 2.6rem;
        --fs27: 2.5rem;
        --fs26: 2.4rem;
        --fs24: 2.2rem;
        --fs23: 2.1rem;
        --fs22: 2.0rem;
        --fs20: 1.9rem;
        --fs19: 1.8rem;
        --fs18: 1.7rem;
        --fs17: 1.6rem;
        --fs16: 1.5rem;
        --fs14: 1.3rem;
    }
}

@media all and (max-width: 850px) {
    :root {
        --fs110: 9rem;
        --fs105: 8.5rem;
        --fs88: 7.5rem;
        --fs70: 6rem;
        --fs65: 5.5rem;
        --fs66: 5.6rem;
        --fs56: 4.6rem;
        --fs50: 4.1rem;
        --fs45: 3.7rem;
        --fs42: 3.5rem;
        --fs40: 3.3rem;
        --fs35: 3.0rem;
        --fs34: 2.9rem;
        --fs32: 2.8rem;
        /* --fs30: 2.6rem;
        --fs28: 2.4rem;
        --fs27: 2.3rem;
        --fs26: 2.2rem;
        --fs24: 2.0rem;
        --fs23: 1.9rem;
        --fs22: 1.8rem;
        --fs20: 1.7rem;
        --fs19: 1.6rem;
        --fs18: 1.5rem;
        --fs17: 1.4rem;
        --fs16: 1.3rem;
        --fs14: 1.2rem; */
    }
}

@media all and (max-width: 650px) {
    :root {
        --fs110: 8rem;
        --fs105: 7.5rem;
        --fs88: 7rem;
        --fs70: 5.5rem;
        --fs65: 5rem;
        --fs66: 5.1rem;
        --fs56: 4.1rem;
        --fs50: 3.7rem;
        --fs45: 3.3rem;
        --fs42: 3.1rem;
        --fs40: 2.9rem;
        --fs35: 2.6rem;
        --fs34: 2.5rem;
        --fs32: 2.4rem;
        /* --fs30: 2.2rem;
        --fs28: 2.1rem;
        --fs27: 2.0rem;
        --fs26: 1.9rem;
        --fs24: 1.8rem;
        --fs23: 1.7rem;
        --fs22: 1.6rem;
        --fs20: 1.5rem;
        --fs19: 1.4rem;
        --fs18: 1.3rem;
        --fs17: 1.2rem;
        --fs16: 1.1rem;
        --fs14: 1.0rem; */
    }
}