@font-face {
    font-family: "Gmarket Sans";
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

img {max-width: 100%;}
.landing_wrap {position: relative}
.landing_wrap .grid_box {max-width: 1240px; padding:0 16px; margin:0 auto;}
.landing_wrap .grid_box h2 {margin-top: -89px; padding:146px 0 40px; font-size:32px; font-weight: 700; text-align: center; color:#363636}
header {position: sticky; top:0; width: 100%; z-index: 99; border-bottom:1px solid #CFCFCF; background: #fff; box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.12), 0px 0px 8px 0px rgba(0, 0, 0, 0.08);}
.navi_btns {display: flex; align-items: center; gap: 40px;}
.navi_btns.mobile {display: none;}
.navi_btns button {position: relative; font-size:20px; color:#333;}
.navi_btns button p {position: absolute; z-index: 9; top:calc(100% + 21px); left:50%; transform: translateX(-50%); padding:12px 16px; border:1px solid #183474; background:#EAF0FF; opacity: 0; pointer-events: none; transition: 0.3s ease-in-out; white-space: nowrap; font-size:17px; font-weight: 700; color:#131313; border-radius: 8px;}
.navi_btns button p:before {content: '';position: absolute; z-index: 2; top:-8px;left: 50%;transform: translateX(-50%);border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 10px solid #EAF0FF;}
.navi_btns button p:after {content: '';position: absolute; z-index: 1; top:-9px;left: 50%;transform: translateX(-50%);border-left: 7.5px solid transparent;border-right: 7.5px solid transparent;border-bottom: 9px solid #183474;}
.navi_btns button:hover, .navi_btns button.active {color:#183474; font-weight: 700;}
.navi_btns button:hover p {opacity: 1; top:calc(100% + 11px);}
.header_content {padding:25px 0; display: flex; justify-content: space-between; align-items: center;}
.header_content h1 {cursor: pointer}
.header_content .login {display: flex; align-items: center; gap: 32px;}
.header_content .login > * {position: relative}
.header_content .login > * + *:before {content:''; display: inline-block; width: 1px; height: 16px; background: #9E9F9F; position: absolute; top:50%; transform: translateY(-50%); left:-16px;}
.header_content .login .parent {font-size:15px; font-weight: 700; color:#505151; display: flex; align-items: center; gap: 4px;}
.header_content .login .parent br {display: none;}
.header_content .login .newtab {display: flex; font-size:15px; font-weight: 700; color:#fff; padding:8px 12px 8px 14px; align-items: center; gap: 4px; border-radius: 999px; background: linear-gradient(90deg, #ED91AE 5.56%, #6A82E3 100%);}
.header_content .login .newtab .pc {display: block;}
.header_content .login .newtab .mo {display: none;}
#scrollTop {position: fixed; z-index: 9; bottom:55px; right: 40px; background: #fff; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid #CFCFCF; box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);}
#scrollTop img {width: 32px;}
footer {}
footer .grid_box {display: flex; justify-content: space-between; align-items: center;}
footer .grid_box .right {display: flex; flex-direction: column; gap: 24px; }
footer .grid_box .right address {font-size:15px; color:#131313; text-align: right; line-height: 150%;}
footer .grid_box .right .phone_address {display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; gap:8px;}
footer .grid_box .right .phone_address .tel {display: flex; align-items: center; gap: 4px;}
footer .grid_box .right .phone_address .tel a {display: flex; align-items: center; font-size:17px; color:#0f5acf; font-weight: 700;}
footer .grid_box .right .phone_address .tel span {font-size:15px; color:#363636;}
footer .grid_box .right .phone_address strong {display: flex; align-items: center; color:#363636; font-size:15px; font-weight: 700;}
footer .grid_box .right .phone_address .top {display: flex; align-items: center; gap: 4px}
footer .grid_box .right .phone_address .top .tel a:before {content:''; display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: #EAF0FF url("../images/ico/ico_phone.svg") no-repeat center }
footer .grid_box .right .phone_address .top .list {display: flex}
footer .grid_box .right .phone_address .top .list strong + strong:before {content:''; display: block; height: 12px; width: 1px; background: #9E9F9F; margin:0 4px;}

.container {position: relative; overflow: hidden; min-height: calc(100vh - 215px - 89px)}
.container:before {content:''; position: absolute; inset: 0; background: linear-gradient(180deg, #F3F3F3 22.76%, #D4E1FF 100%); z-index: -99;}
#tab2, #tab3 {padding-bottom:56px;}


.swiper_area {border-radius: 0 0 40px 40px; position: relative; overflow: hidden;}
.swiper_area .swiper-wrapper {height: auto;}
.swiper_area .swiper-pagination.swiper-pagination-bullets {display: flex; flex-direction: column; top:50%; transform: translateY(-50%); right:44px; bottom:auto; width: min-content; left:auto; gap: 16px;}
.swiper_area .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet {width: 16px; height: 16px; border:1px solid #183474; background: transparent; opacity: 1;}
.swiper_area .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #183474}
.swiper_area .text_box {padding:64px 0 0; height: calc(100lvh - 157px - 270px - 90px); min-height: 640px; margin:0 auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px;}
.swiper_area .text_box h3 {font-size:48px; font-family: "Gmarket Sans"; color:#363636; font-weight: 900; text-align: center;}
.swiper_area .text_box p {font-size:17px; font-family: "Gmarket Sans"; color:#363636; text-align: center;}
.swiper_area .banner_box {display: flex; position: absolute; top:0; left:0; inset: 0; background: url("../images/banner/banner 1-2.png?v=2025092502") no-repeat center / cover; z-index: -1}
/*.swiper_area .banner_box.two {background-image: url("../images/banner/banner 2-2.png")}*/
/*.swiper_area .banner_box.three {background-image: url("../images/banner/banner 3-2.png")}*/

.swiper_area .banner_box:after {content: '';display: block;position: absolute;inset: 0;background: url("../images/banner/banner 1-1.png?v=2025092502") no-repeat bottom center / auto 70%;max-width: 80%;margin: 0 auto;}
.swiper_area .banner_box.two:after {background-image: url("../images/banner/banner 2-1.png?v=2025092502")}
.swiper_area .banner_box.three:after {background-image: url("../images/banner/banner 3-1.png?v=2025092502")}

.info_links {position: relative; margin-top: -36px; padding:72px 0 24px; display: flex; align-items: center; gap: 24px; justify-content: center; overflow: hidden;}
.info_links:before {content:''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(254, 107, 189, 0.60) 2.08%, rgba(0, 143, 209, 0.60) 100%), #FFF;}
.info_links > a {width: 180px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding:24px 16px; border:1px solid #fff; background: rgba(255, 255, 255, 0.16); border-radius: 12px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08); transition: 0.3s ease-in-out;}
.info_links > a:hover {background: #fff; margin-top: -24px;}
.info_links > a:hover:before {content: '';position: absolute;top: -3px;left: -3px;right: -3px;bottom: -3px;border-radius: 14px;background: linear-gradient(90deg, #ED91AE 5.56%, #6A82E3 100%);z-index: -1;}
.info_links > a strong {font-size: 20px;font-weight: 700; background: #fff;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.info_links > a .link_label {position: absolute; width: 40px; display: none; align-items: center; justify-content: space-between; top:50%; transform: translateY(-50%); right:-8px;}
.info_links > a .link_label span {display: none; background: linear-gradient(90deg, #ED91AE 5.56%, #6A82E3 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.info_links > a .link_label:after {content:''; display: block; width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(90deg, #ED91AE 5.56%, #6A82E3 100%); }
.info_links > a .link_label:before {content:''; display: block; width: 20px; height: 20px; position: absolute; top: 10px; right: 10px; background: url("../images/ico/ico_arrow_r_w.svg") no-repeat center / 100% 100% }
.info_links > a:hover strong {background: linear-gradient(90deg, #ED91AE 5.56%, #6A82E3 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.info_links > a:hover .link_label {display: flex;}
.info_links > a > img {width: 64px;}
/*.info_links > a:hover .link_label {background: linear-gradient(90deg, #ED91AE 5.56%, #6A82E3 100%); color:#fff;}*/
/*.info_links > a:hover .link_label span {-webkit-text-fill-color:#fff;}*/
/*.info_links > a:hover .link_label:after {background: #fff;}*/
/*.info_links > a:hover .link_label:before {background-image: url("../images/ico/ico_arrow_r_purple.svg")}*/

.what_is_itoktok {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding:56px 32px 24px; border-radius: 12px; }
.what_is_itoktok strong {display: flex; align-items: center; gap: 8px; font-size:24px; font-weight: 700; color:#363636;}
.what_is_itoktok strong img {width: 225px;}
.what_is_itoktok p {font-size:17px; color:#131313; text-align: center; line-height: 150%;}

.support_itoktok {display: flex; gap: 16px; margin-top: 16px;}
.support_itoktok > li {flex:1; width: 100%; box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08); border-radius: 12px; background: #FFF; padding:16px; display: flex; align-items: center; justify-content: center; gap: 8px;}
.support_itoktok > li span {font-size:17px; color:#131313;}

.steps_info {margin-top: 40px; display: flex; align-items: center; gap: 8px; justify-content: center}
.steps_info > p {font-size:20px; color:#131313;}
.steps_info > p br {display: none;}
.steps_info > .steps {display: flex; align-items: center; font-size:20px; color:#131313; font-weight: 700}
.steps_info > .steps li {display: flex; align-items: center;}
.steps_info > .steps li + li:before {content:''; display: block; margin:0 8px; width: 20px; height: 20px; background: #fff url("../images/ico/ico_arrow_r_line.svg") no-repeat center / 12px 12px; border-radius: 50%;}

.total_login_area {margin-top: 40px; padding:24px 56px; display: flex; flex-direction: column; gap: 75px; border-radius: 12px; background: linear-gradient(270deg, rgba(238, 249, 255, 0.80) 0%, rgba(255, 233, 244, 0.80) 100%), #FFF; box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);}

.total_login_box > .border_strong {position: relative; display: flex; width: max-content; margin:0 auto;}
.total_login_box > .border_strong strong {position: relative; z-index: 5; padding:12px 32px; background: #fff; border-radius: 8px; font-size:20px; font-weight: 700; color:#363636}
.total_login_box > .border_strong:before {content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius: 10px;background: linear-gradient(to right, #DD0073 50%, #0571D9 50%);}


.total_login_box .color_flex {margin-top: 24px; position: relative;display: flex;border-radius: 12px;padding: 2px; background: linear-gradient(to right, #DD0073 50%, #0571D9 100%);}
.total_login_box .color_flex::before {content: '';position: absolute;top: 2px;left: 2px;right: 2px;bottom: 2px;background: linear-gradient(270deg, rgba(238, 249, 255, 0.80) 0%, rgba(255, 233, 244, 0.80) 100%), #FFF;border-radius: 10px;}
.total_login_box .color_flex > div {flex:1; position: relative; z-index: 3; display: flex; align-items: center; flex-direction: column; gap: 16px; padding:24px;}
.total_login_box .color_flex > div:before {content:''; width: 50%; height: 50px; position: absolute; top:-52px; }
.total_login_box .color_flex > div.red:before {right:0; border-top: 2px dashed #DD0073; border-left: 2px dashed #DD0073; border-top-left-radius: 8px;}
.total_login_box .color_flex > div.blue:before {left:0; border-top: 2px dashed #0571D9; border-right: 2px dashed #0571D9; border-top-right-radius: 8px;}
.total_login_box .color_flex > div.red {background:#FFE8F4; border-radius: 12px 0 0 12px}
.total_login_box .color_flex > div.red > strong {color:#DD0073 }
.total_login_box .color_flex > div.blue {background:#EEF9FF; backdrop-filter: blur(2.5px); border-radius: 0 12px 12px 0;}
.total_login_box .color_flex > div.blue > strong {color:#0571D9 }
.total_login_box .color_flex > div > strong {font-size:20px; font-weight: 700;}
.total_login_box .color_flex > div > ul {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;}
.total_login_box .color_flex > div > ul li {display: flex; height: 56px; padding:12px 24px; gap:4px; align-items: center; background: #fff; border-radius: 8px;}
.total_login_box .color_flex > div > ul li strong {font-size:17px; font-weight: 700; color:#131313; text-align: center; word-break: keep-all;}

.toktok_foliobook {position: relative;}
.toktok_foliobook:before {content:''; position: absolute; top:-77px; left:50%; transform: translateX(-50%); display: block; width: 75px; height: 86px; background: url("../images/ico/ico_arrow_b_color.svg") no-repeat center / 100%;}
.toktok_foliobook > h4 {padding:12px; border-radius: 8px; background: linear-gradient(274deg, rgba(5, 113, 217, 0.60) 3%, rgba(221, 0, 115, 0.60) 94.01%); font-size:24px; font-weight: 700; color:#fff; text-align: center;}
.toktok_foliobook > ul {margin-top: 16px; display: flex; gap: 12px;}
.toktok_foliobook > ul > li {display: flex; flex-direction: column; gap: 12px; flex:1;}
.toktok_foliobook > ul > li > * {padding:16px; border-radius: 8px; background: rgba(255, 255, 255, 0.50); box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);}
.toktok_foliobook > ul > li > p {text-align: center; font-size:17px;}
.toktok_foliobook > ul > li > p em {font-weight: 700}
.toktok_foliobook > ul > li > p em.red {color:#DD0073;}
.toktok_foliobook > ul > li > p em.blue {color:#0571D9;}
.toktok_foliobook > ul > li > p br {display: none;}
.toktok_foliobook > ul > li .page_info {display: flex; align-items: center; gap: 16px;}
.toktok_foliobook > ul > li .page_info .info {display: flex; flex-direction: column; align-items: flex-start; gap: 4px;}
.toktok_foliobook > ul > li .page_info .info span {display: none; font-size:15px; padding:1px 8px; border-radius: 4px; font-weight: 700; color:#fff; background: #131313;}
.toktok_foliobook > ul > li .page_info .info strong {font-size:24px; font-weight: 700; color:#363636;}
.toktok_foliobook > ul > li .page_info .info p {font-size:17px; color:#131313;}
.toktok_foliobook > ul > li .page_info .info.blue span {background:#0571D9}
.toktok_foliobook > ul > li .page_info .info.blue strong {color:#0571D9}
.toktok_foliobook > ul > li .page_info .info.red span {background:#DD0073}
.toktok_foliobook > ul > li .page_info .info.red strong {color:#DD0073}

.overview_area {border-radius: 12px; box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08); overflow: hidden;}
.overview_area h4 {padding:24px; display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; justify-content: center; color:#363636;}
.overview_area > div {padding:0 24px 24px;}
.overview_area > .manage {background: rgba(255, 255, 255, 0.40);}
.overview_area > .manage > ul {display: flex; gap: 24px; padding:0 97px;}
.overview_area > .manage > ul li {position: relative; flex:auto; display: flex; align-items: center; gap: 20px; border-radius: 8px; border:1px solid #183474; background: #EAF0FF; padding:16px 24px; justify-content: center;}
.overview_area > .manage > ul li + li:before {content:''; position: absolute; z-index: 2; left:-33px; top:50%; transform: translateY(-50%); width: 40px; height: 40px; background: url("../images/ico/ico_plus_w.svg") no-repeat center / 24px 24px; border-radius: 50%;}
.overview_area > .manage > ul li + li:after {content:''; position: absolute; z-index: 1; left:-33px; top:50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(90deg, #ED91AE 5.56%, #6A82E3 100%);}

.overview_area > .manage > ul li > strong {display: flex; align-items: center; gap: 8px; font-size:17px; font-weight: 700; color:#363636;}
.overview_area > .manage > ul li > strong .img_box {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; }
.overview_area > .manage > ul li .menus {display: flex; gap:16px;}
.overview_area > .manage > ul li .menus > div {border:1px solid #183474; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;}
.overview_area > .manage > ul li .menus > div strong {padding:4px 10px; background: #183474; color:#fff; font-weight: 700; font-size:15px; display: block; text-align: center;}

.overview_area > .support {background: #fff;}
.overview_area .menus_box {display: flex; align-items: center; gap: 48px;}
.overview_area .menus_box .newtab {border:1px solid #183474; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;}
.overview_area .menus_box .newtab strong {margin-top: -1px; padding:4px 10px; background: #183474; color:#fff; font-weight: 700; font-size:15px; display: block; text-align: center;}
.overview_area .itoktok { position: relative; z-index: 2; padding:24px; background: #E9F0FF; display: flex; flex-direction: column; gap:16px; border-radius: 12px;}
.overview_area .itoktok:after {content: '';position: absolute; z-index: -2; top: -2px;left: -2px;right: -2px;bottom: -2px; background: linear-gradient(to right, #ED91AE 0%, #6A82E3 100%); border-radius: 10px;}
.overview_area .itoktok:before {content:''; position: absolute; left:-48px; top:50%; transform: translateY(-50%); width: 48px; height: 32px; background: url("../images/ico/ico_arrow_r_purple_thick.svg") no-repeat center / 48px 32px;}
.overview_area .itoktok .before_background {position: absolute; inset: 0; top: 0; left: 0; background: #E9F0FF; z-index: -1; border-radius: 8px;}
.overview_area .itoktok > strong {display: flex; align-items: center; justify-content: center; gap: 8px; font-size:15px; font-weight: 700; color:#363636;}
.overview_area .itoktok > strong img {width: 140px;}
.overview_area .itoktok > ul {display: flex; flex-wrap: wrap; gap: 8px; justify-content: center}
.overview_area .itoktok > ul > li {width: calc(100%/5 - 8px); display: flex; flex-direction: column; border-radius: 8px; background: #F3F3F3; border:1px solid #CFCFCF; overflow: hidden;}
.overview_area .itoktok > ul > li.empty {padding:0; border:none; background: transparent; width: 10px;}
.overview_area .itoktok > ul > li .img_box {display: flex; height: 64px; align-items: center; justify-content: center; background: #fff;}
.overview_area .itoktok > ul > li .img_box img {width: 48px; height: 48px;}
.overview_area .itoktok > ul > li .spans {display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size:15px; padding:8px; min-height:108px;}
.overview_area .itoktok > ul > li .spans span {display: flex; align-items: center; gap: 4px;}
.overview_area .itoktok > ul > li .spans span:before {content:''; display: block; width: 3px; height: 3px; background: #6B6C6C; border-radius: 50%;}

.popup {display: none; position: fixed; top:0; left:0; width: 100lvw; height: 100lvh; z-index: 999; align-items: center; justify-content: center; overflow-y: scroll; padding:16px;}
.popup.on {display: flex;}
.popup .dim {position: absolute; inset: 0; background: rgba(0,0,0,0.6);}
.popup .popup_close {position: absolute; right:0; top:0; padding:16px; display: flex; align-items: center; justify-content: center; }
.popup .popup_content {position: relative; background: #fff; padding:48px 24px 24px; border-radius: 16px; box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.16);}
.popup .popup_content > h3 {font-size:24px; font-weight: 700; color:#1E1E1E; text-align: center;}
.popup_infos {margin-top: 24px; display: flex; flex-direction: column; gap: 8px; padding:16px; border-radius: 8px; background: #f3f3f3;}
.popup_infos > strong {font-size:20px; font-weight: 700; display: block; text-align: center;}
.popup_infos .infos {display: flex; flex-direction: column;}
.popup_infos .infos p {display: flex; align-items: center; gap: 8px; font-size:17px; line-height: 150%; color:#131313; word-break: keep-all}
.popup_infos .infos p:before {content:''; display: block; width: 3px; height: 3px; background: #6B6C6C; border-radius: 50%;}
.popup_links {margin-top: 16px; display: flex; flex-direction: column; gap: 16px;}
.popup_links a {padding:16px; border-radius: 8px; border:1px solid #cfcfcf; background: #fff; display: flex; justify-content: space-between; font-size:20px; font-weight: 700; line-height: 150%;}
.popup_links a:after {content:''; display: block; width: 32px; height: 32px; background: #183474 url("../images/ico/ico_arrow_r_w.svg") no-repeat center / 20px 20px; border-radius: 50%;}

@media (max-width: 1440px) {

}

@media (max-width: 1024px) {
    #tab2, #tab3 {padding-bottom: 40px;}
    .swiper_area .text_box {min-height: 600px;}
    .swiper_area .banner_box:after {background-size: contain; max-width: 100%;}
    .landing_wrap .grid_box #tab3 h2 {padding-top:156px; padding-bottom: 32px; margin-top: -116px}
    #scrollTop {right:16px; bottom:16px;}
    header {position: relative; box-shadow: none;}
    .header_content {padding:16px 0;}
    .navi_btns {display: none;}
    .navi_btns.mobile {position: sticky; top: 0; z-index: 99; width: 100%; display: flex; border-bottom: 1px solid #CFCFCF; background: #fff; backdrop-filter: blur(20px);}
    .navi_btns.mobile button {padding:12px 0; flex:1; justify-content: center; display: flex; align-items: center; font-size:17px;}

    .info_links { padding: 56px 16px 24px 16px; flex-wrap: wrap; margin-top: -18px; gap: 16px;}
    .info_links > a {width: calc(100%/2 - 8px); padding:16px 12px; gap: 12px;}
    .info_links > a strong {font-size:17px;}
    .info_links > a:hover {margin-top: 0;}

    .landing_wrap .grid_box h2 {font-size:24px;}
    .what_is_itoktok {padding:40px 24px 8px;}
    .what_is_itoktok strong {font-size:20px;}
    .what_is_itoktok strong img {width: 170px;}
    .what_is_itoktok p {word-break: keep-all;}
    .what_is_itoktok p br {display: none;}

    .support_itoktok {flex-direction: column; }
    .steps_info {flex-direction: column; margin-top: 32px;}

    .steps_info > p {text-align: center; word-break: keep-all; margin-top: 8px; line-height: 150%;}
    .steps_info > p br {display: block;}

    .total_login_area {padding:16px; gap: 65px; margin-top: 32px;}
    .total_login_box .color_flex > div:before {width: 75%}
    .total_login_box .color_flex > div {padding:16px;}
    .total_login_box .color_flex > div > ul li {padding:12px 6px; flex-direction: column; height: 72px; width: 100%; gap: 4px; justify-content: center;}

    .toktok_foliobook:before {width: 55px; height: 64px; top: -64px; }
    .toktok_foliobook > ul {flex-direction: column;}
    .toktok_foliobook > ul > li .page_info .img_box {width: 120px;}
    .toktok_foliobook > ul > li .page_info .info strong {font-size:20px;}
    .toktok_foliobook > ul > li > p br {display: block;}
    .overview_area > .manage > ul {padding:0; flex-direction: column;}
    .overview_area > .manage > ul li {flex-direction: column; gap: 12px;}
    .overview_area > .manage > ul li .menus {flex-direction: column}
    .overview_area > .manage > ul li + li:before, .overview_area > .manage > ul li + li:after {left:50%; transform: translateX(-50%); top:-33px;}
    .overview_area h4 {font-size:20px;}
    .overview_area .menus_box {flex-direction: column;}

    .overview_area .itoktok {padding:16px;}
    .overview_area .itoktok:before {left:50%; transform: translateX(-50%) rotate(90deg); top:-40px;}
    .overview_area .itoktok > strong {flex-direction: column;}
    .overview_area .itoktok > ul {justify-content: flex-start;}
    .overview_area .itoktok > ul > li {width: calc(100%/2 - 4px)}
    .overview_area .itoktok > ul > li.empty {display: none;}
    .landing_wrap footer .grid_box {flex-direction: column; align-items: flex-start; padding-bottom: 40px;}
    .landing_wrap footer .grid_box h2 {padding:24px 0; margin:0;}
    footer .grid_box .right address {text-align: left; word-break: keep-all}
    footer .grid_box .right address br {display: none;}
    footer .grid_box .right .phone_address {align-items: flex-start; gap: 12px;}
    footer .grid_box .right .phone_address .top .list {flex-wrap: wrap;}
    footer .grid_box .right .phone_address .top {flex-direction: column; align-items: flex-start}
}


@media (max-width: 768px) {

    .header_content .login {gap: 24px;}
    .header_content .login > * + *:before {left:-12px;}
    .header_content .login .newtab .pc {display: none;}
    .header_content .login .newtab .mo {display: block;}
    .swiper_area .text_box {aspect-ratio: auto; height: 736px}
    .swiper_area .banner_box {background-image: url("../images/banner/mo_banner 1-2.png?v=2025092502")}

    .swiper_area .banner_box:after {background: url("../images/banner/mo_banner 1-1.png?v=2025092502") no-repeat bottom center / auto 478px; }
    .swiper_area .banner_box.two:after {background-image: url("../images/banner/mo_banner 2-1.png?v=2025092502")}
    .swiper_area .banner_box.three:after {background-image: url("../images/banner/mo_banner 3-1.png?v=2025092502")}

    .swiper_area {border-radius: 0px 0px 24px 24px;}
    .swiper_area .text_box {padding:48px 16px 0;}
    .swiper_area .text_box h3 {font-size:32px; word-break: keep-all;}
    .swiper_area .text_box p {font-size:17px; word-break: keep-all;}
    .swiper_area .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet {width: 12px; height: 12px;}
    .swiper_area .swiper-pagination.swiper-pagination-bullets {right: 8px; gap: 8px;}
}

@media (max-width: 360px) {
    .header_content .login .parent br {display: block;}
}