/* 공통 클래스 */
.flex { display: flex; display: -ms-flexbox; }
.flex_col{display: flex; display: -ms-flexbox; flex-direction: column;}
.flex_ac {display: flex; display: -ms-flexbox; align-items: center;}
.flex_as {display: flex; display: -ms-flexbox; align-items: flex-start;}
.flex_jb{display: flex; display: -ms-flexbox; justify-content: space-between;}
.flex_jc{display: flex; display: -ms-flexbox; justify-content: center;}
.flex_ac_jb {display: flex; display: -ms-flexbox; align-items: center; justify-content: space-between;}
.flex_ac_jc {display: flex; display: -ms-flexbox; align-items: center; justify-content: center;}


.w1000 { max-width: 1000px; margin: 0 auto; }
.w860 { max-width: 860px; margin: 0 auto; }
.w750 { max-width: 750px; margin: 0 auto; }

/* .mo_none{display: block;}
.mo_block{display: none;}
.mo_none8{display: block;}
.mo_block8{display: none;}
.mo_none-in9{display: inline-block !important;}
.mo_block-in9{display: none !important;}
.mo_none10{display: block;}
.mo_block10{display: none;}
.mo_none13{display: block;}
.mo_block13{display: none;}
.mo_none14{display: block;}
.mo_block14{display: none;}
.mo-in-none10{display: inline-block;}
.mo-in-block10{display: none;}
.mo_none-flex{display: block;}
.mo_block-flex{display: none;}
.mo_none-flex-box-center-bw{display: flex; display: -ms-flexbox; align-items: center; justify-content: space-between;}
.mo_block-flex-box-center-bw{display: none;} */


