@charset "utf-8"; 

/*
 * --------------------------------------------------------------------------
 * descript : 메인 콘텐츠
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.08.17
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */

/* --------------------------------------------------------------------------
   메인 비주얼 슬라이드
   -------------------------------------------------------------------------- */
#visual-slider{position:relative; background:#000;}
#visual-slider .slick-slide{height:700px;}
#visual-slider .item{height:700px;}
#visual-slider .item .inner{height:inherit;}

#visual-slider .item.bg01{background:url(/assets/img/web/main/theme/visual_01.jpg) no-repeat center center;}
#visual-slider .item.bg02{background:url(/assets/img/web/main/theme/visual_02.jpg) no-repeat center center;}
#visual-slider .item.bg03{background:url(/assets/img/web/main/theme/visual_03.jpg) no-repeat center center;}
#visual-slider .item.bg04{background:url(/assets/img/web/main/theme/visual_04.jpg) no-repeat center center;}
#visual-slider .item.bg05{background:url(/assets/img/web/main/theme/visual_05.jpg) no-repeat center center;}

#visual-slider .txt-group{position:absolute; width:700px; left:0; top:150px;}
#visual-slider .txt-group .txt{color:#111; letter-spacing:-2px;}

#visual-slider .txt-group .txt01{margin-bottom:15px; font-size:28px; font-weight:100; animation:fadeOutUp 1s both;}
#visual-slider .txt-group .txt02{font-size:60px; line-height:1.3em; font-weight:700; letter-spacing:-8px; animation:fadeOutUp 1s both;}
#visual-slider .txt-group .txt02 em{color:#ff3e62;}
#visual-slider .txt-group .txt03{font-size:24px; font-weight:100; animation:fadeOutUp 1s both;}
#visual-slider .txt-group .txt03 em{font-weight:700;}

#visual-slider .txt-group .bar{display:block; width:1px; height:100px; margin:25px 0 25px 25px; background:#111; animation:fadeOutUp 1s both;}


#visual-slider .slick-active .txt-group .txt01{animation:fadeInDown 0.5s both .5s;}
#visual-slider .slick-active .txt-group .txt02{animation:fadeInDown 0.5s both .75s;}
#visual-slider .slick-active .txt-group .txt03{animation:fadeInUp 0.5s both 2s;}
#visual-slider .slick-active .txt-group .bar{animation:progress-bar 1s both 1s;}

.visual-slider-control{position:absolute; left:50%; bottom:50px; transform:translate(-50%, 0); z-index:1;}
.visual-slider-control button{float:left; display:inline-block; width:40px; height:40px; line-height:43px; text-align:center; background:rgba(255,255,255,0.3); cursor:pointer;}
.visual-slider-control button.btn-prev{border-radius:40px 0 0 40px; margin-right:1px;}
.visual-slider-control button.btn-next{margin-right:1px;}
.visual-slider-control button.btn-pause{margin-right:1px;}
.visual-slider-control button.btn-play{margin-right:1px; display:none;}

.visual-slider-control .counter{float:left; height:40px; line-height:40px; padding:0 20px; border-radius:0 40px 40px 0; background:rgba(255,255,255,0.3);}

@-webkit-keyframes progress-bar{from{height:0px;}to{height:100px;}}
@keyframes progress-bar{from{height:0px;}to{height:100px;}}


/* --------------------------------------------------------------------------
   메인 비주얼배너(안전한 턱얼굴수술, 예뻐지는 치아교정, 정직한 임플란트, 편안한 일반진료, 미리하는 예방관리)
   -------------------------------------------------------------------------- */
#visual-banner{display:inline-block; width:100%; background:#fff;}
#visual-banner .inner{overflow:hidden;}
#visual-banner .inner > div{position:relative; float:left; height:350px; box-sizing:border-box; background-repeat:no-repeat; background-position:-25px bottom; background-size:108%; cursor:pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#visual-banner .inner > div::before{display:inline-block; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#visual-banner .inner > div:hover{background-position:0 bottom;}
#visual-banner .inner > div:hover::before{background:rgba(0,0,0,0);}

