@charset "utf-8";

@import url('../../css/common.css');
@import url('../../css/popup.css');
@import url('../../css/viewer.css');

:root {
	--color-yellgreen:#6ea115;
	--color-plred:#cc6666;
	--color-vdred:#82716e;	
	--color-bw:#996600;	
	--color-red:#cc3333;	

	--font-size14:1.4rem;
}
.color-yg {color:var(--color-yellgreen)}
.color-plred {color:var(--color-plred)}
.color-vdred {color:var(--color-vdred)}
.color-bw {color:var(--color-bw)}
.color-red {color:var(--color-red)}

.bg-yg {background-color: var(--color-yellgreen);}
.bg-vdred {background-color: var(--color-vdred);}
.bg-bw {background-color:var(--color-bw)}

.f_srch {color:#cc6666;}
.f-pnt {color:var(--color-red)}
.f-b {font-weight:bold !important;}

.noDp {display:none !important;}

/*  */
.btn-org {position:relative; color:var(--color-yellgreen); font-size:1.4rem; transition:all 0.3s;}
.btn-org:after {content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:0; height:1px; background-color:var(--color-yellgreen); transition:all 0.3s;}
.btn-org:hover::after {width:100%; height:1px;}

hr {border: 0; height: 0; border-top: 1px solid #d7d7d7;}

/*  */
html, body, #wrap {height:100%;}

#wrap {-webkit-overflow-scrolling: touch;}
#header { background-color:#fff;}

/* header-top */
.header_wrap {z-index:51; position:relative;}
.header_wrap .link_area {background:#37332d;}
.select_wrap.sel_ty01 > .btn_sel {padding:0;}
.select_wrap.sel_ty01 > .btn_sel {font-size:12px;}
.select_wrap.sel_ty01 > a.btn_sel:after {transform:none;}

.lang_box:after {display:none;}

/* header-center */
.header-center {position:relative; z-index:50; height:75px; background-color:#fff; border-bottom: 1px solid #ededed;}
.header-center>.inner {max-width:1300px; height:100%; margin:0 auto; padding:0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}

#gnb {height:100%;}
#gnb {display:flex; align-items:center; height:100%;}
#gnb>li {position:relative; height:100%;}
#gnb>li>a {z-index:5; position:relative; display:flex; align-items:center; height:100%; padding:25px 0;}
#gnb>li>a::after {
    content: "";
    display: block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;

    width: 0;
    height: 7px;
    background: #82b153;
    position: absolute;
    bottom: -3px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
#gnb>li>a.on::after {width:calc(100% - 22px);}
#gnb>li>a>span {position:relative; padding:0 29px; color:#000; font-size:1.6rem;}
#gnb>li:not(:first-child)>a>span::after {content:''; position:absolute; top:0; left:0; bottom:0; width:1px; background-color:#e3e3e3;}

#gnb .sub-menu  {display:none; z-index:4; position:absolute; top:72px; left:50%; transform:translateX(-50%); width:280px; padding:24px; background-color:#f9f9f9; border:1px solid #ededed;}
#gnb .menu02 .sub-menu  {width:370px;}
#gnb .menu03 .sub-menu  {width:320px;}
#gnb .menu02 .sub-menu a, #gnb .menu03 .sub-menu a, #gnb .menu04 .sub-menu a {padding:7px 0;}
#gnb .sub-menu a {display:inline-block; width:100%; padding:4px 0; color:#2d2d2d; font-size:1.4rem; line-height:1.4;}
#gnb .sub-menu a:hover {color:#999; transition: all 0.4s;}
#gnb .sub-menu>ul>li>em {position:relative; display:block; padding-left:25px; margin-bottom:6px; color:#2d2d2d; font-size:1.7rem; font-family:'ntsm';} 
#gnb .sub-menu>ul>li>em::before {content:''; position:absolute; bottom:4px; left:0; width:14px; height:2px; background-color:#bebebe;}
#gnb .sub-menu>ul ul {padding-left:27px; padding-bottom:25px;}


/* ===== 전체검색 ===== */
/* btn-all-srch */
.btn-all-srch {display:flex; height:26px; margin-top:8px; margin-right:-170px; border-bottom:1px solid #c7c7c7;}
.btn-all-srch>span, .hc-srch>img {padding:0 4px;}
.btn-all-srch>span {font-size:1.2rem;}
.btn-all-srch img.mb {display:none;}

.btn-all-srch .btn-close {display:none;}
/* all-srch-view */
.all-srch-view {visibility:hidden; opacity:0; transition: all 0.3s; z-index:49; position:fixed; top:0; left:0; right:0;  background-color:#fff; transition: all 0.4s;}
.all-srch-view.active {visibility:visible; opacity:1; top:113px;}
/*  */
.all-srch-view>.inner {display:flex; align-items:center; justify-content:center; max-width:1300px; margin:0 auto; padding:36px 0;}

.all-srch-view .box {position:relative; width:628px; height:55px; border:1px solid #82b153; border-radius:28px;}
.all-srch-view .box>input {width:calc(100% - 92px); margin-left:30px; height:100%;}
.all-srch-view .box>button {width:49px; height:100%; padding:0 15px; line-height:0; transform:rotateY(180deg);}
.all-srch-view .box>button>img {vertical-align:middle;}
.all-srch-view .btn-dt-srch {width:49px; height:49px; margin-left:9px; background-color:#8cbb5e; border-radius:100%;}
.all-srch-view .mb-in-srch {display:none;}
/*  */
.all-srch-dt {visibility:hidden; opacity:0; position:absolute; max-width:1300px; height:0; margin:0 auto; margin-top:-100px; padding-bottom:25px; overflow:hidden; transition: all 0.4s;}

.all-srch-dt.active {visibility:visible; opacity:1; position:relative; height:auto; margin-top:0;}
.all-srch-dt.active .btn-close {visibility:visible; opacity:1;}
.all-srch-dt .tit {display:block; padding:17px 0; color:#333; font-size:2rem; border-bottom:1px solid #d9d9d9;}

/* 폼 : 공통 */
.bx-form {padding:26px 0; overflow:hidden;}
.bx-form ul {display:flex; flex-wrap:wrap; margin-left:-28px;}
.bx-form ul>li {display:flex; flex-wrap:wrap; align-items:center; width:50%; padding:5px 0;}
.bx-form label,
.bx-form em {width:120px; padding-left:28px; font-size:1.4rem; cursor:default;}
.bx-form .input-wrap {display:flex; align-items:center; width:calc(100% - 120px);}

.bx-form .input-wrap input,
.bx-form .input-wrap select,
.bx-form .input-wrap textarea {width:calc(100% - 8px); height:44px; margin:0 4px; padding:0 15px; color:#333; font-size:1.5rem; border:1px solid #ccc; border-radius:4px; background-color:#fff;}
.bx-form .input-wrap textarea {height:264px; padding:5px 15px;}

.bx-form .input-wrap .tilde {display:block; width:20px; text-align:center;} 

.bx-form ul>li.w-100 {width:100%;}

.bx-form .input-wrap.d-3 select,
.bx-form .input-wrap.d-3 input {width:calc(33.3% - 8px);}
.bx-form .input-wrap.d-2-day input {width:calc(50% - 18px);}

.bx-form-btns {text-align:center;}
.bx-form-btns button {width:164px; height:44px; margin:0 3px; color:#fff; font-size:1.6rem; background-color:#a2a4aa; border-radius:4px;}
.bx-form-btns .active {background-color:#82b153;}
.btn-form-close {position:absolute; top:0; right:0; width:22px; height:22px;} 


/* ===== 전체메뉴 ===== */
/* btn-all-menu */
.btn-all-menu {position:relative; display:block; width:40px; height:40px;}
.btn-all-menu span {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:block; width:22px; height:3px; background-color:#000; transition: all 0.3s;}
.btn-all-menu span:nth-child(1) {margin-top:-7px;}
.btn-all-menu span:nth-child(3) {margin-top:7px;}
.btn-all-menu.active span:nth-child(1) {margin:0; transform:translate(-50%, -50%) rotate(-45deg);}
.btn-all-menu.active span:nth-child(2) {display:none;}
.btn-all-menu.active span:nth-child(3) {margin:0; transform:translate(-50%, -50%) rotate(45deg);}
/* all-menu-view */
.all-menu-view {visibility:hidden; opacity:0; transition: all 0.3s; z-index:50; z-index:49; position:fixed; left:0; right:0; overflow-y:auto; background-color:#fff;}
.all-menu-view::-webkit-scrollbar {display:none;}
.all-menu-view>.inner {display:none; flex-wrap:wrap; align-content:stretch; max-width:1300px; height:100%; margin:0 auto;}
/*  */
.all-menu-view.active {visibility:visible; opacity:1; top:113px;}
.all-menu-view.active>.inner {display:flex;}

.all-menu-view .block {position:relative; width:25%; padding-top:117px;}
.all-menu-view .block:first-child {display:flex; width:50%;}
.all-menu-view .block:first-child>div {width:50%;}

.all-menu-view .block::after {content:''; position:absolute; top:0; left:0; bottom:0; width:1px; background-color:#ededed;}
.all-menu-view .block:first-child::before {content:''; position:absolute; top:0; left:50%; bottom:0; width:1px; background-color:#ededed;}
.all-menu-view .block:last-child:before {content:''; position:absolute; top:0; right:0; bottom:0; width:1px; background-color:#ededed;}

.all-menu-view .block strong {position:absolute; top:30px; left:0; display:inline-block; margin-left:16px; padding:15px 22px; color:#2d2d2d; font-size:1.9rem; font-family:'ntsm'; border:1px solid #e3e3e3;}
.all-menu-view .block em {position:relative; display:block; padding-left:40px; margin-bottom:12px; color:#2d2d2d; font-size:1.8rem; font-family:'ntsm';}
.all-menu-view .block em::before {content:''; position:absolute; bottom:8px; left:13px; width:17px; height:2px; background-color:#bebebe;}
.all-menu-view .block ul {padding-left:16px; margin-bottom:40px;}
.all-menu-view .block ul>li>a {display:block; padding:5px 0; color:#2d2d2d; font-size:1.5rem; transition:all 0.3s;}
.all-menu-view .block ul>li>a:hover {opacity:.5;}
.all-menu-view .block .sub-menu {padding-left:40px;}

.all-menu-view .block.etc {padding:30px 0 0 0;}
.all-menu-view .block.etc strong {position:static; margin-bottom:20px;}
.all-menu-view .block.etc strong > a {display:block; height:100%; padding:0; font-size:inherit; font-family:inherit;}
.all-menu-view .block.etc strong > a::before {display:none;}
.all-menu-view .block.etc ul {padding-left:16px;}



/* 모바일 : 전체메뉴 */
.mb-allMenu {display:none;}


/* ===== 모바일 : 유틸메뉴 ===== */
.btn-mb-util {display:none;}
.mb-utilMenu {visibility:hidden; opacity:0; transition: all 0.3s; height:0;}



/* header-search */
.header-search {position:relative; z-index:40; background-color:#fff;}
.header-search>.inner {position:relative; z-index:39; display:flex; justify-content:center; align-items:center; padding:26px 0; background-color:#fff;}
.header-search .box {width:561px; height:49px; border:1px solid #82b153; border-radius:24px;}
.header-search .box>input {width:calc(100% - 92px); margin-left:30px; height:100%;}
.header-search .box>button {width:49px; height:100%; padding:0 15px; line-height:0; transform:rotateY(180deg);}
.header-search .box>button>img {vertical-align:middle;}
.header-search .btn-dt-srch {width:49px; height:49px; margin-left:9px; border-radius:100%;
    -webkit-box-shadow: 2px 4px 7px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 4px 7px 2px rgba(0,0,0,0.2);
    box-shadow: 0 7px 5px 0 rgba(0,0,0,0.2);
	background:#8cc059;
    background: linear-gradient(180deg, rgba(150,198,104,1) 0%, rgba(129,176,85,1) 100%)
	}
/*  */
.header-search .header-search-dti {visibility:hidden; opacity:0; z-index:38; height:0; position:absolute; top:100px; left:0; right:0; background-color:#fff; border-bottom:1px solid #adadad;}
.header-search .header-search-dti.active {visibility:visible; opacity:1; height:auto;}
.header-search .header-search-dti.active .all-srch-dt {visibility:visible; opacity:1; position:relative; height:auto; margin-top:0;}
.header-search .header-search-dti.active .btn-close {position:absolute; top:19px; right:0; visibility:visible; opacity:1;}

/* footer */
/* #footer {display:none;} */
.select_wrap.sel_top.agency.is_open .sel_option {z-index:40; background-color:#fff;}
.sns_box {position:static; flex-direction:row; margin-right:25px;}
.sns_box > li + li {margin:0 0 0 16px;}


/* ============== sub : layout ============== */
.sub .header-center {height:56px;}
.sub .header-center #gnb>li>a {padding:19px 0;}

.sub #gnb .sub-menu {top:56px;}
.sub .all-srch-view.active {top:94px;}
.sub .all-menu-view.active {top:94px;}
.sub .all-menu-view.active {height:calc(100vh - 94px);}

.sub .header-search {display:none;}



/* ============== sticky ============== */
.sticky .header-center {position:fixed; top:0; left:0; right:0; height:56px;
    box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
}
.sticky #gnb>li>a {padding:16px 0;}
.sticky #gnb .sub-menu {top:53px;}

.sticky .header-search {margin-top:56px;}
.sticky .all-srch-view.active {top:56px;}
.sticky .all-menu-view.active {top:56px; height:calc(100vh - 56px);}

.sticky.sub #contentInfo{margin-top:56px; }
.sticky.sub .all-srch-view.active {top:56px;}
.sticky.sub .all-menu-view.active {top:56px; height:calc(100vh - 56px);}

/*  */
.quick-top {z-index:200; position:fixed; bottom:30px; right:0; display:flex; justify-content:center; align-items:center; width:63px; height:38px; padding:8px 0; text-align:center; border:1px solid #e3e3e3; background-color:#fff; border-radius:19px 0 0 19px;
    -webkit-box-shadow: 2px 4px 4px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 2px 4px 7px 0px rgba(0,0,0,0.15);
    box-shadow: 2px 4px 4px 0px rgba(0,0,0,0.15);
}



@media (max-width: 1350px) {
    .header-center {padding:0 40px;}
}
@media (max-width: 1239px) {
    .header-center {padding:0 0 0 10px;}
    #gnb>li>a>span {padding:0 22px;}
}

@media (min-width: 1025px) and (max-width: 1180px) {
    #wrap {min-width:1180px;}
	.sticky .header-center {min-width:1180px;}
} 

@media (min-width: 768px) and (max-width: 1024px) {
    #wrap {min-width:1024px;}
	.sticky .header-center {min-width:1024px;}
} 

@media (max-width: 1024px) {
	.noDpTab {display:none !important;}
} 

@media (max-width: 767px) {
    #wrap {min-width:345px;}
    
    .sub .header-search {display:none;}

    .header-center,
    .sub .header-center {height:56px; background-color:#6daa2f; border:none;}

    .header-center>.inner {justify-content:center;}
    .header-center nav {display:none;}

    /* 전체검색 */
    .all-srch-view.active {top:56px;}
    
    /* 전체메뉴 */
    .btn-all-menu {position:absolute; top:50%; left:0; width:56px; height:100%; transform:translateY(-50%);}
    .all-menu-view.active {top:56px; height:calc(100vh - 56px)}
    .all-menu-view>.inner {display:none !important;}
    
    /* 모바일 메뉴 스타일 */
    .mb-menu-style {display:block!important;; background-color:#fff;}

    .mb-menu-style ul ul {display:none;}
    .mb-menu-style a {display:block; padding:13px 0;}

    .mb-menu-style strong {position:relative; display:block; padding:13px 0; padding-left:38px; border-bottom:1px solid #e3e3e3;}
    .mb-menu-style strong::after {left:13px;}
    
    .mb-menu-style em {position:relative; display:block; padding-left:64px; border-bottom:1px solid #e3e3e3}
    .mb-menu-style em::after {left:38px;}

    .mb-menu-style strong::after,
    .mb-menu-style em::after {content:''; position:absolute; top:50%; transform:translateY(-50%); width:23px; height:23px; background:url('../images/common/ico_am_dw.svg') no-repeat center;}

    .mb-menu-style .dep03 li {position:relative; padding-left:85px; border-bottom:1px solid #e3e3e3}
    .mb-menu-style .dep03 li::after {content:''; position:absolute; top:50%; left:67px; transform:translateY(-50%); width:7px; height:2px; background-color:#cacaca}
    .mb-menu-style .active::after {transform: rotate(-180deg ) translateY(50%);}
    /*  */
    .sub .all-menu-view.active {top:56px;}

    .mb-allMenu .m05 strong>a {padding:0;}
    .mb-allMenu .m05 strong::after {width:6px; height:2px; left:20px; background-color:black;}

    .mb-allMenu .m02 .dep03 li,
    .mb-allMenu .m03 .dep03 li,
    .mb-allMenu .m04 .dep03 li {padding-left:65px;}

    .mb-allMenu .m02 .dep03 li::after,
    .mb-allMenu .m03 .dep03 li::after,
    .mb-allMenu .m04 .dep03 li::after {left:47px;}

    /* 모바일 유틸 */
    .btn-mb-util {display:flex; align-items:center; justify-content:center; position:absolute; top:0; right:4px; width:30px; height:100%;}
    .btn-mb-util .btn-close {display:none; position:absolute; top:0; right:0; width:30px; height:100%;}
    .btn-mb-util .btn-close>span {position:absolute; top:50%; left:50%; display:block; width:18px; height:2px; background-color:#fff;;}
    .btn-mb-util .btn-close>span:nth-child(1) {transform:translate(-50%, -50%) rotate(-45deg);}
    .btn-mb-util .btn-close>span:nth-child(2) {transform:translate(-50%, -50%) rotate(45deg); }
    .btn-mb-util.active>img {opacity:0;}
    .btn-mb-util.active .btn-close {display:block;}

    .mb-utilMenu {z-index:49; position:fixed; left:0; right:0; background-color:#fff;}
    .mb-utilMenu.active {visibility:visible; opacity:1; top:56px; height:auto;}

    .mb-menu-style .dep01.util>li {border-bottom:1px solid #e3e3e3;}
    .mb-menu-style .dep01.util>li>a {padding-left:38px;}
    .mb-menu-style .dep01.util .dep03>li {padding-left:64px;}
    .mb-menu-style .dep01.util .dep03>li::after {left:38px;}

    /*  */
    .btn-all-srch {position:absolute; top:50%; right:34px; margin:0; align-items:center; justify-content:center; width:34px; height:100%; transform:translateY(-50%); border:none;}
    .btn-all-srch>span {display:none;}
    .btn-all-srch {top:0; transform:none; display:flex;}
    .btn-all-srch img.mb {display:flex;}

    .btn-all-srch .btn-close {display:none; position:absolute; top:0; right:0; width:34px; height:100%;}
    .btn-all-srch .btn-close>span {position:absolute; top:50%; left:50%; display:block; width:18px; height:2px; background-color:#fff;;}
    .btn-all-srch .btn-close>span:nth-child(1) {transform:translate(-50%, -50%) rotate(-45deg);}
    .btn-all-srch .btn-close>span:nth-child(2) {transform:translate(-50%, -50%) rotate(45deg); }
    .btn-all-srch.active>img {opacity:0;}
    .btn-all-srch.active .btn-close {display:block;}
    /*  */
    .sub .all-srch-view.active {top:56px;}
    /*  */
    .all-srch-view>.inner {padding:35px 0 25px 0;}

    .all-srch-view .mb-in-srch {display:block; position:absolute; top:-27px; left:20px;}
    .all-srch-view .mb-in-srch label {margin-left:6px;font-size:1.2rem;}
    
    .all-srch-view .box {width:90%; height:39px; border-radius:19px; border:1px solid #959595;}
    .all-srch-view .box>input {width:calc(100% - 49px); margin-left:10px;}
    .all-srch-view .box>button {width:39px; padding:8px 10px}
    .all-srch-view .btn-dt-srch {display:none;}

    /*  */
    .btn-all-menu span {width:18px; height:2px; background-color:#fff;}
    .btn-all-menu span:nth-child(1) {margin-top:-5px;}
    .btn-all-menu span:nth-child(3) {margin-top:5px;}
    
    /*  */
    .sub .footer_area {padding-bottom:80px;}
    .footer_area .foo_list > li:first-child {display:block;}

    /*  */
    .noDpMob {display:none !important;}

}