@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

/* float clearfix */
.clearfix {*zoom:1;}
.clearfix:after {content:"";display:block;clear:both;}

.redtx {color: #d22020 !important;}

@media ( max-width: 767px ) {}

@media ( max-width: 575px ) {}


/* header */


/* foot */
#footer {width: 100%; padding: 70px 0 0; background: #ffffff;}
#footer .inner {width: 90%; margin: 0 auto; }
#footer .copy {border-top: 1px solid; padding: 2% 0 5%;}
#footer .copy li {}
#footer .copy .info1 {width:20%; float: left; font-size: 30px; font-weight: bold; text-transform: uppercase; /*margin: 0 10vw 0 0;*/}
#footer .copy .info1 span {font-size: 20px; font-weight: normal; color: #313131;}
#footer .copy .info2 {width: 80%; float: left; font-size: 14px; line-height: 220%; letter-spacing: 0;}
#footer .copy .info2 span {margin: 0 15px 0 0;}
#footer .copy .info3 {width: 80%; float: left; font-size: 14px; line-height: 220%; letter-spacing: 0; margin:10px 0 0 20%;}
#footer .copy .info3 span {margin: 0 15px 0 0;}
#footer .copy li:last-child {float: right; font-size: 13px; line-height: 180%;}
#footer .copy li:last-child a {display: inline-block; margin:0 10px;}
#footer .copy li:last-child .made {line-height: 200%; padding: 0 0 0 25px; border: 1px solid #5b5b5b; margin: 5px 10px 0;}
#footer .copy li:last-child .made span {display: inline-block; background: #5b5b5b; color: #fff; padding: 0 25px; margin: 0 0 0 25px;}

@media ( max-width: 1000px ) {
	#footer .copy {font-size: 15px; line-height: 30px; text-align: center; padding: 3% 0 5%;}
	#footer .copy li {text-align: center !important;}
	#footer .copy .info1 {float: none; text-align: center; padding: 0 0 1.5%; margin: 0;}
	#footer .copy .info1 span {display: block; margin: 10px 0 0;}
	#footer .copy .info2 {float: none; margin: 0 0 2%;}
	#footer .copy li:last-child {float: none;}
}

@media ( max-width: 767px ) {
	.m_br{display:none;}
	#footer .copy .info1 {width:100%;font-size: 20px;}
	#footer .copy .info1 span {font-size: 15px;}
	#footer .copy .info2 {width:100%;margin: 0 0 5%;}
	#footer .copy .info2 span {display: block; margin: 0;}
	#footer .copy .info3 {width:100%;margin: 0 0 5%;}
	#footer .copy .info3 span {display: block; margin: 0;}
	#footer .copy .info2 br {display: none;}
	#footer .copy li:last-child {font-size: 11px;}
}

#back-top {display: none; position: fixed; right: 40px; bottom: 50px; z-index: 999; cursor: pointer;}
#back-top .tel {display: none; width: 60px; height: 60px; background:url('../img/common/fbt_tel.png') no-repeat center center; background-size: cover; margin: 0 0 1vh; opacity: 0.7;}
#back-top .kakao {display: block; width: 60px; height: 60px; background:url('../img/common/fbt_kakao.png') no-repeat center center; background-size: cover; margin: 0 0 1vh; opacity: 0.7;}
#back-top .insta {display: block; width: 60px; height: 60px; background:url('../img/common/fbt_insta.png') no-repeat center center; background-size: cover; margin: 0 0 1vh; opacity: 0.7;}
#back-top .blog {display: block; width: 60px; height: 60px; background:url('../img/common/fbt_naver.png') no-repeat center center; background-size: cover; margin: 0 0 1vh; opacity: 0.7;}

#back-top .t_bt {display: block; width: 60px; height: 60px; background:url('../img/common/fbt_top.png') no-repeat center center; background-size: cover; opacity: 0.8;}
#back-top .t_bt:hover, #back-top .kakao:hover, #back-top .insta:hover, #back-top .blog:hover {opacity: 1;}

@media ( max-width: 1000px ){
    #back-top {right: 30px; bottom: 30px;}
}

@media ( max-width: 767px ){
    #back-top {right: 5%; bottom: 5%;}
    #back-top .tel, #back-top .kakao, #back-top .insta, #back-top .blog {display: block; width: 45px; height: 45px;}
    #back-top .t_bt {width: 45px; height: 45px;}
}



/* mvisual */
#msliders {position: relative; width: 100%; height: 100%;}
#msliders.mvdo {}

#vwrapper {position: relative; top: 0; left: 0; z-index: -999; width: 100%; height: 100%; overflow: hidden; pointer-events: none;}
#vwrapper iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw;
    min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-height: 100vh;
    transform: translate(-50%, -50%);
}

