@charset "utf-8"; @import url('../inc/font.css'); html { background:#fff url(""); font-family:"NanumBarunGothic"; margin: 0px; padding:0px;} body { font-size: 12px; color: #333; font-family:"NanumBarunGothic"; margin: 0px; padding:0px;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p, img { margin: 0px; padding:0px; font-family:"NanumBarunGothic";} fieldset, img, abbr, acronym { border: 0px; _vertical-align: top; } address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; } ol,ul { list-style: none; margin: 0px; padding:0px;} legend, caption { display: none; text-align: left; } q:before, q:after { content:''; } a { text-decoration: none; } hr { display: none; } *::-moz-selection { background-color: #af489e; color: #0f9fc7;} *::selection { background-color: #af489e; color: #0f9fc7;} A:link { background-color:none; color: #555; text-decoration: none;} A:active { color: #999; background-color:none; text-decoration: none;} A:visited { text-decoration:none; background-color:none; color: #999; background-color:none;} A:hover { color:#00045b; text-decoration:none; } #logo { position: absolute; z-index:9999; margin:20px; left:0;} #scrolldown-btn { position:absolute; margin:0 auto; z-index:99999999; bottom:70px; right:calc(50% - 25px); margin-top:-14px;} #quick-btn { position:absolute; margin:0 auto; z-index:99999999; bottom:12px; left:20px; } #menu-btn { position:absolute; right:20px; top:20px; z-index:999999999999;} #rbtn { position:absolute; right:20px; bottom:20px; z-index:99999; color:#FFF; font-weight:bold;} #lb { position:absolute; left:0; bottom:0; z-index:99999999999; margin:0; padding:0; margin-bottom:-5px;} #lb_1 { position:absolute; right:0; bottom:0; z-index:99999999999; margin:0; padding:0; margin-bottom:-5px;} #footer { width:100%; } #footer .copy { height:auto; padding:10px 10px 10px 140px; background:#444; color:#999; font-size:11px; text-align:left; line-height:18px; text-align:left;} #footer .copy a { color:#0CF;} #footer .copy a:hover { color:#fff;} .room_info{position:fixed;bottom:0;width:100%;height:0;background:#fff;z-index:9999999999999999999; background: #ffffff url("/img/contents_bg2.jpg") no-repeat center bottom;} .room_info.active{bottom:400px;} /* .fp-slidesNav.bottom{left:auto;bottom:50px;right:5%;} */ .fp-slidesNav.bottom { position: absolute; top:50%; margin-top:140px; margin-bottom:140px; left:50%; margin-left:-900px;} .room_info_wrap { position:relative; } .room_info_wrap .room_info_close { position:absolute; top:100px; right:100px; cursor:pointer; } .room_info_wrap .room_info_close img { width:36px; height:36px; } .sub-Tit1 { position: absolute; z-index: 99999999; width: 100%; left: 0; top: 48%; color:#fff; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .sub-Txt1 { transform: translateY(-50%); position: relative; font-family: 'UNVR57'; color:#ffffff; font-size:50px; opacity:1; text-decoration:underline; } .sub-Txt2 { transform: translateY(-50%); position: relative; font-family: 'UNVR57','NanumBarunGothic'; color:#ffffff; font-size:20px; opacity:1; } .sub-Txt2-2 { transform: translateY(-50%); position: relative; font-family: 'UNVR57','NanumBarunGothic'; color:#ffffff; font-size:20px; opacity:1; } .roomt { font-weight:bold; color:#a63393; text-align: right;} .section { background-size: cover; margin:0; padding:0; text-align:center;position:relative;} .section img { width:100%; height:auto; margin:0; padding:0;} .slide { background-size: cover; } .list_box { position:relative; } .list_box ul { height:100%;} .list_box ul li { width:25%; height:100%; float:left;} .list_box ul li .spet { position: absolute; width:200px; height:60px; top:50%; left:50%; z-index:999999999999999999; margin:-50px 0 0 -120px; border:4px solid #fff; padding:20px;} .list_box ul li .spet .spetxt1 { font-family: "UNVR57"; font-size:30px; color:#fff; text-align:center;} .list_box ul li .spet .spetxt2 { font-size:20px; color:#fff; text-align:center;} .list_box ul li a:hover { background-color:rgba(0,0,0,0.5); } .list_box ul li a { position:relative; width:100%; height:100%; display:block;} .svb1 { background-position: center center; background-size: cover; background-image: url(http://homepageimg.infotown.kr/bc_003/images/special/1.jpg); padding: 0 0 0 0;} .svb2 { background-position: center center; background-size: cover; background-image: url(http://homepageimg.infotown.kr/bc_003/images/special/2.jpg); padding: 0 0 0 0;} .svb3 { background-position: center center; background-size: cover; background-image: url(http://homepageimg.infotown.kr/bc_003/images/special/3.jpg); padding: 0 0 0 0;} .svb4 { background-position: center center; background-size: cover; background-image: url(http://homepageimg.infotown.kr/bc_003/images/special/4.jpg); padding: 0 0 0 0;} .special_contents { text-align:center;padding:100px; margin:0 auto; text-align:center; font-family: 'NanumBarunGothic'; color:#000; font-size:18px; line-height:28px;} .special_contents h2 { font-family: "UNVR57"; font-size:50px; color:#222; margin-bottom:40px;} .special_contents h3 { font-family: "UNVR57"; font-size:50px; color:#222; margin-bottom:5px;} .reser_tit { color:#a63393; font-size:18px;} #main_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/main/2.jpg); padding: 0 0 0 0; background-position:center;} #main_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/main/3.jpg); padding: 0 0 0 0; background-position:center;} #main_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/main/1.jpg); padding: 0 0 0 0; background-position:center;} #main_4 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/main/4.jpg); padding: 0 0 0 0; background-position:center;} #main_5 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/main/5.jpg); padding: 0 0 0 0; background-position:center;} #main_6 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/main/6.jpg); padding: 0 0 0 0; background-position:center;} #main_7 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/main/7.jpg); padding: 0 0 0 0; background-position:center;} #main_8 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/main/8.jpg); padding: 0 0 0 0; background-position:center;} #main_9 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/main/9.jpg); padding: 0 0 0 0; background-position:center;} #pension_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/7.jpg); padding: 0 0 0 0; background-position:center;} #pension_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/out/5.jpg); padding: 0 0 0 0; background-position:center;} #pension_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/2.jpg); padding: 0 0 0 0; background-position:center;} #out_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/out/1.jpg); padding: 0 0 0 0; background-position:center;} #out_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/out/2.jpg); padding: 0 0 0 0; background-position:center;} #out_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/out/3.jpg); padding: 0 0 0 0; background-position:center;} #out_4 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/out/4.jpg); padding: 0 0 0 0; background-position:center;} #out_5 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/out/5.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/1.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/2.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/3.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_4 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/4.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_5 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/5.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_6 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/6.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_7 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/7.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_8 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/8.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_9 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/9.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_10 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/10.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_11 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/11.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_12 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/12.jpg); padding: 0 0 0 0; background-position:center;} #room_k01_13 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k01/13.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/1.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/2.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/3.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_4 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/4.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_5 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/5.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_6 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/6.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_7 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/7.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_8 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/8.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_9 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/9.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_10 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/10.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_11 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/11.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_12 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/12.jpg); padding: 0 0 0 0; background-position:center;} #room_k02_13 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k02/13.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/1.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/2.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/3.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_4 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/4.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_5 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/5.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_6 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/6.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_7 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/7.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_8 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/8.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_9 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/9.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_10 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/10.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_11 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/11.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_12 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/12.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_13 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/15.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_14 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/13.jpg); padding: 0 0 0 0; background-position:center;} #room_k03_15 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k03/14.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/1.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/2.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/3.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_4 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/4.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_5 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/5.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_6 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/6.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_7 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/7.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_8 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/8.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_9 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/9.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_10 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/10.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_11 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/11.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_12 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/13.jpg); padding: 0 0 0 0; background-position:center;} #room_k04_13 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/room_k04/12.jpg); padding: 0 0 0 0; background-position:center;} #special1_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special1/1.jpg); padding: 0 0 0 0; background-position:center;} #special1_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special1/2.jpg); padding: 0 0 0 0; background-position:center;} #special1_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special1/3.jpg); padding: 0 0 0 0; background-position:center;} #special1_4 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special1/4.jpg); padding: 0 0 0 0; background-position:center;} #special2_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special2/1.jpg); padding: 0 0 0 0; background-position:center;} #special2_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special2/2.jpg); padding: 0 0 0 0; background-position:center;} #special2_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special2/3.jpg); padding: 0 0 0 0; background-position:center;} #special3_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special3/1.jpg); padding: 0 0 0 0; background-position:center;} #special3_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special3/2.jpg); padding: 0 0 0 0; background-position:center;} #special3_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special3/3.jpg); padding: 0 0 0 0; background-position:center;} #special3_4 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special3/4.jpg); padding: 0 0 0 0; background-position:center;} #special4_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special4/1.jpg); padding: 0 0 0 0; background-position:center;} #special4_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special4/2.jpg); padding: 0 0 0 0; background-position:center;} #special4_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/special4/3.jpg); padding: 0 0 0 0; background-position:center;} #enjoy1_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy1/1.jpg); padding: 0 0 0 0; background-position:center;} #enjoy1_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy1/2.jpg); padding: 0 0 0 0; background-position:center;} #enjoy1_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy1/3.jpg); padding: 0 0 0 0; background-position:center;} #enjoy2_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy2/1.jpg); padding: 0 0 0 0; background-position:center;} #enjoy2_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy2/2.jpg); padding: 0 0 0 0; background-position:center;} #enjoy2_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy2/3.jpg); padding: 0 0 0 0; background-position:center;} #enjoy3_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy3/1.jpg); padding: 0 0 0 0; background-position:center;} #enjoy3_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy3/2.jpg); padding: 0 0 0 0; background-position:center;} #enjoy3_3 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy3/3.jpg); padding: 0 0 0 0; background-position:center;} #enjoy4_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy4/1.jpg); padding: 0 0 0 0; background-position:center;} #enjoy4_2 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/enjoy4/2.jpg); padding: 0 0 0 0; background-position:center;} #tour1_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/tour/tour1_1.jpg); padding: 0 0 0 0; background-position:center;} #tour2_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/tour/tour2_1.jpg); padding: 0 0 0 0; background-position:center;} #tour3_1 { background-image: url(http://homepageimg.infotown.kr/bc_003/images/tour/tour3_1.jpg); padding: 0 0 0 0; background-position:center;} #infoMenu li a { color: #fff;} #myVideo { position: absolute; right: 0; bottom: 0; top:0; right:0; width: 100%; height:100%; background-size: 100% 100%; background-color: white; background-image: /* our video */; background-position: center center; background-size: cover; object-fit: cover; /*cover video background */z-index:3;} video::-webkit-media-controls { display:none !important;} #myVideo_{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;object-fit:cover;} @media (min-aspect-ratio:16/9) {#myVideo_{top:-100%;height:300%;}} @media (max-aspect-ratio:16/9) {#myVideo_{left:-100%;width:300%;}} @supports(object-fit:cover){#myVideo_{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;object-fit:cover;}} #myVideo{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;/*z-index:30;*/height:100%;overflow:hidden;object-fit:cover;} @media (min-aspect-ratio:16/9) {#myVideo{top:-100%;height:300%;}} @media (max-aspect-ratio:16/9) {#myVideo{left:-100%;width:300%;}} @supports(object-fit:cover){#myVideo{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;object-fit:cover;}} #section0 .layer { position: absolute; z-index: 4; width: 100%; left: 0; top: 50%; color:#fff; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} #section0 .layer h1 { transform: translateY(-50%); position: relative; font-family: "UNVR57"; color:#ffffff; font-size:100px; opacity:0.5;} #section0 .layer h2 { transform: translateY(-50%); position: relative; font-family: "UNVR57"; color:#ffffff; font-size:24px; margin-top:0%; opacity:0.5;} #sn_menu_background {background:rgba(255,255,255,0.9); box-shadow:-10px 10px 10px rgba(0,0,0,0.15);width:15vw; border-left:1vw solid transparent; border-right:1vw solid transparent; height:100vh; min-width:450px; position:fixed; right:0; top:-100%; opacity:0; transition: top 0.5s 0.5s, opacity 0.5s 0.5s; z-index:100005;} #sn_menu_outer {display:block; color:#aaa; width:10vw; border-left:1vw solid transparent; border-right:1vw solid transparent; height:100vh; min-width:400px; opacity:0; position:fixed; right:0; top:-100vh; transition: 0.3s 0.3s; z-index:100010; overflow:hidden; overflow-y:auto; -webkit-overflow-scrolling: touch;} #sn_menu_vertical {width:1px; height:100vh; display:inline-block; vertical-align:middle;} #sn_menu_outer #sn_menu li {position:relative; font-family: "UNVR57", "NanumBarunGothic"; font-size:21px; font-weight:bold; color:#333;} #sn_menu_outer #sn_menu li label {display:block; line-height:39px; text-transform:uppercase; margin-left:-15px; cursor:pointer;} #sn_menu_outer #sn_menu li label:hover {color:#af489e;} #sn_menu_outer #sn_menu li label:last-child {display:none; position:absolute; left:0; top:0; width:100%; height:40px; background:rgba(0,0,0,0);} #sn_menu_outer #sn_menu li label span {display:inline-block; width:0; height:0; /*border:5px solid transparent; border-top-color:#aaa; margin:0 8px 0 0;*/} #sn_menu_outer #sn_menu li a {color:#333; text-decoration:none; } #sn_menu_outer #sn_menu li a:hover {color:#af489e;} #sn_menu_outer #sn_menu ul li {height:0; overflow:hidden; opacity:0; transition:0.2s;} #sn_menu_ip input[id*="sn_menu"] {display:none;} #sn_menu_outer ul {padding:0; margin:0; list-style:none;} #sn_menu_outer #sn_menu {width:90%; display:inline-block; vertical-align:middle; overflow:hidden} #sn_menu_outer #sn_menu {width:90%; max-width:400px; margin:0 auto; overflow:hidden; overflow-y:auto;} #sn_menu_outer #sn_menu > li {text-indent:15px; border-bottom:1px solid rgba(0,0,0,0.1); } #sn_menu_outer #sn_menu ul li {text-indent:30px; font-size:14px; font-weight: normal; } #sn_menu_outer #sn_menu ul ul li {text-indent:45px;} #sn_menu_outer #sn_menu ul ul ul li {text-indent:60px;} #sn_menu_toggle {padding:0; margin:0; position:fixed; right:20px; top:20px; height:60px; width:60px; text-align:center; color:#fff; z-index:100020; background:#000; transition: background 0.5s 0.5s; cursor:pointer; } #sn_menu_toggle label {display:block; width:60px; height:60px; position:absolute; left:0; top:0; box-shadow:10px 10px 10px rgba(0,0,0,0.2);} #sn_menu_toggle label:nth-of-type(1) span {display:block; position:absolute; top:21px; left:9px; font-size:15px; font-family: "UNVR57", "NanumBarunGothic"; font-weight:bold;} #sn_menu_toggle label:nth-of-type(1) span::after {content:""; display:block; width:40px; position:absolute; top:8px; left:0; } #sn_menu_toggle label:nth-of-type(2) {display:none;} #sn_menu_toggle label:nth-of-type(2) span {display:block; width:50px; height:50px; position:absolute;} #sn_menu_toggle label:nth-of-type(2) span::before {content:""; display:block; width:60px; height:4px; position:absolute; top:28px; left:0px; background:#fff; transform:rotate(45deg); transform-origin:center center;} #sn_menu_toggle label:nth-of-type(2) span::after {content:""; display:block; width:60px; height:4px; position:absolute; top:28px; left:0px; background:#fff; transform:rotate(-45deg); transform-origin:center center;} /* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */ /* @media screen and (max-width: 600px) {*/ /* #sn_menu_toggle {padding:0; margin:0; position:fixed; right:20px; top:20px; height:90px; width:90px; text-align:center; color:#fff; z-index:100020; background:#000; transition: background 0.5s 0.5s; cursor:pointer; }*/ /* #sn_menu_toggle label {display:block; width:90px; height:90px; position:absolute; left:0; top:0; box-shadow:10px 10px 10px rgba(0,0,0,0.2);}*/ /* #sn_menu_toggle label:nth-of-type(1) span {display:block; position:absolute; top:21px; left:9px; font-size:15px; font-family: "UNVR57", "NanumBarunGothic"; font-weight:bold;}*/ /* #sn_menu_toggle label:nth-of-type(1) span::after {content:""; display:block; width:40px; position:absolute; top:8px; left:0; }*/ /* #sn_menu_toggle label:nth-of-type(2) {display:none;}*/ /* #sn_menu_toggle label:nth-of-type(2) span {display:block; width:50px; height:50px; position:absolute;}*/ /* #sn_menu_toggle label:nth-of-type(2) span::before {content:""; display:block; width:90px; height:4px; position:absolute; top:28px; left:0px; background:#fff; transform:rotate(45deg); transform-origin:center center;}*/ /* #sn_menu_toggle label:nth-of-type(2) span::after {content:""; display:block; width:90px; height:4px; position:absolute; top:28px; left:0px; background:#fff; transform:rotate(-45deg); transform-origin:center center;}*/ /* }*/ #chat_up { position : fixed; top : 100px; right : 25px; z-index : 998; /* display : none;*/ } #chat_up .s_ch { margin-bottom : 10px; cursor : pointer; } #chat_up .s_ch img { width : 48px; height : auto; } #chat_up .s_talk { margin-bottom : 10px; cursor : pointer; } #chat_up .s_talk img { width : 48px; height : auto; } #sn_menu_ip input[class*="00"]:checked ~ #sn_menu_background {top:0; opacity:1; transition: opacity 0.5s, top 0.5s;} #sn_menu_ip input[class*="00"]:checked ~ #sn_menu_outer {top:0; opacity:1; transition: 0.3s 0.3s;} #sn_menu_ip input[class*="00"]:checked ~ #sn_menu_toggle {background:#a63393; transition: 0.5s 0.5s;} #sn_menu_ip input[class*="00"]:checked ~ #sn_menu_toggle label {display:none;} #sn_menu_ip input[class*="00"]:checked ~ #sn_menu_toggle label:last-child {display:block;} #sn_menu_ip input[class*="01"]:checked ~ #sn_menu_outer #sn_menu .sn_menu01 + ul > li, #sn_menu_ip input[class*="02"]:checked ~ #sn_menu_outer #sn_menu .sn_menu02 + ul > li, #sn_menu_ip input[class*="03"]:checked ~ #sn_menu_outer #sn_menu .sn_menu03 + ul > li, #sn_menu_ip input[class*="04"]:checked ~ #sn_menu_outer #sn_menu .sn_menu04 + ul > li, #sn_menu_ip input[class*="05"]:checked ~ #sn_menu_outer #sn_menu .sn_menu05 + ul > li, #sn_menu_ip input[class*="06"]:checked ~ #sn_menu_outer #sn_menu .sn_menu06 + ul > li, #sn_menu_ip input[class*="07"]:checked ~ #sn_menu_outer #sn_menu .sn_menu07 + ul > li, #sn_menu_ip input[class*="08"]:checked ~ #sn_menu_outer #sn_menu .sn_menu08 + ul > li, #sn_menu_ip input[class*="09"]:checked ~ #sn_menu_outer #sn_menu .sn_menu09 + ul > li, #sn_menu_ip input[class*="10"]:checked ~ #sn_menu_outer #sn_menu .sn_menu10 + ul > li, #sn_menu_ip input[class*="11"]:checked ~ #sn_menu_outer #sn_menu .sn_menu11 + ul > li {height:20px; opacity:1; border-bottom:1px solid rgba(0,0,0,0.05); vertical-align:middle; padding-top:6px;} #sn_menu_ip #sn_menu01:checked ~ #sn_menu_outer #sn_menu .sn_menu01 > label:last-child, #sn_menu_ip #sn_menu02:checked ~ #sn_menu_outer #sn_menu .sn_menu02 > label:last-child, #sn_menu_ip #sn_menu03:checked ~ #sn_menu_outer #sn_menu .sn_menu03 > label:last-child, #sn_menu_ip #sn_menu04:checked ~ #sn_menu_outer #sn_menu .sn_menu04 > label:last-child, #sn_menu_ip #sn_menu05:checked ~ #sn_menu_outer #sn_menu .sn_menu05 > label:last-child, #sn_menu_ip #sn_menu06:checked ~ #sn_menu_outer #sn_menu .sn_menu06 > label:last-child, #sn_menu_ip #sn_menu07:checked ~ #sn_menu_outer #sn_menu .sn_menu07 > label:last-child, #sn_menu_ip #sn_menu08:checked ~ #sn_menu_outer #sn_menu .sn_menu08 > label:last-child, #sn_menu_ip #sn_menu09:checked ~ #sn_menu_outer #sn_menu .sn_menu09 > label:last-child, #sn_menu_ip #sn_menu10:checked ~ #sn_menu_outer #sn_menu .sn_menu10 > label:last-child, #sn_menu_ip #sn_menu11:checked ~ #sn_menu_outer #sn_menu .sn_menu11 > label:last-child {display:block;} #sn_menu_ip input[class*="01"]:checked ~ #sn_menu_outer #sn_menu .sn_menu01 > label, #sn_menu_ip input[class*="02"]:checked ~ #sn_menu_outer #sn_menu .sn_menu02 > label, #sn_menu_ip input[class*="03"]:checked ~ #sn_menu_outer #sn_menu .sn_menu03 > label, #sn_menu_ip input[class*="04"]:checked ~ #sn_menu_outer #sn_menu .sn_menu04 > label, #sn_menu_ip input[class*="05"]:checked ~ #sn_menu_outer #sn_menu .sn_menu05 > label, #sn_menu_ip input[class*="06"]:checked ~ #sn_menu_outer #sn_menu .sn_menu06 > label, #sn_menu_ip input[class*="07"]:checked ~ #sn_menu_outer #sn_menu .sn_menu07 > label, #sn_menu_ip input[class*="08"]:checked ~ #sn_menu_outer #sn_menu .sn_menu08 > label, #sn_menu_ip input[class*="09"]:checked ~ #sn_menu_outer #sn_menu .sn_menu09 > label, #sn_menu_ip input[class*="10"]:checked ~ #sn_menu_outer #sn_menu .sn_menu10 > label, #sn_menu_ip input[class*="11"]:checked ~ #sn_menu_outer #sn_menu .sn_menu11 > label {color:#af489e;} #sn_menu_ip input[class*="01"]:checked ~ #sn_menu_outer #sn_menu .sn_menu01 > label span, #sn_menu_ip input[class*="02"]:checked ~ #sn_menu_outer #sn_menu .sn_menu02 > label span, #sn_menu_ip input[class*="03"]:checked ~ #sn_menu_outer #sn_menu .sn_menu03 > label span, #sn_menu_ip input[class*="04"]:checked ~ #sn_menu_outer #sn_menu .sn_menu04 > label span, #sn_menu_ip input[class*="05"]:checked ~ #sn_menu_outer #sn_menu .sn_menu05 > label span, #sn_menu_ip input[class*="06"]:checked ~ #sn_menu_outer #sn_menu .sn_menu06 > label span, #sn_menu_ip input[class*="07"]:checked ~ #sn_menu_outer #sn_menu .sn_menu07 > label span, #sn_menu_ip input[class*="08"]:checked ~ #sn_menu_outer #sn_menu .sn_menu08 > label span, #sn_menu_ip input[class*="09"]:checked ~ #sn_menu_outer #sn_menu .sn_menu09 > label span, #sn_menu_ip input[class*="10"]:checked ~ #sn_menu_outer #sn_menu .sn_menu10 > label span, #sn_menu_ip input[class*="11"]:checked ~ #sn_menu_outer #sn_menu .sn_menu11 > label span {border-top-color:#0f0;} #sn_menu_ip input[class*="02"]:checked ~ #sn_menu_outer #sn_menu .sn_menu02 + ul > li a { padding: 0 10px; } .menuHolder { bottom:0px; left:50%; position:absolute; z-index:999999; margin-left:-168px;} .mhce { } .menuh { height:100px; display:inline-block;} .menuh a {display:block; float:left; width:38px; height:38px; padding:50px 5px 0 5px; transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; } .menuh img {width:100%; display:block; border:0;} .menuh a:hover {width:100px; padding-top:0;}