﻿@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url('/theme/clearlign/new/font/font_NanumSquare.css');
@import url('/font/SCoreDream/stylesheet.css');

* {
    margin: 0;
    padding: 0;
    font-family:'NanumSquare', sans-serif; 's-core_dream1_thin'; 's-core_dream2_extralight';'s-core_dream3_light'; 's-core_dream4_regular';'s-core_dream5_medium';'s-core_dream6_bold';'s-core_dream7_extrabold';'s-core_dream8_heavy'; 's-core_dream9_black';
    -webkit-text-size-adjust: none; 
}

/* main */
#wrap {
    width: 100%;
    position: relative; color:#000;
}



#top {
    width: 100%;
    height: 300px;
    background-color: #fff;
    float: right;

}

#bg {
    width: 1200px;
	float: center;
}

.tnb {
    width: 100%;
    float: right;
    padding-top: 25px;

}



#header{
  position:fixed;
  display: block;
  width:100%; 
  left:0; 
  top:0; 
  z-index:10; 
  background:#fff;
  -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;
}

#header.fixed{
  position:fixed; 
  left:0; 
  top:0;
}

/* 로고 */
#header #logo{
  position:absolute; 
  display:inline-block; 
  left:50%; 
  top:50px; 
  line-height:inherit; 
  transform:translate(-50%, 0);
}

#header .header-group{
  height:160px; 
  line-height:70px;
}

#header .header-group-call{
  position:absolute; 
  left:210px; 
  top:-50; 
  width:260px;
  height:140px;
}

#header .header-group-member{
  list-style:none; 
  position:absolute; 
  display:inline-block;
  right:20px; 
  top:0; 
  line-height:inherit;
}

#header .header-group-member li a{
  text-decoration: none; 
  display:inline-block; 
  font-size:15px; 
  color:#222; 
  padding:5px 10px;
}

#header .header-group-member li a[target] {
  padding:5px;
}

#header .header-group-member li a:hover{
  color:#005d99;
}

/* 온라인상담, 커뮤니티 퀵버튼 */
#header .header-group-quick{
  position:absolute; 
  right:0; 
  top:-1px;
  width:90px; 
  height:120px;
}

#header .header-group-quick li button{
  display:inline-block; 
  width:90px; 
  height:120px; 
  line-height:60px; 
  text-align:center; 
  color:#fff; 
  box-sizing:border-box; 
  background-repeat:no-repeat; 
  background-position:center 15px; 
  font-size:14px; 
  cursor:pointer;
}

#header .header-group-quick li.gnb-all button{
  background-color:#005d99;
}

#header .header-group-quick li.gnb-all button:hover
{background-color:#005388;
}

/* GNB */
#gnb{
  position:relative;
  width:100%; 
  height:60px; 
  text-align:center; 
  border-top:1px solid #eee;
  font-family: 'NanumSquare', sans-serif;
  padding-top:20px;
  margin-bottom:-20px;
}

#gnb::before{
  visibility:hidden; 
  opacity:0; 
  display:inline-block; 
  width:100%; 
  height:170px; 
  left:0; 
  top:60px;
  background-color: rgba(0,0,0,0.5);
  z-index:6; 
  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;
}

#gnb.active::before{
  visibility:visible;
  opacity:1; top:60px;
}

/* 1차 */
#gnb ul{
  list-style:none; 
  display:inline-block;
}

#gnb ul li.gnb{
  float:left;
}

#gnb ul li.gnb::before{
  position:absolute; 
  left:0;
  top:0; 
  content:''; 
  width:1px; 
  height:60px;
}

#gnb ul li:first-child.gnb::before{
  visibility:hidden;
}

#gnb ul li.gnb > a{
  text-decoration: none; 
  position:relative; 
  display:block; 
  font-size:19px; 
  color:#58585a; 
  font-weight:500; 
  height:inherit; 
  line-height:30px; 
  text-align:center; 
  padding:0 40px; 
  -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;
}

