@charset "utf-8";

/* ==========================================================================
    BUTTON
   ========================================================================== */
.button01 {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--point-color01);
    width: 100%;
    height: 54px;
    font-size: 17px;
    font-weight: bold;
    color: var(--point-color01);
    padding: 0 20px;
    border-radius: 4px;
    transition: .2s ease-in-out;
    & span{padding-left: 27px; background: url('/assets/site/img/common/ico_mail01.png') no-repeat 0 center / 20px auto;}
    &:hover{color: var(--bg-color); background-color: var(--point-color01);}
    &.c01{color: var(--bg-color); background-color: var(--point-color01);}
}

.button02 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--point-color01);
    width: 138px;
    height: 38px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--point-color01);
    letter-spacing: 0;
    background-color: transparent;
    border-radius: 19px;
    transition: .3s ease-in-out;
    &.c01{color: #fff; border-color: var(--point-color01); background-color: var(--point-color01);}
    &.c02{color: #fff; border-color: #fff;}
    &.c02:hover{color: var(--point-color01); border-color: #fff; background-color: #fff;}
    &.c03{color: #888; border-color: #ddd;}
    &.c03:hover{color: #222; background-color: #fff}
    &.c04{color: #fff; border-color: var(--basic-color); background-color: var(--basic-color);}
    &.c04:hover{border-color: var(--basic-color); background-color: var(--basic-color);}
    & span{padding-right: 22px; background: url('/assets/site/img/common/arr0301.png') no-repeat right center / 10px auto; transition: .3s ease-in-out}
    &:hover{color: #fff; background-color: var(--point-color01);}
    &:hover span{padding-right: 26px; background-image: url('/assets/site/img/common/arr0302.png')}
    & .ico01{padding-left: 25px; background: url('/assets/site/img/common/ico_bubble0101.png') no-repeat 0 center / 20px auto;}
    &:hover .ico01{background: url('/assets/site/img/common/ico_bubble0102.png') no-repeat 0 center / 20px auto;}
    & .ico02{padding-left: 25px; background: url('/assets/site/img/common/ico_list0101.png') no-repeat 0 center / 20px auto;}
    &:hover .ico02{background: url('/assets/site/img/common/ico_list0102.png') no-repeat 0 center / 20px auto;}
    &.sm01{min-width: 0; width: 114px; height: 46px; font-size: 16px;}
    &.sm02{min-width: 0; width: 130px; height: 48px; font-size: 17px;}
}
.button03 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dedede;
    min-width: 110px;
    height: 48px;
    font-size: 16px;
    font-weight: bold;
    color: #777;
    padding: 0 20px;
    border-radius: 4px;
    transition: .2s ease-in-out;
    & span{color: var(--point-color01)}
    &:hover{color: #fff; border-color: #222; background-color: var(--basic-color);}
    &:hover span{color: #fff}
    @media (width <= 1023px) {
        min-width: 96px;
        height: 42px;
        font-size: 15px;
    }
    @media (width <= 767px) {
        min-width: 80px;
        height: 38px;
    }
}




.button05{display: inline-flex; align-items: center; border: 1px solid var(--point-color01); min-width: 176px; height: 54px; padding: 0 50px 0 29px; font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: bold; color: var(--point-color01); letter-spacing: 0; background: url('../images/common/arr0106.png') no-repeat calc(100% - 28px) center; background-size: 12px auto; transition: .2s ease-in-out;}
.button05:hover{color: #fff; background-color: var(--point-color01); background-image: url('../images/common/arr0105.png')}
.button05.c01{color: #fff; border-color: var(--point-color01); background-color: var(--point-color01); background-image: url('../images/common/arr0105.png')}
.button05.invaild{color: #fff; border-color: #dadada; background-color: #dadada; background-image: url('../images/common/arr0105.png'); pointer-events: none; cursor: default;}
.form-btngroup-center{display: flex; justify-content: center;}
.form-btngroup-center > a,
.form-btngroup-center > button{margin: 0 4px;}

/* ==========================================================================
   COLOR
   ========================================================================== */
.cp01{color: var(--point-color01) !important;}
.cp02{color: var(--point-color02) !important;}
.cp0201{color: var(--point-color0201) !important;}
.cp03{color: var(--point-color03) !important;}

/* ==========================================================================
   FORM
   ========================================================================== */
.form-ip{display: block; width: 100%; height: var(--input-height); border: 1px solid var(--form-border); padding: 0 var(--form-padding); font-size: var(--form-fontsize); font-weight: bold; color: var(--form-fontcolor); line-height: var(--form-lineheight); border-radius: 4px;}
.form-ip:focus{border-color: var(--form-focus);}
select.form-ip{background-image: url('../images/common/arr_select01.png'); background-repeat: no-repeat; background-position: calc(100% - 15px) center; background-size: 11px auto;}
select.form-ip option{font-weight: bold; color: #fff; background-color: var(--form-basic);} 
.form-ip::-webkit-input-placeholder,
.form-ip:required:invalid{color: var(--form-placeholder);}/*placeholer*/
textarea.form-ip{height: var(--textarea-height); padding: var(--form-padding1);}
textarea.form-ip:focus{border-color: var(--form-focus)}
textarea.term-box{height: 144px; font-size: 14px; font-weight: 300; color: #999; line-height: 22px;}
.form-gray{border: 1px solid var(--form-gray); background-color: var(--form-gray)}

/*Slect group - Checkbox, Radio*/
.form-chk01 {
    display: flex;
    align-items: center;
    & .form-check-input{width: 22px; height: 22px; border-color: #eee; border-radius: 0; background: #fff url("/assets/site/img/common/ico_check0102.png") no-repeat center / 11px auto; margin-top: 0;}
    & .form-check-input:focus{box-shadow: none}
    & .form-check-input:checked{border-color: var(--form-chk); background: var(--form-chk) url("/assets/site/img/common/ico_check0101.png") no-repeat center / 11px auto;}
    & .form-check-label{padding-left: 8px; font-size: 15px; color: #222; line-height: 22px; user-select: none}
    & .btn-term{position: relative; font-size: 15px; font-weight: bold; color: var(--form-basic); text-decoration: underline; margin-left: 7px;}
}
.form-chk02{display: flex; align-items: center;}
.form-chk02 input[type="checkbox"]{appearance: none; width: 18px; height: 18px; border: 1px solid var(--form-border); background-color: #fff; border-radius: 4px;}
.form-chk02 input[type="checkbox"]:checked{border-color: var(--form-chk); background: var(--form-chk) url('../images/common/ico_checked02.png') no-repeat center; background-size: 11px auto;}
.form-chk02 label{padding-left: 6px; font-size: 14px; color: #333; user-select: none}

.chk-btn01{
    gap: 8px;
    padding: 7px;
    background-color: #fff;
    border-radius: 28px;
    box-shadow: 5px 5px 10px 3px rgba(0,0,0,.05);
    & .form-chk01{display: block}
    & .form-check-input{display: none}
    & .form-check-label{display: flex; justify-content: center; align-items: center; height: 42px; font-size: 15px; font-weight: bold; color: #999; text-align: center; background-color: #f3f3f3; border-radius: 21px;}
    & .form-check-input:checked + .form-check-label{color: #fff; background-color: var(--point-color01);}
}

.select-group01{display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
.select-group01 > div{display: flex; align-items: center; margin-right: 22px; margin-bottom: 10px;}
.select-group01 > div:last-child{margin-right: 0}
.select-group01 .form-check-input{width: 16px; height: 16px; margin-top: 0; border: 1px solid #ddd;}
.select-group01 .form-check-input:checked{border-color: var(--form-chk); background-color: var(--form-chk);}
.select-group01 .form-check-label{font-size: 12px; padding-left: 4px;}
.select-group01 .form-ip{max-width: 150px; height: 36px; padding: 0 12px; margin-left: 15px;}
.select-group01 input[type="text"]:focus{border-color: var(--form-chk);}
.select-group02{display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
.select-group02 > div{display: flex; margin-right: 6px; margin-bottom: 10px;}
.select-group02 > div:last-child{margin-right: 0}
.select-group02 .form-check-input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.select-group02 .form-check-label{height:40px; line-height:38px; padding:0 17px; border:1px solid var(--form-chk); font-size: 12px; color: #222; text-align:center; background-color:#fff; box-sizing:border-box; cursor:pointer; user-select: none}
.select-group02 .form-ip{max-width: 150px; height: 40px; padding: 0 12px; margin-left: 15px;}
.select-group02 .form-check-input:checked + .form-check-label{color:#fff; background:var(--form-chk)}

.anti-spam {
    display: flex;
    > img{width: var(--input-buttonw); height: var(--input-height); border-radius: 0 4px 4px 0}
    > .form-ip{flex: 1;}

}
.attachment {
    display: flex;
    > label{position: relative; display: flex; justify-content: center; align-items: center; width: var(--input-buttonw); height: var(--input-height); background: var(--form-basic); border-radius: 0 4px 4px 0;}
    > label > input{position: absolute; width: 0; height: 0; overflow: hidden; padding: 0; border: 0}
    > label span{font-size: 15px; font-weight: bold; color: #aaa}
    > .form-ip{flex: 1;}
    @media (width <= 767px) {
        > label{}
    }
}


/*게시판 상단*/
.searchbar01 {
    display: flex;
    gap: 4px;
    width: 100%;
    max-width: 450px;
    height: 44px;
    overflow: hidden;
    & input[type="text"]{flex: 1; height: inherit;  font-size: 17px; font-weight: bold; padding-left: 17px;}
    & button{width: 68px; font-weight: bold; color: #fff; background: #222;}
}

/*상단 검색영역*/
.searchbar02 {
    display: flex;
    width: 100%;
    max-width: 600px;
    height: 58px;
    border-radius: 29px;
    overflow: hidden;
    & input[type="text"]{flex: 1; height: inherit;  font-size: 18px; font-weight: bold; padding-left: 30px; border:0; background:#f5f5f5}
    & input[type="text"]::-webkit-input-placeholder{font-weight:500; color:#bbb}
    & button{width: 72px; font-size:0; border:0; background:#f5f5f5 url('/assets/site/img/common/ico_glass0102.png') no-repeat center / 20px auto; cursor:pointer}
}

/* ==========================================================================
    TABS
    ========================================================================== */
.tabs01{
    display: flex;
    gap: 28px;
    & .btn-tab{font-size: 18px; font-weight: bold; color: #999;}
    & .btn-tab span{display: block; padding: 4px 0; border-bottom: 1px solid transparent;}
    & .btn-tab:hover span{color: var(--point-color01); transition: .2s ease-in-out}
    & .btn-tab.active span{color: var(--point-color01); border-color: 1px solid var(--point-color01);}
    @media (width <= 1023px) {
        gap: 18px;
        & .btn-tab{font-size: 17px;}
    }
}

/* ==========================================================================
    REQUEST
    ========================================================================== */
.request{
    position: relative;
    font-size: var(--form-fontsize);
    font-weight: 400;
    color: var(--form-fontcolor);
    padding-top: 37px;
    border-top: 1px solid #222;
    & fieldset{padding: 0}
    /*&::before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: #222;}*/
    & .dot::after{content: ""; display: inline-block; width: 7px; height: 7px; background-color: var(--form-dot); border-radius: 50%; vertical-align: text-top; margin-left: 6px;}
    /*& .form-ip{border-color: #fff; background-color: #fff;}*/
    & .wrap-form{position: relative; display: flex; flex-direction: column; gap: var(--input-gap);}
    & .wrap-form > li{display: flex; flex-wrap: wrap; gap: var(--input-gap);}
    & .wrap-form .form-item{position: relative}
    & .wrap-form .form-item.inactive .form-ip{border-color: #e8e8e8; background-color: #e8e8e8}
    & .wrap-form .form-item{position: relative; flex: 1;}
    & .wrap-form .form-item.col-small{flex: 0 1 calc(25% - 11px)}
    & .wrap-form .form-tit{font-size: var(--form-fontsize); font-weight: bold; margin-bottom: 15px;}
    & .refer1{font-size: 13px; color: #999; margin-top: 12px; }
    & .terms{display: flex; justify-content: space-between; align-items: center; margin-top: 20px}
    & .btn-container{display: flex; padding-top: 20px; border-top: 1px solid #dedede; margin-top: 20px;}
    & .btn-container button{height: var(--input-height)}
    @media (width <=1200px) {
        & .chk-btn01 .form-check-label{font-size: 14px;}
    }

    @media (width <=1200px) {
        & .wrap-form > li.chk-btn01{justify-content: flex-start; gap: 10px}
        & .wrap-form .chk-btn01{padding: 0; background-color: transparent; box-shadow: none}
        & .wrap-form .chk-btn01 .form-item{flex: 0 1 auto}
    }

    @media (width <=1023px) {
    }

    @media (width <= 767px) {
        /*& .wrap-form{padding: 15px 0 0;}*/
        /*& .wrap-form .form-item{flex: 1 1 100%; padding: 10px 0;}*/
        & .wrap-form .form-item{flex: 1 1 100%;}
        & .wrap-form > li.chk-btn01{justify-content: center}
        & .wrap-form > li.chk-container01{gap: 20px 0}
        & .wrap-form > li.chk-container{justify-content: flex-start; gap: 18px; padding: 14px 0;}
        & .wrap-form .form-item.col-small{flex: 1}
        & .sep01{margin: 12px 0 15px}
        & .attachment > label span{font-size: 14px}
        & .refer1{font-size: 12px;}
        & .terms{flex-direction: column-reverse; align-items: flex-start; gap: 30px; margin-top: 12px; }
        & .terms .form-chk01{width: 100%}
        & .terms .form-chk01:last-child{justify-content: flex-end;}
    }
}
/* ==========================================================================
   PAGING
   ========================================================================== */

/* ==========================================================================
   Slider & PLUG-IN
   ========================================================================== */
.marquee-slider .swiper-wrapper{position: relative; -webkit-transition-timing-function:linear!important;  transition-timing-function:linear!important; }
.marquee-slider .item-marquee{width: auto; /*position: relative; overflow: hidden;*/}
.marquee-slider .item-marquee .logo{display: block; text-align: center; pointer-events: none; cursor: default;}
.marquee-slider .item-marquee .logo img{max-width: 300px; width: 100%;}

.round-prevnext{
    & .swiper-button-prev,
    & .swiper-button-next{width: 48px; height: 48px; border: 1px solid #ddd; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 16px auto; border-radius: 50%; opacity: 1; transition:ease-in-out .2s; margin-top: 0;}
    & .swiper-button-prev{left: auto; right: 60px; background-image:url('/assets/site/img/common/arr0205.png');}
    & .swiper-button-next{right: 0; background-image:url('/assets/site/img/common/arr0206.png');}
    & .swiper-button-prev:hover,
    & .swiper-button-next:hover{border-color: var(--point-color01); background-color: var(--point-color01);}
    & .swiper-button-prev:hover{background-image:url('/assets/site/img/common/arr0201.png');}
    & .swiper-button-next:hover{background-image:url('/assets/site/img/common/arr0202.png');}
    & .swiper-button-prev.swiper-button-disabled,
    & .swiper-button-next.swiper-button-disabled{opacity: .3;}
}


/* ==========================================================================
   ELEMENT 
   ========================================================================== */
.table01 {
    overflow-x: auto;
    /*white-space: nowrap;*/
    & table{width: 100%; min-width: 500px; table-layout: fixed; border-collapse: separate; border-top: 2px solid #000;}
    & th,
    & td{height: 51px; padding: 5px 20px; font-size: 14px; color: #666; line-height: 24px; border-bottom: 1px solid #c5c7ca; word-break: break-all; vertical-align: middle;}
    & .t-item{font-weight: bold; background-color: var(--point-color0202);}


    @media (width <= 1023px) {

    }
}

.table02 {
    overflow-x: auto;
    /*white-space: nowrap;*/
    & table{width: 100%; min-width: 500px; table-layout: fixed; border-collapse: separate;}
    & th,
    & td{font-size: 15px; line-height: 24px; border: 1px solid #ebebeb; border-top: 0; border-right: 0; vertical-align: middle;}
    & th{height: 52px; font-size: 16px; color: #ddd; text-align: center; border: 0; background-color: #666; text-transform: capitalize}
    & td{padding: 19px 22px; color: #666;}
    & td:last-child{border-right: 1px solid #e0e0e0;}
    & .t-item{font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: bold; color: #222; text-align: center; background-color: #f9f9f9}
    & .list-type01 > li{padding-left: 14px; text-indent: -14px;}
    &.w01 .w0101{width: 27%}
    @media (width <= 1023px) {

    }
}
.table-f01{
    & .tit-bar{display: flex; justify-content: center; align-items: center; height: 52px; font-size: 18px; font-weight: bold; text-align: center; border-top: 1px solid #222;}
    & .cont-box{display: flex; gap: 20px; padding: 30px; border: 1px solid #ebebeb}
    & .cont-box > ul{flex: 1; display: flex; flex-direction: column; gap: 12px;}
    & .cont-box > ul > li{font-size: 16px; color: #666; line-height: 22px}
    & .cont-box > ul > li > span{font-weight: bold; color: #999;}
    @media (width <= 1280px) {
        & .cont-box{padding: 24px;}
        & .cont-box > ul > li{font-size: 15px}
    }
    @media (width <= 767px) {
        & .cont-box{flex-direction: column; gap: 12px; padding: 24px;}
    }
}


.table03{ overflow-x: auto;}
.table03 table{width: 100%; min-width: 680px; table-layout:fixed; border-collapse:separate;}
.table03 table th,
.table03 table td{height: 42px; padding: 5px 14px; font-family: 'Roboto Condensed', sans-serif; font-size: 15px; line-height: 24px; text-align: center; word-break: keep-all; vertical-align: middle;}
.table03 table th{font-weight: bold; color: #fff; border: 1px solid #e0e0e0; border-top: 0; border-right: 0; background-color: #646969;}

.table03 table td{color: #646969; border: 1px solid #e4e4e4; border-top: 0; border-right: 0;}
.table03 table td.t-item{background-color: #f8f8f8}
.table03 table td:last-child{border-right: 1px solid #e0e0e0;}
.table03 table .bgc01 th{color: #646969; background-color: #f8f8f8}
.table03 table .s01 th{font-weight: 400}
.table03 table .bd01{border-left: 0}

.table04{
    > ul > li:first-child{border-top: 1px solid #000}
    > ul > li{display: flex; align-items: center;height: 70px; border-bottom: 1px solid #dbdbdb; font-size: 17px; line-height: 36px;}
    & .t-item{width: 90px; padding-left: 20px; font-weight: bold; color: #000;}
    & p{flex: 1; color: #333; word-break: keep-all;}
}


/* ==========================================================================
   ANIMATION
   ========================================================================== */
.scroll-bounce .stick{position: relative; display: inline-block; width: 1px; height: 37px; background-color: rgba(255,255,255,.2); overflow: hidden;}
.scroll-bounce .stick .bar{position: absolute; top: 10%; width: 100%; background-color: rgba(255,255,255,1); animation: scoll-stick-bar .9s linear infinite alternate}

@keyframes scoll-stick-bar {  
    from {top: 0; height: 9px; opacity: .8;}  
    to {top: 24px; height: 15px; opacity: 1;}
}

@keyframes fadeEffect {  
	from {opacity: 0;}  
    to {opacity: 1;}
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes fadeUp {
	from {opacity: 0; transform: translate(0, 15%);}
    to {opacity: 1; transform: translate(0, 0);}
}
@keyframes fadeUp01 {
    from {opacity: 0; transform: translate(0, 15%);}
    to {opacity: .7; transform: translate(0, 0);}
}

/*LOADER*/
#loader{position: fixed; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 10000; visibility: visible; opacity: 1; transition: .3s ease-in-out;}
#loader.load{visibility: hidden; opacity: 0;}
.lds-ellipsis{display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-ellipsis div{position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: var(--point-color01); animation-timing-function: cubic-bezier(0, 1, 1, 0);}
.lds-ellipsis div:nth-child(1){left: 8px; animation: lds-ellipsis1 0.6s infinite;}
.lds-ellipsis div:nth-child(2){left: 8px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(3){left: 32px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(4){left: 56px; animation: lds-ellipsis3 0.6s infinite;}

@keyframes lds-ellipsis1 {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}

@keyframes lds-ellipsis3 {
    0% {transform: scale(1);}
    100% {transform: scale(0);}
}

@keyframes lds-ellipsis2 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(24px, 0);}
}

/* ==========================================================================
    EN
   ========================================================================== */