@import url("common.css");

/** VISUAL **/
#visual {position: relative; width: 100%; height: 680px; margin-top:105px;}

#visual .visual_txt {position:absolute; left:50%; top:20%; margin-left:-360px; transform:translateX(-50%); z-index:999; animation:visual_txt_ani 1s forwards; animation-delay:0s; opacity:0;}
		#visual .visual_txt p{font-size: 18px; color:#f29201; letter-spacing: 1.3pt; padding-bottom: 15px; text-align: center; line-height: 100%;}
		#visual .visual_txt h2{font-size: 50px; color:#fff; font-weight: 100; text-align: center; line-height:45px; letter-spacing: -3pt;}
		#visual .visual_txt h2 span{font-weight: 700; letter-spacing: -3.5pt;}

@keyframes visual_txt_ani {
0% {top:80px; opacity:0;}
100%  {opacity:1; top:25%;}
}


#visual .slick-slider {position: relative; display: block; outline:none; height: 100%;}
#visual .slick-list {position: relative; display: block; overflow: hidden; height: 100%;}
#visual .slick-track {position: relative; display: block; outline:none; height: 100%;}
#visual .slick-slide {display: none; float: left; height: 100%;}
#visual .slick-initialized .slick-slide{display: block;}
#visual .slick-vertical .slick-slide{display: block;}

/* #visual .section {width:100%; height:100%; background-position: center; background-size: cover; background-repeat:no-repeat;}
#visual .cover01 {background-image:url('/img/visual_1.jpg');}
#visual .cover02 {background-image:url('/img/visual_2.jpg');}
#visual .cover03 {background-image:url('/img/visual_3.jpg');} */

#visual .section{position: relative; width:100%; height: 680px;}
#visual .section img{position:Absolute; left:50%; top:50%; transform:translate(-50%,-50%);}


/* Arrows */
#visual .slick-prev, #visual .slick-next {position:absolute;  z-index:9999 !important; top:44.5%; margin-top:-32px; font-size:0; width:65px; height:65px; outline:none; border:0; cursor:pointer; z-index:100;  transition:all 0.3s; border-radius:100%; transition:all 0.3s;}
#visual .slick-prev {left:50%; margin-left:-735px; background:rgba(255,255,255,0.15) url('/html/images/main/prevArrow.png')no-repeat center; }
#visual .slick-prev:hover {background:rgba(255,255,255,0.3) url('/html/images/main/prevArrow.png')no-repeat center; transition:all 0.3s;}
#visual .slick-next {right:50%; margin-right:-735px; background:rgba(255,255,255,0.15) url('/html/images/main/nextArrow.png')no-repeat center;}
#visual .slick-next:hover {background:rgba(255,255,255,0.3) url('/html/images/main/nextArrow.png')no-repeat center; transition:all 0.3s;}

/* Dots */
#visual .slick-dots{position:absolute;  z-index:100; bottom:100px; left:50%; margin-left:-28px;}
#visual .slick-dots li {position: relative; display: inline-block; cursor: pointer; width:12px; height:12px; margin-right:10px; background:#b9b0ac; border-radius:100%;}
#visual .slick-dots li.slick-active {background:#ec690b;}
#visual .slick-dots li:last-child {margin-right:0;}
#visual .slick-dots li button{display:none;}



/** lnb **/
#lnb {position: absolute; left:50%; transform:translateX(-50%); bottom:-70px; background-color:#fff; border-radius:15px; width: 1240px; z-index: 8888; box-shadow: 5px 5px 20px rgba(0,0,0,0.05);  overflow:hidden; animation:fadeIn 1s ease-in-out forwards; animation-delay:0s; opacity:0;}

#lnb dl dd{position: relative; float:left; width:25%; letter-spacing: -0.5px; box-sizing: border-box;}

#lnb dl dd a {position: relative; display:block; width:100%; font-size: 18px; line-height: 140px; text-align:center; letter-spacing:-0.5px; color:#444; font-weight:600; transition:all 0.3s linear;}
#lnb dl dd:after{position: absolute; right:0; top:30px; display:inline-block; content:''; height: 80px; width: 1px; background: #ddd; opacity:0.7;z-index:11}
#lnb dl dd:last-child:after{display:none;}

#lnb dl dd a span {position:relative; top:-3px; display:inline-block; background-repeat:no-repeat; background-position: center; vertical-align:middle; margin-right:18px; }
#lnb dl dd a span img {opacity:0;}
#lnb dl dd.one a span{background-image:url('/html/images/main/link_icon01.png');}
#lnb dl dd.two a span{background-image:url('/html/images/main/link_icon02.png');}
#lnb dl dd.three a span{background-image:url('/html/images/main/link_icon03.png');}
#lnb dl dd.four a span{background-image:url('/html/images/main/link_icon04.png');}

