@charset "UTF-8";

/*  폰트 적용 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
    list-style: none;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.6;
    color: #363636;
    letter-spacing: -0.4px;
}

h1,h2,h3,h4,h5,h6,a,p,th,tr,td,ul,li,span,div {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: normal;
}


/* 메뉴 */
header {
    background: #fff;
    width: 100%;
    height: 80px;
    margin: 0 auto;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    align-items: center;
}
header .header-wrap{
    width: 100%;
    display: flex;
    margin: 0 auto;
    align-items:center;
    justify-content:space-around;
    flex: auto;
}

header h1.logo {
    max-width: 140px;
    min-width: 100px;
    flex: 1 auto;
}

footer {
    background: #fff;
    width: 100%;
    height: 80px;
    margin-top: 100px;
    border-top: 1px solid #ebebeb;
    display: flex;
    align-items: center;
}
footer .footer-wrap{
    max-width: 1500px;
    width: 100%;
    display: flex;
    margin: 0 auto;
    align-items:center;
    justify-content: flex-end;
    flex: auto;
}

.navbar {
    display: block;
}

.navbar ul li {
    float: left;
    line-height : 40px;
}

.nave-menu li ul li {background: #ffffff;float: none;padding: 4px 16px;}
.menu-li:hover ul{overflow: unset; background: #b6b6b6;}
.nave-menu li ul {height:0;overflow:hidden;background: #ffffff;margin-left:-1px;z-index: 1;position: absolute;box-shadow: 0px 0px 5px #ccc;/* border: 1px solid; *//* padding: 16px 0px; */}
.nave-menu li ul li a {display: block; color: #ffffff; text-decoration:none; font-weight:normal; font-size:14px; padding:4px 0; height:20px; line-height:20px; letter-spacing:-1px;}
.nave-menu li ul li a, .nave-menu li.on ul li a, .nave-menu li ul li a, .nave-menu li.active ul li a {display: block;font-size:14px;font-weight:normal;color: #555;letter-spacing:-0.5px;cursor:pointer;text-align:left;}
.menu:hover .nave-menu li ul li a, .nave-menu li ul li a:hover, .nave-menu li ul li a {display: block;font-size:14px;text-decoration:none;color: #ec4f41;}




.nave-menu a.menu {
    font-size: 17px;
    margin-right: 40px;
    color: #363636;
}


.nave-menu a.menu:hover,
.nave-menu a.menu.active,
.nave-menu a.menu.active span,
.nave-menu a.menu:hover span {
    color: #c9192f;
}

header .info{
    display: flex;
    align-items:baseline;

}
header .info p{
    font-size: 14px;
    margin: 0px 16px;
}
header .info .Button i{
    margin-left: 4px;
    margin-right: 0px;
}
footer .info{
    display: flex;
    align-items:baseline;
    margin-right: 2%;
}

/* 메인슬라이드 */
main {
    position: relative;
    height: 100vh;
}
.slider-wrap{
    height: 800px;
}
.slider-wrap .slider {
    position: relative;
    list-style: none;
    overflow: hidden;
    display: flex;
}


.slider-img .img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slider-img .img::after {
    content: "";
    display: block;
    width: 100vw;
    height: 800px;
    background: rgb(0, 0, 0, 0.5);
}


.slider:after {
    content: '';
    display: block;
    clear: both;
}

.slider li {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
    opacity: 0;
}

.slider li div {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: relative;
}

.slider li dl {
    position: absolute;
    top: 25vh;
    display: flex;
    transform: translateY(-50%);
    left: 0%;
    right: 0%;
    width: 1920px;
    margin: 0 auto;
    flex-direction: column;
    align-items: flex-end;
}

.slider li dt {
    color: #fff;
    font-size: 56px;
    font-family: roboto;
    font-weight: bold;
    text-shadow: 1px 1px 10px #444;
    width: 800px;

}

.slider li dd {
    color: #fff;
    text-shadow: 1px 1px 10px #444;
    font-size: 20px;
    width: 800px;
}

.slider-wrap .btn {
    display: flex;
    width: 100vw;
    min-width: 1920px;
    position: absolute;
    top:400px;
    text-align: center;
    justify-content: space-between;
}

.slider-wrap .btn button {
    background: none;
    border: none;
    margin: 16px 40px;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}
.slider-wrap .btn button i{
    color: #fff;
}

main .quick-list {
    position: relative;
    margin: 0 auto;
    top: -160px;
    width: 1200px;
}

main .quick-list .quick-item {
    position: relative;
    float: left;
    width: 300px;
    height: 240px;
    background: #257ce1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
main .quick-list .quick-item:nth-child(2),
main .quick-list .quick-item:last-child
{
    background: #2362ab;
}


main .quick-list .quick-item .item {
    position: absolute;
    bottom: 0px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 8px;
    margin-bottom:8px;
}


main .quick-list .quick-item .tit {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    width: 240px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

main .quick-list .quick-item .tit span {
    font-size: 14px;
    color: #fff;
    font-weight: normal;
}

main .quick-list .quick-item .icon {
    position: absolute;
    top: 24px;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: #2272cf;
    display: flex;
    align-items: center;
    justify-content:center
}
main .quick-list .quick-item .icon img{
    width: 80px;

}
main .quick-list .quick-item .icon:nth-child(2),
main .quick-list .quick-item .icon:last-child
{background: #1c589d;}

main .quick-list .quick-item button {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background: #fff;
    border: none;
}
main .quick-list .quick-item button i{
    color: #1c589d;
    font-weight: bold;
    font-size: 14px;
}
/* contents */

.content-wrap{
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    margin-top: 10px;
}

.content-wrap .content{
    /* position:absolute; */
    top:0px;
    /* left:300px; */
    margin: 16px 24px;
    /*
    max-width: 1800px;
    min-width: 1100px;
    */
    overflow-x: hidden;
    overflow-y: hidden;
}

.content-wrap .content .nav{
    position:absolute;
    /*top: 40px;*/
    right: 0px;
    font-size: 13px;
    color: #c0c0c0;
}
.img-box{border: 1px solid #e0e0e0;}
.content-wrap .content .nav a{margin:0px 8px; color: #c0c0c0;}
.content-wrap .content .nav i{color: #c0c0c0;}
.content-wrap .content .stitArea{
    margin: 10px 0px;
    margin-bottom: 20px;
}
.content-wrap .content .stitArea::before{
    /*position:absolute;
    top: -16px;*/
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 50%;
    border: 4px solid #c81126;
}
.content-wrap .content .stitArea h2{margin-left: 12px;}
.content-wrap .content .txt{margin-bottom: 8px; font-size: 14px;}
.content-wrap .content .Table{

    margin-top: 16px;

}
.table-wrap{position: relative; top: 20px; clear:both; overflow: auto;}
.table-wrap .subSection .pointTx{margin-right:16px }

/*
특정 목록화면에서 top 0으로 설정하기 위해 생성
 */
.table-wrap.top-zero{top: 0px !important;}

.Table .form-wrap{
    display: flex;
    align-items:center;
}


.content-wrap .content .Table .img-box{width: 200px; background: #fbfbfb; display:block; margin-bottom: 16px;}
.Table .checkbox{margin: 0px 8px; font-weight: normal; font-size: 14px; color: rgb(80, 80, 80, 1);}
span.point{color: #c81126; font-weight: bold;}
.page-number {box-sizing: border-box; bottom: 0px; width:100%; margin: 50px 0px 16px 0px; display: flex; justify-content: center;}
.page-number ul li{float: left; width: 32px; height: 32px; border: 1px solid #e8e8e8; display: flex; justify-content:center; align-items: center; color:#8c8c8c

}
.page-number ul li:hover,
.page-number ul li:active{border-bottom: 2px solid #c81126;}
.page-number ul li:hover a,
.page-number ul li:active a{color:#c81126}
.page-number ul li a{color:#8c8c8c}
.page-number ul li a.active{color: #c81126;}

.content-wrap .snb{
    border: 1px solid #f1f1f4;
    background: #fbfbfd;
    border-radius: 8px;
    width: 240px;
    height: 100%;

}
.content-wrap .snb-tit{
    display: flex;
    position: relative;
    height: 70px;
    background: #257ce1;
    border-radius: 8px 8px 0px 0px;
    color: #fff;
    align-items:flex-end;
    overflow: hidden;
}
.content-wrap .snb-tit::before{
    display: block;
    content: "";
    width: 32px;
    height: 32px;
    border: 20px solid rgb(255,255,255, 0.2);
    border-radius: 50%;
    position: absolute;
    left: -25px;
    top:-25px;
    z-index: 0;

}
.content-wrap .snb-tit::after{
    display: block;
    content: "";
    width: 110px;
    height: 110px;
    border: 50px solid rgb(255,255,255, 0.1);
    border-radius: 50%;
    position: absolute;
    right: -110px;
    bottom:-110px;
    z-index: 0;

}
.content-wrap .snb-tit .stit03{
    color: #fff;
    margin:0px 16px;
    margin-bottom: 10px;
    position: absolute;
    z-index: 2;
}

.content-wrap .snb .snb-list{
    line-height: 2;
}

.content-wrap .snb .snb-list li:first-child
{padding-top: 6px;}

.content-wrap .snb .snb-list li:last-child{
    padding-bottom: 8px;
}
.content-wrap .snb .snb-list li a{
    display: block;
    font-weight:bold;
    color:#444;
    width: 100%;
    font-size: 15px;
}

.snb .snb-list li a:hover,
.snb .snb-list li a:active,
.snb .snb-list li.active > a
{
    color: #257ce1;
}
.content-wrap .snb .snb-list li i{
    margin-right: 8px;
    color: #ccc;
}


.content-wrap.popup-wrap{min-width:auto; display: block; padding: 0px; margin-top: 0px;}
.content-wrap.popup-wrap .content{margin:0px; padding: 16px; left:0px; }


.popup-wrap .content .stitArea{margin-bottom: 32px;}
.popup-wrap .Searchbox {margin-right: 4px;}
.popup-wrap .Searchbox .tit{max-width: 82px; margin-right: 8px}
.popup-wrap .table-wrap {overflow: auto; top:20px}

.policies-wrap {display: flex; flex-direction: column; max-width: 900px; margin:0 auto; margin-top: 24px;}
.policies-wrap .tit-area {margin-bottom: 32px;}
.policies-wrap .tit-area h2{margin-bottom: 8px;}
.policies-wrap .tit-area .txt{line-height: 1.2; font-size: 15px; margin: 8px 0px;}

.policies-wrap .policies-cont{padding-bottom: 32px; }
.policies-wrap .policies-cont span{font-size: 13px; line-height: 2.5;}
.policies-wrap .stit04{font-weight: bold;}

.policies-wrap .Table {margin: 16px 0px 0px 0px; border-top:2px solid #257ce1;}
.policies-wrap .Table td{font-size: 13px; text-align: left;  font-weight:300;}
.policies-wrap .Table td strong{font-weight: bold;}
.policies-wrap .infoList01 {padding: 18px;}
.policies-wrap .infoList01  li{display: list-item; list-style: disc; font-size: 13px; margin-bottom: 14px; line-height: 1.5;}
.policies-wrap .infoList02 {padding:24px; border:1px solid #e2e2e2; border-radius: 8px;}
.policies-wrap .infoList02  li{display: list-item; margin-left:24px; list-style: disc; font-size: 14px; margin-bottom: 14px; line-height: 1.5;}
.policies-wrap .infoList02  li:last-child{margin-bottom: 0px;}
.policies-wrap .fixConWrap {padding: 16px 0px;}
.policies-wrap .fixConWrap .fixCont1{font-size: 14px; font-weight: bold;}
.policies-wrap .fixConWrap .fixCont2 ul{float: right;}
.policies-wrap .fixConWrap .fixCont2 ul li{float: left; margin-left: 16px; font-size: 14px;}
.policies-wrap .fixConWrap .fixCont2 ul li input{margin-right: 8px;}
.policies-wrap .signature {position: relative; width: 100%; display: block;}
.policies-wrap .signature ul{float: right; font-size: 14px; text-align: right;}
.policies-wrap .signature ul li{margin-bottom: 16px;}
.policies-wrap .signature input{min-height: 26px; margin-right: 4px; margin-left: 8px;}

.content .Table.board th,
.content .Table.board td{text-align: left; font-size: 12px; font-weight: 400;}
.content .Table.board th{color:#777; text-align: left; padding-left:24px;}

.content .Table.board .board-tit{font-size: 18px; color:#202020; font-weight: bold; padding: 16px 4px; border-bottom: 2px solid #257ce1;}
.content .Table.board .board-cont{font-size: 14px; padding: 24px; height: 200px;}
.content .Table.board td.time{font-weight: 400; color: #a6a6a6;}


#commentArea {padding: 16px 0px; }
#commentArea .commentTotal{font-size: 13px; margin-bottom: 8px; color: #777;}
#commentArea .commentTop {display: flex;}
#commentArea .commentTop input[type='text']{ flex:1 auto; margin-right:8px; font-size: 13px;}
#commentArea .comment .commentDel{text-align: center; font-size: 13px; color:#777; margin: 24px 0px;}

/* login */
.login-wrap{width: 500px; position: relative; margin: 0 auto; top:10vh;}
.login-wrap .center {align-items: center;}
.login-wrap .tit-area {display: flex; flex-direction:column}
.login-wrap .tit-area img{width: 150px;}
.login-wrap .Button{width: 100%; height: 50px; font-size: 16px; border-radius: 4px; margin-top: 50px;}
.login-form{margin-top: 24px;}
.login-form input{height: 52px; margin-bottom: 16px; padding-left: 16px; width:calc(100% - 16px)}
.login-find-section a{margin-right: 16px; font-size: 14px; font-weight: 600; text-decoration:underline;}
.login-find-section a:hover,
.login-find-section a:active{color: #0196fa; }

.join-area {display: flex; flex-wrap: wrap; flex-direction:row}
.item100 {flex: 1 1 100%;}
.item40 {flex: 1 1 40%;}






/* lnb common */
.snb .snb-list li{position:relative}
.snb .snb-list li a:before{content: "\e93e"; position:absolute; font-weight: normal; right:16px; top:13px; margin-top:-9px; font-family:'xeicon'; font-size:17px; color:#ccc; transition:all .30s ease}
.snb .snb-list li a{white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:14px 8px;}
.snb .snb-list li.hasSub{display: block;}
.snb .snb-list li.hasSub.active{color: #257ce1;}
.snb .snb-list li.hasSub a:before{content: "\e941"; position:absolute; right:16px; top:12px; margin-top:-9px; font-family:'xeicon'; font-size:17px; color:#ccc; transition:all .30s ease}
.snb .snb-list li.hasSub.active > a:before{transform:rotate(-180deg);}

/* lnb 1depth */
.snb .snb-list{margin-right:1px;}
.snb .snb-list > li > a{display:block; position:relative;}

/* lnb 2depth */
.snb .snb-list > li > ul{border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; background: #fff; box-sizing: border-box;}
.snb .snb-list > li.hasSub.active {padding-top: 0px;}
.snb .snb-list > li > ul > li.hasSub.active > a:before{right: 27px; top:8px;}
.snb .snb-list > li > ul > li > a:before{right: 27px !important; top:8px;}
.snb .snb-list > li > ul > li > a{display:block; position:relative; padding-left: 12px; margin:10px 8px; font-size: 15px;}

/* lnb 3depth */
.snb .snb-list > li > ul > li > ul{background:#fbfbfd; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; }
.snb .snb-list > li > ul > li > ul > li > a{display:block; position:relative;  padding-left:24px; font-weight:300 !important;}
.snb .snb-list > li > ul > li > ul > li > a:before{display: none;}





/* **************************************** *
 * INPUT
 * **************************************** */
/* Textinput */
.Textinput{height:27px; line-height:27px; border:1px solid #dbdbdb; font-family:'roboto', 'ntskr', 'sans-serif' !important; border-radius:0}
.Textinput:hover,
.Textinput:focus,
.Textinput:active{border:1px solid #0196fa; outline:none}
.Textinput.Disabled{background-color:#f1f1f1; border:1px solid #d7d7d7; color:#ababab}
.Textinput.Disabled:hover{border:1px solid #d7d7d7}
.Textinput::placeholder{font-family:'roboto', 'ntskr', 'sans-serif' !important; font-size:12px; font-weight:normal; color:#ababab}

/* input remove */
input:not([type]) + .Remove-sign,
input[type='text'] + .Remove-sign,
input[type='password'] + .Remove-sign{position:absolute; width:20px; height:25px; line-height:25px; margin:1px 0 0 -24px; padding:0; background:#fff; font-size:18px; color:#808080; text-align:center; border:0; visibility:hidden; z-index:1}
input:not([type]) + .Remove-sign:after,
input[type='text'] + .Remove-sign:after,
input[type='password'] + .Remove-sign:after{content:"\e922"; font-family:'xeicon'}
input:not([type]).Disabled + .Remove-sign,
input[type='text'].Disabled + .Remove-sign,
input[type='password'].Disabled + .Remove-sign{display:none !important}

/* Textarea */
.Textarea{border:1px solid #dbdbdb; border-radius:4px; padding: 4px;}
.Textarea:hover,
.Textarea:focus,
.Textarea:active{border:1px solid #0196fa; outline:none}
.Textarea.Disabled{background-color:#f1f1f1; border:1px solid #d7d7d7; color:#ababab}
.Textarea.Disabled:hover{border:1px solid #d7d7d7}
.Textarea::placeholder{font-family:'roboto', 'ntskr', 'sans-serif' !important; font-size:12px; font-weight:normal; color:#ababab}

/* select */
.select{border:1px solid #dbdbdb; border-radius:4px; padding: 4px;}
.select:hover,
.select:focus,
.select:active{border:1px solid #0196fa; outline:none}
.select.Disabled{background-color:#f1f1f1; border:1px solid #d7d7d7; color:#ababab}
.select.Disabled:hover{border:1px solid #d7d7d7}
.select::placeholder{font-family:'roboto', 'ntskr', 'sans-serif' !important; font-size:12px; font-weight:normal; color:#ababab}



/* **************************************** *
 * BUTTON BASE
 * **************************************** */
.Button{height:30px;padding: 3px 10px 2px;background:#fff;border:1px solid #d3d3d3;font-weight:normal;font-size:14px;letter-spacing:-0.8px;color:rgb(80, 80, 80, 1);border-radius:2px;vertical-align:middle;box-sizing:border-box;transition: all 0.3s}
.Button:active,
.Button:hover,
.Button:focus,
.Button.af-hover,
.Button.Checked{background:rgb(237, 237, 237); padding:3px 10px 2px; border:1px solid #8c8c8c; color:rgb(80, 80, 80, 1)}
.Button:focus{outline:dotted 1px; outline-offset:-3px}



.Button [class^="xi-"],
.Button [class*=" xi-"]{margin-top:-3px; font-size:18px; vertical-align:middle}
.Button .mdi{display:inline-block; margin-top:-3px; font-size:18px; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; vertical-align:middle}
.Button i{margin-right: 4px; }
.Button .dfi{display:inline-block; width:19px; margin-top:-2px; border:0; vertical-align:middle}

.Button.Disabled,
.Dropdownbutton.Disabled{color:#ababab; background:#f1f1f1; border:1px solid #d7d7d7}

.Groupbutton{border-radius:0; margin: 8px 0px;}
.Groupbutton .Button{border:1px solid #d3d3d3; margin-left:2px; border-radius:2px}
.Groupbutton .Button:first-child{margin-left:0; border:1px solid #d3d3d3}
.Groupbutton .Button.af-hover{background:#fff; border:1px solid #8c8c8c; color:rgb(80, 80, 80, 1)}
.Groupbutton .inButton{float:left; margin-left:2px}


/* **************************************** *
* BUTTON COLOR
* **************************************** */
/* info */
.Button.info{background:#c81126; border:1px solid #c81126; color:rgb(255, 255, 255, 1)}
.Button.info:active,
.Button.info:hover,
.Button.info:focus,
.Button.info.af-hover,
.Button.info.Checked{background:#750a16; border:1px solid #750a16; color:rgb(255, 255, 255, 1)}
.Button.info.Disabled{background:#c81126; border:1px solid #c81126; color:rgb(255, 255, 255, .5)}
.Button.info i{color: #fff;}
.Groupbutton .Button.info:first-child{margin-left:0; border:1px solid #c81126}

/* primary */
.Button.primary{background:#5c6072; border:1px solid #5c6072; color:rgb(255, 255, 255, 1)}
.Groupbutton .Button.primary:first-child{margin-left:0; border:1px solid #5c6072}
.Button.primary:active,
.Button.primary:hover,
.Button.primary:focus,
.Button.primary.af-hover,
.Button.primary.Checked{background:#7d808e; border:1px solid #7d808e; color:rgb(255, 255, 255, 1)}
.Button.primary.Disabled{background:#adafb8; border:1px solid #adafb8; color:rgb(255, 255, 255, .5)}
.Button.primary i{color: #fff;}

/* success */
.Button.success{background:#08c564; border:1px solid #08c564; color:rgb(255, 255, 255, 1)}
.Button.success:active,
.Button.success:hover,
.Button.success:focus,
.Button.success.af-hover,
.Button.success.Checked{background:#39d183; border:1px solid #39d183; color:rgb(255, 255, 255, 1)}
.Button.success.Disabled{background:#83e2b1; border:1px solid #83e2b1; color:rgb(255, 255, 255, .5)}
.Groupbutton .Button.success:first-child{margin-left:0; border:1px solid #08c564}

/* warning */
.Button.warning{background:#f47808; border:1px solid #f47808; color:rgb(255, 255, 255, 1)}
.Button.warning:active,
.Button.warning:hover,
.Button.warning:focus,
.Button.warning.af-hover,
.Button.warning.Checked{background:#f69339; border:1px solid #f69339; color:rgb(255, 255, 255, 1)}
.Button.warning.Disabled{background:#f9bb83; border:1px solid #f9bb83; color:rgb(255, 255, 255, .5)}
.Groupbutton .Button.warning:first-child{margin-left:0; border:1px solid #f47808}

/* danger */
.Button.danger{background:#a50034; border:1px solid #a50034; color:rgb(255, 255, 255, 1)}
.Button.danger:active,
.Button.danger:hover,
.Button.danger:focus,
.Button.danger.af-hover,
.Button.danger.Checked{background:#b7335d; border:1px solid #b7335d; color:rgb(255, 255, 255, 1)}
.Button.danger.Disabled{background:#d27f99; border:1px solid #d27f99; color:rgb(255, 255, 255, .5)}
.Groupbutton .Button.danger:first-child{margin-left:0; border:1px solid #a50034}


/* **************************************** *
 * BUTTON LINE
 * **************************************** */
/* info */
.Button.info.line{background:#fff; border:1px solid #c81126; color:#c81126}
.Button.info.line:active,
.Button.info.line:hover,
.Button.info.line:focus,
.Button.info.line.af-hover,
.Button.info.line.Checked{background:#c81126; border:1px solid #c81126; color:rgb(255, 255, 255, 1)}
.Button.info.line:hover i{color: #fff;}
.Button.info.line.Disabled{background:#fff; border:1px solid #8abefd; color:rgb(1, 150, 250, .5)}
.Button.info.line i{color: #c81126;}
.Button.info.line:active i,
.Button.info.line:hover i,
.Button.info.line:focus i ,
.Button.info.line.af-hover i{color:#fff}
/* primary */
.Button.primary.line{background:#fff; border:1px solid #5c6072; color:rgb(92, 96, 114, 1)}
.Button.primary.line:active,
.Button.primary.line:hover,
.Button.primary.line:focus,
.Button.primary.line.af-hover,
.Button.primary.line.Checked{background:#7d808e; border:1px solid #7d808e; color:rgb(255, 255, 255, 1)}
.Button.primary.line.Disabled{background:#fff; border:1px solid #adafb8; color:rgb(92, 96, 114, .5)}

/* success */
.Button.success.line{background:#fff; border:1px solid #08c564; color:rgb(8, 197, 100, 1)}
.Button.success.line:active,
.Button.success.line:hover,
.Button.success.line:focus,
.Button.success.line.af-hover,
.Button.success.line.Checked{background:#39d183; border:1px solid #39d183; color:rgb(255, 255, 255, 1)}
.Button.success.line.Disabled{background:#fff; border:1px solid #83e2b1; color:rgb(8, 197, 100, .5)}

/* warning */
.Button.warning.line{background:#fff; border:1px solid #f47808; color:rgb(244, 120, 8, 1)}
.Button.warning.line:active,
.Button.warning.line:hover,
.Button.warning.line:focus,
.Button.warning.line.af-hover,
.Button.warning.line.Checked{background:#f69339; border:1px solid #f69339; color:rgb(255, 255, 255, 1)}
.Button.warning.line.Disabled{background:#fff; border:1px solid #f9bb83; color:rgb(244, 120, 8, .5)}

/* danger */
.Button.danger.line{background:#fff; border:1px solid #a50034; color:rgb(165, 0, 52, 1)}
.Button.danger.line:active,
.Button.danger.line:hover,
.Button.danger.line:focus,
.Button.danger.line.af-hover,
.Button.danger.line.Checked{background:#b7335d; border:1px solid #b7335d; color:rgb(255, 255, 255, 1)}
.Button.danger.line.Disabled{background:#fff; border:1px solid #d27f99; color:rgb(165, 0, 52, .5)}



.Button.round{
    border-radius: 1000px;
}


.error-wrap{width: 600px; height: 300px; background:#f8f8f8; border:1px solid #ececec; border-bottom: 4px solid #c81126; margin: 0 auto; position: relative; text-align: center; top:20vh; padding:20px}
.error-wrap .tit-area{margin-top: 40px;}
.error-wrap .tit-area > div > i {font-size: 52px; color:#c81126; margin-bottom: 8px;}
.error-wrap .txt{margin: 16px 0px;}
.error-wrap .Button{margin-top: 24px; height: 40px;}

.Textarea.hide-list  input,
.Textarea.hide-list  input:hover,
.Textarea.hide-list  input:active,
.Textarea.hide-list  input:focus{border: none; outline: none;}

.Textarea.hide-list .list-box {display: none; position: absolute; padding: 8px;  background: #fff; border: 1px solid #e2e2e2; margin-top: 29px; text-align: left; overflow-y: auto; overflow-x:hidden;}
.Textarea.hide-list:hover .list-box{display: block;}

.write {border: #CBCBCB solid 1px;border-radius: 16px;padding: 20px;margin-top: 25px;}

.flex-col-lf {flex-direction: column; align-items: flex-start;}
.board-bLine {width: 100%; padding-top: 12px; padding-bottom: 12px; border-style: solid; border-width: 0 0 1px 0 !important; border-color: #CBCBCB;}
.write .input {box-sizing: border-box; padding: 5px; margin: 0px 0px 0px 0px;}
.write .input_full {box-sizing: border-box; width: 100%; padding: 5px; margin: 10px 0px 10px 0px;}

.requireText {font-size: 0.9em; color: #257ce1;}
.label-sm-tit {font-size: 0.8em; margin-bottom: 5px; color: #8d8d8d;}

tr td a {color: #c81126;}
.txtalr{text-align: right !important;}
.txtall{text-align: left !important;}
.fltr {float: right !important;}
.fltl {float: left !important;}
.flb100 {flex-basis: 100% !important;}
.flb75 {flex-basis: 75% !important;}
.flb70 {flex-basis: 75% !important;}
.flb65 {flex-basis: 65% !important;}
.flb60 {flex-basis: 60% !important;}
.flb55 {flex-basis: 55% !important;}
.flb50 {flex-basis: 50% !important;}
.flb45 {flex-basis: 45% !important;}
.flb40 {flex-basis: 40% !important;}
.flb35 {flex-basis: 35% !important;}
.flb33 {flex-basis: 33.3% !important;}
.flb30 {flex-basis: 35% !important;}
.flb25 {flex-basis: 25% !important;}
.flb16 {flex-basis: 16.5% !important; flex: auto;}
.flex-alg-sl{align-self:flex-start !important;}

.form-wrap .item {
    display: flex;
    font-size: 40px;
    flex-basis: 50%;
    /* flex: 1; */
    /* color: #fff; */
}

.form-wrap .item .item_label {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    padding: 15px;
}

.form-wrap .item .item_label label{
    /* line-height:24px; */
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 1.1rem;
    font-weight: bold;
}

.form-wrap .item .item_label label.tit {
    font-weight: bold;
}

.form-wrap .item .item_label div{
    margin: 8px 4px;
    font-size: 15px;
}


.form-wrap-practice {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.form-wrap-practice .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 40px;
    flex-basis: 50%;
}

.form-wrap-practice .item .item_label {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    padding: 15px;
}

.form-wrap-practice .item .item_label label{
    line-height:24px;
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: bold;
}

.form-wrap-practice .item .item_label label.tit {
    font-weight: bold;
}

.form-wrap-practice .item .item_label div{
    margin-top: 5px;
    margin-left: 5px;
    font-size: 17px;
}

.practiceRndDiv{
    height: 100%;
    min-height: 135px;
    min-width: 159px;
    margin: 0px 8px;
    padding: 5px 10px 0;
    border: 1px solid #d9d9d9;
    border-radius: 15px;
    background: #fff;
    text-align: center;
    box-shadow: 0 0 5px rgb(0 0 0 / 15%);
    background-color: #fcfcfc;
    margin-bottom: 5px;
}

.practiceRndDiv div:first-child{
    padding-bottom: 6px;
    border-bottom: 1px solid #ddd;
}

.practiceRndTit{
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: bold;
}
.practiceRndCon {
    line-height: 1;
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 18px;
}
.practiceRndDiv.backColor01 .practiceRndTit,
.practiceRndDiv.backColor02 .practiceRndTit,
.practiceRndDiv.backColor03 .practiceRndTit,
.practiceRndDiv.backColor01 .practiceRndCon,
.practiceRndDiv.backColor02 .practiceRndCon,
.practiceRndDiv.backColor03 .practiceRndCon{color:#fff}
.practiceRndDiv.backColor01 div:first-child,
.practiceRndDiv.backColor02 div:first-child,
.practiceRndDiv.backColor03 div:first-child,
.practiceRndDiv.backColor04 div:first-child{border-color:#0c0c0c2b}
.practiceRndDiv div pre {text-align: left;}

.backColor01{
    background-color: #4558a4;
}

.backColor02{
    background-color: #d05050;
}
.backColor03{
    background-color: #3cac92;
}
.backColor04{
    background-color: #efd22c;
}
.item_div {
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    align-items: baseline;
}

.input_txt {
    width: 100%;
    padding-top: 12px;
    font-size: 16px;
    padding-bottom: 12px;
    border-width: 0 0 1px 0 !important;
    border-color: #CBCBCB;
}

.label_hght {height: 26px;}

/* 댓글 */
.commentWriter {
    margin: 12px 0 29px;
    padding: 16px 10px 10px 18px;
    border: 2px solid var(--skinCommentWriterBorder);
    border-radius: 6px;
    box-sizing: border-box;
    background: var(--skinCommentWriterBg);
    background: #fff;
    border: 1px solid #ebebeb
}

.commentWriter .comment_inbox {
    position: relative;
    margin-bottom: 10px;
}

.commentWriter .comment_inbox_name {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 13px;
}

.commentWriter .comment_inbox_text {
    verflow-x: hidden;
    overflow-y: auto;
    display: block;
    width: 100%;
    min-height: 17px;
    padding-right: 1px;
    border: 0;
    font-size: 13px;
    -webkit-appearance: none;
    resize: none;
    box-sizing: border-box;
    background: transparent;
    color: var(--skinTextColor);
    outline: 0;
}

.commentWriter .comment_attach {
    position: relative;
}

.commentWriter .register_box {
    float: right;
    margin-top: 16px;
}

.comment {
    margin-top: 48px;
}

.comment ul li {
    padding: 16px;
    border-top: 1px solid #ddd;
}

.comment ul li:last-child {
    border-bottom: 1px solid #ddd;
}

.commentTitle {
    height: 33px;
}

.commentUser {
    font-size: 15px;
}

.commentDate {
    font-size: 13px;
    color: #a4a4a4;
    margin-left: 10px;
}

.commentKit {
    padding: 8px
}

.commentBtn {
    height: 25px;
    padding: 0px 10px 0px;
}

.item-slide{
    flex-basis: 50%;
}

.item-cont{
    flex-basis: 45%;
    align-self: flex-start !important;
    margin-left: 20px;
}

.file-upload{margin-bottom:8px;display: flex;align-items: center;}
.file-upload > span a{font-size:14px; margin-left:4px; vertical-align:middle}
.file-upload > span span{font-size: 12px;color: #b1b1b1; margin-left:4px; vertical-align:middle}

div > pre{white-space: break-spaces; word-break:break-all; line-height: 1.5;}

.mobile_block {display: none !important;}
.mobile_tbl_block {display: none !important;}

.ui-widget .ui-widget-header{background:#585858;}

#table_list tr {cursor: pointer;}

.txt_over{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.fc-day-grid-container{height:51px !important;}

#pdf-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: 100%;
}

canvas {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.controls {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.page-info {
    align-self: center;
    font-size: 16px;
    color: #555;
}

.tab-menu {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}
.tab-menu button {
    padding: 10px 20px;
    border: none;
    background: none;
    font-weight: bold;
    cursor: pointer;
}
.tab-menu button.active {
    border-bottom: 3px solid #c00; /* 강조색 */
    color: #c00;
}

@media (max-width: 767px) {
    .page-number ul li{width: 26px; height: 26px;}

    *{font-size: 0.9rem !important;}
    .Table > thead > tr > th{font-size: 0.8rem !important;}

    .mobile_none{display: none !important;}
    .mobile_block{display: block !important;}
    .mobile_tbl_block{display: table-cell !important;}

    .table-wrap .subSection .pointTx {font-size: 0.8em; margin-right: 4px;}
    .table-wrap .subSection select {font-size: 0.8em;}

    header {height: 50px;}
    header .header-wrap{justify-content:space-between; padding:0px 24px}
    header .header-wrap .xi-bars:before{font-size:1.3rem;}
    .logo a  img {height: 40px !important;}

    .login-wrap{width: auto; padding: 10px;}
    .member-wrap{width: auto !important; padding: 10px;}
    .member-form{border: 0px !important; padding: 5px!important;}
    section {border-bottom: 0px; border-radius: 16px; padding-bottom: 40px; margin-top: 40px;}

    .Table tbody td, .Table td{word-break: keep-all;}
    .content-wrap .content .Table{overflow:auto;}
    .write{margin-top: 10px;padding: 16px;}

    .fixConWrap{align-items:baseline !important;}
    .Searchbox{margin: 3px 0px 3px 0px !important;;}
    .content-wrap .content .stitArea {margin: 0px;}
    .stitArea .stit02{font-size: 1em !important;}
    .stitArea:before{width: 6px !important;; height: 6px !important;;}
    .hd_div{left:0px;}

    .hd_div .m_nav_menu{padding:0px;}
    .hd_div .menu_1dli {padding: 0px 16px}
    .hd_div .menu-li{border-bottom:1px solid #ececec}
    .hd_div .menu-li:last-child{border:none;}

    .content-wrap .content{margin:0px 16px; padding-top:10px;}
    .content-wrap .content .stitArea{display: block;}
    .content-wrap .content .stitArea h2{top: -7px; left: -7px;}
    .content-wrap .content .stitArea::before{margin-bottom: 3px; display: inline-block;}
    .content-wrap .content .nav{display: none;}

    .form-wrap .item {flex-basis: 100% !important;height: 100%;}
    .form-wrap .item .item_label {flex-basis: 100% !important;padding: 0px;}
    .form-wrap .wid200 {width:90% !important;}
    .Button.wid20p{width:80px !important;}
    .label_hght {height: 0px;}
    .fixConWrap{align-items: flex-start; flex-direction: column;}
    .fixConWrap .wid30p {width:100% !important}

    .Searchbox .form-wrap{flex-wrap: nowrap;}
    .Searchbox .tit{min-width:65px;}
    .form-box{padding: 10px; overflow: hidden !important;}

    .item-slide{flex-basis: 100% !important;}
    .item-cont{flex-basis: 100% !important;margin-left: 0px;}

    /*.bx-controls-direction{display: none !important;}*/
    .main_banner{width: 100%; display: flex; justify-content: center;}
    .main-container{max-width:100%}
    .main-container .flex_item_list{flex-direction:column}
    .flex_item.vote{ width:100%;}

    .Groupbutton{margin: 10px 0px 10px 0px;}

    .calendar-header{display: none !important;}
    .fc-toolbar .fc-center{display: none !important;}

    .Table tbody td, .Table td{padding: 10px 0px !important;}
    .table_m{position:relative; height:80px;}
    .table_m td .txtalr{position:absolute;display:flex;left:15px;margin-top: 25px;}

    .subSection > span.fr{float:initial;}
    .fc-day-grid-container{height:46px !important;}

    .practiceRndDiv{min-width: 78% !important; margin-bottom: 10px;}

    .error-wrap{height: 30vh; width: 80%;}
}