.ellipsis1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.ellipsis2 { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ellipsis3 { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

::selection {
    background: var(--main-color-1);
    color: #fff;
}

:root {
    /* gray */
    --gray-color-1  : #f0f0f0;
    --gray-color-2  : #dddddd;
    --gray-color-3  : #cccccc;
    --gray-color-4  : #eeeeee;
    --gray-color-5  : #dcdcdc;
    --gray-color-6  : #959595;
    --gray-color-7  : #f5f5f5;
    --gray-color-8  : #c8c8c8;
    --gray-color-9  : #f6f6f6;
    --gray-color-10 : #f2f2f2;
    --gray-color-11 : #aaaaaa;
    --gray-color-12 : #fbfbfb;
    --gray-color-13 : #dedcd9;
    --gray-color-14 : #fbf9f7;
    --gray-color-15 : #e7e7dd;
    --gray-color-16 : #eceae6;
    /* white */
    --white-color-1 : #ffffff;
    /* black */
    --black-color-0 : #000000; 
    --black-color-1 : #111111; 
    --black-color-2 : #222222; 
    --black-color-3 : #333333; 
    --black-color-4 : #444444; 
    --black-color-5 : #555555; 
    --black-color-6 : #666666; 
    --black-color-7 : #777777; 
    --black-color-8 : #888888; 
    --black-color-9 : #999999; 
    /* company color */
    --main-color-1  : #00b0ec;
    --main-color-2  : #bb1f19;
    --main-color-3  : #324179;
    --main-color-4  : #8e8270;
    --main-color-5  : #d9d1c6;
    --main-color-6  : #6a8797;
    --main-color-7  : #c5bcaf;
    --main-color-8  : #86adff;

    /* company rgb color */
    --main-color-3-rgb : 33,44,84;
}


/* ::-webkit-scrollbar{
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: #ee7500;
    border-radius: 10px;
    height: 17%;
}
::-webkit-scrollbar-track{
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
} */

/* html {
    scrollbar-face-color: #5500ff;
    scrollbar-track-color: #5500ff;
    scrollbar-arrow-color: none;
    scrollbar-highlight-color: #5500ff;
    scrollbar-3dlight-color: none;
    scrollbar-shadow-color: #5500ff;
    scrollbar-darkshadow-color: none;
} */

/* * { cursor: inherit; } */
.w_color { color: #fff; }
.main_color1 { color: #004098 !important; }
.main_bgColor1 { background-color: #004098 !important; }
.main_color2 { color: #309b95 !important; }
.main_bgColor2 { background-color: #309b95 !important; }
.main_bgColor3 { background-color: #988175 !important; }
.org { color: #e06900; }
.grb { color: #47541b; }
.red { color: red; }

/* font */
.appleSDG { font-family: 'APPLE_SANDG', sans-serif; }
.poppins { font-family: 'poppins', sans-serif; }
.spoqaHanSans { font-family: 'SpoqaHanSans', sans-serif; }
.Cafe24Syongsyong { font-family: 'Cafe24Syongsyong', sans-serif; }
.Cafe24Shiningstar { font-family: 'Cafe24Shiningstar', sans-serif; }

/* #pointer { position: fixed; z-index: 1000; background-color: var(--main-color-7); border-radius: 50%; pointer-events: none; border: none; text-align: center; color: var(--white-color-1); transform: translate(25%, 25%); left: 15px; width: 15px; height: 15px; line-height: 15px; font-weight: 700; transition: width 200ms ease-out, height 200ms ease-out, line-height 200ms ease-out, font-size 200ms ease-out; } */

/* 공통 */
#container { overflow: hidden; }
.main_menu_aside { position: fixed;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,.7);display:none;z-index: 20; }
body.body_bg { overflow: hidden !important; }
.body_bg .main_menu_aside { display: block; }



/* select custom */
select {
    /*background-image: url('../img/icon/select_arrow.png');*/
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) center;
    background-color: #fff;
}




/* header */
.skip { padding: 20px 0; color: #fff; font-size: 25px; display: block; text-align: center; position: absolute; background-color: #2274c6; width: 100%; top: -999px; opacity: 0; z-index: 999; }

#header { position: relative; background: #fff; border-bottom: 1px solid #e3e3e3; }

/* 로고 */
#header .logo { margin-top: -27px; width: 250px; height: 60px; line-height: 60px; }

/* top Header */
#tHeader { display: flex; justify-content: space-between; align-items: end; background-color:#fff}
#tHeader .leftBox { width: 50%; }
#tHeader .leftBox ul { position: relative; display: flex; }
#tHeader .leftBox ul::after { content: ''; display: block; width: 50%; height: 100%; background-color: #fff; position: absolute; top: 0; left: -38%; }
#tHeader .leftBox ul li { max-width: 160px; width: 100%; position: relative; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 5px 0px 7px rgba(0,0,0,.1); }
#tHeader .leftBox ul li:not(:first-child) { margin-left: -5px; }
#tHeader .leftBox ul li a { display: block; padding: 15px 0; font-size: 15px; font-weight: 500; color: var(--white-color-1); overflow: hidden; text-align: center; }

#tHeader .leftBox > li:first-child{ padding:9px 15px 9px 15px; }
#tHeader .leftBox > li {border-right:1px solid #ddd; padding:9px 15px; line-height:1;}
#tHeader .leftBox > li a{font-size:15px;}

#tHeader .rightBox .userBox { display: flex; align-items: flex-end; }
#tHeader .rightBox .user_list { display: flex; align-items: center; margin-top:5px; padding:3px 0;}
#tHeader .rightBox .user_list li { margin-left: 20px; font-size: 15px; color: #444; }
#tHeader .rightBox .user_list li a { display: flex; align-items: center; }
#tHeader .rightBox .user_list li a img { margin-right: 5px; }
#tHeader .rightBox .user_list li a span { display: inline-block; font-size: 15px; color: #444; }
/* hover */
#tHeader .rightBox .user_list li a:hover img { filter: invert(56%) sepia(42%) saturate(5069%) hue-rotate(162deg) brightness(100%) contrast(101%); }
#tHeader .rightBox .user_list li a:hover span { color: #444; }

#tHeader .rightBox .lang_box { margin-bottom: -16px; }
#tHeader .rightBox .lang_box > li { border-radius: 30px; border: 1px solid #d5d5d5; position: relative; }
#tHeader .rightBox .lang_box > li > a { width: 80px; height: 40px; padding: 15px; background: #fff; border-radius: 30px; position: relative; z-index: 2; }
#tHeader .rightBox .lang_box > li > a span { display: inline-block; font-size: 14px; margin-right: 10px; }
#tHeader .rightBox .lang_box .lang_dep2 { display: none; position: absolute; top: 50%; left: -1px; width: calc(100% + 2px); padding: 15px 0; padding-top: 25px; background: #fff; border: 1px solid #d5d5d5; border-radius: 0 0 23px 23px; z-index: 1; }
#tHeader .rightBox .lang_box .lang_dep2 li a { font-size: 14px; padding: 0 17px; }

.topNavBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 8px 16px;
}

.topNavBar__left {
  display: flex;
  gap: 8px;
}

.topNavBar__btn {
  padding: 4px 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  color: #333;
}

.topNavBar__btn:hover {
  background-color: #ddd;
}

.topNavBar__right {
  display: flex;
  align-items: center;
}

.topNavBar__right a {
  color: #333;
  text-decoration: none;
  padding: 0 12px;
  position: relative;
  font-size: 16px;
}

/* hover 효과 */
.topNavBar__right a:hover {
  text-decoration: underline;
}

/* a 태그 구분선 처리 */
.topNavBar__right a:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: 0;
  color: #aaa;
  padding-left: 8px;
}
@media (max-width: 768px) {
  .topNavBar {
    display: none;
  }
}
/* 모달 전체 영역 */
.search-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1000;
}

.search-modal__overlay {
  position: absolute;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

/* 콘텐츠 박스 */
.search-modal__content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 40px 30px 30px;
  border-radius: 12px;
  text-align: center;
  z-index: 1001;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  width: 90%;
  max-width: 400px;
}

/* 입력창 스타일 */
.search-modal__content input[type="text"] {
  width: 71%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  margin-top: 10px;
}

/* 검색 버튼 스타일 */
.search-btn {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 10px;
}

.search-btn:hover {
  background-color: #333;
}

/* 닫기 버튼 (X) */
.search-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  z-index: 1002;
}

.search-modal__close:hover {
  background-color: #333;
}


/* bottom Header */
#bHeader { display: flex; justify-content: space-between; align-items: center; }
/* 네비게이션 메뉴 */
.navigation .dep2_box { display: none; position: absolute; top: 130px; left: 0; width: 100%; height: 245px; background-color: #fff; }
.navigation .dep2_box > .flex { height: 100%; }
.navigation .dep2_box .titleBox { width: 31%; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url('../img/common/nav_dep2_bg.png'); padding: 70px 65px 0 260px; border-top:1px solid #ddd;}
.navigation .dep2_box .titleBox h2 { font-size: 30px; font-weight: 600; color: #0071ba; margin-bottom: 35px; font-family:'TheJamsil'}
.navigation .dep2_box .titleBox p { font-size: 15px; color: #fff; line-height: 1.5; }
.navigation .dep1_li > a::after { content: ''; display: block; width: 40px; height: 18px; /*background: url('../img/icon/header_hover_icon.jpg') no-repeat center / cover; position: */absolute; bottom: -20px; left: 50%; transform: translateX(-50%); z-index: 30; opacity: 0; transition: all 0.3s; }
.navigation .dep1_li > a.enter { font-weight: 600; color: #0071ba; transition: all 0.3s; }
.navigation .dep1_li > a.enter::after { opacity: 1; bottom: -10px; }
.navigation .dep1_tit { display: inline-block; font-size: 24px; font-weight: 600; padding: 35px 32.5px; margin-top:20px; position: relative;}
.navigation .dep2_box .dep2 { width: 69%; padding: 45px 260px 30px 55px; border-top:1px solid #ddd;}
.navigation .dep2_box .dep2 > li { width: 23.5%; position: relative; height: fit-content; }
.navigation .dep2_box .dep2 > li:not(:nth-child(4n)) { margin-right: 2%; }
.navigation .dep2_box .dep2 > li > a { position: relative; font-size: 16px; display: block; padding: 19px 26px 15px; border: 1px solid #e5e5e5; border-radius: 5px; transition: all 0.1s cubic-bezier(0.86, 0, 0.07, 1); }
.navigation .dep2_box .dep2 > li > a::after { content: ''; display: inline-block; width: 7px; height: 11px; background: url('../img/icon/header_arrow.png') no-repeat center / cover; position: absolute; top: 52%; right: 25px; transform: translateY(-50%); }
.navigation .dep2_box .dep3 { padding-left: 30px; padding-top: 25px; }
.navigation .dep2_box .dep3 li::marker { content: '·'; font-size: 15px; font-weight: 600; color: #0071ba; }
.navigation .dep2_box .dep3 li a { font-size: 15px; }
.navigation .dep2_box .dep3 li:not(:last-child) { margin-bottom: 15px; }

/* hover */
.navigation .dep2_box .dep2 > li:hover > a,
.navigation .dep2_box .dep2 > li > a:focus,
.navigation .dep2_box .dep2 > li:active > a { background-image: linear-gradient(to right, #8cbb7e 0%, #0071ba 100%) !important; color: #fff; font-weight: 500; }
.navigation .dep2_box .dep2 > li:hover > a::after,
.navigation .dep2_box .dep2 > li > a:focus::after,
.navigation .dep2_box .dep2 > li:active > a::after { filter: brightness(0) invert(1); }
.navigation .dep2_box .dep3 li:hover a,
.navigation .dep2_box .dep3 li a:focus, 
.navigation .dep2_box .dep3 li:active a { font-weight: 500; color: var(--main-color-1); }


/* 사이트맵 */
#header .hamburger .line { display: block; width: 30px; height: 3px; background-color: #222222; }
#header .hamburger .line:nth-child(2) { margin: 7px 0; }

#siteMap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; right: 0; bottom: 0; 
/*background: linear-gradient(to left, #00b0ec, #003894); opacity: 0;*/
background-color:#fff; visibility: hidden; z-index: -1; transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1); }
#siteMap.show { opacity: 1; visibility: visible; z-index: 1000; }
#siteMap .wrap { padding-top: 65px; padding-bottom: 95px; overflow-y: auto;  height: 100vh; }
#siteMap .titleBox { margin-bottom: 55px; padding-left: 50px; }
#siteMap .titleBox h3 { font-size: 50px; color: var(--black-color-1); font-weight: 600; }
#siteMap .close_box { position: absolute; top: 25px; right: 30px; cursor: pointer; }
#siteMap .close_box span { font-size: 18px; font-weight: 600; color: var(--black-color-1); margin-right: 20px; }

#siteMap .list_wrap > ul { padding-top: 13px; }
#siteMap .list_wrap > ul > li { width: 33.333333%; padding: 0 50px; }
#siteMap .list_wrap > ul > li:not(:nth-child(3n)) { border-right: 1px solid rgba(255,255,255,.3); }
#siteMap .list_wrap > ul > li:not(:nth-child(4), :nth-child(5), :nth-child(6)) { padding-bottom: 70px; }
#siteMap .list_wrap .cont .titBox { margin-bottom: 40px; }
#siteMap .list_wrap .cont .titBox .site_num { display:none; font-size: 20px; font-weight: 600; color: #95c44e; margin-bottom: 15px; }
#siteMap .list_wrap .cont .titBox .tit h4 { font-size:30px; color:#0071ba; font-weight: 600; }
#siteMap .list_wrap .cont .titBox .tit img { transform: rotate(0); transition: all 0.5s; }
#siteMap .list_wrap .cont .contBox > ul > li > a { display: inline-block; padding: 15px 0; font-size: 18px; color: #444;}
#siteMap .list_wrap .cont .contBox .sm_dep3 { padding-bottom: 7.5px; }
#siteMap .list_wrap .cont .contBox .sm_dep3 li { padding-left: 15px; position: relative; }
#siteMap .list_wrap .cont .contBox .sm_dep3 li::before { content: '·'; font-size: 15px; font-weight: 600; color: #666; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#siteMap .list_wrap .cont .contBox .sm_dep3 li a { display: inline-block; font-size: 15px; color: #666; padding: 7.5px 0; }

/* hover */
#siteMap .list_wrap > ul > li:hover .titBox .tit img { animation: rotateImg 2s linear infinite; }
#siteMap .list_wrap .cont .contBox > ul > li:hover > a { color: #0071ba; font-weight: 600; }
#siteMap .list_wrap .cont .contBox .sm_dep3 li:hover a { color: #0071ba; font-weight: 600; }

@keyframes rotateImg {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}

/* 퀵메뉴 */
#quickMenu { display: none; width: 135px; position: fixed; top: 260px; right: 0; z-index: 10; }
#quickMenu ul li { margin-top: 12px; position: relative; }
#quickMenu ul li:first-child { margin-top: 0; }
#quickMenu ul li a { display: flex; align-items: center; width: 135px; height: 50px; background-color: #fff; border-radius: 10px 0 0 10px; padding: 10px 0 10px 15px; font-size: 15px; font-weight: 600; color: #003894; box-shadow: 0 0 30px rgba(0, 0, 0, 0.07); }
#quickMenu ul li a span { width: 27px; height: 30px; background: no-repeat left center; display: inline-block; margin-right: 10px; }
#quickMenu ul li:nth-of-type(1) a span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_1.png'); }
#quickMenu ul li:nth-of-type(2) a span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_2.png'); }
#quickMenu ul li:nth-of-type(3) a span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_3.png'); }
#quickMenu ul li:nth-of-type(4) a span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_4.png'); }
#quickMenu ul li:nth-of-type(5) a span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_5.png'); }

#quickMenu ul li a:hover { color: #fff; background: rgb(0,176,236); background: linear-gradient(120deg, rgba(0,176,236,1) 0%, rgba(76,123,244,1) 100%); }
#quickMenu ul li:nth-of-type(1) a:hover span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_1_on.png'); }
#quickMenu ul li:nth-of-type(2) a:hover span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_2_on.png'); }
#quickMenu ul li:nth-of-type(3) a:hover span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_3_on.png'); }
#quickMenu ul li:nth-of-type(4) a:hover span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_4_on.png'); }
#quickMenu ul li:nth-of-type(5) a:hover span { background-image: url('/data/skin/swin_v01/img/icon/quick_img_5_on.png'); }


/*컨테이너*/
.container { padding-top: 30px; }


/* 사이드바 */
#aside { width: 280px; float: left; }
#aside h3 { font-size: 30px; font-weight: 600; }
#aside .bar { width: 100%; height: 6px; background: #e5e5e5; position: relative; }
#aside .bar span { display: inline-block; height: 100%; position: absolute; top: 0; left: 0; }
#aside .bar span:nth-child(1) { z-index: 5; width: 25%; background: #00489e; }
#aside .bar span:nth-child(2) { z-index: 4; width: 50%; background: #00b0f0 ; }
#aside .bar span:nth-child(3) { z-index: 3; width: 75%; background: #d7edff; }
#aside nav {
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 10;
}
#aside nav>ul {}
#aside nav>ul>li { border-bottom: 1px solid #e5e5e5; }
#aside nav>ul>li>a { display: block; padding: 25px 20px; position: relative; font-size:18px; font-weight:600;}
#aside nav>ul>li>a span { color: #333; }
#aside nav>ul>li>a span.arrow { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
#aside nav>ul>li.active>a span { color: #0071ba; font-weight: 600; }
#aside nav>ul>li.active>a span.arrow i { color: #0071ba; font-weight: 500;}
#aside nav>ul>li ul { display: none; background: #f7f7f7; padding: 20px; }
#aside nav>ul>li ul li { }
#aside nav>ul>li ul li a { display: block; padding: 10px 0; }
#aside nav>ul>li ul li a span { font-size: 15px; color: #333; position: relative; padding-left: 10px; }
#aside nav>ul>li ul li a span::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; background: #333; border-radius: 50%; }
#aside nav>ul>li ul li a:hover span, #aside nav>ul>li ul li a.on span { color: #0071ba; font-weight: 500; }
#aside nav>ul>li ul li a:hover span:before, #aside nav>ul>li ul li a.on span:before { background: #0071ba; }


/* 컨텐트 */
#sub #content { float: left; width: calc(100% - 280px); min-height: 1000px; padding-left: 57px; }
#sub #content.sitepage { width: 100%; min-height: auto; padding-left: 0; }
#sub #content .title h4 { font-size: 35px; font-weight: 600; color: #222; margin-bottom: 30px; }
#sub #content .title .location {}
#sub #content .title .location li { display: inline-block; margin-right: 10px; }
#sub #content .title .location li a { font-size: 15px; }
#sub #content .title .location li:last-child a { color: #222; font-weight: 500; }
#sub .sub_comm_contain { padding-bottom: 100px; }


/* 푸터 */
#footer {}
#footer .top { background: #f7f7f7; }
#footer .top .inner { display: flex; justify-content: space-between; }
#footer .top .link_list {}
#footer .top .link_list li { display: inline-block; position: relative; padding: 27px 17px 27px 0; margin-right: 10px; }
#footer .top .link_list li::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 2px; height: 2px; background: #333; border-radius: 50%; }
#footer .top .link_list li:last-child::after { display: none; }
#footer .top .link_list li a { font-size: 18px; font-weight: 700; }
#footer .top .link_list li.font-emphass {color:#0071ba;}
#footer .top .family_site { width: 270px; position: relative; margin-left: 1px; }
#footer .top .family_site p { position: relative; padding: 26px 20px; cursor: pointer; font-size: 16px; }
#footer .top .family_site p span { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
#footer .top .family_site p span img { transform: rotate(180deg); }
#footer .top .family_site ul { z-index: 30; display: none; position: absolute; left: 0; bottom: 100%; background: #f7f7f7; width: 100%; max-height: 300px; overflow-y: scroll; padding: 10px 0; }
#footer .top .family_site ul li {}
#footer .top .family_site ul li a { display: block; font-size: 15px; color: #999; padding: 10px 20px; }
#footer .top .family_site ul li a:hover { color: #333; }
#footer .bottom { background: #fff; padding: 35px 0; }
#footer .bottom .inner { display: flex; justify-content: space-between; }
#footer .bottom .info {}
#footer .bottom .info p { font-size: 18px; color: #777777; margin-bottom: 12px; }
#footer .bottom .info p span { font-size: 18px; color: #777777; position: relative; display: inline-block; padding-right: 10px; margin-right: 5px; }
#footer .bottom .info p span::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #c1c1c1; }
#footer .bottom .info p span:last-child::after { display: none; }
#footer .bottom .sns {}
#footer .bottom .sns a { display: inline-block; margin-left: 5px; }
#footer .bottom .sns a img{}
#footer #topBtn { position: fixed; bottom: 142px; right: 3%; display: none; z-index: 9999;}




/* pc ~ tablet */
@media screen and (min-width: 1300px) and (max-width: 1700px) {
    /* 헤더 */
    .navigation .dep2_box .titleBox { padding: 70px 2vw  0 8.7647vw; width: 25%; background-position: 100% center; }
    .navigation .dep2_box .dep2 { padding: 45px 8.7647vw 0 3.2353vw; width: 75%; border-top:1px solid #ddd;}
}

@media screen and (max-width: 1300px) {
    /* 헤더 */
    /* bottom Header */
    #bHeader { height: 110px; }
    .navigation { display: none; }

    /* siteMap */
    #siteMap .titleBox { padding-left: 3.9063vw; }
    #siteMap .list_wrap > ul > li { padding: 0 3.9063vw; }
    #siteMap .list_wrap .cont .titBox .tit h4 { font-size: 26px; }
    #siteMap .list_wrap .cont .contBox > ul > li > a { font-size: 16px; }
    #siteMap .list_wrap .cont .contBox .sm_dep3 li a { font-size: 14px; }

    /* 사이드바 */
    #aside { display: none; }
    /* 컨텐트 */
    #sub #content { width: 100%; padding-left: 0; }
}

@media screen and (max-width: 1204px) {
    /* 퀵메뉴 */
    #quickMenu { display: none; }


    /* 푸터 */
    #footer .top .inner { flex-direction: column; }
}

@media screen and (max-width: 1000px) {
    /* 푸터 */
    #footer .top .inner { flex-direction: column; }
    #footer .top .link_list { margin-top: 30; margin-bottom: 10px; }
    #footer .top .link_list li { padding: 10px 17px 10px 0; }
    #footer .top .family_site { margin-bottom: 10px; }
    #footer .top .family_site p { padding-left: 0; }
    #footer .bottom .inner { flex-direction: column-reverse; }
    #footer .bottom .sns { margin-bottom: 30px; }
    #footer .bottom .info p { margin-bottom: 0; }
    #footer .bottom .info p span { margin-bottom: 12px; }
    #footer .bottom .info p:nth-child(1) span { display: inline-block; }
    #footer .bottom .info p:nth-child(2) span:last-child { display: inline-block; }
    #footer .bottom .info p:nth-child(1) span::after { display: none; }
    #footer .bottom .info p:nth-child(2) span:nth-child(2)::after { display: none; }
    #footer #topBtn { bottom: 250px; }
}

@media screen and (max-width: 768px) {
    /* 헤더 */
    #header { position: fixed; left: 0; top: 0; z-index: 100; width: 100%; }
    /* top Header */
    #tHeader { justify-content: flex-end; margin-bottom:15px; }
    #tHeader .leftBox { display: none; }
    #tHeader .rightBox .user_list .home { display: none; }
    #tHeader .rightBox .user_list li a:hover img { filter: none; }
    #tHeader .rightBox .user_list li a:hover span { color: #555; }
    #tHeader .rightBox .lang_box { position: absolute; top: 50%; right: 100px; transform: translateY(-50%); }
    #tHeader .rightBox .lang_box > li > a span { font-size: 2.6042vw; margin-right: 15px; }
    #tHeader .rightBox .lang_box > li > a { padding: 17px 20px; width: auto; height: auto; }
    #tHeader .rightBox .lang_box > li > a img { width: 2.2135vw; }
    #tHeader .rightBox .lang_box .lang_dep2 { border-radius: 0 0 17px 17px; padding: 7px 0; padding-top: 20px; }
    #tHeader .rightBox .lang_box .lang_dep2 li a { font-size: 2.6042vw; padding: 0 20px; }
    /* bottom Header */
    #bHeader { height: 100px; }
    #bHeader .logo img { width: 43.4896vw; }


    /* 푸터 */
	#footer { padding:0 10px;}
	#footer .top { border-radius:25px; }
	#footer .top .link_list { margin: 8px auto; }
    #footer .top .familysite_wrap { flex-direction: column; }
    #footer .top .familysite_wrap .family_site { width: 100%; }



    /* siteMap(mobile header) */
    #siteMap { background: #fff; }
    #siteMap .s_inner { padding: 0; }
    #siteMap .wrap { padding-top: 0; }
    #siteMap .userBox { display: flex; justify-content: flex-end; margin: 20px 40px 0 40px; }
    #siteMap .userBox .user_list { display: flex; align-items: center; }
    #siteMap .userBox .user_list li { margin-left: 20px; font-size: 15px; color: #555; }
    #siteMap .userBox .user_list li.home { display: none; }
    #siteMap .userBox .user_list li a { display: flex; align-items: center; }
    #siteMap .userBox .user_list li a img { margin-right: 5px; }
    #siteMap .userBox .user_list li a span { display: inline-block; font-size: 15px; color: #555555; }
    #siteMap .userBox .user_list li a:hover img { filter: none; }
    #siteMap .userBox .user_list li a:hover span { color: #555; }

    #siteMap .logoBox { height: 100px; position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; }
    #siteMap .close_box { position: static; }
    #siteMap .close_box img { filter: brightness(0%); width: 25px; }


    #siteMap .donation_box ul li { width: 33.2031vw; position: relative; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; box-shadow: 5px 0 7px rgba(0,0,0,.1); }
    #siteMap .donation_box ul li:nth-child(1) { background-color: #0554a6; z-index: 4; }
    #siteMap .donation_box ul li:nth-child(2) { background-color: #003894; z-index: 3; margin-left: -5px; }
    #siteMap .donation_box ul li:nth-child(3) { background-color: #00b0ec; z-index: 2; margin-left: -5px; }
    #siteMap .donation_box ul li:nth-child(4) { background-color: #96c44e; z-index: 1; margin-left: -5px; }
    #siteMap .donation_box ul li a { display: block; padding: 35px 0; text-align: center; color: #fff; font-size: 3.9063vw; font-weight: 500; }

    #siteMap .list_wrap { padding: 0 40px; }
    #siteMap .list_wrap > ul { padding-top: 0; }
    #siteMap .list_wrap > ul > li { width: 100%; padding: 0; }
    #siteMap .list_wrap > ul > li:first-child .titBox { border-top: none; }
    #siteMap .list_wrap .cont .titBox { margin-bottom: -1px; padding: 50px 0 40px; position: relative; border-bottom: 1px solid #dddddd; border-top: 1px solid #dddddd; cursor: pointer; }
    /* #siteMap .list_wrap .cont .titBox::after { content: ''; display: inline-block; width: 24px; height: 13px; background: url(/assets/images/icon/mo_header_arrow.png) no-repeat center / cover; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(0); transition: all .3s; } */
    #siteMap .list_wrap .cont .titBox.rotate .tit img { transform: translateY(-50%) rotate(-180deg); }
    #siteMap .list_wrap .cont .titBox .site_num { display: none; }
    #siteMap .list_wrap .cont .titBox .tit h4 { color: #333; font-size: 4.5573vw; }
    #siteMap .list_wrap > ul > li:hover .titBox .tit img { animation: none; }
    #siteMap .list_wrap .cont .titBox .tit img.mo_none { display: none; }
    #siteMap .list_wrap .cont .contBox { display: none; }
    #siteMap .list_wrap .cont .contBox > ul { padding: 30px 0; }
    #siteMap .list_wrap > ul > li:not(:nth-child(4), :nth-child(5), :nth-child(6)) { padding-bottom: 0; }
    #siteMap .list_wrap .cont .contBox > ul > li > a { color: #555555; padding: 25px 0; font-size: 3.9063vw; font-weight: 500; }
	#siteMap .list_wrap .cont .contBox > ul > li:hover > a { color:#0071ba;}
    #siteMap .list_wrap .cont .contBox .sm_dep3 li::before { font-size: 3.2552vw; color: #555; }
    #siteMap .list_wrap .cont .contBox .sm_dep3 li a { color: #555; font-size: 3.2552vw; font-weight: 500; padding: 15px 0; }


    /* 컨텐트 */
    #sub .sub_comm_contain { padding-top: 0px; padding-bottom: 50px; }
}

@media screen and (max-width: 500px) {
    /* 헤더 */
    /* top Header */
    #tHeader .rightBox .user_list li { margin-left: 15px; font-size: 13px; }
    #tHeader .rightBox .user_list li.login a img { width: 9px; }
    #tHeader .rightBox .user_list li.join a img { width: 13px; }
    #tHeader .rightBox .user_list li a span { font-size: 13px; }
    #tHeader .rightBox .userBox .lang_box { right: 70px; z-index: 10; }
    #tHeader .rightBox .lang_box > li > a { padding: 7px 10px; }
    #tHeader .rightBox .lang_box > li > a span { font-size: 13px; margin-right: 5px; }
    #tHeader .rightBox .lang_box > li > a img { width: auto; }
    #tHeader .rightBox .lang_box .lang_dep2 li a { font-size: 13px; padding: 0 10px; }

    /* bottom Header */
    #bHeader { height: 60px; }
    
    /* 로고 */
    #bHeader .logo img { width: 213px; }

    /* siteMap */
    #header .hamburger .line { width: 25px; height: 2px; }
    #header .hamburger .line:nth-child(2) { margin: 6px 0; }

    #siteMap .logoBox { height: 80px; padding: 0 20px; }
    #siteMap .logoBox img { width: 180px; }
    #siteMap .close_box img { width: 20px; }
    #siteMap .userBox { margin: 20px 20px 0 20px; }
    #siteMap .userBox .user_list li { font-size: 13px; margin-left: 15px; }
    #siteMap .userBox .user_list li a span { font-size: 13px; }
    #siteMap .userBox .user_list li.login a img { width: 9px; }
    #siteMap .userBox .user_list li.join a img { width: 13px; }
    #siteMap .donation_box ul li { width: 34%; }
    #siteMap .donation_box ul li a { padding: 17.5px 0; font-size: 15px; }

    #siteMap .list_wrap { padding: 0 20px; }
    #siteMap .list_wrap .cont .titBox { padding: 25px 0 20px; }
    #siteMap .list_wrap .cont .titBox .tit img { width: 18px; height: auto; background-size: 100%; }
    #siteMap .list_wrap .cont .titBox .site_num { display: none; }
    #siteMap .list_wrap .cont .titBox .tit h4 { color: #333; font-size: 17px; }
    #siteMap .list_wrap .cont .contBox > ul { padding: 15px 0; }
    #siteMap .list_wrap .cont .contBox > ul > li > a { padding: 12.5px 0; font-size: 15px; }
    #siteMap .list_wrap .cont .contBox .sm_dep3 li { padding-left: 10px; }
    #siteMap .list_wrap .cont .contBox .sm_dep3 li::before { font-size: 13px; }
    #siteMap .list_wrap .cont .contBox .sm_dep3 li a { font-size: 13px; padding: 7.5px 0; }


    /* 푸터 */
    #footer .top .link_list li a { font-size: 14px; }
    #footer .top .family_site { width: 150px; }
    #footer .top .family_site p { font-size: 14px; }
    #footer .bottom { padding: 45px 0; }
    #footer .bottom .info p { font-size: 12px; }
    #footer .bottom .info p span { font-size: 12px; margin-bottom: 10px; }
    #footer #topBtn { bottom: 236px; }
    #footer #topBtn img { width: 70px; }

    /* 컨텐츠 */
    #sub #content .title h4 { font-size: 25px; margin-bottom: 20px; }
    #sub #content .title .location li { margin-right: 7px; }
    #sub #content .title .location li a { font-size: 12px; }
    #sub #content .title .location li img { width: 5px; }
    #sub #content .title .location li a img { width: 11px; }
}