@charset "utf-8";

:root{
    --brown:#967462;
    --beige:#F0E2CE;
    --dark:#333;
    --gray:#666;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

html, body{color:#000; font-family:'Presentation'; font-weight:400; overflow-x:hidden;}
*{margin:0; padding:0; font-family:'Presentation'; font-weight:400; box-sizing:border-box;}
a{text-decoration:none; color:inherit;}
em, i{font-style:normal;}
ul, li, ol{list-style:none;}
.inr{position:relative; max-width:1440px; margin:0 auto;}
button{border:0; background:none;}

.hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;}
[role="tabpanel"][hidden]{display:none;}
[role="tabpanel"]{animation: fadeIn 0.3s ease;}

@keyframes fadeIn{
    from { opacity: 0; }
    to { opacity: 1; }
}

/*header*/
body:not(.main) #header{display:flex; justify-content:space-between; align-items:center; position:absolute; left:0; top:0; width:100%; height:100px; border-bottom:1px solid #fff; background:rgba(150, 116, 98, .3); z-index:1; box-sizing:border-box;}
body:not(.main) .logo{display:flex; justify-content:center; align-items:center; height:100%; border-left:1px solid #fff; box-sizing:border-box;}
body:not(.main) .logo a{display:flex; justify-content:center; align-items:center; color:#fff; font-size:20px; font-weight:600;height:100%;padding:0 30px;}
body:not(.main) .logo a.home{border-right:1px solid #fff;}
#menu{height:100%;}
#menu ul{display:flex; align-items:center; height:100%; justify-content:space-between;}
#menu a{display:block; color:#fff; font-size:22px; font-weight:600; transition:all .3s ease 0s;}
#menu > ul > li:hover a{color:#000;}
#menu a.depth{position:relative;}
#menu > ul > li a.depth:before{content:''; display:block; position:absolute; right:-20px; top:50%; width:9px; height:8px; margin-top:-4px; background-image:url('/images/hakdo/common/menu_arrow.png'); background-repeat:no-repeat;}
#menu > ul > li:hover a.depth:before{background-image:url('/images/hakdo/common/menu_arrow_on.png');right:-15px;}
#menu > ul > li{position:static !important; display:flex; align-items:center; height:100%; padding:0 20px;}
#menu ul li .depth_menu{display:none; position:absolute; left:0; top:100px; width:100%; height:80px; background:rgba(0, 0, 0, .5); z-index:1000; opacity:0; visibility:hidden;}
#menu ul li .depth_menu ul{position:absolute; display:flex; white-space:nowrap; transition:none !important;}
#menu ul li .depth_menu li{padding:0 20px;}
#menu ul li .depth_menu li a{color:#fff; font-size:18px; font-weight:600;}
#menu ul li .depth_menu li a:hover{color:#fff;text-decoration:underline;}

/*all_menu*/
body.menu-open{overflow-y:hidden;}
html.menu-open,
body.menu-open{overflow:hidden !important; height:100% !important; width:100% !important; position:fixed !important; touch-action:none;}
#all_menu{display:flex; justify-content:center; align-items:center; width:100px; height:100px; border-right:1px solid #fff; box-sizing:border-box; cursor:pointer;}
#all_menu span{display:block; width:40px; height:28px; background:url('/images/hakdo/common/menu.png') no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
#all_menu_nav{position:fixed; left:0; top:0; width:100%; height:100%; padding-top:200px; text-align:center; background:rgba(0, 0, 0, .7); z-index:1; max-height:100vh; overflow-y:auto; box-sizing:border-box;}
#all_menu_nav div{position:relative; top:50%; left:50%; width:100%; height:100%; padding-top:50px; transform:translate(-50%, -50%);}
#all_menu_nav a{display:inline-block;}
#all_menu_nav a span{display:inline-block; position:relative; padding:0 10px; color:#fff; font-size:40px; font-weight:600; box-sizing:border-box; z-index:1;}
#all_menu_nav a span:before{content:''; display:block; position:absolute; left:0; bottom:2px; width:0%; height:10px; border-radius:2px; background:#9674626e; transition: width 0.3s ease; z-index:-1;}
#all_menu_nav a:hover span:before{width:100%;}
#all_menu_nav > div > ul{padding-bottom:200px;}
#all_menu_nav > div > ul > li{margin-top:50px;}
#all_menu_nav li li{margin-top:10px;}
#all_menu_nav li li a{display:block; color:var(--brown); font-size:26px; font-weight:600;}
#all_menu_nav li li a:hover{color:var(--beige);}
#all_menu_nav .close{position:absolute; top:0; left:50%; width:60px; height:60px; margin-left:-30px; background:url('/images/hakdo/common/close.png') no-repeat; background-size:cover; text-indent:100%; overflow:hidden; white-space:nowrap; cursor:pointer; transition:all 0.3s ease 0s;;}
#all_menu_nav .close span{display:block;}
#all_menu_nav .close:hover{transform:rotate(90deg);}
#all_menu_nav > div > ul > li > a:hover span:before,
#all_menu_nav > div > ul > li:hover > a span:before{width:100%;}

@media screen and (max-width:1650px){
    body:not(.main) .logo a{padding:0 20px; font-size:18px;}
    #menu a{font-size:18px;}
}
@media screen and (max-width:1630px){
    #menu > ul > li{padding:0 20px;}
    #menu > ul > li a.depth:before{right:-15px;}
}
@media screen and (max-width:1500px){
    #menu > ul > li{padding:0 15px;}
    #menu a{font-size:18px;}
    #menu ul li .depth_menu ul li a{font-size:16px;}
    #all_menu_nav > div > ul > li{margin-top:35px;}
    #all_menu_nav a span{font-size:30px;}
    #all_menu_nav li li a{font-size:22px;}
}
@media screen and (max-width:1400px){
    body:not(.main) #header{justify-content:center; height:70px; border-bottom:0;}
    #all_menu{position:absolute; right:20px; top:50%; width:40px; height:100%; margin-top:-35px; border-right:0;}
    #menu{display:none;}
    body:not(.main) .logo{width:auto; border-left:0;}
    body:not(.main) .logo a{width:200px; height:40px; background:url('/images/hakdo/common/logo.png') no-repeat; background-size:cover; text-indent:100%; overflow:hidden; white-space:nowrap; font-size:0; line-height:0; }
    body:not(.main) .logo a.home{display:none;visibility:hidden;}
    #all_menu_nav{padding-top:80px;}
    #all_menu_nav > div > ul > li{margin-top:30px;}
     #all_menu_nav a span:before{bottom:0; height:8px;}
    #all_menu_nav a span{font-size:28px;}
    #all_menu_nav li li a{font-size:20px;}
    #all_menu_nav > div > ul{padding-bottom:80px;}
    #all_menu_nav .close{width:50px; height:50px; margin-left:-25px; background-size:cover;}
}
@media screen and (max-width:1024px){
    #all_menu_nav > div > ul > li{margin-top:25px;}
    #all_menu_nav a span{font-size:24px;}
    #all_menu_nav li li a{font-size:18px;}
}
@media screen and (max-width:768px){
    body:not(.main) #header{justify-content:left; padding-left:20px;}
    body:not(.main) .logo a{width:180px; height:35px;}
    #all_menu span{width:30px; height:24px; background-size:cover;}
    #all_menu_nav{padding-top:50px;}
    #all_menu_nav > div > ul{padding-bottom:50px;}
    #all_menu_nav a span{font-size:20px;}
    #all_menu_nav li li a{font-size:17px;}
}
@media screen and (max-width:500px){
     #all_menu_nav a span{font-size:18px;}
    #all_menu_nav li li a{font-size:16px;}
}

/*footer*/
#footer{background:#f1e2cf;}
.footer{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:30px 0; box-sizing:border-box;}
.footer p{display:flex; justify-content:space-between; align-items:center; color:var(--dark); font-size:14px; font-weight:500;}
.footer ul{display:flex; align-items:center;}
.footer li{position:relative; padding:0 10px;}
.footer li:first-child{padding-left:0;}
.footer li:first-child{padding-left:0;}
.footer li:last-child{padding-right:0;}
.footer li:before{content:''; display:block; position:absolute; left:-1px; top:3px; width:1px; height:13px; border-left:1px solid #333;}
.footer li:first-child:before{display:none;}
.footer li a{display:block; color:var(--dark); font-size:16px; font-weight:500;}

@media screen and (max-width:1480px){
    .inr{width:100%; max-width:100%; padding:0 20px; box-sizing:border-box;}
}
@media screen and (max-width:670px){
    .footer{flex-direction:column; justify-content:center; gap:5px;}
    .footer p{text-align:center;}
}

/*tab*/
[role="tablist"]{display:flex; width:100%; height:100px;}
[role="tab"]{flex:1; margin-left:-1px; color:var(--dark); font-size:26px; font-weight:600; border:1px solid #e1e1e1; background:#f1f1f1; cursor:pointer; transition:all .3s ease 0s;}
[role="tab"][aria-selected="true"]{color:var(--brown); background:#fff;}
[role="tab"]:hover{color:var(--brown); background:#fff;}
[role="tab"]:focus-visible{outline:none;}

.tabs_container.small [role="tablist"]{width:485px; height:60px;}
.tabs_container.small [role="tabpanel"]{margin-top:60px;}
.tabs_container.small [role="tab"]{font-size:28px; font-weight:400; border:1px solid #d1d1d1; background:#fff;}
.tabs_container.small [role="tab"][aria-selected="true"]{color:#fff; background:var(--brown);}
.tabs_container.small [role="tab"]:hover{color:#fff; background:var(--brown);}

@media screen and (max-width:1280px){
    .tabs-container [role="tablist"]{height:100%;}
    .tabs-container [role="tab"]{padding:30px 20px; font-size:24px; box-sizing:border-box;}
}
@media screen and (max-width:1024px){
    .tabs-container [role="tab"]{padding:25px 20px; font-size:20px;}
}
@media screen and (max-width:880px){
    .tabs-container [role="tab"]{padding:20px; font-size:18px;}
}
@media screen and (max-width:820px){
    .tabs-container [role="tablist"]{flex-wrap:wrap; height:100%; margin-top:1px;}
    .tabs-container [role="tab"]{flex:0 0 50%; width:50%; margin-top:-1px; font-size:18px;}
}
@media screen and (max-width:768px){
    .tabs-container [role="tab"]{font-size:17px;}
}


/*pagination*/
.pagination{display:flex; justify-content:center; margin-top:60px;}
.pagination .page_list{display:flex; align-items:center; gap:8px;}
.pagination a{display:flex; align-items:center; justify-content:center; min-width:32px; height:32px; color:#333; font-size:14px; font-weight:500; border-radius:6px; transition:background-color 0.2s;}
.pagination a.active{background-color:var(--brown); color:#fff; font-weight:700;}
.pagination a:not(.active):hover{background-color:#f0f0f0;}

.pagination-wrap {text-align:center;}
.pagination-wrap:after{content:""; height:0; line-height:0; clear:both; display:block;}
.pagination-wrap ul, .pagination-wrap li{list-style:none;}
.pagination-wrap a{float:left; overflow:hidden; width:40px; height:40px; border:1px solid #dedede; line-height:37px; margin:0 0 0 -1px !important; padding:0 !important; text-align:center; color:#666666; text-decoration:none; vertical-align:middle; background-color:white;}
.pagination-wrap a:hover{color:black; font-weight:bold; background-color:#f7f7f7;}
.pagination-wrap a.pg_arr{font-size:0; line-height:0; overflow:hidden; text-indent:-999; background-image:url('/images/hakdo/common/pagination.png'); background-repeat:no-repeat;}
.pagination-wrap a.pg_first{background-position:0 0;}
.pagination-wrap a.pg_prev{background-position:-40px 0;}
.pagination-wrap a.pg_next{background-position:-80px 0;}
.pagination-wrap a.pg_last{background-position:-120px 0;}
.pagination-wrap .pagination-desktop{display:inline-block; margin:0 auto; padding-left:1px; margin:2rem;}
.pagination-wrap .pagination-desktop a.pg_active{background-color:#96714f; color:white; border:1px solid #96714f;}
.pagination-wrap .pagination-mobile{display:inline-block; margin:0 auto; padding-left:1px; margin:1rem;}
.pagination-wrap .pagination-mobile .pg_now{display:inline-block; overflow:hidden; width:80px; height:40px; border:1px solid #dedede; line-height:37px; margin:0 0 0 -1px !important; padding:0 !important; text-align:center; color:#666666; text-decoration:none; vertical-align:middle;}
@media (min-width: 700px) {
  .pagination-wrap .pagination-mobile{display:none !important;}
}
@media (max-width: 699px) {
  .pagination-wrap .pagination-desktop {display:none !important;}
}