/* font */
@font-face {
    font-family: 'pretendard';
    font-weight: 400;
    src: url(/main/css/font/Pretendard-Regular.otf);
}
@font-face {
    font-family: 'pretendard';
    font-weight: 500;
    src: url(/main/css/font/Pretendard-Medium.otf);
}
@font-face {
    font-family: 'bm';
    font-weight: 400;
    src: url(/main/css/font/BMDOHYEON_ttf.ttf);
}
@font-face {
    font-family: 'nanum';
    font-weight: 400;
    src: url(/main/css/font/NanumGothic.ttf);
}
@font-face {
    font-family: 'nanum';
    font-weight: 500;
    src: url(/main/css/font/NanumGothicBold.ttf);
}
@font-face {
    font-family: 'nanum';
    font-weight: 600;
    src: url(/main/css/font/NanumGothicExtraBold.ttf);
}
@font-face {
    font-family: 'blogger';
    font-weight: 500;
    src: url(/main/css/font/BloggerSans-Medium.otf);
}




/* 공통 */
body { position: relative; width: 2160px; height: 3840px;}
body,
a,
button { font-family: 'nanum'; font-weight: 400;}

/* 전체 스크롤바 스타일 */
.scrollbox::-webkit-scrollbar {
    width: 10px; /* 스크롤바 너비 */
    height: 10px; /* 가로 스크롤바 높이 */
}

/* 스크롤바 트랙 */
.scrollbox::-webkit-scrollbar-track {
    margin: 0 50px;
    background: transparent; /* 트랙 배경색 */
    border-radius: 10px; /* 둥근 모서리 */
}

/* 스크롤바 슬라이더 */
.scrollbox::-webkit-scrollbar-thumb {
    background-color: rgb(180, 180, 180) ;/* 그라데이션 색상 */
    border-radius: 10px; /* 둥근 모서리 */
    border: 2px solid #f0f0f0; /* 외곽선으로 분리 효과 */
}

/* 스크롤바 슬라이더 Hover */
.scrollbox::-webkit-scrollbar-thumb:hover {
    background-color: #000000 ;
}



