@charset "utf-8";


/* **************************************** *
 * GLOBAL
 * **************************************** */
/* default style clear */
.home .main_container {padding: 0;}
.home .go_top {display: none;}
.home:not(.fp-viewing-visual) #header {border-bottom-color: #ededed;}
.home .slick-control {margin-left: -29px;}
.home .cycle_control {margin-left: -29px;}

/* single column */
.main_single_wrap {max-width: 1200px ;margin: 0 auto; padding:250px 20px 0 10px;}

/* 초기화 */
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
button {cursor:pointer}
pre {overflow-x:scroll;font-size:1.1em}

/* title */
h3.magin_title	{font-size:47px; color:#282828; text-align:center; padding:0 0 40px 0; display:block; line-height:100%;}



/* **************************************** *
 * VISUAL
 * **************************************** */
.main_section_visual {position: relative; height:827px;}
.main_visual_slider {width: 100%;height: 100%;position: relative;}
.main_visual_item {display: none;width: 100%;height: 100%;position: relative;}
.main_visual_item:first-child {display: block;}
.main_visual_item_bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: no-repeat center center;background-size: cover; background-attachment: fixed;}
.main_visual_item_bg_mobile {display: none;}
.main_visual_content {width: 100%;position: relative;z-index: 1; height:900px;}
.main_visual_content_inner {width: 100%;padding-bottom: 90px; height:900px}
.main_visual_content_inner h2{margin-left: 0;font-size: 56px;letter-spacing: -0.05em;line-height: 1.34; color: #666666;}
.main_visual_content_inner h2.main_visual_title_top{  font-size: 30px; margin-bottom:10px;}
.main_visual_content_inner h2.main_visual_title_top span{  font-size:32px;}
.point {font-size:30px;}
.main_visual_desc {padding: 14px 0 36px;font-size: 16px;line-height: 1.75;color: #666;}
.main_visual_icon > li {float: left;margin-right: 34px;}
.main_visual_icon > li:last-child {margin-right: 0;}
.main_visual_icon img {display: block;margin: 0 auto;max-width: 100%;}
.main_visual_icon figcaption {display: block;padding-top: 14px;font-size: 12px;line-height: 1.5;font-weight: 400;color: #009fe9;}

.btns_main{
  margin-top:3%;
}
.btn_main{
  display:inline-block;
}
.btn_down{margin-right:1%;}
.btn_main a {
    display: inline-block;
    border: 1px solid #3face7;
    font-size: 17px;
    color: #3face7;
    padding: 10px 0;
    z-index: 999;
    border-radius: 6px;
    width: 210px;
    text-align: center;
  }

.btn_main a:last-child { margin-right:0; }
.btn_main a:hover{ border:0; background:#3face7; color:#fff;}
.btn_intro{
  display: inline-block;
  border-radius: 50px;
  width: 120px;
  height: 40px;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  line-height: 2.5;
}
.btn_intro:hover{
  background:#fff;
  border-color:#fff;
  color:#3face7;
  font-weight:600;
}
/*
.btn_down a {display:inline-block; background:#3face7; font-size:17px; color:#fff; padding:16px 24px; z-index:999; border-radius:6px; margin-top:3%;}
.btn_reservation a {display:inline-block; background:#3face7; font-size:17px; color:#fff; padding:16px 24px; z-index:999; border-radius:6px; margin-top:3%;}
.btn_reservation a {display:inline-block; width:337px; height:287px; background:url(../images/btn_reservation.png) no-repeat; font-size:37px; color:#282828; text-align:center; line-height:287px; z-index:999;  margin-top:3%;}
*/


/* **************************************** *
 * rolling_banner
 * **************************************** */
/* 사진 */
.main_grid_wrap {height: 100%;}
.main_grid_wrap:after {content: '';display: table;clear: both;}
.main_grid_wrap > div {position: relative;}
.main_grid_first {float: left;width: 42%; background: url(../images/main_tip_bg.jpg); background-size: cover; height: 100%; padding-bottom:0px;}
.main_grid_first_inner {float: right;width: 100%;height: 100%; background: rgba(63, 172, 231, 0.65);}
.main_grid_second {float: right;width: 58%; padding:30px; height:100%;}
.main_grid_second_inner {float: left;width: 100%;height: 100%;max-width: 766px;padding-left: 59px; padding-top:150px;}
.main_section_share {height:700px;}

.last_tip_slider_wrap {width: 100%; margin-top: 0; z-index: 1; height:100%; position:absolute; bottom:0; left:0; height:350px;}
.last_tip_slider_wrap_inner {position: relative;overflow: hidden;z-index: -1; height:100%;}
.last_tip_slider {width: 100%;}
.last_tip_slider .jt_card_list_item:nth-child(n) {width: 100%; clear: none; margin: 0; height:350px; float:right;}
.last_tip_slider_wrap .slick-control {margin: 0;position: absolute;left: 0px;bottom: 0px;background: #fff; height:50px;}


/* 가사관리 */
.main_grid_first_inner h3 {font-size:47px; color:#fff}

.main_grid_first_inner .greeting{
  padding:180px 0 50px 220px
}
.main_grid_first_inner .greeting div h4{
  font-size:30px;
  color:#fff
}
.sld_mobile{
  display:none;
}
.main_grid_first_inner .greeting div h3,
.main_grid_first_inner .greeting div span,
.main_grid_first_inner .greeting div p{
  color:#fff
}
.main_grid_first_inner .greeting div p{
font-size:20px;
line-height:1.6;
margin-bottom:50px;
}
.main_grid_first_inner .greeting div h3{
margin: 10px 0 30px;
}
.main_services_text {font-size:24px; color:#282828; padding-top:20px; line-height:1.6}
.main_services_wrap p {margin-top:20px}
.main_services_wrap h3{
  font-size:30px;
  color:#3face7
}
.main_services_photo {position:relative; width:100%; margin-top:90px}
.main_services_photo ul li {width:32%; float:left; margin-right:8px;}
.main_services_photo ul li:last-child {margin-right:0;}
.main_services_photo ul li img {width:100%}.main_grid_first_inner .greeting


/* **************************************** *
 * CARD LIST
 * **************************************** */

.jt_card_list_item {float: left;width: 32%;margin-right: 0;margin-bottom: 0;}
.jt_card_list_item:nth-child(3n) {margin-right: 0;}
.jt_card_list_item:nth-child(3n+1) {clear: both;}
.jt_card_list_link {display: block;position: relative; height:100%;}
.jt_card_list_figure {position: relative;overflow: hidden; height:100%;}
.jt_card_list_figure:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #000;opacity: 0.3;}
.jt_card_list_figure img {display: block; height: auto;-webkit-transform: scale(1) rotate(0deg);-ms-transform: scale(1) rotate(0deg);transform: scale(1) rotate(0deg);-webkit-transition: -webkit-transform 800ms;transition: -webkit-transform 800ms;transition: transform 800ms;transition: transform 800ms, -webkit-transform 800ms;}
.jt_card_list_link p {width: 100%;padding: 0 37px;position: absolute;top: 42px;left: 0;font-size: 40px;font-weight: 200;line-height: 1.25;color: #fff;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;z-index: 1;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;max-height: 3.75em;}
.jt_card_list_item:hover .jt_card_list_figure img {-webkit-transform: scale(1.05) rotate(2deg);-ms-transform: scale(1.05) rotate(2deg);transform: scale(1.05) rotate(2deg);}




/* **************************************** *
 * 기본 서비스 진행순서
 * **************************************** */
.order_wrap	{background:#f8f8f8 url(../images/order_bg.jpg) no-repeat top right; padding:94px 0 93px 0;}
.order_box		{width:1200px; margin:0 auto; padding-top:50px;}
.order_box	ul li	{
  width: 140px;
  height: 140px;
  float: left;
  text-align: center;
  padding: 25px 0 0 0;
  margin-top: 19px;
  border-radius: 50%;
  position:relative;
  margin-right: 72px;

}
.order_box	ul li:after{
  display:block;
  content:'';
  width:30px;
  height:12px;
  background:url('../images/listArrow.svg') no-repeat center 100%;
  position:absolute;
  right:-52px;
  top:50%
}
.order_box	ul li:before{
  display:block;
  content:'';
  width:160px;
  height:160px;
  border-radius:50%;
  border:1px solid #ddd;
  position:absolute;
  top:-11px;
  left:-11px;
}
.order_box	ul li img	{margin-bottom:20px; width:40px; margin:0 auto; }
.order_box	ul li p	{font-size:24px}
.order_box	ul li p.step{font-size:20px}
.order_box	ul li.box1	{background:#e7e7e7 no-repeat left center; margin-bottom:72px;}
.order_box	ul li.box2	{background:#3FACE7 no-repeat left center; margin-bottom:72px;}
.order_box	ul li.box6:after {display:none;}
.order_box	ul li.box2 p	{color:#fff}
.order_box	ul li.box7, .box9, .box11	{background:#3face7 no-repeat left center;}
.order_box	ul li.box8, .box10, .box12	{background:#e7e7e7 no-repeat left center; }
.order_box	ul li.box7 p, .box9 p, .box11 p	{color:#fff}

.order_btn_wrap {width:1200px; margin:0 auto; margin-top:93px;}
.order_btn_wrap li {float:left; width:33.333%; }
.order_btn {display:block; line-height:70px; font-size:20px; text-align:center; color:#282828; width:272px; height:70px; border-radius:10px; border:1px solid #282828; margin:0 auto}
.order_btn img {    padding-left: 10px;
    display: inline-block;
    vertical-align: baseline;}




/* **************************************** *
 * 우렁각시 서비스 특징
 * **************************************** */
.feature_wrap	{position:relative; background:url(../images/feature_bg.png) no-repeat bottom left; background-size:37vw; padding:94px 0 114px 0}
.feature_box {width:1200px; margin:0 auto}
.feature_box ul li	{width:354px; float:left; text-align:center; padding: 0 0 0; margin-top:19px; margin-right:68px; display:block; cursor:pointer}
.feature_box ul li:last-child	{margin-right:0;}
.feature_box ul li dl	{margin-top:32px}
.feature_box ul li dl dt	{font-size:23px; font-weight:bold; margin-bottom:20px; color:#282828}
.feature_box ul li dl dd	{font-size:15px; text-align:left; color:#666;padding-bottom:5px}




/* **************************************** *
 * 우렁각시 앱 다운로드
 * **************************************** */
.down_wrap	{width:1200px; width:60%; margin:0 auto; border:1px solid #cacaca; background:#fff; padding:39px 0; margin-top:97px}
.down_wrap > ul > li	{width:50%; float:left; border-right:1px solid #e7e7e7; padding:0 30px}
.down_wrap > ul > li:last-child	{border-right:0; padding:0 20px;}
.down_wrap > ul > li > ul li 	{float:left;}
.down_wrap > ul > li > ul li:first-child 	{padding-right:20px; line-height:56px}
@media (max-width: 415px){
.down_wrap	{width:1200px; width:100%;}
}




/* **************************************** *
 * SLICK
 * **************************************** */

.slick-list, .slick-track {height: 100%;}
.slick-control {display: inline-block;margin-top: 14px;position: relative;font-size: 0;line-height: 1;z-index: 10;}
.slick-control:after {content: '';display: block;width: 1px;height: 30px;position: absolute;top: 50%;left: 50%;margin-left: -0.5px;margin-top: -15px;background: #ddd;}
.slick-control .slick-arrows {display: inline-block;width: 61px;height: 53px;padding: 0;margin: 0;position: relative;font-size: 0;background: none;border: none;outline: none;cursor: pointer;z-index: 1;}
.slick-control .slick-arrows:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';font-size: 14px;font-weight: normal;line-height: 67px;text-align: center;color: #aaa;-webkit-transition: color 300ms;transition: color 300ms;}
/* .slick-control .slick-prev:after {content: '\e902';}
.slick-control .slick-next:after {content: '\e903';} */
.slick-control .slick-arrows:hover:after {color: #009fe9;}
.slick-control.second {display: block;width: 100%;height: 60px;position: absolute;top: 50%;margin-top: -30px;}
.slick-control.second:after {display: none;}
.slick-control.second .slick-arrows {display: block;position: absolute;width: 60px;height: 100%;top: 0;border: 1px solid #ccc;border-radius: 50%;-webkit-transition: border 300ms;transition: border 300ms;}
.slick-control.second .slick-arrows:after {color: #ccc;font-size: 20px;line-height: 58px;}
.slick-control.second .slick-prev {left: -90px;}
.slick-control.second .slick-prev:after {content:'\e910';}
.slick-control.second .slick-next {right: -90px;}
.slick-control.second .slick-next:after {content:'\e911';}
.slick-control.second .slick-arrows:hover {border-color: #009fe9;}
.slick-control.second .slick-arrows:hover:after {color: #009fe9;}



/* **************************************** *
 * CYCLE
 * **************************************** */


.cycle_pager_wrap {position: absolute; left: 0;bottom: 30px; top:initial !important; z-index: 120; width:100%}
.cycle_pager {position:relative; font-size: 0;line-height: 1; max-width: 1200px; width:100%; margin: 0 auto; text-align:center}
.cycle_pager li {display: inline-block;width: 15px;height: 15px;margin-right: 10px;-webkit-transition: width 400ms ease;transition: width 400ms ease;}
.cycle_pager li:last-child {margin-right: 0;}
.cycle_pager li span {display: block;width: 100%;height: 100%;font-size: 0;background: #d4d4d4;border-radius: 10px;cursor: pointer;-webkit-transition: background 300ms;transition: background 300ms;}
.cycle_pager li span:hover {background: #009fe9;}
.cycle_pager li.cycle-pager-active {width: 30px;}
.cycle_pager li.cycle-pager-active span {background: #009fe9;}
