@charset "UTF-8";

#ft_wr, #ft_link_bd {width:100%; max-width:var(--site_width);}
#container{width:100%; max-width:var(--contain_width)}
#aside {width:100%; max-width:var(--aside);}

.hd_topline{background-color:#fafafa;width:100%;}
.hd_area{width:var(--site_width);margin:0 auto; height: 35px;position:relative;text-align:right;    display: inline-flex;flex-direction: row;    flex-wrap: nowrap;    align-content: flex-start;    justify-content: flex-end; align-items: flex-end; align-items: center;}

#bo_cate2_mobile{display:none}


#tnb_sch { background: #fff !important; border-radius: 0px !important; display: flex; box-sizing: border-box; flex-direction: row; align-items: center;}
#tnb_sch #sch_stx{width:266px;height:23px;border:1px solid #fff; border-right:1px solid #a7cc38;border-radius:0px !important;padding:0px 0 0 20px !important;background:#fff !important;float:left;display:inline-block;margin:5px 0}

#tnb_sch .sch_btn { height: 33px; background: none; border: 0; width: 50px; font-size: 17px; color:#a7cc38; float:left; display:inline-block; }

#tnb_sch .sel_box{height:32px !important; padding:0px !important;}
.tnb_search_box{display: flex;margin-left:20px}

.tnb_sns_box .tnb_sns_img{margin-right:5px; border-radius:30px}
.tnb_sns_box .tnb_sns_img img{width:30px !important; border-radius:30px}

.register_wrap li .btn{font-size:14px}

/*.gnb_wrap{padding-right:40px}*/

#wrapper{width:100%; margin:0px auto 0; }
#container_wr:after {display:block;visibility:hidden;clear:both;content:"";}
#container_wr {z-index:5;margin:40px auto 0;height:100%;zoom:1;min-height: 550px;}
.sub_wrapper #container_wr {max-width:var(--site_width);}
#container {z-index:4;position:relative;max-width:var(--site_width); min-height:800px;height:auto !important;zoom:1;background:#fff; margin:0 auto}

.nopage_wrap #group_head{display:none !important}
#group_head{display:inline-block;width:100%; text-align:center; height:370px; background-position:top}
.group_box{height:100%; display:flex; justify-content:center;}
.group_subject{width:20vw; display:none; height:100%; align-items:center; justify-content: center; font-size:clamp(1.2rem, 4vw, 3rem); font-weight:900;  background: #fff;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background-image: linear-gradient(128deg,#ECB93E,#006600);
z-index:4;
}

#group_head::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(75, 0, 130, 0.15); /* 인디고/보라빛 반투명 레이어 */
    pointer-events: none;
    z-index: 0;
}

/* 가상 요소로 5초마다 떨어지는 별똥별 구현 */
#group_head::after {
    content: '';
    position: fixed;
    top: -10%;
    left: 80%;
    width: 4px;
    height: 4px;
    background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px #fff, 0 0 40px #fff;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform: rotate(-35deg);
    animation: shootingStar 5s linear infinite;
}

div[class*="view_contain_box"] .bo_content_head{display:none}
div[class*="write_contain_box"] .bo_content_head{display:none}
#group_head {
  position: relative;
  background-color: var(--primary-color);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-transform: uppercase;
  color: var(--white-color);
  border-radius: 0;
  overflow: hidden;
  min-height: 26.7rem;
  clip-path: polygon(2.4rem 0, 100% 0, 100% 100%, 0 100%, 0 2.4rem);
}

#group_head::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  z-index: 1;
  background: linear-gradient(to left, rgb(48 20 155 / 54%) 40%, transparent);
  backdrop-filter: blur(0px);
  animation: blur 1.2s both;
}

#group_head::after {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  z-index: 3;
  background: url('/theme/basic/img/pub/pt-bg01.png');
}




#con_wrap{overflow:hidden;margin-bottom:40px;width:100%;}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {float:left;}
#container_title h3 {font-size:30px;height:60px;line-height:60px;font-weight:600; display:block; font-family:var(--font-family), malgun gothic, sans-serif; text-align:center; position:relative; margin:0px;}


