@charset "utf-8";

html, body{
    height: 100%;
}

#wrap{
    width:100%;
    margin: 0 auto;
}

/* 우측 네비게이션 */
#fp-nav{
	position: fixed; 
	right: 40px; 
	top: 50%;
	transform: translateY(-50%); 
	z-index: 300;
}

/* R-nav */
#fp-nav ul li:nth-child(1) a .privew{
    background-image: url(../images/room/room2/r2_1.jpg);
}
#fp-nav ul li:nth-child(2) a .privew{
    background-image: url(../images/room/room2/r2_2.jpg);
}
#fp-nav ul li:nth-child(3) a .privew{
    background-image: url(../images/room/room2/r2_3.jpg);
}
#fp-nav ul li:nth-child(4) a .privew{
    background-image: url(../images/room/room2/r2_4.jpg);
}
#fp-nav ul li:nth-child(5) a .privew{
    background-image: url(../images/room/room2/r2_5.jpg);
}
#fp-nav ul li:nth-child(6) a .privew{
    background-image: url(../images/room/room2/r2_6.jpg);
}
#fp-nav ul li:nth-child(7) a .privew{
    background-image: url(../images/room/room2/r2_7.jpg);
}
#fp-nav ul li:nth-child(8) a .privew{
    background-image: url(../images/room/room2/r2_8.jpg);
}
#fp-nav ul li:nth-child(9) a .privew{
    background-image: url(../images/room/room2/r2_9.jpg);
}
#fp-nav ul li:nth-child(10) a .privew{
    background-image: url(../images/room/room2/r2_10.jpg);
}
#fp-nav ul li:nth-child(11) a .privew{
    background-image: url(../images/room/room2/r2_11.jpg);
}
#fp-nav ul li:nth-child(12) a .privew{
    background-image: url(../images/room/room2/r2_12.jpg);
}
#fp-nav ul li:last-child a .privew{
    display: none;
}

/*공통영역*/
#fullpage{
    height: 100%;
}
#fullpage section{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    margin: 0 auto;
}


/*ttl s*/
#ttl{
    width:257px;
    height:auto;
    position:fixed;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    z-index:666;
    transition:all 0.7s;
    text-align:center;
}
#ttl.On{
    bottom:-300px;
}
#ttl img{
    margin:0 0 10px 0;
}
#ttl .m_btn{
    width:200px;
    height:43px;
    margin:10px auto 0 auto;
    border:1.4px solid #fff;
    cursor:pointer;
    font-size:16px;
    color:#fff;
    text-align:center;
    line-height:40px;
    font-weight:400;
    position:relative;
    overflow:hidden;
    transition:all 0.4s;
}
#ttl .m_btn div{
    width:100%;
    height:100%;
    position:absolute;
    top:43px;
    left:0;
    background-color:rgba(255,255,255,0.5);
    transition:all 0.4s;
}
#ttl .m_btn:hover div{
    top:0;
}
#ttl .bar{
    width:2px;
    height:25px;
    margin:15px auto 0 auto;
    background-color:#fff;
}

/*info s*/
#info .info_box{
    width:520px;
    height:100%;
    position:fixed;
    bottom:-100%;
    left:50%;
    transform:translateX(-50%);
    background:url(../images/room/info_bg.png) no-repeat center 0/cover;
    z-index:1;
    transition:all 0.8s;
}
#info .info_box.On{
    bottom:-70px;
}
#info .info_box .info_ttl{
    text-align:center;
    margin:22vh 0 0 0;
}
#info .info_box p{
    font-size:16.5px;
    line-height:30px;
    text-align:center;
    margin:4vh 0 4.5vh 0;
    color:#222222;
}
#info .info_box p span{
    font-weight:600;
}
#info .info_box .go_btn{
    width:316px;
    height:40px;
    margin:0 auto;
}
#info .info_box .go_btn a{
    text-align:center;
    line-height:40px;
    display:block;
    float:left;
    width:150px;
    height:40px;
    border:1.5px solid #0178a0;
    font-size:16px;
    font-weight:500;
    color:#0178a0;
    position:relative;
    overflow:hidden;
    transition:all 0.3s;
}
#info .info_box .go_btn a:first-child{
    margin:0 10px 0 0;
    transition:all 0.4s;
}
#info .info_box .go_btn a:first-child:hover{
    background-color:#0178a0;
    color:#fff;
}
#info .info_box .go_btn a:nth-child(2){
    background-color:#0178a0;
    color:#fff;
    transition:all 0.4s;
}
#info .info_box .go_btn a:nth-child(2):hover{
    background-color:rgba(255,255,255,0);
    color:#0178a0;
}
#info .info_box .go_btn a:hover{
    border-radius:10px;
}

#info .info_box .close_btn{
    font-size:18px;
    font-weight:500;
    background-color:#0178a0;
    color:#fff;
    width:45px;
    height:45px;
    position:absolute;
    top:10px;
    right:0;
    text-align:center;
    line-height:45px;
    cursor:pointer;
    opacity:0.6;
    border-radius:10px;
    transition:all 0.4s;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
}
#info .info_box .close_btn:hover{
    opacity:0.8;
}

/*cont1 s*/
#cont1{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_1.jpg) no-repeat center 0/cover;
}

/*cont2 s*/
#cont2{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_2.jpg) no-repeat center 0/cover;
}

/*cont3 s*/
#cont3{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_3.jpg) no-repeat center 0/cover;
}

/*cont4 s*/
#cont4{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_4.jpg) no-repeat center 0/cover;
}

/*cont5 s*/
#cont5{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_5.jpg) no-repeat center 0/cover;
}

/*cont6 s*/
#cont6{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_6.jpg) no-repeat center 0/cover;
}

/*cont7 s*/
#cont7{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_7.jpg) no-repeat center 0/cover;
}

/*cont8 s*/
#cont8{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_8.jpg) no-repeat center 0/cover;
}

/*cont9 s*/
#cont9{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_9.jpg) no-repeat center 0/cover;
}

/*cont10 s*/
#cont10{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_10.jpg) no-repeat center 0/cover;
}

/*cont11 s*/
#cont11{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_11.jpg) no-repeat center 0/cover;
}

/*cont12 s*/
#cont12{
    width:100%;
    height:100vh;
    background:url(../images/room/room2/r2_12.jpg) no-repeat center 0/cover;
}