/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Roboto:wght@400;500;700;900&display=swap');

@font-face {
    font-family: 'Elegance';
    src: url("../font/Rounded_Elegance.ttf") format("truetype");
    font-style: normal;
}

html{
    -ms-content-zooming : none;
    -ms-touch-action : pan-x pan-y;
}


#skipNav{position:fixed; width:100%; overflow:hidden; z-index:999;}
#skipNav a{display:block; height:0px; margin-bottom:0; overflow:hidden; text-align:center;}
#skipNav a:hover,
#skipNav a:focus,
#skipNav a:active{height:3.125rem; line-height:3.125rem; color:#fff; background:#333;}

.hidden{
    position: absolute;
    width: 0!important;
    height: 0!important;
    font-size: medium;
    line-height: normal;
    word-break: break-all;
    overflow: hidden!important;
    z-index: -10;
}

#wrap{width: 100%; height: 100%; min-height: 100vh; overflow: hidden; background:#fafafa;}
/* #wrap.sub{background:#f2f2f5;}
#wrap.sub footer{background:#e9e9ed;} */

#wrap.pin,
#wrap.charge,
#wrap.shop,
#wrap.customer,
#wrap.mypage,
#wrap.message{background:#f2f2f5;}

#wrap.pin footer,
#wrap.charge footer,
#wrap.shop footer,
#wrap.customer footer,
#wrap.mypage footer,
#wrap.message footer{background:#e9e9ed;}


/* #content{} */
.container{width: 1100px; margin: 0 auto;}


/* header */
header{position:fixed; left: 0; top: 0; width: 100%; height: 5rem; z-index:99; background:none; transition:height .3s, top .3s;}
header::after{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; background:linear-gradient(90deg, rgba(0,198,255,1) 55%, rgba(8,228,168,1) 100%); opacity: 0; transition:height .3s, opacity .3s;}

header .container{display:flex; height: 5rem; align-items: center; align-items: center;}
header h1{margin-right: auto;}
header h1 a{display: block; width: 135px; height: 35px; text-indent:-9999px; overflow: hidden; background:url(../images/common/logo-w.svg) 0 50% no-repeat; background-size:100% auto;}

