@charset "utf-8";

/* 라디오버튼 스타일 */
.radio_style {
    display: -webkit-box;
    display: inline-flex;
    cursor: pointer;
    position: relative;
    margin: 0 20px 0 0;
}
.radio_style:last-of-type {
    margin: 0;
}
.radio_style input {
    position: absolute;
    left: -9999px;
}
.radio_style input:focus + span:before{
    border: 1px solid #222;
}
.radio_style input:checked+span {
    font-weight: 600;
}
.radio_style input:checked+span:before {
    border: 1px solid #222;
    background: #222;
}
.radio_style span {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center; align-items: center;
    border-radius: 99em;
    -webkit-transition: 0.25s ease; transition: 0.25s ease;
}
.radio_style span:before {
    display: -webkit-box;
    display: flex;
    flex-shrink: 0;
    content: "";
    background-color: #fff;
    width: 24px; height: 24px;
    border-radius: 50%;
    margin-right: 0.375em;
    -webkit-transition: 0.25s ease;
    transition: 0.25s ease;
    border: 1px solid #dbdbdb; box-sizing: border-box;
}
.radio_style span:after {
    content: '';
    display: block; position: absolute;
    width: 10px; height: 10px; background: #fff;;
    top: 50%; left: 7px; border-radius: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transition: 0.25s ease;
    transition: 0.25s ease;
}


/* 체크박스 스타일  */
.checkbox_style {
    display: -webkit-box;
    display: inline-flex;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin: 0 20px 0 0;
}
.checkbox_style:last-of-type {
    margin: 0;
}
.checkbox_style input{
    position: absolute;
    opacity: 0;
    width: 0 !important; height: 0 !important;
}
.checkbox_style label{
    position: relative;
    display: inline-block; vertical-align: middle;
    cursor: pointer;
}
.checkbox_style input:focus + label:before{
    border: 1px solid #222;
}
.checkbox_style label span{
    display: inline-block; vertical-align: middle;
    font-size: 1rem;
}
.checkbox_style label::before {
    content: '';
    margin-right: 0.5rem;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid #dbdbdb;
    box-sizing: border-box;
    -webkit-transition: 0.25s ease;
    transition: 0.25s ease;
}
.checkbox_style input:checked + label {
    font-weight: 600;
}
.checkbox_style input:checked + label::before{
    background: #222;
    border: 1px solid #222;
}
.checkbox_style input:disabled + label{
    color: #b8b8b8; cursor: auto;
}
.checkbox_style input:disabled + label::before{
    box-shadow: none;
    background: #ddd;
}
.checkbox_style input:checked + label::after{
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    background: white;
    width: 3px;
    height: 3px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
}