/*랜드마크*/
#con_wrap .location{float:right; margin-top:25px;}
/*.gr_location{background:#fbfbfb;border-bottom:1px solid #ddd}*/
/*.location{max-width:var(--site_width);margin:0 auto;padding:10px 0;text-align:right;font-size:13px}*/



#container_title_sub{margin-bottom:40px;font-family:var(--font-family), malgun gothic, sans-serif;}
#container_title_sub ul{text-align:center;}
#container_title_sub ul li{display:inline-block; border-left:1px solid #d2d2d2;}
#container_title_sub ul li:first-child{border-left:0;}
#container_title_sub ul li a{display:inline-block; padding:10px 40px; position:relative;}
#container_title_sub ul li a:hover{position:relative;}
#container_title_sub ul li a:hover:after{content:"\f00c"; font-family:FontAwesome; width:20px; height:20px; position:absolute; left:18px;}
#container_title_sub .on:after{content:"\f00c"; font-family:FontAwesome; width:20px; height:20px; position:absolute; left:18px;}

/* 1.Left Menu*/
#aside {float:left;padding:0;height: 100%;margin-right:40px;}



/* ======================================================
   바다의별 서브 좌측메뉴 — 별빛 호버
   default_contents.css 하단에 추가
   ====================================================== */

/* 전체 래퍼 */
#aside .sub-menu-wr {
    background: #0c1e3c;
    border-radius: 8px;
    overflow: hidden;
    padding: 6px 0 10px;
    position: relative;
}

/* 대메뉴 타이틀 */
#aside .sub-menu_tit {
    overflow: visible;
    white-space: normal;
}
#aside .sub-menu_group {
    display: block;
    padding: 18px 22px 14px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fdb813;
    letter-spacing: -0.5px;
    border-bottom: 1px solid rgba(253,184,19,.25);
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

/* 메뉴 목록 */
#aside .sub-menu_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 메뉴 아이템 공통 */
#aside .sub-menu_item,
#aside .sub-menu_item_on {
    position: relative;
    overflow: hidden;
}

/* 링크 기본 */
#aside .sub-menu_item a,
#aside .sub-menu_item_on a {
    display: block;
    padding: 12px 22px;
    color: #9ab8d8;
    font-size: 0.93rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    z-index: 1;
    letter-spacing: -0.3px;
    transition: color .3s ease, padding-left .25s ease;
}

/* 호버 + 활성 링크 */
#aside .sub-menu_item a:hover,
#aside .sub-menu_item_on a,
#aside .sub-menu_on {
    color: #ffffff !important;
    padding-left: 30px;
}

/* 별빛 글로우 슬라이드 배경 */
#aside .sub-menu_item::before,
#aside .sub-menu_item_on::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 90% 130% at 10% 50%,
            rgba(253,184,19,.16) 0%,
            rgba(0,120,210,.20) 45%,
            transparent 72%
        );
    opacity: 0;
    transform: translateX(-110%);
    transition: opacity .4s ease, transform .38s ease;
    z-index: 0;
}
#aside .sub-menu_item:hover::before,
#aside .sub-menu_item_on::before {
    opacity: 1;
    transform: translateX(0);
}

/* 우측 미니 별 파티클 */
#aside .sub-menu_item::after,
#aside .sub-menu_item_on::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 20px;
    height: 20px;
    background:
        radial-gradient(circle 3px   at 50% 50%, #fdb813 0%, transparent 55%),
        radial-gradient(circle 2px   at 15% 20%, #ffffff 0%, transparent 55%),
        radial-gradient(circle 1.5px at 80% 72%, #fdb813 0%, transparent 60%),
        radial-gradient(circle 1.5px at 72% 10%, #ffffff 0%, transparent 65%),
        radial-gradient(circle 1px   at 30% 80%, #a8d0ff 0%, transparent 60%);
    opacity: 0;
    transition: transform .3s ease .12s, opacity .3s ease .12s;
    z-index: 1;
}
#aside .sub-menu_item:hover::after,
#aside .sub-menu_item_on::after {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

/* 좌측 금빛 accent 바 */
#aside .sub-menu_item a::before,
#aside .sub-menu_item_on a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    background: linear-gradient(
        to bottom,
        #fdb813,
        rgba(255,255,255,.45),
        #fdb813
    );
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity .3s ease;
}
#aside .sub-menu_item a:hover::before,
#aside .sub-menu_item_on a::before {
    opacity: 1;
}

/* 새창 아이콘 */
#aside .new_win_icon {
    font-size: 0.75rem;
    opacity: .6;
    margin-left: 4px;
    vertical-align: middle;
}

