@charset "utf-8";
/* CSS Document */

.main-visual {position:relative;margin:0 auto;height:750px;}
.main-visual .visual-slider {overflow:hidden;position:absolute;left:50%;top:50%;width:100%;height:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.main-visual .visual-slider .swiper-slide {overflow:hidden;position:relative;height:100%;}
.main-visual .visual-slider .swiper-slide .vs-bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);   transition-duration:3s;}
.main-visual .visual-slider .swiper-slide .vs-bg1{ background:#d4dbd4 url(/sites/care/image/mVisual01.jpg) no-repeat 60% 50%;background-size:cover  }
.main-visual .visual-slider .swiper-slide .vs-bg2{ background:#c8cdd4 url(/sites/care/image/mVisual02.jpg) no-repeat 60% 50%;background-size:cover   }
.main-visual .visual-slider .swiper-slide .vs-bg3{ background:#d4dbd4 url(/sites/care/image/mVisual01.jpg) no-repeat 60% 100%;  }
.main-visual .visual-slider .swiper-slide .vs-txt { position:absolute; top:140px; left:0; z-index:1; }

.main-visual .visual-slider .swiper-slide .vs-txt h2 {opacity:0;font-size:77px; font-weight:800;color:#1464a8;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px); letter-spacing:-3px; margin-top:20px;}
.main-visual .visual-slider .swiper-slide .vs-txt h2 span{ font-size:65px;}
.main-visual .visual-slider .swiper-slide .vs-txt h2 .txt1{ color:#009c84;}
.main-visual .visual-slider .swiper-slide .vs-txt h2 .txt2{ color:#f18419;}
.main-visual .visual-slider .swiper-slide .vs-txt .eng {opacity:0;font-size:27px;color:#fff; background:#5572b8; border-radius:10px; display:inline-block; padding:5px 20px;letter-spacing:-0.028em;line-height:1.556em;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);   font-weight:500;}
.main-visual .visual-slider .swiper-slide .vs-txt .bTxt {opacity:0;margin-top:20px;font-size:25px; line-height:35px;color:#777;letter-spacing:-0.028em;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);   font-weight:400;}

.main-visual .visual-slider .main-visual-btn{ position:absolute; bottom:120px; left:0}
.main-visual .visual-slider .swiper-button-prev {position:absolute;left:0; top:auto; bottom:0;z-index:10;background:none;}
.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:25px; color:#333; text-align:center; line-height:70px; display:block; width:100%;}
.main-visual .visual-slider .swiper-button-prev:after {display:none;}
.main-visual .visual-slider .swiper-button-next {position:absolute; left:120px;top:auto; bottom:0;z-index:10;margin-top:0; background:none;}
.main-visual .visual-slider .swiper-button-next:after {display:none;}

.main-visual .visual-slider .swiper-pagination {position:absolute;left:40px;bottom:0;z-index:10;margin-top:20px;width:70px;font-size:17px;color:#333;letter-spacing:0.333em;font-style:italic;}
.main-visual .visual-slider .swiper-pagination span {font-style:normal;}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg {-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:transform 1.4s;-moz-transition:transform 1.4s;-ms-transition:transform 1.4s;-o-transition:transform 1.4s;transition:transform 1.4s;}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg1{}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2 {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;	}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt p {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;	-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-ms-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s;}
.hide {position: absolute;left: -9999%;font-size: 0;line-height: 0;text-indent: -9999px;}





.sec01{ margin:100px 0;}
.sec01 .s01{ width:53%; }
.sec01 .s01 li{ position:relative; padding-left:20px; padding-right:130px; margin-bottom:15px; display: block;  overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}
.sec01 .s01 li:before{ content:''; position:absolute; top:9px; left:0; width:5px; height:5px; border-radius:50%; background:#ddd;}
.sec01 .s01 li a{ color:#555;}
.sec01 .s01 li span{ position:absolute; right:0; top:0; color:#999;}
.sec01 .s02{ width:calc((100% - 53%) - 100px); margin-left:100px; }
.sec01 .sTit { color:#777; margin-bottom:30px;}
.sec01 .sTit span{ font-size:30px; font-weight:700; color:#333; margin-right:20px;}





/* 팝업존 */
.popup{position:relative; width:100%;}
.popup h3{ font-size:20px; line-height:20px; color:#222;}
.popup .popup_list{display:block;}
.popup .popup_list p{display:table; float:left; }
.popup .popup_list a{display:table-cell; vertical-align: middle; width:100%; text-align:center; }
.popup .popup_list img{width:100%; height:auto; max-width:100%; max-height:100%;border-radius:17px;  overflow:hidden; }
.popup .popup_list .slick-arrow{position:absolute;top:-60px; width:20px; height:30px; font-size:0; overflow:hidden; cursor:pointer; z-index:1;}
.popup .popup_list .slick-next{right:10px; }
.popup .popup_list .slick-prev{right:78px; }
.popup .popup_list .slick-next:before, .popup .popup_list .slick-prev:before{font-family:xeicon; font-size:30px; color:#333;}
.popup .popup_list .slick-next:before{content:"\e93f"}
.popup .popup_list .slick-prev:before{content:"\e93c"}

.popup .control a{position:absolute; right:40px; top:-60px; width:25px; height:30px; display:block; font-size:0;overflow:hidden;}
.popup .control a.btn_stop{ background:url('/sites/care/image/btn_p_stop.png') no-repeat center;}
.popup .control a.btn_play{display:none; background:url('/sites/care/image/btn_p_play.png') no-repeat center;}
.popup .control a.btn_stop:before, .popup .control a.btn_play:before{font-family:xeicon; font-size:30px; color:#333; line-height:20px;}
.popup .control a.btn_stop:before{ content:"\ea3b"}
.popup .control a.btn_play:before{ content:"\ea3e"}
.popup .control p{ position:absolute; right:120px; top:-10px;}

.slick-slider{transition:all ease-in-out .3s; 	box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;  user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
.slick-slide{ display:none;min-height:1px; vertical-align:middle; }
.slick-list{ overflow:hidden; }
.slick-list.dragging{ cursor:pointer; }
.slick-initialized .slick-slide{ display:inline-block; }
.slick-arrow.slick-hidden { display:none; }
.slick-current { opacity:1; display:block; }


.sec02{ background:#eeeef1; padding:100px 0;}
.sec02 h1{ font-size:25px; margin-bottom:10px; color:#333;}
.sec02 p{ color:#999; font-size:17px;}
.sec02 .s01{ width:65%}
.sec02 a{ position:relative;padding: 13px 25px;  border-radius: 25px; display: inline-block;width: auto;transition: all .3s linear; font-weight:500; font-size:17px;}
.sec02 a:hover{background:#0087e1; color:#fff; border-color:#0087e1} 
.sec02 a i{ position:absolute; top:12px; right:25px;}

.sec02 .s01 li{ background:#fff; width:calc((100% / 2) - 15px); }
.sec02 .s01 li .in{ position:relative; margin:45px 50px;}
.sec02 .s01 li:nth-child(1){ margin-right:30px;}
.sec02 .s01 li:nth-child(1) .in{ background:url('/sites/care/image/sec02-01.png') no-repeat 100% 90%; }
.sec02 .s01 li:nth-child(2){ background:#0072bc; color:#fff;}
.sec02 .s01 li:nth-child(2) h1{ color:#fff;}



.sec02 .s01 li:nth-child(2) .in p{ color:#cbdbec}
.sec02 .s01 li:nth-child(3){ width:100%; margin-top:30px;}

.sec02 .s01 li:nth-child(2) a{ display:inline-block; width:calc((100% / 2) - 50px);padding:30px 20px; font-size:20px;text-align:center;}
.sec02 .s01 li:nth-child(2) a.btn1{color:#fff; border:1px solid rgb(255, 255, 255, 0.2); }
.sec02 .s01 li:nth-child(2) a.btn2{ position:relative; background:#fff; color:#0072bc; font-size:23px;}
.sec02 .s01 li:nth-child(2) a.btn2 span{ padding-right:30px;}
.sec02 .s01 li:nth-child(2) a.btn2 i{ position:absolute; top:30px; right:25px; background:#0072bc; color:#fff; width:30px; height:30px; line-height:30px; border-radius:50%; text-align:center;}
.sec02 .s01 li:nth-child(3) .in{ position:relative;}
.sec02 .s01 li:nth-child(3) .in:before{ content:''; position:absolute; top:-20px; right:0; width:100px; height:110px; background:url('/sites/care/image/sec02-04.png') no-repeat 100% 50%; background-size:100% auto; }
.sec02 .s01 li:nth-child(3) .in p{ margin-right:100px;}
.sec02 .s01 li:nth-child(3) h1, .sec02 .s01 li:nth-child(3) p { display:inline-block; vertical-align:top;}
.sec02 .s01 li:nth-child(3) h1{ margin-right:30px;}

.sec02 .s02{ width:calc((100% - 65%) - 30px); margin-left:30px;}
.sec02 .s02 ul{display:table; width:100%; height:100%;}
.sec02 .s02 li{ width:100%; background:#fff; height:calc((100% / 2) - 30px);}
.sec02 .s02 li:nth-child(1){ margin-bottom:30px;background:#fff url('/sites/care/image/sec02-02.png') no-repeat 90% 50%; }
.sec02 .s02 li:nth-child(2){ background:#d9f2fb url('/sites/care/image/sec02-03.png') no-repeat 90% 50%;}
.sec02 .s01 li:nth-child(3) a, .sec02 .s02 li:nth-child(1) a{ background:#efefef;}
.sec02 .s01 li:nth-child(3) a:hover, .sec02 .s02 li:nth-child(1) a:hover{ background:#448ccb; color:#fff;}
.sec02 .s01 li:nth-child(1) a, .sec02 .s02 li:nth-child(2) a{ background:#448ccb; color:#fff;}
.sec02 .s01 li:nth-child(1) a:hover, .sec02 .s02 li:nth-child(2) a:hover{ background:#124da2}
.sec02 .s01 li:nth-child(3) .in{ margin:50px;}
.sec02 .s01 li:nth-child(1) .in, .sec02 .s02 li:nth-child(1), .sec02 .s02 li:nth-child(2){background-size:110px auto;}

.sec02 .s01 li:nth-child(1) a, .sec02 .s02 li:nth-child(1) a, .sec02 .s01 li:nth-child(3) a, .sec02 .s02 li:nth-child(2) a{ width:170px;}
.sec02 .s02 .in{ padding:40px 50px;}


@media all and ( max-width: 1920px ){
	
	
	
	.main-visual {height:550px;}

	
	.main-visual .visual-slider .swiper-slide .vs-txt{ left:0px; top:100px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .eng{ font-size:21px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2 { font-size:60px; margin-top:10px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2 span{ font-size:45px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .bTxt{ font-size:20px; line-height:27px;}
	.main-visual .visual-slider .main-visual-btn{ bottom:80px;}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:20px;}
	
	.sec01{ margin:70px 0;}
	.sec01 .s01 li{ margin-bottom:10px;}
	.sec01 .sTit{ margin-bottom:20px}
	.sec01 .sTit span{ font-size:25px;}
	
	.popup .popup_list .slick-arrow, .popup .control a{ top:-50px;}
	.popup .control a.btn_stop:before, .popup .control a.btn_play:before{ font-size:25px;}
	.popup .control a{ right:37px;}
	
	.sec02 { padding:70px 0;}
	.sec02 h1{ font-size:20px;}
	.sec02 p{ font-size:16px;}
	.sec02 .s01 li .in{ margin:25px 35px;}
	.sec02 .s01 li:nth-child(1) .in, .sec02 .s01 li:nth-child(3) .in, .sec02 .s02 li:nth-child(1), .sec02 .s02 li:nth-child(2){background-size:90px auto;}
	.sec02 .s02 .in{ padding:20px 35px;}
	.sec02 .s01 li:nth-child(1) a, .sec02 .s02 li:nth-child(1) a, .sec02 .s01 li:nth-child(3) a, .sec02 .s02 li:nth-child(2) a{ width:125px;}
	.sec02 a{ font-size:15px; padding:10px 20px;}
	.sec02 a i{ right:15px;}
	.sec02 .s01 li:nth-child(2) a{ font-size:17px; padding:23px 20px }
	.sec02 .s01 li:nth-child(2) a.btn2{ font-size:20px;}
	.sec02 .s01 li:nth-child(2) a.btn2 i{ top:23px; width:25px; height:25px; line-height:25px;}
	
	.sec02 .s01 li:nth-child(3) .in:before{ width:70px;}
	.sec02 .s01 li:nth-child(1){ margin-right:20px;}
	.sec02 .s01 li {width: calc((100% / 2) - 10px);}
	.sec02 .s01 li:nth-child(3){ margin-top:20px;}
	.sec02 .s02{width: calc((100% - 65%) - 20px); margin-left:20px;}
	.sec02 .s02 li:nth-child(1){ margin-bottom:20px;}
	.sec02 .s01 li:nth-child(3) .in{ margin:27px 35px;}
	
	

	
	
}

@media all and ( max-width:1680px ){
	
}

@media all and ( max-width:1440px ){
}

@media all and ( max-width:1280px ){
	
	.main-visual {height:450px;}
	.main-visual .visual-slider .swiper-slide .vs-txt{ top:75px; left:20px;}
	.main-visual .visual-slider .main-visual-btn{ left:20px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2 span{ font-size:37px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:50px;}
  .main-visual .visual-slider .main-visual-btn{ bottom:40px;}
	.sec01{ padding:0 10px;}
	.sec01 .s02 {width: calc((100% - 53%) - 50px);margin-left:50px;}
  .sec02{ padding:50px 10px;}
}

@media all and ( max-width:1024px ){
  
  .sec02 .s01{width:100%;}
  .sec02 .s02{width:100%;margin:20px 0 0 0;}
  .sec02 .s02 li{display: inline-block;width: calc((100% / 2) - 13px); height: auto;}
  .sec02 .s02 li:nth-child(1){ margin-right:20px;}
}

@media all and ( max-width:960px ){
  
  .sec01 .s01{width:100%;}
  .sec01 .s02{width:100%;margin:20px 0 0 0;}
}

@media all and ( max-width:800px ){
  .sec02 .s01 li{width:100%; margin:0;}
  .sec02 .s01 li:nth-child(1){width:100%; margin:0 0 20px 0;
  
}
@media all and ( max-width:640px ){
  .main-visual {height:350px;}
  .main-visual .visual-slider .swiper-slide .vs-txt .bTxt{ display:none;}
  .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:35px;}
  .main-visual .visual-slider .swiper-slide .vs-txt h2 span{font-size:30px;}
  
  .sec02 .s02 li{width:100%;}
  .sec02 .s01 li:nth-child(3) h1, .sec02 a{display:block}
  .sec02 a{ margin-top:10px;}
  
  
}