@charset "utf-8";


/*************************************************************
 
  Header

**************************************************************/

.nav_div {width:100%; max-width:1280px; margin:auto; text-align:center;}
.top_nav {position:relative; display:flex; align-items:center; height:100px; width:100%;}
.top_nav li {color:#000;}
.top_nav li:first-child {position:absolute;}
.top_nav li:nth-child(2) {width:100%; display:flex; justify-content:center;}

.menu-toggle {position:relative; width:42px; height:42px; z-index:999;}
.menu-toggle i {font-size:42px;}

.menu-open .menu-toggle i.xi-bars {display: none;}
.menu-open .menu-toggle i.xi-close-thin {display:block;}

/* 상단 뒤로가기 버튼 */
.top_nav .menu-back{}
.top_nav .menu-back img{display: block;width: 20px; height: 18px; margin: 0 auto;}
.top_nav .menu-back span{font-size: 13px; text-align: center;}

.custom-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 999; opacity: 0; transition: opacity 0.3s ease; }
.custom-dialog { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; background: #fff; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); z-index: 1000; opacity: 0; transition: opacity 0.3s ease; }
.dialog-content { padding: 20px; text-align: center; font-family: Arial, sans-serif; }
.dialog-content p { font-family: initial; font-size: 20px; font-weight: bold; }

.dialog-actions { margin-top: 20px; display: flex; justify-content: space-around; }
.btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold; transition: background-color 0.3s ease; }
.btn-confirm { width: 40%; background-color: #004386; color: white; }
.btn-cancel { width: 40%; background-color: #EDEDED; color: black; }

/* Breadcrumb */
.breadcrumb-nav {width: 100%; max-width: 1280px; margin: auto; font-size:16px; color: #fff; text-align: center;}

.breadcrumb-menu {display: flex; flex-wrap: wrap; align-items: center; padding:16px 20px; background: #004386; gap: 10px 15px;}
.breadcrumb-menu > li {position:relative;}
.breadcrumb-menu > li:not(:last-of-type) {padding-right: 15px;}
.breadcrumb-menu > li > a {display:block; transition: .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.breadcrumb-menu > li::after {content: ''; background: url(/resources/user/mobile/img/common/breadcrumb-next-arrw.svg) 0 0 no-repeat; width:4px; height:7px; position:absolute; top: 50%; right: -2px; transform: translateY(-50%);}
.breadcrumb-menu > li:last-child:after {display: none;} 
.breadcrumb-menu > li.home {padding-left: 0;}
.breadcrumb-menu > li.home a {padding-left: 0;}
.breadcrumb-menu > li.home img {display:block}

.breadcrumb-menu-list {background: transparent url(/resources/user/mobile/img/common/breadcrumb-toggle-arrw.svg) no-repeat center right; border: none; color: #fff; cursor: pointer; padding: 0; padding-right: 20px;}
.breadcrumb-menu-list option {background-color: #004386;}



/* 메뉴 */
.menu-container {position:fixed; z-index:1;}

.menu {position: fixed; left: -100%; top:0; width:100%; height: 100vh; background:#eee; transition: left 0.3s ease;}
.menu_logo {display:flex; justify-content:center; position:fixed; background:#fff; width:100%; z-index:9999;}
.menu_logo a {}
.menu_logo a img {text-align:center; padding:30px 0; }

.mn_top {margin:auto; text-align:center; max-width:1280px; margin-bottom:10px; margin-top:100px;}

.menu ul {list-style: none; padding: 0; margin:0 auto; max-width:1280px; text-align:center; background:#eee; height:100vh;}
.menu ul li {margin: 0; padding: 0; position: relative;}
.menu ul li a {display: block; font-size:18px; font-weight:700;}

/* 버튼 */
.menu-open {left: 0; overflow-y:auto;}

.mn_login {background:#004386; font-size:25px; font-weight:700; color:#fff; text-decoration:underline; padding:20px 0;}
.mn_login:hover {background:#002e5c;}

.mn_iconbtn {width:100%; display:grid; grid-template-columns: repeat(auto-fill, minmax(25%, auto)); border-bottom:1px solid #ddd; background:#fff;}
.mn_iconbtn div {border-left:1px solid #ddd;}
.mn_iconbtn div:first-child {border-left:none;}
.mn_iconbtn div a {padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items:stretch; color:#333; font-size:18px;}
.mn_iconbtn div a img {margin:auto; text-align:center; margin-bottom:10px;}
.mn_iconbtn div a:hover {background:#e6e9ec;}

.submenu {display: none; background-color: #444;}
.submenu li a {padding-left: 30px;}
.submenu-open .submenu {display: block;}

.has-submenu {display:grid; grid-template-columns: 1fr 2fr;}
.has-submenu.mg10 {margin-top:10px;}
.has-submenu a.left {padding:24px 10px; color:#666;}
.has-submenu a.left:hover, .has-submenu.submenu-open a.left {background:#fff; border-bottom:3px solid #004386; max-height:70px; color:#000;}

.has-submenu li a {font-weight:500 !important; color:#000;}

.submenu {display: none; position:absolute; width:66.7%; top:0; height:100vh; right:0; padding-left:40px !important; background:#fff !important;}
.submenu li {}
.submenu li a {display: block; border-bottom:1px solid #ddd; padding:24px 12px; text-align:left;}
.submenu li a:hover {color:#004386; text-decoration:underline; font-weight:700;}

.submenu.mgt01 {margin-top:-69px;}
.submenu.mgt02 {margin-top:-138px;}
.submenu.mgt03 {margin-top:-207px;}
.submenu.mgt04 {margin-top:-276px;}
.submenu.mgt05 {margin-top:-345px;}
.submenu.mgt06 {margin-top:-414px;}


@media screen and (max-width: 1400px) { 
}

@media screen and (max-width: 1280px) {
    .top_nav {padding:0 30px;}
}

@media screen and (max-width: 768px) {
    .top_nav {padding:0 15px;}

    .mn_login {font-size:20px;}
    .menu ul li a {font-size:16px;}

    .mn_iconbtn div a {font-size:16px;}

    .submenu.mgt01 {margin-top:-67px;}
    .submenu.mgt02 {margin-top:-134px;}
    .submenu.mgt03 {margin-top:-201px;}
    .submenu.mgt04 {margin-top:-268px;}
    .submenu.mgt05 {margin-top:-335px;}
    .submenu.mgt06 {margin-top:-402px;}
}

@media screen and (max-width: 480px) {
    .mn_top {margin-top:70px;} 
    .menu_logo a img {padding:20px 0; width:130px;}

    .menu-toggle {width:30px; height:30px;}
    .menu-toggle i {font-size:30px;}

    /* .mn_iconbtn {grid-template-columns: repeat(auto-fill, minmax(50%, auto));} */
    /* .mn_iconbtn div:first-child, .mn_iconbtn div:nth-child(2) {border-bottom:1px solid #ddd;} */
    /* .mn_iconbtn div:nth-child(3) {border-left:none;} */

    .mn_iconbtn div a {padding:15px 0; font-size:14px;}
    .mn_iconbtn div a img {width:30px; margin-bottom:8px;}

    .submenu {padding-left:20px !important;}

    .top_nav {height:70px;}
    .top_nav img {width:25px;}
    .mn_login {font-size:17px; padding:15px 0;}
    .top_nav .mn_logo img {width:130px;}

    .submenu.mgt01 {margin-top:-56px;}
    .submenu.mgt02 {margin-top:-112px;}
    .submenu.mgt03 {margin-top:-168px;}
    .submenu.mgt04 {margin-top:-224px;}
    .submenu.mgt05 {margin-top:-280px;}
    .submenu.mgt06 {margin-top:-336px;}

    .menu ul li a {font-size:14px; padding:20px 12px;}
    .has-submenu a.left {padding:20px 12px;}
}

@media screen and (max-width: 360px) {
    .menu-toggle {width:25px; height:25px;}
    .menu-toggle i {font-size:25px;}

    .mn_login {font-size:15px;}
    .mn_iconbtn div a {font-size:12px;}
    .mn_iconbtn div a img {width:25px;}

    .menu ul li a {font-size:12px; padding:15px 12px;}
    .has-submenu a.left {padding:15px 12px;}

    .submenu.mgt01 {margin-top:-44px;}
    .submenu.mgt02 {margin-top:-88px;}
    .submenu.mgt03 {margin-top:-132px;}
    .submenu.mgt04 {margin-top:-176px;}
    .submenu.mgt05 {margin-top:-220px;}
    .submenu.mgt06 {margin-top:-264px;}

    .top_nav img {width:20px;}
}







/********************************************************

    footer

********************************************************/

.ft {background:#222; padding:20px 10px 40px; width:100%; max-width:1280px; margin:0 auto; text-align:center;}
.ft p {font-size:14px; font-weight:400; color:#888; text-align:center;}

@media screen and (max-width: 1400px) { 
}

@media screen and (max-width: 1080px) { 
}

@media screen and (max-width: 768px) {
    .ft {padding:20px 10px 40px;}
    .ft p {font-size:12px;}
}

@media screen and (max-width: 480px) { 
}


/* BUTTON BOX */
.com-btn-downlaod-box {display: flex; gap: 10px;}
.com-btn-downlaod-box button {display: flex; justify-content: center; align-items: center;}
.com-btn-box-01 {display: flex; flex-wrap: wrap; gap: 5px 10px;}
.com-btn-box-02 {display: flex; flex-wrap: wrap; gap: 5px 10px; background-color: var(--bg--bg-content_01); border: 1px solid var(--border--content-box); padding: 20px 30px;}
.com-btn-box-03 {display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 5px 0;}
.com-btn-box-04 {display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 15px 0; gap: 5px 10px;}
.com-btn-box-05 {display: flex; justify-content: center; margin-top: 30px; gap: 5px 10px;}
.com-btn-box-06 {display: flex; justify-content: center; row-gap: 5px; column-gap: 25px;}
.com-btn-box-07 {display: flex; justify-content: flex-end; margin-top: 15px; flex-wrap: wrap;}

@media screen and (max-width: 1080px) {
    .com-btn-box-02 {padding: 12px 15px;}

    .com-btn-box-06 {column-gap: 10px;}
}

@media screen and (max-width: 480px) {
    .com-btn-box-01 {gap: 3px 5px;}
    .com-btn-box-02 {gap: 3px 5px;}
    .com-btn-box-04 {gap: 5px;}

    .com-btn-downlaod-box {gap: 5px;}
}

/* BUTTON */
.com-btn-more-01 {width: 170px; height: 60px; display: flex; justify-content: center; align-items: center; color: var(--btn--more-btn); border: 1px solid var(--btn--more-btn); border-radius: 50px; font-weight: 600;}
.com-btn-more-01:where(:hover,:focus) {border-color: #A6165F; background-color: #A6165F; color: #fff !important;}

.com-btn-download-01 {min-width: 110px; height: 40px; display: flex; justify-content: center; align-items: center; color: #fff; background-color: #434343; gap: 5px; padding: 0 10px;}
.com-btn-download-01:where(:hover,:focus) {filter: brightness(0.8);}
.com-btn-download-01.type-02 {background-color: #888; color: #fff;}
html[data-mode="dark"] .com-btn-download-01.type-02 {background-color: #434343;}
.com-btn-download-02 {display: inline-flex; justify-content: center; align-items: center; text-align: center; padding: 5px; background-color: var(--btn--btn444); color: var(--white); font-size: 12px; border-radius: 3px; font-weight: 300; gap: 3px;}
html[data-mode="dark"] .com-btn-download-02 {background-color: #444;}
.com-btn-download-02:where(:hover,:focus) {filter: brightness(0.8);}
.com-btn-download-03 {min-width: 275px; min-height: 60px; font-size: 15px; display: flex; justify-content: center; align-items: center; padding: 10px; background-color: var(--btn--btn-color02); color: #fff; font-weight: 600; gap: 5px;}
.com-btn-download-03.type-02 {color: var(--contents--accent-color); border: 1px solid var(--btn--btn-color02); background-color: var(--bg--bg-primary);}
.com-btn-download-03:where(:hover,:focus) {filter: brightness(0.8);}

.com-btn-home-01 {color: #888; font-size: 20px;}
.com-btn-home-01.active,.com-btn-home-01:where(:hover) {color: #004286;}
.com-btn-home-01:where(:hover,:focus) {filter: brightness(0.7);}

.com-btn-shortcut-01 {width: fit-content; padding: 10px 12px; margin-top:40px; font-size: 15px; color: var(--contents--text-color555); border: 1px solid #A0A0A1; display: flex; justify-content: center; align-items: center; gap: 5px; font-weight: 600;}
.com-btn-shortcut-01:where(:hover,:focus) {background-color: #f1f1f1;}
.com-btn-shortcut-01 .arrow {transform: rotate(-45deg);}
.com-btn-shortcut-01.type-01 {background-color: var(--main03); color: var(--white); border: none; margin-top:0; float:right;}
.com-btn-shortcut-01.type-01:where(:hover,:focus) {filter: brightness(0.8);}
.com-btn-shortcut-01.type-02 {color: var(--contents--accent-color); border-color: var(--btn--btn-color02);}
.com-btn-shortcut-01.type-02:where(:hover,:focus) {color: #fff; background-color: var(--btn--btn-color02);}

.com-btn-kakaomap {font-size: 18px; color: #fff; background-color: #004286; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 20px; font-weight: 600;}
.com-btn-kakaomap:where(:hover,:focus) {filter: brightness(0.8);}

.com-ctrl-btn {width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 50%; background-color: #fff;}
html[data-mode="dark"] .com-ctrl-btn {background-color: transparent; border-color: #dcdddd;}
.com-ctrl-btn:where(:hover,:focus) {background-color: #f1f1f1;}
html[data-mode="dark"] .com-ctrl-btn:where(:hover,:focus) {background-color: #333; border-color: #333;}

.com-btn-01 {min-width: 100px; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 16px; border: 1px solid #aaa; padding: 0 10px; background-color: var(--bg--bg-primary);}
html[data-mode="dark"] .com-btn-01 {border-color: var(--border--btn-a-a-a);}
.com-btn-01:where(:hover,:focus) {filter: brightness(0.9);}
.com-btn-01.type-02 {border: none; color: #fff; background-color: #555;}
.com-btn-01.type-03 {border: none; color: #fff; background-color: #A61660;}
html[data-mode="dark"] .com-btn-01.type-03 {background-color: var(--btn--btn-color02); border: 1px solid var(--border--content-box);}

.com-btn-02 {min-width: 170px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 16px; padding: 0 10px;}
.com-btn-02:where(:hover,:focus) {filter: brightness(0.9);}
.com-btn-02.type-01 {background-color: #EDEDED;}
html[data-mode="dark"] .com-btn-02.type-01 {background-color: #89898925;}
.com-btn-02.type-02 {background-color: var(--bg--bg-primary); color: var(--contents--accent-color); border: 2px solid #004286;}
html[data-mode="dark"] .com-btn-02.type-02 {border-color: var(--btn--btn-color02);}

.com-btn-03 {min-width: 125px; height: 40px; padding: 10px; display: flex; justify-content: center; align-items: center; text-align: center; color: #A61660; border: 1px solid #A61660; border-radius: 3px; font-size: 16px; font-weight: 500;}
.com-btn-03:where(:hover,:focus) {color: #fff; background-color: #A61660;}
.com-btn-03.type-02 {color: #004386; border-color: #004386;}
.com-btn-03.type-02:where(:hover,:focus) {color: #fff; background-color: #004386;}
html[data-mode="dark"] .com-btn-03 {border-color: #666; color: var(--contents--primary);}
html[data-mode="dark"] .com-btn-03:where(:hover,:focus) {background-color: #000;}

.com-btn-04 {font-size: 14px; padding: 6px 10px; border: 1px solid var(--border--content-box); font-weight: 500; background-color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; gap: 7px; font-weight: 400; border-radius: 3px; background-color: var(--bg--bg-primary);}
html[data-mode="dark"] .com-btn-04 img {filter: brightness(0) invert(1);}
.com-btn-04:where(:hover,:focus) {filter: brightness(0.9);}

.com-btn-05 {display: flex; justify-content: center; align-items: center; padding: 12px 20px; border: 1px solid #888; color: var(--contents--text-color555); font-size: 15px; gap: 5px; font-weight: 500; background-color: var(--bg--bg-primary);}
html[data-mode="dark"] .com-btn-05 {border-color: var(--border--btn-a-a-a);}
.com-btn-05:where(:hover,:focus) {filter: brightness(0.9);}

.com-btn-06 {font-size: 15px; display: flex; justify-content: center; align-items: center; padding: 10px 15px; color: #fff; border-radius: 3px;}
.com-btn-06:where(:hover,:focus) {filter: brightness(0.8);}
html[data-mode="dark"] .com-btn-06 {background-color: var(--btn--btn-color02);}
.com-btn-06.type-01 {background-color: #A6165F;}
.com-btn-06.type-02 {background-color: #004386;}
.com-btn-06.type-03 {background-color: #888;}
html[data-mode="dark"] .com-btn-06.type-03 {background-color: var(--btn--notify_03); border: 1px solid #888;}

.com-btn-07 {min-width: 170px; height: 50px; background-color: #A61660; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 18px;}
.com-btn-07:where(:hover,:focus) {filter: brightness(0.8);}

@media screen and (max-width: 1080px) { 
    .com-btn-more-01 {width: 140px; height: 55px; font-size: 14px;}

    .com-btn-download-01 {min-width: 85px; height: 35px; font-size: 13px;}

    .com-btn-download-03 {min-width: 200px; min-height: 55px; font-size: 14px;}

    .com-btn-home-01 {font-size: 18px;}

    .com-btn-shortcut-01 {font-size: 13px; padding: 8px; gap: 3px;}

    .com-ctrl-btn {width: 40px; height: 40px;}
    .com-ctrl-btn img {height: 14px;}

    .com-btn-01 {font-size: 14px; min-width: 80px;}

    .com-btn-02 {font-size: 14px; min-width: 120px; height: 50px;}

    .com-btn-03 {font-size: 14px; min-width: 100px; height: 35px;}

    .com-btn-05 {font-size: 14px; padding: 10px 15px;}

    .com-btn-kakaomap {font-size: 16px; padding: 10px 15px;}

    .com-btn-07 {font-size: 16px; min-width: 150px; height: 45px;}
}

@media screen and (max-width: 768px) {  
    .com-btn-02 {min-width: unset; width: 100%;}

    .com-btn-05 {font-size: 13px; padding: 8px 12px;}

    .com-btn-06 {font-size: 13px;}

    .com-btn-kakaomap {font-size: 14px; padding: 10px 12px;}
    .com-btn-kakaomap img {width: 18px;}

    .com-btn-07 {font-size: 14px; min-width: 130px; height: 42px;}
}

@media screen and (max-width: 480px) {
    .com-btn-01 {min-width: 70px;}
}

/* BUTTON BOX */
.com-btn-downlaod-box {display: flex; gap: 10px;}
.com-btn-downlaod-box button {display: flex; justify-content: center; align-items: center;}
.com-btn-box-01 {display: flex; flex-wrap: wrap; gap: 5px 10px;}
.com-btn-box-02 {display: flex; flex-wrap: wrap; gap: 5px 10px; background-color: var(--bg--bg-content_01); border: 1px solid var(--border--content-box); padding: 20px 30px;}
.com-btn-box-03 {display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 5px 0;}
.com-btn-box-04 {display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 15px 0; gap: 5px 10px;}
.com-btn-box-05 {display: flex; justify-content: center; margin-top: 30px; gap: 5px 10px;}
.com-btn-box-06 {display: flex; justify-content: center; row-gap: 5px; column-gap: 25px;}
.com-btn-box-07 {display: flex; justify-content: flex-end; margin-top: 15px; flex-wrap: wrap;}

@media screen and (max-width: 1080px) {
    .com-btn-box-02 {padding: 12px 15px;}

    .com-btn-box-06 {column-gap: 10px;}
}

@media screen and (max-width: 480px) {
    .com-btn-box-01 {gap: 3px 5px;}
    .com-btn-box-02 {gap: 3px 5px;}
    .com-btn-box-04 {gap: 5px;}

    .com-btn-downlaod-box {gap: 5px;}
}

/* CHECKBOX */
.com-checkbox-01 {}
.com-checkbox-01 label {display: flex; align-items: center; gap: 8px;}
.com-checkbox-01 .square {flex-shrink: 0; width: 18px; height: 18px; border: 1px solid #aaa; background-color: #fff; display: flex; justify-content: center; align-items: center;}
html[data-mode="dark"] .com-checkbox-01 .square {background-color: var(--bg--bg-primary);}
.com-checkbox-01 .square img {display: none; width: 90%;}
.com-checkbox-01 input[type="checkbox"] {position: absolute; opacity: 0; z-index: -1;}
.com-checkbox-01 input[type="checkbox"]:checked + label .square {background-color:#004286; border-color:#004286;}
.com-checkbox-01 input[type="checkbox"]:checked + label .square img {display: block;}
.com-checkbox-01 input[type="checkbox"]:focus + label .square {border: 2px solid #000;}
html[data-mode="dark"] .com-checkbox-01 input[type="checkbox"]:focus + label .square {border: 2px solid #004286;} 


/* TITLE */
.com-title-01 {font-size: 40px; font-weight: 800; text-align: center; margin-bottom: 50px; white-space: normal;}

.com-title-02 {display: flex; flex-wrap: wrap; align-items: center; font-size: 22px; font-weight: 600; gap: 7px 20px; margin-bottom: 18px;}
.com-title-02.type-02 {border-bottom: 1px solid var(--border--content-box); padding-bottom: 30px; margin-bottom: 20px;}
.com-title-02.type-03 {font-size: 20px;}
.com-title-02.type-03 .icon {top: 6px;}
.com-title-02.type-03 .title {padding-left: 18px; font-weight: 800;}
.com-title-02.type-04 {justify-content: space-between; font-size: 17px;}
.com-title-02.type-04 .srch-box {display: flex; height: 45px; gap: 10px; font-weight: 400;}
.com-title-02.type-04 .srch-box select {width: 135px; background-color: var(--bg--bg-primary); border: none; border-bottom: 1px solid var(--border--content-box);}
.com-title-02.type-04 .input-box {position: relative;}
.com-title-02.type-04 .input-box input {width: 260px; height: 100%; border: none; border-bottom: 1px solid #d9d9d9; padding-left: 10px; padding-right: 40px; color: var(--contents--placeholder); background-color: var(--bg--bg-primary); border-color: var(--border--content-box);}
.com-title-02.type-04 .input-box input::placeholder {color: var(--contents--placeholder);}
.com-title-02.type-04 .input-box .btn-srch {position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
html[data-mode="dark"] .com-title-02.type-04 .input-box .btn-srch img {filter: brightness(0) invert(1);}

.com-title-02 .title {position: relative; padding-left: 30px; word-break: break-all;}
.com-title-02 .icon {position: absolute; top: 3px; left: 0;}
.com-title-02 .icon.dark {display: none;}
html[data-mode="dark"] .com-title-02 .icon.light {display: none;}
html[data-mode="dark"] .com-title-02 .icon.dark {display: block;}
.com-title-02 .info-txt {font-size: 15px; color: #888; font-weight: 400;}
.com-title-02 .com-btn-shortcut-01 {margin-left: auto;}

.com-title-03 {font-size: 25px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 20px;}
.com-title-03 .btn-list {display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 15px; font-weight: 600;}
.com-title-03 .btn-list a {display: block; padding: 13px 23px;}
.com-title-03 .btn-list a:not(.active) {border: 1px solid #888; color: var(--contents--text-color888); background-color: var(--bg--bg-primary);}
.com-title-03 .btn-list a:not(.active):where(:hover,:focus) {filter: brightness(0.9);}
html[data-mode="dark"] .com-title-03 .btn-list a:not(.active) {border-color: var(--border--btn-a-a-a);}
html[data-mode="dark"] .com-title-03 .btn-list a:not(.active):where(:hover,:focus) {background-color: #222;}
.com-title-03 .btn-list a.active {background-color: #555; color: #fff;}

.com-title-04 {font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 10px;}

.com-title-05 {font-size: 18px; font-weight: 600; margin-bottom: 15px; text-align:left; white-space: normal; margin-top:70px;}



@media screen and (max-width: 1080px) {
    .com-title-01 {font-size: 30px; margin-bottom: 50px;}

    .com-title-02 {font-size: 20px; gap: 5px 15px;}
    .com-title-02 .icon {height: 18px;}
    .com-title-02 .info-txt {font-size: 14px;}
    .com-title-02.type-02 {padding-bottom: 15px; margin-bottom: 15px;}
    .com-title-02.type-03 {font-size: 18px;}
    .com-title-02.type-03 .icon {height: 9px;}
    .com-title-02.type-03 .title {padding-left: 15px;}
    .com-title-02.type-04 .srch-box {height: 38px; gap: 7px; font-size: 14px;}
    .com-title-02.type-04 .srch-box select {width: 85px;}
    .com-title-02.type-04 .input-box input {width: 200px;}
    .com-title-02.type-04 .input-box .btn-srch {width: 18px;}

    .com-title-03 {font-size: 22px; margin-bottom: 12px;}
    .com-title-03 .btn-list {font-size: 14px;}
    .com-title-03 .btn-list a {padding: 10px 15px;}

    .com-title-04 {font-size: 17px;}

    .com-title-05 {font-size: 16px; margin-top:50px;}
}

@media screen and (max-width: 768px) {  
    .com-title-01 {font-size: 26px; margin-bottom: 40px;}

    .com-title-02 {font-size: 18px;}
    .com-title-02 .title {padding-left: 25px;}
    .com-title-02 .icon {height: 16px;}
    .com-title-02.type-03 {font-size: 16px;}
    .com-title-02.type-03 .icon {height: 8px; top: 5px}
    .com-title-02.type-04 {}
    .com-title-02.type-04 .srch-box {width: 100%;}
    .com-title-02.type-04 .srch-box select {flex-shrink: 0;}
    .com-title-02.type-04 .input-box {width: 100%;}
    .com-title-02.type-04 .input-box input {width: 100%;}

}

@media screen and (max-width: 480px) {
    .com-title-02 .info-txt {font-size: 13px;}
}

/* BOX */
.com-box-01 {margin-bottom: 50px; width: 100%;}
.com-box-02 {padding: 0 10px; white-space: normal;}
.com-box-03 {margin-bottom: 40px;}
.com-box-04 {margin-bottom: 100px;}
.com-box-05 {padding: 20px 0;}
.com-box-06 {margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border--content-box);}
.com-box-07 {margin-bottom: 50px;}
.com-box-08 {padding: 40px 30px; border-top: 2px solid var(--border--table-td); text-align:left; white-space: normal;}
.com-box-09 {display: flex; border-top: 2px solid var(--border--board-header); border-bottom: 1px solid var(--border--table-td);}
.com-box-09 > :is(.img-box,.txt-box) {padding: 30px;}
.com-box-09 > .img-box {flex-shrink: 0; width: 260px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; background-color: var(--bg--board-header); border-right: 1px solid var(--border--table-td);}
.com-box-09 > .txt-box {width: 100%; display: flex; flex-direction: column; justify-content: center;}

@media screen and (max-width: 1080px) { 
    .com-box-04 {margin-bottom: 70px;}

    .com-box-05 {padding: 15px 0;}

    .com-box-08 {padding: 20px; font-size: 15px;}

    .com-box-09 > :is(.img-box,.txt-box) {padding: 20px;}
}

@media screen and (max-width: 768px) {  
    .com-box-01 {margin-bottom: 30px;}

    .com-box-04 {margin-bottom: 50px;}

    .com-box-08 {padding: 15px 10px; font-size: 14px;}

    .com-box-09 {flex-wrap: wrap;}
    .com-box-09 > :is(.img-box,.txt-box) {width: 100%; padding: 20px 10px;}
    .com-box-09 > .img-box {border-right: none; border-bottom: 1px solid var(--border--table-td);}

}

@media screen and (max-width: 480px) {
    
}


/* TEXT BOX */
.com-txt-box-01 {background-color: var(--bg--sub_content-box02); border: 1px solid var(--border--content-box); border-top: 2px solid #333; padding: 30px; font-weight: 500; margin-bottom: 25px;}
.com-txt-box-01 .txt-list-01 table {width: auto;}
.com-txt-box-01 .txt-list-01 :where(th,td) {padding-bottom: 7px;}
.com-txt-box-01 .txt-list-01 th {color: var(--contents--dominant-color); font-weight: 600;}
.com-txt-box-01 .txt-list-01 td {padding-left: 30px; color: var(--contents--third);}
.com-txt-box-01 .alarm-01 {display: flex; gap: 10px; margin-top: 15px; color: var(--contents--third);}
.com-txt-box-01 .alarm-01 .icon-01 {flex-shrink: 0; background-color: #A61660; width: 20px; height: 20px; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center;}

.com-txt-box-02 {color: #A6165F; text-align: center; font-size: 14px; font-weight: 600; position: relative; padding-top: 10px;}
.com-txt-box-02::before {content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background-color: #A6165F;}

.com-move-box-02 {/* display: flex;  */ align-items: center; justify-content: space-between; border-top: 2px solid #333; border-bottom: 2px solid #333; padding: 30px 20px; text-align: center; gap: 20px;}
.com-move-box-02 .btn-box {flex-shrink: 0;}
.com-move-box-02 .btn-box button {width: 42px; height: 42px; border: 2px solid #666; display: flex; justify-content: center; align-items: center; font-size: 20px; border-radius: 50%;}
.com-move-box-02 .btn-box button i {font-weight: 800;}
.com-move-box-02 .btn-box button:where(:hover,:focus) {background-color: #f1f1f1;}
.com-move-box-02 .title {font-weight: 600; font-size: 25px; margin-bottom: 12px;}
.com-move-box-02 .date {font-weight: 500; font-size: 16px;}




/* POSITION */
.com-pos-relative {position: relative;}

/* RADIO */
.com-radio-01 {position: relative;}
.com-radio-01 label {display: flex; align-items: center; gap: 8px;}
.com-radio-01 input[type="radio"] {position: absolute; opacity: 0; z-index: -1;}
.com-radio-01 input[type="radio"]:checked + label .circle {border: 5px solid #A61660 !important;}
.com-radio-01 input[type="radio"]:focus + label .circle {border: 2px solid #000;}
html[data-mode="dark"] .com-radio-01 input[type="radio"]:focus + label .circle {border-color: #A61660;}
.com-radio-01 .circle {flex-shrink: 0; width: 18px; height: 18px; border: 1px solid #aaa; border-radius: 50%; background-color: #fff;}
html[data-mode="dark"] .com-radio-01 .circle {border-color: #ddd; background-color: transparent;}

.com-radio-02 {}
.com-radio-02 input[type="radio"] {position: absolute; opacity: 0; z-index: -1;}
.com-radio-02 input[type="radio"]:checked + label {background-color: #A61660; color: #fff; border: none;}
.com-radio-02 label {width: 55px; height: 55px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #d9d9d9; transition: 0.3s; background-color: #fff; position: relative; z-index: 1;}
.com-radio-02 :not(input[type="radio"]:checked) + label:where(:hover,:focus) {filter: brightness(0.9);}
html[data-mode="dark"] .com-radio-02 label {background-color: #414143;}

/* CHECKBOX */
.com-checkbox-01 {}
.com-checkbox-01 label {display: flex; align-items: center; gap: 8px;}
.com-checkbox-01 .square {flex-shrink: 0; width: 18px; height: 18px; border: 1px solid #aaa; background-color: #fff; display: flex; justify-content: center; align-items: center;}
html[data-mode="dark"] .com-checkbox-01 .square {background-color: var(--bg--bg-primary);}
.com-checkbox-01 .square img {display: none; width: 90%;}
.com-checkbox-01 input[type="checkbox"] {position: absolute; opacity: 0; z-index: -1;}
.com-checkbox-01 input[type="checkbox"]:checked + label .square {background-color: #A61660; border-color: #A61660;}
.com-checkbox-01 input[type="checkbox"]:checked + label .square img {display: block;}
.com-checkbox-01 input[type="checkbox"]:focus + label .square {border: 2px solid #000;}
html[data-mode="dark"] .com-checkbox-01 input[type="checkbox"]:focus + label .square {border: 2px solid #A61660;} 



/* SHAPE TEXT */
.com-with-shape-01 {text-align: left; font-size: 16px; line-height: 1.5;}
.com-with-shape-01 .com-with-shape-01 {margin-top: 4px; color: var(--contents--text-color555);}
.com-with-shape-01 .com-with-shape-01.circle {font-weight: 500;}
.com-with-shape-01 .com-with-shape-01.circle > li::before {background-color: var(--contents--text-color555);}
.com-with-shape-01 .com-with-shape-01.normal {padding-left: 12px; color: var(--contents--text-color555); font-weight: 400;}
.com-with-shape-01 .com-list-02 {margin-top: 4px; font-size: 15px;}
.com-with-shape-01 .com-list-04 {font-size: 15px;}
.com-with-shape-01 > li {position: relative;}
.com-with-shape-01 > li.no-shape {padding-left: 0 !important;}
.com-with-shape-01 > li.no-shape::before {display: none;}
.com-with-shape-01 > li:not(:last-of-type) {margin-bottom: 5px;}
.com-with-shape-01 .txt-add-01 {font-size: 15px; color: var(--contents--text-color888); padding-left: 10px; font-weight: 400;}
.com-with-shape-01 .txt-add-01 i {color: #0069D1; font-weight: 800; font-size: 14px;}
.com-with-shape-01 .txt-add-01.no-pdl {padding-left: 0;}
.com-with-shape-01 .com-tbl-wrap {margin-top: 15px;}

.com-with-shape-01.no-pdl {padding-left: 0 !important;}
.com-with-shape-01.gap-long-01 > li:not(:last-of-type) {margin-bottom: 30px;}
.com-with-shape-01.circle {font-weight: 500;}
.com-with-shape-01.circle > li {padding-left: 12px;}
.com-with-shape-01.circle > li::before {content: ""; width: 3px; height: 3px; background-color: var(--contents--primary); border-radius: 50%; position: absolute; top: 10px; left: 0;}
.com-with-shape-01.dash {color: var(--contents--text-color555); font-weight: 400;}
.com-with-shape-01.dash > li {padding-left: 12px;}
.com-with-shape-01.dash > li::before {content: ""; width: 5px; height: 1px; background-color: var(--contents--text-color555); position: absolute; top: 11px; left: 0; }
.com-with-shape-01.normal {font-weight: 500;}


@media screen and (max-width: 1080px) { 
    .com-with-shape-01 {font-size: 14px;}
    .com-with-shape-01 .txt-add-01 {font-size: 13px;}
    .com-with-shape-01 .txt-add-01 i {font-size: 12px;}
    .com-with-shape-01 .com-list-02 {font-size: 13px;}
    .com-with-shape-01 .com-with-shape-01.normal {padding-left: 10px;}
    .com-with-shape-01 .com-list-04 {font-size: 14px;}

    .com-with-shape-01.circle > li {padding-left: 10px;}
    .com-with-shape-01.circle > li::before {top: 9px;}
    .com-with-shape-01.dash > li {padding-left: 10px;}
    .com-with-shape-01.dash > li::before {top: 10px;}
    .com-with-shape-01.gap-long-01 > li:not(:last-of-type) {margin-bottom: 20px;}
}


.homepage_moving {display:flex; justify-content:flex-end; margin-top:-30px;}


/* Loading box */
.loading_box {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 20000;/* display: none; */background-color: rgba(0, 0, 0, .6);}
.loading_box .wrapper {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.loading_box .wrapper span {position: absolute; top: 75px; font-family: 'Lato';font-size: 20px; letter-spacing: 8px;color: #fff;left: 50%; transform: translateX(-48%); }

.loading_box .cube {
    -webkit-animation: loading_cube 2s infinite ease;
            animation: loading_cube 2s infinite ease;
    height: 40px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    width: 40px; }
    .loading_box .cube div {
    background-color: rgba(255, 255, 255, 0.25);
    height: 100%;
    position: absolute;
    width: 100%;
    border: 2px solid white; }

    .loading_box .cube div:nth-of-type(1) {
-webkit-transform: translateZ(-20px) rotateY(180deg);
        transform: translateZ(-20px) rotateY(180deg); }

        .loading_box .cube div:nth-of-type(2) {
-webkit-transform: rotateY(-270deg) translateX(50%);
        transform: rotateY(-270deg) translateX(50%);
-webkit-transform-origin: top right;
        transform-origin: top right; }

        .loading_box .cube div:nth-of-type(3) {
-webkit-transform: rotateY(270deg) translateX(-50%);
        transform: rotateY(270deg) translateX(-50%);
-webkit-transform-origin: center left;
        transform-origin: center left; }

        .loading_box .cube div:nth-of-type(4) {
-webkit-transform: rotateX(90deg) translateY(-50%);
        transform: rotateX(90deg) translateY(-50%);
-webkit-transform-origin: top center;
        transform-origin: top center; }

        .loading_box .cube div:nth-of-type(5) {
-webkit-transform: rotateX(-90deg) translateY(50%);
        transform: rotateX(-90deg) translateY(50%);
-webkit-transform-origin: bottom center;
        transform-origin: bottom center; }

        .loading_box .cube div:nth-of-type(6) {
-webkit-transform: translateZ(20px);
        transform: translateZ(20px); }

@-webkit-keyframes loading_cube {
    0% {
      -webkit-transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
              transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); }
    50% {
      -webkit-transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
              transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); }
    100% {
      -webkit-transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
              transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); } }
  @keyframes loading_cube {
    0% {
      -webkit-transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
              transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); }
    50% {
      -webkit-transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
              transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); }
    100% {
      -webkit-transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
              transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); } }