@charset "utf-8";
/* 
 * Nanum Gothic (Korean) http://www.google.com/webfonts/earlyaccess
 */

@font-face { font-family:'Pretendard'; font-weight:100; font-style:normal; src:url('/webfonts/Pretendard-Thin.woff2'); }
@font-face { font-family:'Pretendard'; font-weight:400; font-style:normal; src:url('/webfonts/Pretendard-Regular.woff2'); }
@font-face { font-family:'Pretendard'; font-weight:500; font-style:normal; src:url('/webfonts/Pretendard-Medium.woff2'); }
@font-face { font-family:'Pretendard'; font-weight:600; font-style:normal; src:url('/webfonts/Pretendard-SemiBold.woff2'); }
@font-face { font-family:'Pretendard'; font-weight:700; font-style:normal; src:url('/webfonts/Pretendard-Bold.woff2'); }
@font-face { font-family:'Pretendard'; font-weight:800; font-style:normal; src:url('/webfonts/Pretendard-ExtraBold.woff2'); }
@font-face { font-family:'Pretendard'; font-weight:900; font-style:normal; src:url('/webfonts/Pretendard-Black.woff2'); }

@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'ONE-Mobile-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* Common Style Reset Area */
*{margin:0;padding:0;}
html,body{width:100%; }
body,input,button,textarea,select{font-family:'Pretendard','Noto Sans KR', 'sans-serif',  Dotum, 'Montserrat', 'Open Sans', Arial ;  color:#000; font-weight:400; line-height:1.5em; font-size:20px}
img,fieldset,iframe{border:0 none; vertical-align:middle;}
input[type=image],[type=checkbox],[type=radio]{vertical-align:middle;margin-right:2px}

body {
scrollbar-face-color:#ffffff; /*스크롤바의 색을 지정*/
scrollbar-track-color:#FFFFFF; /*배경 부분의 색을 지정*/

scrollbar-arrow-color:#cccccc; /*화살표 버튼의 색을 지정*/

scrollbar-highlight-color:#cccccc; /*스크롤바의 왼쪽과 위쪽의 안쪽 색을 설정*/
scrollbar-shadow-color:#cccccc; /*스크롤바의 오른쪽과 밑에 들어가는 안쪽 색 지정*/

scrollbar-3dlight-color:#000000; /*스크롤바의 왼쪽과 위쪽 바탕으로 들어가는 색 지정*/
scrollbar-darkshadow-color:#000000; /*스크롤바의 오른쪽과 밑에 그림자의 색을 지정*/

}

li{list-style:none;}
a, a:link{color:#333333; text-decoration:none;}
a:hover{color:#e0a419; text-decoration:none;}
em,address{font-style:normal;}
button,label{cursor:pointer;}
label{position:relative;}
button *{position:relative;}
textarea{overflow:auto;border:1px solid #ccc;padding:5px}
hr{display:none;}
caption{display:none;}
ul{margin:0; padding:0;}
legend{display:none;}
table {border-collapse:collapse; }
table td{line-height:1.7em }
input[type=text]{padding:5px;height:40px;font-size:0.8em;margin-bottom:0px;border:1px solid #ccc}
input:focus{border:1px solid #e12b0d !important}
/*input[type=password]:focus,input[type=text]:focus{border:2px solid #e87c34}*/
input[type=password]{padding:5px;height:40px;font-size:0.8em;margin-bottom:0px;border:1px solid #ccc}
input[type=button],input[type=submit],input[type=reset]{cursor:pointer}
input[type=file]{height:40px;font-size:0.8em;margin-bottom:0px;}
select{height:40px;font-size:0.8em;border:1px solid #ccc}
/* Common Accessibility Style Area */
#Accessibility {position:absolute; left:0px;	top:0px; width:100%; z-index:999;}
#Accessibility a {display:block; padding:0 10px; height:0; overflow:hidden;	color:#fff;	text-align:left;}
#Accessibility a:hover, #Accessibility a:focus, #Accessibility a:active {background:#007cd8; height:auto;}

/* Clear Area */
.clear{display:block; float:none; clear:both; height:0; width:100%;  border:0; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}
html,body { height:100%;overflow-x: hidden; /* 가로 스크롤 원천 차단 */ }
img { max-width:100%; }
body{width:100%; margin:0 auto; /*max-width:1903px;*/ background:#fff;word-break:keep-all;-webkit-text-size-adjust:none;}
* { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; }
#wrap{width:100%; position:relative } 
#header{width:100%;position:relative; /*border-bottom:1px solid #eaeaea;*/ }

#header #top{clear:both;/*max-width:1300px;*/ width: 100%; padding:0 20px; position:relative; }
#header #top h1{display:inline-block; float:left; padding:20px 0; width:170px}

#header #top #topntop_m{display:none;position:absolute; right:0; top:30px;}
#header #top #topntop_m > ul > li{float:left;  }
#header #top #topntop_m > ul > li > a{display:block;padding:0 10px; }
#M_info2{display:none;position:absolute; top:30px; left:-58px; width:180px; border:1px solid #666699; background:#fff;;z-index:999; border-radius:3px;} 
#M_info2 li{float:none} 
#M_info2 li a{display:block; padding:5px 10px;color:#000; font-size:0.8em}
#M_info2 li a:hover{background:#f2f0fc; color:#666699; }
#M_info2 li a{border-bottom:1px solid #666699} 
#M_info2 li:last-child a{border-bottom:0} 

#M_info2 li a span:before{display:inline-block; content:""; width:20px; height:20px; margin-right:5px; vertical-align:middle; }
#M_info2 li.login_00 a span:before{background:url('/images/common/ico_my_00.svg') no-repeat left center;background-size:contain }
#M_info2 li.login_02 a span:before{background:url('/images/common/ico_my_02.svg') no-repeat left center;background-size:contain }
#M_info2 li.login_01 a span:before{background:url('/images/common/ico_my_01.svg') no-repeat left center; display:inline-block; content:""; width:20px; height:20px; margin-right:5px; vertical-align:middle;background-size:contain}
#M_info2 li.login_03 a span:before{background:url('/images/common/ico_my_03.svg') no-repeat left center; background-size:contain}



.btn-m-nav {  }


#header #top #navi{float:left;width:1060px;}
#header #top #navi ul{margin:0 auto; overflow:hidden; }
#header #top #navi ul li{display:table-cell}
#header #top #navi ul li a{display:block;font-weight:600; font-size:18px; padding:30px 32px 30px 32px;}
#header #top #navi ul li:last-child a{padding:30px 10px 30px 15px;}

@media (max-width:1230px) {
#header #top{width:100%; /*background:red*/}
#header #top h1{display:block;width:100%}
#header #topn{display:none}
#header #top #topntop_m{display:block; }
#header #top #navi{display:none}
#m-nav{display:block;}


}




/* MOBILE */
#m-nav { position:fixed; left:-100%; top:0; height:100%; width:100%; background:#fff;  transition:all 0.3s ease; -webkit-transition:all 0.3s ease; z-index:99999999999999999}
#m-nav .etc { *padding-top:50px; overflow:hidden; }
#m-nav .etc a { display:block; float:left; width:50%; border-top:1px solid #444; border-bottom:1px solid #444; border-left:1px solid #444; text-align:center; font-size:15px; color:#fff; background:#333; padding:10px 0; }
#m-nav .etc a.on {  background:#0099cc; padding:10px 0;border-top:1px solid #0099cc; border-bottom:1px solid #0099cc; border-left:1px solid #0099cc;  }
#m-nav .etc a:first-child { border-left:0;  }
#m-nav .nav h2 { line-height: 2em; }
#m-nav .nav h2 a {position:relative; display:block; font-size:17px; font-weight:600; padding:5px 0 5px 10px; border-bottom:1px solid #ededed;  }
#m-nav .nav h2 a::after{content:""; display:block; transform:rotate(90deg); position:absolute; top:15px; right:15px; width:7px; height:13px; background:url('/images/common/ico_m_nav_minus.png')no-repeat; transition:.2s linear; }
#m-nav .nav > div.active h2 a::after{transform:rotate(-90deg); background:url('/images/common/ico_m_nav_minus_on.png')no-repeat;}

#m-nav .nav ul { display:none; border-bottom:1px solid #ddd; }
#m-nav .nav ul li a { display:block; font-size:17px; padding:10px 0 10px 10px; }
#m-nav .nav > div.active ul {}
#m-nav .nav > div.active h2 a {color:#fff; background:#009999; font-weight:700;}
#m-nav .btn-close { position:absolute; right:0; top:10px;}
#m-nav .btn-close span{ color:#000; font-size:35px  !important }
#m-nav > h1 > a > img {width:140px;}
.bg-gnb { display:none; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.7); z-index:601;}

/* Mobile Active */
body.fixed  { overflow:hidden !important; }
body.fixed #m-nav { left:0; }
body.fixed .bg-gnb { display:block; }







.tab_1{overflow:hidden;display:table; margin:40px auto 40px auto;height:46px;text-align:center;-webkit--moz-}
.tab_1 li{display:table-cell;float:left; margin-right:20px;-webkit--moz-}
.tab_1 li:first-child{border-left:0;}
.tab_1 li:nth-child(3){margin-right:0}
.tab_1 li a{display:block; width:100%; font-size:30px;text-align:center;line-height:44px;color:#999; font-weight:600}
.tab_1 li a.on{color:#000}

@media (max-width:740px) {

.tab_1{margin:20px auto 0px auto;height:auto;}
.tab_1 li a{display:block; width:100%; font-size:1.5em;text-align:center;line-height:1.5em;color:#999; font-weight:600}
#header #top{padding:0 10px;}

}

@media (max-width:620px) {

.tab_1{margin:20px auto 10px auto;height:auto;}
.tab_1 li a{display:block; width:100%; font-size:1.5em;text-align:center;line-height:1.5em;color:#999; font-weight:600}
#header #top{padding:0 5px;}


}









/*  */



/* 컨텐츠영역 */

/* 서브상단영역 */
/*/images/02_sub/top_visual.png 임시 셋팅.*/
#SubVisual_01{max-width:1700px;;height:400px; margin:0 auto; border-radius:1.5rem;  background:url('/images/main/top_visual_01.jpg') center top; background-repeat: no-repeat; background-size:cover;   text-align:center; overflow:hidden; }
#SubVisual_02{max-width:1700px;;height:400px; margin:0 auto; border-radius:1.5rem;  background:url('/images/main/top_visual_02.jpg') center top; background-repeat: no-repeat; background-size:cover;   text-align:center; overflow:hidden; }
#SubVisual_03{max-width:1700px;;height:400px; margin:0 auto; border-radius:1.5rem;  background:url('/images/main/top_visual_03.jpg') center top; background-repeat: no-repeat; background-size:cover;   text-align:center; overflow:hidden; }
#SubVisual_04{max-width:1700px;;height:400px; margin:0 auto; border-radius:1.5rem;  background:url('/images/main/top_visual_04.jpg') center top; background-repeat: no-repeat; background-size:cover;   text-align:center; overflow:hidden; }
#SubVisual_05{max-width:1700px;;height:400px; margin:0 auto; border-radius:1.5rem;  background:url('/images/main/top_visual_05.jpg') center top; background-repeat: no-repeat; background-size:cover;   text-align:center; overflow:hidden; }
#SubVisual_06{max-width:1700px;;height:400px; margin:0 auto; border-radius:1.5rem;  background:url('/images/02_sub/top_visual.png') center top; background-repeat: no-repeat; background-size:cover ;  text-align:center; overflow:hidden; }
#SubVisual_07{max-width:1700px;;height:400px; margin:0 auto; border-radius:1.5rem;  background:url('/images/02_sub/top_visual.png') center top; background-repeat: no-repeat; background-size:cover;   text-align:center; overflow:hidden; }
#SubVisual_08{max-width:1700px;;height:400px; margin:0 auto; border-radius:1.5rem;  background:url('/images/02_sub/top_visual.png') center top; background-repeat: no-repeat; background-size:cover ;  text-align:center; overflow:hidden; }
div.slogan{width:60%;font-size:1.2em; color:#333;  margin:0 auto; line-height:1.3em; }
div.snav{margin-top:20px; color:#666;}
div.snav > a{color:#999; font-size:0.9em}

h2.SubVisual{width:100%;font-family: 'ONE-Mobile-Title'; text-align:center; font-size:1.7em; font-weight:normal; color:#fff; margin:130px 0 25px 0; color:#3c3f72;}


#Content{width:100%; padding:10px 0 50px 0; overflow: hidden; font-size:1em}
#Content #SubContent{}
p.page_title { width:100%; text-align:center; font-size:1.5em; font-family: 'ONE-Mobile-Regular'; font-weight:600; padding:50px 10px}
#Content #SubContent h3 { text-align:center;  width:100%; margin:0 auto -20px auto }
#Content #SubContent h3  span{ display:inline-block;font-size:35px;  padding:60px 0 20px 0; letter-spacing:-1px; margin:0 auto;margin-bottom:50px}
div.SubContent_in{max-width:1500px; margin:0 auto; overflow:hidden;  line-height:1.5em; padding:0 0 50px 0}
div.SubContent_in3{max-width:1400px; margin:0 auto; overflow:hidden;  line-height:1.5em }
div.SubContent_in_02{clear:both;width:100% !important; background:#fbfbfb;  line-height:1.5em }

/* 하단 영역 */

/* 푸터 기본 설정 */
/* 1. 푸터 바깥 영역 */
#Footer {
    clear: both;
    width: 100%;
    background: #f8f8f8;
    padding: 50px 0;
    border-top: 1px solid #ddd;

}

#Footer > div {
    display: flex;
	flex-wrap:wrap;
    width: 100%;
    max-width: 1600px; /* 전체 가로폭 제한 */
    margin: 0 auto;
    padding: 0 20px;
}

/* [왼쪽] 로고 + 링크 (전체의 50%) */
.footer-left {
   width:calc(100% - 700px); padding-right:20px; display:flex; gap:20px; align-items:flex-start;
}
.footer-left div.footer_ci {
   width:200px;
}

.footer-right {
   width:700px;
   font-size:0.9em;
}



/* 링크 박스: 왼쪽 영역 안에서 남는 공간 점유 */
ul.footerLink {
width:100%; display:flex; flex-wrap:wrap; gap:10px;
    
}
ul.footerLink li{
}

.footerLink a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #eee;
    border-radius: 30px; /* 시안처럼 둥근 박스 */
    padding: 12px 15px;
    font-weight: 600;
    color: #444;
    font-size: 0.95em;
    text-decoration: none;
    border: 1px solid #e0e0e0;
	width:250px;
}

.add_tt {
    display: inline-block; width:100px;
   
}



.copyright {
    margin-top: 20px;
    font-size: 0.85em;
    color: #888;
}

/* 소셜 아이콘 */
.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.icon-circle {
    width: 35px;
    height: 35px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 반응형 구간 설정 --- */

/* 1. 데스크탑/태블릿 경계 (1200px 이하) */
@media (max-width: 1200px) {
    #Footer > div {
        gap: 30px;
    }
    
    /* 50% 비율 유지하되 내부 여백 조절 */
    .footer-left {
        width: 50%; 
        padding-right: 0;
    }
    .footer-right {
        width: 50%;
        padding-left: 20px;
    }

    /* 링크 버튼 크기가 너무 크면 겹칠 수 있으므로 너비 해제 */
    .footerLink a {
        width: 100%; /* 부모 너비에 맞춤 */
		padding: 6px 15px;
    }
}

/* 2. 태블릿/모바일 경계 (1024px 이하) */
@media (max-width: 1024px) {
    #Footer > div {
        flex-direction: column; /* 세로 배치로 전환 */
        align-items: center;
    }

    .footer-left, .footer-right {
        width: 100%; /* 전체 너비 사용 */
        padding: 0;
    }

    .footer-left {
        flex-direction: column; /* 로고와 링크박스 세로 배치 */
        align-items: center;
        margin-bottom: 40px;
    }

    .footer-left div.footer_ci {
        width: 180px;
        margin-bottom: 20px;
    }

    ul.footerLink {
        justify-content: center; /* 버튼들 중앙 정렬 */
    }

    ul.footerLink li {
        width: 45%; /* 버튼을 2열로 유지 (모바일 환경 고려) */
    }

    .footer-right {
        padding-left: 0;
    }

    .social-icons {
        justify-content: center;
    }
}

/* 3. 스마트폰 소형 (640px 이하) */
@media (max-width: 640px) {
    ul.footerLink li {
        width: 100%; /* 버튼을 한 줄에 하나씩 배치 */
    }

    .footer-right .info-row {
        flex-direction: column; /* 주소 정보를 세로로 나열 */
        align-items: center;
        gap: 5px;
    }

    .add_tt {
        width: auto;
        font-weight: bold;
    }
}

#right_quick{position:fixed; right:0; top:200px; ;z-index:998; width:162px; }
ul.quick_01{position:fixed; right:0; top:200px; ;z-index:998; width:100px; border-radius: 100px 0 0 100px; padding-top: 50px;padding-bottom: 100px;background:#3c3f72;}
ul.quick_01 > li > a{text-align:center; padding-top:80px;  font-weight:600;}
ul.quick_01 > li:nth-child(n) > a{display:block; /*width:142px;*/ height:110px; background-size: contain; color:#fff; font-size:0.8em}
ul.quick_01 > li:nth-child(1) > a{background:url('/images/ico_quick_11.png') center 30px no-repeat; /*border-bottom:2px solid #b5df66; color:#9bc649; background-size:40%;*/}
ul.quick_01 > li:nth-child(2) > a{background:url('/images/ico_quick_12.png') center 30px no-repeat; /*border-bottom:2px solid #01c6da; color:#01c6da; background-size:30%;*/}
ul.quick_01 > li:nth-child(3) > a{background:url('/images/ico_quick_13.png') center 30px no-repeat; /*border-bottom:2px solid #ff876c; color:#ff876c; background-size:30%;*/}
ul.quick_01 > li:nth-child(4) > a{background:url('/images/ico_quick_14.png') center 30px no-repeat; /*border-bottom:2px solid #ffcc66; color:#ffcc66; background-size:40%;*/}
ul.quick_01 > li:nth-child(5) > a{background:url('/images/ico_quick_10.png') center 20px no-repeat; border-bottom:2px solid #4f97d3; color:#4f97d3; background-size:60%;}
ul.quick_02{position:fixed; right:0; bottom:0 ;z-index:998; width:50px; }
ul.quick_02 > li > a{display:block; width:43px; height:43px}
ul.quick_02 > li:nth-child(1) > a{background:url('/images/ico_quick_04.png') center top no-repeat; }
ul.quick_02 > li:nth-child(2) > a{background:url('/images/ico_quick_05.png') center top no-repeat; }

@media (max-width:1500px) {
ul.quick_01{display:none }
ul.quick_02{display:none }


}

@media (max-width:840px) {
div.SubContent_in{padding:0 10px 50px 10px}
p.page_title { padding:20px 10px}


@media (max-width:1200px) {
body,input,button,textarea,select{font-size:18px}
#SubVisual_01{height:300px;  }
#SubVisual_02{height:300px; }
#SubVisual_03{height:300px; }
#SubVisual_04{height:300px; }
#SubVisual_04_drive{height:300px;  }
#SubVisual_06{height:300px;  }
#SubVisual_07{height:300px;  }
#SubVisual_08{height:300px; }
}

@media (max-width:840px) {
body,input,button,textarea,select{font-size:16px}

#SubVisual_01{height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center }
#SubVisual_02{height:200px;  display:flex;flex-direction:column; align-items:center; justify-content:center }
#SubVisual_03{height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center }
#SubVisual_04{height:200px;  display:flex;flex-direction:column; align-items:center; justify-content:center}
#SubVisual_04_drive{height:200px; display:flex;flex-direction:column; align-items:center; justify-content:center  }
#SubVisual_06{height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center }
#SubVisual_07{height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center }
#SubVisual_08{height:200px; display:flex;flex-direction:column; align-items:center; justify-content:center }
h2.SubVisual{margin:0px 0 0px 0; color:#3c3f72;}
}
@media (max-width:740px) {
#Content{padding:10px 10px 20px 10px; }
body,input,button,textarea,select{font-size:16px}
}

@media (max-width:620px) {
body,input,button,textarea,select{font-size:14px}
}