/* 서브 */ #sub {width:100%; display:inline-block; overflow: hidden;} #sub .subtop {width:100%; } #sub .subtop#sub1 {background-image:url(images/subtop1.jpg);} #sub .subtop#sub2 {background-image:url(images/subtop2.jpg);} #sub .subtop#sub3 {background-image:url(images/subtop3.jpg);} #sub .subtop#sub4 {background-image:url(images/subtop4.jpg);} #sub .subtop#sub5 {background-image:url(images/subtop5.jpg);} #sub .subtop#sub6 {background-image:url(images/subtop6.jpg);} #sub .subtop#sub7 {background-image:url(images/subtop7.jpg);} #sub .snb {width:100%; height: 80px; line-height:80px; border-bottom: 1px #d0d0d0 solid; } #sub .snb .inner {} #sub .snb a.home {width: 12%; border-left: 1px #d0d0d0 solid; border-right: 1px #d0d0d0 solid; display: block; text-align: center; font-size: 1.5rem; float: left;} #sub .snb .menu {float: left; padding: 0 1.3em; font-size: 1.3rem; border-right: 1px #d0d0d0 solid; width: 33%; position: relative;} #sub .snb .menu.topnav {cursor: pointer; width: 55%; font-weight: 700;} #sub .snb .menu.topnav::after {content:"\e914"; font-family: xeicon; float: right; font-size: 1.5rem;} #sub .snb .menu.topnav span {-webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;} #sub.sub1 .snb .menu.topnav {background-color:#d8ccff;} #sub.sub2 .snb .menu.topnav {background-color:#fce197;} #sub.sub3 .snb .menu.topnav {background-color:#ffd2d4;} #sub.sub4 .snb .menu.topnav {background-color:#d8ccff;} #sub.sub5 .snb .menu.topnav {background-color:#b8e0ff;} #sub.sub6 .snb .menu.topnav {background-color:#bf7697; color: #fff;} #sub.sub7 .snb .menu.topnav {background-color:#b6e4d7;} #sub.sub8 .snb .menu.topnav {background-color:#d9ccbb;} #sub .snb ul {background-color: #fff; width: 100%; border: 1px #d0d0d0 solid; border-top: 0;} #sub .snb li {line-height:2.5; } #sub .snb li a {display: block; padding: 0 1.3em;} #sub .snb li a.on,#sub .snb li a:hover {background-color: #f0f0f0;} #sub .snb .subnav {position: absolute; top: 79px; z-index: 10; left: 0; display: none;} #sub #content {width:100%; display:inline-block; float: left;} #sub .bg_gray {background-color: #f5f5f5 !important;} #sub .paragraph {width: 100%; display: inline-block;} #sub .paragraph.imgbox > * {float: left;} #sub .paragraph.imgbox > img {width: 100%;} #sub .paragraph .row {width: 100%;} /* 카테고리별 글씨색상 설정 */ #sub.sub2 #content .c_main {color:#efcc6d !important;} #sub.sub3 #content .c_main {color:#eb8489 !important;} #sub.sub4 #content .c_main {color:#b7a4f4 !important;} #sub.sub5 #content .c_main {color:#4d94cc !important;} #sub.sub6 #content .c_main {color:#b66589 !important;} #sub.sub7 #content .c_main {color:#3fabae !important;} #sub.sub8 #content .c_main {color:#cca76d !important;} /* 카테고리별 타이틀비주얼 설정 */ #sub #content .paragraph.visual {height:973px;overflow:hidden; background-position:top center;background-repeat:no-repeat; background-size:contain;position: relative; z-index:9;} #sub #content .paragraph.visual .inner {height:100%;background-position:top center;background-repeat:no-repeat;position:relative;z-index:9;} #sub #content .paragraph.visual .whitebox {background-color:#fff;position:absolute;z-index:1;width:50%;left:50%;height:100%;top:0;} #sub #content .paragraph.visual.sub2_1 {background-image:url(images/sub2_1_visual.png);} #sub #content .paragraph.visual.sub2_2 {background-image:url(images/sub2_2_visual.png);} #sub #content .paragraph.visual.sub2_3 {background-image:url(images/sub2_3_visual.png);} #sub #content .paragraph.visual.sub2_4 {background-image:url(images/sub2_4_visual.png);} #sub #content .paragraph.visual.sub2_5 {background-image:url(images/sub2_5_visual.png);} #sub #content .paragraph.visual.sub2_6 {background-image:url(images/sub2_6_visual.png);} #sub #content .paragraph.visual.sub2_7 {background-image:url(images/sub2_7_visual.png);} #sub #content .paragraph.visual.sub2_8 {background-image:url(images/sub2_8_visual.png);} #sub #content .paragraph.visual.sub2_9 {background-image:url(images/sub2_9_visual.png);} #sub #content .paragraph.visual.sub3_1 {background-image:url(images/sub3_1_visual.png);} #sub #content .paragraph.visual.sub3_2 {background-image:url(images/sub3_2_visual.png);} #sub #content .paragraph.visual.sub3_3 {background-image:url(images/sub3_3_visual.png);} #sub #content .paragraph.visual.sub3_4 {background-image:url(images/sub3_4_visual.png);} #sub #content .paragraph.visual.sub3_5 {background-image:url(images/sub3_5_visual.png);} #sub #content .paragraph.visual.sub3_6 {background-image:url(images/sub3_6_visual.png);} #sub #content .paragraph.visual.sub4_1 {background-image:url(images/sub4_1_visual.png);} #sub #content .paragraph.visual.sub4_2 {background-image:url(images/sub4_2_visual.png);} #sub #content .paragraph.visual.sub4_3 {background-image:url(images/sub4_3_visual.png);} #sub #content .paragraph.visual.sub4_4 {background-image:url(images/sub4_4_visual.png);} #sub #content .paragraph.visual.sub4_5 {background-image:url(images/sub4_5_visual.png);} #sub #content .paragraph.visual.sub4_6 {background-image:url(images/sub4_6_visual.png);} #sub #content .paragraph.visual.sub4_7 {background-image:url(images/sub4_7_visual.png);} #sub #content .paragraph.visual.sub4_8 {background-image:url(images/sub4_8_visual.png);} #sub #content .paragraph.visual.sub4_9 {background-image:url(images/sub4_9_visual.png);} #sub #content .paragraph.visual.sub4_10 {background-image:url(images/sub4_10_visual.png);} #sub #content .paragraph.visual.sub4_11 {background-image:url(images/sub4_11_visual.png);} #sub #content .paragraph.visual.sub5_1 {background-image:url(images/sub5_1_visual.png);} #sub #content .paragraph.visual.sub5_2 {background-image:url(images/sub5_2_visual.png);} #sub #content .paragraph.visual.sub5_3 {background-image:url(images/sub5_3_visual.png);} #sub #content .paragraph.visual.sub5_4 {background-image:url(images/sub5_4_visual.png);} #sub #content .paragraph.visual.sub5_5 {background-image:url(images/sub5_5_visual.png);} #sub #content .paragraph.visual.sub5_6 {background-image:url(images/sub5_6_visual.png);} #sub #content .paragraph.visual.sub5_7 {background-image:url(images/sub5_7_visual.png);} #sub #content .paragraph.visual.sub5_8 {background-image:url(images/sub5_8_visual.png);} #sub #content .paragraph.visual.sub5_9 {background-image:url(images/sub5_9_visual.png);} #sub #content .paragraph.visual.sub5_10 {background-image:url(images/sub5_10_visual.png);} #sub #content .paragraph.visual.sub5_11 {background-image:url(images/sub5_11_visual.png);} #sub #content .paragraph.visual.sub5_12 {background-image:url(images/sub5_12_visual.png);} #sub #content .paragraph.visual.sub6_1 {background-image:url(images/sub6_1_visual.png);} #sub #content .paragraph.visual.sub6_2 {background-image:url(images/sub6_2_visual.png);} #sub #content .paragraph.visual.sub6_3 {background-image:url(images/sub6_3_visual.png);} #sub #content .paragraph.visual.sub6_4 {background-image:url(images/sub6_4_visual.png);} #sub #content .paragraph.visual.sub6_5 {background-image:url(images/sub6_5_visual.png);} #sub #content .paragraph.visual.sub6_6 {background-image:url(images/sub6_6_visual.png);} #sub #content .paragraph.visual.sub6_7 {background-image:url(images/sub6_7_visual.png);} #sub #content .paragraph.visual.sub6_8 {background-image:url(images/sub6_8_visual.png);} #sub #content .paragraph.visual.sub6_9 {background-image:url(images/sub6_9_visual.png);} #sub #content .paragraph.visual.sub7_1 {background-image:url(images/sub7_1_visual.png);} #sub #content .paragraph.visual.sub7_2 {background-image:url(images/sub7_2_visual.png);} #sub #content .paragraph.visual.sub7_3 {background-image:url(images/sub7_3_visual.png);} #sub #content .paragraph.visual.sub7_4 {background-image:url(images/sub7_4_visual.png);} #sub #content .paragraph.visual.sub7_5 {background-image:url(images/sub7_5_visual.png);} #sub #content .paragraph.visual.sub8_1 {background-image:url(images/sub8_1_visual.png);} #sub #content .paragraph.visual.sub8_2 {background-image:url(images/sub8_2_visual.png);} #sub #content .paragraph.visual.sub8_3 {background-image:url(images/sub8_3_visual.png);} #sub #content .paragraph.visual.sub8_4 {background-image:url(images/sub8_4_visual.png);} #sub #content .paragraph.visual.sub8_5 {background-image:url(images/sub8_5_visual.png);} /***************************** 수술정보 *****************************/ #sub #content .paragraph .surgery_info {width:100%;padding: 15px; background-color:rgba(255,255,255,0.8);position:absolute;bottom:0;display: inline-block;} #sub #content .paragraph .surgery_info li {background-position:left center;background-repeat:no-repeat; padding-left:30px; float:left;font-size:18px; line-height: 2; margin: 0 10px;} /* 수술시간 */ #sub #content .paragraph .surgery_info li.time {background-image:url(images/surinfo_time.svg);} /* 마취방법 */ #sub #content .paragraph .surgery_info li.anesthesia {background-image:url(images/surinfo_anesthesia.svg);} /* 내원치료여부 */ #sub #content .paragraph .surgery_info li.coming {background-image:url(images/surinfo_coming.svg);} /* 일상생활 */ #sub #content .paragraph .surgery_info li.daily {background-image:url(images/surinfo_daily.svg);} /* 실밥제거 */ #sub #content .paragraph .surgery_info li.makeup {background-image:url(images/surinfo_makeup.svg);} /* 입원여부 */ #sub #content .paragraph .surgery_info li.hospital {background-image:url(images/surinfo_hospital.svg);} /* 통증여부 */ #sub #content .paragraph .surgery_info li.pain {background-image:url(images/surinfo_pain.svg);} /* 일상생활 */ #sub #content .paragraph .surgery_info li.recovor {background-image:url(images/surinfo_recovor.svg);} /* 실밥제거 */ #sub #content .paragraph .surgery_info li.thread {background-image:url(images/surinfo_thread.svg);} #sub #content .paragraph .surgery_info li span.c_main {font-weight:bold;} #sub #content .paragraph.imgbox .surgery_info {position: relative; bottom: auto; margin: auto;} /* 수술가이드 아코디언 */ #sub #content .paragraph .accordion {} #sub #content .paragraph .accordion .q_line {width:100%; border-top: 2px solid #555; border-bottom:1px #e0e0e0 solid; padding:15px 0; line-height: 1.8; text-align:left;position:relative;} #sub #content .paragraph .accordion .q_line h4,#sub #content .paragraph .accordion .q_line h5 {} #sub #content .paragraph .accordion .q_line span {font-family: 'Roboto', sans-serif;float:left;width:80px;text-align:center;font-size:30px; line-height: 1;} #sub #content .paragraph .accordion .a_line {width:100%;padding:20px 20px 20px 80px;background-color:#f5f5f5;} #sub #content .paragraph .accordion .a_line p {} .ui-state-default:after,.ui-state-active:after {position:absolute;right:20px;top:0;font-weight:100;color:#555;width:60px;text-align:center;} .ui-state-default:after,.ui-widget-content .ui-state-default:after,.ui-widget-header .ui-state-default:after {content:"\002B"; } .ui-state-active:after,.ui-widget-content .ui-state-active:after,.ui-widget-header .ui-state-active:after {content:"\2212"; } #sub #content .paragraph .btn {padding:0 50px;line-height:60px; border:1px #888 solid; text-align:center; display:inline-block; margin:auto; cursor:pointer;} #sub #content .paragraph .btn i {font-size:40px;position:relative;top:10px;} #sub #content .paragraph table.basic {width:100%; border-top: 2px #333 solid !important; border: 1px #e0e0e0 solid; border-collapse: collapse;} #sub #content .paragraph table.basic th {background:#f5f5f5; font-size: 19px; border-bottom:1px #e0e0e0 solid; border-left: 1px #e0e0e0 solid;padding:10px;} #sub #content .paragraph table.basic td {font-size:17px; border-bottom:1px #e0e0e0 solid;border-left:1px #e0e0e0 solid;padding:10px;} #sub #content .paragraph table.basic td.subject {font-weight:700;font-size:17px;} #sub #content .paragraph table.basic .first {border-left:0;} #sub #content .paragraph table.basic .bg_gray {background:#f5f5f5;} /* 서브 탭 */ #sub ul.tabs {width:100%;margin:0 auto;height:70px;line-height:70px;position:relative;z-index:10;} #sub ul.tabs.p2 li {width:50%} #sub ul.tabs.p3 li {width:33.33%} #sub ul.tabs.p4 li {width:25%} #sub ul.tabs.p5 li {width:20%} #sub ul.tabs li { display:inline-block; float:left; text-align:center; font-size:20px; background:#aaa; color:#fff; } #sub ul.tabs li a {display:block;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;} #sub ul.tabs li:hover a {background:#555;} #sub ul.tabs li.active a {background:#d8ccff; color:#333;} #sub.sub2 ul.tabs li.active a {background:#fce197 !important; color:#333;} #sub.sub3 ul.tabs li.active a {background:#ffd2d4 !important; color:#333;} #sub.sub4 ul.tabs li.active a {background:#d8ccff !important; color:#333;} #sub.sub5 ul.tabs li.active a {background:#b8e0ff !important; color:#333;} #sub.sub8 ul.tabs li.active a {background:#d4c6b1 !important; color:#333;} #sub .tab_container {width:100%;display:inline-block; } #sub .tab_content {padding: 0 0 0 0; width:100%;display:inline-block; min-height:280px;} #sub .paragraph .board_box {font-size:15px !important; min-height:600px !important;} #sub .paragraph .board_box .hide {display:none !important;} #sub .paragraph .board_box span {font-size:inherit !important;} #sub .paragraph .board_box .sul_menu {width:100%;display:inline-block;} #sub .paragraph .board_box .sul_menu a {display:block;border:1px #d0d0d0 solid; margin:0.5%; float:left;padding:8px 0;width:24%;text-align:center;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;} #sub .paragraph .board_box .sul_menu a:hover {background-color:#f5f5f5;} #sub .paragraph .board_box input[name="writer"],#sub .paragraph .board_box input[name="subject"] {width: 90% !important;} div.nneditor-container div.SE_TOOLBAR li button, .simpleIcon {background-image: url(images/editor_icons.gif) !important;} div.nneditor-container div.SE_TOOLBAR li.image button:after {content:url(images/editor_icons_photo.gif);margin-left:12px;position:absolute;margin-top: -0.5em;} div.nneditor-container div.SE_TOOLBAR .nneditor-fontsize, div.nneditor-container div.SE_TOOLBAR .nneditor-fonttype {background-image:none !important;} .bna_box {border:1px #e0e0e0 solid;padding:5px;} #sub .paragraph .board_box .bbsupload_image a img {width:160px !important;height:160px !important;} #sub .paragraph .board_box #post_area img {max-width:100%; height: auto !important;} @media only screen and (max-width:640px) { #sub .snb {height: 12vw; line-height: 12vw;} #sub .snb a.home ,#sub .snb .menu {font-size: 3.5vw;} #sub .snb .menu.topnav::after {font-size: 4vw;} #sub .snb .subnav {top: 12vw;} #sub #content .paragraph.visual {height: 152vw;} #sub #content .paragraph .surgery_info {padding: 1.3vw;} #sub #content .paragraph .surgery_info li {zoom: 65%; margin: 0 2vw;} #sub #content .paragraph .accordion .q_line {padding: 2.5vw 0 !important;} #sub #content .paragraph .accordion .q_line span {width:15vw !important; font-size: 6vw !important;} #sub #content .paragraph .accordion .a_line {padding:2.5vw 2.5vw 2.5vw 15vw !important;} #sub #content .paragraph table.basic th {font-size: 3.5vw !important; padding: 1.5vw !important;} #sub #content .paragraph table.basic td {font-size: 3vw !important; padding: 1.5vw !important;} #sub ul.tabs {height: 8vw !important; line-height: 8vw !important;} #sub ul.tabs li {font-size: 3.2vw !important;} #sub .paragraph .board_box {font-size: 3.4vw !important;} div.nneditor-container div.SE_TOOLBAR ul {zoom: 85%;} #sub .paragraph .board_box #post_area img {width: 100% !important;} }