@media ( max-width: 767px ) {
	#vwrapper iframe {
		position: static; top: 0; left: 0; 
		min-width: auto; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
		height: inherit; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
		min-height: unset;
		transform: none;
	}
}

.vp_bt_box {position: absolute; top: 58%; left: 50%; z-index: 999; min-width: 60px; text-align: center; margin: 0 0 0 -30px;}
.vp_bt_stop,
.vp_bt_play {width: 60px; height: 60px; cursor: pointer;}
.vp_bt_play {display: none;}
.vp_bt_box div img {display: block;}

.scroll {display: block; position: absolute; left: 0; z-index: 20; width: 100%; text-align: center; padding: 0 8px; margin: 0; opacity: 0.7; transform: translate(0,-50%); pointer-events: none; animation: scrollani 2s infinite;}
.scroll.scroll_main {bottom: 15%;}
.scroll.scroll_subtimg {bottom: 3.5%;}
.scroll.scroll_sp {bottom: 15%;}
.scroll span {display: block; font-size: 15px; letter-spacing: 0; color: #fff; margin: 0 0 9px;}
.scroll .scroll_visual {display: block; width: 100%; height: 17px; background: url('../img/common/scroll.png') center top no-repeat;}

@keyframes scrollani {
    0% {padding-bottom: 0px;}
	50% {padding-bottom: 10px;}
    100% {padding-bottom: 0px;}
}

#mtit {position: absolute; top: 45%; z-index: 5; width: 100%; text-align: center; color: #fff; opacity: 0.5;}
#mtit h1 {font-size: 55px; font-weight: bolder; line-height: 100%; text-transform: uppercase; margin: 0 0 10px;}
#mtit h2 {font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.18em;}

@media ( max-width: 767px ) {
    .vp_bt_box {top: 55%; min-width: 40px; margin: 0 0 0 -20px;}
    .vp_bt_stop,
	.vp_bt_play {width: 40px; height: 40px; cursor: pointer;}
    .vp_bt_stop img,
	.vp_bt_play img {width: 40px; height: 40px; cursor: pointer;}
    .scroll {opacity: 1;}
    .scroll.scroll_main {bottom: 10%;}
    .scroll.scroll_sp {display: none;}
    .scroll span {display: none;}
    #mtit {}
    #mtit h1 {font-size: 25px;}
    #mtit h2 {font-size: 7px; letter-spacing: 0.05em;}
}


/* mprologue */
#mpro {position: relative; width: 100%; height: 100vh; background: url("../img/main/pro.jpg") center no-repeat; background-size: cover; z-index:-1;}
#mpro .tit {position: absolute; bottom: 15%; width: 100%; text-align: center;}
#mpro .tit h1 {}
#mpro .tit h1 p {font-family: 'Nanum Square' !important; font-size: 48px; font-weight: bold;color:#fff;margin:1% 0 0 0;}
#mpro .tit h2 {font-size: 28px; font-family: 'Nanum Myeongjo', serif; font-weight: lighter; margin:1.5% 0; letter-spacing: 0.1em; color:#fff;}
#mpro .tit h1 .line {display: inline-block; width: 300px; height: 1px; background: rgba(255, 255, 255, 0.6);}
#mpro .tit h3 {font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 5vh; color:#fff;}
#mpro2 {margin-top:-5%; z-index:120;}
#mpro2 .imgbox {width: 96%; margin: 0 0 0 16%;}
#mpro2 .imgbox .img {}
#mpro2 .imgbox .img .img01 {width: 40%; float: left; margin: 0 1% 3vh;}
#mpro2 .imgbox .img .img02 {width: 26%; float: left; margin: 0 1% 3vh;}
#mpro2 .imgbox .img > img {width: 100%;}

@media ( max-width: 1000px ) {
	#mpro {height: 70vh;}
	#mpro .tit h1 .line {width: 300px;}
	#mpro .tit h1 p {font-family: 'Nanum Square' !important; font-size: 40px; margin-top:2%;}
	#mpro .tit h2 {font-size: 22px; padding-top:1.5%;}
	#mpro2 {margin-top:-10%; z-index:120;}
	#mpro2 .imgbox {width: 100%; margin: 0 1%; padding:0;}
	#mpro2 .imgbox .img .img01 {width: 57%;}
	#mpro2 .imgbox .img .img02 {width: 37%;}
}
@media ( max-width: 767px ) {
	#mpro {height: 50vh;}
	#mpro .tit h1 .line {width: 200px;}
	#mpro .tit h1 p {font-family: 'Nanum Square' !important; font-size: 30px; margin-top:2%;}
	#mpro .tit h2 {font-size: 18px; padding-top:1.5%;}
	#mpro .tit h3 {font-size: 11px;}
}
@media ( max-width: 414px ) {
	#mpro {height: 40vh;}
}
/* mroom preview */
#mrv {position: relative; width: 100%; margin: 15vh 0;}
#mrv > div {}
#mrv > .imgbox {position: relative; width: 73%; float: left; left:13.5%;}
#mrv > .imgbox span {display: inline-block; font-size: 22px; color: #000; position: relative; float: right; text-align: right; font-weight: normal; line-height: 165%; right:42%; padding:2% 0;}
.mrvbg {position: relative; width: 100%; height: 90vh; margin-top:-24.5%; background: rgba(40, 40, 40, 1); background-size: cover; z-index:-1;}

#mrv #textbox {position: relative; left: 7.8%; z-index: 10; padding: 0 4vw 2.5vw 4vw; transition: all 0.3s;}
#mrv #textbox .rtxt {color: #000; padding-right:17%; text-align: center;}
#mrv #textbox .rtxt h1 {font-size: 48px; font-family: 'Nanum Square' !important; font-weight: bold; letter-spacing: 0.1em; margin: 1.8vh 0 1vh;}
#mrv #textbox .rtxt h1 span {font-weight: lighter;}
#mrv #textbox .rtxt h2 {font-family: 'Nanum Myeongjo', serif; font-size: 28px; font-weight: normal; line-height: 135%; letter-spacing: 0.1em;margin: 2vh 0 2vh;}
#mrv #textbox .rtxt h3 {font-size: 18px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 5vh;}
#mrv #textbox .rtxt .line {display: inline-block; width: 450px; height: 1px; background: rgba(0, 0, 0, 0.6);}

@media ( max-width: 1380px ) {
	.mrvbg {display:none;}
	#mrv > .imgbox span {color: #000;}
	#mrv > .imgbox span {right:38%;}
	}
@media ( max-width: 1000px ) {
    #mrv > .imgbox {width: 86%;}
	#mrv > .imgbox {left:7%;}
	#mrv > .imgbox span {right:36%;}
}

@media ( max-width: 768px ) {
	#mrv {margin: 10vh 0;}
	#mrv > .imgbox {width: 95%;}
	#mrv > .imgbox {left:2.5%;}
    #mrv > .imgbox span {font-size: 18px;}
	#mrv #textbox .rtxt h1 {font-size: 40px;}
	#mrv #textbox .rtxt h2 { font-size: 22px; }
	#mrv #textbox .rtxt h3 {font-size: 14px; }
	#mrv #textbox .rtxt .line { width: 380px;}
}
@media ( max-width: 414px ) {
	#mrv #textbox .rtxt h1 {font-size: 30px;}
	#mrv #textbox .rtxt h2 { font-size: 18px; }
	#mrv #textbox .rtxt h3 {font-size: 11px; }
	#mrv #textbox .rtxt .line { width: 300px;}
	#mrv > .imgbox span {right:29%;}
}
@media ( max-width: 320px ) {
	#mrv #textbox .rtxt h1 {font-size: 27px;}
	#mrv #textbox .rtxt h2 { font-size: 16px; }
	#mrv #textbox .rtxt h3 {font-size: 11px; }
	#mrv #textbox .rtxt .line { width: 250px;}
	#mrv > .imgbox span {font-size: 16px; right:25%;}
}

/* mspecial */
#msp {margin: 5% 0 15vh;}
#msp .tit {position: relative; text-align: center; margin: 0 0 8vh;}
#msp .tit:before {content: ''; display: block; position: absolute; top: 30%; z-index: -1; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.6);}
#msp .tit h1 {display: inline-block; width: 5.5vw; font-size: 0.95vw; font-weight: bold; line-height: 5.5vw; text-transform: uppercase; letter-spacing: 0.1em; background: #2b282f; color: #fff; border-radius: 100%; margin: 0 0 5vh;}
#msp .tit h2 {font-family: 'Nanum Myeongjo', serif; font-size: 1.6vw; font-weight: normal; letter-spacing: 0.1em;}
#msp .spbox {width: 100%;}
#msp .spbox a {display: block; position: relative; width: 25%; float: left; transition: all 0.3s;}
#msp .spbox a.spblank {pointer-events: none;}
#msp .spbox a .txt {position: absolute; top: 19%; width: 100%; text-align: center;}
#msp .spbox a .txt h1 {font-size: 1.6vw; font-weight: bold; text-transform: uppercase; letter-spacing: 0.025em; margin: 0 0 2vh;}
#msp .spbox a .txt .line {display: inline-block; width: 3.15vw; height: 1px; background: #000; margin: 0 0 1.5vh;}
#msp .spbox a .txt h2 {font-size: 0.95vw; font-weight: normal; letter-spacing: 0.025em;}
#msp .spbox a img {display: block; width: 100%;}

@media ( max-width: 1000px ) {
	#msp .tit h1 {width: 8.25vw; font-size: 1.45vw; line-height: 8.25vw;}
	#msp .tit h2 {font-size: 2.4vw;}
	#msp .spbox a {width: 50%;}
	#msp .spbox a .txt h1 {font-size: 3.2vw;}
	#msp .spbox a .txt .line {width: 6.3vw;}
	#msp .spbox a .txt h2 {font-size: 1.9vw;}
}

@media ( max-width: 767px ) {
	#msp .tit h1 {width: 15vw; font-size: 1.9vw; line-height: 15vw;}
	#msp .tit h2 {font-size: 3.2vw;}
	#msp .spbox a .txt h1 {font-size: 4.5vw;}
	#msp .spbox a .txt .line {width: 9.45vw;}
	#msp .spbox a .txt h2 {font-size: 2.5vw;}
}

.img_100 {width:100%; height:auto !important; vertical-align:top;}

/* mfreser */
#mreser {background: url("../img/main/freser_bg.jpg") center top no-repeat; background-size: cover; color: #fff; text-align: center; padding: 24vh 0 21vh; transition: all 0.3s;}
#mreser .txt {margin: 0 auto; }
#mreser .txt h1 {font-family: 'Nanum Square' !important; font-family: 'Nanum Myeongjo', serif; font-size: 30px; font-weight: normal; line-height: 160%; letter-spacing: 0.05em; margin: 0 0 2.5vh; transition: all 0.3s;}
#mreser .txt h1 span {font-size: 48px; font-weight: bold;}
#mreser .txt h2 {font-size: 14px; font-weight: bold; line-height: 160%; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 3vh; transition: all 0.3s;}
#mreser .txt a {display: inline-block; font-size: 14px; line-height: 30px; text-transform: uppercase; font-weight: bold; letter-spacing: 0.15em; background: #000; color: #fff; padding: 0 35px; transition: all 0.3s;}

@media screen and ( max-width: 1000px ){
    #mreser {padding: 19vh 0 16vh;}
    #mreser .txt {}
    #mreser .txt h1{font-size: 24px;}
}

@media ( max-width: 767px ){
    #mreser {padding: 10vh 0;}
    #mreser .txt {width: 90%;}
    #mreser .txt h1 {font-size: 15px;}
	#mreser .txt h1 span {font-size: 27px;}
    #mreser .txt h2 {font-size: 11px;}
    #mreser .txt a {font-size: 11px;}
}


/* prologue */
#abtit {position: absolute; top: 47%; z-index: 5; width: 100%; text-align: center; color: #fff; text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); pointer-events: none;}
#abtit h1 {font-size: 30px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.025em; margin: 0 0 2vh;}
#abtit .line {display: inline-block; width: 30%; height: 1px; background: rgba(255, 255, 255, 0.6); margin: 0 0 2vh;}
#abtit h2 {font-size: 18px; font-weight: normal; letter-spacing: 0.025em;}
#abcont {text-align: center; padding: 20vh 0 5vh;}
#abcont h1 {font-size: 30px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.025em; margin: 0 0 2vh;}
#abcont h3 {font-size: 15px;  font-weight: normal; line-height: 240%; letter-spacing: 0.025em;}
#abcont .line {display: inline-block; width: 45%; height: 1px; background: rgba(0, 0, 0, 0.6); margin: 0 0 2vh;}
#abcont h2 {font-size: 18px; font-weight: normal; line-height: 240%; letter-spacing: 0.025em;}

@media ( max-width: 1000px ) {
    #abtit {top: 45%;}
    #abtit h1 {font-size: 25px;}
    #abtit h2 {font-size: 15px;}
	#abcont h1 {font-size: 25px;}
	#abcont .line {width: 80%;}
	#abcont h2 {font-size: 13px;}
}

@media ( max-width: 767px ) {
    #abtit {top: 40%;}
    #abtit h1 {font-size: 18px;}
    #abtit h2 {font-size: 13px;}
	#abcont {width: 90%; padding: 10vh 0 0; margin: 0 auto;}
	#abcont h1 {font-size: 18px;}
	#abcont .line {width: 100%;}
	#abcont h2 {font-size: 12px;}
}


/* room pv */
#rooms {position: relative; width: 100%; height: 100%;}
#rooms .rstit {position: absolute; top: 22%; right: 10%; z-index: 10; text-align: center; color: #fff; pointer-events: none;}
#rooms .rstit h1 {font-size: 24px; font-weight: normal; letter-spacing: 0.025em;}
#rooms .rstit .line {display: inline-block; position: relative; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.6);}
#rooms .rstit h2 {font-size: 15px; font-weight: normal; line-height: 160%; text-transform: capitalize; letter-spacing: 0.05em;}
#rooms .rstit h2 p {font-size: 14px; font-weight: normal; letter-spacing: 0.025em; margin: 2vh 0 0;}
#rooms img {display: block; width: 100%;}

@media ( max-width: 1000px ) {
	#rooms {}
	#rooms .rstit {}
	#rooms .rstit h1 {font-size: 18px;}
	#rooms .rstit h2 {font-size: 13px;}
	#rooms img {margin: 0;}
}

@media ( max-width: 767px ) {
	#rooms {}
	#rooms .rstit {}
	#rooms .rstit h1 {font-size: 15px;}
	#rooms .rstit h2 {font-size: 11px;}
	#rooms .rsimg {height: 40vh;}
	#rooms img {margin: 0;}
}


/* room */
#rtit {position: absolute; top: 50%; z-index: 10; width: 100%; text-align: center; color: #000; pointer-events: none;}
#rtit h1 {width: 100%; font-size: 48px; font-weight: bold; line-height: 100%; text-transform: uppercase; letter-spacing: 0.025em;}
#rtit h1 span {display: inline-block; position: relative; font-weight: lighter; text-align: right; padding: 0 0.7vw 0 0; margin: 0 0.5vw 0 0;}
#rinfobox {width: 100%; padding: 10vh 12% 0; margin: 0 auto;}
#rinfobox .rname {margin: 0 0 10vh;}
#rinfobox .rname h1 {font-size: 48px; font-weight: bold; line-height: 100%; text-transform: uppercase; letter-spacing: 0.025em; margin: 0 0 2vh;}
#rinfobox .rname h1 span {display: inline-block; width: 21vw; font-weight: lighter; text-align: right; margin: 0 0.5vw 0 0;}
#rinfobox .rname h2 {font-size: 20px; font-weight: normal; letter-spacing: 0.025em; padding: 0 0 0 17.5vw;}
#rinfobox .imgbox1 {margin: 0 0 13vh;}
#rinfobox .imgbox1 img {width: 100%;}
#rinfobox .rinfo {width: 100%;}
#rinfobox .rinfo > div {float: left; margin: 0 0 13vh;}
#rinfobox .rinfo .img {width: 47%;}
#rinfobox .rinfo .img img {width: 100%;}
#rinfobox .rinfo .info {width: 53%; text-align: right; padding: 3vh 7vw 0;}
#rinfobox .rinfo .info h1 {font-size: 16px; font-weight: bold; line-height: 110%; text-transform: capitalize; text-align: left; letter-spacing: 0.025em; border-bottom: 1px solid #000; margin: 0 0 1vh;}
#rinfobox .rinfo .info h2 {font-size: 40px; font-weight: bold; text-transform: uppercase; text-align: left; letter-spacing: 0.025em; padding: 2vh 0 0; margin: 0 0 5vh;}
#rinfobox .rinfo .info div {font-size: 14px; font-weight: normal; line-height: 190%; text-align: left; letter-spacing: 0.05em; margin: 0 0 3vh;}
#rinfobox .rinfo .info div .red {color: #b60303;}
#rinfobox .rinfo .info a {display: inline-block; font-size: 14px; font-weight: normal; line-height: 245%; text-transform: uppercase; letter-spacing: 0.1em; background: #b60303; color: #fff; padding: 0 2vw;}
#rinfobox .imgbox2 {}
#rinfobox .imgbox2 img {width: 47%; vertical-align: bottom;}
#rinfobox .imgbox2 img:first-child {margin: 0 4vw 0 0;}
#rinfobox .imgbox2 img:last-child {}
.rprice {width: 100%; margin: 0 0 10vh;}

@media screen and ( max-width: 1000px ){
	#rtit h1 {font-size: 27px;}
	#rinfobox .rname h1 {font-size: 27px;}
	#rinfobox .rname h2 {font-size: 15px;}
	#rinfobox .rinfo > div {float: none; width: 100% !important;}
}

@media ( max-width: 767px ) {
	#rtit {top: 45%; min-width: 45%;}
	#rtit h1 {font-size: 18px;}
	#rinfobox {padding: 5vh 5% 0;}
	#rinfobox .rname {margin: 0 0 5vh;}
	#rinfobox .rname h1 {font-size: 18px;}
	#rinfobox .rname h2 {font-size: 13px;}
	#rinfobox .imgbox1 {margin: 0 0 5vh;}
	#rinfobox .rinfo {}
	#rinfobox .rinfo > div {margin: 0 0 5vh;}
	#rinfobox .rinfo .info {}
	#rinfobox .rinfo .info h1 {font-size: 13px;}
	#rinfobox .rinfo .info h2 {font-size: 24px;}
	#rinfobox .rinfo .info div {font-size: 11px;}
	#rinfobox .rinfo .info a {font-size: 11px; padding: 0 5vw;}
}


/* special */
#sptit {position: absolute; top: 45%; z-index: 5; width: 100%; text-align: center; color: #000;}
#sptit h1 {font-size: 30px; font-weight: bold; line-height: 100%; text-transform: uppercase; letter-spacing: 0.025em; margin: 0 0 3vh; pointer-events: none;}
#sptit .line {display: inline-block; width: 30%; height: 1px; background: rgba(0, 0, 0, 0.6); margin: 0 0 3vh; pointer-events: none;}
#sptit h2 {font-size: 18px; font-weight: normal; letter-spacing: 0.025em; margin: 0 0 3vh; pointer-events: none;}
#sptit .spbtn {display: inline-block; font-size:14px; font-weight: bold; letter-spacing: 0.025em; background: rgba(255, 255, 255, 0.6); color: #000; padding: 18px; border: 1px solid #fff; cursor:pointer;}
#spcont {position: relative; width: 60%; text-align: center; padding: 15vh 0; margin: 0 auto;}
#spcont:before {content: ''; position: absolute; top: 0; left: 50%; z-index: -1; width: 1px; height: 100%; background: #000; margin: 0 0 0 -0.5px;}
#spcont .txtbox {background: #fff; padding: 5vh 0;}
#spcont .txtbox h1 {font-size: 30px; font-weight: normal; etter-spacing: 0.025em; margin: 0 0 2vh;}
#spcont .txtbox h2 {font-size: 15px; font-weight: 300; line-height: 180%; letter-spacing: 0.025em;}
#spcont .txtbox a{font-size: 15px; padding:1% 2%; background:#e9ae26; margin-top:15px; font-weight:500;}
#spcont .txtbox a:hover {color:#245313;}
.spsp {padding-top: 100px;} /* msp top blank */

@media ( max-width: 1000px ) {
    #sptit {top: 45%;}
    #sptit h1 {font-size: 3.6vw;}
	#sptit .line {width: 15.7vw;}
    #sptit h2 {font-size: 2.1vw;}
	#spcont {width: 80%;}
	#spcont .txtbox h1 {font-size: 3.2vw;}
	#spcont .txtbox h2 {font-size: 1.8vw;}
}

@media ( max-width: 767px ) {
    #sptit {top: 25%;}
    #sptit h1 {font-size: 5.5vw; margin: 0 0 2vh;}
	#sptit .line {margin: 0 0 2vh;}
    #sptit h2 {font-size: 4vw; margin: 0 0 2vh;}
	#sptit .spbtn {padding: 10px 18px;}
	#spcont {width: 80%;}
	#spcont .txtbox h1 {font-size: 6.4vw;}
	#spcont .txtbox h2 {font-size: 3.6vw;}
	#spcont .txtbox a {font-size: 4vw; padding:2% 3.3%;}
	#spcont .txtbox h2 br {display:none;}
}

/* school */

#sccont {position: relative; width: 60%; text-align: center; padding: 15vh 0; margin: 0 auto;}
#sccont:before {content: ''; position: absolute; top: 0; left: 50%; z-index: -1; width: 1px; height: 100%; background: #000; margin: 0 0 0 -0.5px;}
#sccont .txtbox {background: #fff; padding: 5vh 0;}
#sccont .txtbox h1 {font-size: 30px; font-weight: normal; etter-spacing: 0.025em; margin: 0 0 2vh;}
#sccont .txtbox h2 {text-align: left; font-size: 17px; font-weight:500; line-height: 180%; letter-spacing: 0.025em;}
#sccont .txtbox h3 {text-align: left; font-size: 15px; font-weight: 300; line-height: 180%; letter-spacing: 0.025em;}
#sccont .txtbox a{font-size: 15px; padding:1% 2%; background:#e9ae26; margin-top:15px; font-weight:500;}
#sccont .txtbox a:hover {color:#245313;}
.resize1 {margin:0 25% 5% 25%;}
.resize {margin:0 15% 5% 15%;}
.resize .reimg {width:100%;margin-bottom:5%;}
.resize .reimg img{width:50%; float:left;}
.resize .reimg img:first-child {padding-right:5px;}
.resize .reimg img:last-child {padding-left:5px;}
@media ( max-width: 1000px ) {
	#sccont {width: 80%;}
	#sccont .txtbox h1 {font-size: 3.2vw;}
	#sccont .txtbox h2 {font-size: 1.8vw;}
}

@media ( max-width: 767px ) {
	#sccont {width: 80%;}
	#sccont .txtbox h1 {font-size: 6.4vw;}
	#sccont .txtbox h2 {font-size: 3.6vw;}
	#sccont .txtbox a {font-size: 4vw; padding:2% 3.3%;}
	.resize {margin:5%;}
	.resize1 {margin:5%;}
	.resize .reimg img {width:100%;}
	.resize .reimg img:first-child {padding-right:0px;}
	.resize .reimg img:last-child {padding-left:0px;}
	#sccont .txtbox h3 br{display:none;}
}


/* tcont */
.timg {position: relative; width: 100%; height: 52vh; padding: 0;}
.timg.reser {background: url("../img/sub/timg_reser.jpg") center no-repeat; background-size: cover;}
.timg.traffic {background: url("../img/sub/timg_traffic.jpg") center no-repeat; background-size: cover;}
.timg.about {background: url("../img/sub/timg_about.jpg") center no-repeat; background-size: cover;}
.timg .txt {position: absolute; top: 46.5%; z-index: 5; width: 100%; text-align: center; color: #000; text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.5);}
.timg .txt h1 {font-size: 30px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.025em; margin: 0 0 2.5vh;}
.timg .txt .line {display: inline-block; width: 30%; height: 1px; background: rgba(0, 0, 0, 0.6); margin: 0 0 1vh; margin: 0 0 2.5vh;}
.timg .txt h2 {font-size: 18px; font-weight: normal; letter-spacing: 0.025em;}

@media ( max-width: 1000px ) {
	.timg .txt {top: 43%;}
	.timg .txt h1 {font-size: 24px;}
	.timg .txt .line {width: 45%;}
	.timg .txt h2 {font-size: 15px;}
}

@media ( max-width: 767px ) {
	.timg {height: 35vh;}
	.timg .txt {top: 35%;}
	.timg .txt h1 {font-size: 18px;}
	.timg .txt h2 {font-size: 13px;}
}

#tcont * {transition: all .1s; -webkit-transition: all .1s; font-size: 12px;}
#tcont {width: 80%; min-height: 200px; margin: 150px auto;}
#tcont .tit {position: relative; font-size: 18px; line-height: 30px; padding-top: 10px; margin-bottom: 20px;}
#tcont .titt {font-size: 15px; line-height: 180%; color: #4d4d4e;}
#tcont .titt > div {margin-bottom: 7px;}
#tcont .titt > div > li {float: left;}
#tcont .titt > div > li:first-child {width: 11px;}
#tcont .titt > div > li:last-child {width: 95%;}
#tcont .tit:after {content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 3px; background: #707070;}
.tabsy {margin-top: 30px;}
.tab_con {display: block; text-align: center; padding: 0; margin: 30px auto 0;}
.tabButton {font-size: 15px; font-weight: bold; padding: 15px 20px;}
.tab {width: 100%; text-align: left;}

@media screen and (max-width: 768px) {
	#tcont {width: 90%;}
	#tcont .tit {font-size: 15px; line-height: 150%; margin-bottom: 10px;}
	#tcont .titt > div > li {font-size: 11px; line-height: 150%;}
}

@media screen and (min-width: 768px) {
    .tab_con {width: 100%;}
}

.tabsy>button{width:100%;font-size:100%;margin:0;outline:0;border:0;vertical-align:baseline;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;}
.tabsy>.tabButton{display:block;margin-top:1px;background:#ededed;color:#000;text-align:center;-webkit-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out;}
.tabsy>.tabButton2{width: 100%;}
.tabsy>input{display:none;}
.tabsy>input:checked+label+.tab{display:block;clear: both !important; float: none !important;}
.tabsy>input:checked+label+.tab>.content{-webkit-animation:showTab 250ms ease-in-out;animation:showTab 250ms ease-in-out; width: 100% !important; padding: 30px 0;}
.tabsy>.tab{display:none;}

@-webkit-keyframes showTab {
    from {opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px);}
    to {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes showTab {
    from {opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px);}
    to {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@media screen and (min-width: 767px){
    .tabsy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
    .tabsy>.tabButton{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;cursor:pointer;}
    .tabsy>input:checked+label{background:#3b4146;color:#FFF;}
    .tabsy>.tab{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;}
    .tabsy>.tabButton2{width: 25% !important;}
}

@media ( max-width: 767px ) {
    #tcont {margin: 80px auto;}
	.tabsy>.tab {display: block;} 
	.tabsy>.tab>.content {padding: 10px 0 30px !important;} 
}

#ptable {width:100%; border-bottom: #d9d9d9 1px solid; border-right: #d9d9d9 1px solid; margin-left: auto; margin-right: auto;}
#ptable tr {min-height: 40px;}
#ptable th {text-align: center; background: #ededed; color: #323232; padding: 1vh 0; border-top: #d9d9d9 1px solid; border-left: #d9d9d9 1px solid;}
#ptable td {font-size: 13px; line-height: 120%; text-align: center; padding: 12px 0 ; border-top: #d9d9d9 1px solid; border-left: #d9d9d9 1px solid;}

/*´Þ·Â*/
.iframe_calendar {width: 100%; max-width: 1200px; height: 100vh; padding: 5vh 0; border: 0; margin: 0 auto;}



/* travel */
#tratit {position: absolute; top: 45%; z-index: 5; width: 100%; text-align: center; color: #fff;}
#tratit h1 {font-family: 'Nanum Myeongjo', serif; font-size: 24px; font-weight: bold; letter-spacing: 0.025em; margin: 0 0 3vh;}
#tratit .line {display: inline-block; width: 25%; height: 1px; background: rgba(255, 255, 255, 0.6); margin: 0 0 3vh;}
#tratit h2 {font-size: 30px; font-weight: normal; letter-spacing: 0.1em;}
.travel_cont {text-align: center; margin-bottom: 100px;}
.travel_box {display: inline-block; position: relative; width: 32%; vertical-align: top; margin: 0 0.2% 2%;
    /*@include -webkit-transition(1s);*/
    /*-webkit-transition: width 0.1s;*/
    /*-webkit-transition: height 0.1s;*/
    /*-webkit-transition: display 0.1s;*/
    /*-webkit-transition: margin 0.1s;*/
}
.travel_box .imgorg {display: block; font-size: 11px; text-decoration: underline; color: #bbb; padding: 1% 0 0;}
.travel_box h1{font-size: 2vw; font-weight: normal; letter-spacing: -0.8pt; margin-top:40px;}
.travel_box h2{font-size: 17px; font-weight: normal; margin: 8px 0 20px;}
.travel_box h3 {width: 95%; font-size: 14px; color: #707070; font-weight: normal; line-height: 25px; margin: 0 auto;}
.travel_box img{display: block; width: 100%; height: auto;}

@media screen and ( max-width: 1000px ){
	#tratit {top: 40%;}
	#tratit h1 {font-size: 20px;}
	#tratit .line {width: 35%;}
	#tratit h2 {font-size: 27px;}
    .travel_box {width: 49%;}
    .travel_box h1 {font-size: 25px;}
}

@media ( max-width: 767px ) {
	#tratit {top: 37%;}
	#tratit h1 {font-size: 15px; margin: 0 0 1vh;}
	#tratit .line {width: 50%; margin: 0 0 1vh;}
	#tratit h2 {font-size: 18px;}
    .travel_box {display: block; width: 100%; height: auto; margin: 0 auto 40px;}
    .travel_box h1 {font-size: 25px;}
    .travel_cont {margin-bottom: 0;}
}