#gnb ul li.gnb:hover > a{
  color:#005d99;
}
#gnb ul li.gnb.active{}
#gnb ul li.gnb.active > a{
  color:#005d99;
}

/* 2차 */
#gnb ul li.gnb a + ul.lnb-wrap{
  background-color: rgba(0,174,239,0.8);
  position:absolute; 
  visibility:hidden; 
  opacity:0; 
  width:100%; 
  max-width:1400px; 
  height:170px;
  padding:50px 0 0 370px; 
  margin:0 auto; 
  left:50%; 
  top:60px; 
  z-index:6; 
  transform:translate(-50%, 0); 
  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;
}

#gnb ul li.gnb:hover ul.lnb-wrap{
  visibility:visible; 
  opacity:1; 
  top:60px;
}

#gnb ul li.gnb:hover ul.lnb-wrap::before{
  position:absolute; 
  display:inline-block; 
  content:''; 
  left:0; top:0; 
  font-size:15px; 
  font-weight:300; 
  color:#fff; 
  left:170px; 
  top:calc(50% - 30px); 
  transform:translate(0, -50%);
}

#gnb ul li.gnb:hover ul.lnb-wrap::after{
  position:absolute; 
  display:inline-block; 
  left:0; 
  top:0; 
  font-size:28px; 
  font-weight:700; 
  color:#fff; 
  left:130px; 
  top:50%; 
  transform:translate(0, -50%);
}

#gnb ul li.gnb:nth-child(1) a + ul.lnb-wrap::after{content:'다믿주치과';}
#gnb ul li.gnb:nth-child(2) a + ul.lnb-wrap::after{content:'고난이도 임플란트';}
#gnb ul li.gnb:nth-child(3) a + ul.lnb-wrap::after{content:'뼈재건 임플란트';}
#gnb ul li.gnb:nth-child(4) a + ul.lnb-wrap::after{content:'사랑니 발치';}
#gnb ul li.gnb:nth-child(5) a + ul.lnb-wrap::after{content:'충치치료/예방진료';}
#gnb ul li.gnb:nth-child(6) a + ul.lnb-wrap::after{content:'커뮤니티';}
#gnb ul li.gnb:nth-child(7) a + ul.lnb-wrap::after{content:'치료사례';}

#gnb ul li.gnb a + ul.lnb-wrap li.lnb{
  float:left;
  margin-bottom:30px; 
  margin-right:50px; 
  text-align:left;
}

#gnb ul li.gnb a + ul.lnb-wrap li.lnb a{
  text-decoration: none; 
  position:relative; 
  font-size:16px; 
  line-height:16px; 
  color:#fff;
  font-weight:500;
  padding-left:17px;
}

#gnb ul li.gnb a + ul.lnb-wrap li.lnb a::before{
  position:absolute;
  display:inline-block; 
  width:5px; 
  height:5px; 
  background:#222; 
  left:0; 
  top:7px;
}

#gnb ul li.gnb a + ul.lnb-wrap li.lnb:hover a{
  color:#baff00;
}

#gnb ul li.gnb a + ul.lnb-wrap li.lnb.active a{
  color:#baff00; 
  font-weight:800;
}

/* 슬라이드쇼 컨테이너의 디자인 */
.mini-slide-container2 {
  width: 260px;
  height:100px;
  position: relative;
  top:20px;
  left:20%;
  margin: auto;
}

/* 이미지를 숨기는데 사용 */
.mini_Slides2 {
    display: none;
}

/* 다음, 이전 버튼 */
.mini-s-prev2, .mini-s-next2 {
  cursor: pointer;
  position: absolute;
  top: 25%;
  width: auto;
  padding: 5px;
  margin:0 -20px;
  color: #000;
  font-weight: 200;
  font-size: 15px;
}

/* "다음 버튼"을 오른쪽에 위치 */
.mini-s-next2 {
  right: 0;
}

