@charset "utf-8";

/* ==========================================================================
    BASIC SETTING
    ========================================================================== */
:root {
    --main-gap: 100px;
    --basic-color: #222;
    --point-color01: #ce9b51;
    --point-color0101: #b99764;
    --point-color0102: #c6b4a5;
    --point-color02: #304450;
    --point-color03: #014099;
    --bg-color: #fff;
    --header-color: #fff;
    --header-height: 100px;
    --header-height-fixed: calc(var(--header-height) - 50px);
    --subnav-height: 60px;

    --form-border: #fff;
    --form-gray: #f1f1f1;
    --form-focus: #2332d9;    
    --form-basic: #2332d9;
    --form-fontsize : 14px;
    --form-lineheight : 22px;
    --form-fontcolor : #2332d9;;
    --form-placeholder : #ccc7be;
    --form-padding : 17px;
    --form-padding1 : 14px 17px;
    --input-height: 56px;
    --textarea-height: 166px;
    --form-check: #1d4354;
}

/* ==========================================================================
    BUTTON
   ========================================================================== */
.button01{display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--point-color01); width: 156px; height: 52px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: bold; letter-spacing: 1.5px; transition: .1s ease-in-out;}
.button01 span{position: relative; top: 2px;}
.button01:hover{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: 260px; height: 62px; font-size: 18px; font-weight: bold; border-radius: 31px;}
.button02:hover{color: var(--bg-color); background-color: var(--point-color01);}
.button02 .ico1{line-height: 20px; padding-left: 32px; background: url('../images/common/ico_send01.png') no-repeat 0 center; background-size: 20px auto;}
.button02:hover .ico1{background-image: url('../images/common/ico_send0101.png');}
.button03{display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--bg-color); width: 155px; height: 40px; font-size: 16px; font-weight: 800; color: var(--point-color02); background-color: var(--bg-color); border-radius: 20px; transition: .1s ease-in-out;}
.button03:hover{color: var(--bg-color); border-color: var(--point-color01); background-color: var(--point-color01);}
/* ==========================================================================
   FORM
   ========================================================================== */


/* ==========================================================================
   ELEMENT 
   ========================================================================== */
.table1{ overflow-x: auto;}
.table1 caption{position:static; visibility:hidden; overflow:hidden; width:0;height:0;font-size:0;line-height:0}
.table1 table{width:100%; min-width: 480px; border-top: 1px solid #222; table-layout:fixed; border-collapse:separate; }
.table1 table td{padding: 17px 10px; border-right: 1px solid #ebebeb; border-bottom:1px solid #ebebeb; line-height: 26px; text-align: center; vertical-align: middle;}
.table1 table td.item{font-size: 18px; font-weight: bold; color: #0057a8; background-color: #f9f8f8;}
.table1 table td.thumb{height: 121px; padding: 0; border-right: 0;}
.table1 table td.thumb img{object-position: center top}
.table1 table td.t-name{font-size: 18px; font-weight: bold;;}
.table1 table td.t-cont{padding: 17px 32px; font-size: 16px; font-weight: 300; text-align: left; border-right: 0;}

.table1.w1 .w1-1{width: 200px;}
.table1.w1 .w1-2{width: 100px;}
.table1.w1 .w1-3{width: 126px;}

/* ==========================================================================
   PLUG-IN STYLE
   ========================================================================== */
/*Swiper*/
/* Pager */
.sw-dot-type1 .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, 
.sw-dot-type1 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 4px}
.sw-dot-type1 .swiper-pagination-bullet{position: relative; width: 20px; height: 20px; border:1px solid transparent; background-color:transparent; opacity:1;}
.sw-dot-type1 .swiper-pagination-bullet::after{content: ""; display: block; position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; background-color: #fff; border-radius: 3px;}
.sw-dot-type1 .swiper-pagination-bullet-active{border-color: #fff;}
.sw-dot-type2 .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, 
.sw-dot-type2 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px}
.sw-dot-type2 .swiper-pagination-bullet{position: relative; width: 14px; height: 14px; border: 2px solid #fff; background-color: transparent; opacity:1;}
.sw-dot-type2 .swiper-pagination-bullet-active{background-color: #fff;}

/* Direction */
.sw-arr-type1 .swiper-button-prev,
.sw-arr-type1 .swiper-button-next{width: 30px; height: 30px; background-repeat:no-repeat; background-size: 15px auto; transition:ease-in-out .2s}
.sw-arr-type1 .swiper-button-prev{background-image:url('../images/common/arr0101.png'); background-position: left center}
.sw-arr-type1 .swiper-button-next{background-image:url('../images/common/arr0102.png'); background-position: right center}
.sw-arr-type1.arr-black .swiper-button-prev{background-image:url('../images/common/arr0103.png');}
.sw-arr-type1.arr-black .swiper-button-next{background-image:url('../images/common/arr0104.png');}

.sw-arr-type2 .swiper-button-prev,
.sw-arr-type2 .swiper-button-next{width: 71px; height: 71px; background-repeat:no-repeat; background-size: 100% auto; opacity: .6; transition:ease-in-out .2s}
.sw-arr-type2 .swiper-button-prev{background-image:url('../images/common/arr0101.png'); background-position: left center}
.sw-arr-type2 .swiper-button-next{background-image:url('../images/common/arr0102.png'); background-position: right center}
.sw-arr-type2 .swiper-button-prev:hover, 
.sw-arr-type2 .swiper-button-prev:focus,
.sw-arr-type2 .swiper-button-next:hover,
.sw-arr-type2 .swiper-button-next:focus{opacity: 1;}

/* ==========================================================================
   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{display: none; position: fixed; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 10000;}

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