/* footer */
footer { position: absolute; bottom: 0; left: 0; display: flex; align-items: center; padding:  0 65px 0 95px; width: 100%; height: 200px; border-top: 3px solid #B8B8B8; background-color: #fff; box-sizing: border-box;}
footer .logo_gm { margin-right: 100px;}
footer .time { position: absolute; right: 55px; top: 55px; display: flex; align-items: center; font-family: 'pretendard'; line-height: 1; color: #000;}
footer .time i { margin-right: 30px; font-size: 55px; font-weight: 400;}
footer .time em { font-size: 110px; font-weight: 500;}

/* index */
.index_top { position: relative;}
.index_top .img_zone { height: 410px;}
.index_top span { position: absolute; left: 560px; bottom: 0; }
.index_center .ad .img_zone { height: 3055px; width: 2160px; background-color: gray;}
.index_btm footer { height: 375px;}


/* main */
main { position: relative;}
.main .bg_char { position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%);}
.main .wrap { position: absolute; left: 0; top: 0; padding-top: 380px; width: 100%; height: 100%; text-align: center; box-sizing: border-box;}
.main .logo { text-align: center;}
.list_main { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; margin-top: 410px; margin-bottom: 270px; width: 1900px; }
.list_main a { position: relative; display: flex; flex-direction: column; margin-bottom: 80px; width: 600px; height: 670px; }
.list_main a div { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 40px 0 80px 40px; width: 100%; height: 100%; font-size: 75px; color: #fff; box-sizing: border-box;}
.list_main a div .img_zone { margin-bottom: 50px;}
.list_main li:nth-child(2) .img_zone { margin-left: 40px;}
.list_main li:nth-child(4) .img_zone { margin-left: -40px;}
.list_main a div .txt_zone { position: relative; font-family: 'bm'; font-size: 75px; height: 200px; line-height: 97px; text-align: center;}
.list_main a div em:nth-child(1) { color: #000; }
.list_main a div em:nth-child(2) { display: none; position: absolute; left: 0; top: 0; color: #000;}
.main p { display: inline-block; padding: 0 140px; line-height: 150px; height: 140px; border-radius: 70px; font-size: 70px; background-color: #000; color: #fff; font-family: 'bm';}



/* sub */
.sub main { display: flex; padding-bottom: 200px; height: 100%; box-sizing: border-box;}
.container { position: relative; display: flex; flex-direction: column; width: calc( 100% - 570px ); }
.container::before { position: absolute; content: ""; left: 50%; bottom: 10px; transform: translateX(-50%); width: 840px; height: 320px; background: url(../images/char_sub_01.gif) no-repeat center / 100% auto;}
.container .header { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 200px 95px 30px 0; margin-bottom: 95px; box-sizing: border-box; }
.container .header h1 { position: relative; padding: 10px 70px 0 150px; font-size: 75px; line-height: 115px; font-family: 'bm'; font-weight: 400; background-color: #FDD000;}
.container .header h1 em { color: #000;}
.container .header h1 img { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 20px; height: 200px; width: 200px; object-fit:contain;}
.container .header a { display: flex; align-items: center; padding: 10px 40px 0 17px; height: 115px; border-radius: 58px; background-color: #FD5626; color: #fff; font-family: 'bm'; font-size: 50px; box-shadow: 3px 3px 6px #00000029; box-sizing: border-box; }
.container .header a .img_zone { margin-top: -10px; margin-right: 25px;}
.contents { position: relative; box-sizing: border-box;}
.contents .img_zone { background-color: lightgray;}
.snb { padding-top: 230px; width: 570px; background: url(../images/bg_snb.png); text-align: center; box-sizing: border-box;}
.snb .btn_group { margin: 180px 0 115px 0; display: flex; align-items: center; justify-content: center;}
.snb .btn_group a,
.snb .btn_group button { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 10px; width: 230px; height: 230px; border: 9px solid #FDD000; border-radius: 60px; font-size: 40px; color: #FDD000; font-family: 'blogger'; background: #192B3B; box-shadow: 3px 3px 6px #00000080; box-sizing: border-box;}
.snb .btn_group a img,
.snb .btn_group button img { margin-bottom: 10px;}
.snb ul li { margin-bottom: 40px; text-align: left;}
.snb ul li a { display: flex; align-items: center; justify-content: space-between; padding: 0 25px 0 50px; width: 520px; height: 300px; border-radius: 0 60px 60px 0; background: transparent linear-gradient(180deg, #9DADBA 0%, #5A646E 100%) 0% 0% no-repeat padding-box; box-shadow: inset -5px -5px 20px #00000033, 5px 5px 20px #00000029; font-family: 'bm'; font-size: 54px; letter-spacing: 1.35px; line-height: 70px; color: #fff; box-sizing: border-box;}
.snb ul li.active a { background: transparent linear-gradient(180deg, #FFE458 0%, #FFC400 100%) 0% 0% no-repeat padding-box; box-shadow: inset -5px -5px 20px #00000033, 5px 5px 20px #00000029; color: #000;}
.slideControl { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center;}
.slideControl .btn_prev { margin: 0 75px; width: 100px; height: 100px; background: url(../images/btn_prev.png) no-repeat center / 100% auto;}
.slideControl .btn_prev.active { background: url(../images/btn_prev_active.png) no-repeat center / 100% auto;}
.slideControl .btn_next { margin: 0 75px; width: 100px; height: 100px; background: url(../images/btn_next.png) no-repeat center / 100% auto;}
.slideControl .btn_next.active { background: url(../images/btn_next_active.png) no-repeat center / 100% auto;}
.slideControl ul { display: flex;}
.slideControl ul li button { margin: 0 14px; width: 24px; height: 24px; border-radius: 50%; background-color: #C9C9C9; }
.slideControl ul li.active button { background-color: #FD5626;}

/* sub_01 */
.contents .menu { height: 1755px;}
.contents .menu .list { display: flex; flex-wrap: wrap; margin: 0 auto; align-content: flex-start; width: 1370px;}
.contents .menu .list li button { display: flex; flex-direction: column; align-items: center; margin: 0 25px 35px; width: 405px; height: 490px; }
.contents .menu .list li button .img_zone { position: relative; margin-bottom: 25px; width: 405px; height: 355px; border-radius: 65px; box-shadow: 3px 3px 5px #00000040; overflow: hidden;}
.contents .menu .list li button .img_zone::before { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/frame.png);}
.contents .menu .list li button .img_zone img { padding: 10px; width: 100%; height: 100%; object-fit: cover; box-sizing: border-box;}
.contents .menu .list li button em { font-size: 40px; font-weight: 600; line-height: 55px;}



/* sub_02 */
.contents .poster { position: relative; height: 1875px;}
.contents .poster .list li .img_zone { margin: 0 auto; width: 1200px; height: 1700px; box-shadow: 3px 3px 20px #00000040; overflow: hidden;}
.contents .poster .list li .img_zone img { width: 100%; height: 100%; object-fit: cover;}


/* sub - search */
.sub.search .header { padding-top: 360px;}
.sub.search .contents .header { padding-top: 350px;}
.sub.search .contents { position: relative; height: 1265px; box-sizing: border-box;}
.sub.search .slideControl { bottom: 90px;}
.search_info { padding-top: 320px; width: 100%; text-align: center; box-sizing: border-box;}
.search_info p { margin-top: 60px; font-size: 70px; font-weight: 600;}
.keyboard { display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 1760px; background-color: #F0F0F0;}
.keyboard div { padding: 55px 0 60px; text-align: center;}
.keyboard .inputBox { position: relative; display: inline-block; padding-left: 150px; width: 1190px; height: 150px; border-radius: 40px; border: 5px solid #CACACA; background-color: #fff; box-sizing: border-box; text-align: left;}
.keyboard .inputBox::after { position: absolute; content: ""; left: 42px; top: 50%; transform: translateY(-50%); width: 72px; height: 72px; background: url(../images/ico_search_2.png) no-repeat center / 100% auto;}
.keyboard input[type="text"] { width: 100%; line-height: 150px; font-size: 50px; background-color: transparent; font-weight: 500;}
.keyboard input[type="text"]::placeholder { font-size: 50px; color: #919191;}
.keyboard .btn_delete { position: relative; margin-left: 25px; width: 150px; height: 150px; border-radius: 40px; border: 6px solid #E2AB21; background: transparent linear-gradient(180deg, #FFDA5C 0%, #FFB900 100%) 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000029;}
.keyboard .btn_delete:after { position: absolute; content: ""; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; background: url(../images/ico_delete.png) no-repeat center / 100% auto;}
.keyboard ul { display: flex; flex-wrap: wrap; width: 1390px;}
.keyboard ul li { margin: 7px;}
.keyboard ul li button { width: 140px; height: 140px; line-height: 128px; border-radius: 40px; border: 6px solid #1E4B6E; background: transparent linear-gradient(180deg, #658AAA 0%, #41617F 100%) 0% 0% no-repeat padding-box; font-size: 76px; color: #fff; box-shadow: inset -5px -5px 8px #00000029, 3px 3px 10px #0000004D;}


/* popup */
.bg_popup { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; backdrop-filter: blur(21px); opacity: .8; -webkit-backdrop-filter: blur(21px); }
.popup { z-index: 1; position: absolute; content: ""; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1150px; background-color: #fff; border-radius: 80px; text-align: left; color: #000;}
.popup .img_zone { background-color: lightgray;}
.popup .popup_mainImg { margin-bottom: 10px; width: 100%; height: 640px; border-radius: 80px 80px 0 0; overflow: hidden;}
.popup .img_zone img { width: 100%; height: 100%; object-fit: cover;}
.popup_contents { position: relative; padding: 0 95px;}
.popup_contents h2 { position: relative; padding: 75px 0 40px; font-size: 60px; font-family: 'bm'; font-weight: 400;}
.popup_contents h2 { width: 800px; line-height: 85px; }
.popup_contents h2 img { position: absolute; bottom: 30px; padding-left: 10px; height: 120px; }
.popup_contents p { max-height: 260px; font-size: 38px; line-height: 64px; overflow-y: scroll;}
.popup_contents table { margin: 100px 0 75px; font-size: 38px;}
.popup_contents tr { font-size: 38px;}
.popup_contents th { width: 295px; font-weight: 700; text-align: left; vertical-align: top;}
.popup_contents td { padding-bottom: 37px; font-weight: 500; line-height: 50px;}
.popup_contents .btn_map { margin-bottom: 70px; width: 100%; height: 160px; border-radius: 80px; font-size: 52px; font-family: 'bm'; background: transparent linear-gradient(180deg, #FFE458 0%, #FFC400 100%) 0% 0% no-repeat padding-box; box-shadow: inset -5px -5px 20px #00000033, 5px 5px 20px #00000029;}
.popup .menu { border-top: 4px solid #EAEAEA; margin-bottom: 45px; }
.popup .menu h3 { margin: 75px 95px 45px; font-size: 47px; font-family: 'bm'; font-weight: 400;}
.popup .menu ul { display: flex; padding: 0 60px 10px 60px; overflow-x: scroll; box-sizing: border-box;}
.popup .menu li { margin-right: 40px; width: 355px;}
.popup .menu li .img_zone { margin-bottom: 32px; width: 355px; height: 235px;}
.popup .menu li em { margin-left: 20px; display: block; font-size: 38px; font-weight: 600;}
.popup .menu li i { margin-left: 20px; font-size: 36px; font-weight: 500; color: #787878;}
.popup .btn_group { position: absolute; right: 50px; top: 50px;}
.popup .btn_group button { margin-left: 20px;}
.popup .btn_close { width: 90px; height: 90px;}
.popup .map { height: 1250px; border-radius: 0 0 80px 80px; border-top: 4px solid #EAEAEA; background-color: lightgray; overflow: hidden; box-sizing: border-box;}
.popup .map_point { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: fit-content;}
.popup .map_point div { width: 57px; height: 74px; background: url(../images/ico_position.png) no-repeat center / 100% auto;}
.popup .map_point span { position: relative; display: inline-block; margin-top: 20px; height: 80px; width: max-content; padding: 0 100px 0 50px; line-height: 90px; font-family: 'bm'; font-size: 40px; border-radius: 40px; background-color: #FDD000; box-shadow: 3px 3px 6px #00000066;}
.popup .map_point span::before { position: absolute; content: ""; right: 0; bottom: 0px; width: 100px; height: 100px; background: url(../images/ico_b01.png) no-repeat center / auto 100%;}