/* 마우스를 올리면 배경색을 변경 */
.mini-s-prev2:hover, .mini-s-next2:hover {
  background-color: rgba(0,0,0,0.1);
}

/* 하단의 점들 */
.mini-s-dot2 {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active2, .mini-s-dot2:hover {
  background-color: #717171;
}


/* //quick */

#quick_main {
  display: block;
  right:5px; top:160px;
  position:fixed;
  transition: margin-right .5s;
  width:99px;
  z-index:999;  border:1px solid #868686;
  background-color: #fff;
}


.quick_sidenav {
  height:600px;
  position: fixed;
  z-index: 999;
  top: 160px;
  right: 0;
  background-color: #eee;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 30px;
  text-align:center;
  width: 0;
}

.quick_sidenav h1 {
  text-align:center; font-size:30px; color:#2a4d77;
  width:350px;
}

.quick_sidenav h2 {width:350px; font-size:15px; line-height:1.3em; padding:20px 0;}
.quick_sidenav h2 b{width:350px; font-weight:600;}
.quick_sidenav_slt{width:350px; margin:20px 0; font-size:15px; text-align:center;}
.quick_sidenav_form{width:350px; padding:0 10px;}
.quick_sidenav_form li{margin-bottom:10px;}
.quick_sidenav_form label{width:75px; display:inline-block;;}
.quick_sidenav_form input, .quick_sidenav_form select, .quick_sidenav_form textarea{width:200px; height:30px; border-radius:0; border:1px solid #d9d9d9; padding:5px; box-sizing:border-box; background:#fff;}
.quick_sidenav_form textarea{height:80px; resize:none;}


.quick_sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 13px;
  color: #818181;
  display: block;
}

.quick_sidenav a:hover {
  color: #000;
}

.quick_sidenav .quick_closebtn {
  position: absolute;
  top: -7px;
  left: -30px;
}


@media screen and (max-height: 450px) {
  .quick_sidenav {padding-top: 15px;}
  .quick_sidenav a {font-size: 18px;}
}

.quick_sidenav_chk{width:350px; text-align:center; color:#000;}
.quick_sidenav_chk label{display:block; font-size:12px; margin-bottom:5px;}
.quick_sidenav_chk button{background:none; border:none; font-size:11px;}
.quick_sidenav_btn{width:350px; text-align:center; margin-top:20px;}
.quick_sidenav_btn input.submit{width:180px; height:35px; color:#fff; background:#2a4d77; border:none; border-radius:0; font-size:15px; font-weight:600;}




/* main contents */
#main_wrap {
    width: 100%;
    float: left;
}

    #main_wrap .main01_wrap, #main_wrap .main02_wrap {
        width: 50%;
        height: 455px;
        float: left;
    }

    #main_wrap .main03_wrap, #main_wrap .main04_wrap {
        width: 50%;
        height: 429px;
        float: left;
    }

    #main_wrap .main01_p01 {
        color: #00aeef;
        font-size: 26px;
        margin-top: 25px;
        letter-spacing: -2pt;
    }

    #main_wrap .main01_p02 {
        color: #6f6f6f;
        font-size: 16px;
        margin-top: 25px;
        line-height: 24px;
        letter-spacing: -1pt;
    }

        #main_wrap .main01_p02 span {
            font-weight: 700;
            text-decoration: underline;
            color: #1a1a1a;
        }

.main01_wrap {
    background: url(../img/pattern.jpg) repeat;
}

    .main01_wrap .main01, .main03_wrap .main03 {
        width: 530px;
        float: right;
        padding-top: 60px;
        padding-left: 20px;
    }

        .main01_wrap .main01 a {
            width: 250px;
            height: 39px;
            display: block;
            margin-top: 45px;
        }

