@charset "utf-8"; 
/*나눔고딕*/
@import url(./fonts/NanumGothic/NanumGothic.css);

/* base */
html{overflow-y:scroll; overflow-x:hidden;font-family:"Nanum Gothic";}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input{margin:0;padding:0;font-family:"Nanum Gothic";}
h1, h2, h3, h4, h5, h6{font-weight:normal;font-size:100%;}
a{text-decoration:none;}
ul, ol, li{list-style:none;}
img{border:none; vertical-align:middle;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{display:block;}
table, td, tr{font-family:"Nanum Gothic"; font-size:13px; color:#333; font-weight:400;}

/* div위치조절 */
#wrap{width:100%; overflow:hidden; text-align:left; min-width:1200px; position:relative; background:#ffffff}
#top_wrap{position:relative; width:100%; height:220px; background:#ffffff; }
#middle_wrap{width:100%; overflow:hidden; position:relative;}
#bottom_wrap{width:100%; overflow:hidden; height:185px; background:#333333}

/* top div위치조절 */
.top_wrap1{ width:100%; height:40px; border-bottom:1px solid #ededed;}
.top_total1{ width:1200px; height:40px; margin:0 auto; overflow:hidden}
.top_logo2{ float:left; font-size:13px; font-family:"Nanum Gothic"; color:#555; letter-spacing:-0.05em; line-height:40px; width:220px; font-weight:600;}



#login{float:right;text-align:right;}
#login ul {list-style-type:none; overflow:hidden}
#login li {float:right; list-style-type:none; color:#727984}
#login li a{font-size:12px; color:#555;font-family: 'Pretendard', sans-serif; font-weight:400; letter-spacing:-0.025em;line-height:40px;}
#login li a:hover{background:none;font-weight:400;}


.top_wrap2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.top_total2 {
    width: 1200px;
    display: flex;
    flex-direction: column; 
    align-items: center;
}


#top_logo {

    height: 140px;
    padding: 0;
    margin-bottom: 15px; 
    padding-top: 35px;
}


#commonGnb {
    width: 1500px;
    text-align: center;
}

.gnbWrap {
    display: flex;
    justify-content: center;
    width: 100%;
}


ul.gnbLayer {
    display: flex;
    justify-content: center;
    padding: 0;
    list-style: none;
    padding-bottom: 12px;
}

ul.gnbLayer li {
    position: relative;
    margin: 0 60px;
}


ul.gnbLayer li a {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: block;
    padding: 10px 0;
}


ul.gnbLayer li dl {
    position: absolute;
    left: 50%;
    top: 100%; 
    transform: translateX(-50%);
    width: 180px;
    display: none; 
    background: #fff;
    border: 1px solid #ddd;
    z-index: 100;
}


ul.gnbLayer li dl dd {
    display: block;
    padding: 10px;
    text-align: center;
}


ul.gnbLayer li dl dd a {
    font-size: 14px;
    color: #333;
    text-decoration: none;
    display: block;
}


ul.gnbLayer li dl dd a:hover {
    background: #0199d5;
    color: #fff;
}


ul.gnbLayer li:hover dl {
    display: block;
}



#top_logo3{ float:right; margin-top:25px;}



/* bottom div위치조절 */
#footer {width:100%; overflow:hidden; min-width:1280px; padding:50px 0; position:relative; background:#000; }
 .bottom_logo{width: 100%;text-align: center;margin-bottom: 20px;}
 .footer_inner { width:100%; height:100%; margin:0 auto; position:relative;}
 .footer_middle_br, .footer_small_br {display:none; }
 
 .footer_menu_wrap { width:100%; overflow:hidden; margin-bottom:40px;}
 .footer_menu_wrap ul{ margin:0 auto; display:table;}
 .footer_menu li {float:left;}
 .footer_menu li a {display:block; padding:0 10px; font-size:14px; font-weight:700; line-height:20px; letter-spacing:-0.02em; color:#fff; -webkit-transition:background 300ms; transition:background 300ms; }
 .footer_menu li:last-child a {margin-right:0; }
 .footer_menu li a:hover {color:#fff;}
 .footer_menu li.privacy a {color:#fff;}
 .footer_menu li.privacy a:hover {color:#fff; }
 
 .footer_info { max-width:1200px; margin:0 auto; padding:0 0; position:relative; text-align:center; overflow:hidden; color:#fff;}
 .footer_info p {font-size:0; line-height:1; }
 .footer_info p span, .footer_info p span a {font-size:14px; color:#fff; }
 .footer_info p span {display:inline-block; padding-right:12px; position:relative; vertical-align:middle; line-height:160%; letter-spacing:-0.02em; }
 .footer_info p span:last-child {padding-right:0; }
 .footer_info p span:last-child:after {display:none; }
 



/* sub_body div위치조절 */
#sub_img{ margin:0 auto; width:100%; height:270px; overflow:hidden; background:url(../images/subbg.webp) no-repeat center top}
#sub_txt{ margin:95px auto 0; width:1200px; height:80px; text-align:center}
#middle_total{margin:50px auto 0; width:1920px;}
#con_total{width:1000px; overflow:hidden; margin-bottom:100px; margin:0 auto;}
#con_title{width:1000px; margin:0; position:relative; overflow:hidden; margin-bottom:40px; height:80px;}
#title_a{text-align:center; margin-bottom:15px; font-family:"Nanum Gothic"; font-size:36px;  color:#222;letter-spacing:-0.05em; font-weight:600;}
#title_b{text-align:center; font-family:"Nanum Gothic"; font-size:15px;  color:#222;letter-spacing:-0.05em}
#con{width:1000px; overflow:hidden; margin-bottom:100px;}

.sub_bg{ width:1200px; height:575px; margin:0 auto; background:#f1f1f1; padding:40px 0 0 40px}
.sub_bg2{ width:1200px; height:310px; margin:0 auto; background:#f1f1f1; padding:40px 0 0 40px}



/*이미지슬라이드 css소스*/
.clear{overflow: hidden; width: 1200px; margin:0 auto;}
.dn {display: none;}

.wrap_box{position:relative;  width:100%; overflow:hidden; height:800px; margin:0 auto ;}
.wrap_box .visual{ position: absolute; left:50%; top:0; margin-top: 0px; width:1920px; margin-left:-960px;height:800px;}
.wrap_box .box {position:relative; width:100%; height:100%;; margin:0 auto }
.wrap_box .visual .pht{position:absolute; overflow:hidden; top:0; left:0; width:100%;}
.wrap_box .visual .prev {position: absolute; top:100px; left:50%; margin-left:-700px; cursor: pointer; z-index:12}
.wrap_box .visual .next {position: absolute; top:100px; right:50%; margin-right:-700px; cursor: pointer;}
.wrap_box .visual .control{float:left; position:absolute; bottom:40px; left:49%; margin-left:-20px; width:100px; z-index:10000}
.wrap_box .visual .control .fl{float:left; margin-right:10px; cursor: pointer;}
.wrap_box .visual .control .fl:nth-child(4){margin-right:10px;}

#main_ment_wrap{ width:1200px; height:700px; margin:0 auto 0; position:relative; overflow:hidden}
#main_ment_total{ position:absolute; left:0; top:220px;width:1200px; height:235px; text-align:left; overflow:hidden}

#main_qmenu{ position:absolute; top:150px; left:0p; with:212px; height:53px;}
#main_qmenu li{float:left;}
#main_qmenu li a{display:block; width:212px; height:53px;}


/*메인갤러리 추출*/
/* 메인콘텐츠 */
.main_section{display:block;width:100%;overflow:hidden;padding: 200px 0;}
.main_c{background:url('../images/quick_bg.webp') no-repeat center center;color:#fff;height: 750px;margin-top: 200px;}
.main_c .box_total{margin:0 auto; width:1920px; overflow:hidden;}

#main_middle_total_a{margin:70px auto 0; width:100%; height:350px; }/*전체*/
#main_quick_wrap{margin:0 auto; width:1920px; height:350px; }
#main_quick{float:left; width:1920px;}

#main_quick_a_wrap{float:left; position:relative; width:1760px; height:350px;}
.main_quick_a{margin:0 auto;width: 1820px;height:350px;}
.main_quick_a li{float:left;text-align: center;}
.main_quick_a li a{display:block; height:350px; background:url('../images/quick_menu.webp') center center;}
.main_quick_a li.qmb01 a{width:435px; height:350px; background-position:0 top;}
.main_quick_a li.qmb02 a{width:435px; height:350px; margin-left: 20px; background-position:-455px top;}
.main_quick_a li.qmb03 a{width:435px; height:350px; margin-left: 20px; background-position:-910px top;}
.main_quick_a li.qmb04 a{width:435px; height:350px; margin-left: 20px; background-position:-1365px top;}

.main_quick_a li.qmb01 a:hover{width:435px; height:350px; background-position:0 bottom;}
.main_quick_a li.qmb02 a:hover{width:435px; height:350px; margin-left: 20px; background-position:-455px bottom;}
.main_quick_a li.qmb03 a:hover{width:435px; height:350px; margin-left: 20px; background-position:-910px bottom;}
.main_quick_a li.qmb04 a:hover{width:435px; height:350px; margin-left: 20px; background-position:-1365px bottom;}


.main_d{background:#fff; color:#000; padding: 100px 0;}

.main_d .box_total{margin:0 auto; width:1200px; overflow:hidden;}
.main_d .box_title{ position:relative; width:100%; height:50px; overflow:hidden; margin:0 0 30px; text-align:center;}
.main_d .box_title span{font-family: 'NotoSansCJKkr-Black';font-size: 45px;font-weight:700;line-height:40px;}
.main_d .box_title .line{ display:none; position:absolute; left:50%; bottom:0; width:60px; height:2px; margin-left:-30px; background:#fff; }
.main_d .box_con{width:100%; overflow:hidden; margin-bottom:10px;}
.main_d .box_btn{width:100%; overflow:hidden; margin-bottom:10px;}
.main_d .box_btn a{margin:0 auto;display:block;width:180px;height:50px;border: 1px solid #000;border-radius:25px;font-size:15px;font-weight:400;text-align:center;letter-spacing:-0.03em;line-height:48px;color: #000;-webkit-transition:all 200ms;transition:all 200ms;}

.main_d .b_text{display:block;margin-bottom:60px;font-size: 36px;line-height:140%;font-weight:100;text-align:center;letter-spacing:-0.05em;}
.main_d .box_con{margin-bottom:80px;}
.main_d .box_btn a:hover{background:#fff; color:#212f53;}

/* 슬라이드 이미지*/
#stand_total{margin:70px auto 0; width:100%; height:525px; position:relative; background:#f0f0f0;}
.stand{margin:0 auto; width:1200px; overflow:hidden; padding:70px 0 0 0; position:relative;}
.stand_title{width:100%; height:70px; overflow:hidden; margin-bottom:30px;}
.stand_title .title{position:relative; z-index:10; width:100%; font-size:30px; line-height:30px; font-weight:600; text-align:center;}
.stand_title .title spen{position:relative; z-index:10; width:100%; font-size:30px; line-height:30px; font-weight:600; text-align:center; color:#1062aa;}
.stand_title .title_02{position:relative; z-index:10; width:100%;  font-size:16px; line-height:16px; font-weight:400; text-align:center; margin-top:15px;}
.stand_con{width:100%; overflow:hidden;}
/* CUS*/
#main_con_total{margin:70px auto; width:1200px; overflow:hidden;}
#main_a{float:left; position:relative; width:425px; height:220px; padding:0 40px 0; border-right:1px solid #ddd; margin:0 0 0 0;}
#main_b{float:left; position:relative; width:358px; height:220px; padding:0 40px 0; }
#main_c{float:left; position:relative; width:415px; height:220px; padding:0 40px 0; border-right:1px solid #ddd;}

.main_title{width:100%; height:25px; text-align:left;  font-weight:600; font-size:22px; line-height:25px; color:#111;}
.main_title2{width:100%; height:25px; font-weight:600; font-size:13px; line-height:25px; color:#999;}
.main_con{width:100%; height:160px; margin-top:20px;}
.main_con a{ font-size:13px; line-height:25px;}

.main_con02{width:100%; height:160px; margin-top:30px;}
.main_con02 a{ font-size:13px; line-height:25px;}

.more_btn{ position:absolute; z-index:100; right:40px; top:25px; width:17px; height:17px;}
.cus_total{display:block; overflow:hidden; font-weight:600; font-size:15px; color:#444; line-height:28px;}
.cus_total .cus_title{float:left; display:block; width:16%;  font-weight:600; font-size:12px; line-height:25px; color:#555; letter-spacing:0;}
.cus_total .cus_con{float:left; display:block; width:82%;  font-weight:400; font-size:13px; line-height:25px; color:#222;}
.cus_total .cus_text1{font-weight:600; font-size:28px; color:#1062aa; line-height:28px; letter-spacing:0.03em; }
.cus_total .cus_text2{font-weight:600; font-size:26px; color:#222; line-height:26px; letter-spacing:0.03em; }
.cus_total .cus_text3{font-weight:400; font-size:16px; color:#444; line-height:16px; letter-spacing:0.03em; }
.cus_total .cus_text4{font-weight:400; font-size:13px; color:#444; line-height:13px; letter-spacing:0.01em; }

/* 탭네비 */
#tab_nav_sub{ width:100%; overflow:hidden; margin-bottom:80px}
#tab_nav_sub ul{ overflow:hidden; display:table; margin:0 auto}
#tab_nav_sub ul li{float:left; overflow:hidden; width:158px; height:50px; margin-right:10px;}
#tab_nav_sub ul li:last-child{ margin-right:0}

#tab_nav_sub ul li a{display:block; border:1px solid #ccc;  font-size:15px; line-height:48px; color:#333;background:#f1f1f1; text-align:center; font-family:"Nanum Gothic"; font-weight:600}
#tab_nav_sub ul li a:hover{background:#7abb36;color:#fff;border:1px solid #004173; font-family:"Nanum Gothic"; font-weight:600}
#tab_nav_sub ul li.on a{background:#0199d5;color:#fff;border:1px solid #004173; font-family:"Nanum Gothic"; font-weight:600}

/*---------------------------------
* TAIL.PHP : 온라인문의 바로가기
----------------------------------*/
#adver_total{margin:0 auto; width:100%; height:420px; background:url('../images/main_bg.jpg') center top; position:relative; min-width:1200px; position:relative;}
.adver_text{ position:absolute; z-index:100; left:50%; top:110px; margin-left:-550px; width:110px;}
.bbtn{ float:left; margin-left:-223px; left:50%; top:64%;  width:100%; position:absolute;}
.bbtn p a{ padding:15px 55px; font-size:14px; color:#fff; line-height:50px;font-family:'Nanum Gothic'; font-weight:600; border:1px solid #fff; margin-left:10px;}
.bbtn p a:hover{color:#000; font-weight:600; background:rgba(255,255,255,0.5) }

/* 슬라이드 이미지*/
.stand02{margin:0 auto; width:1200px; overflow:hidden; padding:70px 0 70px 0; position:relative;}
.stand02_title{width:100%; height:70px; overflow:hidden; margin-bottom:30px;}
.stand02_title .title_01{position:relative; z-index:10; width:100%; font-size:30px; line-height:30px; font-weight:600; text-align:center;}
.stand02_title .title_01 spen{position:relative; z-index:10; width:100%; font-size:30px; line-height:30px; font-weight:600; text-align:center; color:#1062aa;}
.stand02_title .title_02{position:relative; z-index:10; width:100%;  font-size:16px; line-height:16px; font-weight:400; text-align:center; margin-top:15px;}
.stand02_con{width:100%; overflow:hidden;}



/* 슬라이드 */
.intro_block {
  width: 100%;
  min-width: 1200px;
  background: #fff;
  padding: 80px 0; 
}

.intro_inner {
  max-width: 1600px;            
  margin: 0 auto;
  padding: 0 60px;              
  box-sizing: border-box;
  display: flex;
  align-items: center;          
  gap: 100px;                   
}


.intro_left {
  flex: 0 0 700px;              
  width: 700px;
  height: 500px;
}

.intro_slider {
  position: relative;
  width: 700px;
  height: 500px;
  overflow: hidden;
  /* border-radius: 8px; */
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
}

.intro_slider .slides {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform .5s ease;
}

.intro_slider img {
  display: block;
  width: 700px;
  height: 500px;
  object-fit: cover;
}


.intro_slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
 
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  font-size: 28px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
}
.intro_slider .prev { left: 14px; }
.intro_slider .next { right: 14px; }


.intro_slider .dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.intro_slider .dots button {
  width: 8px; height: 8px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.6);
  cursor: pointer;
}
.intro_slider .dots button.active {
  width: 20px; border-radius: 10px; background: #111;
}


.intro-right {
  flex: 1;                      
  min-width: 0;
  color: #111;
  font-family: 'Pretendard', sans-serif;
}


.intro-right .eyebrow {
  margin: 0 0 25px;
  font-size: 30px;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.01em;
}


.intro-right .intro-title {
  margin: 0 0 25px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}


.intro-right .intro-desc {
  max-width: 600px;
  margin: 0 0 36px;
  font-size: 18px;
  line-height: 1.9;
  color: #333;
}

.btn-more {
  display: inline-block;
  padding: 16px 30px;
  font-size: 18px;             
  color: #000;
  border: 1px solid #e5e5e5;
  text-decoration: none;
  background: #fff;
  transition: box-shadow .2s ease, transform .1s ease, border-color .2s;
}
.btn-more:hover {
  border-color: #d0d0d0;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transform: translateY(-1px);
}


.main-visual-section {
    position: relative;
    width: 1920px;
    margin-left: auto;
    margin-right: auto;
    min-height: 700px; 
    background-image: url('../images/main_bg.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    overflow: hidden;
}

.text-overlay-layer {
    /* 🌟 이전 ::after의 설정이 이곳으로 이동 🌟 */
    position: absolute;
    width: 900px;
    height: 600px;
    top: 100px;
    left: 1020px; 
    
    transform: none; 
    
    background-image: url('../images/main_bg_01.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 10;
    
    /* 🌟 애니메이션 초기 상태 설정 🌟 */
    opacity: 0;
    transform: translateX(2000px); /* 오른쪽 밖에서 시작 */
}

/* --- 애니메이션 활성화 규칙 (이전에 제공해드린 규칙 유지) --- */
/* data-delay 속성값을 CSS 애니메이션 지연 시간으로 사용 */
[data-delay] {
    animation-delay: var(--data-delay, 0s) !important;
}

/* data-duration 속성값을 애니메이션 재생 시간으로 사용 */
[data-duration] {
    animation-duration: var(--data-duration, 1s) !important;
}

/* 스크립트로 is-visible 클래스가 추가되면 애니메이션 실행 */
.text-overlay-layer.is-visible {
    opacity: 1;
    transform: translateX(0); /* 제자리로 이동 */
    /* animate__fadeInRightBig 효과를 활성화하는 클래스가 추가되어야 합니다. */
}