@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);


html,body {width:100%;height:100%;zoom:1;}
body {font-size:16px;font-weight:normal;white-space:normal;word-wrap:break-word;word-break:keep-all;}
* {
position:relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0,0,0,.2);
}
* {margin:0;padding:0;color: #666;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td {margin:0;padding:0;-webkit-text-size-adjust:none;}
img,fieldset {border:0;}
img {vertical-align: top;}
h1,h2,h3,h4,h5,b,th {font-size:100%;font-weight:300;}
ul,ol,li {list-style:none;}
hr {display:none;}
legend,caption {display:none;clear:both;}
table {width:100%;border-collapse:collapse;border:0;}
textarea,input, button {/* outline-color:-moz-use-text-color;outline-style:none;outline-width:medium; */-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
textarea {resize:none;}
label {cursor:pointer;}
label,textarea,input,select,button {vertical-align:middle;}
pre {overflow-x:scroll;}
button {overflow:visible;cursor:pointer;background:none;border:0;}
button[disabled="disabled"] {cursor:default;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;}

/* a link setting */
a, a:link {text-decoration:none;color:inherit;}
a,button,select,input {/* outline-color:-moz-use-text-color;outline-style:none;outline-width:medium; */font-family:inherit;}



.eng {font-family: 'Noto sans'}
.jpn {font-family: "Microsoft Yahei", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Meiryo, "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック"; line-height: 1.5;}
.chn {font-family: "Microsoft Yahei", Helvetica, Arial, "微软雅黑", STXihei, "华文细黑"; line-height: 1.5;}

.mb-show{
    display: none !important;
}

.mb-hide {
    display: block !important;
}

/* 공통 */

.clearfix:after {content:'';display:block;clear:both;}
.mobileOn {display: none;}

.bgCon {background-color: #f4f4f4;}
/* .txtColor01 {color: #97bdc0;} */
.name {font-style: italic; font-family: 'Nanum Myeongjo'; color: #1b30afcc;}
.interval {margin: 0 auto; padding: 0 0 140px; max-width: 1200px;}
.titWrap {padding-top: 140px; text-align: center;}
.img,
.desc,
.desc .tit {display: block;}
.titWrap * {display: block;}
.titWrap .titTop {margin-bottom: 25px;}
.titWrap .titBtm {margin-bottom: 95px; font-size: 40px; font-weight: 600; color: #333; letter-spacing: -1px;}

@media all and (max-width: 1250px) {
	.interval {margin: 0 40px; max-width: none; width: auto;}
}
@media all and (max-width: 767px) {
	.mobileOn {display: block;}
	.mobileOff {display: none;}
	.titWrap {padding-top: 3.5rem;}
	.name {font-size: 1.1rem;}
	.interval {padding: 0 0 3.5rem; margin: 0 2rem;}
	.titWrap .titTop {margin-bottom: 1.25rem;}
	.titWrap .titBtm {margin-bottom: 4.75rem; font-size: 2rem;}

    .mb-show{
        display: block !important;
    }
    
    .mb-hide {
        display: none !important;
    }
}

/* header */
#header.fix {position: fixed; left: 0; right: 0; top: 0; z-index: 500;}
#header .headWrap {height: 130px; margin: 0 auto; max-width: 1200px;}
.headWrap > * {float: left; height: 100%;}
.headWrap .moNavBtn {display: none;}
.headWrap .headLogo {background-color: #1b30af; z-index: 5;}
.headLogo .logo {display: block; text-align: center;}
.headLogo .logo img {width: 100%; padding: 29px 25px;}
.headLogo .logo .moLogo {display: none;}
.headWrap ul[class *="List"] {height: 100%;}
.headWrap ul[class *="List"] li {float: left; height: 100%;}
.headWrap ul[class *="List"] a,
.headWrap ul[class *="List"] button {display: block; width: 100%; letter-spacing: -1px;}
.headWrap ul[class *="List"] button {height: 100%; text-align: left; transition: background-color 300ms ease;}
.headWrap ul[class *="List"] button:hover {background-color: #fff;}
.headWrap ul[class *="List"] span {display: inline-block; font-size: 18px; vertical-align: middle; color: #333;}
.headWrap .langNav {padding: 40px 0 0 40px;}
.headWrap .langNav .langList li {margin: 0 10px 0 0;}
.headWrap .langNav .langList .kor a {background: url(../lang_img/icon_kor.gif) no-repeat;background-size: 100%;}
.headWrap .langNav .langList .jpn a {background: url(../lang_img/icon_jpn.gif) no-repeat;background-size: 100%;}
.headWrap .langNav .langList .chn a {background: url(../lang_img/icon_chn.gif) no-repeat;background-size: 100%;}
.headWrap .langNav .langList .eng a {background: url(../lang_img/icon_usa.gif) no-repeat;background-size: 100%;}
.headWrap .langNav .langList a {width: 32px; height: 23px; padding: 0; font: 0/0 a; z-index: 4;}
.headWrap .langNav .langList span {font: 0/0 a;}
.headWrap .sectionNav {position: absolute; right: 0; bottom: 0; width: 100%; padding-left: 540px;}
.headWrap .sectionList {border-right: 1px solid #e3e3e3;}
.headWrap .sectionList li {width: 25%; border-left: 1px solid #e3e3e3}
.headWrap .sectionList button {padding: 0 20px;}

@media all and (max-width: 1250px) {
	#header .headWrap {width: auto; margin: 0 20px; max-width: none;}
}
@media all and (max-width: 1023px) {
	#header .headWrap {height: auto; margin: 0;}
	.headWrap > * {float: none; height: auto;}
	.headWrap .moNavBtn {display: block; float: left; width: 50%; padding: 40px 25px; text-align: right;}
	.headWrap .moBtn {position: relative; width: 50px; height: 46px;} 
	.headWrap .moBtn .line {display: block; position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: 6px; background-color: #484848; transform: translateY(-50%); transition: top 300ms ease, opacity 300ms ease, transform 300ms ease;}
	.headWrap .moBtn .line:first-child {top: 0; transform: translateY(0);}
	.headWrap .moBtn .line:last-child {top: auto; bottom: 0; transform: translateY(0);}
	
	.headWrap.moAct .moBtn .line {opacity: 0; top: 50%}
	.headWrap.moAct .moBtn .line:first-child {opacity: 1; transform: rotate(-45deg);}
	.headWrap.moAct .moBtn .line:last-child {opacity: 1; transform: rotate(45deg);}
	.headWrap .headLogo {float: left; width: 50%;}
	.headWrap .langNav {width: 100%; padding: 25px 0; clear: both; background-color: #2f373e;}
	.headWrap .langNav .langList li {width: 33.33%;margin: 0;}
	.headWrap .langNav .langList li a {margin: 0 auto; width: 60px; height: 42px;}
	.headWrap ul[class *="List"] {height: auto;}
	.headWrap ul[class *="List"] li {height: auto;}
	.headWrap ul[class *="List"] button {height: auto; text-align: center;}
	.headWrap ul[class *="List"] span {font-size: 30px; color: #999;}
	.headWrap .sectionNav {display: none; position: absolute; left: 0; right: 0; top: 100%; padding-left: 0; z-index: 510;}
	.headWrap .sectionList {border-right: none; background-color: #e3e3e3;}
	.headWrap.moAct .sectionNav {display: block;}
	.headWrap .sectionList li {width: 100%; border-left: none; border-bottom: 1px solid #cbcbcb;}
	.headWrap .sectionList button {padding: 20px;}
}

@media all and (max-width: 767px) {
	.headWrap .headLogo {height: 6.5rem;}
	.headLogo .logo {height: 100%;text-align: center;}
	.headLogo .logo img {width: 14.5rem; padding: 0; vertical-align: middle;}
	.headLogo .logo:after {content:"";display:inline-block;height:100%;vertical-align: middle;}
	.headLogo .logo .moLogo {display: inline;}
	.headLogo .logo .pcLogo {display: none;}
	.headWrap .moNavBtn {padding: 2rem 1.25rem;}
	.headWrap .moBtn {width: 2.5rem; height: 2.3rem;}
	.headWrap .moBtn .line {height: 0.3rem;}
	.headWrap .langNav {padding: 1.25rem 0;}
	.headWrap ul[class *="List"] span {font-size: 1.5rem;}
	.headWrap .sectionList button {padding: 1rem;}
}

/* container */

/* mainVisual */
.mainVisual {height: 650px; background: url(../lang_img/bg_mainvisual_pc.jpg) no-repeat 50% 50%; background-size: cover;} 
.mainVisual .interval {position: relative; height: 100%;}
.mainVisual .visualTit {position: absolute; left: 0; right: 0; top: 50%; font-family: 'Nanum Myeongjo'; text-align: center; transform: translateY(-50%);}
.mainVisual .visualTit span {display: block; letter-spacing: -2px; font-size: 50px; color: #fff;}
.mainVisual .visualTit .titBtm {margin-top: 25px; font-size: 54px;}


@media all and (max-width: 767px) {
	.mainVisual {height: 32.5rem; background: url(../lang_img/bg_mainvisual_mo.jpg) no-repeat 50% 50%; background-size: cover;}
	.mainVisual .visualTit span {font-size: 2.5rem;}
	.mainVisual .visualTit .titBtm {margin-top: 1.75rem; font-size: 2.7rem;}
}

/* mainGreet */
.mainGreet .titWrap {padding: 150px 0 0;}
.mainGreet .interval {padding: 0 0 120px;}
.mainGreet .titWrap * {display: block; margin: 0 auto; text-align: center;}
.mainGreet .titWrap .name {margin: 35px 0;}
.mainGreet .desc {text-align: center; letter-spacing: -1px; font-size: 18px;}
.mainGreet .descTop {position: relative; padding-bottom: 110px; margin-bottom: 35px; font-size: 30px; color: #46696b;}
.mainGreet .descTop:after {content: ''; display: block; position: absolute; left: 50%; bottom: 0; width: 1px; height: 80px; background-color: #1b30af;}
.mainGreet .descBtm {margin: 0 40px; line-height: 1.5;}

@media all and (max-width: 720px) {
	.mainGreet .titWrap {padding: 4rem 0 0;}
	.mainGreet .interval {padding: 0 0 7rem;}
	.mainGreet .descTop {font-size: 1.5rem;}
	.mainGreet .descBtm {margin: 0 2rem; font-size: 1.4rem;}
}

/* mainIntro */
.mainIntro .introList {margin: -20px;}
.mainIntro .introList > li {float: left; width: 50%; padding: 19px;}
.mainIntro .introList img {width: 100%;}
.mainIntro .listWrap {position: relative;}
.mainIntro .desc {position: relative; right: 0; bottom: 60px; margin-left: 70px; padding: 45px 80px 45px 40px; background-color: #fff; letter-spacing: -1px;}
.mainIntro .desc > * {display: block; margin-top: 25px;}
.mainIntro .desc .tit {margin-top: 0; font-size: 28px; font-weight: 600; letter-spacing: -2px; color: #1b30af;}
.mainIntro .desc .subTit {color: #333a3b; font-size: 20px; font-weight: 500; letter-spacing: -2px;}
.mainIntro .list span {display: inline-block; position: relative; padding-left: 15px;}
.mainIntro .list span:before {content: ''; display: block; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background-color: #86b1b4;}

@media all and (max-width: 1250px) {

}

@media all and (max-width: 767px) {
	.mainIntro .introList {margin: 0;}
	.mainIntro .introList > li {float: none; width: 100%; padding: 0;}
	.mainIntro .desc {padding: 3rem; margin-left: 4rem;}
	.mainIntro .desc > * {margin-top: 1.5rem; font-size: 1.3rem;}
	.mainIntro .desc .tit {font-size: 2rem;}
	.mainIntro .desc .subTit {font-size: 1.4rem;}
	.mainIntro .list span {padding-left: 0.75rem;}
	.mainIntro .list span:before {width: 0.4rem; height: 0.4rem; top: 8px; }
}

/* mainTour */
.mainTour .interval {padding: 0;}
.mainTour .tabWrap {width: 960px; margin: 0 auto;}
.mainTour .tabMenu {margin-bottom: 30px; border-left: 1px solid #ccc;}
.mainTour .tabMenu li {float: left; width: 12.5%; border: 1px solid #ccc; border-left: none; background-color: #e1e1e1;}
.mainTour .tabMenu li.active {background-color: #1b30af;}
.mainTour .tabMenu li.active span {color: #fff;}
.mainTour .tabMenu button {display: inline-block; width: 100%; padding: 15px 0;}
.mainTour .tabMenu span {font-size: 18px; text-align: center; vertical-align: center; color: #333;}
.mainTour .tabCont {display: none;}
.mainTour .tabCont.active {display: block;}
.swiper-wrapper {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}
.swiper-slide {flex-shrink:0;}
.slideNav span {position: absolute; bottom: 0; width: 70px; height: 70px; font-size: 0; background-color: #554e4d; cursor: pointer;}
.slideNav span:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.slideNav span.slidePrev {left: 0;}
.slideNav span.slidePrev:before {background-image: url(../lang_img/btn_prev.png)}
.slideNav span.slideNext {right: 0;}
.slideNav span.slideNext:before {background-image: url(../lang_img/btn_next.png)}
.mainTour .floorSlide .slide {overflow: hidden;}
.mainTour .floorSlide li {position: relative;}
.mainTour .floorSlide .txt {position: absolute; left: 0; right: 0; bottom: 0; height: 70px; padding: 20px 0; text-align: center; line-height: 1; background-color: rgba(0,0,0,0.8);}
.floorSlide .txt span {color: #fff; font-size: 20px;}
.floorSlide li img {width: 100%;}

@media all and (max-width: 1023px) {
	.mainTour .tabWrap {width: auto; margin: 0 auto;}
}
@media all and (max-width: 767px) {
	.mainTour .tabMenu {margin-bottom: 3rem;}
	.mainTour .tabMenu button {padding: 0.75rem 0;}
	.mainTour .tabMenu span {font-size: 1.3rem;}
	.floorSlide .txt span {font-size: 1.4rem;}
	.mainTour .floorSlide .txt {height: 3.5rem; padding: 1rem 0;}
	.slideNav span {width: 3.5rem; height: 3.5rem;}
	.slideNav span:before {position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; transform: translate(-50%, -50%); background-size: contain;}
}

/* mainAccess */
.mainAccess .map {position: relative; width: 100%; height: 500px;}
.mainAccess .map iframe {width: 100%; height: 100%;}
.mainAccess .map .interval {width: 100%; position: absolute; left: 0; right: 0; top:0; bottom: 0; padding: 0;}
.mainAccess .accessWrap {float: right; width: 450px; height: 100%; padding: 65px 70px; background-color: #1b30af; letter-spacing: -1px;}
.mainAccess .accessWrap span {color: #fff;}
.mainAccess .accessWrap .tit {display: block; position: relative; padding: 15px 0; font-size: 28px;}
.mainAccess .accessWrap .tit:before {content: ''; display: block; position: absolute; left:0; top:0; width:40px; height: 1px; background-color: #fff;}
.mainAccess .timeTable {margin: 0 0 15px;}
.mainAccess .timeTable th {padding-right: 10px; font-size: 20px; color: #d2fafd; text-align: left; line-height: 1.5;}
.jpn .timeTable th,
.chn .timeTable th {letter-spacing: 5px;}
.jpn .timeTable .txtSpacing {letter-spacing: 30px;}
.chn .timeTable .txtSpacing {letter-spacing: 25px;}
.mainAccess  .timeTable td {position: relative; padding-left: 20px; font-size: 20px; color: #fff; text-align: left;}
.mainAccess  .timeTable td:before {content: ''; display: block; position: absolute; left: 0; top: 50%; width: 1px; height: 10px; background-color: #fff; transform: translateY(-50%)}
.mainAccess .emergencyRoom {padding: 5px 30px; margin-bottom: 30px; font-size: 20px; text-align: center; background-color: #1b30af; border: 1px solid #ffffff42;}
.mainAccess .call {font-size: 35px; color: #fff;}
.mainAccess .interval.more {padding: 100px;}
.mainAccess .tranasportList {letter-spacing: -1px;}
.mainAccess .tranasportList > li {padding: 40px 0; border-bottom: 1px solid #cbdbdc;}
.mainAccess .tranasportList > li:first-child {padding-top: 0;}
.mainAccess .tranasportList .bigTit {margin-bottom: 25px; font-size: 28px; font-weight: 500; color: #333;}
.mainAccess .tranasportList .smallTit {display: inline-block; margin-bottom: 15px; font-size: 20px; font-weight: 400; color: #333;}
.tranasportList .list {margin-bottom: 50px;}
.tranasportList .list:last-child {margin-bottom: 0;}
.tranasportList .list li {font-size: 18px; font-weight: 300; color: #333;}
.tranasportList .list li + li {margin-top: 15px;}
.tranasportList .list span[class*="line"] {display: inline-block; padding: 2px 5px; margin-right: 10px; color: #fff; text-align: center;}
.tranasportList .list b {font-weight: 400; color: #333;}
.tranasportList .list .walk {display: inline-block; margin-left: 10px; padding: 2px 15px; text-align: center; background-color: #f8f8f8;}
.tranasportList .list .lineG {width: 65px; background-color: #0b9726;}
.tranasportList .list .lineR {width: 65px; background-color: #df1616;}
.tranasportList .list.airport .lineA {width: 100px; background-color: #038fa0;}
.tranasportList .list.airport .lineP {width: 100px; background-color: #a95094;}
.tranasportList .list.airport li {position: relative; padding-bottom: 47px;}
.tranasportList .list.airport li:after {content: ''; position: absolute; left: 45px; bottom: 2px; display: block; width: 7px; height: 37px; background: url(../lang_img/icon_arrow.png) no-repeat 50% 50%;}
.tranasportList .list.airport li:last-child {position: static; padding-bottom: 0;}
.tranasportList .list.airport li:last-child:after {display: none;}
@media all and (max-width: 1250px) {
	.mainAccess .map .interval {width: auto;}
}
@media all and (max-width: 767px) {
	.mainAccess .map {height: auto; background-color: #4ea1a7;}
	.mainAccess .map iframe {height: 25rem;}
	.mainAccess .map .interval {position: static; margin: 0;}
	.mainAccess .accessWrap {float: none; position: relative; width: auto; height: auto; padding: 5.5rem 3rem 2.75rem;}
	.mainAccess .accessWrap .tit {padding: 0.75rem 0; font-size: 1.7rem; text-align: center;}
	.mainAccess .accessWrap .tit:before {left: 50%; transform: translateX(-50%)}
	.mainAccess .timeTable {width: 18rem; margin: 0 auto 2.5rem;}
	.mainAccess .timeTable table {}
	.mainAccess .timeTable th,
	.mainAccess .timeTable td {font-size: 1.3rem;}
	.mainAccess .timeTable th {padding-right: 2.5rem;}
	.mainAccess .timeTable td {padding-left: 2rem; text-align: right;}
	.jpn .timeTable th, .chn .timeTable th {letter-spacing: 2px;}
	.jpn .timeTable .txtSpacing,
	.chn .timeTable .txtSpacing {letter-spacing: 20px;}
	.mainAccess .emergencyRoom {position: absolute; left: 0; right: 0; top: -5px; margin-bottom: 0; font-size: 1.4rem; font-style: italic; text-align: center;}
	.mainAccess .call {font-size: 1.9rem; text-align: center;}
	.mainAccess .interval.more {padding: 5rem 0;}
	.mainAccess .tranasportList > li {padding: 2.75rem 0}
	.tranasportList .list {margin-bottom: 2.5rem;}
	.tranasportList .list li {font-size: 1.4rem;}
	.tranasportList .list li + li {margin-top: 0.5rem;}
	.mainAccess .tranasportList .smallTit {margin-bottom: 1.5rem; font-size: 1.5rem;}
	.mainAccess .tranasportList .bigTit {margin-bottom: 1.25rem; font-size: 1.7rem;}
	.tranasportList .list span[class*="line"] {padding: 0.25rem 0; margin-right: 1rem; font-size: 1.3rem;}
	.tranasportList .list .txt {display: inline-block;}
	.tranasportList .list .lineG,
	.tranasportList .list .lineR {width: 4.25rem;}
	.tranasportList .list.airport .lineA,
	.tranasportList .list.airport .lineP {width: 7.75rem;}
	.tranasportList .list .walk {margin-top: 0.5rem; margin-left: 7.5rem;}
	.tranasportList .list.airport li:after {left: 3.5rem;}
}

/* footer */

footer {
	background-color: #373737;
}

footer .inner {
	display: flex;
	/*justify-content: space-between;*/
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	max-width: 1960px;
	padding: 89px 30px;
	box-sizing: border-box;
	background: #323840;
}

footer .inner .foot-logo {
	width: 100%;
}

footer .inner .f-l .f-l-list {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}

footer .inner .f-l dl {
	width: 160px;
	margin: 30px 10px 0 0;
	font-weight: 400;
	color: #fff;
}

footer .inner .f-l dl:nth-of-type(2) {
	width: 190px;
}

footer .inner .f-l dl dt {
	opacity: 0.35;
}

footer .inner .f-l dl dd {
	font-weight: 500;
	line-height: 1.4;
}

footer .inner .f-r {
	display: flex;
}

footer .inner .f-r .f {
	display: flex;
}

footer .inner .f-r .f.time dl {
	color: #fff;
	font-size: 1.6rem;
}

footer .inner .f-r .f.time dl dt {
	font-weight: 500;
}

footer .inner .f-r .f.time dl dd {
	font-weight: 400;
}

footer .inner .f-r .f.tel,
footer .inner .f-r .f.call {
	display: inline-flex;
	/* margin-top: 50px; */
}

footer .inner .f-r .f.tel dl,
footer .inner .f-r .f.call dl {
	min-width: 150px;
	margin-right: 20px;
	color: #fff;
	letter-spacing: -0.8px;
}

footer .inner .f-r .f.tel dl dt,
footer .inner .f-r .f.call dl dt {
	font-size: 1.8rem;
}

footer .inner .f-r .f.tel dl dd,
footer .inner .f-r .f.call dl dd {
	font-size: 2.8rem;
	font-weight: 600;
}

footer .inner .f-r .f img {
	margin-right: 20px;
	align-self: flex-start;
}

footer .info {
	width: 100%;
	max-width: 1509px;
	margin: 20px auto 0;
}

footer .info p {
	color: #fff;
}

footer .info span {
	display: inline-block;
	margin-right: 20px;
	color: #fff;
	font-weight: 400;
	opacity: 0.35;
}

footer .f-sns {
	display: none;
}

#fnb {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 25px 0;
	background: #fff;
	border-top: 1px solid #dadada;
}

#fnb li a {
	color: #333;
    font-weight: 500;
    font-size: 18px;
	margin: 18px;
}

#fnb li:nth-child(7) a, #fnb li:nth-child(8) a {
	color: #333;
    font-weight: 500;
    font-size: 18px;
	margin: 5px;
}

#fnb li a:hover {
	opacity: 1;
}

.mobile-dt {
    display: none;
}

.pc-dt {
    display: block;
}

/* 메인 섹션 */
.value-section {
    padding: 30px 20px 150px;
    background: #fff;
}

.value-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 헤더 영역 */
.value-header {
    text-align: center;
    margin-bottom: 60px;
}

.hospital-name {
    color: #1B30AF;
    text-align: center;
    font-family: 'Nanum Myeongjo';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 36px;
    letter-spacing: -0.48px;
    font-style: italic;
}

.section-title {
    color: #000;
text-align: center;
font-family: "Noto Sans KR";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 90% */
letter-spacing: -1.2px;
margin-top: 20px;
}

/* Value 카드 영역 */
.value-cards {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.value-card {
    flex: 1;
    min-width: 275px;
    background: #fff;
    border: 1px solid #D9D9D9;
    padding: 30px 30px 25px;
    text-align: center;
}

/* 아이콘 원형 */
.icon-circle {
    width: 118px;
height: 118px;
    background: #F0EFEF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

/* 카드 제목 */
.card-title {
    color: #1B30AF;
text-align: center;
font-family: "Noto Sans KR";
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 150% */
letter-spacing: -0.72px;
text-transform: uppercase;
    margin-bottom: 15px;
}

/* 카드 설명 */
.card-description {
    color: #000;
text-align: center;
font-family: "Noto Sans KR";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 27px; /* 150% */
letter-spacing: -0.54px;
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
    .value-cards {
        gap: 20px;
    }
    
    .value-card {
        min-width: 220px;
        padding: 30px 15px;
    }
}

@media (max-width: 768px) {
    .value-section {
        padding: 20px 15px 60px;
    }
    
    .section-title {
        font-size: 36px;
    }
    
    .value-cards {
        flex-direction: column;
        gap: 20px;
    }
    
    .value-card {
        min-width: auto;
        padding: 30px 20px;
    }
    
    .icon-circle {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }
    
    .card-title {
        font-size: 16px;
    }
    
    .card-description {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 28px;
    }
    
    .hospital-name {
        font-size: 16px;
    }
    
    .value-card {
        padding: 25px 15px;
    }
}

.department-section {
    padding: 0px 20px 200px;
    background: #f5f5f5;
}

.department-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* 진료분야 그리드 */
.department-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 160px 25px;
}

/* 진료분야 카드 */
.department-card {
    background: #fff;
    position: relative;
}

/* 카드 이미지 */
.card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 카드 콘텐츠 */
.department-card .card-content {
    padding: 0px 37px;
    background: #fff;
    position: absolute;
    bottom: -80px;
    z-index: 10;
    right: 0;
    width: 338px;
    height: 170px;
    display: flex;
    justify-content: start;
    align-items: center;
}

.department-card .card-title {
    color: #1B30AF;
font-family: "Noto Sans KR";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 128.571% */
letter-spacing: -0.84px;
text-align: left;
text-transform: initial !important;
margin-bottom: 0 !important;
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
    .department-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 160px 25px;
    }
    
    .card-image {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .department-section {
        padding: 20px 15px 60px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .department-grid {
        grid-template-columns: 1fr;
        gap: 140px;
    }

    .department-card .card-content {
        padding: 0px 37px;
        background: #fff;
        position: absolute;
        bottom: -95px;
        z-index: 10;
        right: 0;
        width: 338px;
        height: 130px;
        justify-content: start;
        align-items: center;
    }
    
    .card-image {
        height: 200px;
    }
    
    .card-title {
        font-size: 15px;
    }
    
    .card-subtitle {
        font-size: 13px;
    }

    .department-card .card-title {
        color: #1B30AF;
        font-family: "Noto Sans KR";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px;
        letter-spacing: -0.84px;
        text-align: left;
        text-transform: initial !important;
        margin-bottom: 0 !important;
    }
}


/* 이미지 로딩 전 플레이스홀더 */
.card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.card-image img {
    position: relative;
    z-index: 1;
}

.browse span {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.9px;
    text-align: center;
    color: #333;
    display: block;
    margin-top: 20px;
}

.nav_browse {
    border: 1px solid #d9d9d9;
    display: flex;
    height: 50px;
    text-align: center;
    margin: 0 auto;
    max-width: 1200px;
    margin-top: 40px;
}

.nav_browse .floor {
    width: calc(100% / 8);
    cursor: pointer;
}

.nav_browse .floor.active {
    background: #1e32a4;
    color: #fff;
}

.nav_browse .floor.active span {
    height: 14px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.9px;
    text-align: center;
    color: #fff;
}

.nav_browse .floor:not(:last-child) {
    border-right: 1px solid #d9d9d9;
}

.nav_browse .floor span {
    line-height: 50px;
    margin-top: 0px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.9px;
    text-align: center;
    color: #333;
}

@media all and (max-width: 767px) {
	#footer .interval {padding: 2.75rem 0 4.5rem;}
	#footer .footLogo {position: static; text-align: center;}
	#footer .footLogo img {width: 14.5rem;}
	#footer .footInfo {padding-left: 0; margin-top: 1.75rem;}
	.footInfo p {text-align: center; font-size: 1.2rem;}
	.footInfo p span {font-size: 1.2rem;}
	.footInfo p span + span {margin-left: 0.75rem; padding-left: 0.75rem;}
	.footInfo p span + span:before {top: 0;}

    #fnb {
        display: inline-block;
        background: #f0f0f0;
        padding: 40px 50px;
        box-sizing: border-box;
        padding: 30px 0 0 0;
    }

    #fnb li {
        display: inline-block;
        float: left;
        width: 27%;
        text-align: center;
    }

    #fnb li:first-child, #fnb li:nth-child(4) {
        padding-left: 65px;
    }

    #fnb li:nth-child(4), #fnb li:nth-child(5), #fnb li:nth-child(6) {
        margin-bottom: 35px;
    }
    
    #fnb li a {
        color: #333;
        font-weight: 500;
        font-size: 24px;
        line-height: 55px;
        text-align: center;
        margin: 0 !important;
    }

    #fnb li img {
        display: none;
    }

    #fnb li:nth-child(7) {
        padding-left: 80px;
    }

    #fnb li:nth-child(8) {
        padding-right: 80px;
    }

    #fnb li:nth-child(7),  #fnb li:nth-child(8) {
        width: 50%;
        background-color: #fff;
        padding-top: 28px;
        padding-bottom: 28px;
        box-sizing: border-box;
    }

    #fnb li:nth-child(7) a, #fnb li:nth-child(8) a {
        color: #333;
        font-weight: 500;
        font-size: 22.5px;
        line-height: 40px;
        letter-spacing: -1.13px;
    }

    #fnb li:nth-child(7) img, #fnb li:nth-child(8) img {
        display: inline-block;
        width: 33px;
        margin-right: 14px;
    }
    
    footer .inner {
        height: 710px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        max-width: 1960px;
        padding: 118px 39px 0 49px;
        box-sizing: border-box;
        background: #323840;
    }

    footer .inner .f-r .f {
        display: block;
    }

    footer .inner .f-r .f.time dl:nth-child(2) {
        margin-bottom: 57px;
    }

    footer .inner .f-r .f.time dl:nth-child(2) img {
        width: 249px;
    }

    footer .inner .f-r .f.time dl:nth-child(3) {
        margin-bottom: 88px;
        margin-right: 0 !important;
    }

    footer .inner .f-r .f.time dl:nth-child(3) dt, footer .inner .f-r .f.time dl:nth-child(3) dd {
        font-size: 18px !important;
        line-height: 38px;
        letter-spacing: -1.3px;
        color: #b4b6b8;
    }

    footer .inner .f-r .f.time dl:nth-child(3) dd:last-child {
        font-weight: 300;
    }

    footer .inner .f-r .f.time dl dt:first-child {
        color: #b1c5d8;
    }

    .mobile-dt {
        display: block;
    }

    .pc-dt {
        display: none;
    }

    footer .inner .f-r .f img {
        width: 65px;
    }
}