@charset "utf-8";
/*header*/
#header{position:absolute; left:0; top:0; width:100%; height:80px; z-index:10; background-color:#111;display:flex;padding:0 20px;align-items:center;}
.logo{flex:1;display:flex;justify-content:flex-start;}
.cem{flex:1;display:flex;justify-content:flex-end;}
.logo a{display:block;font-size:0;line-height:0;overflow:hidden;background-image:url('/images/hakdo/common/h1_logo.png'); background-repeat:no-repeat;background-size:100% auto;width:360px;height:56px;}
.cem a{display:block;font-size:0;line-height:0;overflow:hidden;background-image:url('/images/hakdo/common/logo.png'); background-repeat:no-repeat;background-size:100% auto;width:250px;height:50px;}

/*visual*/
.visual{position:relative; width:100%; height:1200px; background:url(/images/hakdo/main/SCN-1.jpg) no-repeat; transition:all 0.3s ease 0s;}
.visual .title{display:flex; justify-content:center; align-items:center; flex-direction:column; position:absolute; top:100px; left:20px; }
.visual .title h2{width:566px; height:199px; background:url(/images/hakdo/main/title.png) no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
.visual .link{display:flex; gap:50px;}
.visual .link .txt span{display:block; color:var(--beige); font-size:24px; font-weight:600;}
.visual .link .txt p{color:#fff; font-size:40px; font-weight:600;}
.visual .link .btn_box{display:flex; align-items:center; gap:10px;}
.visual .link .btn_box button{display:block; position:relative; width:135px; height:50px; color:#444; font-size:18px; font-weight:600; border-radius:25px; background:#fff; cursor:pointer; overflow:hidden; z-index:1; transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.visual .link .btn_box button.btn_play{color:var(--brown); background:var(--beige);}
.visual .link .btn_box button{font-size:18px; font-weight:600;}
.visual .link .btn_box button:not(.btn_play, .sound):hover{background:#000; color:#fff; transform:translateY(-5px); box-shadow:0 10px 20px rgba(0, 0, 0, 0.15);}
.visual .link .btn_box button.btn_play:hover{background:var(--brown); color:var(--beige); transform:translateY(-5px); box-shadow:0 10px 20px rgba(0, 0, 0, 0.2);}
.visual .link .btn_box button:active{transform:translateY(-1px); box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);}
.visual .link .btn_box button.sound{width:50px; height:50px; background-image:url(/images/hakdo/main/sound-off.png); background-repeat:no-repeat; background-size:cover; text-indent:100%; overflow:hidden; white-space:nowrap;}
.visual .link .btn_box button.sound:hover,
.visual .link .btn_box button.sound.active{background-image:url(/images/hakdo/main/sound-on.png);}

.visual .title h2,
.visual .link .txt span,
.visual .link .txt p,
.visual .link .btn_box{opacity:0;}


.content{width:100%; height:100%; background:url(/images/hakdo/main/bg.jpg) no-repeat 50% 0; background-size:cover;}
.menu_list{padding-top:150px;}
.menu_list ul{display:flex; justify-content:center; align-items:center; flex-wrap:wrap;gap:30px 0;}
.menu_list li{flex:0 0 33.33%;padding:0 15px;}
.menu_list a{display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; width:100%; height:280px; text-align:center; border-radius:20px; background:linear-gradient(to top, #F0E2CE 0%, rgba(150, 116, 98, 0.6) 38%); overflow:hidden;
transition:transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, background-blend-mode 0.4s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 1;}
.menu_list a:before{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50%; background-image:inherit; background-size:cover; mix-blend-mode:multiply; opacity:1; filter:grayscale(100%); z-index:1; transition:transform 0.6s ease; opacity:0.4; z-index:-1;}
.menu_list a i{display:block;background-image:url(/images/hakdo/main/icon_menu.png);background-repeat:no-repeat;background-size:100% auto; width:100px;height:100px;margin-bottom:15px;}
.menu_list .menu01 i{background-position:0 0;}
.menu_list .menu02 i{background-position:0 -100px;}
.menu_list .menu03 i{background-position:0 -200px;}
.menu_list .menu04 i{background-position:0 -300px;}
.menu_list .menu05 i{background-position:0 -400px;}
.menu_list .menu06 i{background-position:0 -500px;}
.menu_list .menu07 i{background-position:0 -600px;}
.menu_list .menu01 a:before{background-image:url(/images/hakdo/main/menu01.jpg);}
.menu_list .menu02 a:before{background-image:url(/images/hakdo/main/menu02.jpg);}
.menu_list .menu03 a:before{background-image:url(/images/hakdo/main/menu03.jpg);}
.menu_list .menu04 a:before{background-image:url(/images/hakdo/main/menu04.jpg);}
.menu_list .menu05 a:before{background-image:url(/images/hakdo/main/menu05.jpg);}
.menu_list .menu06 a:before{background-image:url(/images/hakdo/main/menu06.jpg);}
.menu_list .menu07 a:before{background-image:url(/images/hakdo/main/menu07.jpg);}
.menu_list h3{position:relative; color:#fff; font-size:24px; font-weight:700; z-index:2; transition:transform 0.4s ease; text-shadow:0 2px 10px rgba(0,0,0,0.3);}
.menu_list a:hover{transform:translateY(-10px); box-shadow:0 20px 30px rgba(0,0,0,0.2); background-blend-mode:normal;}
.menu_list a:hover:before{transform: scale(1.1); opacity:1;}
.menu_list a:hover h3{transform: scale(1.05);}
.interview{margin-top:158px; padding-bottom:160px; text-align:center;}
.interview h4{display:inline-flex; flex-direction:column; width:fit-content; margin:0 auto; text-align:left;}
.interview h4 em{color:var(--brown); font-size:22px; font-weight:600;}
.interview h4 span{display:block; font-size:50px; font-weight:600;}

@media screen and (max-width:1480px){
    .inr{width:100%; max-width:100%; padding:0 20px; box-sizing:border-box;}
    .menu_list a{width:100%;}
    .visual{height:950px;}
}
@media screen and (max-width:1280px){
    .menu_list{padding-top:100px;}
    .menu_list h3{font-size:22px;}
    .visual{height:780px;}
    .visual .title h2{width:436px; height:146px; background-size:cover;}
    .visual .link .txt span{font-size:22px;}
    .visual .link .txt p{font-size:35px;}
    .visual .link .btn_box button{width:125px; height:45px;}
    .interview{margin-top:100px; padding-bottom:100px;}
    .interview .list{margin-top:40px;}
    .interview h4 em{font-size:20px;}
    .interview h4 span{font-size:45px;}
    .interview .list .txt{margin-top:20px;}
    .interview .list p{font-size:30px;}
    .interview .list p i{font-size:20px;}
    .interview .list span{font-size:18px;}
    .interview .list em{font-size:17px;}
}
@media screen and (max-width:1024px){
    .visual{height:650px;}
    .visual .title h2{width:326px; height:115px;}
    .visual .link .txt span{font-size:20px;}
    .visual .link .txt p{font-size:32px;}
    .visual .link{margin-top:0;}
    .visual .link .btn_box button{width:125px; height:45px;}
    .visual .link .btn_box button{font-size:17px;}
    .menu_list ul{gap:20px 0;}
    .menu_list li{flex:0 0 33.33%;padding:0 10px;}
    .menu_list li a{height:260px;}
    .interview h4 em{font-size:18px;}
    .interview h4 span{font-size:40px;}
    .interview .list p{font-size:25px;}
    .interview .list p i{font-size:18px;}
    .interview .list span{font-size:17px;}
    .interview .list{flex-direction:column; align-items:normal; margin-top:30px;}
    .interview .list li{margin:20px 0;}
    .interview .list li:first-child{margin-top:0;}
    .interview .list li:last-child{margin-bottom:0;}
    .interview .list a{display:flex; align-items:center; border-radius:20px; background:rgba(255, 255, 255, .2); overflow:hidden;}
    .interview .list .img{flex:0 0 300px;}
    .interview .list .txt{margin-top:0; padding:20px 30px ; box-sizing:border-box;}
}
@media screen and (max-width:768px){
    #header{padding:0 10px;height:60px;}
    .logo a{width:195px;height:30px;}
    .cem a{width:100px;height:20px;}
    .menu_list h3{font-size:18px;}
    .visual{height:500px;}
    .visual .title{top:80px;}
    .visual .link .txt span{font-size:18px;}
    .visual .link .txt p{font-size:30px;}
    .visual .link{flex-direction:column; gap:10px; margin-top:0;}
    .visual .link .btn_box button{width:115px; height:40px;}
    .visual .link .btn_box button{font-size:16px;}
    .interview h4 em{font-size:17px;}
    .interview h4 span{font-size:35px;}
    .interview .list p{font-size:22px;}
    .interview .list p i{font-size:17px;}
    .interview .list span{font-size:16px;}
}
@media screen and (max-width:630px){
    .menu_list ul{gap:10px 0;}
    .menu_list li{flex:0 0 50%;padding:0 5px;}
    .menu_list li a{height:200px;}
    .interview h4 em{font-size:16px;}
    .interview h4 span{font-size:30px;}
    .interview .list{flex-direction:row; flex-wrap:wrap;}
    .interview .list li{width:100%;}
    .interview .list a{flex-direction:column;}
    .interview .list .img{flex:0 0 100%; width:100%;}
    .interview .list .txt{width:100%; padding:20px;}
}
@media screen and (max-width:500px){
    .visual{height:500px;}
    .visual .title h2{width:236px; height:81px;}
    .visual .link .txt span{font-size:17px;}
    .visual .link .txt p{font-size:25px;}
    .visual .link{margin-top:0;}
    .visual .link .btn_box button{font-size:15px;}
    .interview h4 em{font-size:15px;}
    .interview h4 span{font-size:25px;}
}

/* 인터뷰 carousel로 변경(2026-03-09/cw.lee) */
:root {
    --items-per-view: 3; /* 기본 3개 노출 */
}
.carousel-wrapper{max-width:1100px;margin:0 auto;position:relative;padding:20px;user-select:none;/* 드래그 시 텍스트 선택 방지 */}
.carousel-container{overflow:hidden;width:100%;cursor:grab;/* 마우스 커서 스타일 변경 */}
.carousel-container:active{cursor:grabbing;}
.carousel-track{display:flex;padding:0;margin:0;list-style:none;transition:transform 0.4s ease-in-out;}
.carousel-item{flex:0 0 calc(100% / var(--items-per-view));box-sizing:border-box;padding:0 15px;pointer-events:none;/* 스와이프 시 이미지나 내부 요소가 기본 드래그되는 것 방지 */}

.carousel-item a{display:block;text-align:left;width:100%;}
.carousel-item .img{position:relative;width:100%;border-radius:20px;overflow:hidden;webkit-mask-image:-webkit-radial-gradient(white, black);transform:translateZ(0);}
.carousel-item .img:before{content:'';display:block;position:absolute;left:50%;top:50%;width:40px;height:40px;background:url(/images/hakdo/main/play-button.png) no-repeat;transform:translate(-50%, -50%) rotate(0deg);transition:transform 0.8s ease-in-out;z-index:1;}
.carousel-item img{display:block;width:100%;object-fit:cover;transition:all 0.4s ease-in-out;will-change:transform, filter;}
.carousel-item .txt{margin-top:25px;}
.carousel-item p{font-weight:600;font-size:32px;}
.carousel-item p i{color:var(--brown);font-size:22px;font-weight:600;}
.carousel-item span{display:block;margin-top:5px;color:var(--gray);font-size:20px;font-weight:400;}
.carousel-item em{display:inline-block;width:115px;height:40px;margin-top:10px;color:var(--brown);font-weight:600;text-align:center;background:var(--beige);border:1px solid transparent;transition:all 0.3s ease;cursor:pointer;font-size:18px;line-height:40px;border-radius:25px;}
.carousel-item a:hover .img img{filter:brightness(0.7);transform:scale(1.1);}
.carousel-item a:hover .img:before{transform:translate(-50%, -50%) rotate(360deg);}
.carousel-item a:hover em{background:transparent;border-color:var(--brown);color:var(--brown);}

.controls-wrapper{display:flex;justify-content:space-between;align-items:center;margin-top:20px;}
.nav-buttons button, .play-controls button{border:2px solid #555;cursor:pointer;border-radius:50%;margin-right:5px;width:34px;height:34px;transition:all .2s ease-in-out;color:#555;}
.nav-buttons button{line-height:0;font-size:0;overflow:hidden;background-repeat:no-repeat;background-size:60px auto;background-image:url('/images/hakdo/common/prevnext.png');}
.nav-buttons button:hover, .play-controls button:hover{background-color:var(--brown);border:2px solid var(--brown)}
.nav-buttons button.prev{background-position:0 0;}
.nav-buttons button.next{background-position:0 -30px;}
.nav-buttons button.prev:hover{background-position:-30px 0;}
.nav-buttons button.next:hover{background-position:-30px -30px;}
.play-controls button{font-size:18px;line-height:16px;text-align:center;}
.play-controls button:hover{color:white;}

.dots-container{display:flex;gap:8px;}
.dot{width:12px;height:12px;background-color:#ccc;border-radius:50%;border:none;cursor:pointer;padding:0;transition:background-color 0.3s;}
.dot.active{background-color:var(--brown);transform:scale(1.2);}

@media (max-width: 900px) {
    :root {
        --items-per-view: 2;
    }
    .carousel-wrapper{padding:20px 0;}
    .carousel-item{padding:0 10px;}
    .carousel-item .img:before{width:20px;height:20px;background-size:20px auto;}
    .carousel-item .txt{margin-top:15px;}
    .carousel-item p{font-size:26px;}
    .carousel-item p i{font-size:20px;}
    .carousel-item span{font-size:16px;}
    .carousel-item em{width:80px;height:34px;font-size:16px;line-height:34px;}
    .dots-container{display:none;}
}
@media (max-width: 500px) {
    .carousel-item{padding:0 5px;}
    .carousel-item .img:before{width:20px;height:20px;background-size:20px auto;}
    .carousel-item .txt{margin-top:10px;}
    .carousel-item p{font-size:24px;}
    .carousel-item p i{font-size:18px;}
    .carousel-item span{font-size:14px;}
    .carousel-item em{font-size:14px;}
}