@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700&display=swap&subset=korean');


/* common */
html, body {position: relative; margin: 0; width: 100%; height: 100%; font-size: 16px;}
* {margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: 'Noto Sans KR', 'NanumSquare', 'sans-serif'; color: inherit; outline: none; letter-spacing: -0.5px; -webkit-text-size-adjust: none;}
ul > li > a {text-decoration: none;}
a {color: inherit;}
a:link { text-decoration:none ;outline: none; }
a:visited { text-decoration:none ; outline: none;}
a:active { text-decoration:none ; outline: none;}
a:hover { text-decoration:none; outline: none;}

table { border-collapse: collapse; }
.blind {position:absolute !important;visibility:hidden !important;top:0 !important;left:0 !important;height:0 !important;width:0 !important;font-size:0 !important;line-height:0 !important; overflow:hidden !important;}
em {font-style: normal;}
p {letter-spacing: -0.5px;}
fieldset {border:none;}
legend {display:none !important;}
caption {display:none;}
i {display:inline-block;}
strong {font-weight:600;}
input {box-sizing: border-box; padding: 0 30px; font-size: 1rem; color: #333; border: 1px solid #ddd; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input::-ms-clear { display: none; } /* IE10 이상에서 input box에 추가된 지우기 버튼 제거 */
button {box-sizing: border-box; border: 0; background-color: transparent; cursor:pointer;}
select {box-sizing: border-box; padding: 0 10px; font-size: 1rem; color: #333; border: 1px solid #ddd; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;} /* IE 10, 11의 네이티브 화살표 숨기기 */
textarea {box-sizing: border-box; width: 100%; padding: 10px; font-size: 1rem; color: #333; border: 1px solid #ddd; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none;}



/* LAYOUT */
#wrapper {box-sizing: border-box; width: 100%; padding: 0 0 0 250px; min-width: auto;}
#container {position: relative; box-sizing: border-box; width: 100%; margin: 0; float: none;}
.inner {box-sizing: border-box; width: 1180px; margin: 0 auto 0 130px;}

/* header */
#header {position: fixed; top: 0; left: 0; bottom: 0; box-sizing: border-box; width: 250px; height: 100vh; background-color: #2e303a; z-index: 10;}

.logo {width: 100%; height: 100px;}
.logo a {display: block; position: relative; width: 100%; height: 100%; background-color: #d80e19;}
.logo a svg {display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; width: 160px; height: 34px;}

.menubar {display: none; position: fixed; top: 21px; left: 30px; width: 20px; height: 18px; cursor: pointer; z-index: 80;}
.menubar li {position: absolute; width: 100%; height: 2px; background-color: #fff;}
.menubar li:nth-child(1) {top: 0;}
.menubar li:nth-child(2) {top: 8px;}
.menubar li:nth-child(3) {top: 16px;}

.gnb {padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
.gnb .depth1 {position: relative;}
.gnb .depth1:before {visibility: hidden; opacity: 0; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; height: 50px; background-color: #d80e19; transition: all 0.3s; content: '';}
.gnb .depth1 > a {display: block; box-sizing: border-box; padding: 0 0 0 40px; line-height: 50px; font-size: 1rem; font-weight: 400; color: rgba(255,255,255,0.7); text-align: left; 
	background: url(../images/common/arrow_gnb.png) no-repeat 205px center; transition: all 0.3s;}
.gnb .depth1:hover > a {font-weight: 600; color: rgba(255,255,255,1); background-color: #24262f; background-position: 90% center;}
.gnb .depth1.active:before {visibility: visible; opacity: 1;}
.gnb .depth1.active > a {font-weight: 600; color: rgba(255,255,255,1); background-color: #24262f; background-position: 90% center;}
.gnb .depth1.on:before {visibility: visible; opacity: 1;}
.gnb .depth1.on > a {font-weight: 600; color: rgba(255,255,255,1); background-color: #24262f; background-position: 90% center;}
.gnb .depth1 .lnb {display: none; position: absolute; top: 0; left: 250px; overflow: hidden; box-sizing: border-box; width: 250px; padding: 20px 0; background-color: #24262f; transition: all 0.3s; z-index: 1;}
.gnb .depth1 .lnb ul {width: 100%;}
.gnb .depth1 .lnb ul li:first-child {margin: 0;}
.gnb .depth1 .lnb ul li a {display: block; padding: 0 30px; line-height: 50px; font-size: 1rem; font-weight: 400; color: rgba(255,255,255,0.7); text-align: left;}
.gnb .depth1 .lnb ul li a:hover {font-weight: 600; color: rgba(255,255,255,1);}

.util {box-sizing: border-box; padding: 20px 30px; border-bottom: 1px solid rgba(255,255,255,0.1);}
.util > ul:after {display: block; clear: both; *zoom: 1; content: '';}
.util > ul > li {float: left;}
.util > ul > li > a {display: block; width: 100%; height: 100%;}
.util_link01 {padding: 0 0 16px 0;}
.util_link01 li {width: 93px; height: 30px; margin: 0 0 4px 4px;}
.util_link01 li:nth-child(2n + 1) {margin: 0 0 4px 0;}
.util_link01 li a {line-height: 30px; font-size: 13px; color: rgba(255,255,255,0.7); text-align: center; background-color: #32343f;}
.util_link02 li {overflow: hidden; width: 40px; height: 40px; margin: 0 0 0 10px; border-radius: 50%;}
.util_link02 li:first-child {margin: 0;}
.util_link02 li a {text-indent: -9999px; background-image: url(../images/common/sns_icons.png); background-repeat: no-repeat; background-color: #32343f;}
.util_link02 li:nth-child(1) a {background-position: 0 0;}
.util_link02 li:nth-child(2) a {background-position: -50px 0;}
.util_link02 li:nth-child(3) a {background-position: -100px 0;}
.util_link02 li:nth-child(4) a {background-position: -150px 0;}
.util_link02 li:nth-child(1) a:hover {background-position: 0 -46px; background-color: #1ed045;}
.util_link02 li:nth-child(2) a:hover {background-position: -50px -46px; background-color: #3b5998;}
.util_link02 li:nth-child(3) a:hover {background-position: -100px -46px;}
.util_link02 li:nth-child(4) a:hover {background-position: -150px -46px; background-color: #cd1f21;}
.util .login {margin: 20px 0 0 0;}
.util .login li {position: relative; float: left; width: 50%;}
.util .login li:before {display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 12px; background-color: rgba(255,255,255,0.5); content: '';}
.util .login li:first-child:before {display: none;}
.util .login li a {display: block; font-size: 14px; color: rgba(255,255,255,0.5); text-align: center; transition: all 0.3s ease-in-out;}
.util .login li a:hover {color: rgba(255,255,255,1);}

.time_info {box-sizing: border-box; padding: 20px 30px;}
.time_info strong {display: block; margin: 0 0 15px 0; font-size: 18px; font-weight: 400; color: rgba(255,255,255,0.7);}
.time_info strong span {font-size: 13px;}
.time_info ul li {line-height: 24px; font-size: 14px;}
.time_info ul li:after {display: block; clear: both; *zoom: 1; content: '';}
.time_info ul li span {float: left; width: 100px; color: rgba(255,255,255,0.7);}
.time_info ul li p {float: left; width: 90px; color: #fff;}
.time_info a {display: block; margin: 25px 0 0 0; width: 100%; height: 38px; line-height: 38px; font-size: 14px; color: #fff; background-color: rgba(255,255,255,0.2); text-align: center; border-radius: 10px;}
.time_info a i {display: inline-block; width: 26px; height: 38px; margin: 0 10px 0 0; background: url(../images/common/ic_chat.png) no-repeat 0 center; vertical-align: top;}

.quick_wrap {position: fixed; top: 190px; right: 120px; width: 170px;}
.quick_menu {position: relative; width: 100px; height: 280px; margin: 0 auto 20px; background-color: #fff; border-radius: 0 0 50px 50px; box-shadow: 10px 0 20px rgba(0,0,0,0.1);}
.quick_menu strong {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 14px; color: #fff; background-color: #2e303a; text-align: center;}
.quick_menu ul {padding: 20px 0;}
.quick_menu ul li {padding: 7px 0;}
.quick_menu ul li a {display: block; font-size: 14px; font-weight: 500; color: #333; text-align: center;}
.quick_menu .sns_kakao  {display: block; position: absolute; left: 0; right: 0; bottom: 12px; margin: 0 auto; width: 60px; height: 60px; background: #ffe600 url(../images/common/ic_kakao.png) no-repeat center center; text-indent: -9999px; border-radius: 50%;}
.quick_bnn li {margin: 0 0 10px 0;}
.quick_bnn li img {width: 100%; vertical-align: top;}


/* footer */
#footer {width: 100%; padding: 30px 0; background-color: #333;}
.ft_links {width: 100%;}
.ft_links li {display: inline-block; margin: 0 0 0 30px;}
.ft_links li:first-child {margin: 0;}
.ft_links li a {display: block; font-size: 14px; color: #666;}
.ft_links li.active a {color: #bbb;}
.ft_txt {margin: 10px 0 0 0;}
.ft_txt span {display: inline-block; position: relative; padding: 0 0 0 10px; margin: 0 0 0 10px; line-height: 1.8; font-size: 14px; font-weight: 300; color: #666;}
.ft_txt span:before {display: block; position: absolute; top: 6px; left: 0; width: 1px; height: 18px; background-color: #666; content: '';}
.ft_txt span:nth-child(4n + 1) {padding: 0; margin: 0;}
.ft_txt span:nth-child(4n + 1):before {display: none;}
.ft_txt .copy {line-height: 1.8; font-size: 14px; font-weight: 300; color: #666;}

.m_center {display: none;}

.m_center .util_link02 {margin: 30px 0 0 0;}
.m_center .util_link02:after {display: block; clear: both; *zoom: 1; content: '';}
.m_center .util_link02 > li {float: left;}
.m_center .util_link02 > li > a {display: block; width: 100%; height: 100%;}
.m_center .util_link02 li:nth-child(1) a {background-position: 0 -46px; background-color: #1ed045;}
.m_center .util_link02 li:nth-child(2) a {background-position: -50px -46px; background-color: #3b5998;}
.m_center .util_link02 li:nth-child(3) a {background-position: -100px -46px;}
.m_center .util_link02 li:nth-child(4) a {background-position: -150px -46px; background-color: #cd1f21;}

.m_center .ft_center_top {overflow: hidden; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.m_center .ft_center_top > li {float: left; box-sizing: border-box; width: 50%; height: 140px; padding: 15px;}
.m_center .ft_center_top .txt_box ul li {overflow: hidden; margin: 10px 0 0 0;}
.m_center .ft_center_top .txt_box ul li:first-child {margin: 0;}
.m_center .ft_center_top .txt_box ul li i {float: left; width: 40px; height: 40px; background-color: #2e303a; border-radius: 5px; background-repeat: no-repeat; background-position: center center;}
.m_center .ft_center_top .txt_box ul li:nth-child(1) i {background-image: url(../images/sub/ic_call.png); background-size: 25px;}
.m_center .ft_center_top .txt_box ul li:nth-child(2) i {background-image: url(../images/common/stethoscope.png); background-size: 25px;}
.m_center .ft_center_top .txt_box ul li .con {float: left; width: calc(100% - 50px); margin: 0 0 0 10px;}
.m_center .ft_center_top .txt_box ul li .con strong {display: block; margin: 0 0 3px; font-family: 'NanumSquare'; font-size: 14px; font-weight: 600; color: #d80e19;}
.m_center .ft_center_top .txt_box ul li .con a {font-family: 'NanumSquare'; font-size: 20px; font-weight: 600; color: #333;}
.m_center .ft_center_top .txt_box ul li .con p {font-size: 12px; color: #333; word-break: keep-all;}
.m_center .ft_center_top .time_box {border-left: 1px solid #ddd;}
.m_center .ft_center_top .time_box > p {margin: 0 0 10px; font-family: 'NanumSquare'; font-size: 16px; font-weight: 600; color: #d80e19;}
.m_center .ft_center_top .time_box > p span {display: block; margin: 5px 0 0 0; font-family: 'NanumSquare'; font-size: 13px; color: #d80e19;}
.m_center .ft_center_top .time_box ul li:after {display: block; clear: both; *zoom: 1; content: '';}
.m_center .ft_center_top .time_box ul li span {float: left; font-size: 13px; color: #666;}
.m_center .ft_center_top .time_box ul li p {float: right; font-size: 13px; color: #333;}
.m_center .sns_area {padding: 15px;}
.m_center .sns_area ul {overflow: hidden;}
.m_center .sns_area ul li {position: relative; float: left; overflow: hidden; width: calc((100% - 60px)/4); margin: 0 0 0 20px; border-radius: 15px;}
.m_center .sns_area ul li:before {display: block; padding-top: 100%; content: '';}
.m_center .sns_area ul li:first-child {margin: 0;}
.m_center .sns_area ul li:nth-child(1) {background-color: #1ed045;}
.m_center .sns_area ul li:nth-child(2) {background-color: #3b5998;}
.m_center .sns_area ul li:nth-child(3) {background: url(../images/common/insta_bg.png) no-repeat center center / cover;}
.m_center .sns_area ul li:nth-child(4) {background-color: #cd1f21;}
.m_center .sns_area ul li a {display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; text-indent: -9999px; background-repeat: no-repeat; background-position: center center;}
.m_center .sns_area ul li:nth-child(1) a {background-image: url(../images/common/sns_n.png); background-size: 36%;}
.m_center .sns_area ul li:nth-child(2) a {background-image: url(../images/common/sns_f.png); background-size: 22%;}
.m_center .sns_area ul li:nth-child(3) a {background-image: url(../images/common/sns_i.png); background-size: 40%;}
.m_center .sns_area ul li:nth-child(4) a {background-image: url(../images/common/sns_y.png); background-size: 40%;}
.m_center .ft_center_bot {padding: 30px 0; background-color: #2e303a;}
.m_center .ft_center_bot strong {display: block; margin: 0 0 10px 0; font-family: 'NanumSquare'; font-size: 18px; font-weight: 400; color: #fff;}
.m_center .ft_center_bot a {display: inline-block; font-family: 'NanumSquare'; font-size: 46px; font-weight: 600; color: #fff; vertical-align: top;}
.m_center .ft_center_bot ul {overflow: hidden; margin: 20px 0 0 0;}
.m_center .ft_center_bot ul li {float: left; width: 50%;}
.m_center .ft_center_bot ul li a {display: block; overflow: hidden;}
.m_center .ft_center_bot ul li i {float: left; box-sizing: border-box; width: 50px; height: 50px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; 
	background-repeat: no-repeat; background-position: center center; background-size: 60%;}
.m_center .ft_center_bot ul li:nth-child(1) i {background-image: url(../images/common/ic_quick_chat.png);}
.m_center .ft_center_bot ul li:nth-child(2) i {background-image: url(../images/common/ic_quick_call.png);}
.m_center .ft_center_bot ul li a p {float: left; margin: 0 0 0 10px; line-height: 50px; font-size: 18px; font-weight: 500; color: #fff;}



.m_quick {display: none; position: fixed; bottom: 15px; width: 70px; height: 70px; border-radius: 50%;}
.m_quick i {display: block; margin: 12px auto 0; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.m_quick p {display: block; margin: 3px 0 0 0; font-size: 12px; color: #fff; text-align: center;}
.m_quick.q_call {left: 15px; background-color: #d80e19;}
.m_quick.q_call i {width: 30px; height: 30px; background-image: url(../images/common/ic_quick_call.png);}
.m_quick.q_talk {right: 15px; background-color: #ffe600;}
.m_quick.q_talk i {width: 38px; height: 30px; background-image: url(../images/common/ic_quick_chat.png);}
.m_quick.q_talk p {color: #3a2020;}

.popup {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99;}
.popup .popup_wrap {position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; width: 80%; max-width: 500px; height: 300px; background-color: #fff;}
.popup .popup_wrap .btn_pop_close {position: absolute; top: 0; right: -30px; width: 24px; height: 24px; background: url(../images/common/ic_close_wh.png) no-repeat 0 0; text-indent: -9999px;}

@media screen and (min-width:1451px) and (max-width: 1650px) {
	.inner {width: calc(100% - 50px); margin: 0 0 0 50px; padding: 0 50px 0 0;}
}

@media screen and (min-width:1201px) and (max-width: 1450px) {
	.inner {width: 100%; padding: 0 160px 0 30px; margin: 0 auto;}

	.quick_wrap {top: 90px; right: 30px; width: 100px;}

	
}

/* tablet */
@media screen and (min-width:768px) and (max-width: 1200px) {
  	.inner {width: 100%; padding: 0 30px; margin: 0 auto;}
	
	#wrapper {padding: 60px 0 0 0;}
	#header {width: 100%; height: 60px; bottom: auto;}
	.logo {width: 160px; height: 60px; margin: 0 auto;}
	.logo a {background-color: transparent;}
	.menubar {display: block;}
	
	.gnb_wrap {visibility: hidden; opacity: 0; position: absolute; left: -250px; width: 250px; height: 100vh; background-color: #2e303a; z-index: 1; transition: all 0.3s;}
	.gnb_wrap:before {display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); content: ''; z-index: -1;}
	.gnb_wrap.open {visibility: visible; opacity: 1; left: 0;}

	.gnb {border-top: 1px solid rgba(255,255,255,0.1);}

	.quick_wrap {display: none;}

}  
  

@media screen and (min-width:481px) and (max-width:767px) {
	html, body {font-size: 14px;}
	.inner {width: 100%; padding: 0 15px; margin: 0 auto;}

	#wrapper {padding: 60px 0 0 0;}
	#header {width: 100%; height: 60px; bottom: auto;}
	.logo {width: 160px; height: 60px; margin: 0 auto;}
	.logo a {background-color: transparent;}
	.menubar {display: block; left: 15px;}
	
	.gnb_wrap {visibility: hidden; opacity: 0; position: absolute; left: -250px; width: 250px; height: 100vh; background-color: #2e303a; z-index: 1; transition: all 0.3s;}
	.gnb_wrap:before {display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); content: ''; z-index: -1;}
	.gnb_wrap.open {visibility: visible; opacity: 1; left: 0;}

	.gnb {border-top: 1px solid rgba(255,255,255,0.1);}

	.quick_wrap {display: none;}
	
	.m_center {display: block;}

	#footer {padding: 30px 0 100px;}
	.ft_txt:after {display: block; clear: both; *zoom: 1; content: '';}
	.ft_txt span {display: block; float: left;}
	.ft_txt span:before {height: 14px;}
	.ft_txt span:nth-child(2n + 1) {padding: 0; margin: 0; clear: both;}
	.ft_txt span:nth-child(2n + 1):before {display: none;}
	.ft_txt .copy {clear: both;}
	.m_quick {display: block;}

}


/* mobile */
@media screen and (max-width:480px) {
	html, body {font-size: 14px;}
	.inner {width: 100%; padding: 0 15px; margin: 0 auto;} 

	#wrapper {padding: 50px 0 0 0;}
	#header {width: 100%; height: 50px; bottom: auto;}
	.logo {width: 160px; height: 50px; margin: 0 auto;}
	.logo a {background-color: transparent;}
	.logo a svg {width: 120px; height: 25px;}
	.menubar {display: block; top: 16px; left: 15px;}
	
	.gnb_wrap {visibility: hidden; opacity: 0; position: absolute; left: -100%; width: 100%; height: 100vh; background-color: #2e303a; z-index: 1; transition: all 0.3s;}
	.gnb_wrap:before {display: none;}
	/*.gnb_wrap:before {display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); content: ''; z-index: -1;}*/
	.gnb_wrap.open {visibility: visible; opacity: 1; left: 0;}

	.gnb {padding: 0; border-top: 1px solid rgba(255,255,255,0.1);}
	.gnb .depth1 > a {padding: 0 0 0 15px; background-position: 90% center;}
	.gnb .depth1 .lnb {position: static; left: auto; width: 100%; transition: none;}

	.gnb .depth1.active > a {background-color: transparent; border-bottom: 1px solid #666;}


	.util {padding: 20px 15px;}
	.util_link01 li {width: calc((100% - 12px)/4); margin: 0 0 0 4px;}
	.util_link01 li:nth-child(2n + 1) {margin: 0 0 0 4px;}
	.util_link01 li:first-child {margin: 0;}
	.util_link01 li a {font-size: 11px;}
	.util .util_link02 {font-size: 0; text-align: center;}
	.util .util_link02 > li {float: none; display: inline-block;}

	.util .login li a {font-size: 13px;}

	.time_info {padding: 20px 15px;}
	.time_info strong {margin: 0 0 10px 0; font-size: 14px;}
	.time_info strong span {font-size: 11px;}
	.time_info a {margin: 15px 0 0 0; font-size: 12px;}
	.time_info a i {width: 20px; background-size: 20px;}
	.time_info ul li {font-size: 13px; line-height: 20px;}

	.quick_wrap {display: none;}

	.m_center {display: block;}

	.ft_links li {margin: 0 0 0 10px;}
	.ft_links li a {font-size: 12px;}
	.ft_txt:after {display: block; clear: both; *zoom: 1; content: '';}
	.ft_txt span {display: block; float: left; padding: 0 0 0 8px; margin: 0 0 0 8px; line-height: 1.6; font-size: 11px;}
	.ft_txt span:before {top: 4px; height: 10px;}
	.ft_txt span:nth-child(3n + 1) {padding: 0 0 0 8px; margin: 0 0 0 8px;}
	.ft_txt span:nth-child(3n + 1):before {display: block;}
	
	.ft_txt span:nth-child(2n + 1) {padding: 0; margin: 0; clear: both;}
	.ft_txt span:nth-child(2n + 1):before {display: none;}
	.ft_txt .copy {margin: 5px 0 0 0; font-size: 11px; clear: both;}

	#footer {padding: 30px 0 100px;}
	.m_quick {display: block;}
	
}