/* 버튼 영역 */
.btn_wrap{text-align: center; margin: 50px 0 0; font-size: 0;}
.btn_wrap .btn_right{text-align: right;}
.btn_wrap .btn_left{text-align: right;}
.btn_wrap .btn{ font-size:1rem; display: inline-block; box-sizing: border-box; margin-right:10px; padding: 0 1rem; width: 120px; line-height: 44px; font-weight: 400; color: #fff; background-color: #222; transition: 0.2s; cursor: pointer; text-align: center;}
.btn_wrap .btn:last-child{margin-right: 0;}
.btn_wrap .btn.wa{width: auto; padding: 0 2rem;} /* 우측 정렬된 버튼 (ex. 글쓰기 - 크기 미지정 wa = width: auto;) */
.btn_wrap .btn.wide{width: 120px;}
.btn_wrap .btn_gray{background-color: #999;}
@media screen and (max-width:768px){
    .btn_wrap{margin: 30px 0 0;}
    .btn_wrap .btn{margin: 0 3px; width: 90px;}
}


/* 리스트 타입 (o) */
.list_circle{}
.list_circle > li{position: relative; box-sizing: border-box; padding: 0 0 0 1.25rem; margin: 0 0 0.25rem;}
.list_circle > li:last-child{margin-bottom: 0;      }
.list_circle > li:before{content: ""; position: absolute; top: 13px; left: 0; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: var(--primary_color2);}


/* 한줄 말줄임 */
.ell1{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}


/* 두줄 말줄임 */
.ell2{text-overflow: ellipsis; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 22px; height: 44px;}


/* 베이직 테이블 */
.table_wrap{width: 100%; margin: 0 0 25px 0; box-sizing: border-box;}
.table_info{display: none; padding: 0 0 5px; line-height: 130%; font-size: 13px; color: red;}
.basic_table{clear: both; width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; border-top: 1px solid #224075; box-sizing: border-box; font-size: 1.125rem;}
.basic_table tr{transition: background 0.3s ease;}

.basic_table th{vertical-align: middle; padding: 14px 5px; border: 1px solid #ddd; border-left: none; font-weight: 700; color: #333; background: #f9f9f9;}
.basic_table thead th{border-top: none; background: #f9f9f9;}
.basic_table thead tr:last-child th{border-bottom: none;}

.basic_table td{vertical-align: middle; padding: 14px 5px; border: 1px solid #ddd; word-break: break-all;}
.basic_table th:last-child,
.basic_table td:last-child{border-right: none;}
.basic_table .con{padding-left: 1rem; text-align: left;}
.basic_table .none{padding: 20px 0;}
@media screen and (max-width: 460px){
    .table_wrap{overflow-x: auto; overflow-y: hidden;}
    .table_info{display: block;}
	.table_wrap .basic_table{width: 459px;}
}


/* 박스 */
.box{box-sizing: border-box; padding: 2rem; background-color: #f7f7f7;}
.box .tit{box-sizing: border-box; padding: 0 0 1rem; font-size: 1.4rem; font-weight: 600;}


/* 탭메뉴 (기본형) */
.tab{display: flex; justify-content: center; margin-bottom: 5.5rem;}
.tab li{overflow: hidden;}
.tab li:first-child{border-radius: 3.875rem 0 0 3.875rem;}
.tab li:last-child{border-radius: 0 3.875rem 3.875rem 0;}
.tab li.solo_tab{border-radius: 3.875rem !important;}
.tab li a{position: relative; display: block; box-sizing: border-box; padding: 0 1.43rem; font-size: 1.125rem; font-weight: 500; text-align: center; line-height: 62px; color: #aaa; background: #f9f9f9;}
.tab li:first-child a{padding-left: 2.6rem;}
.tab li:last-child a{padding-right: 2.6rem;}
.tab li:not(:first-child) a:before{content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 1px; height: 15px; background-color: #d9d9d9;}

.tab li a:hover,
.tab li a:focus{}
.tab li.on a{color: #333; font-weight: 700;}
.tab li.on a:focus{outline: none;}

.tab_cont{box-sizing: border-box; padding: 1rem 0;}
.tab_cont > div{display: none;}
.tab_cont > div.on{display: block;}
@media (max-width: 1280px){
    .tab{margin-bottom: 3.5rem;}
}
@media (max-width: 1024px){
    .tab li a{font-size: 1rem; line-height: 52px;}
}
@media (max-width: 860px){
    .tab{margin-bottom: 2.5rem;}
    .tab li a{padding: 0 0.75rem; line-height: 44px;}
    .tab li:first-child a{padding-left: 1.5rem;}
    .tab li:last-child a{padding-right: 1.5rem;}
    .tab li:not(:first-child) a:before{height: 10px;}
}
@media (max-width: 460px){
    .tab{margin-bottom: 1rem;}
}



/* css animation */
@keyframes marquee1{
    0%{transform: translate(0);}
    to{transform: translate(-100%);}
}
@keyframes marquee2{
    0%{transform: translate(100%);}
    to{transform: translate(0);}
}
@keyframes width{
    0%  {width: 0;}
    100%{width: 100%;}
}