@charset "utf-8";

/* ==========================================================================
    BASIC SETTING
    ========================================================================== */
:root {
    --main-gap: 60px;
    --minus-gap: calc(var(--main-gap) * -1);
    --mvis-gap: 30px;
    --s-gap: 20px;
    --wide-width: 1920px;
    --full-width: 1760px;
    --main-width: 1460px;
    --basic-color: #fff;
    --text-color: #666;
    --bg-color: #221e1f;
    --gray01: #BDBDBD;
    --point-gra: linear-gradient(90deg, #D6ADCD 0%, #9498C8 50%, #6AC5E3 75%, #84C6B6 100%);
    --point-color01: #b99764;
    --border-color: #ebebeb;
    --border-color01: #4d4b4c;
    --header-color: #444041;
    --header-height: 80px;
    --float-height: 54px;
    --radius01: 10px;
    --radius02: 5px;

    --form-dot: #003F85;
    --form-border: #e7e7e7;
    --form-gray: #f6f7f9;
    --form-focus: #222;    
    --form-basic: #222;
    --form-chk: #003F85;
    --form-fontsize : 17px;
    --form-lineheight : 22px;
    --form-fontcolor : #222;;
    --form-placeholder : #bbb;
    --form-padding : 18px;
    --form-padding1 : 14px 18px;
    --input-height: 56px;
    --input-gap: 20px;
    --textarea-height: 260px;
}

@media (width <= 1420px) {
    :root {
        --main-gap: 40px;
    }
}
@media (width <= 1280px) {
    :root {
        --mvis-gap: 20px;
        --header-height: 74px;
    }
}
@media (width <= 1200px) {
    :root {

    }
}
@media (width <= 1024px) {
    :root {
        --mvis-gap: 0px;
        --header-height: 68px;
    }
}
@media (width <= 860px) {
    :root {
        --main-gap: 20px;
        --header-height: 64px;
    }
}
@media (width <= 640px) {
    :root {
        --float-height: 50px;
    }
}
/* ==========================================================================
    BUTTON
   ========================================================================== */
.button01{display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--point-color01); width: 187px; height: 54px;  font-size: 16px; font-weight: bold; color: var(--point-color01); padding: 0 20px; transition: .2s ease-in-out;}
.button01 span{padding-right: 12px; background: url('../images/common/arr02.png') no-repeat right calc(50% - 1px); background-size: 6px auto;}
.button01:hover{color: var(--bg-color); background-color: var(--point-color01);}
.button01.c01{color: var(--bg-color); background-color: var(--point-color01);}
.button02{display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--basic-color); min-width: 188px; height: 52px; font-size: 17px; font-weight: bold; color: var(--basic-color); background-color: transparent; border-radius: 26px; text-transform: uppercase; transition: .2s ease-in-out;}
.button02:hover{color: #fff; background-color: var(--basic-color);}
.button02.c01{color: #fff; border-color: var(--basic-color); background-color: var(--basic-color);}
.button02.c02{color: #fff; border-color: #fff;}
.button02.c02:hover{color: var(--basic-color); border-color: #fff; background-color: #fff;}

.button03{display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--point-color01); min-width: 175px; height: 54px; font-size: 17px; font-weight: bold; color: var(--point-color01); background-color: transparent; border-radius: 26px; text-transform: uppercase; transition: .2s ease-in-out;}
.button03:hover{color: #fff; background-color: var(--point-color01);}
.button03.c01{color: #fff; border-color: var(--point-color01); background-color: var(--point-color01);}
.button04{display: inline-flex; align-items: center; border: 1px solid #fff; height: 54px; padding: 0 22px 0 28px; font-size: 17px; font-weight: bold; color: #fff; border-radius: 27px; text-transform: uppercase; transition: .2s ease-in-out;}
.button04 span{padding-right: 30px; background: url('../images/common/arr0202.png') no-repeat right center; background-size: 12px auto;}
.button04:hover,
.button04.c01{color: var(--point-color01); background-color: #fff; }
.button04:hover span,
.button04.c01 span{background-image: url('../images/common/arr0204.png');}
.button04.c01:hover{color: #fff; border-color: var(--point-color01); background-color: var(--point-color01);}
.button04.c01:hover span{background-image: url('../images/common/arr0202.png');}
.button04.c02{color: #fff; background-color: var(--point-color01);}
.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;}
.form-btngroup-center{display: flex; justify-content: center; gap: 8px;}

/* ==========================================================================
   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);}
.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.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-chk01 .form-check-input{width: 22px; height: 22px; border-color: var(--form-focus); border-radius: 0; background-color: var(--bg-color); margin-top: 0;}
.form-chk01 .form-check-input:focus{box-shadow: none}
.form-chk01 .form-check-input:checked{background-color: var(--form-focus);}
.form-chk01 .form-check-label{padding-left: 8px; font-size: 16px; color: #222; line-height: 22px; user-select: none}
.form-chk01 .btn-term{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}

.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;}
.anti-spam > img{width: 114px; height: var(--input-height)}
.anti-spam > .form-ip{flex: 1;}
.attachment{display: flex;}
.attachment > 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;}
.attachment > label > input{position: absolute; width: 0; height: 0; overflow: hidden;}
.attachment > .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*/
/* ==========================================================================
    REQUEST
    ========================================================================== */
.request {
    position: relative;
    font-size: var(--form-fontsize);
    font-weight: 400;
    color: var(--form-fontcolor);
    &::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;}
    & .wrap-form{padding: 23px 0 10px;}
    & .wrap-form > li{display: flex; flex-wrap: wrap; gap: var(--input-gap);}
    & .wrap-form .form-item{flex: 1; padding: 15px 0;}
    & .wrap-form .form-tit{font-size: var(--form-fontsize); font-weight: bold; margin-bottom: 15px;}
    & .refer01{font-size: 13px; color: #999; margin-top: 12px; }
    & .terms .form-chk02{margin-top: 15px}
    & .form-btngroup-center{margin-top: 40px}
    & .form-btngroup-center button:not([type="submit"]):hover{color: var(--point-color01); background-color: #fff;}
    @media (width <= 767px) {
        & .wrap-form{padding: 15px 0 0;}
        & .wrap-form .form-item{flex: 1 1 100%; padding: 10px 0;}
        & .refer01{font-size: 12px;}
        & .terms{margin-top: 12px;}
    }
}


/* ==========================================================================
   PAGING
   ========================================================================== */
.paging{display: flex; justify-content: center;  text-align:center;}
.paging a{display: flex; justify-content: center; align-items: center; width:34px; height:34px; margin: 0 1px; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: bold; color:#999; cursor:pointer;}
.paging a:hover, .paging a:focus, .paging a.active{color:#fff; border:1px solid var(--point-color01); text-decoration:none; background-color: var(--point-color01)}
.paging .first, .paging .prev, .paging .next, .paging .last{width:34px; height:34px; border:1px solid #dbdbdb; font-size:0;}
.paging .first{background:#fff url('../images/common/arr_paiging1.png') center no-repeat}
.paging .first:hover{background:var(--point-color01) url('../images/common/arr_paiging1_1.png') center no-repeat}
.paging .prev{margin-right:6px; background:#fff url('../images/common/arr_paiging2.png') center no-repeat}
.paging .prev:hover{background:var(--point-color01) url('../images/common/arr_paiging2_1.png') center no-repeat}
.paging .next{margin-left:6px; background:#fff url('../images/common/arr_paiging3.png') center no-repeat}
.paging .next:hover{background:var(--point-color01) url('../images/common/arr_paiging3_1.png') center no-repeat}
.paging .last{background:#fff url('../images/common/arr_paiging4.png') center no-repeat}
.paging .last:hover{background:var(--point-color01) url('../images/common/arr_paiging4_1.png') center no-repeat}

/* ==========================================================================
   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-next,
    .swiper-button-prev{top: calc(50% - 24px); width: 48px; background-color: transparent; border-radius: 50%; transition: .2s ease-out;}
    .swiper-button-next{right: calc(var(--main-gap) - 16px); background-image: url('../images/common/arr-mvis-next.png');}
    .swiper-button-prev{left: calc(var(--main-gap) - 16px); background-image: url('../images/common/arr-mvis-prev.png');}
    .swiper-button-prev:focus,
    .swiper-button-next:focus,
    .swiper-button-prev:hover,
    .swiper-button-next:hover{background-color: rgba(255,255,255,.5);}
    .swiper-button-prev:focus,
    .swiper-button-prev:hover{background-image: url('../images/common/arr-mvis-prevb.png');}
    .swiper-button-next:focus,
    .swiper-button-next:hover{background-image: url('../images/common/arr-mvis-nextb.png');}
}

.round-prevnext01 {
    & .swiper-button-prev,
    & .swiper-button-next{width: 48px; height: 48px; border: 1px solid #fff; 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('../images/common/arr0202.png');}
    & .swiper-button-next{right: 0; background-image:url('../images/common/arr0205.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('../images/common/arr0201.png');}
    & .swiper-button-next:hover{background-image:url('../images/common/arr0204.png');}
    & .swiper-button-prev.swiper-button-disabled,
    & .swiper-button-next.swiper-button-disabled{opacity: .3;}
}


/* ==========================================================================
   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; 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: 680px; table-layout:fixed; border-collapse:separate; }
.table02 table th,
.table02 table td{height: 50px; padding: 10px 14px; font-size: 16px; font-weight: bold; line-height: 26px; text-align: center; vertical-align: middle;}
.table02 table th{color: #fff; border-right: 1px solid #e4e4e4; background-color: #646969;}
.table02 table td{color: #646969; border: 1px solid #e0e0e0; border-top: 0; border-right: 0;}
.table02 table td.t-item{background-color: #f8f8f8}
.table02 table td:last-child{border-right: 1px solid #e0e0e0;}
.table02.w01 .w0101{width: 37.2727%}

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


/* ==========================================================================
   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 move1
{
    from {transform: scale(1)}
    to {transform: scale(1.15)}
}
@keyframes move2
{
    from {transform: scale(1.15)}
    to {transform: scale(1)}
}
@keyframes bounce1
{
    from {top: 15px; opacity: .9;}
    to {top: 20px; opacity: 1;}
}

/*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; background: #D6ADCD; animation: lds-ellipsis1 0.6s infinite;}
.lds-ellipsis div:nth-child(2){left: 8px; background: #9498C8; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(3){left: 32px; background: #6AC5E3; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(4){left: 56px; background: #84C6B6; 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
   ========================================================================== */
html:lang(en) {
}