@charset "utf-8";

/* 메인 컬러 - 전체 적용 */
:root{
  --color:#C73333;
  --sub-font:'JSArirang-Regular';
}





/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-size:1em;font-family: 'Pretendard Variable';}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-size:1em;font-family: 'Pretendard Variable';}
select {margin:0}
p {margin:0;padding:0;word-break:keep-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
box-shadow:none;
outline: none;
border:1px solid var(--color) !important;
}

.placeholdersjs {color:#aaa !important}




/* 폰트 */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/theme/template/font/PretendardVariable.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/theme/template/font/PretendardVariable.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/theme/template/font/PretendardVariable.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/theme/template/font/PretendardVariable.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
@font-face {
    font-family: 'Pretendard Variable';
    src: url('/theme/template/font/PretendardVariable.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard Variable';
    src: url('/theme/template/font/PretendardVariable.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'JSArirang-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/JSArirang-RegularA1.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 기본 세팅 */
html{overflow-x: hidden;}
html,body{font-size: 20px; font-family: 'Pretendard Variable';}
@media all and (max-width:1024px){
  html,body{font-size: 18px;}
}


/* 공통 */
.inner{max-width: 1200px; margin: 0 auto; width: 90%;}
img{max-width: 100%;}
li{list-style: none;}


/* 팝업레이어 */
/* 20250825 추가 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden;color:red;}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}


/* 로그인·관리자 헤더바 */
#wrapper .hdtop{}
#wrapper .hdtop .inner{display: flex; justify-content: flex-end;align-items: center;gap:0;}
#wrapper .hdtop li{list-style: none; padding:0; position: relative;}
#wrapper .hdtop li::after{ content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height:12px; background: #000;}
#wrapper .hdtop li:last-child:after{width: 0;}
#wrapper .hdtop li:last-child{padding-right: 0;}
#wrapper .hdtop li a{color: #000; font-size: 14px;display: block;padding: 10px 25px;}
#wrapper .hdtop li a:hover{color: var(--color);}


/* header 시작 */
#header {width: 100%;height: 100px;box-sizing: border-box;background: #fff;}
.header_nav {height: 100%;}
.header_nav .nav {height: 100%;}
.header_nav .inner {display: flex;justify-content: space-between;align-items: center;height: 100%;}
.header_nav .header_logo {}
.header_nav .header_logo a {display: block;}
.header_nav .header_logo a img {max-width: 300px;}

#main-nav {height: 100%;}
.main-nav_depth1 {height: 100%;}
.main-nav_depth1 .mn-ul1 {display: flex;height: 100%;}
.main-nav_depth1 .mn-li1 {position: relative;}
.main-nav_depth1 .mn-a1 {display: flex;align-items: center;height: 100%;padding: 0 25px; font-size: 1.00em; color: #000;text-align: center;font-weight: 500;}
.main-nav_depth2 {display:none;min-width: 180px;background: #fff;position: absolute;top: 100%;left: 50%;z-index: 100;transform: translateX(-50%);}
.main-nav_depth2 .mn-ul2 {width: 100%;}
.main-nav_depth2 .mn-li2 {border-bottom: 1px solid #eee;box-sizing: border-box;}
.main-nav_depth2 .mn-a2 {word-break:keep-all;display: block;width: 100%;padding: 15px;box-sizing: border-box;font-size: .90em;font-weight: 500;text-align: center;transition: .35s;}
.main-nav_depth2 .mn-a2:hover,
.main-nav_depth2 .mn-a2:focus {color: var(--color);}
.header_nav .nav_btn {display: none;}

@media all and (max-width: 1400px){
}
@media all and (max-width: 1200px){
    #wrapper .hdtop li a{padding: 10px 15px;}
    .main-nav_depth1 .mn-a1 {padding: 0 15px;}
    .header_nav .header_logo a {max-width: 80%;}
}
@media all and (max-width: 1024px){
    #wrapper .hdtop{position: fixed;top: 0;left: 0;z-index: 1000;width: 100%;background: #fff;}
    #wrapper .hdtop .inner{gap: 20px;}
    #wrapper .hdtop li a{padding: 10px 0;}
    #wrapper .hdtop li::after{right: -10px;}
    #header {height: 80px; position: fixed; left: 0; top: 36px; z-index: 1000;}
    #main-nav {display: none;}
    .header_nav .nav_btn {display: block;}
    .header_nav .nav_btn a {display: flex;align-items: center;width: 34px;height: 22px;position: relative;}
    .header_nav .nav_btn a::before,
    .header_nav .nav_btn a::after {content: '';display: block;width: 100%;height: 3px;background: #000;position: absolute;left: 0;right: 0;margin: auto;}
    .header_nav .nav_btn a::before {top: 0;}
    .header_nav .nav_btn a::after {bottom: 0;}
    .header_nav .nav_btn a span{display: block;width: 100%;height: 3px;background: #000;}
}
@media all and (max-width:768px){
    .header_nav .header_logo a img{max-width: 250px;}
}
@media all and (max-width: 640px){    
    .header_nav .nav_btn {right: 20px;}
}
@media all and (max-width: 480px){
    #wrapper .hdtop li a{font-size: 12px;}
    #header{top: 34px;}
    .header_nav .nav_btn a {width: 26px;height: 20px;}
    .header_nav .nav_btn a::before, 
    .header_nav .nav_btn a::after,
    .header_nav .nav_btn a span {height: 2px;}
    .header_nav .header_logo a img{max-width: 200px;}
}
/* header 끝 */









/* sidebar 시작 */
#sidebar {display: none;width: 100%;height: 100%;background: #fff;position: fixed;top: 0;left: 0;z-index: 9999;box-shadow: 0 0 5px 5px rgba(50, 60, 70, 0.15);-webkit-box-shadow: 0 0 5px 5px rgba(50, 60, 70, 0.15);}
.sidebar_header {height: 80px;} 
.sidebar_header .inner {display: flex;justify-content: space-between;align-items: center;height: 100%;} 
.sidebar_header-logo {display: block;} 
.sidebar_header-logo img {max-width: 100%; } 
.sidebar_btn-close {display: flex;align-items: center;width: 34px;height: 22px;position: relative;} 
.sidebar_btn-close::before, 
.sidebar_btn-close::after {content: '';display: block;width: 100%;height: 3px;background: #000;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} 
.sidebar_btn-close::before {transform: rotate(45deg);} 
.sidebar_btn-close::after {transform: rotate(-45deg);} 

.sidebar_cont {height: calc(100vh - 100px);overflow-y: auto;} 
.sidebar_menu {height: 90%;overflow-y: auto;} 
.sidebar_menu .inner {margin: 0;}
.sidebar_menu_depth1 {width: 100%;} 
.sidebar_menu_depth1 .sm-ul1 {width: 100%;} 
.sidebar_menu_depth1 .sm-li1 {border-bottom: 1px solid #EBEBEB;box-sizing: border-box;position: relative;} 
.sidebar_menu_depth1 .sm-li1:not(:last-child) {/* margin-bottom: 30px; */} 
.sidebar_menu_depth1 .sm-a1 {display: block;max-width: 85%;width: 100%;margin: 0;padding: 20px 30px;font-size: 1.20em;font-weight: 500;}
.sidebar_menu_depth1 .sm-li1:has(.sidebar_menu_depth2) .toggle-arrow {display: block;width: 30px;height: 16px; background: url('../img/toggle_arrow.png') no-repeat; background-size: cover !important;transform: rotate(0deg);position: absolute;top: 20px;right: 30px;cursor: pointer;transition: transform 0.3s ease-in-out;}
.sidebar_menu_depth1 .sm-li1:has(.sidebar_menu_depth2).active .toggle-arrow {transform: rotate(-180deg);}
.sidebar_menu_depth1 .sm-li1:not(:last-child) {margin-bottom: 0;} 
.sidebar_menu_depth2 {/* display: none; */width: 100%;max-height: 0;overflow: hidden;background: #f4f4f4;transition: max-height 0.3s ease-in-out;}
.sidebar_menu_depth2.open {display: block;max-height: 500px;/* 충분히 큰 값 설정 */}
.sidebar_menu_depth2 .sm-ul2 {padding: 10px 0;border-top: 1px solid #EBEBEB;box-sizing: border-box;} 
.sidebar_menu_depth2 .sm-a2 {display: block;padding: 10px 30px;color: #666;font-weight: 500;}
@media all and (max-width: 1200px){
  .sidebar_header-logo {max-width: 80%;}  
}
@media all and (max-width: 640px){
    .sidebar_menu_depth1 .sm-a1 {font-size: 1.00em;}    
}
@media all and (max-width: 480px){
    .sidebar_btn-close {width: 26px;height: 20px;}
    .sidebar_btn-close::before, 
    .sidebar_btn-close::after {height: 2px;}
    .sidebar_menu_depth1 .sm-a1{padding: 20px;}
    .sidebar_menu_depth1 .sm-li1:has(.sidebar_menu_depth2) .toggle-arrow{width: 22px; height: 12px; right: 20px;}
}
/* sidebar 끝 */











/* footer 시작 */
#footer {padding:50px 0;background: #404040;}
#footer .ft_top{}
#footer .ft_top {display:flex; justify-content:space-between; align-items:center; width:100%; padding:30px 0; margin:0 auto; border-bottom: 1px solid #B5B5B5 ; }
#footer .ft_top .logo {}
#footer .ft_top .logo img{max-width: 250px;}
#footer .ft_top > div p {margin-right: 30px; font-size:20px; font-weight:bold;}

#footer .ft_top .tel {display:flex; flex-wrap: wrap;}
#footer .ft_top .tel strong {display: block; width:100%; font-size: 50px; font-weight: bold;}
#footer .ft_top .info {width:75%; text-align:right;}
#footer .ft_top .info strong {font-size:14px; color: #B5B5B5;}
#footer .ft_top .info ul {display: flex; justify-content:right; align-items: center; flex-wrap:Wrap; padding:10px 0 0;}
#footer .ft_top .info li {font-size:14px; color:#B5B5B5; position: relative; padding:0 10px; font-weight: 500;}
#footer .ft_top .info li::after{content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 70%; background: #B5B5B5;}
#footer .ft_top .info li:first-child{padding-left: 0;}
#footer .ft_top .info li:last-child{padding-right: 0;}
#footer .ft_top .info li:last-child::after{width: 0;}

#footer .ft_bottom {display:flex; justify-content:space-between; align-items:center; gap: 20px; width:100%; margin:0 auto; padding: 20px 0;}
#footer .ft_bottom .ft_copy {text-align:left; font-size: 14px; color:#B5B5B5;}
#footer .ft_bottom .link {display: flex; margin:0;}
#footer .ft_bottom .link a {font-size: 15px; color:#B5B5B5; position: relative; padding:0 10px;}
#footer .ft_bottom .link a:nth-child(2){font-weight: 600;}
#footer .ft_bottom .link a::after{content: '·'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #B5B5B5;}
#footer .ft_bottom .link a:hover {color: var(--color); transition: all .3s ease-in-out;}
#footer .ft_bottom .link a:first-child{padding-left: 0;}
#footer .ft_bottom .link a:last-child{padding-right: 0;}
#footer .ft_bottom .link a:last-child:after{display: none;}
#footer .ft_bottom .info ul {display: flex; align-items: center; gap:10px;}
#footer .ft_bottom .info li:not(:last-child):after {content:'|'; display: inline-block; padding-left:10px;}


#top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5)}
#top_btn:hover {border-color:var(--color);background:var(--color);color:#fff}
@media all and (max-width: 900px){
  #footer .ft_top{flex-direction: column; align-items: center; gap: 20px;}
  #footer .ft_top .info{text-align: center; width: 100%;}
  #footer .ft_top .info ul{justify-content: center;}
  #footer .ft_bottom{flex-direction: column; gap: 10px;}
  #footer .ft_bottom .ft_copy{text-align: center;}
}
@media all and (max-width: 768px){
  #footer .ft_top .info ul{flex-direction: column; gap: 10px;}
  #footer .ft_top .info li{padding: 0; line-height: 1.3;}
  #footer .ft_top .info li::after{display: none;}
  #footer .ft_bottom .link a{font-size: 14px;}
}
@media all and (max-width:480px){
    #footer .ft_top .logo img{max-width: 200px;}
}
/* footer 끝 */