@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");
@import url(https://cdn.jsdelivr.net/xeicon/1/xeicon.min.css);
@import url(https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css);
@import url(css/blank.css);

*{margin:0; padding:0; box-sizing:border-box;letter-spacing:-0.04rem;color:inherit;}
html {font-size: 20px;}
img {border:0;vertical-align:top;}
a {border:0; text-decoration:none; color:inherit; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
ul, li {list-style:none;}
div {display:block;}
html {overflow-y:scroll;height:100%;min-width:320px}
body {font-family: "Pretendard", "Pretendard Variable", sans-serif; color:#151515;}
.inner {width: 30rem; margin: auto; clear: both;}
.inner2 {width: 29rem; margin: auto; clear: both;}


.c_default {color:#303030 !important}
.c_lightgray {color:#b0b0b0 !important}
.c_gray {color:#8a9498 !important}
.c_red {color:#c70000 !important}
.c_white {color:#fff !important}
.color_m1 {color: #119c9e;}
.color_m2 {color: #4dc5c7;}
.color_m3 {color: #15686d;}
.color_m4 {color: #7fdbdd;}
.color_b1 {color: #116594;}
.color_b2 {color: #17303e;}
.color_b3 {color: #9ed9fb;}



h1,h2 {font-weight:300;line-height:1.2;}
h1 {font-size:2.5rem;}
.sizeh1 {font-size: 2.5rem !important;}
h1.small {font-size: 2.2rem;}
h1.big {font-size: 3rem; }
h1.superbig {font-size: 4rem; letter-spacing:-0.02em; line-height: 1.1;}
.h1_giant {font-size: 5rem; letter-spacing:-0.03em;}
h2 {font-size:2rem}
.sizeh2 {font-size:2rem; }
h3 {font-size:1.5rem; font-weight:400; line-height:1.4; }
.sizeh3 {font-size:1.5rem; }
h4 {font-size:1.2rem; font-weight:400; line-height:1.4; word-break:keep-all;}
.sizeh4 {font-size: 1.2rem;}
h5 {font-size:1rem; font-weight: 400; line-height:1.618; word-break:keep-all;}
.sizeh5 {font-size: 1.1rem !important;}
p {font-size:0.9rem; line-height:1.7; color:inherit; word-break:keep-all; }
p.small {font-size:0.8rem; }
p.typeline {font-size:0.7rem;}
.size_psmall {font-size: 0.8rem !important;}
sub {font-size: small; }
.uppercase {text-transform: uppercase;}


.tight {letter-spacing: -0.2rem;}
.loose {letter-spacing: 0.4rem !important;}
.loose1 {letter-spacing: 0.15rem !important;}
.loose2 {letter-spacing: 0.05rem !important;}
.lineheight125 {line-height: 125% !important;}
.lineheight140 {line-height: 140% !important;}

b {letter-spacing: inherit; font-weight: 600;}
.thin {font-weight: 200 !important;}
.bold {font-weight: 700 !important;}


span {color:inherit; letter-spacing: inherit;}

.float {float:left;}
.float_r {float:right}
.left {text-align:left !important}
.right {text-align:right !important}
.center {text-align:center !important}
.justify {text-align:justify !important;}
.justify::after {content: ''; display: inline-block; width: 100%;}

.clearfix::after {content:""; clear:both; display: block;}
.inlineblock {display: inline-block;}

.relative {position: relative;}


.flex {display: flex !important;}
.col1 {flex: 1;}
.col2 {flex: 2;}
.col3 {flex: 3;}
.col4 {flex: 4;}
.col5 {flex: 5;}
.col6 {flex: 6;}


.flex_center {display: flex !important; justify-content: center;}
.flex_end {display: flex !important; justify-content: end;}
.flex_between {display: flex !important; justify-content: space-between;}
.flex_evenly {display: flex !important; justify-content: space-evenly;}
.flex_c_center {display: flex !important; flex-direction: column; justify-content: center !important;}
.flex_c_end {display: flex !important; flex-direction: column; justify-content: end;}



.bdb {border-bottom:1px #e0e0e0 solid}
.bdt {border-top:1px #e0e0e0 solid}
.bdl {border-left:1px #e0e0e0 solid}
.bdr {border-right:1px #e0e0e0 solid}

.bdw {border-color: rgba(255, 255, 255, 0.3);}



/* 컬럼 설정 */
.w05 {width: 5% !important;}
.w10 {width: 10% !important;}
.w15 {width: 15% !important;}
.w20 {width: 20% !important;}
.w22 {width: 22% !important;}
.w25 {width: 25% !important;}
.w30 {width: 30% !important;}
.w35 {width: 35% !important;}
.w40 {width: 40% !important;}
.w50 {width: 50% !important;}
.w60 {width: 60% !important;}
.w75 {width: 75% !important;}
.w80 {width: 80% !important;}
.w85 {width: 85% !important;}
.w90 {width: 90% !important;}
.w100 {width: 100% !important;}

.width100 {width: 5rem !important;}
.width600 {width: 30rem !important;}





#wrap {width:640px; margin: 0px auto; background:#fff; position: relative;}

h1.logo {width: 12.7rem; height: 3.5rem; background: url(images/logo.png) no-repeat; background-size: contain; text-indent: -10000px;}
h1.logo a {display: block;}

.mark {width: 3rem; height: 3rem; background: url(images/doori_mark.png) center / contain; display: block;}

.bg_type {position: absolute;}
.bg_type h1 {font-size: 7.5rem; line-height: 0.9; writing-mode: sideways-lr;}


.surgery {width: 100%; position: relative; display: flex; justify-content: center; align-items: center; background: url(images/surgery_bg.png) center no-repeat; background-size: contain; height: 5rem; text-align: center;}
.surgery * {line-height: 0;}
.surgery p {margin-right: 1rem;}


/* 공통상단 */
#header {width:100%; position: absolute !important; /* 수술례 있을 때 > top: 5rem !important; */ /* 수술례 없을때 > */top: 0 !important; display: flex; height: 6rem; justify-content: space-between; align-items: center; padding: 0 1.5rem; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out; }
#header .logo {background-image: url(images/logo_w.png);}
#header .contact {display: flex; align-items: center}
#header .blog {background: url(images/blog.png) center / contain; margin-right: 1rem; width: 2rem; height: 1.9rem; display: block; text-indent: -5555px;}
#header .menu {width: 1.5rem; height: 1.25rem; margin-top: 0.25rem; background: url(images/menu_w.png) center / contain; display: block; text-indent: -5555px; cursor: pointer;}



#quick {position: fixed; bottom: 0; width: 100%; height: 5rem; z-index: 1000; background-color: #fff; text-align: center; border-top: 0.15rem #119c9e solid;  display: flex;}
#quick a {display: block; flex: 1; width: 100%; height: 5rem; padding-top: 3.25rem; font-size: 0.9rem; font-weight: 600; background-position: center 25%; background-repeat: no-repeat; background-size: auto 2.2rem; border-left: 1px #e0e0e0 solid;}
#quick a:hover {background-color: #e8fdfd;}
#quick a.q1 {background-image: url(images/quick_1.png);}
#quick a.q2 {background-image: url(images/quick_2.png);}
#quick a.q3 {background-image: url(images/quick_3.png);}
#quick a.q4 {background-image: url(images/quick_4.png); background-color: #119c9e; color: #fff; border: 0;}
#quick a.q4:hover {background-color: #058f91;}
#quick a.q5 {background-image: url(images/quick_5.png); background-color: #15686d; color: #fff; border-left: 0; border-right: 1px #e0e0e0 solid;}






/* 공통 하단 */
#footer {width:100%; background-color: #374347; color: #fff; display: inline-block; position: relative; padding-bottom: 6rem;}
#footer .tel {width: 100%; height: 7.5rem; display: block; background: url(images/footer_tel.jpg) center / cover; text-indent: -10000px;}
#footer .wrap { text-align: center;}
#footer .logo {width:16.7rem; height: 4.6rem; background-image: url(images/logo_w.png); margin: 2rem auto;}
#footer .txt {}
#footer .txt span {font-size: 0.9rem; line-height: 1.6; display: inline-block;}




/* 지도 관련 */
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont,
.root_daum_roughmap .map_border {display: none;}



@media only screen and (max-width:640px) {
	html {font-size: 3.125vw;}

	#wrap {width:100%;}	   

    #footer .cs .root_daum_roughmap {zoom: 70%;}

}