#lnb dl dd.one a:hover span{background-image:url('/html/images/main/link_icon01_up.png'); transition:all 0.3s linear;}
#lnb dl dd.two a:hover span{background-image:url('/html/images/main/link_icon02_up.png'); transition:all 0.3s linear;}
#lnb dl dd.three a:hover span{background-image:url('/html/images/main/link_icon03_up.png'); transition:all 0.3s linear;}
#lnb dl dd.four a:hover span{background-image:url('/html/images/main/link_icon04_up.png'); transition:all 0.3s linear;}

#lnb dl dd a:hover
{
background: #f39700;
background: -webkit-linear-gradient(left right, #f39700, #8fc31f);
background: -moz-linear-gradient(left right, #f39700, #8fc31f);
background: -o-linear-gradient(left right, #f39700, #8fc31f);
background: linear-gradient(to right, #f39700, #8fc31f);
}
#lnb dl dd:hover:after{background:none;}
#lnb dl dd a:hover{color:#fff; transition:all 0.3s linear;}
/** lnb **/

@keyframes fadeIn {
0% {opacity:0;}
100%  {opacity:1;}
}





/* COMMON */
.ani_effect{position:relative; top:50px; opacity:0; transition:all 0.7s linear;}
.ani_effect.action{top:0; opacity:1; transition:all 0.7s linear; transition-delay:0s;}
.ani_effect.delay1.action{transition-delay:0.3s;}
.ani_effect.delay2.action{transition-delay:0.6s;}
.ani_effect.delay3.action{transition-delay:0.9s;}
/* COMMON */







/**** 치료프로그램 ****/
#careProgram {position: relative; width: 100%; padding:160px 0 110px; background:url('/html/images/main/care_bg.gif') 0 0 repeat-x;}
#careProgram h3.tit {color:#85b027 !important;}
#careProgram .subT{padding: 5px 0 10px;}
/** list **/
#careProgram .slick-list {overflow:hidden;}
/* Arrows */
#careProgram .slick-prev, #careProgram .slick-next {position:absolute; z-index:9999 !important; top:-140px; font-size:0; width:65px; height:65px; outline:none; border:0; cursor:pointer; z-index:100;  transition:all 0.3s; border-radius:100%; transition:all 0.3s; border:1px solid #ddd; box-sizing:border-box;}
#careProgram .slick-prev {left:0; background:rgba(255,255,255,0.15) url('/html/images/main/prevArrow_g.png')no-repeat center; }
#careProgram .slick-prev:hover {background:#9ac147 url('/html/images/main/prevArrow.png')no-repeat center; transition:all 0.3s; border:1px solid #9ac147;}
#careProgram .slick-next {right:0; background:rgba(255,255,255,0.15) url('/html/images/main/nextArrow_g.png')no-repeat center;}
#careProgram .slick-next:hover {background:#9ac147 url('/html/images/main/nextArrow.png')no-repeat center; transition:all 0.3s; border:1px solid #9ac147;}


#careProgram .campaign {width:100%; position:absolute; visibility:hidden; opacity:0; margin-top:50px;}
#careProgram .campaign.visible {position:relative; visibility:visible; opacity:1;}
#careProgram .campaign::after{content:""; display:block; clear:both;}
#careProgram .campaign dl{float:left; margin-left:20px; width:295px; position:relative; overflow:hidden; border-radius:40px 0 40px 0;}
#careProgram .campaign dl a{display:block; background:url('/html/images/main/care_img01.jpg') center center/cover no-repeat; padding:0 0; line-height:1; font-weight:700; letter-spacing:-0.5pt; font-size:25px; color:#fff; transition: all 0.3s ease-out;}
#careProgram .campaign dl a:after {display:block; content:""; width:100%; height:100%; background:#8fc028; opacity:0; position:absolute; bottom:-100%; z-index:1; transition: all 0.3s ease-out;}

#careProgram .campaign dl:first-child{margin-left:0;}
#careProgram .campaign dl dt {overflow:hidden; }
#careProgram .campaign dl dt img{transition:all 0.5s;}
#careProgram .campaign dl dd {position:absolute; top:0; width:295px; text-align:center; margin-top:80px; z-index:999; box-sizing:border-box;}
#careProgram .campaign dl dd img {display:block; margin:0 auto 20px;}
#careProgram .campaign dl dd .moreBtn {margin-top:20px}
.moreBtn {position:relative; display:block; vertical-align:middle; width:30px; height:30px; border-radius:30px; background:#8fc028 url('/html/images/main/menuBtn_up.png') center center no-repeat; margin:0 auto;}

#careProgram .campaign dl a:hover {transition: all 0.3s ease-out;}
#careProgram .campaign dl a:hover::after {bottom:0; opacity:0.5; transition: all 0.3s ease-out;}




/**** 평가프로그램 ****/
#evaluation{position: relative; width: 100%; padding:100px 0 110px; background:url('/html/images/main/evaluation_bg.jpg') top center no-repeat; background-attachment:fixed;}
#evaluation h3.tit {color:#de7606 !important;}
#evaluation .evaluation_in{display:flex; flex-wrap: wrap; justify-content: space-between;}
#evaluation .evaluation_in dl{width: calc((100% - 80px)/5); margin: 0 20px 0 0; padding-top:43px;}
#evaluation .evaluation_in dl:nth-child(5n){margin-right: 0;}
#evaluation .evaluation_in dl a{display:block;}
#evaluation .evaluation_in dl a dt{padding:30px 0 30px; position:relative;}
#evaluation .evaluation_in dl a dt.one:before{content:''; position:absolute; left:0; top:-43px; width:55px; height:43px; background:url('/html/images/main/evaluation_icon01.png') 0 0 no-repeat;}
#evaluation .evaluation_in dl a dt.two:before{content:''; position:absolute; left:0; top:-43px; width:55px; height:43px; background:url('/html/images/main/evaluation_icon02.png') 0 0 no-repeat;}
#evaluation .evaluation_in dl a dt.three:before{content:''; position:absolute; left:0; top:-43px; width:55px; height:43px; background:url('/html/images/main/evaluation_icon03.png') 0 0 no-repeat;}
#evaluation .evaluation_in dl a dt.four:before{content:''; position:absolute; left:0; top:-43px; width:55px; height:43px; background:url('/html/images/main/evaluation_icon04.png') 0 0 no-repeat;}
#evaluation .evaluation_in dl a dt.five:before{content:''; position:absolute; left:0; top:-43px; width:55px; height:43px; background:url('/html/images/main/evaluation_icon05.png') 0 0 no-repeat;}
#evaluation .evaluation_in dl a dt:after{content:''; width:100%; height: 1px; background:#f39700; position:absolute; left:0; top:0; transition:all .3s linear;}
#evaluation .evaluation_in dl a dt .mStit{font-size:22px; letter-spacing:-1px; color:#222; line-height:30px; transition:all .3s linear;}

#evaluation .evaluation_in dl a:hover dt .mStit{color:#e56100;}
#evaluation .evaluation_in dl a dt .num{display:block; font-size:14px; font-weight:700; letter-spacing:0.3pt; color:rgba(0,0,0,0.5); line-height: 110%; font-family: 'montserrat', sans-serif !important; padding:0 0 7px; transition:all .2s linear;} 
#evaluation .evaluation_in dl a:hover dt .num{color:rgba(255,255,255,1);}
#evaluation .evaluation_in dl a dd{width:45px; height:45px; border-radius:50%; background:rgba(0,0,0,0.2); position:relative; transition:all .2s linear;}
#evaluation .evaluation_in dl a:hover dd{background:#f39700;}
#evaluation .evaluation_in dl a dd:after{content:''; position:absolute; left:0; top:0; z-index:1; display:block; width:100%; height:100%; background:url('/html/images/main/arrow_w.png') no-repeat center/100% auto;}





/* 커뮤니티 */
#news {padding: 100px 0 110px; overflow:hidden; background:url('/html/images/main/news_bg.jpg') bottom center no-repeat;}
#news .news .story .contents_box dl{width:600px; height:320px; background-color:#fff; border-radius: 15px; float:left; margin:0 0 0 0; overflow:hidden; border:1px solid #ddd; box-sizing:border-box;}

#news .news .story .contents_box dt{width: 600px; padding: 45px 50px 20px; box-sizing: border-box;}
#news .news .story .contents_box dt span {color:#e89200; font-size: 15px; display:block; box-sizing: border-box;}

#news .news .story .contents_box dd{width:600px; height:190px; padding: 0 50px 20px; box-sizing:border-box; overflow:hidden;}
#news .news .story .contents_box dd .online_in1 {position:relative; padding:0 0;}
#news .news .story .contents_box dd .online_in1 .slick-slide {display:block; box-sizing:border-box; width:600px;}

#news .news .story .contents_box dd a li {display:block; transition:all 0.3s linear;}
#news .news .story .contents_box dd li {width:100%; padding-bottom:18px;}
#news .news .story .contents_box dd li span {color:#ec690b; font-size: 15px; display:block; box-sizing: border-box;}
#news .news .story .contents_box dd li h4{overflow:hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -1pt; color:#666; transition:all 0.3s linear;}
#news .news .story .contents_box dd a:hover li h4 {color:#000; transition:all 0.3s linear;}