#visual-banner .item01{width:50%; background-image:url(/assets/img/web/main/theme/visual_banner_bg01.jpg); border-right:1px solid #fff; border-bottom:1px solid #fff;}
#visual-banner .item02{width:50%; background-image:url(/assets/img/web/main/theme/visual_banner_bg02.jpg); border-bottom:1px solid #fff;}
#visual-banner .item03{width:33%; background-image:url(/assets/img/web/main/theme/visual_banner_bg03.jpg);}
#visual-banner .item04{width:34%; background-image:url(/assets/img/web/main/theme/visual_banner_bg04.jpg); border-left:1px solid #fff; border-right:1px solid #fff;}
#visual-banner .item05{width:33%; background-image:url(/assets/img/web/main/theme/visual_banner_bg05.jpg);}

#visual-banner .txt-group{display:block; width:100%; height:100%; cursor:pointer; box-sizing:border-box; z-index:10;}
#visual-banner .txt-group .txt{display:block; width:300px; text-align:center;}
#visual-banner .txt-group .txt01{position:absolute; font-size:20px; opacity:0; -webkit-transition: all 0.3s ease-in-out 0.1s; -moz-transition: all 0.3s ease-in-out 0.1s; -ms-transition: all 0.3s ease-in-out 0.1s; -o-transition: all 0.3s ease-in-out 0.1s; transition: all 0.3s ease-in-out 0.1s;}
#visual-banner .txt-group .txt02{position:absolute; font-size:36px; line-height:1.25em; letter-spacing:-4px; font-weight:700; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}


#visual-banner .item01 .txt01{left:0; top:80px; color:#a3a3a3;}
#visual-banner .item01 .txt02{left:0; top:110px; color:#111;}

#visual-banner .item02 .txt01{right:0; top:80px; color:#a3a3a3; }
#visual-banner .item02 .txt02{right:0; top:110px; color:#111; }

#visual-banner .item03 .txt01{width:100%; left:0; top:30px; color:#fff;}
#visual-banner .item03 .txt02{width:100%; left:0; top:60px; color:#fff;}

#visual-banner .item04 .txt01{width:100%; left:0; top:30px; color:#a3a3a3;}
#visual-banner .item04 .txt02{width:100%; left:0; top:60px; color:#111;}

#visual-banner .item05 .txt01{width:100%; left:0; top:30px; color:#a3a3a3;}
#visual-banner .item05 .txt02{width:100%; left:0; top:60px; color:#111;}


#visual-banner .inner > div.item01:hover .txt01{top:100px;  opacity:1;}
#visual-banner .inner > div.item01:hover .txt02{top:130px}

#visual-banner .inner > div.item02:hover .txt01{top:100px;  opacity:1;}
#visual-banner .inner > div.item02:hover .txt02{top:130px}

#visual-banner .inner > div.item03:hover .txt01{top:50px;  opacity:1;}
#visual-banner .inner > div.item03:hover .txt02{top:80px}

#visual-banner .inner > div.item04:hover .txt01{top:50px;  opacity:1;}
#visual-banner .inner > div.item04:hover .txt02{top:80px}

#visual-banner .inner > div.item05:hover .txt01{top:50px;  opacity:1;}
#visual-banner .inner > div.item05:hover .txt02{top:80px}


/* --------------------------------------------------------------------------
   라인업 슬라이드
   -------------------------------------------------------------------------- */
#lineup-slider{text-align:center;}
#lineup-slider .slick-slide{height:650px;}
#lineup-slider .item{height:650px;}
#lineup-slider .item .inner{height:inherit; padding:0;}

#lineup-slider .item.bg01{background:url(/assets/img/web/main/theme/lineup_slider_bg.jpg) no-repeat center center;}
#lineup-slider .item.bg02{background:url(/assets/img/web/main/theme/lineup_slider_bg.jpg) no-repeat center center; background-size:cover;}