.main02_wrap {
    background-color: #fff;
}

    .main02_wrap .main02 {
        width: 500px;
        float: left;
        padding-top: 60px;
        padding-left: 50px;
    }

        .main02_wrap .main02 a {
            width: 250px;
            height: 39px;
            display: block;
            margin-top: 22px;
        }

.main03_wrap {
    background-color: #f4f4f4;
}

    .main03_wrap .main03 a {
        width: 250px;
        height: 39px;
        display: block;
        margin-top: 30px;
    }

.main04_wrap {
    background: url(../img/main_img04.jpg) no-repeat;
}

.main05_wrap {
    width: 100%;
    height: 320px;
    background-color: #fff;
    float: left;
}

    .main05_wrap .main05 {
        width: 1100px;
        margin: 0 auto;
        margin-top: 60px;
        position: relative;
    }

.main05 .main05_div01 {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

    .main05 .main05_div01 a {
        margin-left: 15px;
        color: #aaaaaa;
        font-size: 14px;
    }

.main05 .main05_div02 {
    width: 100%;
    float: left;
}

    .main05 .main05_div02 a {
        display: block;
        float: left;
        text-align: center;
        margin-left: 35px;
        font-size: 16px;
        color: #222;
        line-height: 30px;
    }

.main05_div02 .main05_aw_left {
    position: absolute;
    top: 90px;
    left: -90px;
}

.main05_div02 .main05_aw_right {
    position: absolute;
    top: 90px;
    right: -60px;
}
/* //main contents*/

/* 고객센터 */
.information{
  margin: 0 auto;
  padding: 0px;
  height:490px;
}

.information_box{
  overflow: hidden;
  zoom:1;
  width:1400px;
  height:490px;
  margin:40px auto; 
}
.information_box p{
  margin:40px 0 20px 0;
 font-size: 37px;
 font-weight: 300;
 color: #000;
 letter-spacing: -1.5px;
}
.information_box span{
 font-weight: 800;
}

.information_mini_L{
  float: left;
  width:400px;
  height:280px;
}

.information_mini_L img{
  margin:5px 0;
}

.information_mini_R{
  float: left;
  width:570px;
  height:280px;
  border-right: 1px solid #dadada;
}
.information_mini_R p{
  font-size: 16px;
  font-weight: 300;
  color: #000;
  line-height:1.5;
  letter-spacing: -1px;
  margin:5px 0 0 15px;
}

/* bottom */
#bottom_wrap {
    width: 100%;
    float:left;
    height: 490px;
    background: #f4f4f4;
    border-bottom: 1px solid #222;
}



.bottom03 {
    float: left;
    width: 420px;
    margin: -110px auto;
}

.bottom03 a {
    color: #222;
	font-weight: 200;
}

.bottom03 .bottom03_title {
    display: block;
    padding: 40px 0 0 30px;
    text-align: center;
    margin-bottom: 80px;
}

.bottom03 .bottom03_txt {
	width: 350px;
    height: 40px;
    border-bottom: 1px dotted #dadada;
    margin: 0 auto;
    font-size: 16px;
	padding:0;
    line-height: 40px;
}

.bottom03_txt a {
    float: left;
    color: #222;
	width: 230px;
	padding:0;
	margin: 0 auto;
}

.bottom03_txt .bottom03_date {
    float: right;
	width: 100px;
		padding:0;
	margin: 0 auto;
}


/* //bottom */





.lovemain_06{
  height: 150px;
  margin:0 auto;
  padding:0;
  position: relative;
}

.lovemain_06_box{
 	width: 1408px;
  height: 170px;
  margin:0 auto;
  overflow: hidden;
	zoom:1;
}

.lovemain_06_img{
  width: 1480px;
  height: 170px;
  float: left;
  margin:0 auto;
  margin-top:50px;
}
.lovemain_07{
  height: 300px;
  margin:0 auto;
  padding:0;
  text-align:center;
}

.lovemain_07_box{
  width: 1408px;
  height: 300px;
  margin:0 auto;
  overflow: hidden;
  zoom:1;
}

