@charset "utf-8";

/* ==========================================================================
    BUTTON
   ========================================================================== */
.button01{display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--point-color01);  min-width: 166px; height: 46px; font-size: 16px; font-weight: bold; color: var(--point-color01); padding: 0 20px; border-radius: 23px; transition: .2s ease-in-out;}
.button01 span{padding-right: 24px; background: url('../images/common/arr0204.png') no-repeat right calc(50% - 1px); background-size: 16px auto;}
.button01:hover{color: var(--bg-color); background-color: var(--point-color01);}
.button01.cw{color: var(--point-color01); border-color: #fff; background-color: #fff;}
.button01.c01{color: var(--bg-color); background-color: var(--point-color01);}
.button01.c01 span{background-image: url('../images/common/arr0202.png')}
.button02{display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--point-color01); min-width: 166px; height: 46px; font-weight: bold; color: var(--point-color01); background-color: transparent; border-radius: 23px; text-transform: uppercase; transition: .2s ease-in-out;}
.button02:hover{color: #fff; background-color: var(--point-color01);}
.button02.c01{color: #fff; border-color: var(--point-color01); background-color: var(--point-color01);}
.button02.c02{color: #fff; border-color: var(--point-color02); background-color: var(--point-color02);}
.button02.s01{border-width: 2px}
.button03{display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--point-color02); min-width: 175px; height: 54px; font-size: 17px; font-weight: bold; color: var(--point-color02); background-color: transparent; border-radius: 26px; text-transform: uppercase; transition: .2s ease-in-out;}
.button03:hover{color: #fff; background-color: var(--point-color02);}
.button03.c01{color: #fff; border-color: var(--point-color02); background-color: var(--point-color02);}
.button04{display: inline-flex; align-items: center; border: 2px solid #fff; height: 48px; padding: 0 30px 0 26px; font-size: 16px; font-weight: bold; color: #fff; border-radius: 27px; text-transform: uppercase; transition: .2s ease-in-out;}
.button04 span{padding-right: 27px; background: url('../images/common/arr0302.png') no-repeat right center / 16px auto;}
.button04:hover,
.button04.c01{color: var(--basic-color); background-color: #fff; }
.button04:hover span,
.button04.c01 span{background-image: url('../images/common/arr0304.png');}
.button04.c01:hover{color: #fff; border-color: var(--point-color02); background-color: var(--point-color02);}
.button04.c01:hover span{background-image: url('../images/common/arr0202.png');}
.button04.c02{color: #fff; background-color: var(--point-color02);}
.button04.c02:hover span{background-image: url('../images/common/arr0202.png');}
.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;}

/* ==========================================================================
   COLOR
   ========================================================================== */
.cp01{color: var(--point-color01) !important;}
.cp0101{color: var(--point-color0101) !important;}
.cp0102{color: var(--point-color0102) !important;}
.cp02{color: var(--point-color02) !important;}
.cp0201{color: var(--point-color0201) !important;}
.cp03{color: var(--point-color03) !important;}
.cp04{color: var(--point-color04) !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);}
.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: 12px 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.term-box{height: 144px; font-size: 12px; font-weight: 300; color: #777; line-height: 20px;}
.form-gray{border: 1px solid var(--form-gray); background-color: var(--form-gray)}

/*Select group - Checkbox, Radio*/
.form-chk01{
    & input[type="radio"],
    & input[type="checkbox"]{appearance: none; width: 20px; height: 20px; border: 1px solid var(--form-border); background-color: #fff;}
    & input[type="radio"]{border-radius: 50%;}
    & input[type="radio"]:checked{border-color: var(--form-chk); background: var(--form-chk) url('../images/common/ico_checked01.png') no-repeat center / 10px auto;}
    & input[type="checkbox"]{border-radius: 4px;}
    & input[type="checkbox"]:checked{border-color: var(--form-chk); background: var(--form-chk) url('../images/common/ico_checked02.png') no-repeat center / 11px auto;}
    & label{font-size: 15px; padding-left: 6px;}
}

.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}

.select-group01{
    display: flex; flex-wrap: wrap; align-items: center; gap: 22px; width: 100%;
    > div{display: flex; align-items: center;}
    & .form-ip{max-width: 150px; padding: 0 12px; margin-left: 15px;}
    & input[type="text"]:focus{border-color: var(--form-chk);}
}

.select-group02{display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%;}
.select-group02 > div{display: flex;}
.select-group02 input:not(.form-ip){position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.select-group02 label {display: flex; justify-content: center; align-items: center; min-width: 110px; height: var(--input-height); padding: 0 var(--form-padding); border:1px solid var(--form-border); font-size: 15px; color: #222; text-align:center; background-color:#fff; user-select: none}
.select-group02 .form-ip{max-width: 150px; padding: 0 var(--form-padding); margin-left: 6px;}
.select-group02 input:checked + label{color:#fff; border-color: var(--form-chk); background:var(--form-chk)}

.anti-spam{
    display: flex;
    > img{width: 114px; height: var(--input-height)}
    > .form-ip{flex: 1;}
}

.attachment{
    display: flex;
    > label{position: relative; width: var(--input-height); height: var(--input-height); background: var(--form-basic) url('../images/common/ico_file0101.png') no-repeat center; background-size: 16px auto;}
    > label > input{position: absolute; width: 0; height: 0; overflow: hidden;}
    > .form-ip{width: calc(100% - 50px);}
}
.searchbar01{display: flex; height: 56px; box-shadow: 3px 3px 6px 2px rgba(0,0,0,.09);}
.searchbar01 input[type="text"]{display: block; flex: 1; border: 1px solid var(--point-color01); padding: 0 50px; font-size: 18px; font-weight: bold; color: #fff; background: var(--point-color01) url('../images/common/ico_glass01.png') no-repeat 23px center; background-size: 16px auto;;}
.searchbar01 .form-ip:focus{border-color: var(--form-focus);}
.searchbar01 button{display: flex; justify-content: center; align-items: center; border: 1px solid var(--point-color01); width: 120px; font-weight: bold; border-color: #e0e0e0; color: var(--point-color01); padding: 0 20px;}
.searchbar01::-webkit-input-placeholder,
.searchbar01:required:invalid{color: #999;}/*placeholer*/

/* ==========================================================================
   Slider 
   ========================================================================== */
.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%;}

/* ==========================================================================
   ELEMENT 
   ========================================================================== */
.table01{ overflow-x: auto;}
.table01 table{width: 100%; min-width: 760px; table-layout:fixed; border-collapse:separate;}
.table01 table td{height: 62px; font-size: 16px; font-weight: bold; color: var(--point-color01); line-height: 26px; padding: 17px 28px; word-break: keep-all; text-align: center; border: 1px solid #e9e9e9; border-right: 0; vertical-align: middle;}
.table01 table tr:first-child td{border-top: 1px solid var(--point-color03);}
.table01 table tr:last-child td{border-top: 0;}
.table01.w1 .w1_1{width: 18.2%;}
.table01.w1 .w1_2{width: 20.5%;}

.table02{ overflow-x: auto;}
.table02 table{width: 100%; min-width: 760px; table-layout:fixed; border-collapse:separate; }
.table02 table th,
.table02 table td{height: 53px; padding: 12px 28px; font-size: 16px; font-weight: bold; line-height: 26px; text-align: center; word-break: keep-all; vertical-align: middle;}
.table02 table th{color: #ddd; border-right: 1px solid #e9e9e9; background-color: #222;}
.table02 table td{color: var(--point-color01); border: 1px solid #e9e9e9; border-top: 0; border-right: 0; }
.table02 table td.t-note{font-weight: 400;}
.table02 table td:first-child{border-left: 0;}
.table02.w1 .w1_1{width: 61%;}


/* ==========================================================================
    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);}
}

/*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);}
}