#lineup-slider .item .txt-group{padding-top:80px;}
#lineup-slider .item .txt-group .txt{ color:#fff; font-weight:100; letter-spacing:-1.5px; line-height:1.35em;}
#lineup-slider .item .txt-group .txt01{font-size:22px; animation:fadeOutUp 0.5s both;}
#lineup-slider .item .txt-group .txt02{font-size:60px; letter-spacing:-4px; font-family: 'Nanum Myeongjo', sans-serif; margin-bottom:40px; animation:fadeOutUp 0.5s both;}
#lineup-slider .item .txt-group .txt03{font-size:20px; margin-bottom:50px; animation:fadeOutUp 0.5s both;}
#lineup-slider .item .txt-group .txt03 em{font-weight:700;}
#lineup-slider .item .txt-group .obj{animation:fadeOutDown 0.5s both;}
#lineup-slider .item .txt-group .obj img{margin:0 auto;}


#lineup-slider .slick-active .item .txt-group .txt01{animation:fadeInDown 0.5s both .35s;}
#lineup-slider .slick-active .item .txt-group .txt02{animation:fadeInDown 0.5s both .55s;}
#lineup-slider .slick-active .item .txt-group .txt03{animation:fadeInDown 0.5s both .75s;}
#lineup-slider .slick-active .item .txt-group .obj{animation:fadeInUp 0.5s both .95s;}


/* --------------------------------------------------------------------------
   
   -------------------------------------------------------------------------- */
#lineup-banner{ background:#fff;}

#lineup-banner .lineup-banner{width:100%; height:350px;}
#lineup-banner .lineup-banner a{position:relative; display:inline-block; float:left; width:50%; height:350px; box-sizing:border-box; overflow:hidden; }
#lineup-banner .lineup-banner a em{position:absolute; left:40px; top:80px; display:block; font-size:32px; font-weight:700; letter-spacing:-2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#lineup-banner .lineup-banner a span{position:absolute; left:40px; top:130px; font-size:18px; line-height:1.4em; font-weight:100; color:#333; letter-spacing:-1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#lineup-banner .lineup-banner a:hover em{top:60px;}
#lineup-banner .lineup-banner a:hover span{top:105px;}

#lineup-banner .lineup-banner a.real-story{background:#bfd2e8;}
#lineup-banner .lineup-banner a.real-story::before{display:inline-block; width:474px; height:151px; left:40px; bottom:-30px; opacity:0.1; background:url(/assets/img/web/main/theme/realstory.png) no-repeat left center; -webkit-transition: all 15s; -moz-transition: all 15s; -ms-transition: all 15s; -o-transition: all 15s ease-in-out; transition: all 15s;}
#lineup-banner .lineup-banner a.real-story::after{display:inline-block; width:410px; height:779px; right:-130px; top:-50px; background:url(/assets/img/web/main/theme/model01.png) no-repeat left center;}
#lineup-banner .lineup-banner a.real-story:hover::before{left:-200px;}
#lineup-banner .lineup-banner a.real-story em{color:#395473;}
#lineup-banner .lineup-banner a.before-after{background:#f8e7d6;}
#lineup-banner .lineup-banner a.before-after::before{display:inline-block; width:687px; height:151px; left:40px; bottom:-30px; opacity:0.1; background:url(/assets/img/web/main/theme/before_after.png) no-repeat left center; -webkit-transition: all 15s; -moz-transition: all 15s; -ms-transition: all 15s; -o-transition: all 15s ease-in-out; transition: all 15s;}
#lineup-banner .lineup-banner a.before-after::after{display:inline-block; width:455px; height:819px; right:-100px; top:-50px; background:url(/assets/img/web/main/theme/model02.png) no-repeat left center;}
#lineup-banner .lineup-banner a.before-after:hover::before{left:-400px;}
#lineup-banner .lineup-banner a.before-after em{color:#544934;}

#lineup-banner .before-after-tab{width:100%; height:60px; margin-bottom:10px;}
#lineup-banner .before-after-tab button{display:inline-block; float:left; width:50%; height:60px; line-height:60px; text-align:center; color:#fff; background:#bbbbbb; font-size:18px; cursor:pointer;}
#lineup-banner .before-after-tab button.active{background:#333333;}

#lineup-banner #real-story-tab01{display:block;}

