@charset "utf-8";

/* Skip to content */
.skip {
    margin: 0
}
.skip > a {
    display: block;
    overflow: hidden;
    height: 0;
    line-height: 28px;
    text-align: center
}
.skip > a:focus {
    height: auto
}

/**상단메뉴 하단 전체라인 처리 부분은 여기서 **/

.header {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
	background:#fff url("../img/hd_back01_mp_.png")no-repeat right top;
	border-bottom:0px solid #f2f2f2;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 5px;
	z-index:1000000;
	

}


.topHeader{background:#fff;height:35px;border:0px solid #000;width:100%;}

/* 모바일 전용 헤더 로고 - 데스크톱에서 숨김 */
.mo_header_logo {
    display: none;
}
.topHeader::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% - 621px); /* 1450px 왼쪽 영역 */
    height:35px;
    background-color:#fff;
}
.topHeaderInner{width:1380px;max-width:100%; margin:0px auto;padding:0px;display:flex;border:0px solid #000;}
.topHeaderInner > div{flex-grow:1;}

.topHeader .side ul{
	display:flex;
	top:0px;
	z-index:1000;
	border:0px solid #000;
	overflow:hidden;
	box-sizing:border-box;
	border-left:1px solid #ddd;
	height:35px;
	float:right;
	right:0px;
	
}



/* Login */
.topHeaderInner .side > ul > li {
    flex-grow:1;
    position: relative;
	text-align:center;
	box-sizing:border-box;
	padding:0px 15px;
	font-size: 14px;
	border-right:1px solid #ddd;
}

.topHeaderInner .side > ul > li > a {
    display: block;
	padding:0px 0px;
    height: 35px;
    line-height: 35px;
    color: #666;
	border:0px solid #000;
}


.topHeaderInner .side > ul > li > a > i{font-size:15px;line-height:35px;font-weight:500;}


/* Search */
.search_wrap {
    position: relative;
    width: 1240px;
    margin: 0 auto;
	z-index:100;
	display:block;
	border:0px solid #000;
	z-index:1000000000000000;
}
.search_area {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 1240px;
    padding:10px 9px;
    z-index: 3;
    border:1px solid #ddd;
	background-color:#fff;
	margin-top:40px;
	height:70px;
	line-height:70px;
}
.search_area input {
    font-size: 13px;
    vertical-align: top;
	border:1px solid #ddd;
}
.search_area input[type=text] {
    position: relative;
    width: 100%;
    height: 50px;
    padding: 15px 0;
    border:0px solid #000;;
    background-color: transparent;
    font-size: 30px;
    color: #FF3366;
    -webkit-appearance: none;
	box-sizing:border-box;
}
.search_area input[type=text]:focus {
    outline: 0
}
.search_area input[type=text]::-ms-clear {
    display: none
}
.search_area .btn_close {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    font-size: 22px;
    color: #FF3366;
    text-align: center;
    line-height: 20px
}





.body.fixed-width {
    width: 100%;
    margin: 0 auto;
	box-sizing:border-box;
}
.header:after, .body:after {
    display: block;
    clear: both;
    content: ''
}


/* Fixed Header */
.container.fixed_header {
	border:0px solid #ff6600;
	z-index:1;
}

/*메뉴부분*/
.fixed_header .header_wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    z-index: 100;
    padding: 0;
	border:0px solid #000;

}

/*메뉴바 애니메이션 */
.fixed_header .header_wrap.shrink {
    position: fixed;
    top: 0;
    width:auto;
    width: 100%;
	max-width:100%;
    z-index: 1000;
    border-bottom: 0px solid #e1e1e1;
    -webkit-animation: ani-header 1.9s forwards;
    animation: ani-header 0.9s forwards;
    left:0;
    right:0;
	z-index:1000;
	box-sizing:border-box;
}




/* header animation */
@-webkit-keyframes ani-header {
    0% {
        top: -80px
    }
    100% {
        top: 0px
    }
}
@keyframes ani-header {
    0% {
        top: -80px
    }
    100% {
        top: 0px
    }
}




