/* float clearfix */
.clearfix {*zoom:1;}
.clearfix:after, .clearfix:before {content:"";display:block;clear:both;}
.img_100 {width:100%; height:auto !important; vertical-align:top;}
.redtx {color: #d22020 !important;}
:focus {
    outline: 0;
}


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

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


/* main button*/
.mbuttons > .pause, .mbuttons > .play{background:none; border:0; outline:0; opacity:0.75;}
.mbuttons1 > .pause, .mbuttons1 > .play{background:none; border:0; outline:0; opacity:0.75;}
.mbuttons2 > .pause, .mbuttons2 > .play{background:none; border:0; outline:0; opacity:0.75;}

.mbuttons {bottom:4.5%; position:absolute; left: 64.8%; z-index:99}
.mbuttons1 {bottom:4.5%; position:absolute; left: 56.7%; z-index:99}
.mbuttons2 {bottom:4.5%; position:absolute; left: 58.5%; z-index:99}



	@media ( max-width: 1570px ) {
		.mbuttons{display:none;}
		.mbuttons1{display:none;}
		.mbuttons2{display:none;}
	}




/* header */


/* foot */
#footer {width: 100%; background: rgba(0, 0, 0, 0.8); padding: 50px 0 0;}
#footer .copy {font-size: 25px; width: 80%; text-align: left; color: #fff; padding: 0 0 30px; margin:0 auto;  }
#footer .copy h1 {font-family: 'Noto Serif', serif; font-size: 32px; font-weight: 50; color:#fff; letter-spacing: 0.005em; margin-bottom:-5px;}
#footer .copy span {display: inline-block;font-size: 13px; font-weight: 100; line-height: 200%; letter-spacing: 0.02em;}
#footer .copy span.line {margin: 0 5px;}
#footer .copy2 {width: 100%; font-size: 13px; font-weight: 100; line-height: 335%; text-align: right; letter-spacing: 0.01em; background:#212121; color: #fff; padding:1% 10% 1% 10%;}
#footer .copy2 a {color: #fff;}
#footer .copy2 span.line {margin: 0 5px;}
#footer .copy .mobile-br {display:none;}
.footer-room {display: inline-block}

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

@media ( max-width: 767px ) {
	#footer {padding: 25px 0 0;}
	#footer .copy {padding: 0 0 35px; line-height:10px; height:130px;}
	#footer .copy h1 { margin:7px 0 0;}
	#footer .copy h1 img{width:155px;}
	#footer .copy h1 {font-family: 'Noto Serif', serif; font-size: 33px; font-weight: 0; color:#fff; letter-spacing: 0.005em; margin-bottom:-5px;}
	#footer .copy span {font-size: 12px; line-height: 150%;}
	#footer .copy span.line {display: none;}
	#footer .copy span.line.mobile-line {display:inline-block}
	#footer .copy br {display: none;}
	#footer .copy2 {font-size: 11px; text-align: left;}
	#footer .copy .mobile-br {display:block;}
	#footer .copy .mobile-name {font-size:19px; width:100%; margin: 1px 0 5px;}
	.footer-room {display: inline-flex; margin-top:10px; font-weight:400; font-size:13px;}
}

#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.5;}
#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.5;}
#back-top .t_bt:hover {opacity: 0.7;}

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

@media ( max-width: 767px ){
    #back-top {right: 5%; bottom: 6.5%;}
    #back-top .tel {display: block; width: 45px; height: 45px;}
    #back-top .t_bt {width: 45px; height: 45px;}
	#footer .copy h1 {font-family: 'Noto Serif', serif; font-size: 30px; font-weight: 0; color:#fff; letter-spacing: 0.005em; margin-bottom:10px;}
}


/* 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;
	}
}

/* play stop */
.vp_bt_box {position: absolute; bottom: 5%; right: 50.5%; z-index: 999; min-width: 60px; text-align: center;}
.vp_bt_stop,
.vp_bt_play {width: 60px; height: 60px; cursor: pointer;}
.vp_bt_play {display: none;}
.vp_bt_box div img {display: block;}

/* Volume */
.vol_bt_box {position: absolute; bottom: 5%; left: 50.5%; z-index: 999; min-width: 60px; text-align: center;}
.vol_bt_stop,
.vol_bt_play {width: 60px; height: 60px; cursor: pointer;}
.vol_bt_play {display: none;}
.vol_bt_box div img {display: block;}

@media ( max-width: 768px ) {
    .vp_bt_box {bottom: 5%; min-width: 40px;}
    .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;}
	.vol_bt_box {bottom: 5%; min-width: 40px;}
    .vol_bt_stop,
	.vol_bt_play {width: 40px; height: 40px; cursor: pointer;}
    .vol_bt_stop img,
	.vol_bt_play img {width: 40px; height: 40px; cursor: pointer;}
}

