@charset "UTF-8";
@import url("sub.contents.css");
#main { transition: margin-right .5s; }

#header { position: relative; z-index: 9999; }
#header .primary-width { padding-top: 50px; height: 210px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#header .header-logo { height: 100px; text-align: center; }
#header .header-logo img { position: relative; top: 0; -moz-animation: logo 0.5s ease-in-out; -o-animation: logo 0.5s ease-in-out; -webkit-animation: logo 0.5s ease-in-out; animation: logo 0.5s ease-in-out; }
@-o-keyframes logo { from { top: -150px; }
  to { top: 0; } }
@-moz-keyframes logo { from { top: -150px; }
  to { top: 0; } }
@-webkit-keyframes logo { from { top: -150px; }
  to { top: 0; } }
@keyframes logo { from { top: -150px; }
  to { top: 0; } }
#header .nav-depth1 { text-align: center; font-size: 0; line-height: 0; }
#header .nav-depth1 > li { width: 230px; height: 60px; font-family: "Nanum Square", "NanumSquare", "NanumGothic", "나눔고딕", "Malgun Gothic", "맑은 고딕", sans-serif; font-size: 30px; color: #fff; font-weight: 100; line-height: 60px; letter-spacing: -0.07rem; display: inline-block; vertical-align: middle; }
#header .nav-depth1 > li > a { margin-left: -1px; height: 60px; display: block; border: 1px solid rgba(255, 255, 255, 0.5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#header .nav-depth1 > li > a:hover, #header .nav-depth1 > li > a.active { background-color: rgba(55, 96, 75, 0.9); border-color: transparent; }

#container { margin-top: -210px; }
#container.main { padding-top: 210px; height: 100%; background: url(../img/visual.jpg) no-repeat 50% 0; background-position: 0 -250px; }
#container.main .visual { margin-top: 210px; text-align: center; }