.gnbDiv{display:block;position:relative;overflow:hidden; z-index:99;margin:0px auto;border-top:1px solid #ddd;border-bottom:0px solid #000;z-index:100;background:url("../img/hd_back03.png")no-repeat 5% bottom} 

.gnbDiv::before {
    content: "";
    position: absolute;
    top: 80px; /* ✨ 선의 시작 위치 (상단에서 60px 떨어진 곳) */
    left: 0;
    
    width: 100%; /* 선의 두께 */
    height:1px; /* 전체 높이에서 60px을 뺀 나머지 길이만큼 선을 표시 */
    background-color: #ddd; /* 선의 색상 */
    z-index: 5; /* 필요하다면 z-index 조정 */
}



.gnb{position:relative;overflow:hidden; height:80px;z-index:99;margin:0px auto;font-family: 'Montserrat', sans-serif;z-index:100;width:1350px;max-width:100%;display:flex;} /*상단1차메뉴*/


.gnb > .topLogo{
	padding:5px 0px;
	border:0px solid #000;
	text-align:center;
	
	height:70px;
	text-align:left;
	box-sizing:border-box;
}

.gnb > .topLogo > h1{
	margin:0px;
	padding:0px;
}


.gnb > .topLogo > h1 > a {
	margin:0px;
	padding:0px;
}

.gnb > .topLogo > h1 > a > img {
	padding:0px;
	margin:0 0 0 0px;
	border:0px solid #000;
	height:70px;
	max-height:100%;
}




.gnb > ul {float:left; display:flex;position:relative;z-index:3;padding-left:0px;margin:0px auto;box-sizing:border-box;max-width:70%;border:0px solid #000;}
.gnb > ul > li{ position: relative; width:300px;max-width:100%; padding:0px;margin:0px;z-index:4; text-align:center;font-size:20px;list-style-type:none;border-left:0px solid #ddd;box-sizing:border-box;white-space:nowrap; line-height: 80px; }

.gnb > ul > li::before {
    content: "";
    position: absolute;
    top: 80px; /* ✨ 선의 시작 위치 (상단에서 60px 떨어진 곳) */
    left: 0;
    
    width: 1px; /* 선의 두께 */
    height: calc(100% - 80px); /* 전체 높이에서 60px을 뺀 나머지 길이만큼 선을 표시 */
    background-color: #ddd; /* 선의 색상 */
    z-index: 5; /* 필요하다면 z-index 조정 */
}


.gnb > ul > li:last-child{border-right:0px solid #ddd;background:none;}
.gnb > ul > li > a{text-decoration:none;padding:0px;border:0px solid #333;color:#333; letter-spacing:-1px; text-align:center;margin:0px auto;height:80px;top:0;display:block;position:relative;font-weight:500;box-sizing:border-box;}
.gnb > ul > li > .over{text-decoration:none;padding:17px 0px 0 0;border:0px solid #333;color:#333 ; text-align:left;margin:0px auto;top:0;display:block;position:relative;font-weight:400;}

.gnb > ul > li:hover a{color:var(--point-color2);text-decoration:none;}

.gnb > ul > .active > a {color:var(--point-color2);}


.gnb > ul > li > div#subMenu {
    min-height: 100%;
    box-sizing: border-box;
}

/* 마우스 오버 시 배경색만 즉시 적용 (transition 제거) */
.gnb > ul > li > div {
    transition: background 0s !important;
}

.gnb > ul > li:hover > div {
    background: var(--point-color2) !important;
}

.gnb > ul > li:hover div a{color:#fff !important;}

/*서브1차*/


.gnb > ul > li > div{position:relative;padding:0px 0px 30px 0px;box-sizing:border-box;border:0px solid #ddd;margin:0px 0 0 0px;z-index:3;display:block;overflow:hidden;box-sizing:border-box;height:100%;} /*하위메뉴좌측 라인처리 부분 소스 처리는 이곳*/
.gnb > ul > li > div > ul{
    padding: 30px 0px 30px 0; /* 20px -> 5px로 줄여서 상단 여백을 좁힙니다. */
    margin:0px 0 0px 0px;
    z-index:1;
    border-top:0px solid #ddd;
    border-right:0px solid #ddd;
    text-align:left;
    width:100%;
    height:100%;
    box-sizing:border-box;
}/*서브 1차 */
.gnb > ul > li:first-child ul{border-left:0px solid #ddd;}
.gnb > ul > li > div > ul > li{margin:0px;padding:0px 10px; text-align:center;list-style-type:none;box-sizing:border-box; word-break: keep-all;white-space: normal;}
.gnb > ul > li > div > ul > li > a{
    /* 기존 스타일 유지 */
    padding:7px 10px;
    text-decoration:none;
    box-sizing:border-box;
    color:#666 !important;
    font-size:16px;
    position:relative;
    display:block;
    letter-spacing:-1px;
    line-height: 1.3;
}/*서브 1차메뉴 */
.gnb > ul > li > div > ul > li:hover a{text-decoration:underline}


.gnb > ul > li > div > ul > .active > a {text-decoration:underline;}




/*서브2차 */
.gnb > ul > li > div > ul >  li > ul{padding:5px 0 0 0px;margin:0px 0 5px 0px;z-index:4;border:0px solid #ddd !important;text-align:center;}  /*서브 2차 */
.gnb > ul > li > div > ul >  li > ul > li {line-height:20px;padding:0px;border:0px solid #ddd;}
.gnb > ul > li > div > ul >  li > ul > li > a{color:#999 !important;text-decoration:none;font-size:15px;}
.gnb > ul > li > div > ul >  li > ul > li > a:hover{color:#ffcc00 !important;text-decoration:none;font-size:15px;}
.gnb > ul > li > div > ul >  li > ul > .active > a{/*color:#e7440f !important;*/text-decoration:none;margin:0px;padding:0px;}

/* 애니메이션 중 pointer-events 방지 */
.gnb.animating {
    pointer-events: none;
}

.gnb.animating * {
    pointer-events: none;
}


/* 1. all_btn 컨테이너: 위치, 높이, Flexbox 설정 */
.gnb .all_btn {
    position: relative;
    /* absolute 기준: gnbDiv에 position:relative가 있어야 함 */
    right: 0px; 
    top: 0px;
    height: 80px; /* gnb와 같은 높이 */
    z-index: 1000;
    background: none;
    border: none;
    cursor: pointer;
    
    /* 텍스트와 아이콘을 가로로 정렬 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    padding: 0 15px; /* 양쪽 패딩 추가 (선택 사항) */
    width: auto; /* 내용물 너비에 맞게 설정 */
}

/* 2. 전체메뉴 텍스트 div (첫 번째 div) */
.all_btn div:first-child {
    font-size: 18px; /* 텍스트 크기 지정 */
    color: #666; /* 텍스트 색상 지정 */
    margin-right: 10px; /* 아이콘과의 간격 */
    line-height: 1; /* line-height는 전체 컨테이너에서 처리했으므로 1로 설정 */
}

/* 3. 햄버거 아이콘 컨테이너 (두 번째 div) */
.all_btn div:nth-child(2) {
    /* 아이콘 크기 지정 */
    width: 25px; /* 아이콘 전체 너비 */
    height: 20px; /* 아이콘 전체 높이 */
    position: relative; /* 내부 bar의 absolute 기준점 */
}

/* 4. bar 스타일: 아이콘 컨테이너를 기준으로 위치 지정 */
.all_btn div:nth-child(2) .bar {
    display: block; /* bar는 span이므로 block으로 변경 */
    width: 100%;
    height: 2px;
    background: #222;
    position: absolute;
    left: 0;
    transition: all 0.3s;
}

/* 5. bar 위치 조정 */
.all_btn div:nth-child(2) .bar1 {
    top: 0; /* 아이콘 컨테이너 상단 */
}
.all_btn div:nth-child(2) .bar2 {
    top: 50%;
    transform: translateY(-50%); /* 정확한 수직 중앙 정렬 */
    width: 60%;
}
.all_btn div:nth-child(2) .bar3 {
    top: 100%; /* 아이콘 컨테이너 하단 */
    margin-top: -2px; /* height 값만큼 위로 조정 */
}


/* 6. .on 클래스 적용 시 애니메이션 (X자 모양) */
.all_btn.on div:nth-child(2) .bar1 {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    margin-top: 0;
}
.all_btn.on div:nth-child(2) .bar2 {
    opacity: 0;
    margin-left: 50px; /* 사라지는 효과 */
}
.all_btn.on div:nth-child(2) .bar3 {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    margin-top: 0;
}

.gnbDiv .all_btn:focus {
    outline: none; /* 포커스 아웃라인 제거 */
}



.gnbDiv .all_btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.gnbDiv .all_btn * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



.blankTop{height:116px;display:block;position:relative;width:100%;clear:both;}






/*********************add_menu.css*********************/
.add_menu_wrap{
	padding:0 0px 0px 5px;
	
}
.add_menu_wrap li{
	float:left;
	line-height:50px;
	font-size:20px;
	padding:0px;
	transition-duration:0.4s;
}

.add_menu_wrap li a{color:#000;}
.add_menu_wrap li a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;  /* 검색 버튼 높이와 맞춤 */
    height: 50px; /* 검색 버튼 높이와 맞춤 */
    background: #000;
    border-radius: 50px; /* 완벽한 원형 */
    color: #fff;
    font-size: 24px; /* 아이콘 자체 크기를 키움 */
    box-sizing: border-box;
    vertical-align: middle;
}

.add_menu_wrap li:nth-child(1) a i{background:#000;}
.add_menu_wrap li:nth-child(2) a i{background:var(--point-color2);}
.add_menu_wrap li:nth-child(3) a i{background:var(--point-color3);}


.add_menu a{
	cursor:pointer;
	color:#888;
}


/*회원로그인창*/
.member_btn_link{
	float:left;
}

.member_btn_link:hover{
	cursor:pointer;
}

.add_menu a .member_btn{
	display:inline-block;
	vertical-align:middle;
	position:relative;
	width:24px;
	height:2px;
	background-color:#888;
	transition-duration:0.3s;
}

.add_menu a .member_btn:before{
	content:'';
	width:24px;
	height:2px;
	background-color:#888;
	position:absolute;
	top:-7px;
	left:0;
	transition-duration:0.4s;
}

.add_menu a .member_btn:after{
	content:'';
	width:24px;
	height:2px;
	background-color:#888;
	position:absolute;
	top:7px;
	left:0;
	transition-duration:0.4s;
}

.add_menu a.spreaded .member_btn{
    background-color: transparent;
    height: 24px;
    border: 2px solid #888;
    border-radius: 100%;
}

.add_menu a.spreaded .member_btn:before{
	top: calc(50% - 1px);
    transform: rotate(225deg);
    width: 14px;
    left: calc(50% - 7px);
}

.add_menu a.spreaded .member_btn:after{
	transform:rotate(315deg);
    top: calc(50% - 1px);
    width: 14px;
    left: calc(50% - 7px);
}

.add_menu a.spreaded .admin_icon{
	vertical-align:middle;
}


@media(max-width:1280px) {
	.gnbDiv .all_btn > div:first-child{display:none;}

}


@media (max-width: 991px) {

    /* =============================================
       헤더 공통
    ============================================= */
    .header {
        position: relative;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #f2f2f2;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .topLink,
    .search_wrap,
    .gnbDiv,
    .blankTop {
        display: none !important;
    }


    /* =============================================
       상단 헤더 - flex 3단 레이아웃
    ============================================= */
    .topHeader {
        height: 60px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 0;
        box-sizing: border-box;
    }


    /* =============================================
       햄버거 버튼 (왼쪽 · order 1)
    ============================================= */
    .navdraw_bar {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 54px;
        width: 54px;
        height: 60px;
        order: 1;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navdraw_bar i {
        font-size: 24px !important;
        line-height: 1 !important;
        color: #333;
    }


    /* =============================================
       모바일 로고 (가운데 · order 2)
    ============================================= */
    .mo_header_logo {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 1;
        order: 2;
    }

    .mo_header_logo a {
        display: block;
        line-height: 0;
    }

    .mo_header_logo img {
        height: 38px;
        max-width: 140px;
        object-fit: contain;
    }

    .mo_header_logo span {
        font-size: 16px;
        font-weight: 700;
        color: #333;
    }


    /* =============================================
       우측 링크 영역 (오른쪽 · order 3)
    ============================================= */
    .topHeaderInner {
        flex: 0 0 54px;
        width: 54px !important;
        height: 60px;
        order: 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .topHeaderInner .side ul {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    /* 모든 li 기본 숨김 */
    .topHeaderInner .side > ul > li {
        display: none !important;
        border-right: 0 !important;
    }

    /* 로그인/마이페이지 버튼 li만 표시 */
    .topHeaderInner .side > ul > li:has(> a.member_btn_link) {
        display: flex !important;
        align-items: center;
        height: 60px;
        border-right: 0 !important;
    }

    /* 두 번째 이상 member_btn_link li는 다시 숨김 */
    .topHeaderInner .side > ul > li:has(> a.member_btn_link) ~ li:has(> a.member_btn_link) {
        display: none !important;
    }

    .topHeaderInner .side > ul > li > a.member_btn_link {
        display: flex !important;
        align-items: center;
        height: 60px;
        padding: 0;
        font-size: 0 !important;
    }

    /* 아이콘 동그란 배경 */
    .topHeaderInner .side > ul > li > a.member_btn_link > i {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        font-size: 16px !important;
        line-height: 1 !important;
        color: #fff !important;
        background-color: #2196c9;
        border-radius: 50%;
    }


    /* =============================================
       GNB 로고 영역
    ============================================= */
    .gnb > .topLogo {
        height: 60px;
        max-width: 100%;
        padding: 10px 15px;
    }

    .gnb > .topLogo > div {
        border: 0;
    }

    .gnb > .topLogo > .topLogo {
        height: 40px;
    }

    .gnb > .topLogo > .topLogo > h1 > a > img {
        height: 40px;
        margin: 0;
    }

}

@media(max-width: 768px) {
  .add_menu_wrap li a i {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}
@media(max-width: 480px) {
  .add_menu_wrap li{
	line-height:0px !important;
  }
  .add_menu_wrap li a i {
    width: 35px;
    height: 35px;
    font-size: 17px;
  }
}