/* ======== 헤더 ======== */
.hd_wrap {width: calc(100% - 120px); margin: 40px auto 60px;}
header {padding: 20px 50px; background-color: #fff; border-radius: 15px; box-shadow: 0 0 20px #EAE7E0; display: flex; align-items: center; justify-content: space-between;}
header h1 {display: flex; align-items: center; gap: 12px;}
header h1 span {font-size: 18px; color: #555; font-weight: 700;}

.hd_btn {display: flex; align-items: center; gap: 10px;}
.hd_btn button {display: flex; align-items: center; gap: 8px; padding: 10px 25px; border-radius: 50px;}
.hd_btn button i {display: block; width: 15px; height: 15px;}
.hd_btn button span {font-size: 16px; font-weight: 600;}
.hd_btn .info {background-color: #fff; border: 1px solid #9e5f5e;}
.hd_btn .info i {background: url(../img/icon_info.png) no-repeat center/contain;}
.hd_btn .info span {color: #9e5f5e;}
.hd_btn .logout {background-color: #f1f1f1; transition: all .1s;}
.hd_btn .logout i {background: url(../img/icon_logout.png) no-repeat center/contain;}
.hd_btn .logout span {color: #888; transition: all .1s;}
.hd_btn .logout:hover {background-color: #e5e5e5;}
.hd_btn .logout:hover span {color: #555;}

header .btn_open {display: none; width: 30px; height: 30px; background: url(../img/icon_menu.png) no-repeat center/contain;}



/* 버거메뉴 */
.burger {position: absolute; top: 90px; right: 16px; z-index: 50; display: none;}
.burger ul {display: flex; padding: 15px; border-radius: 10px; box-shadow: 2px 2px 20px #EAE7E0; flex-direction: column; width: 150px; background-color: #fff; border: 1px solid #EAE7E0;}
.burger ul li {width: 100%; padding-bottom: 8px; border-bottom: 1px solid #EAE7E0; font-size: 15px; font-weight: 600; text-align: center;}
.burger ul li:last-child {border-bottom: none; padding-bottom: 0; padding-top: 8px;}



/* 탑버튼 */
.top_btn {position: fixed; bottom: 5%; right: 60px; width: 60px; height: 60px; background: url(../img/top_btn.jpg) no-repeat center/contain; cursor: pointer; display: none; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px #48363630; z-index: 20;}



/* ======== 모달 ======== */
.modal {position: fixed; width: 100%; height: 100vh; background-color: #00000030; z-index: 500; top: 0; left: 0;}
.modal .modal_wrap {position: absolute; top: calc(50% - 65px); left: 50%; transform: translate(-50%, -50%); width: 30vw;}
.modal_box {display: flex; flex-direction: column; align-items: flex-end; gap: 20px;}
.md_close {width: 45px; height: 45px; background: url(../img/md_close.png) no-repeat center/contain; cursor: pointer;}


.modal_con {background-color: #fff; padding: 40px 60px; border-radius: 15px; box-shadow: 0 0 20px #00000010; width: 100%; display: flex; flex-direction: column; gap: 30px; align-items: center;}
.modal_con .md_tit {font-size: clamp(15px, 1.8vw, 20px); color: #666; font-family: 'LGSmHaTSB';}
.modal_con dl {display: flex; flex-direction: column; width: 100%; align-items: center; gap: 10px;}
.modal_con dl dt {font-size: clamp(16px, 2vw, 20px); font-weight: 700; text-align: center;}
.modal_con dl dd {font-size: clamp(14px, 1.5vw, 15px); text-align: center; color: #555;}
.modal_con .btn_box {padding-top: 10px; gap: 10px;}
.modal_con .btn_box button {width: 50%;}

.modal.info .modal_con .btn_box {justify-content: center;}








/* ======== 1440px ======== */
@media screen and (max-width: 1440px) {
    /* 헤더 */
    .hd_wrap {width: calc(100% - 32px);}
    header {padding: 20px 30px;}
    header .logo {width: 60px;}


    /* 모달 */
    .modal .modal_wrap {width: 40vw;}
}


/* ======== 1280px ======== */
@media screen and (max-width: 1280px) {
    .top_btn {right: 16px; width: 50px; height: 50px; bottom: 3%;}

    .md_close {width: 40px; height: 40px;}

}


/* ======== 1080px ======== */
@media screen and (max-width: 1080px) {
    /* 헤더 */
    header {padding: 15px 20px;}
    .hd_btn {gap: 6px;}
    .hd_btn button {padding: 8px 20px; gap: 6px;}
    .hd_btn button span {font-size: 15px;}


    /* 모달 */
    .modal .modal_wrap {width: 60vw;}
    .modal_box {gap: 10px;}
    .modal_con {gap: 20px; padding: 30px 40px;}
    .modal_con dl {gap: 5px;}
}



/* ======== 750px ======== */
@media screen and (max-width: 750px) {
    /* 헤더 */
    .hd_wrap {margin: 25px auto 30px;}
    header {padding: 12px 16px;}
    header h1 {gap: 5px; row-gap: 4px; flex-wrap: wrap; width: calc(100% - 50px);}
    header .logo {width: 50px;}
    header h1 span {font-size: 15px;}
    .hd_btn {display: none;}
    header .btn_open {display: block;}


    /* 모달 */
    .modal .modal_wrap {width: 95vw;}
    .modal_con {padding: 30px;}
    .modal_con .btn_box {padding-top: 0; gap: 6px;}
}



/* ======== 450px ======== */
@media screen and (max-width: 450px) {
    /* 헤더 */
    /* header h1 {flex-direction: column; align-items: flex-start;} */
    header .logo {width: 36px;}
    header h1 span {font-size: 14px;}

}



/* ======== 350px ======== */
@media screen and (max-width: 350px) {
    .burger {top: 105px;}
    :lang(viet) .hd_btn button {padding: 8px 15px;}
}