header nav{display:flex; align-items: center; gap:40px;}
header nav .nav{display:flex; align-items: center;}
header nav .nav > li{position:relative;}
header nav .nav > li h3{color:#fff; font-weight:500;}
header nav .nav > li > h3 > a{display:block; height: 60px; line-height:60px; padding:0 25px; letter-spacing:0;}
header nav .nav > li > a:hover h3::after{width:100%;}
header nav .nav > li::after{content:''; position:absolute; left:50%; top:10px; margin-left:-3px; display:block; width:6px; height: 6px; border-radius:6px; background:#fff; opacity: 0; transition:all .3s;}
header nav .nav > li.active::after{top:5px; opacity: 1;}
header nav .nav > li:hover::after{top:5px; opacity: 1;}
    /* 2depth */
    header nav .nav > li > ul{position:absolute; left:50%; top:60px; height:130px; padding-top:10px; width:100%; text-align:center; transform:translate(-50%, 0); display:none;}
    header nav .nav > li > ul li a{display:block; font-size:.9375rem; color:#fff; padding:10px 0; opacity: .7; transition:opacity .3s}
    header nav .nav > li > ul li a:hover{opacity: 1;}

    /* header bg */
    #wrap header.scroll::after{opacity: 1;} /* scroll 일때만 배경 나오게 */
    #wrap.sub header::after{opacity: 1;}    /* sub에선 항상 배경 나오게 */

    /* menu hover */
    #wrap header.active{height:230px}
    #wrap header.active::after{opacity:1;}
    #wrap header.active nav .nav > li > ul{display: block;}
    #wrap header.hide{position:fixed; top: -5rem;}
    #wrap header.hide ul{display:none;}
    #wrap header.active.hide{height:5rem;}
    

header nav .nav__mem_menu{display:flex; align-items:center; gap:10px;}
header nav .nav__mem_menu li a{display:block; width: 80px; height: 26px; line-height: 26px; font-size: 0.75rem; text-align:center; color:#fff; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.7); border-radius:5rem; transition:border .3s, background .3s;}
header nav .nav__mem_menu li a:hover{border-color:rgba(255,255,255,1); background:rgba(255,255,255,.4);}

.nav__user_info{position:relative;}
    /* 안읽은 쪽지가 있을 때 */
    /* .nav__user_info.read_yn .profile .message--new-icon{display:block;} */
    /* .nav__user_info.read_yn .link__wrap .message{position:relative;}
    .nav__user_info.read_yn .link__wrap .message::after{content:''; position:absolute; right:5px; top:5px; display:block; width:7px; height:7px; background:#ff7200; border-radius:5px;} */
    /**/
.nav__user_info__link{display:flex; align-items:center; gap:12px;}
.nav__user_info__link::after{content:''; display:block; width:20px; height:20px; background:url(../images/icon/profile-open.png) 50% 50% no-repeat;}
.nav__user_info.active .nav__user_info__link::after{background-image:url(../images/icon/profile-close.png);}
.nav__user_info .profile{position:relative;}
.nav__user_info .profile::before{content:''; display:block; width:36px; height: 36px; border-radius:35px; background:url(../images/icon/icon-profile.svg) 50% 50% no-repeat #fff; background-size:50% auto; box-shadow:0 0 20px rgba(0,0,0,0.25);}
.nav__user_info .profile i{position:absolute; left:-7px; bottom:-4px;}
.nav__user_info .profile i img{width: 15px;}
.nav__user_info .profile .message--new-icon{position:absolute; right:-4px ; top:-2px; display:block; width:14px; height:14px; line-height:14px; text-align:center; background:#ff7200; color:#fff; border-radius:14px; font-size:10px;}
.nav__user_info .nick{color:#fff; font-size:.875rem; letter-spacing:0.025rem;}
    /**/
.nav__user_info__menu{position:absolute; right:0; top:50px; width:180px; padding:23px 25px 0; font-size:0.875rem; color:#777; box-sizing:border-box; overflow:hidden; background:#fff; border-radius:20px; box-shadow:0 4px 6px rgba(0,0,0,0.25); display:none;}
.nav__user_info__menu a{font-size:0.8rem;}
.nav__user_info__menu .greeting{line-height:1.4; color:#145e7d;}
.nav__user_info__menu .greeting span{display:block; color:#00c6ff;}
.nav__user_info__menu .price{padding:20px 0;}
.nav__user_info__menu .price .pin{display:block; text-align:right; color:#00c6ff; font-size:1.3rem;}
.nav__user_info__menu .link__wrap li + li{margin-top:5px;}
.nav__user_info__menu .link__wrap li a{display:block; height:34px; line-height:34px; text-align:center; border:1px solid #d2d2d2; border-radius:2px; transition:all .3s}
.nav__user_info__menu .link__wrap li a:hover{border-color:#145e7d; color:#145e7d;}
.nav__user_info__menu .link__wrap li a > i{padding-right:5px; font-size:0.875rem; vertical-align:middle;}
.nav__user_info__menu .link__wrap li a span{position:relative;}
.nav__user_info__menu .link__wrap li a span.new::after{content:''; position:absolute; right:-8px; top:-4px; display:block; width:5px; height:5px; border-radius:4px; background:#ff6347;}
.nav__user_info__menu .logout_btn{display:flex; align-items:center; justify-content: center; gap:10px; height:44px; margin:15px -25px 0; background:#f6f6f6; transition:background .3s;}
.nav__user_info__menu .logout_btn::before{content:''; display:block; width:20px; height: 20px; background:url(../images/icon/logout.png) 50% 50% no-repeat;}
.nav__user_info__menu .logout_btn:hover{background:#e2e2e2;}





/* footer */
footer{/*height: 140px;*/ background:#e7edef;}
footer .container{display:flex; align-items:center; justify-content:space-between; padding:2.5rem 0; font-size: 0.75rem; color:#7d949e; line-height: 1.4;}
footer .footer__info{flex:0 0 60%; margin-left:50px;}

footer .footer__info address{}
footer .footer__info address span{display:inline-block;}
footer .footer__info address span + span::before{content:''; display:inline-block; width: 1px; height: 10px; margin:0 10px; background:rgba(0,0,0,0.1);}

footer .footer__info .pageLink{margin:1rem 0 0;}
footer .footer__info .pageLink li{display:inline-block;}
footer .footer__info .pageLink li + li::before{content:''; display:inline-block; width: 1px; height: 10px; margin:0 10px; background:rgba(0,0,0,0.1);}
footer .footer__info .pageLink li a{font-weight:500;}

footer .other{flex:1 1 auto; text-align: right;}
footer .socialLink{display:flex; align-items:center; justify-content: flex-end; gap:6px;}
footer .socialLink li{}
footer .socialLink li a{display:block; width:103px; height: 31px; background-position:0 0; background-repeat:no-repeat; font-size:0; text-indent:-999px; overflow: hidden; transition:all .3s;}
footer .socialLink li:nth-child(1) a{background-image:url(../images/common/link-tele.png);}
footer .socialLink li:nth-child(1) a:hover{background-image:url(../images/common/link-tele-active.png);}
footer .socialLink li:nth-child(2) a{background-image:url(../images/common/link-kakao.png);}
footer .socialLink li:nth-child(2) a:hover{background-image:url(../images/common/link-kakao-active.png);}
footer .socialLink li:nth-child(3) a{background-image:url(../images/common/link-blog.png);}
footer .socialLink li:nth-child(3) a:hover{background-image:url(../images/common/link-blog-active.png);}

footer .pageLink li a b{font-weight:700; letter-spacing:0.025rem;}
footer .appLink{display:flex; align-items:center; justify-content: flex-end; gap:6px; margin:6px 0 0;}
footer .appLink li{}
footer .appLink li a{display:block; width: 103px; height: 30px; background-position:0 0; background-repeat:no-repeat; font-size:0; text-indent:-999px; overflow: hidden; transition:all .3s;}
footer .appLink li:nth-child(1) a{background-image:url(../images/common/app_googleplay.png);}
footer .appLink li:nth-child(2) a{background-image:url(../images/common/app_onestore.png);}
footer .appLink li:nth-child(3) a{background-image:url(../images/common/app_appstore.png);}
footer .appLink li:nth-child(1) a:hover{background-image:url(../images/common/app_googleplay-active.png)}
footer .appLink li:nth-child(2) a:hover{background-image:url(../images/common/app_onestore-active.png)}
footer .appLink li:nth-child(3) a:hover{background-image:url(../images/common/app_appstore-active.png)}





.scrollTop{position:fixed; right:30px; bottom:30px; display: none;}
.scrollTop a{display:block; width:50px; height: 50px; overflow:hidden; text-indent:-9999%; background:url(../images/icon/icon-scroll-top.png) 50% 0 no-repeat #fff; border-radius:5px; box-shadow:5px 5px 15px rgba(0,0,0,0.15); transition:all .3s;}
.scrollTop a:hover{background-position:50% -50px;}



@keyframes animation-active {
    0%{opacity: 0; position:relative; top:50px;}
    100%{opacity: 1; position:relative; top:0;}
}
.animation{opacity: 0;}
.animation-active{animation: animation-active 1 .5s; animation-fill-mode:forwards;}




.snb_wrap{border-top:1px solid #f2f2f2; background:#fff;}
.snb_nav{width:1100px; margin:0 auto; display:flex; align-items: center; justify-content: space-between;}
.snb_nav li{flex:1 1 auto; border-bottom:4px solid #fff; padding-top:4px; transition:all .3s;}
.snb_nav li:hover{border-color:#ddd}
.snb_nav li a{display:block; height: 45px; line-height:45px; font-size:.875rem; text-align:center; /*padding:0 28px;*/ transition:all .3s;}
.snb_nav li.active{border-color:#00b0ff}
.snb_nav li.active a{color:#00b0ff;}







/********************************************** common **********************************************/
.content_box{padding:25px; box-sizing:border-box; background:#fff; border-radius:10px; box-shadow:0 4px 6px rgba(0,0,0,0.15);}
.content_graybox{background:#f6f6f8; border-radius:10px; padding:10px; box-sizing:border-box;}




.title{display:flex; align-items:center; justify-content: space-between; gap:10px; font-size:0.875rem; box-sizing:border-box;}
.title__inner{display:flex; align-items: center; gap:3px}
.title h3{font-size:1.25rem; font-weight:500;}

/* form */
.form{}

/* input */
/* .input__style-line{height:42px; border:1px solid rgba(78, 121, 139, 0.7); padding:0 20px; border-radius:42px;}
.input__style-line:focus{}
.input__style-shadow{} */



.form__wrap{font-size:0.875rem;}
.form__col__wrap{display:flex; align-items:center; flex-direction:column; gap:2rem;}

.form__wrap select{width:100%; height:42px; border:1px solid rgba(78, 121, 139, 0.7); border-radius:42px; padding:0 40px 0 20px; background:url(../images/icon/icon-select.png) right 50% no-repeat; outline: none; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
.form__wrap select::-ms-expand{display: none;}

.form__wrap input[type="text"],
.form__wrap input[type="password"],
.form__wrap input[type="tel"],
.form__wrap input[type="number"]{width:100%; height:42px; border:1px solid rgba(78, 121, 139, 0.7); padding:0 20px; border-radius:42px; box-sizing:border-box; transition:border .15s, box-shadow .15s;}
.form__wrap input[type="text"]:focus,
.form__wrap input[type="password"]:focus,
.form__wrap input[type="tel"]:focus,
.form__wrap input[type="number"]:focus{border-color:rgba(78,121,139,1); box-shadow:0 0 5px 1px rgba(78,121,139,.3)}

.form__wrap textarea{width:100%; height:250px; border:1px solid rgba(78, 121, 139, 0.7); padding:20px; border-radius:10px; box-sizing:border-box;}

.form__inner{position:relative; width:100%; display:flex; align-items:center; justify-content: space-between; gap:10px;}
/* .form__item{} */

.form__wrap input[type="text"].single_search{background: url(../images/icon/search.png) 15px 50% no-repeat #fff; padding-left:50px;}

.input__label{position:relative; width:100%; display:flex; flex-direction: column; gap:10px;}
.input__label label{font-weight:500;}
.input__label .validation{position:absolute; right:0; top:0; display:none;}
.input__label .validation.inline-block{position:relative; right:auto; top:auto; font-size:.75rem;}
.input__label .validation.active{display:block;}
.input__label .hasbtn{display:flex; align-items:center; justify-content: space-between; gap:10px;}
.input__label .hasbtn input{flex:1 1 calc(100% - 100px);}
.input__label .hasbtn a{flex:1 0 100px; font-size:13px;}

.has-remove{position:relative;}
.has-remove input{padding-right:40px!important;}
.has-remove .btn__value-remove{position:absolute; right: 0; top:50%; transform:translateY(-50%); display:block; width:40px; height: 40px; background:url(../images/icon/icon-remove.svg) 50% 50% no-repeat; background-size:24px auto; font-size:0; text-indent:-9999%; overflow: hidden;}

.validation{font-size:.75rem;}

.form__inner .length_check{position:absolute; right:15px; top:50%; font-size:12px; transform:translateY(-50%);}

.input__search{position:relative; width:100%; display:flex; flex-direction: column; gap:10px;}
.input__search label{position:absolute; left:5px; top:0; display:block; width: 42px; height: 42px; overflow:hidden; font-size:0; text-indent:-9999px; background:url(../images/icon/search.png) 50% 50% no-repeat;}
.input__search input{padding-left:50px!important;}






.checkbox__group{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;}
.checkbox{position:relative;}
.checkbox.inline-block{display:inline-block;}
.checkbox input{display:none;}
.checkbox label{display:flex; align-items:center; gap:7px; font-size:13px; line-height:20px; height:20px; text-overflow:ellipsis; white-space: nowrap; transition:color .15s; cursor: pointer; width:fit-content}
.checkbox label:before{content:''; display:block; width:20px; height:20px; 
    background:url(../images/icon/check-off.svg) 50% 50% no-repeat #fff;
    background-size:55% auto;
    border:1px solid #a4bec9; border-radius:20px; box-sizing:border-box; transition:background .15s, border .15s;}
.checkbox input:checked + label:before{background-image:url(../images/icon/check-on.svg); background-color:#00c6ff; border-color:#00c6ff;}
.checkbox.checkbox-success input:checked + label:before{background-color:#14e1a9; border-color:#14e1a9;}
.checkbox.checkbox-success input:checked+label{color:#14e1a9;}
.checkbox.checkbox-info input:checked+label:before{background-color:#49b6d6; border-color:#49b6d6;}
.checkbox.checkbox-info input:checked+label{color:#49b6d6;}
.checkbox.checkbox-danger input:checked+label:before{background-color:#f4514a; border-color:#f4514a;}
.checkbox.checkbox-danger input:checked+label{color:#f4514a;}
.checkbox.checkbox-warning input:checked+label:before{background-color:#f59c1a; border-color:#f59c1a;}
.checkbox.checkbox-warning input:checked+label{color:#f59c1a;}
.checkbox.checkbox-inverse input:checked+label:before{background-color:#2d353c; border-color:#2d353c;}
.checkbox.checkbox-inverse input:checked+label{color:#2d353c;}






.selectbox{position:relative; font-size:0.875rem; z-index:2;}
.selectbox .selected{display:block; height:35px; line-height:33px; padding:0 52px 0 25px; border:1px solid #e6e6e6; border-radius:35px; box-sizing:border-box; background:url(../images/icon/icon-select.png) right 50% no-repeat; transition:all .3s;}
.selectbox .selected.active{border-color:#00c6ff;}
.selectbox .option{position:absolute; left:0; top:45px; min-width:100%; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 4px 6px rgba(0,0,0,0.15); display:none;}
.selectbox .option .value{display:block; line-height:35px; overflow:hidden; text-overflow:ellipsis; word-break: keep-all; padding:0 15px; transition:background .3s, color .3s;}
.selectbox .option .value:hover{background:#00c6ff; color:#fff;}






input.input_shadow{height:50px; line-height:30px; padding:10px 20px; outline:none; box-sizing:border-box; border-radius:25px; border:1px solid #fff; background:#fff; box-shadow:0px 4px 6px 0 rgba(0,0,0,0.1); transition:border .3s;}
input.input_shadow:focus{border-color:rgba(78, 121, 139, 0.7);}

input.input_border{height:48px; line-height:28px; padding:10px 20px; outline: none; box-sizing:border-box; border-radius:25px; border:1px solid rgba(78, 121, 139, 0.5); background:#fff; transition:border .3s;}
input.input_border:focus{border-color:rgba(78, 121, 139, 1)}



.button__wrap{display:flex; align-items:center; justify-content: space-between; gap:10px;}
.button__col__wrap{flex-direction:column;}
.button__inner{display:flex; align-items:center; justify-content: space-between; gap:5px;}

.btn{position:relative; z-index:1; display:inline-block; box-sizing:border-box; text-align:center; vertical-align:middle; transition:all .2s; border-radius:3px; outline:none;}
.btn > i{font-size:14px; margin:-1px 0 1px; vertical-align:middle;}
.btn > i{color:#fff;}

.h25{height:25px;padding:0 12px;font-size:11px;line-height:25px; border-radius:25px;}
.h30{height:30px;padding:0 15px;font-size:13px;line-height:30px; border-radius:30px;}
.h35{height:35px;padding:0 15px;font-size:13px;line-height:35px; border-radius:35px;}
.h40{height:40px;padding:0 10px;font-size:16px;line-height:40px; border-radius:40px;}
.h42{height:42px;padding:0 10px;font-size:16px;line-height:42px; border-radius:42px;}
.h45{height:45px;padding:0 15px;font-size:16px;line-height:45px; border-radius:45px;}
.h50{height:50px;padding:0 20px;font-size:16px;line-height:50px; border-radius:50px;}

.w80{width:80px;}
.w100{width:100px;}
.w120{width:120px;}
.wfull{width:100%;}


.btn_red{background:#ff6347;color:#fff}.btn_red:active,.btn_red:focus,.btn_red:hover{background:#ff442d}
.btn_blu{background:#00b0ff;color:#fff}.btn_blu:active,.btn_blu:focus,.btn_blu:hover{background:#008fff}
.btn_green{background:#14e1a9;color:#fff}.btn_green:active,.btn_green:focus,.btn_green:hover{background:#00c690}
.btn_yellow{background:#ffcc00;color:#fff}.btn_yellow:active,.btn_yellow:focus,.btn_yellow:hover{background:#ffb700}
.btn_sky{background:#49b6d6;color:#fff}.btn_sky:active,.btn_sky:focus,.btn_sky:hover{background:#3f9eba}
.btn_orange{background:#ffa500;color:#fff}.btn_orange:active,.btn_orange:focus,.btn_orange:hover{background:#ff8800}
.btn_dark{background:#b5c1c8;color:#fff}.btn_dark:active,.btn_dark:focus,.btn_dark:hover{background:#95a7b2}
.btn_mdark{background:#6f8191;color:#fff}.btn_mdark:active,.btn_mdark:focus,.btn_mdark:hover{background:#8ea3b6}
.btn_hdark{background:#414c5e;color:#fff}.btn_hdark:active,.btn_hdark:focus,.btn_hdark:hover{background:#2e384a}
.btn_gray{background:#c9c9c9;color:#444;}.btn_gray:active,.btn_gray:focus,.btn_gray:hover{background:#acacac}
.btn_dblu{background:#46477a;color:#fff}.btn_dblu:active,.btn_dblu:focus,.btn_dblu:hover{background:#343567}

.btn_line{background:#fff; color:rgba(20,94,125,1); border:1px solid rgba(20,94,125,.5);}
.btn_line:active,.btn_line:focus,.btn_line:hover{color:rgba(20,94,125,1); border-color:rgba(20,94,125,1);}
.btn_line > i{color:rgba(20,94,125,1);}

.btn_line_blue{background:#fff; color:#00b3fe; border:1px solid #4cd7ff;}
.btn_line_blue:active,.btn_line_blue:focus,.btn_line_blue:hover{border-color:#00b3fe;}

.btn_white{background:#e3ebee; color:#6b90a0; border:1px solid #b0cad5;}
.btn_white:active,.btn_white:focus,.btn_white:hover{background:#d6e2e6; color:#6b90a0; border-color:#94b5c3;}
.btn_white > i{color:rgba(20,94,125,1);}

.btn_gra{background:linear-gradient(90deg, #00b4ff 0%, #008aff 100%); color:#fff;}
.btn_gra:active, .btn_gra:focus,.btn_gra:hover{box-shadow:0 0 5px 1px rgba(0, 138, 255, .5);}

.btn_shadow{background:#fff; box-shadow:0 4px 6px rgba(0,0,0,.15); color:#00c8fa;}

/* 모두읽음 */
.btn__allread{font-size:14px; padding:0 15px;}


/* 비활성화 */
.btn[disabled],
.btn.disabled{background:#eee!important;color:#bbb!important; box-shadow:none!important; transition:all .5s;}







.table{width:100%; font-size:0.8125rem;}
.table .subject{text-align:left; padding:10px 20px;}
.table .subject a{display: block;}
.table .tleft{text-align:left;}


.table--basic th,
.table--basic td{padding:10px 15px; text-align:center;}
.table--basic thead th{height:20px; background:#f6f6f8;}
.table--basic thead th:first-child{border-radius:5px 0 0 5px}
.table--basic thead th:last-child{border-radius:0 5px 5px 0}
.table--basic tbody tr{border-bottom:1px solid #ebebee; transition:all .3s;}
.table--basic tbody tr:hover{background:rgba(0,176,255,.05); border-color:rgba(20,94,125,.2);}


.table--bbs th,
.table--bbs td{height:20px; padding:10px 15px; font-size:12px; text-align:center;}
.table--bbs thead{border-bottom:2px solid #83a1ae;}
.table--bbs tbody th,
.table--bbs tbody td{border-bottom:1px solid rgba(131,161,174,.5);}
.table--bbs .subject{font-size:14px; font-weight:500;}


.table--bbs-view thead tr:nth-of-type(1){border-radius:3px; color:#fff;}
.table--bbs-view thead tr:nth-of-type(1) th,
.table--bbs-view thead tr:nth-of-type(1) td{background:#00c7fb;}
.table--bbs-view thead tr:nth-of-type(1) th:first-child,
.table--bbs-view thead tr:nth-of-type(1) td:first-child{ border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
.table--bbs-view thead tr:nth-of-type(1) th:last-child,
.table--bbs-view thead tr:nth-of-type(1) td:last-child{border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
.table--bbs-view thead th{height:30px; text-align:left; font-size:1rem;  font-weight:700; padding:10px 15px;}
.table--bbs-view thead td{height:35px; padding:0 15px;}
.table--bbs-view thead td strong{font-weight:700;}
.table--bbs-view thead td:last-child{text-align:right;}
.table--bbs-view tbody{background:#d8fff9; border-radius:3px;}
.table--bbs-view tbody td{height:300px; vertical-align: top; padding:20px; font-size: 14px; line-height:1.8; word-break:break-all; overflow: hidden;}
.table--bbs-view img,
.table--bbs-view video,
.table--bbs-view iframe{max-width: 100%;}


.table--bbs-write thead td{height:35px; padding:0 15px;}
.table--bbs-write thead td strong{font-weight:700;}
.table--bbs-write thead td:last-child{text-align:right;}
.table--bbs-write tbody{background:#f6f6f8; border-radius:3px; overflow: hidden;}
.table--bbs-write tbody td textarea{width:100%; height:360px; font-size:14px; line-height: 1.8; box-sizing:border-box; background:transparent; outline:none; padding:20px; resize:none;}




/* 게시글 write 헤더 */
.bbs__write-head{position:relative; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:5px; height:45px; border-radius:45px; background:#fff; box-shadow:0 4px 6px rgba(0,0,0,.15); box-sizing:border-box;}
.bbs__write-head .input__label label{position:absolute;}
.bbs__write-head .input__label input{height:35px!important; line-height: 35px;; background:#f6f6f8; border-color:#e6e6ec!important;}
.bbs__write-head .input__label.recieve_user label{position:absolute; left:15px; top:50%; transform:translateY(-50%)}
.bbs__write-head .input__label.recieve_user input{padding-left:100px;}
.bbs__write-head .input__label.subject input{padding-right:150px;}
.bbs__write-head .input__label.recieve_user-search .btn__user_search{position:absolute; right:4px; top:4px; display:block; width: 25px; height: 25px; border-radius:25px; overflow:hidden; font-size:0; text-indent:-9999px; background:url(../images/icon/bbs-add-friend.png) 50% 50% no-repeat #fff; border:1px solid #e6e6ec; transition:border .3s;}
.bbs__write-head .input__label.recieve_user-search .btn__user_search:hover{border-color:#638898;}
.bbs__write-head select{height:35px; line-height:33px; border:1px solid #e6e6e6;}
/* .bbs__write-head .selectbox, */
.bbs__write-head select:first-child,
.bbs__write-head .input__label:first-child{flex:1 0 220px}
.bbs__write-head .subject_length{position:absolute; right:20px; top:50%; font-size:12px; transform:translateY(-50%);}



/* 게시글 읽음 */
.read_Y .subject{opacity: .6;}




.pin__card{position:relative; display:flex; align-items:center; justify-content: center; height:170px; border-radius:10px; background:linear-gradient(160deg, #00c6ff 45%, #08e4a8 80%);}
.pin__card strong{position:absolute; left:20px; top:20px; color:#fff; font-size:0.875rem;}
.pin__card .price{color:#fff; font-size:2rem;}
.pin__card .price .pin{padding-left:45px; background-image:url(../images/icon/icon-pin-w.svg); background-size:22px auto;}


.price{color:#145e7d; font-size:1rem;}
.price .pin{display:inline-block; padding-left:22px; background:url(../images/icon/icon-pin.svg) 0 40% no-repeat; background-size:13px auto; font-family:'Elegance'; letter-spacing:0.025rem;}


.pin__total dl{display:flex; flex-wrap: wrap; align-items: center; gap:10px 0; font-weight:500; justify-content: space-between;}
.pin__total dl dt{flex:1 1 80px; font-size:15px}
.pin__total dl dd{flex:1 1 calc(100% - 80px); font-size:16px; text-align:right;}
.pin__total .total{font-size:20px; font-weight:700; color:#08d9a0;}
.pin__total .total_won{font-size:20px; font-weight:700;}




/* 4자리 원형 비밀번호/인증번호 */
.form_certify{display:flex; align-items:center; justify-content: space-between; gap:10px;}
.form_certify .certify_input{width:60px; height: 60px; line-height: 60px; text-align:center; font-size:30px; border-radius:60px; border:1px solid rgba(78, 121, 139, .5); transition:box-shadow .15s;}
.form_certify .certify_input.done{box-shadow:0 0 0 4px rgba(78, 121, 139, .15)}




.path{padding:20px 0 35px;}
.path ul{display:flex; align-items:center; gap:10px;}
.path ul li{font-size:0.85rem; color:#888; letter-spacing:0;}
.path ul li + li::before{content:'>'; display:inline-block; margin-right:10px; font-weight:normal;}
.path ul li:last-child{font-weight:500;}


/* font color */
.tblue{color:#00b0ff;}
.tred{color:#e73d60;}
.torange{color:#ff1e00;}


.no_content{width:100%; text-align:center; font-size:.875rem; padding:2rem 0; opacity: .5;}


.pagination{display:flex; align-items: center; justify-content: center; margin:1.5rem 0 0;}
.pagination a{width:26px; height: 26px; display:flex; align-items: center; justify-content: center; font-size:0.75rem; border-radius:25px; border:1px solid transparent; background:transparent; transition:all .3s;}
.pagination a.page_first,
.pagination a.page_last,
.pagination a.page_prev,
.pagination a.page_next{text-indent:-9999%; overflow: hidden; background-position:50% 50%; background-repeat:no-repeat; border:1px solid #e5e5e5; background-color:#fff;}
.pagination a.page_first{background-image:url(../images/icon/btn_pagination_first.png); margin-right:5px;}
.pagination a.page_last{background-image:url(../images/icon/btn_pagination_last.png); margin-left:5px;}
.pagination a.page_prev{background-image:url(../images/icon/btn_pagination_prev.png); margin-right:20px;}
.pagination a.page_next{background-image:url(../images/icon/btn_pagination_next.png); margin-left:20px;}
.pagination a:hover{border-color:rgba(78, 121, 139, 0.7);}
.pagination a.active{background:#00c6ff; border-color:#00c6ff; color:#fff;}


/* page new */
/* #pagingul{display:flex; align-items: center; justify-content: center; margin:1.5rem 0 0;}
#pagingul li a{display:inline-block; width:26px; height: 26px; display:flex; align-items: center; justify-content: center; font-size:0.75rem; border-radius:25px; border:1px solid transparent; background:transparent; transition:all .3s;}
#pagingul #prev,
#pagingul #next{text-indent:-9999%; overflow: hidden; background-position:50% 50%; background-repeat:no-repeat; border:1px solid #e5e5e5; background-color:#fff;}
#pagingul #prev{background-image:url(../images/icon/btn_pagination_prev.png); margin-right:10px;}
#pagingul #next{background-image:url(../images/icon/btn_pagination_next.png); margin-left:10px;}
#pagingul a:hover{border-color:rgba(78, 121, 139, 0.7);}
#pagingul li.on a{background:#00c6ff; border-color:#00c6ff; color:#fff;} */






/* 상품 리스트 */
/* .prd__list{} */
.sub .prd__list{display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ gap: 20px;}
.sub .prd__item{width:calc(20% - 16px);}
.prd__item{padding:15px 15px 10px; box-sizing:border-box; background:#fff; box-shadow:0px 4px 6px 0 rgba(0,0,0,0.1); border-radius:10px;}
.prd__item .photo{position:relative; width: 100%; padding-bottom:100%; overflow: hidden;}
.prd__item .photo img{position:absolute; left: 0; top: 0; right: 0; bottom:0; margin:auto; max-width: 100%; transition:all .3s;}
.prd__item:hover .photo img{transform:scale(1.1);}
.prd__item dl{margin:1rem 0 0; height: 50px;}
.prd__item dl dt{font-size: 0.75rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.prd__item dl dd{font-size:1.25rem; font-weight: 700; margin:5px 0 0;}


/* 브랜드 리스트 */
.brand__list{display:flex; flex-wrap:wrap; align-items:center; /*justify-content: space-between;*/ /*gap:20px;*/}
/* .brand__item{flex:0 0 calc(20% - 16px); padding:5px; box-sizing:border-box; background:#fff; box-shadow:0px 4px 6px 0 rgba(0,0,0,0.1); border-radius:10px;}
.brand__item a{display:block;}
.brand__item .photo{position:relative; width: 100%; padding-bottom:55%; overflow: hidden;}
.brand__item .photo img{position:absolute; left: 0; top: 0; right: 0; bottom:0; margin:auto; max-width: 100%; max-height:100%; transition:all .3s;}
.brand__item:hover .photo img{transform:scale(1.1);}
.brand__item p{height:20px; text-align:center; font-size:0.875rem; margin:10px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} */

/* .brand__item{flex:0 0 calc(20% - 16px); padding:5px; box-sizing:border-box; border:1px solid #eee; border-radius:10px; transition:all .3s;}
.brand__item:hover{border-color:#999;}
.brand__item a{display:block;}
.brand__item .photo{position:relative; width: 100%; padding-bottom:55%; overflow: hidden;}
.brand__item .photo img{position:absolute; left: 0; top: 0; right: 0; bottom:0; margin:auto; max-width: 100%; max-height:100%; transition:all .3s;}
.brand__item:hover .photo img{transform:scale(1.1);}
.brand__item p{height:20px; text-align:center; font-size:0.875rem; margin:10px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} */

.brand__item{flex:0 0 10%; padding:10px 5px; box-sizing:border-box; transition:all .3s; border-bottom:1px solid #eee; overflow: hidden;}
.brand__item:hover{border-color:#999;}
.brand__item a{display:block;}
.brand__item .photo{position:relative; width: 100%; padding-bottom:50%; overflow: hidden;}
.brand__item .photo img{position:absolute; left: 0; top: 0; right: 0; bottom:0; margin:auto; max-width: 90%; max-height:90%; transition:all .3s;}
.brand__item:hover .photo img{transform:scale(1.1);}
.brand__item p{height:20px; text-align:center; font-size:0.875rem; margin:10px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}


/* 친구 리스트 */
.friend__list{display:flex; flex-direction: column; align-items:stretch; gap:5px;}
.friend__item{height:40px; display:flex; align-items:center; justify-content: space-between; gap:7px; padding:0 4px; border-radius:40px; border:1px solid #e6e6ec; box-sizing:border-box; background:#fff; transition:border .3s;}
.friend__item:hover{border-color:#145e7d;}
.friend__item .icon{flex:0 0 30px;}
.friend__item .nickname{flex:1 1 auto; font-size:14px; font-weight:500; text-overflow:ellipsis; overflow:hidden; white-space: nowrap;}
.friend__item .pin{flex:1 0 80px; text-align:right; color:#81a0ad; font-size:12px;}
.friend__item .icon--btn_remove{flex:0 0 24px;}
.friend__item .userid{font-size:13px; color:#81a0ad; padding-right:10px;}
.friend__item .grouplength{font-size:13px; color:#81a0ad; padding-right:10px;}
    /* 즐겨찾기 */
.friend__item.hasfavorit{position:relative; width:calc(100% - 46px);}
.friend__item .favorit{position:absolute; right:-46px; top:50%; margin-top:-18px; width:36px; height:36px; background:#fff; border-radius:30px; box-shadow:0 4px 6px rgba(0,0,0,0.15);}
.friend__item .favorit .btn__add_favorit{width:100%; height:100%;}

.btn__add_favorit{display:inline-block; width:23px; height:23px; background:url(../images/icon/icon-favorite-off.png) 50% 50% no-repeat; transition:all .3s;}
.btn__add_favorit.active{background-image:url(../images/icon/icon-favorite-on.png);}
    /* 별명 수정 */
.btn__friend_nickname_modify{display:flex; align-items:center; gap:10px; width:fit-content;}
.btn__friend_nickname_modify i{width:18px; height:16px; background:url(../images/icon/modify.png) 50% 50% no-repeat; font-size:0; opacity: .3; transition:opacity .3s;}
.btn__friend_nickname_modify:hover i{opacity: 1;}
    /* 그룹명 수정 */        
.btn__group_nickname_modify{display:flex; align-items:center; gap:10px; width:fit-content;}
.btn__group_nickname_modify i{width:18px; height:16px; background:url(../images/icon/modify.png) 50% 50% no-repeat; font-size:0; opacity: .3; transition:opacity .3s;}
.btn__group_nickname_modify:hover i{opacity: 1;}

/* 멤버추가 버튼 */
.btn__modify-addmember{display:flex; align-items:center; justify-content: center; gap:10px; height:40px; font-size:14px; color:#7e9ca9; border-radius:40px; border:1px solid #ddd; transition:all .3s;}
.btn__modify-addmember::before{content:''; display:block; width:20px; height:20px; background:url(../images/icon/icon-add.svg) 50% 50% no-repeat; background-size:100% auto;}
.btn__modify-addmember:hover{border-color:#145e7d;}





/* pin list */
.pin__list{display:flex; flex-direction: column; align-items:stretch; gap:5px;}
.pin__item{height:46px; display:flex; align-items:center; justify-content: space-between; gap:10px; padding:0 10px 0 5px; border-radius:40px; box-sizing:border-box; box-shadow:0 2px 4px rgba(0,0,0,0.15); background:#fff; transition:border .3s;}
.pin__item .icon{flex:0 0 30px;}
.pin__item .pininfo{flex:1 1 auto;}
.pin__item .userid{font-size:14px; font-weight:500;}
.pin__item .date{font-size:10px; color:#7e9ca9;}
.pin__item .price{flex:1 1 80px; font-size:15px; text-align:right;}

/* 계좌 리스트 */
.account__list{display:flex; flex-direction: column; align-items:stretch; gap:5px;}
.account__item{height:40px; display:flex; align-items:center; justify-content: space-between; gap:7px; padding:0 10px; border-radius:40px; border:1px solid #e6e6ec; box-sizing:border-box; background:#fff; transition:border .3s;}
.account__item:hover{border-color:#145e7d;}
.account__item .account_name{flex:1 1 5%; font-size:12px;}
.account__item .account_num{flex:1 1 5%; color:#81a0ad; font-size:12px; text-align:right;}

/* 선택 */
.select__item{height:46px; border:3px solid transparent; cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0, .15);}
.select__item:hover{border-color:transparent}
.select__item.selected{border:3px solid #00c6ff;}








/********************************************** icon **********************************************/
.icon__wrap{display:flex; align-items:center; justify-content: center; gap:8px;}
.icon{transition:all .3s;}
span.icon{display:inline-block; vertical-align:middle;}
/* 핀 */
.icon--pin_send{width:32px; height:30px; background:url(../images/icon/icon-pin_send.png) 50% 50% no-repeat;}
.icon--pin_send-non{width:32px; height:30px; background:url(../images/icon/icon-pin_send-non.png) 50% 50% no-repeat;}
.icon--pin_send.small{width:22px; height:20px; background:url(../images/icon/icon-pin_send_s.png) 50% 50% no-repeat;}
.icon--pin_send-non.small{width:22px; height:20px; background:url(../images/icon/icon-pin_send-non_s.png) 50% 50% no-repeat;}
.icon--pin_send-request{width:32px; height:32px; background:url(../images/icon/icon-recieve-request.svg) 50% 50% no-repeat;}
.icon--pin_send-request.small{width:22px; height:22px; background:url(../images/icon/icon-recieve-request.svg) 50% 50% no-repeat;}

.icon--pin_recieve{width:32px; height:30px; background:url(../images/icon/icon-pin_recieve.png) 50% 50% no-repeat;}
.icon--pin_recieve-non{width:32px; height:30px; background:url(../images/icon/icon-pin_recieve-non.png) 50% 50% no-repeat;}
.icon--pin_recieve.small{width:22px; height:20px; background:url(../images/icon/icon-pin_recieve_s.png) 50% 50% no-repeat;}
.icon--pin_recieve-non.small{width:22px; height:20px; background:url(../images/icon/icon-pin_recieve-non_s.png) 50% 50% no-repeat;}
.icon--pin_recieve-request{width:32px; height:32px; background:url(../images/icon/icon-recieve-request.svg) 50% 50% no-repeat;}
.icon--pin_recieve-request.small{width:22px; height:22px; background:url(../images/icon/icon-recieve-request.svg) 50% 50% no-repeat;}

/* 충전환불 */
.icon--pin_charge{width:32px; height:30px; background:url(../images/icon/icon-pin_charge.png) 50% 50% no-repeat;}
.icon--pin_charge.small{width:22px; height:20px; background:url(../images/icon/icon-pin_charge_s.png) 50% 50% no-repeat;}
.icon--pin_refund{width:32px; height:30px; background:url(../images/icon/icon-pin_refund.png) 50% 50% no-repeat;}
.icon--pin_refund.small{width:22px; height:20px; background:url(../images/icon/icon-pin_refund_s.png) 50% 50% no-repeat;}

/* shop */
.icon--shop{width:32px; height:30px; background:url(../images/icon/icon-shop.png) 50% 50% no-repeat;}
.icon--shop.small{width:22px; height:20px; background:url(../images/icon/icon-shop_s.png) 50% 50% no-repeat;}

/* 아이콘 - 친구 */
.icon--friend{width:30px; height:30px; background:url(../images/icon/icon-friend.png) 50% 50% no-repeat;}
.icon--friend_group{width:30px; height:30px; background:url(../images/icon/icon-friend_group.png) 50% 50% no-repeat;}
.icon--group{width:30px; height:30px; background:url(../images/icon/icon-friend_group.png) 50% 50% no-repeat;}


/* 아이콘 - 삭제버튼 */
.icon--remove{width:24px; height: 24px; background:url(../images/icon/icon-remove.png) 50% 50% no-repeat; opacity: .5; text-indent:-9999px; overflow: hidden;}
.icon--remove:hover{opacity:1; transform:rotate(180deg);}



.icon--reply{display:inline-block; width:11px; height: 13px; background:url(../images/icon/icon-reply.png) 50% 50% no-repeat;}

.icon-message_open{display:inline-block; width:12px; height: 16px; background:url(../images/icon/message_open.png) 50% 50% no-repeat; background-size:100% auto; font-size:0; overflow: hidden;}


.icon-new{display:inline-block; width:20px; height:11px; background:url(../images/icon/icon-new.svg) 50% 50% no-repeat; background-size:100% auto; margin-left:5px; padding: 0!important;}

/* texticon */
.texticon{display:inline-block; width:46px; height: 20px; line-height: 20px; border-radius:20px; font-size:12px; color:#fff; background:#08e4a8; text-align:center;}
.texticon-green{background:#08e4a8;}
.texticon-orange{background:#ffc600;}
.texticon-gray{background:#bfc8ce;}







/********************************************** main popup **********************************************/
@keyframes popup {
    0%{opacity: 0; transform:translate(-50%, -40%);}
    100%{opacity: 1; transform:translate(-50%, -50%);}
}
#main_popup{position:relative; display: none;}
#main_popup::after{content:''; display:block; width:100%; height: 100%; position:fixed; left:0; top:0; background:rgba(0,0,0,0.7); z-index:998;}
#main_popup .popup_wrap{position:fixed; left:50%; top:50%; z-index:999; transform:translate(-50%, -50%); animation:popup 1 .5s;}
#main_popup .popup_body{width:450px; height: 600px; border-radius:30px; overflow: hidden;}
/* #main_popup .popup_body .swiper-slide{} */
#main_popup .popup_body img{width: 450px; height: 600px;}
#main_popup .popup_body .swiper-pagination-bullet{width:10px; height: 10px;}
#main_popup .popup_btn{display:flex; align-items:center; justify-content: space-between; gap:1rem; margin:1rem 0 0;}
#main_popup .popup_btn a{flex:1 1 1%; display:block; height:45px; line-height:45px; text-align:center; color:rgba(255,255,255,.6); border-radius:45px; background:rgba(0,0,0,0.5); transition: background .3s, color .3s;}
#main_popup .popup_btn .btn__popup_today_close{flex:1 1 65%;}
#main_popup .popup_btn .btn__popup_close{flex:1 1 35%;}
#main_popup .popup_btn a:hover{background:rgba(0,0,0,1); color:rgba(255,255,255,1);}







/********************************************** datepicker **********************************************/
.ui-datepicker{padding:0; border:0 none!important; border-radius:3px; overflow:hidden; background:#fff; box-shadow:0 4px 6px rgba(0,0,0,0.15);}
.ui-datepicker,
.ui-datepicker *{font-family:'Roboto', 'Noto Sans KR', Arial, Helvetica, sans-serif!important;}
.ui-datepicker .ui-datepicker-header{border:0 none; background:#00c6ff; border-radius:0; padding:20px 0 6px;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{top:20px; width: 26px; height:26px; cursor:pointer;}
.ui-datepicker .ui-datepicker-prev span{background:url(../images/jquery-icon/arrow-button.png) 0 0 no-repeat!important;}
.ui-datepicker .ui-datepicker-next span{background:url(../images/jquery-icon/arrow-button.png) 100% 0 no-repeat!important;}
.ui-datepicker .ui-datepicker-prev-hover{left:2px; top:20px; border:0 none; background:none;}
.ui-datepicker .ui-datepicker-next-hover{right:2px; top:20px; border:0 none; background:none;}
.ui-datepicker .ui-datepicker-title{line-height:normal;}
.ui-datepicker .ui-datepicker-title select{margin:0;}
.ui-datepicker select{font-size:0.75rem!important; appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius:3px; padding:0 35px 0 10px; outline: none;}
.ui-datepicker select::-ms-expand{display: none;}
.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year{height:26px; color:#fff; border:0 none; background:url(../images/jquery-icon/arrow-button.png) 100% 120% no-repeat #00a8ee;}
.ui-datepicker select.ui-datepicker-year{margin-left:5px;}
.ui-datepicker table thead{background:#00c6ff;}
.ui-datepicker table th{color:#fff; width:14.28%; padding:7px 0;}
.ui-datepicker table th span{font-size:0.6875rem; letter-spacing:0; font-weight:700;}
.ui-datepicker table td{padding:0;}
.ui-datepicker table td span,
.ui-datepicker table td a{width:30px; height:30px; line-height:30px; margin:8px auto; padding:0; background:none; border:0 none; text-align:center; font-size:.75rem;}
.ui-datepicker .ui-state-default{border:0 none; background:none; border-radius:40px; transition:background .3s, color .3s;}
.ui-datepicker .ui-state-hover{background:#efefef;}
.ui-datepicker .ui-state-highlight{background:none; border:0 none; color:#00c6ff; font-weight:700;}
.ui-datepicker .ui-state-active{background:#00c6ff; color:#fff;}
.ui-datepicker .ui-datepicker-current,
.ui-datepicker .ui-datepicker-close{font-size:0.75rem!important; padding:0.4rem 0.6rem!important;}




/********************************************** tabs **********************************************/
/* jquery tab */
.tabs_wrap{position:relative;}
/* .tabs_wrap .tab_nav{background:#fff;} */
.tabs_wrap .odd li:last-child{flex:1 1 35%;} /* 1px 여백 제거 */
.tabs_wrap .tab_conts{margin:2rem 0 0;}
.tabs_wrap a{outline:none;}


/* lnb tab */
.lnb__tab{display:flex; align-items:center; justify-content: space-between; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 4px 6px rgba(0,0,0,0.15);}
.lnb__tab li{flex:1 1 34%;}
.lnb__tab li a{display:block; height:45px; line-height:45px; font-size:0.875rem; text-align:center; letter-spacing:0; transition:background .3s;}
.lnb__tab li:hover a{color:#00c6ff;}
.lnb__tab li.active a,
.lnb__tab li.ui-state-active a{background:linear-gradient(180deg, #00c6ff 0%, #08e4a8 100%); font-weight:500; color:#fff;}



/* tab design */
.tab_nav{display:flex; align-items:center; justify-content: space-between; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 4px 6px rgba(0,0,0,0.15);}
.tab_nav li{flex:1 1 34%;}
.tab_nav li a{display:block; height:45px; line-height:45px; font-size:0.875rem; text-align:center; letter-spacing:0; transition:background .3s;}
.tab_nav li:hover a{color:#00c6ff;}
.tab_nav li.active a,
.tab_nav li.ui-state-active a{background:linear-gradient(180deg, #00c6ff 0%, #08e4a8 100%); font-weight:500; color:#fff;}


/* tab design line */
.tab_nav_line{display:flex; align-items:center; justify-content: space-between;}
.tab_nav_line li{flex:1 0 1%; border-bottom:1px solid #c1d0d6;}
.tab_nav_line li a{position:relative; display:block; height:50px; padding-top:20px; box-sizing:border-box; text-align:center; color:#a2b4bb; transition:color .3s, padding .3s;}
.tab_nav_line li.active a,
.tab_nav_line li.ui-state-active a{color:#00b0ff; font-weight:500; padding-top:15px;}
.tab_nav_line li a:before,
.tab_nav_line li a:before{content:''; position:absolute; left:50%; top:10px; margin-left:-3px; display:block; width:6px; height: 6px; border-radius:6px; background:#00c6ff; opacity: 0; transition:opacity .3s, top .3s;}
.tab_nav_line li.active a:before,
.tab_nav_line li.ui-state-active a:before{opacity:1; top:0;}




/*************** SCROLLBAR BASE CSS ***************/
.mCSB_scrollTools{width:30px;}
.mCSB_scrollTools .mCSB_draggerRail{width: 4px; background:rgba(0,0,0,.05);}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:8px; background:#ddd; box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background:rgba(0,0,0,0.4);}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
    background:rgba(0,0,0,0.4);
    filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)";
}
.mCSB_scrollTools .mCSB_draggerContainer{left:10px; right:-10px;}
.mCSB_inside > .mCSB_container{margin-right:15px;}

/* scrollbar */
/* .pin__wrap .mCSB_scrollTools,
.popup__add_friend .mCSB_scrollTools,{width:8px; top:5px; right:2px; bottom:5px;}
.pin__wrap .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.popup__add_friend .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px; background:rgba(0,0,0,0.1);}
.pin__wrap .mCSB_inside > .mCSB_container,
.popup__add_friend .mCSB_inside > .mCSB_container{margin-right:0;} */