@charset "utf-8";

/* ==========================================================================
    BASIC SETTING
    ========================================================================== */
:root {
    --main-gap: 80px;
    --basic-color: #222;
    --bg-color: #fff;
    --point-color01: #0000c9;
    --header-color: #fff;
    --header-height: 81px;
    --subnav-height: 60px;

    --form-border: #f6f7f9;
    --form-gray: #f6f7f9;
    --form-focus: #1b3763;    
    --form-basic: #1b3763;
    --form-chk: #e84a4a;
    --form-fontsize : 17px;
    --form-lineheight : 22px;
    --form-fontcolor : #222;;
    --form-placeholder : #bbb;
    --form-padding : 18px;
    --form-padding1 : 14px 18px;
    --input-height: 56px;
    --input-gap: 17px;
    --textarea-height: 260px;
}

/* ==========================================================================
    BUTTON
   ========================================================================== */
.button01{display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--point-color01); width: 187px; height: 50px;  font-size: 16px; font-weight: bold; color: var(--point-color01); padding: 0 20px; transition: .2s ease-in-out;}
.button01:hover{color: var(--bg-color); background-color: var(--point-color01);}
.button01.c1{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: 137px;  height: 52px; font-size: 16px; font-weight: bold; color: var(--point-color01); background-color: transparent; letter-spacing: 0.5px; border-radius: 26px; text-transform: uppercase; transition: .2s ease-in-out;}
.button02 span{padding-right: 25px; background: url('../images/common/arr04.png') no-repeat right calc(50% - 1px); background-size: 16px auto;}
.button02:hover{color: #fff; background-color: var(--point-color01);}
.button02.c1{color: #fff; background-color: var(--point-color01);}

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

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

.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; border-color: #bfbeb5; margin-top: 0; border: 1px solid #ddd;}
.select-group01 .form-check-input:checked{border-color: var(--form-check); background-color: var(--form-check);}
.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-check);}
.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-check); 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-check)}

.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: 50px; height: 50px; background: var(--form-basic) url('../images/form/ico_file1_1.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);}

/* ==========================================================================
   REQUEST
   ========================================================================== */
.request{position: relative; margin-left: calc(var(--input-gap) * -1); margin-right: calc(var(--input-gap) * -1);}
.request::before{content: ""; display: block; position: absolute; top: 0; left: var(--input-gap); width: calc(100% - calc(var(--input-gap) * 2)); height: 1px; background-color: var(--point-color01);}
.request .dot{display: inline-block; width: 7px; height: 7px; background-color: var(--point-color0301); border-radius: 50%; vertical-align: text-top; margin-left: 6px;}
.request .wrap-form{padding: 23px 0 10px;}
.request .wrap-form > li{display: flex; flex-wrap: wrap;}
.request .wrap-form > li > div{flex: 1; padding: 15px var(--input-gap);}
.request .wrap-form .form-item{font-size: 16px; font-weight: bold; margin-bottom: 15px;}
.request .wrap-form .form-vl.dv-ip{display: flex;}
.request .wrap-form .form-vl.dv-tel{align-items: center;}
.request .wrap-form .form-vl.dv-tel > div{width: calc(33.333333333% - 20px);}
.request .wrap-form .form-vl.dv-tel > div.sep{width: 30px; font-size: 17px; font-weight: bold; text-align: center;}
.request .wrap-form .form-vl.dv-type01 .ip-long{flex: 1;}
.request .wrap-form .form-vl.dv-type01 .ip-short{width: 130px; margin-left: var(--input-gap);}
.request .refer1{margin-top: 10px; font-size:12px; color: #999;}
.request .terms{margin-left: var(--input-gap); margin-right: var(--input-gap);}
.request .terms .form-chk01{margin-top: 15px}
.request .btngroup{display: flex; justify-content: center; margin-top: 40px}
   
/* ==========================================================================
   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 
   ========================================================================== */
.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; border-top: 1px solid var(--point-color01);}
.table01 table th,
.table01 table td{border: 1px solid #e7e7e7; border-right: 0; border-bottom: 0; vertical-align: middle;}
.table01 table th{height: 62px;  font-size: 18px; font-weight: 600; color: var(--point-color01); text-align: center; border-top: 0;}
.table01 table th:last-child,
.table01 table td:last-child{border-right: 1px solid #e7e7e7;}
.table01 table tr:last-child td{border-bottom: 1px solid #e7e7e7;}
.table01 table td{padding: 17px 21px; font-size: 17px; font-weight: 300; line-height: 26px; word-break: keep-all;}
.table01 table td.item{font-size: 18px; font-weight: 600; color: var(--point-color01); text-align: center; background-color: #f9f5ef;}
.table01.w1 .w1_1,
.table01.w1 .w1_2{width: 18.5%;}

.table02{overflow-x: auto;}
.table02 table{width:100%; min-width: 680px; table-layout:fixed; border-collapse:separate;}
.table02 table th,
.table02 table td{border: 1px solid #e7e7e7; border-right: 0; border-bottom: 0; color: #555; line-height: 26px; text-align: center; vertical-align: middle;}
.table02 table th{height: 61px;  font-size: 18px; font-weight: bold;}
.table02 table th:first-child{font-size: 17px;}
.table02 table td{padding: 17px 14px; word-break: keep-all;}
.table02 table tr:last-child td{border-bottom: 1px solid #e7e7e7;}
.table02 table .c1{background-color: #fcfaf6;}
.table02 table th.c2{color: #fff; border-top: 1px solid var(--point-color0301); background-color: var(--point-color0301);}
.table02 table th.c2 strong{color: #222;}
.table02 table .c2{border-right: 1px solid var(--point-color0301); border-left: 1px solid var(--point-color0301);}
.table02 table tr:last-child td.c2{border-bottom: 1px solid var(--point-color0301);}
.table02.w1 .w1_1{width: 100px;}

.cp01{color: var(--point-color01) !important;}

.empty-data{display: flex; justify-content: center; align-items: center; height: 200px;}
.empty-data p{font-size: 15px; color: #999;}
/* ==========================================================================
   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);}
}

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