.cscenter { margin-top: 85px; text-align: right; }
.cscenter .cscenter-title { margin-right: 10px; font-size: 14px; color: #fff; line-height: 1; letter-spacing: -.06rem; display: block; }
.cscenter .cscenter-title::before { content: url("../img/cscenter_hline.png"); position: relative; top: -5px; right: 10px; }
.cscenter .cscenter-title::after { content: "CS Center"; position: relative; top: -1px; left: 10px; font-family: "Open Sans", sans-serif; font-size: 10px; color: #fff; letter-spacing: 0; text-transform: uppercase; }
.cscenter .cscenter-number { margin-top: 10px; font-family: "Barlow", sans-serif; font-size: 50px; color: #fff; font-weight: 300; line-height: 1; display: block; }

.shortcut { margin-top: 25px; font-size: 0; line-height: 0; }
.shortcut li { margin: 0 .15%; width: 19.7%; display: inline-block; vertical-align: top; background: url(../img/shortcut_more.png) no-repeat 83% 83%; }
.shortcut li:first-child { display: none; }
.shortcut li > a { position: relative; padding: 60px 40px; height: 300px; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.shortcut li > a:hover { -moz-transition: 3s; -o-transition: 3s; -webkit-transition: 3s; transition: 3s; }
.shortcut li > a:hover::before { content: ""; position: absolute; top: 0; left: 0; margin: 4%; width: 92%; height: 92%; border: 1px solid rgba(0, 0, 0, 0.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.shortcut li > a:hover img { -moz-animation: spin 0.5s 1 linear; -o-animation: spin 0.5s 1 linear; -webkit-animation: spin 0.5s 1 linear; animation: spin 0.5s 1 linear; }
@-o-keyframes spin { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }
@-moz-keyframes spin { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }
@-webkit-keyframes spin { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }
@keyframes spin { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }
.shortcut li:nth-child(2) { background-color: rgba(220, 39, 146, 0.6); }
.shortcut li:nth-child(3) { background-color: rgba(54, 114, 75, 0.6); }
.shortcut li:nth-child(4) { background-color: rgba(50, 16, 73, 0.6); }
.shortcut li:nth-child(5) { background-color: rgba(119, 167, 187, 0.6); }
.shortcut li:last-child { background-color: rgba(250, 212, 77, 0.6); }
.shortcut li .course { font-size: 35px; color: rgba(255, 255, 255, 0.85); font-weight: 600; line-height: 1; letter-spacing: -0.1rem; display: block; }
.shortcut li .course-desc { margin-top: 20px; min-height: 65px; font-size: 19px; color: rgba(255, 255, 255, 0.85); font-weight: 300; line-height: 1.3; letter-spacing: -0.075rem; display: block; }

.surgery_hours { margin-top: 80px; }
.surgery_hours dl { text-align: center; font-size: 0; line-height: 0; }
.surgery_hours dl dt { width: 160px; height: 55px; text-indent: -9999px; display: inline-block; vertical-align: top; background: url(../img/surgery_hours_title.png) no-repeat 0 0; }
.surgery_hours dl dd { margin-left: 45px; text-align: left; display: inline-block; vertical-align: top; }
.surgery_hours .day { font-size: 17px; color: #a2d9df; line-height: 1; display: block; }
.surgery_hours .day::before { content: "\2012"; margin-right: 3px; }
.surgery_hours .desc { margin: 9px 0 0 15px; font-size: 14px; color: #fff; line-height: 1; display: block; }

.aside { position: absolute; top: 250px; left: -660px; z-index: 150; width: 795px; height: 360px; text-align: left; -moz-transition: left 0.5s; -o-transition: left 0.5s; -webkit-transition: left 0.5s; transition: left 0.5s; background: url(../img/aside_bg.png) no-repeat; }
.aside.on { left: 0; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; }
.aside .aside-close { position: absolute; top: 70px; right: 55px; width: 40px; height: 40px; font-size: 0; text-indent: -999px; display: block; background: url(../img/aside_view.png) no-repeat; }
.aside.on .aside-close { background: url(../img/aside_close.png) no-repeat; }
.aside .news-event { margin-top: 5px; padding: 60px 50px; width: 590px; height: 230px; overflow: hidden; -ms-word-break: break-all; }
.aside .title-img { position: absolute; top: 150px; left: 710px; width: auto; height: auto; }
.aside .contents-wrapper { position: relative; height: 220px; font-size: 0; line-height: 0; display: block; }
.aside .contents-wrapper .thumb { width: 220px; max-height: 220px; overflow: hidden; display: inline-block; vertical-align: top; }
.aside .contents-wrapper .thumb img { max-height: 220px; display: block; }
.aside .contents-wrapper .text { margin-left: 45px; width: 320px; font-size: 18px; color: #fff; line-height: 1; display: inline-block; }
.aside .contents-wrapper .title { width: 320px; font-family: "notokr-regular", sans-serif; font-size: 30px; letter-spacing: -.09rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.aside .article-content { margin-top: 35px; height: 170px; font-family: "notokr-light", sans-serif; font-size: 18px; line-height: 1.65; letter-spacing: -0.07rem; overflow: hidden; }

#footer { padding: 60px 30px; min-height: 200px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#footer .footer-inr { margin: 0 auto; width: 1400px; }
#footer .footer-left { width: 75%; float: left; }
#footer .footer-right { width: 25%; float: right; text-align: right; }
#footer .footer-menu > a { padding: 14px 22px; font-size: 15px; letter-spacing: -.07rem; display: inline-block; border: 1px solid #c8c8c8; }
#footer .footer-info .impact { font-size: 21px; letter-spacing: -.08rem; }
#footer .footer-info .tiny { font-size: 13px; color: #999; }
#footer .footer-info .tiny::before { content: "\007C"; position: relative; top: -2px; margin: 0 12px; font-size: 11px; color: #ddd; }
#footer address { margin-top: 15px; }
#footer address .impact { font-size: 15px; color: #454545; }
#footer address > span { margin-right: 35px; font-size: 15px; color: #999; }
#footer address > span:first-child ~ span::before { content: ""; position: relative; top: -2px; right: 3px; width: 18px; height: 18px; display: inline-block; vertical-align: middle; background: url(../img/footer_icon.png) no-repeat; }
#footer address .fax::before { background-position: -18px 0 !important; }
#footer address .license::before { background-position: -36px 0 !important; }
#footer .copyright { margin-top: 15px; font-size: 12px; color: #c8c8c8; text-transform: uppercase; }

@media screen and (min-width: 1025px) { #header .nav-depth2 { height: 150px; background-color: rgba(55, 96, 75, 0.95); }
  #header .nav-depth2 > dl { padding-top: 60px; height: 210px; font-size: 0; line-height: 0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  #header .nav-depth2 > dl dt { padding-right: 30px; display: inline-block; vertical-align: middle; background: url(../img/depth2_vline.png) no-repeat 100% 50%; }
  #header .nav-depth2 > dl dt img { max-width: 160px; }
  #header .nav-depth2 > dl dd { font-family: "notokr-thin", sans-serif; font-size: 23px; color: #fff; line-height: 1; letter-spacing: -0.08rem; display: inline-block; vertical-align: middle; }
  #header .nav-depth2 > dl dd:nth-of-type(1) ~ dd { background: url(../img/depth2_slash.png) no-repeat 0 50%; background-size: 10px; }
  #header .nav-depth2 > dl dd a { padding: 0 10px 0 20px; display: block; }
  .side-nav-btn, .side-nav { display: none; } }
@media screen and (min-width: 541px) { .surgery_hours br { display: none; } }
@media screen and (max-width: 1480px) { #header .nav-depth2 > dl dt { display: none !important; }
  .cscenter { padding: 0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  #footer .footer-inr { width: 100%; } }
@media screen and (max-width: 1300px) { .surgery_hours dl dd { margin-left: 20px; } }
@media screen and (max-width: 1280px) { #header .nav-depth2 > dl dd { font-size: 19px; }
  #header .nav-depth2 > dl dd:nth-of-type(1) ~ dd { background-size: 10px; }
  #header .nav-depth2 > dl dd a { padding: 0 10px 0 20px; }
  .shortcut li > a { padding: 30px; }
  .shortcut li .course { min-height: 80px; font-size: 28px; line-height: 1.15; }
  .shortcut li .course-desc { margin-top: 0; min-height: 75px; }
  .shortcut img { margin-top: 10px; max-width: 50%; }
  #footer .footer-left { width: 80%; }
  #footer .footer-right { width: 20%; } }
@media screen and (max-width: 1180px) { .surgery_hours { margin-top: 50px; }
  .surgery_hours dl dt { margin-bottom: 10px; width: 100% !important; height: 40px; display: block !important; background: url(../img/surgery_hours_title_m.png) no-repeat 0 0; background-position: 50% 0; } }
@media screen and (max-width: 1140px) { #footer .footer-left { width: 85%; }
  #footer .footer-right { width: 15%; }
  #footer address > span { margin-right: 20px; } }
@media screen and (max-width: 1080px) { #footer { padding: 30px; }
  #footer .footer-left { width: 100%; float: none; }
  #footer .footer-right { margin-top: 20px; width: 100%; float: none; text-align: left; }
  #footer address > span:first-child ~ span { margin-right: 20px; } }
@media screen and (max-width: 1024px) { #header .nav-depth1, #header .nav-depth2 { display: none; }
  .side-nav-btn { position: absolute; top: 25px; right: 25px; z-index: 1500; font-size: 30px; color: #fff; cursor: pointer; display: inline-block; }
  .side-nav { position: fixed; top: 0; right: 0; z-index: 9999; padding-top: 80px; width: 0; height: 100%; font-size: 1rem; color: #fff; line-height: 1; overflow-x: hidden; background-color: rgba(55, 96, 75, 0.95); display: block !important; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; }
  .side-nav .closebtn { position: absolute; top: 25px; right: 25px; font-size: 36px; }
  .side-nav > ul { min-width: 310px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  .side-nav > ul > li:first-child ~ li { margin-top: 25px; }
  .side-nav > ul > li > a { padding: 15px 0; font-family: "Nanum Square", "NanumSquare", "NanumGothic", "나눔고딕", "Malgun Gothic", "맑은 고딕", sans-serif; font-size: 25px; color: rgba(255, 255, 255, 0.85); font-weight: 100; line-height: 1; letter-spacing: -0.08rem; display: block; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .side-nav > ul > li > a::before { content: "\2014"; position: relative; top: -3px; right: 5px; margin-left: 15px; font-size: 10px; }
  .side-nav > ul > li > a:hover { color: #f1f1f1; }
  .side-nav > ul > li ul { font-size: 0; line-height: 0; background-color: rgba(55, 96, 75, 0.85); }
  .side-nav > ul > li ul li { width: 50%; display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  .side-nav > ul > li ul li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.2); }
  .side-nav > ul > li ul li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.2); }
  .side-nav > ul > li ul a { padding: 10px 20px; font-size: 15px; color: rgba(255, 255, 255, 0.75); font-weight: 400; line-height: 1; letter-spacing: -0.08rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: block; }
  .side-nav > ul > li ul a:hover { color: #fff; background-color: #238a56; }
  .main .visual { margin-top: 100px !important; padding: 0 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  .main .visual img { max-width: 100%; }
  .cscenter .cscenter-number { font-size: 40px; } }
@media screen and (max-width: 980px) { #header { padding: 0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  #header .primary-width { height: auto !important; }
  #header .header-logo { height: 75px; text-align: center; }
  .shortcut li { background-position: 90% 90%; background-size: 15px; }
  .shortcut li > a { padding: 20px; height: 175px; }
  .shortcut li .course { min-height: auto; font-size: 27px; }
  .shortcut li .course-desc { margin-top: 15px; min-height: auto; font-size: 17px; }
  .shortcut li img { display: none; }
  .surgery_hours { margin-top: 60px; }
  .surgery_hours dl { margin: 0 auto; width: 70%; }
  .surgery_hours dl dt { margin-bottom: 0; }
  .surgery_hours dl dd { margin-top: 30px; margin-left: 0; padding: 0 5%; width: 50%; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  .aside { display: none; } }
@media screen and (max-height: 960px) { #container.main { padding-bottom: 60px; height: auto; } }
@media screen and (max-width: 880px) { #footer address .br1 { margin-bottom: 8px; display: block; } }
@media screen and (max-width: 850px) { .cscenter .cscenter-number { font-size: 35px; }
  .shortcut li > a { height: 155px; }
  .shortcut li .course { font-size: 23px; }
  .shortcut li .course-desc { font-size: 15px; } }
@media screen and (max-width: 768px) { #header .nav-depth1 > li { width: 33.3333333333%; height: 55px; font-size: 25px; line-height: 55px; }
  #header .nav-depth1 > li > a { height: 55px; }
  #container.main { padding-bottom: 60px; height: auto; }
  #container .visual { margin-top: 50px; }
  .cscenter .cscenter-number { font-size: 30px; font-weight: 600; }
  .shortcut { padding: 0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  .shortcut li { margin: 0; width: 33.3333333333%; }
  .shortcut li > a:hover::before { content: ""; width: 0; height: 0; border: 0; }
  .shortcut li:first-child { padding: 20px; min-height: 155px; font-size: 23px; color: rgba(255, 255, 255, 0.85); font-weight: 600; line-height: 1.15; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: none; background-color: rgba(0, 0, 0, 0.25) !important; }
  .surgery_hours { margin-top: 50px; }
  .surgery_hours dl { width: 85%; } }
@media screen and (max-width: 640px) { .main .visual { margin-top: 30px !important; }
  .cscenter { margin-top: 55px; }
  .surgery_hours dl { width: 95%; }
  .surgery_hours dl dd { padding: 0 2.5%; }
  #footer address .br2 { margin-top: 8px; display: block; } }
@media screen and (max-width: 540px) { #header .nav-depth1 > li { height: 50px; font-size: 21px; line-height: 50px; }
  #header .nav-depth1 > li > a { height: 50px; }
  .shortcut li:first-child { min-height: 165px; font-size: 21px; }
  .shortcut li > a { height: 165px; }
  .shortcut li .course { font-size: 21px; }
  .shortcut li .course-desc { font-weight: 400; }
  .surgery_hours dl { width: 70%; }
  .surgery_hours dl br { margin-right: 0; display: block; }
  .surgery_hours dl .day { font-size: 15px; }
  .surgery_hours dl .desc { font-size: 13px; line-height: 1.5; } }
@media screen and (max-width: 480px) { #header .nav-depth1 > li { height: 45px; font-size: 18px; font-weight: 600; line-height: 45px; }
  #header .nav-depth1 > li > a { height: 45px; }
  .main .visual { margin-top: 65px; }
  .cscenter .cscenter-number { font-size: 25px; }
  .shortcut li { width: 100%; background-position: 90% 50% !important; }
  .shortcut li:first-child { display: none; }
  .shortcut li > a { padding: 15px 25px; height: 80px; }
  .shortcut li .course-desc { margin-top: 8px; }
  .surgery_hours dl { width: 80%; }
  #footer .footer-menu > a { padding: 10px 15px; font-size: 13px; }
  #footer address > span { font-size: 13px; }
  #footer .copyright { font-size: 11px; } }
@media screen and (max-height: 450px) { .side-nav { padding-top: 15px; }
  .side-nav a { font-size: 18px; } }

/*# sourceMappingURL=contents.css.map */