/* 효과를 위한 클래스 */
.up, .down, .right, .left {
   opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   -webkit-transition: 0.7s all;
   -moz-transition: 0.7s all;
   -o-transition: 0.7s all;
   transition: 0.7s all; 
}

.fade {
   opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.up {
  -webkit-transform: translate(0px, 30px);
  -ms-transform: translate(0px, 30px);
  -moz-transform: translate(0px, 30px);
  -o-transform: translate(0px, 30px);
  transform: translate(0px, 30px); }

.down {
  -webkit-transform: translate(0px, -30px);
  -ms-transform: translate(0px, -30px);
  -moz-transform: translate(0px, -30px);
  -o-transform: translate(0px, -30px);
  transform: translate(0px, -30px); }

.right {
  -webkit-transform: translate(30px, 0px);
  -ms-transform: translate(30px, 0px);
  -moz-transform: translate(30px, 0px);
  -o-transform: translate(30px, 0px);
  transform: translate(30px, 0px); }

.left {
  -webkit-transform: translate(-30px, 0px);
  -ms-transform: translate(-30px, 0px);
  -moz-transform: translate(-30px, 0px);
  -o-transform: translate(-30px, 0px);
  transform: translate(-30px, 0px); }

.up.on, .down.on, .right.on, .left.on, .up.sl, .down.sl, .right.sl, .left.sl, .fade.on, .fade.sl {
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  transform: translate(0px, 0px); 
   opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.trans {
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
.trans03 {
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}
.trans3 {
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
.trans1 {
   -webkit-transition: all 1s;
   -moz-transition: all 1s;
   -o-transition: all 1s;
   transition: all 1s;
}
.trans9 {
   -webkit-transition: all 3s;
   -moz-transition: all 3s;
   -o-transition: all 3s;
   transition: all 3s;
}



/*header*/
.header {position: fixed; z-index: 100; width: 100%; background: #f2f2f2; height: 123px; line-height: 123px}
.header .head_wrap {position: relative; width: 1430px; margin: 0 auto}
.header .head_wrap div {position: absolute}
.h_banner {width: 356px; height: 43px; left: 0; top: 40px; background: url("../images/header_left.png") no-repeat 0 0}
.logo {top: 25px; left: 50%; margin-left: -169.5px}
.tell {right: 0; top: 33px;}

.header.pos {height: 93px}
.header.pos .h_banner {transform: scale(0.8); background-image: url("../images/header_left_on.png"); top: 25px;}
.header.pos .logo, .header.pos .tell {transform: scale(0.8); top: 28px;}
.header.pos .logo {top: 10px;}
.header.pos .tell {top: 20px;}
.header.pos .gnb {top: 93px; height: 45px; line-height: 45px}
.header.pos .gnb ul { transform: scale(0.95); height: 45px; padding-left: 20px;/*top: 93px; font-size: 18px; height: 45px; line-height: 45px;*/ }
.header.pos .gnb ul li a {transition: all 0.5s}
.header.pos .gnb ul li a:hover {color: #ffd171}
.header.pos .gnb ul li a:after {top: 13px; color:#fff}
.header.pos .gnb ul .gnb1 a:before {top: 13px; color:#fff}
/*.header.pos .gnb ul li a {padding: 0 77px}

.header.pos .gnb ul .gnb1 a {margin-left: 40px}*/

.header .gnb {position: relative; top: 123px; left: 0; line-height: 55px; width: 100%; height: 55px; background: #1c3f68; font-size: 20px; font-weight: 500; color: #fff}
.gnb ul {width: 1430px; margin: 0 auto}
.gnb ul li {float: left}
.gnb ul li a {position: relative; display: block; padding: 0 77px; }
.gnb ul li a:after {position: absolute; content: ""; border-left: 1px solid; height: 20px; top: 20px; right: 0;}
.gnb ul .gnb1 a:before {position: absolute; content: ""; border-left: 1px solid; height: 20px; top: 20px; left: 0;}

/* .mainView */
.view {position: relative; width: 100%; height: 780px; padding-top: 178px;}
.view .view-slide li {position: absolute; top: 0; left: 0; width: 100%; height: 780px; background: repeat-y 50% bottom}
.view .view-slide .view1 {background-image: url("../images/slider_01_bg.jpg")}
.view .view-slide .view1 .fade {position: absolute; top: 100px; left: 50%;
width: 1183px; height: 181px; margin-left: -591.5px;}
.view .view-slide .view1 .obj {position: absolute; width: 592px; height: 352px; top: 360px; left: 50%; margin-left: -296px}

.view .view-slide .view2 {background-image: url("../images/slider_02_bg.jpg")}
.view .view-slide .view2 .tit_wrap, .view .view-slide .view3 .tit_wrap {position: relative; width: 1430px; margin: 0 auto; top: 100px;}
.view .view-slide .view2 .tit_wrap div, .view .view-slide .view3 .tit_wrap div {position: absolute; left: 0;}
.view .view-slide .view2 .up {top: 100px;} 
.view .view-slide .view2 .tit1 {top: 220px;} 
.view .view-slide .view2 .tit2 {top: 400px;} 

.view .view-slide .view3 {background-image: url("../images/slider_03_bg.jpg")}
.view .view-slide .view3 .up {top: 70px;}
.view .view-slide .view3 .left {top: 180px;}


/* 슬라이더 제어 버튼 */
.view-btn,
.view-btn > li {
    height: 78px;
}

.view-btn {
    width: 626px;
    position: absolute;
    bottom: 195px;
    left: 50%;
    margin-left: -313px;
    background: url(../img/view-btn.png) 0 0 no-repeat;
}

.view-btn > li {
    float: left;
    width: 33.333333333%;
}

.view-pager {
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -49px;
}

.view .bx-pager > div {
   float: left;
   background-color: none;
   width: 16px;
   height: 16px;
   margin-right: 25px;
   font-size: 0px;
   
}

.view .bx-pager-link {
   background-color: #484848;
   box-shadow: 0 0 30px rgba(50, 50, 50, .2);
   font-size: 0px;
   width: 16px;
   height: 16px;
   display: block
   
}

.view .bx-pager-link.active {
   border: 2px solid #4d70ff;
   background-color: #4d70ff;
   border: none;
   width: 16px;
   height: 16px;
   display: block
}

.view-ctrls {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 48%;
    margin-top: -17.5px; /* fixed Nav add */
    cursor: pointer;
    background: url(../img/ctrls.png) left 0 no-repeat;
    display: none;
   font-size: 0;
   text-indent: -9999px;
}

.view:hover .view-ctrls {
    display: block;
}

.view-ctrls.prev {
    left: 0;
}

.view-ctrls.next {
    right: 0;
}

.view-ctrls:hover {
    background: url(../img/ctrls-on.png) left 0 no-repeat;
}

.view-ctrls.next,
.view-ctrls.next:hover {
    background-position: right 0;
}


.subject {background: #f6f6f6; height: 272px}
.subject .mid {position: relative; width: 1149px; height: 272px; background: url("../images/subject_01.png") no-repeat 145px 35px}
.mid ul li a  {display: block; position: absolute; width: 16%; height: 100%; top: 0}
.mid ul .manu0 a {width: 20%; left: 0; cursor: context-menu}
.mid ul .manu1 a {left: 20%}
.mid ul .manu2 a {left: 36%; width: 14%}
.mid ul .manu3 a {right: 35%; width: 15%;}
.mid ul .manu4 a {right: 21%; width: 14%}
.mid ul .manu5 a {right: 5%}

/* heri */
.heri {background: url(../images/section_02/title01.jpg) no-repeat 50% 0; padding-top: 625px;}
.heritop {width: 100%; height: 366px; background: url("../images/section_02/about_heri.jpg") no-repeat 50% 0; margin-top: 55px;}
.herivs {position: relative; width: 100%; height: 621px;}
.herivs div a {position: absolute; ;display: block; top: 0; width: 50%; height: 621px}
.herivs .vs01 a {background: no-repeat 100% 0; background-image: url("../images/section_02/vs_normal.jpg"); left: 0;}
.herivs .vs02 a {background: no-repeat 0 0; background-image: url("../images/section_02/vs_heri.jpg"); right: 0;}
.herivs .vs01 a:hover, .herivs .vs01 a:focus {background-image: url("../images/section_02/vs_normal_hover.jpg")}
.herivs .vs02 a:hover, .herivs .vs02 a:focus {background-image: url("../images/section_02/vs_heri_hover.jpg")}
.heribene {background: url("../images/section_02/heri_benefit_bg.jpg") no-repeat 50% 0; padding-top: 162px;}
.heribene div {width: 1179px; margin: 220px auto 113px;}

/* after */
.after {background: url("../images/section_03/title03.jpg") no-repeat 50% 0; height: 4515px;}
.after1 {padding-top: 542px; padding-bottom: 165px;}
.after2 {padding-bottom: 165px;}

/* doctor */
.doctor {background: url("../images/section_04/title_04.jpg") no-repeat 50% 0}
.doctor1, .doctor2 {width: 1234px; margin: 0 auto;}
.doctor2 {margin-top: 380px; margin-bottom: 350px}
.doctor1 {padding-top: 629px; padding-bottom: 234px;}
.docright {float: left; padding-right: 80px;}

.doctor1 .docleft .right {padding-bottom: 49px;}
.doctor2 .docright {position: relative}
.doctor2 .docright .left {padding-bottom: 49px; padding-top: 20px;}
.doctor2 .docright .name2 {position: absolute; top: 250px; right: 80px;}

.docbanner {background: url("../images/section_04/banner_bg55.jpg") no-repeat 50% 0; height: 1032px; margin-top: 242px;}
.docbanner1, .docbanner2 {position: relative; height: 50%; width: 1400px; margin: 0 auto;}
.docbanner1 div, .docbanner2 div {position: absolute}
.docbanner1 div {padding-top: 30px; left: 100px;}
.docbanner2 .right {padding-top: 97px; right: 70px;}
.docbanner2 .left {bottom: 0; padding-bottom: 70px; right: 70px;}
#cnt4 {position: relative}
.doc_talk {display: block; width: 1115px; height: 300px;  margin: -150px auto 0}
.doc_talk2 {display: block; width: 1115px; height: 374px; left: 50%; margin: 100px auto 0}
/*
.doc_talk {display: block; position: absolute; display: block; width: 1115px; height: 476px; left: 50%; margin-left: -557.5px; margin-top: -150px;}
.doc_talk2 {display: block; position: absolute; display: block; width: 1115px; height: 374px; left: 50%; margin-left: -557.5px; margin-top: 100px;}
*/

/* benefit */
.benefit .life {background: url("../images/section_05/title_05.jpg") no-repeat 50% 0; height: 1226px;}
.benefit .clear {width: 1320px; margin: 0 auto}
.benefit .clear div {float: left; padding-top: 524px;}
.benefit .life02 {padding: 0 30px;}

.special {height: 809px; background: url("../images/section_05/benefit_bg.jpg") no-repeat 50% -450px; background-attachment: fixed}
.special .spc_wrap {width: 1242px; margin: 0 auto}
.special .spc_wrap .title {padding-top: 128px; padding-bottom: 110px;}


/* interior */
.interior .space {background: url("../images/section_05/title_06.jpg") no-repeat 50% 0; height: 2200px}
.interior .space .spaceImg {padding-top: 620px; width: 1100px; margin: 0 auto;}

.interior .time {background: url("../images/section_05/title_07_02.jpg") no-repeat 50% 0; height: 1490px; width: 100%;}
.map #daumRoughmapContainer1548136802099 {width: 100%;}


/* ================    #atmobile  ================== */
#atmobile .view-pager, #atmobile .view-ctrls {display: none}
#atmobile #mheader {position: fixed; width: 100%; background: #fff; height: 18vw; z-index: 90}
#atmobile #mheader ul {position: relative}
#atmobile #mheader ul li {position: absolute}
#atmobile #mheader ul li a, #atmobile #mheader ul li a img {display: block}
#atmobile #mheader ul li a img {height: auto}
#atmobile #mheader ul li {line-height: 20vw}
#atmobile #mheader ul .head1 {left: 10px; top: 17px; width: 10vw;}
#atmobile #mheader ul .head2 {left: 65vw; top: 10px; width: 15vw;}
#atmobile #mheader ul .head3 {right: 10px; top: 10px; width: 12vw; z-index: 10}

#atmobile #mheader.on {height: 14vw; border-bottom: 1px solid #838383}
#atmobile #mheader.on ul .head1 {left: 10px; top: 11px; width: 9vw;}
#atmobile #mheader.on ul .head2 {left: 70vw; top: 6px; width: 5vw;}
#atmobile #mheader.on ul .head3 {right: 10px; top: 7px; width: 10vw; z-index: 10}

#m_menu {position: fixed; width: 0%; height: 100%; background: rgba(255, 255, 255, 0.95); z-index: 100; top: 0; left: 0; font-size: 12px; letter-spacing: -1px; font-weight: 600; opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
#m_menu.on {display: block; width: 70%; opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; font-size: 21px}
#m_menu .m_gnb li {opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
#m_menu.on .m_gnb li {opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
#m_menu .m_gnb {margin-top: 30%}
#m_menu .m_gnb li {display: block; margin-top: 25px; margin-bottom: 25px; margin-left: 20px; margin-right: 20px; border-top: 1px solid}
#m_menu .m_gnb .menu0 {position: absolute; top: 0px; right: 25px; margin: 0; width: 10vw; border: none}
#m_menu .m_gnb .menu0 a {margin-top: 25px}
#m_menu .m_gnb .menu0 img {display: block}
#m_menu .m_gnb .menu5 {border-bottom: 1px solid}
#m_menu .m_gnb .menu5 a {margin-bottom: 25px}
#m_menu .m_gnb li a {display: block; margin-top: 25px; padding-left: 10px;}

/*#atmobile .main div,  #atmobile .main div ul li{padding: 0; margin: 0; width: 100%; height: inherit;}*/

#atmobile .main, #atmobile .msub1, #atmobile .msub2, #atmobile .msub3, #atmobile .msub4, #atmobile .msub5 {padding-top: 18vw}
#atmobile .msub1 {padding-top: 18vw;}
#atmobile .map04 {position: relative}
#atmobile .map05 {position: absolute; right: 0; bottom: 0; width: 100%;}
#atmobile .map05 #time_map {position: absolute; bottom: 0; right: 0; width: 50%;}
#atmobile .map05 #map2 {position: absolute; bottom: 0; left: 0; z-index: 150}
#atmobile .msub5 {position: relative}
#atmobile .msub5 #map5 {position: absolute; bottom: 0; left: 0;}

#atmobile .m01 img {display: block; margin-top: -4px;}
#atmobile .m03 {position: relative}
#atmobile .m03 .m03ob {position: absolute; bottom: 0; left: 0; width: 100%;}
#atmobile .m03 .doc1, #atmobile .m03 .doc2 {position: absolute; width: 50%; bottom: 0;}
#atmobile .m03 .doc1 {left: 0;}
#atmobile .m03 .doc2 {right: 0;}
#atmobile .m03 .m03bg a, #atmobile .m03 .m03bg a img {display: block}


@media all and (min-width: 641px) {
      #atpc {display: block}
      #atmobile {display: none}
   }

@media all and (max-width: 640px) {
      #atpc {display: none}
      #atmobile {display: block}
   }