.lovemain_07_text{
  width: 1408px;
  height: 300px;
  float: left;
  margin:50px 0 0 0;
}
.lovemain_07_text p{
 margin:30px auto;
 font-size: 14px;
 font-weight: 400;
 color: #6e6e6e;
 line-height:1.5;
 letter-spacing: -1px;
}

.link {
 margin:15px auto;
 padding:0;
 height:30px;
 width:1408px;
 text-align:center;
 }

.link p{
 font-size: 16px;
 font-weight: 400;
 color: #000;
 line-height:1.3;
 letter-spacing: -1px;
 }

.link a{
 text-decoration: none;
 color: #000;
}

.main_line{
 border-top: 1px solid #b8b8b8;
 width:1408px;
 height:2px;
 margin:0 auto;
}
/* //main */



#map_container {
    width: 100%;
    float: left;
    margin-top: 15px;
}

.map_tab {
    width: 70px;
    overflow: hidden;
    float: left;
}

    .map_tab li {
        position: relative;
        float: left;
        margin-bottom: 1px;
        width: 70px;
        height: 300px;
        background: #e2e2e2;
    }

        .map_tab li a {
            display: block;
            text-decoration: none;
            text-align: center;
            color: #767676;
            width: 70px;
            font-size: 20px;
            font-weight: 600;
            line-height: 26px;
        }

            .map_tab li a.map_tab_a01 {
                padding-top: 90px;
                height: 210px;
            }

            .map_tab li a.map_tab_a02 {
                padding-top: 115px;
                height: 185px;
            }

        .map_tab li:hover {
            text-decoration: none;
        }

        .map_tab li.active a {
            background: #00aeef;
            color: #fff;
        }

            .map_tab li.active a:hover {
                text-decoration: none;
            }

.mTs {
    width: 1028px;
    height: 599px;
    float: left;
    border: 1px solid #00aeef;
    overflow: hidden;
}


.implant_top{
    width: 100%;
    float: left;
    position: relative;
}


