@charset "utf-8";

/*
 * File       : component.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) TABS
 * 2) SLICK
 * 3) CYCLE
 */



/* **************************************** *
 * TABS
 * **************************************** */
/* TABS */
.tabs_menu {float: left;width: 100%;text-align: center;margin: 0 auto;}
.tabs_menu li {display: inline-block;margin: 0 1px;}
.tabs_menu li a {display: block;width: 141px;height: 41px;font-size: 14px;line-height: 37px;font-weight: 600;text-align: center;color: #333;border: 2px solid #ddd;border-radius: 20px;transition: background 300ms, color 300ms;}
.tabs_menu li:hover a {background: #f1f1f1;}
.tabs_menu li.active a {background: var(--color-primary);border-color: var(--color-primary);}
.tabs_menu li.active a {color: #fff;}
.tabs_panels {float: left;width: 100%;}
.tabs_panels > div {display: none;}
.tabs_panels > div:first-child {display: block;}
.tabs_component:after {content: '';display: table;clear: both;}



/* **************************************** *
 * SLICK
 * **************************************** */
.slick-list, .slick-track {height: 100%;}

.slick-dots {position: absolute;left: 56.5%;bottom: 39px;font-size: 0;line-height: 0;}
.slick-dots li {display: inline-block;width: 12px;height: 12px;margin: 0 3px;vertical-align: middle;}
.slick-dots span {display: block;width: 100%;height: 100%;background: transparent;border: 2px solid #fff;border-radius: 50%;transition: background 300ms;cursor: pointer;}
.slick-dots li.slick-active span {background: #fff;}

.slick-control {display: block;width: 100%;height: 62px;position: absolute;top: 50%;margin-top: -60px;}
.slick-control .slick-arrows {display: block;width: 62px;height: 100%;padding: 0;position: absolute;font-size: 0;outline: none;border: none;border-radius: 50%;background: #e2e2e2 no-repeat center center;cursor: pointer;transition: background 400ms;}
.slick-control .slick-prev {left: 0;background-image: url(../images/icon/icon-arrow-left-primary.svg);}
.slick-control .slick-next {right: 0;background-image: url(../images/icon/icon-arrow-right-primary.svg);}
.slick-control .slick-arrows:hover {background-color: var(--color-primary);}
.slick-control .slick-prev:hover {background-image: url(../images/icon/icon-arrow-left-secondary.svg);}
.slick-control .slick-next:hover {background-image: url(../images/icon/icon-arrow-right-secondary.svg);}



/* **************************************** *
 * CYCLE
 * **************************************** */
.cycle_control {display: block;width: 100%;height: 62px;position: absolute;top: 50%;margin-top: -68px;z-index: 120;}
.cycle_btn {display: block;width: 62px;height: 100%;padding: 0;position: absolute;font-size: 0;outline: none;border: none;border-radius: 50%;background: #e2e2e2 no-repeat center center;cursor: pointer;transition: background 400ms;}
.cycle_prev {left: 58px;background-image: url(../images/icon/icon-arrow-left-primary.svg);}
.cycle_next {right: 58px;background-image: url(../images/icon/icon-arrow-right-primary.svg);}
.cycle_btn:hover {background-color: var(--color-primary);}
.cycle_prev:hover {background-image: url(../images/icon/icon-arrow-left-secondary.svg);}
.cycle_next:hover {background-image: url(../images/icon/icon-arrow-right-secondary.svg);}

.cycle_pager_wrap {width: auto;position: absolute;left: 50%;bottom: 70px;overflow: hidden;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);}
.cycle_pager {display: block;width: auto;position: relative;font-size: 0;line-height: 0;}
.cycle_pager:after {content: '';display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 10;}
.cycle_pager li {display: inline-block;width: 20px;height: 12px;vertical-align: middle;}
.cycle_pager li span {display: block;width: 12px;height: 12px;margin: 0 auto;border-radius: 50%;background: #f1efeb;-webkit-transition: all 250ms;transition: all 250ms;}
.cycle_pager li.cycle-pager-small span {width: 8px;height: 8px;margin: 2px auto;}
.cycle_pager li.cycle-pager-xsmall span {width: 4px;height: 4px;margin: 4px auto;}
.cycle_pager li.cycle-pager-active span {background: #886152;}