/* common */
html,body {background:#f6f6f6; overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}
* {line-height:1.5; word-break:keep-all;}
.wrapper {margin:0 auto; padding:0 12px;}
.is-pc {display:block;}
.is-m {display:none;}
@media (max-width:991px){
.is-pc {display:none;}
.is-m {display:block;}
}

/* header */
header .header-main {background:#323232; border-radius:0 0 8px 8px; padding:12px 12px 0; margin:0 -12px; transition: transform 0.3s ease; position: fixed; top: 0; width: 100%; z-index: 1000;}
header .header-main .main-top {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
header .header-main .main-top h1 a img {width:71px;}
header .header-main .main-top .menu {display:block; font-size:0; width:28px; height:28px; background:url('../images/icon_menu.png') no-repeat center / cover;}
header .header-main .main-bottom ul {display:block; overflow-x:auto; white-space:nowrap; margin:0 -12px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}
header .header-main .main-bottom ul li {display:inline-block; font-size:0;}
header .header-main .main-bottom ul li:first-of-type {margin-left:12px;}
header .header-main .main-bottom ul li:last-of-type {margin-right:12px;}
header .header-main .main-bottom ul li a {height:48px; padding:0 10px; font-size:16px; font-weight:600; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
header .header-main .main-bottom ul li a span.category-new {height:45px; padding:0; font-size:12px; font-weight:600; color:#FFC107; display:flex; flex-wrap:wrap; justify-content:center;}
header .header-main .main-bottom ul li.active a {position:relative; color:#FF3936;}
header .header-main .main-bottom ul li.active a:after {position:absolute; left:0; bottom:0; width:100%; height:2px; background:#ff3936; content:"";}
header .header-fixed {overflow:hidden; pointer-events:none; opacity:0; position:fixed; left:50%; top:0; width:100%; height:100%; transform:translateX(-50%); z-index:9999; transition:all ease 0.5s; background:rgba(0,0,0,0.7);}
header .header-fixed .box {pointer-events:none; opacity:0; position:absolute; left:-20px; top:0; width:280px; height:100%; overflow-y:auto; transition:all ease 0.5s; background:#333;}
header .header-fixed .box .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:12px;}
header .header-fixed .box .list-head h2 img {width:71px;}
header .header-fixed .box .list-head .close {position:relative; font-size:0; width:28px; height:28px;}
header .header-fixed .box .list-head .close:after {position:absolute; left:0; top:12px; width:100%; height:2px; background:#fff; content:""; transform:rotate(45deg);}
header .header-fixed .box .list-head .close:before {position:absolute; left:0; top:12px; width:100%; height:2px; background:#fff; content:""; transform:rotate(-45deg);}
header .header-fixed .box .list-body {padding:0 12px;}
header .header-fixed .box .list-body ul {border-bottom:1px solid #999; padding:0 0 24px; margin:0 0 24px;}
header .header-fixed .box .list-body ul:last-of-type {border:0; padding:0; margin:0;}
header .header-fixed .box .list-body ul li a {display:flex; flex-wrap:wrap; align-items:center; padding:12px 0; font-size:16px; font-weight:500; color:#d9d9d9;}
header .header-fixed .box .list-body ul li.active a {color:#FF3936;}
header .header-title {transition: transform 0.3s ease; position: fixed; top: 0; left: 0; width: 100%; background: #f6f6f6; z-index: 1000; padding:12px 0;}
header .header-title a.back {position:absolute; font-size:0; left:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; background:url('../images/icon_back.png') no-repeat center / cover;}
header .header-title h1 {text-align:center; font-size:24px; font-weight:600; color:#5B5A5D;}
header .header-title a.kakao {position:absolute; font-size:0; right:15px; top:50%; transform:translateY(-50%); width:45px; height:45px; background:url('../images/icon_kakaoshare.png') no-repeat center / cover;}
header.fixed .header-fixed {pointer-events:inherit; opacity:1;}
header.fixed .header-fixed .box {pointer-events:inherit; opacity:1; left:0;}

/* footer */
footer {position:fixed; left:50%; bottom:0; width:100%; transform:translateX(-50%); z-index:1000; padding:0 12px 24px;}

/* section */
section {padding:0 0 40px; min-height: 80vh;}

/* notice-swiper-box */
.notice-swiper-box {display:flex; flex-wrap:wrap; align-items:center;}
.notice-swiper-box:before {display:inline-block; content:""; width:20px; height:20px; margin:0 5px 0 0; background:url('../images/icon_alert.png') no-repeat center / cover;}
.notice-swiper-box .swiper {flex:1; min-width:0;}
.notice-swiper-box .swiper-container {height:45px;}
.notice-swiper-box .swiper-container .swiper-slide {height:45px;}
.notice-swiper-box .swiper-container .swiper-slide a {display:block; line-height:45px; height:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; color:#323232;}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {height:47px; border-radius:10px; font-size:16px; font-weight:600; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0;}
.button-box .btn-white {background:#fff; border:1px solid #DADCE0;}
.button-box .btn-black {background:#323232; color:#fff;}
.button-box .btn-active {background:#FF3936; color:#fff;}
.button-box .btn-disabled {background:#bbbbbb; color:#7e7e7e;}
.button-box .btn-kakao {background:#FFDE00;}
.button-box .btn-appstore {display:inline-block; text-indent:-9999px; background:url('../images/btn_appstore.png') no-repeat center / cover;}
.button-box .btn-playstore {display:inline-block; text-indent:-9999px; background:url('../images/btn_playstore.png') no-repeat center / cover;}
.button-box .btn-kakao:before {display:inline-block; content:""; width:24px; height:24px; margin:0 4px 0 0; background:url('../images/icon_kakao.png') no-repeat center / cover;}
.button-box .btn-kakao-white {background:#fff;}
.button-box .btn-kakao-white:before {display:inline-block; content:""; width:24px; height:24px; margin:0 4px 0 0; background:url('../images/icon_kakao.png') no-repeat center / cover;}
.button-box .btn-apple {background:#fff; border:2px solid #323232;}
.button-box .btn-apple:before {display:inline-block; content:""; width:24px; height:24px; margin:0 4px 0 0; background:url('../images/icon_apple.png') no-repeat center / cover;}

/* video-box */
.video-box {position:relative; overflow:hidden;}
.video-box:after {display:block; content:""; padding-bottom:56.5%;}
.video-box iframe {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; pointer-events: none;}
.video-box-dim {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0); /* 반투명 검정 레이어 */pointer-events: all; /* 이 레이어가 클릭 이벤트를 막음 */}

/* banner-box */
.banner-box a {display:block;}
.banner-box a img {width:100%;}
.banner-box.full {margin:0 -12px;}
.banner-box p {font-size:clamp(11px, 2.5vw, 14px); font-weight:500; color:#FF3936;}

/* naverbanner-box */
.naverbanner-box {border: 1px solid #dfe0e2;}
.naverbanner-box a {display:block; text-align: center;}
.naverbanner-box a img {width:50%; max-height: 240px; max-width: 240px;}
.naverbanner-box.full {margin:0 -12px;}
.naverbanner-box p {font-size:clamp(11px, 2.5vw, 14px); font-weight:500; color:#FF3936;}

/* graph-box */
.graph-box {background:#fff; border:1px solid #e9e9e9; border-radius:8px; padding:12px;}
.graph-box .graph-text {width:100%; text-align:center; font-size:16px; font-weight:500; color:#323232; padding:15% 0;}
.graph-box .google-visualization-tooltip{padding:12px; display:inline-block; white-space:nowrap; border-radius:8px; background:#e9e9e9;}
.graph-box .woman{color: red}
.graph-box .man{color: blue}
.graph-box .up{color: red}
.graph-box .down{color: blue}

/* vote-list-box */
.vote-list-box ul li {position: relative; margin:0 0 12px; background:#fff; border-radius:8px; border:1px solid #E9E9E9; padding:24px 12px;}
.vote-list-box ul li:last-of-type {margin:0;}
.vote-list-box ul li .subject {display:flex; flex-wrap:wrap;}
.vote-list-box ul li .subject em {width:20px; font-size:18px; font-weight:bold; color:#666; line-height:1.5; margin:0 5px 0 0;}
.vote-list-box ul li .subject div {flex:1; min-width:0;}
.vote-list-box ul li .subject div p {font-size:18px; font-weight:bold; line-height:1.5;}
.vote-list-box ul li .subject div p.sm {font-size:16px; font-weight:500; color:#5B5A5D;}
.vote-list-box ul li .hit {margin:15px 0 0 20px; display:flex; flex-wrap:wrap; align-items:center;}
.vote-list-box ul li .hit:before {display:inline-block; content:""; width:20px; height:20px; background:url('../images/icon_hit.png') no-repeat center / cover;}
.vote-list-box ul li .hit p {font-size:16px; font-weight:500;}
.vote-list-box ul li .hit .date {margin-left:auto; color:#323232; font-size:14px;}
.vote-list-box ul li .button {margin:20px 0 0;}
.vote-list-box ul li .notice {margin:12px 0 0;}
.vote-list-box ul li .notice p {font-size:14px; font-weight:500; color:#ED4C4F;}
.vote-list-box ul li .vote-dim {position: absolute; border-radius:8px; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; color: white; font-size: 5vh; font-weight: bold; z-index: 10;}

/* vote-write-box */
.vote-write-box ul li {margin:0 0 12px; position:relative;}
.vote-write-box ul li:last-of-type {margin:0;}
.vote-write-box ul li input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.vote-write-box ul li label {display:flex; flex-wrap:wrap; align-items:center; background:#fff; border:1px solid #e9e9e9; border-radius:10px; padding:8px 12px;}
.vote-write-box ul li label img {width:42px; height:42px; object-fit:cover;}
.vote-write-box ul li label p {flex:1; min-width:0; padding:0 0 0 10px; font-size:16px; font-weight:600; color:#323232;}
.vote-write-box ul li input:checked ~ label {border:1px solid #FF3936; outline:1px solid #FF3936;}

/* comment-list-box */
.comment-list-box .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin:0 0 8px;}
.comment-list-box .list-head .refresh {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#5B5A5D;}
.comment-list-box .list-head .refresh:before {display:inline-block; content:""; width:20px; height:20px; background:url('../images/icon_refresh.png') no-repeat center / cover;}
.comment-list-box .list-body ul {background:#fff; border-radius:8px; border:1px solid #E9E9E9; padding:12px;}
.comment-list-box .list-body ul li {border-bottom:1px solid #d2d2d2; padding:0 0 12px; margin:0 0 12px;}
.comment-list-box .list-body ul li:last-of-type {border:0; padding:0; margin:0;}
.comment-list-box .list-body ul li .cmt-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 8px;}
.comment-list-box .list-body ul li .cmt-head div {display:flex; flex-wrap:wrap; align-items:center;}
.comment-list-box .list-body ul li .cmt-head div p {font-size:14px; color:#323232; margin:0 8px 0 0;}
.comment-list-box .list-body ul li .cmt-head div span {display:flex; flex-wrap:wrap; align-items:center; height:20px; border-radius:4px; padding:0 8px; font-size:12px; color:#fff;}
.comment-list-box .list-body ul li .cmt-head div span.bu {background:#4C89ED;}
.comment-list-box .list-body ul li .cmt-head div span.gr {background:#B2B2B2;}
.comment-list-box .list-body ul li .cmt-head div span.og {background:#FFA930;}
.comment-list-box .list-body ul li .cmt-head .more {display:block; font-size:0; width:20px; height:20px; background:url('../images/icon_more.png') no-repeat center / cover;}
.comment-list-box .list-body ul li .cmt-body p {font-size:14px; color:#5B5A5D;}
.comment-list-box .list-body ul li .cmt-body pre {font-size:16px; font-weight:500; color:#000000; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;}
.comment-list-box .list-body ul li .cmt-sub {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-right: 10px}
.comment-list-box .list-body ul li .cmt-sub time {display:block; margin:4px 0 0; font-size:12px; color:#5B5A5D;}
.comment-list-box .list-body ul li .cmt-sub span.like {display:block; font-size:12px;}
.comment-list-box .list-body ul li .cmt-sub span.like.on:before{display:inline-block; vertical-align:middle; content:""; width:14px; height:14px; background:url('../images/heart_red.png') no-repeat center / cover;}
.comment-list-box .list-body ul li .cmt-sub span.like.off:before{display:inline-block; vertical-align:middle; content:""; width:14px; height:14px; background:url('../images/heart_gray.png') no-repeat center / cover;}
.comment-list-box .list-body ul li .cmt-reply ul {border-radius:none; border:0; padding:12px 0px 12px 0px; background:#e6e6e6}
.comment-list-box .list-body ul li .cmt-reply ul li.reply{padding:0px 0px 12px 12px;}
.comment-list-box .list-body ul li.reply .cmt-head div:before {display:inline-block; content:""; width:20px; height:20px; margin:0 4px 0 0; background:url('../images/icon_reply.png') no-repeat center / cover;}

/* write-box */
.write-box > ul > li {margin:0 0 12px;}
.write-box > ul > li:last-of-type {margin:0;}
.write-box > ul > li > strong {display:block; margin:0 0 4px; font-size:16px; font-weight:500; color:#323232;}
.write-box > ul > li > div {width:100%;}
.write-box > ul > li.flex {display:flex; flex-wrap:wrap; align-items:center;}
.write-box > ul > li.flex > strong {width:75px; font-size:14px; color:#5b5a5d; margin:0;}
.write-box > ul > li.flex > div {flex:1; min-width:0;}

/* check-box */
.check-box {display:flex; flex-wrap:wrap; align-items:center;}
.check-box .check {position:relative; overflow:hidden; margin:0 10px 0 0;}
.check-box .check:last-of-type {margin:0;}
.check-box .check input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-box .check label {display:flex; flex-wrap:wrap; align-items:center;}
.check-box .check label:before {display:inline-block; content:""; width:18px; height:18px; background:url('../images/icon_check.png') no-repeat center / cover;}
.check-box .check label p {margin:0 0 0 5px; font-size:14px; color:#666;}
.check-box .check input:checked ~ label:before {background-image:url('../images/icon_check_on.png');}
.check-box .check input:checked ~ label p {color:#323232;}

/* input-box */
.input-box {display:flex; flex-wrap:wrap; align-items:center; background:#fff; border:1px solid #e9e9e9; border-radius:8px; overflow:hidden;}
.input-box input {flex:1; min-width:0; height:48px; padding:0 12px; font-size:14px; color:#323232;}
.input-box input::placeholder {color:#666;}

/* select-box */
.select-box {display:flex; flex-wrap:wrap; align-items:center; background:#fff; border:1px solid #e9e9e9; border-radius:8px; overflow:hidden;}
.select-box select {flex:1; min-width:0; height:48px; padding:0 40px 0 12px; font-size:14px; color:#323232; background:url('../images/icon_select.png') no-repeat calc(100% - 20px) center / 10px auto;}

/* textarea-box */
.textarea-box textarea {display:block; width:100%; height:150px; border-radius:8px; background:#fff; border:1px solid #e9e9e9; padding:12px; font-size:14px; color:#323232;}
.textarea-box textarea::placeholder {color:#666;}
.textarea-box p {text-align:right; margin:5px 0 0; font-size:14px;}
.textarea-box p em {font-size:14px;}

/* link-box */
.link-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.link-box a {font-size:16px; font-weight:600; color:#323232; text-decoration:underline;}
.link-box a.red {color:#FF3936;}

/* popup-box */
.popup-box {pointer-events:none; opacity:0; position:fixed; left:50%; top:0; width:100%; height:100%; transform:translateX(-50%); transition:all ease 0.5s; z-index:9990; background:rgba(0,0,0,0.7);}
.popup-box .box {pointer-events:none; opacity:0; position:absolute; transition:all ease 0.5s; background:#fff; overflow-y:auto;}
.popup-box .box h2 {text-align:center; font-size:16px; font-weight:600; color:#323232;}
.popup-box .box .notice p {font-size:10px; font-weight:500; color:#ED4C4F;}
.popup-box .box.bottom {left:0; bottom:-20px; width:100%; border-radius:20px 20px 0 0; max-height:80%; padding:0 12px 24px;}
.popup-box .box.bottom .popup-head {margin:0 0 24px;}
.popup-box .box.bottom .popup-head:before {display:block; content:""; width:40px; height:4px; background:#a6abb3; border-radius:50px; margin:10px auto;}
.popup-box .box.center {left:50%; top:45%; border-radius:8px; transform:translate(-50%,-50%); padding:24px; width:calc(100% - 40px);}
.popup-box.fixed {pointer-events:inherit; opacity:1;}
.popup-box.fixed .box.active {pointer-events:inherit; opacity:1;}
.popup-box.fixed .box.active.bottom {bottom:0;}
.popup-box.fixed .box.active.center {top:50%;}

/* alert-box */
.alert-box {pointer-events:none; opacity:0; position:fixed; left:50%; top:0; width:100%; height:100%; transform:translateX(-50%); transition:all ease 0.5s; z-index:9999; background:rgba(0,0,0,0.7);}
.alert-box .box {pointer-events:none; opacity:0; position:absolute; transition:all ease 0.5s; background:#fff; overflow-y:auto;}
.alert-box .box h2 {text-align:center; font-size:16px; font-weight:600; color:#323232;}
.alert-box .box.bottom {left:0; bottom:-20px; width:100%; border-radius:20px 20px 0 0; max-height:80%; padding:0 12px 24px;}
.alert-box .box.bottom .popup-head {margin:0 0 24px;}
.alert-box .box.bottom .popup-head:before {display:block; content:""; width:40px; height:4px; background:#a6abb3; border-radius:50px; margin:10px auto;}
.alert-box .box.center {left:50%; top:45%; border-radius:8px; transform:translate(-50%,-50%); padding:24px; width:calc(100% - 40px);}
.alert-box.fixed {pointer-events:inherit; opacity:1;}
.alert-box.fixed .box.active {pointer-events:inherit; opacity:1;}
.alert-box.fixed .box.active.bottom {bottom:0;}
.alert-box.fixed .box.active.center {top:50%;}

/* guide-box */
.guide-box h2 {text-align:center; margin:0 0 8px; font-size:18px; font-weight:bold; color:#323232;}
.guide-box h2.error:before {display:block; content:""; margin:0 auto 8px; width:40px; height:40px; background:url('../images/icon_error.png') no-repeat center / cover;}
.guide-box h2.info:before {display:block; content:""; margin:0 auto 8px; width:40px; height:40px; background:url('../images/icon_info.png') no-repeat center / cover;}
.guide-box h2.appinfo:before {display:block; content:""; margin:0 auto 8px; width:40px; height:40px; background:url('../images/icon_info.png') no-repeat center / cover;}
.guide-box h2.warning:before {display:block; content:""; margin:0 auto 8px; width:40px; height:40px; background:url('../images/icon_warning2.png') no-repeat center / cover;}
.guide-box h2.logo:before {display:block; content:""; margin:0 auto 8px; width:200px; height:200px; background:url('../images/logo_red.png') no-repeat center / cover;}
.guide-box p {text-align:center; font-size:16px; font-weight:500; color:#5B5A5D;}
.guide-box.center {position:fixed; left:50%; top:45%; transform:translate(-50%,-50%); width:100%;}

/* error-guide-box */
.error-guide-box h2 {text-align:center; margin:0 0 8px; font-size:18px; font-weight:bold; color:#323232;}
.error-guide-box h2.error:before {display:block; content:""; margin:0 auto 8px; width:80px; height:80px; background:url('../images/icon_error.png') no-repeat center / cover;}
.error-guide-box h2.info:before {display:block; content:""; margin:0 auto 8px; width:80px; height:80px; background:url('../images/icon_info.png') no-repeat center / cover;}
.error-guide-box h2.appinfo:before {display:block; content:""; margin:0 auto 8px; width:80px; height:80px; background:url('../images/icon_info.png') no-repeat center / cover;}
.error-guide-box h2.warning:before {display:block; content:""; margin:0 auto 8px; width:80px; height:80px; background:url('../images/icon_warning2.png') no-repeat center / cover;}
.error-guide-box h2.logo:before {display:block; content:""; margin:0 auto 8px; width:200px; height:200px; background:url('../images/logo_red.png') no-repeat center / cover;}
.error-guide-box p {text-align:center; font-size:16px; font-weight:500; color:#5B5A5D;}
.error-guide-box.center {position:fixed; left:50%; top:45%; transform:translate(-50%,-50%); width:100%;}

/* mypage-box */
.mypage-box .mypage-main {background:#fff; border:1px solid #e9e9e9; border-radius:8px; padding:24px;}
.mypage-box .mypage-main .list-head {displaY:flex; flex-wrap:wrap; align-items:center; margin:0 0 24px;}
.mypage-box .mypage-main .list-head > img {width:55px; height:55px; border-radius:50%; object-fit:cover;}
.mypage-box .mypage-main .list-head > div {flex:1; min-width:0; padding:0 0 0 8px;}
.mypage-box .mypage-main .list-head > div > div {display:flex; flex-wrap:wrap; align-items:center;}
.mypage-box .mypage-main .list-head > div > div.my-info span.master {display: block; margin: 0 8px 0 0; padding:0 10px 0 10px; background-color: gold; border-radius: 10px; overflow: hidden;}
.mypage-box .mypage-main .list-head > div > div.my-info span.info {display:flex; flex-wrap:wrap; align-items:center; height:20px; border-radius:4px; padding:0 8px; font-size:12px; color:#fff;}
.mypage-box .mypage-main .list-head > div > div.my-info span.bu {background:#4C89ED;}
.mypage-box .mypage-main .list-head > div > div.my-info span.gr {background:#B2B2B2;}
.mypage-box .mypage-main .list-head > div > div.my-info span.og {background:#FFA930;}
.mypage-box .mypage-main .list-head > div > div.my-info span.re {background:#FF3936;}
.mypage-box .mypage-main .list-head > div > div p {font-size:18px; font-weight:600; color:#323232; line-height:1;}
.mypage-box .mypage-main .list-head > div > div a {margin:0 0 0 8px; height:18px; padding:0 8px; font-size:14px; color:#FF3936; line-height:1; border:1px solid #FF3936; border-radius:4px; display:flex; flex-wrap:wrap; align-items:center;}
.mypage-box .mypage-main .list-head > div > small {text-decoration: underline; display:block; line-height:1; font-size:16px; font-weight:500; color:#5b5a5d; margin:5px 0 0;}
.mypage-box .mypage-main .list-body ul {display:flex; flex-wrap:wrap;}
.mypage-box .mypage-main .list-body ul li {flex:1; min-width:0; position:relative;}
.mypage-box .mypage-main .list-body ul li:after {position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:32px; background:#e9e9e9; content:"";}
.mypage-box .mypage-main .list-body ul li:last-of-type:after {display:none;}
.mypage-box .mypage-main .list-body ul li a {display:block;}
.mypage-box .mypage-main .list-body ul li a p {text-decoration: underline; text-decoration-color: #323232; display: flex; align-items: center; justify-content: center; margin: 0; text-align:center; font-size:14px; font-weight:500; color:#5b5a5d;}
.mypage-box .mypage-main .list-body ul li a p img.icon-img {width: 35px; height: 35px;}
.mypage-box .mypage-main .list-body ul li a strong {display:block; text-align:center; font-size:16px; font-weight:600; color:#323232;}
.mypage-box .mypage-main .list-body ul li a strong div.bar {width: 80%; margin-left:10%; margin-top:5%; height:16px; background-color: #e0e0e0; border-radius: 10px; overflow: hidden;}
.mypage-box .mypage-main .list-body ul li a strong div.bar div.fill {height: 100%; background-color: #00E3E3; font-size: 11px; font-weight: 800;}
.mypage-box .mypage-cate {background:#fff; border:1px solid #e9e9e9; border-radius:8px; margin:24px 0 0;}
.mypage-box .mypage-cate ul li {border-bottom:1px solid #e9e9e9;}
.mypage-box .mypage-cate ul li:last-of-type {border:0;}
.mypage-box .mypage-cate ul li a {font-size:16px; font-weight:600; color:#323232; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; height:48px; padding:0 24px;}
.mypage-box .mypage-cate ul li div {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; height:48px; padding:0 24px;}
.mypage-box .mypage-cate ul li p {font-size:16px; font-weight:600; color:#323232;}
.mypage-box .mypage-cate ul li small {font-size:14px; font-weight:500; color:#5b5a5d;}
.mypage-box .mypage-cate ul li a div.switch {width:40px; height:20px; padding:0; background:#d9d9d9; border-radius:50px; position:relative; transition:all ease 0.5s;}
.mypage-box .mypage-cate ul li a div.switch:before {position:absolute; left:1px; top:1px; width:18px; height:18px; background:#fff; border-radius:50px; content:""; transition:all ease 0.5s;}
.mypage-box .mypage-cate ul li a.active div.switch {background:#FF3936;}
.mypage-box .mypage-cate ul li a.active div.switch:before {left:21px;}

/* notice-box */
.notice-box {background:#fff; border:1px solid #e9e9e9; border-radius:8px; padding:12px 24px;}
.notice-box ul {padding:0 0 0 12px;}
.notice-box ul li {list-style:disc; font-size:14px; font-weight:500; color:#5b5a5d;}
.notice-box ul li img {margin:0 3px 0 0; position:relative; top:6.5px; width:9px;}

/* category-box */
.category-box > div {margin:0 0 8px;}
.category-box > div:last-of-type {margin:0;}
.category-box a {margin:0 0 8px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e9e9e9; border-radius:8px; height:48px; padding:0 24px;}
.category-box a:last-of-type {margin:0;}
.category-box a p {flex:1; min-width:0; padding:0 15px 0 0; font-size:16px; font-weight:600; color:#323232;}
.category-box a:after {display:block; content:""; width:20px; height:20px; background:url('../images/icon_category.png') no-repeat center / cover;}

/* notice-list-box */
.notice-list-box ul li {background:#fff; border-radius:8px; border:1px solid #e9e9e9; margin:0 0 12px; padding:12px 24px;}
.notice-list-box ul li:last-of-type {margin:0;}
.notice-list-box ul li .list-head a {display:flex; flex-wrap:wrap; align-items:center;}
.notice-list-box ul li .list-head a:after {display:block; content:""; width:24px; height:24px; background:url('../images/icon_toggle.png') no-repeat center / cover;}
.notice-list-box ul li .list-head a div {flex:1; min-width:0; padding:0 5px 0 0; display:flex; flex-wrap:wrap; align-items:center;}
.notice-list-box ul li .list-head a div span {height:21px; border-radius:4px; padding:0 8px; font-size:14px; display:flex; flex-wrap:wrap; align-items:center;}
.notice-list-box ul li .list-head a div span.bu {background:#4880EE; color:#fff;}
.notice-list-box ul li .list-head a div span.gr {background:#A6ABB3; color:#fff;}
.notice-list-box ul li .list-head a div p {width:100%; margin:4px 0 0; font-size:16px; font-weight:600; color:#323232; word-break:normal;}
.notice-list-box ul li .list-head a div time {width:100%; margin:4px 0 0; font-size:14px; font-weight:200; color:#5b5a5d;}
.notice-list-box ul li .list-body {display:none; margin:12px 0 0; padding:12px; background:#F6F6F6;}
.notice-list-box ul li .list-body p {font-size:14px; color:#5b5a5d;}
.notice-list-box ul li .list-body pre {font-size:14px; color:#5b5a5d; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; font-weight:500;}
.notice-list-box ul li .answer {margin:0; padding:12px; background:#F6F6F6;}
.notice-list-box ul li .answer.time {width:100%; margin:4px 0 0; padding:0; background:#fff; font-size:14px; font-weight:200; color:#5b5a5d;}
.notice-list-box ul li .answer time {width:100%; margin:4px 0 0; font-size:14px; font-weight:200; color:#5b5a5d;}
.notice-list-box ul li .answer pre {font-size:14px; color:#5b5a5d; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; font-weight:500;}
.notice-list-box ul li .list-body img {max-width:100%;}
.notice-list-box ul li.active .list-head a:after {transform:rotate(180deg);}
.notice-list-box ul li.active .list-body {display:block;}

/* loading-box */
.loading-box {pointer-events:none; opacity:0; transition:all ease 0.5s; position:fixed; left:50%; top:0; width:100%; height:100%; transform:translateX(-50%); background:rgba(0,0,0,0.7); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; z-index: 9999;}
.loading-box.active {pointer-events:inherit; opacity:1;}
.loader {
  --d:45px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 
    calc(1*var(--d))      calc(0*var(--d))     0 0,
    calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
    calc(0*var(--d))      calc(1*var(--d))     0 2px,
    calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
    calc(-1*var(--d))     calc(0*var(--d))     0 4px,
    calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
    calc(0*var(--d))      calc(-1*var(--d))    0 6px;
  animation: l27 1s infinite steps(8);
}
@keyframes l27 {
  100% {transform: rotate(1turn)}
}

/* swiper-box */
.swiper-box {margin:12px 0 0;}
.swiper-box .swiper-slide .inner {background-size:cover; background-position:center; border:1px solid #e9e9e9; border-radius:8px; display:block;}
.swiper-box .swiper-slide .inner:after {display:block; content:""; padding-bottom:150%;}
.swiper-box .swiper-pagination {position:static; margin:12px 0 0;}
.swiper-box .swiper-pagination span {opacity:1; margin:0 2.5px; width:6px; height:6px; background:#b5b5b5;}
.swiper-box .swiper-pagination span.swiper-pagination-bullet-active {background:#5B5A5D;}

/* modal-box */
.modal-box {pointer-events:none; opacity:0; transition:all ease 0.5s; z-index:9995; position:fixed; left:50%; top:0; width:100%; transform:translateX(-50%); height:100%; background:rgba(0,0,0,0.7);}
.modal-box .box {position:absolute; left:50%; top:50%; width:100%; transform:translate(-50%,-50%); max-width:calc(100% - 40px); border-radius:8px; overflow:hidden;}
.modal-box .box .list-head {position:absolute; right:12px; top:12px;}
.modal-box .box .list-head a {display:block; font-size:0; width:44px; height:44px; background:url('../images/icon_modal_close.png') no-repeat center / cover;}
.modal-box .box .list-body .list-image {background-size:cover; background-position:center;}
.modal-box .box .list-body .list-image:after {display:block; content:""; padding-bottom:120%;}
.modal-box .box .list-body .list-button {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; background:#fff;}
.modal-box .box .list-body .list-button a {display:flex; flex-wrap:wrap; align-items:center; height:44px; padding:0 20px; font-size:14px; font-weight:500;}
.modal-box .box .list-body .list-button a.today {color:#a0a0a0;}
.modal-box.on {pointer-events:inherit; opacity:1;}
.modal-box.active {pointer-events:none; opacity:0;}

/* iframe */
.fullscreen-iframe {position:fixed; top:0; left:100%; width:100vw; height:100vh; border:none; z-index:9999; background:#fff;}