.implant_01_topbg {
    width: 100%;
    height: 700px;
    background:url(http://clearlign.net/img/190924/8.jpg) no-repeat center;
	background-size:cover;
}
.implant_02_topbg {
    width: 100%;
    height: 700px;
    background:url(http://clearlign.net/img/190924/3.jpg) no-repeat center;
	background-size:cover;
}
.implant_03_topbg {
    width: 100%;
    height: 700px;
    background:url(http://clearlign.net/img/190924/2.jpg) no-repeat center;
	background-size:cover;
}

.implant_04_topbg {
    width: 100%;
    height: 1446px;
    background:url(http://www.clearlign.net/theme/clearlign/new/img/implant/04/top.jpg) no-repeat center;
	background-size:cover;
}

.implant_05_topbg {
    width: 100%;
    height: 700px;
    background:url(http://www.clearlign.net/img/190924/6.jpg) no-repeat center;
	background-size:cover;
}
.implant_06_topbg {
    width: 100%;
    height: 700px;
   background:url(http://clearlign.net/img/190924/4.jpg) no-repeat center;
	background-size:cover;
}
.implant_07_topbg {
    width: 100%;
    height: 700px;
     background:url(http://clearlign.net/img/190924/5.jpg) no-repeat center;
	background-size:cover;
}
.implant_08_topbg {
    width: 100%;
    height: 700px;
    background:url(http://clearlign.net/img/190924/1.jpg) no-repeat center;
	background-size:cover;
}

.implant_09_topbg {
    width: 100%;
    height: 700px;
    background:url(http://clearlign.net/img/190924/7.jpg) no-repeat center;
	background-size:cover;
}




#review_popup {
    width: 600px;
    height: 450px;
    background: url(../img/sub04_pupup.jpg) no-repeat;
    position: fixed;
    left: 50%;
    /* margin-left: -150px; */
    top: 30%;
    z-index: 500;
}

    #review_popup form {
        width: 100%;
        float: left;
        font-weight: 600;
        text-align: center;
        color: #fff;
    }

        #review_popup form fieldset {
            width: 305px;
            margin: 0 auto;
            padding: 0;
            border: 0;
            margin-top: 310px;
        }

            #review_popup form fieldset input {
                width: 200px;
                height: 30px;
                border: 1px solid #bbb;
                box-sizing: border-box;
                float: left;
                background: #fff;
                border-radius: 0;
            }

            #review_popup form fieldset .review_key_btn {
                display: block;
                width: 100px;
                height: 30px;
                font-size: 14px;
                line-height: 30px;
                background: #00aeef;
                float: left;
                margin-left: 5px;
            }

            #review_popup form .review_submit_btn {
            width: 220px;
            margin: 0 auto;
            margin-top:35px;
            font-size: 18px;
            line-height:35px;
        }

        #review_popup form .review_ok_btn {
            width: 100px;
            height: 35px;
            background: #00aeef;
            float: left;
            border:0;
            border-radius:0;
        }

        #review_popup form .close {
            width: 100px;
            height: 35px;
            float: left;
            font-size: 18px;
            background:#9b9b9b;
            margin-left:20px;
        }

#priceCts_box{font-size:1.2em; color:#3f3f3f;}
#priceCts_box .sub_title{float:none;}
#priceCts_box .table_title{margin:20px 0 10px;}
#priceCts_box table th, #priceCts_box table td{padding:15px 10px; text-align:center;}
#priceCts_box table th{background:#00aeef; color:#fff; font-weight:600; border-right:1px solid #fff;}
#priceCts_box table td{color:#3f3f3f; border-right:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1;}
#priceCts_box table th:last-child, #priceCts_box table td:last-child{border-right:0;}
#priceCts_box table td.bgColor_g{background:#f5f5f5; font-weight:600;}
#priceCts_box .priceBox_txt{line-height:1.4em; margin-top:20px;}
            /* //sub04 */
            /* //sub */
			
/* 상담신청 팝업 */
#counselPop{position:absolute; top:48px; right:100px; background:#fff; padding:35px 20px; height:576px; width:350px; box-sizing:border-box; color:#434343; display:none;}
#counselPop h3.counselPop_tit{text-align:center; font-size:30px; color:#2a4d77; font-family:'나눔고딕', 'NanumGothic', '굴림', Helvetica, sans-serif; font-weight:600; line-height:1em;}
#counselPop p.counselPop_txt{font-size:15px; line-height:1.3em; padding:20px 0; border-bottom:1px solid #d7d7d7; text-align:center;}
#counselPop p.counselPop_txt b{font-weight:600;}
#counselPop .counselPop_close{position:absolute; top:0; left:0; cursor:pointer;}
#counselPop .counselPop_slt{margin:20px 0; font-size:17px; text-align:center;}
#counselPop .counselPop_form{padding:0 10px;}
#counselPop .counselPop_form li{margin-bottom:10px;}
#counselPop .counselPop_form label{width:60px; display:inline-block;;}
#counselPop .counselPop_form input, #counselPop .counselPop_form select, #counselPop .counselPop_form textarea{width:220px; height:30px; border-radius:0; border:1px solid #d9d9d9; padding:5px; box-sizing:border-box; background:#fff;}
#counselPop .counselPop_form textarea{height:80px; resize:none;}
#counselPop .counselPop_chk{text-align:center; color:#000;}
#counselPop .counselPop_chk label{display:block; font-size:12px; margin-bottom:5px;}
#counselPop .counselPop_chk button{background:none; border:none; font-size:11px;}
#counselPop .counselPop_btn{text-align:center; margin-top:20px;}
#counselPop .counselPop_btn input.submit{width:180px; height:35px; color:#fff; background:#2a4d77; border:none; border-radius:0; font-size:15px; font-weight:600;}