.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: 8%;}
.scroll.scroll_subtimg {bottom: 3.5%;}
.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 ) {
    .scroll {display: none;}
    #mtit {}
    #mtit h1 {font-size: 25px;}
    #mtit h2 {font-size: 7px; letter-spacing: 0.05em;}
}


/* mspecial */
#msp{margin: 100px 0 ;}
#msp .msp_txt{width: 70%; margin: 0 auto;}
#msp .msp_txt div.mtit2{width:50%; float: left;}
#msp .msp_txt div.msp_tt{width:40%; float: left; padding-top: 135px; margin-left: 10%;}
#msp .msp_txt div.msp_tt li{float: left; width: 50%;}
#msp .msp_txt div.msp_tt li a{color: #fff; line-height: 40px; font-size: 15px; display: inline-block;position: relative; text-indent: 30px; }
#msp .msp_txt div.msp_tt li a:after{position:absolute;top:20px;left:0px;width:8px;height:2px;display:block;background:#fff;content:''}
#msp .msp_txt div.msp_tt li a:before{position:absolute;top:17px;left:3px;display:block;width:2px;height:8px;background:#fff;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#msp .msp_txt div.msp_tt li a:hover:before{top:21px;height:0; }
#msp .msp_txt div.msp_tt li a:hover:after{background:#fff;}
@media screen and (max-width:1000px){
    #msp .msp_txt{width: 90%; }
    #msp .msp_txt div.mtit2{float: none; width: 100%; transition: all 0.3s;}
    #msp .msp_txt div.msp_tt{float: none; width: 100%; margin-left: 0; transition: all 0.3s; padding-top: 50px; }
}
.magrid {
    /* center */
    margin: 0px auto 0;
}
.magrid:after {
    content: '';
    display: block;
    clear: both;
}
.grid-item {
    position: relative;
    box-sizing: border-box;
    width: 50%;
    height: auto;
    float: left;
    margin: 0;
    overflow: hidden;
}
.grid-list{display:table;width:100%; text-shadow: 0 1px 1px rgba(69, 69, 69, 0.5);}
.grid-list a {display: block;}
.grid-list ul li {float:left; width:50%; position:relative; overflow: hidden; background:url("../img/main/grid-bg.png") repeat;height:100%;color:#fff;}
.grid-list ul li img{width:100%;position:relative;z-index:-1;}
.grid-list ul li .grid-ov-txt{position:absolute;width:100%;height:100%;text-align:center; margin-top:22.55%;}
.grid-list ul li .grid-ov-txt .ml9 {line-height:71%;}
.grid-list ul li .grid-ov-txt .e-txt {font-size:35px; text-transform: uppercase; border-bottom:1px solid #fff; line-height:80%;display:inline-block; color:#fff;}
.grid-list ul li .grid-ov-txt .e-txt span {line-height:71%;}
.grid-list ul li .grid-ov-txt .k-txt{font-size:15px;margin-top:10px;color:#fff; font-weight:400;}
.grid-list ul li.on{background:none;position:relative;color:#333;}
.grid-list ul li.on img{;}
.grid-list ul li.on .grid-ov-txt{color:#333;}
.grid-list ul li.on .grid-ov-txt .grid-ov{color:#333;}
.grid-list ul li.on .grid-ov-txt .e-txt{border-bottom:1px solid #000;color:#000;}
.grid-list ul li.on .grid-ov-txt .k-txt{color:#000;}
.grid-ov-box{position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 30; opacity: 0; transition: all 0.3s; color: #fff; text-align: center;  display: inherit; }
.grid-ov{display: table-cell; width: 100%; height: 100%; font-size: 15px; }
.grid-ov b{font-size: 20px; font-weight: normal; margin-top: 10px; display: inline-block;}
.grid-ov-box:hover{opacity: 1.0; transition: all 0.3s;}
.grid-ov-txt{display:table;width:100%;height:100%;}

.grid-item:hover img{
    -webkit-transform:rotate(15deg) scale(1.4);
    -moz-transform:rotate(15deg) scale(1.4);
    -ms-transform:rotate(15deg) scale(1.4);
    -o-transform:rotate(15deg) scale(1.4);
    -webkit-transform: rotate(15deg) scale(1.4);
    transform: rotate(15deg) scale(1.4);
}

.grid-item img{
    width: 100%; height: 100%;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    -ms-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
}
@media (max-width:1000px){
    .magrid {
        /* center */
        margin: 0 auto;
    }
    .grid-item {
        height:auto;
    }
}
@media (max-width:767px){
	#msp {margin: 10% 0 10%;}
	.grid-list ul li{width:100%;float:none;}
	.grid-list ul li .grid-ov-txt .e-txt{font-size:24px;text-shadow: 0 1px 1px rgba(69, 69, 69, 0.5);}
	.grid-list ul li .grid-ov-txt .k-txt{font-size:13px;margin-top:10px;text-shadow: 0 1px 1px rgba(69, 69, 69, 0.5);}
}
@media (max-width:575px){
    .grid-ov{font-size: 14px;}
    .grid-ov b{font-size: 16px;}
    .grid-item {
        width: 157px;
        height: 100px;
        margin: 5px;
    }
}


/* mroom preview */
#mrv {width: 100%; margin: 5% 0;  background-repeat:no-repeat;}
#mrv > .tit{padding: 4% 0 0; margin:0 0 0.7%; width:100%; text-align: center;}
#mrv > .tit h2 {font-size:23px; color:#000; font-weight:400;}
#mrv > .tit h3 {font-size:13px; color:#333; font-weight:200; letter-spacing: -0.1pt; margin-top:0.5%;}
#mrv > .rvbox {text-align: center;}
#mrv > .rvbox a {width:250px;  display: inline-block; font-size: 15px; line-height: 180%; font-weight: 300; text-transform: uppercase; letter-spacing: 0.3pt; background: rgba(0, 0, 0, 0.9); color: #fff; padding: 13px 35px; transition: all 0.3s;}
#mrv > .rvbox a:hover { box-sizing: border-box ;background: rgba(255, 255, 255, 1); border: #000 1px solid; color: #000; transition: all 0.3s;}

@media ( max-width: 767px ) {
	#mrv {margin: 10% 0; background-image:none;}
	#mrv > .tit h2 {color:#000;}
	#mrv > .tit h3 {color:#000; margin: 1% auto;}
	#mrv > .rvbox a {width:250px; height:55px; font-size: 14px; background: rgba(0, 0, 0, 0.9);color: #fff; margin-top:5%; transition: all 0.3s; padding: 10px 40px; }
}

@media ( max-width: 414px ) {
	#mrv > .tit {padding: 2% 0 4%; margin:0;}
}

/* mab */
#mab {width: 100%; height:100%; margin:100px 0; overflow: hidden; position: relative;}
#mab .box {width: 50%; height:20vw; float:left;background:url("../img/main/ab1.jpg")center top no-repeat; background-size: cover;  transform: scale(1.0); transition: all 0.3s;}
#mab .box1 {width: 50%; height:20vw;float:left;background:url("../img/main/ab2.jpg")center top no-repeat; background-size: cover;  transform: scale(1.0); transition: all 0.3s;}
#mab .box:hover {transform: scale(1.05); transition: all 0.3s;}
#mab .box1:hover {transform: scale(1.05); transition: all 0.3s;}
.con{text-align: center;}
.con h1 {font-size:26px;color:#fff; font-weight:400;margin:14% 0 5px 0; text-align: center;}
.con h3 {font-size:17px;color:#fff;font-weight:500;text-align: center; text-transform: uppercase; letter-spacing:2px;margin:15.7% 0 0 0;}
.con a {letter-spacing:0.8px;color:#000;font-size:13px;width:80px;padding:8px 0;text-align:center; background:rgba(255, 255, 255, 0.7); margin-top:12px;display:inline-block;text-align: center;}

@media ( max-width: 1000px ) {
	#mab {margin-bottom:5%;}
	#mab .box,#mab .box1{width:100%; height:37vw;}
}

@media ( max-width: 767px ) {
	#mab {margin:10% 0 15%;}
	#mab .box,#mab .box1{width:100%; height:50vw;}
	.con h1 {font-size:20px;margin:11% 0 4px 0;}
	.con h3 {font-size:14px;}
	.con a {font-size:12px; width:105px; margin-top:12px;}
}
/* main map */
#mmap {width: 100%;}
#mmap > .tit{margin: 2.3% auto; width:100%; text-align: center;}
#mmap > .tit h2 {font-size:35px; color:#000; font-weight:normal;padding-top:2%;}
#mmap > .tit h3 {font-size:14px; color:#000; font-weight:normal; letter-spacing: -0.8pt; margin:0.5% 0 1% 0;}
#mmap > .tit .na {font-size:30px;}
#mmap > .tab_con {display: block; text-align: center; padding: 0; margin-bottom: 50px;}
#mmap > .go {width:80%; height:200px; margin:0 10% 5% 10%;}
#mmap > .go .arti {width:50%; height:100%; padding-left:10%; float:left; text-align:left; margin:0;}
#mmap > .go .arti h2{font-size:16px; font-weight:bold;}
#mmap > .go .arti .line {display: inline-block; width: 80%; height: 1px; background: rgba(0, 0, 0, 0.9); margin: 1vh 0 1.5vh;}
#mmap > .go .arti p{font-size:14px; margin-bottom:5%; line-height:160%;}


@media ( max-width: 1000px ) {
	#mmap > .tit h3 {margin:1.2% 0 2% 0;}
	#mmap > .tit .na {font-size:23px;}
}

@media ( max-width: 767px ) {
	#mmap {margin: 10% 0; }
	#mmap > .tab_con {height:300px;}
	#mmap > .tab_con >.root_daum_roughmap {height:100%;}
	#mmap > .go {width:86%; height:200px; margin: 0 7% 0 7%;}
	#mmap > .go .arti {width:100%; margin:0 auto; padding:0;}
	#mmap > .tit .na {font-size:23px;}
}
@media ( max-width: 414px ) {
		#mmap > .tit .na {font-size:16px;}
}


/* 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-size: 30px; font-weight: normal; line-height: 160%; letter-spacing: 0.05em; margin: 0 0 2.5vh; transition: all 0.3s;}
#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 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; pointer-events: none;text-shadow: 0 1.5px 1.5px rgba(69, 69, 69, 0.4);}
#abtit h1 {font-size: 30px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.025em; margin: 0 ; opacity:0.7;}
#abtit .line {display: inline-block; width: 175px; height: 1px; background: rgba(255, 255, 255, 0.6); margin: 0.5vh 0 0.5vh;}
#abtit h2 {font-size: 18px; font-weight: normal; letter-spacing: 0.025em;}

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

@media ( max-width: 767px ) {
    #abtit {top: 40%;}
    #abtit h1 img {height: 60px; opacity:0.8;}
    #abtit h2 {font-size: 13px;}
}


/* room pv */
#pre_txt {position:absolute; top:35%; right:20%; z-index:500;}
#pre_txt h1 {color:#fff; font-size:50px; text-transform: uppercase; text-shadow: #094d97 0 2px;}
#rooms {position: relative; width: 100%; height: 100%;}
#rooms img {display: block; width: 100%;}

@media ( max-width: 1024px ) {
	#pre_txt h1 {font-size:30px;}
	#rooms {}
	#rooms img {}
}

@media ( max-width: 767px ) {
	#pre_txt {display:none;}
	#rooms {}
	#rooms img {}
}


/* room */
#rtit {position: absolute; top: 70%; z-index: 10; width: 100%; text-align: center; color: #fff; pointer-events: none;}
#rtit h1 {width: 100%; font-size: 40px; font-weight: 400; line-height: 100%; letter-spacing: 0.025em; text-shadow: 0 1px 1px rgba(69, 69, 69, 0.5);}
#rinfo {width: 80%; margin: 120px auto;}
#rinfo > div {float: left;}
#rinfo .rname {width: 100%; text-align:center;}
#rinfo .rprice {width: 100%;}
#rinfo .rname h1 {font-size: 32px; padding: 0 0 10px;font-weight:400;}
#rinfo .rname h1 span {letter-spacing: 1pt;font-size:16px; margin-left:5px;}
#rinfo .rname h2 {font-size: 13px; font-weight: 200; line-height: 140%; color: #707070; opacity:0.5; margin-bottom: 40px;}
#rinfo .rname h3 {font-size: 15px; font-weight: normal; line-height: 180%; color: #b1b1b1; margin-bottom: 15px;}
#info {width:87%; height:100%; margin:0 9% 0 9%;}
#info .arti {width:30%; height:auto; padding-left:7%; float:left; text-align:left; margin:0;}
#info .arti h2{font-size:16px; font-weight:bold;}
#info .arti .line {display: inline-block; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.9); margin: 1vh 0 1.5vh;}
#info .arti p{font-size:14px; margin-bottom:20%; line-height:160%;}
#room_des {margin-top:3%;}
@media screen and (max-width:1000px){
	#rtit h1 {font-size: 27px;}
    #rinfo {width: 90%; margin: 80px auto;}
    #rinfo > div {float: none;}
    #rinfo .rname {width:100%; text-align: center; transition: all 0.3s;}
    #rinfo .rprice {width: 100%;  transition: all 0.3s; margin-top: 30px;}
}

@media ( max-width: 767px ) {
	#rtit {display:none;}
    #rinfo .rname h1{font-size: 22px; }
    #rinfo .rname h2{font-size: 11px;}
	#info {margin-bottom:30px;}
	#info .arti {width:100%; margin:0 auto; padding:0;}
	#info .arti p{margin-bottom:8%;}
}
@media ( max-width: 414px ) {
	#rinfo {margin: 3vh auto;}
}

#rimg {width: 80%; padding: 0 0 0; margin: 0 auto;}
#rimg img {width: 100%; margin: 0 0 5vh; pointer-events: none;}
#rimg img:last-child { margin: 0 0 100px;}

@media ( max-width: 767px ) {
	#rimg {width: 90%;}
	#rimg img {margin: 0 0 2vh;}
	#rimg img:last-child { margin: 0 0 15%;}
	#rinfo {}
	
}


/* special */
#spe {background:#fff;}
#spe #spcont {position: relative; width: 100%; height:380px; text-align: center; background: #fff; padding: 0 0 0px;}
#spe #spcont .timg{position: relative;}
#spe #spcont .timg img{display: block; width: 100%;}
#spe .sp_cont {width: 100%; margin: 0 auto; margin:3% 0;}
#spe .sp_cont:last-child {margin:3% 0 100px;}
#spe .sp_cont > div {position: relative; width: 100%; margin: 0 auto;}
#spe .sp_cont .sp_slide {width:69.5%; height:100%;}
#spe .sp_cont .sp_txt {text-align: center; padding: 50px 130px 30px; box-sizing: border-box;}
#spe .sp_cont .sp_txt.last {padding: 50px 130px 0px;}
#spe .sp_cont .sp_txt h1 {display: inline-block; font-size: 13px; font-weight: 200; margin: 0 0 0.5vh; color:#898989;}
#spe .sp_cont .sp_txt h2 {font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color:#2f2f2f;}
#spe .sp_cont .sp_txt .line {display: inline-block; width: 4%; height: 1px; background: #898989; margin: 1vh 0;}
#spe .sp_cont .sp_txt h3 {font-size: 14px; font-weight: 400; line-height: 135%; letter-spacing: -0.02em; margin: -5px 0 1%; color:#5e5e5e; padding:0 20%;}

@media ( max-width: 1000px ) {
	#spe #spcont {width: 100%;}
	#spe .sp_cont > div{float:none;}
	#spe .sp_cont .sp_slide{width: 100%;}
	#spe .sp_cont .sp_txt {width: 90%; padding: 60px 0 60px;}
}

@media ( max-width: 767px ) {
	#spe #spcont {width: 100%; height:34vh;}
	#spe .sp_cont:last-child {margin:3% 0 15%;}
	#spe .sp_cont .sp_txt {padding: 35px 0 70px;}
	#spe .sp_cont .sp_txt.last {padding: 40px 0px 0px;}
    #spe .sp_cont .sp_txt h1{}
	#spe .sp_cont .sp_txt h2 {font-size: 18px; }
	#spe .sp_cont .sp_txt .line {}
	#spe .sp_cont .sp_txt h3 { padding:0;}
}


/* tcont */
.timg {position: relative; width: 100%; height:380px; text-align: center; background: #fff; padding: 0 0 0px;}
.timg img{display: block; width: 100%;}
.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.travel {background: url("../img/sub/timg_travel.jpg") center no-repeat; background-size: cover;}
.timg.special {background: url("../img/sub/timg_special.jpg") center no-repeat; background-size: cover;}
.timg .txt {position: absolute; top: 46.5%; z-index: 5; width: 100%; text-align: center; color: #fff;}
.timg .txt h1 {font-size: 30px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.025em; margin: 0 ; opacity:0.7; text-shadow: 0 1px 1px rgba(69, 69, 69, 0.5);}
.timg .txt .line {display: inline-block; width: 210px; height: 1px; background: rgba(255, 255, 255, 0.6); margin: 0.5vh 0 0.5vh;}
.timg .txt h2 {font-size: 18px; font-weight: normal; letter-spacing: 0.025em; text-shadow: 0 1px 1px rgba(69, 69, 69, 0.5);}
.timg .txt .line.sp_line{width: 130px;}
.timg .txt .line.tra_line{width: 120px;}
.timg .txt .line.traff_line{width: 130px;}

@media ( max-width: 1000px ) {
	.timg .txt {top: 43%;}
	.timg .txt h1 {font-size: 20px;}
	.timg .txt .line {width: 145px;}
	.timg .txt h2 {font-size: 15px;}
	.timg .txt .line.sp_line, .timg .txt .line.tra_line,.timg .txt .line.traff_line {width: 100px;} 
}

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

#tcont * {transition: all .1s; -webkit-transition: all .1s;}
#tcont {width: 80%; min-height:200px; margin: 160px auto; }
#tcont .tit {font-size: 18px; position: relative; margin-bottom: 20px; line-height: 30px; padding-top: 10px;}
#tcont .titt {font-size: 14px; color: #4d4d4e;line-height: 150%;}
#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;}

.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; font-size: 15px; font-weight: bold; text-align: center; background: #ededed; color: #000; padding: 15px 20px; margin-top: 1px; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out;}
.tabsy>.tabButton2{width: 100%;}
.tabsy>input{display: none;}
.tab {width: 100%; text-align: left;}
.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: 768px) {
    .tab_con {width: 100%;}
}

@media screen and (min-width: 768px){
    .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: 20% !important;}
}*/

@media screen and (min-width: 300px) {
    #tcont {margin: 80px auto 100px;}
	#tcont .tit {font-size: 15px; line-height: 150%; margin-bottom: 10px;}
	#tcont .titt > div > li {font-size: 13px; line-height: 150%;}
    .tabsy > .tab {display: block;}
	.tabsy > .tab > .content {padding: 10px 0 30px;} 
	.tabsy > .tab > .content:last-child {padding: 10px 0 0px;}
	.tabsy > input:checked + label + .tab > .content {padding: 10px 0 30px;}
}

@media screen and (max-width: 565px) {
	#tcont {margin: 80px auto 15%;}
	#tcont .titt > div > li {font-size: 11px;}
	.tabsy > .tab > .content:last-child {padding: 10px 0 0%;}
}

#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 */
#tour_cont {position: relative; width: 100%; height:380px; text-align: center; background: #fff; padding: 0 0 0px;}
#tour_cont .timg {position: relative;}
#tour_cont .timg img {display: block; width: 100%;}
#travel_con {position: relative; width: 100%; margin: 5% 0 100px;}
#travel_con .trabox > div {width: 100%; height:500px;}
#travel_con .trabox2 > div {width: 100%; height:500px; float: right !important;}
#travel_con .trabox .ibox {width: 39.6%; float:left; margin-left:10%;}
#travel_con .trabox2 .ibox {margin:0 10% 0 0;}
#travel_con .trabox .ibox > img{width: 100%;}
#travel_con .trabox .tbox {height:100%; width: 33%; float:left; text-align:center;padding:2%; margin:0 3% 0 3%;  }
#travel_con .trabox .tbox .line {display: inline-block; height: 15px; width: 1px; background: #000; margin: 0;}
#travel_con .trabox .tbox h1{font-size:28px; margin:10% 0 1% 0; font-weight:400;}
#travel_con .trabox .tbox h2{font-size:14px; margin:1% 0 5% 0; color:#525252; font-weight:300; }
#travel_con .trabox .tbox h3{width:70%; margin:0 auto; font-size:14px;  color:#525252; line-height:170%; letter-spacing:-0.9px; text-align:center; font-weight:400;}
#travel_con .trabox .tbox h3 .stxt{font-size:12px; color:#666; font-weight:400;}


@media (max-width: 1440px) {
#travel_con .trabox .tbox {width: 42%;}
}
@media (max-width: 1000px) {
#travel_con .trabox > div {width: 100%; height:350px;}
#travel_con .trabox2 > div {width: 100%; height:350px; float: right !important;}
#travel_con .trabox .ibox {width: 39.6%; float:left; margin-left:10%;}
#travel_con .trabox2 .ibox {margin:0 10% 0 0;}
#travel_con .trabox .ibox > img{width: 100%;}
#travel_con .trabox .tbox {padding:0.5%; margin:0 3% 0 0}
#travel_con .trabox .tbox h1{font-size:23px; margin:0;}
#travel_con .trabox .tbox h2{font-size:14px; margin:0 0 1.5vh; line-height:1.9;}
#travel_con .trabox .tbox h3{width:90%; margin:0 auto; font-size:13px;}
}
@media (max-width: 768px) {
	#tour_cont {height:36vh;}
	#tour_cont .timg img {width: 100%; margin: 0;}
	#travel_con {margin-bottom:0;}
	#travel_con .trabox > div {width: 100%; height:100%;}
	#travel_con .trabox2 > div {width: 100%; height:100%;}
	#travel_con .trabox{margin-left:-13%;margin-top:0%;}
	#travel_con .trabox2{margin-right: -13%;}
	#travel_con .trabox .ibox {width: 100%; float:left;}
	#travel_con .trabox .tbox {height:100%; width: 80%; float:right; padding: 8% 2% 8% 1%; }
	#travel_con .trabox2 .tbox {float:left; margin: 0% 10% 5% 10%; padding: 8% 5% 8% 5%;}
	#travel_con .trabox .tbox .line {margin: 0.5vh 0;}
	#travel_con .trabox .tbox h1{font-size:22px;}
	#travel_con .trabox .tbox h2{font-size:14px;}
	#travel_con .trabox .tbox h3{font-size:14px; width:98%;}
}