#lineup-banner .before-after-contents{display:none;}
#lineup-banner .before-after-contents a{position:relative; display:block; width:100%; height:100%;}
#lineup-banner .before-after-contents a::before{display:inline-block; width:100%; height:100%; left:0; top:0; opacity:0; background:rgba(0,0,0,0.6); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#lineup-banner .before-after-contents a::after{display:inline-block; left:50%; top:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); opacity:0; content:'더보기 +'; padding:10px 20px; border:1px solid #fff; color:#fff; font-size:15px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}

#lineup-banner .before-after-contents a:hover::before,
#lineup-banner .before-after-contents a:hover::after{opacity:1;}


/* --------------------------------------------------------------------------
   
   -------------------------------------------------------------------------- */
#lineup-community{display:inline-block; width:100%; background:#f8f8f8; text-align:center;}
#lineup-community .tit{margin-bottom:50px;}
#lineup-community .tit em{position:relative; font-weight:700;position:relative; display:inline-block; font-size:40px; letter-spacing:-4px;}
#lineup-community .tit em::before{display:inline-block; width:83px; height:100%; left:-130px; top:0; background:url(/assets/img/web/main/theme/tit_bg.png) no-repeat center center;}
#lineup-community .tit em::after{display:inline-block; width:83px; height:100%; right:-130px; top:0; background:url(/assets/img/web/main/theme/tit_bg.png) no-repeat center center;}

#lineup-community a.more{position:absolute; display:inline-block; width:43px; height:10px; right:20px; top:50px; background:url(/assets/img/web/main/theme/btn_more.png) no-repeat center center;}
#lineup-community .inner {overflow:hidden;}
#lineup-community ul{width:100%; height:250px; box-sizing:border-box; padding:5px 25px; background:#fff; border:1px solid #ddd; border-top:0; text-align:left;}
#lineup-community ul li{}
#lineup-community ul li a{position:relative; display:block; height:60px; line-height:60px; padding-right:100px; color:#333; font-size:14px; border-bottom:1px solid #ddd; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#lineup-community ul li a span{position:absolute; right:0; top:0; color:#999; line-height:60px;}
#lineup-community ul li:last-child a{border-bottom:0;}

#lineup-community .notice,
#lineup-community .news,
#lineup-community .media{position:relative; float:left; width:calc(33.3333333333% - 15px); height:350px; box-sizing:border-box; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}

#lineup-community .notice:hover,
#lineup-community .news:hover,
#lineup-community .media:hover{box-shadow:0 0 10px rgba(0,0,0,0.1);}



#lineup-community .notice{margin-right:20px;}
#lineup-community .notice .brd_tit{width:100%; height:100px; box-sizing:border-box; padding-top:30px; background:#f06384; font-size:15px; font-weight:700; color:rgba(255,255,255,0.5);}
#lineup-community .notice .brd_tit em{display:block; font-size:22px; color:#fff; margin-top:5px;}
#lineup-community .notice a:hover{color:#f06384;}


#lineup-community .news{margin-right:20px;}
#lineup-community .news .brd_tit{width:100%; height:100px; box-sizing:border-box; padding-top:30px; background:#5e5e5e; font-size:15px; font-weight:700; color:rgba(255,255,255,0.5);}
#lineup-community .news .brd_tit em{display:block; font-size:22px; color:#fff; margin-top:5px;}
#lineup-community .news a:hover{color:#5e5e5e;}

#lineup-community .media{margin-right:0;}
#lineup-community .media .brd_tit{width:100%; height:100px; box-sizing:border-box; padding-top:30px; background:#778bbf; font-size:15px; font-weight:700; color:rgba(255,255,255,0.5);}
#lineup-community .media .brd_tit em{display:block; font-size:22px; color:#fff; margin-top:5px;}
#lineup-community .media a:hover{color:#778bbf;}


/* --------------------------------------------------------------------------
   
   -------------------------------------------------------------------------- */
#partner{position:relative;}
#partner .inner {padding:30px 0;}
#partner a{border:1px solid #ddd;}
#partner a img{margin:0 auto; width:106px; height:42px;}
#partner a:focus{outline:none;}

#partner .slick-slide{margin: 0 10px;}
#partner .slick-list{margin: 0 20px;}