@charset "utf-8";

/* 이사만루 폰트 정의 */
@font-face {
    font-family: 'Isamanru';
    src: url('/css/fonts/esamanru Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Isamanru';
    src: url('/css/fonts/esamanru Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Isamanru';
    src: url('/css/fonts/esamanru Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/*사용할 폰트 설정*/
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
.mont{font-family: "Montserrat", serif;font-style: normal;} 

/*헤더푸터 추가 수정*/
#hd{background: white; margin-bottom: 160px; width: 100% !important; padding: 0 50px 0; border-bottom: 1px solid #ddd;}
#hd .hd_login{position: unset; display: inline-block;}
#hd .hd_login button{border: 0; background: unset;}
#hd .hd_login a{color: unset;}
#hd .hd_login .tnb_admin{background: black; color: white;margin: 0;}
#hd .hd_login .tnb_admin a{padding: 0 12px 0; line-height: 36px; display: block;}
#hd .hd_login li,#hd .hd_login button{margin: 0 0 0 16px; padding: 0; line-height: 36px; border: 0;}

/* 회원 드롭다운 메뉴 */
#hd .hd_login .member_dropdown{position: relative;}
#hd .hd_login .member_dropdown_btn{border: 0; background: unset; padding: 0; cursor: pointer; margin: 0 0 0 16px; line-height: 36px;}
#hd .hd_login .member_dropdown_menu{display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; background: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); min-width: 120px; z-index: 1000; padding: 8px 0;}
#hd .hd_login .member_dropdown.active .member_dropdown_menu{display: block;}
#hd .hd_login .member_dropdown_menu li{margin: 0; padding: 0; border: 0; border-left: 0; line-height: 1;}
#hd .hd_login .member_dropdown_menu li a{display: block; padding: 10px 16px; color: #333; text-decoration: none; font-size: 14px; transition: background-color 0.2s;}
#hd .hd_login .member_dropdown_menu li a:hover{background-color: #f5f5f5; color: #3AB6F3;}
#hd #hd_wrapper{height: 80px; padding-top: 24px; display: flex; justify-content: space-between; padding-bottom: 20px; width: 100%;}
#hd #logo{padding: 0;}
#hd nav#gnb{display: flex;width: 80%;align-items: center;margin-top: 24px;margin-top: -22px;margin-bottom: -20px;}
#hd nav#gnb .gnb_wrap{width: 100%;}
#hd nav#gnb .gnb_wrap #gnb_1dul{font-size: 15px;float: unset;display: flex;line-height: 80px;gap: 4%;border: 0;justify-content: center;}
#hd nav#gnb .gnb_wrap #gnb_1dul .bg{display: none;}
#hd nav#gnb .gnb_wrap #gnb_1dul .gnb_1dli{text-align: center; justify-content: center;}
#hd nav#gnb .gnb_wrap #gnb_1dul .gnb_1da{padding: 0; font-family: 'Isamanru', 'Pretendard', 'Malgun Gothic', dotum, sans-serif; font-weight: 300;}
#hd #hd_wrapper:after,#gnb ul:after{display: none;}
a.gnb_2da{color: black !important; line-height: 1; padding: 12px 16px 12px;}
#hd nav#gnb .gnb_wrap #gnb_1dul .gnb_1dli:has(.gnb_2da.active) a.gnb_1da{color: #3AB6F3; font-weight: bold;}
/* 서브메뉴를 메뉴바 바로 아래에 붙이고, 빈 공간을 서브메뉴 내부 padding으로 채움 */
.gnb_2dul{
    width: 214px; 
    margin-left: -16px;
    top: 100% !important; /* 메뉴바 바로 아래에 붙임 */
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.gnb_2dul .gnb_2dul_box{
    box-shadow: none;
    border:1px solid #ddd; 
    padding: 8px 0; /* 상단 여백 줄임 */
    background: white;
    margin-top: 0;
}
#gnb .gnb_1dli:hover > a {color:#3AB6F3; font-weight: bold;}
#ft .aside_btns{position: fixed; right: 24px; bottom: 80px;width: 100px; z-index: 90; font-size: 16px; text-align: center;}
#ft .aside_btns a{display: block; border-radius: 8px; background: white; border: 1px solid #ddd; line-height: 1;padding: 16px 0 16px;}
#ft .aside_btns a img{margin-bottom: 8px;}
#ft .aside_btns a b{display: block; line-height: 1; margin-bottom: 4px; font-weight: bold;}
#ft .aside_btns #top_btn2{border-radius: 8px; font-weight: bold; color: white; background: #3AB6F3; line-height: 40px; height: 40px; cursor: pointer; margin-top: 8px;}

/*디자인페이지 공통*/
.subpage_top_title{padding: 0 calc((100% - 1512px) / 2) 0; line-height: 1; height: calc(100vh - 240px); position: relative; opacity: 0; animation: fadeUp .7s ease-out forwards;}
.subpage_top_title .title1{color: #3AB6F3; font-size: 22px; font-weight: 700; margin-bottom: 28px;}
.subpage_top_title .title2{font-size: 80px; font-weight: 800; margin-bottom: 28px;}
.subpage_top_title .title3{font-size: 18px;}
#container_wr:has(.subpage_top_title){width: 100%;}
.sub_container{width: 1512px; margin: 160px auto 0;}
.sub_container .main_title{line-height: 1; font-weight: bold; font-size: 52px; margin-bottom: 40px;}

.subpage_top_title::after{content: 'SCROLL'; font-weight: bold; bottom: 24px; display: inline-block; left: 50%; position: absolute; transform: translateX(-50%); background: url(/img/icon_scroll.png) no-repeat center bottom; padding-bottom: 16px;}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*전체메뉴*/
#gnb_all{top: 81px; z-index: 1002; border: 0; padding: 40px 50px 40px;}
#gnb_all_bg{z-index: 1001; background: rgba(0,0,0,0); box-shadow: 0 8px 10px rgba(0,0,0,0.1);}
#gnb_all h2{display: none;}
#gnb_all .gnb_al_li .gnb_al_a{color: black; font-size: 22px;}
#gnb_all .gnb_al_li li a{color: #333; font-size: 18px; padding: 8px 0 8px;transition: transform 0.2s ease-out, color 0.2s ease-out;display: inline-block;}
#gnb_all .gnb_al_li li a:hover{transform: translateX(5px); color: #3AB6F3; padding-left: 8px;}
#gnb_all .gnb_al_li{padding: 0; border: 0;}
#gnb_all .gnb_al_li:first-child{padding-bottom: 40px;}
#gnb_all button.gnb_close_btn{position: absolute; right: 26px; top: -71px; font-weight: 300; display: inline-block; width: 72px; height: 72px; border: 1px solid #ddd; border-bottom: 0; font-size: 40px; line-height: 1; padding-bottom: 13px; border-radius: 8px 8px 0 0; background: white;}

#gnb_all .gnb_al_ul{display: flex; flex-wrap: wrap;}

/* 1600px 이하일때 */
@media (max-width: 1600px){
    #hd nav#gnb .gnb_wrap #gnb_1dul{display: none;}
    #hd nav#gnb{width: auto;}
    #hd, #wrapper, #ft{min-width: unset;}
    #container div.subpage_top_title{padding: 0 50px 0;}
    .sub_container{padding: 0 50px 0; width: 100%;}
    #gnb_all button.gnb_close_btn{right: 16px;}
    
}

/* 1200px 이하일때 */
@media (max-width: 1200px){
    #gnb_all .gnb_al_ul .gnb_al_li{width: 25%;}
}

.mobile{display: none;}

/* 900px 이하일때 */
@media (max-width: 900px){
    #hd{padding: 0 16px 0;}
    #ft{padding: 60px 16px 60px; margin-top: 120px;}
    #ft img{width: 120px;}
    #ft h2{font-size: 18px;}
    #ft_wr{width: 100%; word-break: keep-all;}
    #ft_link{font-size: 16px;flex-wrap: wrap; gap: 12px;}
    #ft_link a{margin-right: 8px;}
    #ft .aside_btns{bottom: 24px; width: 40px;}
    #ft_company,#ft_copy{font-size: 16px; margin: 16px 0 0;}
    #ft .aside_btns a{display: none;}
    #ft .aside_btns #top_btn2{font-size: 0;}
    #ft .aside_btns #top_btn2::before{content: '↑'; font-size: 16px;}
    div#hd{margin-bottom: 80px;}
    body:has(#bo_w) div#hd{margin-bottom: 80px !important;}
    #container div.subpage_top_title{height: calc(100vh - 160px);padding: 0 16px 0;}
    #container .subpage_top_title div.title1{font-size: 20px; margin-bottom: 16px;}
    #container .subpage_top_title div.title2{font-size: 64px; margin-bottom: 20px;}
    #container .subpage_top_title div.title3{line-height: 1.2; word-break: keep-all;}
    #container .subpage_top_title.bg01{background-size: auto 70% !important;}
    .sub_container{padding: 0 16px 0; margin-top: 120px;}
    .sub_container .main_title{font-size: 40px; line-height: 1.2;}
    #container div.subpage_top_title{background-size: auto 70% !important;}

    #gnb_all{padding: 0;}
    #gnb_all .gnb_al_ul{flex-direction: column;}
    #gnb_all .gnb_al_ul .gnb_al_li{padding-bottom: 0; min-height: unset; line-height: 32px;}
    #gnb_all .gnb_al_li .gnb_al_a{margin-bottom: 0; font-size: 18px;}
    #gnb_all .gnb_al_ul .gnb_al_li{width: 100%;}
    

    .gnb_al_ul > .gnb_al_li > ul{display: none;padding: 12px;}
    .gnb_al_ul > .gnb_al_li > a{display: block;padding: 12px;background: #f7f7f7;border-bottom: 1px solid #ddd;}
    .gnb_al_ul > .gnb_al_li > a:after{content: "▼";float: right;font-size: 12px; opacity: .5; line-height: 30px;}
    .gnb_al_ul > .gnb_al_li.active > a:after{content: "▲";}

    .mobile{display: block;}
}

/* 500px 이하일때 */
@media (max-width: 500px){
    #container .subpage_top_title div.title2{font-size: 52px;}
    #container .subpage_top_title div.title3{font-size: 16px;}
    #ft{margin-top: 100px;}
    .sub_container .main_title{margin-bottom: 32px; font-size: 32px;}
    .sub_container{margin-top: 100px;}
}

/* 400px 이하일때 */
@media (max-width: 400px){
    #container .subpage_top_title div.title1{font-size: 18px;}
    #container .subpage_top_title div.title2{font-size: 40px; margin-bottom: 16px;}
    .subpage_top_title::after{font-size: 16px;}
    #container .subpage_top_title.bg01{background-size:auto 60% !important}
    #container div.subpage_top_title{background-size:auto 60% !important}
}