/* 접근성: 키보드 포커스 */
#aside .sub-menu_item a:focus-visible,
#aside .sub-menu_item_on a:focus-visible {
    outline: 2px solid #fdb813;
    outline-offset: -2px;
}

/* 반응형 1199px 이하: 모바일에선 aside 숨김(기존 스타일 유지) */
@media (max-width: 1199px) {
    #aside { display: none; }
}


/* 2.Middle Menu */
/*
#aside {width:100%;margin:0 auto 40px;display:inline-block;text-align:center;}
.sub-menu_tit {width:100%}
.sub-menu_group{display:none}
.sub-menu-wr{display:inline-block;}
.sub-menu-wr ul{}
.sub-menu-wr li{float:left;display:inline-block;height:50px;line-height:50px;padding:0px 30px;border:1px solid #ddd;margin-right:20px;box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;transition: all 0.15s ease;}
.sub-menu-wr li:hover{background:#ea951a;}
.sub-menu-wr li:hover a{color:#fff !important;}
.sub-menu_on {display:block;  color:#fff !important;}
.sub-menu_list a{font-size:13pt !important;}
.sub-menu_item a{display:block;}*/


/*  Sub Middle Menu */
/* 서브메뉴-현재위치 메뉴 */
.group_head_wr{width:100%;}
.submenuwrap{position:relative;width:100%; padding:0px; margin:0 auto; z-index:8;display:inline-block;background:#0c1e3c }
.submenulocation{position:relative; margin:0 auto;max-width:var(--site_width);}
.submenu{position:relative; display:flex; }
.submenu li{float:left;display: inline-block;line-height:130%;padding:0px 10px;width: 100%;font-size:1rem}
.submenu .locationhome{width:30px !important;margin-left:0px;border-right:1px dashed #ddd;box-sizing:border-box;text-align:center;}
.locationhome a{color:#474747;}
.submenu .fa-caret-right{color:#b8b8b8}
.btm-arrow{float:right;display:inline-block;padding-right:10px;font-size:12px}


.locationdepth1, .locationdepth2{height:45px;}
.locationdepth1{border-right:1px dashed #ddd;box-sizing:border-box;}
.locationdepth1>a, .locationdepth2>a{overflow:hidden;display:flex;    justify-content: space-between;    align-items: center;padding:10px 0 10px 0px;color:#fdb813 !important;width:100%;height:100%}
.locationdepthdrop1, .locationdepthdrop2{position:absolute; width:calc(50% - 10px);margin-top:0px;box-shadow:0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)}
.locationdepthdrop1{left: 10px;}
.locationdepthdrop1 li, .locationdepthdrop2 li{width:100%;position:relative;padding:10px 0;line-height:25px;  border:1px solid #d2d2d2;border-top:0px;background:#fff}
.locationdepthdrop1 li a, .locationdepthdrop2 li a{padding-left:10px;display:block;font-size:0.98rem;color:#474747 !important;}
.locationdepthdrop1 li a{}

.locationdepth2{}
.locationdepth2>a{}
.locationdepthdrop2{left: 50%;}
.locationdepthdrop2 li{}
.locationdepthdrop2 li a{}

/*Responsive 370, 480, 768, 992, 1160*/
@media all and (max-width:480px){
	.locationdepthdrop1, .locationdepthdrop2{left:0px;width:100%}
	.locationdepthdrop1 li, .locationdepthdrop2 li{max-width:100%}
}




/*퀵메뉴*/
/*
#quick {position:fixed; left:calc(50% + 620px); top:250px; text-align:center; background:#fff; border-radius:20px; z-index:99999;    width: 100px;}
#quick ul li{text-align:center; padding:10px 15px; font-size:0.98rem; border-bottom:1px dashed #ddd;}
#quick ul li:last-child{border-bottom:none}
#quick ul li:hover{background:#00b2bb;}
#quick ul li:first-child{background:#00b2bb;}
#quick ul li:hover a{color:#fff}
*/

/*퀵메뉴*/
#quick {position:fixed; right: 20px; top:250px; text-align:center; background:#f1f1f1; border-radius:10px; z-index:99999; box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); box-shadow: 0px 6px 15px 0px rgba(50, 50, 50, 0.4); transition: all .5s ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;}
#quick ul li {padding:10px 10px; border-bottom:1px dashed #ddd;text-align:center}
#quick ul li a{display: flex; flex-direction: column; align-items: center;font-size:13px; letter-spacing:-1px; color:#000}
#quick ul li:last-child{border-bottom:none}
#quick ul li img{max-width:60px}

/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:1199px){
	#quick{right: -100px; transition: all .5s ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;}
}



/* 하단 레이아웃 */
#ft {width:100%; text-align:left; overflow:hidden; background-color:#3d3d3d; position:relative; margin-top:40px; font-size:0.98rem; color:#b4b4b4}
#ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ft a{color:#b4b4b4}
#ft a:hover{color:#fff}
#ft_wr {margin:0 auto;position:relative; justify-content: space-between;}
#ft_logo{float:left;text-align:center;margin-right:30px;padding: 0px 0px;}
#ft_logo img{max-width:400px}
#ft_link{padding:0px 0 0px; color:#b4b4b4;font-size:14px;background-color:#3d3d3d;border-bottom:1px dashed #b4b4b4}
#ft_link a{display:inline-block;line-height:100%; color:#b4b4b4; }
#ft_link a:hover{color:#fff}
#ft_link a:first-child{padding-left:0;border-left:0px}

#ft_link_bd{margin:0 auto;display:flex;padding:15px 0;justify-content: space-between;     align-items: center;}
#ft_link_bd ul{width:100%; display:flex; gap:10px}
#ft_link ul li{float:left;border-left:1px solid #989898; line-height:100%;padding-left:10px}
#ft_link_bd ul li:first-child{border:0px;padding-left:0px}
#ft_link_bd .btn-adw{color:#989898;}
.ft_link_gokr {justify-content: flex-end;}

#ft_catch{margin: 30px 0; display:flex; width: 100%;align-items: center;justify-content: space-between;}
#ft_wr2{font-size:14px;float:left;text-align:left;display:inline-block;padding: 0px;}
#ft_add{line-height:170%;}
#ft_add span{display:inline-block;}
#ft_add p{margin:0 0 5px !important;}
#ft_copy{}
#ft_copy a{color:#b4b4b4}
#ft_copy a:hover{color:#fff}


.admin_btn_wrap{clear:both; margin:20px 0 10px; display:block;}
.admin_btn_wrap a{border:1px solid #fff; padding:10px;color:#fff;}

.ft_banner-box{}
.ft_banner-box img{max-height:44px}
.ft_banner{float:left; display:inline-block;margin-left:10px}

.ft_banner-box2 { padding-left:20px; padding-right:20px}
.ft_banner-box2 ul{display:flex;gap:10px}
.ft_banner-box2 img{max-height:44px; border-radius:100px}


/* Mobile button */
#device_change {display:block; margin:0px auto; padding:15px 0; background:#646e83; color:#cfcfcf; font-size:20px; text-decoration:none; text-align:center; width:100%; }
.device_btn{width:100%;margin:0px auto}


.write_body .bo_design_head{display:none}
/* default_layout.css 끝 */