@charset "UTF-8";

@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif');

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
	font-weight: 100;
    src: url('font/NotoSans/NotoSans-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
	font-weight: 300;
    src: url('font/NotoSans/NotoSans-Light.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
	font-weight: 400;
    src: url('font/NotoSans/NotoSans-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
	font-weight: 500;
    src: url('font/NotoSans/NotoSans-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
	font-weight: 700;
    src: url('font/NotoSans/NotoSans-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
	font-weight: 900;
    src: url('font/NotoSans/NotoSans-Bold.woff') format('woff');
}

@font-face {
    font-family:'Noto Serif';
    font-style: normal;
	font-weight: 400;
    src: url('font/NofoSerif/NotoSerif-Regular.woff') format('woff');
}

/* Reset CSS
 * --------------------------------------- */
 html { height:100%; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
	font-size:13px;
	font-family: 'Noto Sans KR','NanumGoithic', "맑은 고딕", "Malgun Gothic" , "Apple Gothic", "돋움", Dotum, "굴림", Gulim, sans-serif;
	letter-spacing:-0.025em;
}
a{text-decoration:none; color:#000;}
table { border-spacing: 0;}
fieldset,img { border: 0;}
address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal;  font-style: normal;}
strong{font-weight: bold;}
ol,ul { list-style: none;  margin:0; padding:0;}
caption,th {  text-align: left;}
h1,h2,h3,h4,h5,h6 {  font-weight: normal;  font-size: 100%;  margin:0;  padding:0;  color:#444;}
q:before,q:after { content:'';}
abbr,acronym { border: 0; }


/* fullpage-pager */
.fullpage-pager-wrap {position:fixed; top:0; right:14px; bottom:0; display:table; z-index: 100; height:100%;}
.fullpage-pager {display:table-cell; width: 100%; padding:0; margin:0; vertical-align:middle;}
.fullpage-pager li + li { margin-top:8px}
.fullpage-pager li a {display:block; border:1px solid #fff; width:10px; height:10px; border-radius:50%; background:transparent; background:rgba(0,0,0,.1); text-indent:-999px; overflow:hidden; font-size:1px; line-height:1px; box-shadow:0 0 5px rgba(0,0,0,.3);}
.fullpage-pager li.active a {background:#fff;}
.fullpage-pager li a:hover, .fullpage-pager li a:focus {background:rgba(255,255,255,.5);}

/* MAIN */
#section0{ position:relative;overflow: hidden;text-align:center;}
#myVideo{position: absolute;top:50%;left:50%;min-width: 100%;min-height: 100%;background-size: 100% 100%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);background-color: black; /* in case the video doesn't fit the whole page*/background-image: /* our video */;background-position: center center;background-size: contain; object-fit:cover; z-index:3;}
video#myVideo::-webkit-media-controls { display:none !important;}

.vdobtn-cont {position: fixed; z-index:4; border:0; top:1100px; left:50%; margin-left:-100px; color:#000; bottom:0; width:200px; height:20px; text-align:center;}
.vdobtn { outline:0; height:20px; border:0; overflow:hidden; text-indent:-999px; background:url("../images/main/vdo_controls.png") no-repeat; }
.vdobtn.soundon { width:88px; background-position:0 0; }
.vdobtn.soundoff { width:88px; background-position:0 -20px; }
.vdobtn.pause { width:21px; background-position:right 0; }
.vdobtn.play { width:21px; background-position:right -20px; }

/*메뉴바*/
.header {position:fixed; z-index:900; top:0; left:0 ;width:100%; height:75px; background:#fff; min-width: 1200px; border-bottom:1px solid #e8e8e8;}
#header {position:fixed; top:-2px; background:#fff; width:100%; min-width:1200px; height:75px; border-top:2px solid #bea085; border-bottom:1px solid #e8e8e8; z-index:500;}
#header h1 {float:left; margin-left:20px; padding-top:5px;}

.header #gnb1{position:relative; width:1050px; margin:3px auto 0;}
.header #gnb1 > li {float:left; margin-right:1px; text-align:center; margin-top:9px;}
.header #gnb1 > li > a {display:block; height:51px; line-height:3.3em; padding:0 42px; font-size:15px; font-weight:bold; color:#000;}
.header #gnb1 > li > a:hover {color:cornflowerblue;}
.header #gnb1 > li > a:hover ul {margin-top:1px;}
.header #gnb1 > li > a.active {color:cornflowerblue;}

.header #gnb1 > li > ul {position:absolute;top:65px;width:180px;display}
.header #gnb1 > li > ul.navi_01 {left:-25px;}
.header #gnb1 > li > ul.navi_02 {left:110px;}
.header #gnb1 > li > ul.navi_03 {left:245px;}
.header #gnb1 > li > ul.navi_04 {left:380px;}
.header #gnb1 > li > ul.navi_05 {left:520px;}
.header #gnb1 > li > ul > li {background:url(http://gonylab.speedgabia.com/heritis/img/images/bg_gnb.png) repeat left top;}
.header #gnb1 > li > ul > li a {line-height:3.5em;height:45px;padding:0 7px;margin-bottom:1px;font-size:13px;font-weight:bold;text-align:center;display:block;color:#111111;}
.header #gnb1 > li > ul > li a:hover {color:steelblue;}

.header .header-wrap {position:relative; margin:0 auto; max-width:2356px;}
.header .header-wrap > h1 {position:absolute; width:334px; left:50%; top:40px; margin-left:-167px;}
.header h1 { float:left; margin-left:20px; padding-top:5px; width: 200px; height: 60px;}
.header.active h1 a {background:none;}
.header button.gnb-toggle {width:22px; height:22px; position:absolute; top:17px; left:20px; border:0; background:transparent; z-index:999;	outline:0;} 
.header button.gnb-toggle:before,
.header button.gnb-toggle:after,
.header button.gnb-toggle span { content:""; display:block; width:22px; height:2px; text-indent:-999px; overflow:hidden; background:#fff; left:0; position:absolute; opacity:1; transition:all .3s;
	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg);  transform: rotate(0deg);}
.header button.gnb-toggle:before { top:2px; }
.header button.gnb-toggle:after { top:10px; }
.header button.gnb-toggle span { top:18px; }

.header button.gnb-toggle.active:before { background:#8a8a8a;top:10px;-webkit-transform: rotate(45deg);;
    -moz-transform: rotate(45deg);   -ms-transform: rotate(45deg);  -o-transform: rotate(45deg); transform: rotate(45deg); }
.header button.gnb-toggle.active:after { background:#8a8a8a;opacity:0; }
.header button.gnb-toggle.active span { background:#8a8a8a;top:10px;-webkit-transform: rotate(-45deg);;
    -moz-transform: rotate(-45deg);  -ms-transform: rotate(-45deg);  -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.header .header-wrap > a  {color:#fff; font-size:13px; position:absolute; height:20px; line-height:20px; padding:0 5px; border:1px solid rgba(255,255,255,.6); top:17px;
	-webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s; z-index:999;}
.header .header-wrap > a:hover {background:rgba(0,0,0,.1); border:1px solid rgba(255,255,255,.8);}
.header a.reservation {left:54px;}
.header a.watch {right:20px;} 
.header .header-wrap > a.blog {	display:none; left:134px;}

.header.sub {-webkit-transition:all .5s;	-moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; background:rgba(55,55,55,0);}
.header.sub.fix {background:rgba(55,55,55,1);}
.header.sub.fix .header-wrap > h1 {top:0;}


/*메뉴바 실시간*/
#header .s_menu {float:right;margin-right:20px;padding-top:5px;}
#header .s_menu li {float:left; border:1px solid #9d9d9d; padding:16px;}
#header .s_menu li a {font-size:15px;color:#959595; padding:15px;}
#header .s_menu :hover {background-color:#000;}
#header .s_menu li a:hover {color:#fff;}


@keyframes jump {
  from { bottom:20px; }
  25% { bottom:40px; }
  50% { bottom:20px; }
  to {  bottom:20px; }
}

/*메인 이미지 슬라이드*/
#section1 .fp-tableCell{ overflow:hidden;}
#section1 .bx-wrapper { position:relative; height:100%;}
#section1 .bx-wrapper, #section1 .bx-viewport, #section1 ul, #section1 li {  display:block; margin:0 auto;width:100%; height:100%;  box-sizing:border-box;}
#section1 li {position:relative;}
#section1 li img {	position:absolute;	display:block; left:50%; top:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);  transform: translate(-50%, -50%); min-width:100%; min-height:100%;}
#section1 .bx-prev, #section1 .bx-next { position:absolute; display:block; margin-top:-36px; top:50%;  left: 85px;  width: 42px;  height: 72px;  background: url('../images/main/arr_left.png') center no-repeat; text-indent:-9999px; z-index:100;}
#section1 .bx-next { left: auto;  right: 85px; background-image: url('../images/main/arr_right.png');}


/* 메인 객실미리보기 */
.quick { width: 100%; position:absolute; top:0; left:0; right:0; bottom:0;	box-sizing:border-box;z-index:4;   float: left;}
.quick li {position:absolute;width: 34%;height:100%;box-sizing:border-box;}
.quick li a {position:absolute; width:100%; height:100%; left:0; top:0; display:block; right:0; bottom:0;}
.quick li a span {position:absolute; width:220px; height:150px; left:50%; top:45%; margin-left:-110px; margin-top:-140px; background:#3d3d3d; text-align:center; color:#fff; box-sizing:border-box; padding-top:45px; box-shadow:0 0 15px rgba(0,0,0,0); -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; z-index:99;  opacity:0;}

.fp-completely li a span { top:90%; opacity:1;}
.fp-completely li:nth-child(2) a span {-webkit-transition:all 1s;-moz-transition:all 1s;-ms-transition:all 1s;-o-transition:all 1s;transition:all 1s;} 
.fp-completely li:nth-child(3) a span {-webkit-transition:all 1.5s;-moz-transition:all 1.5s;-ms-transition:all 1.5s;-o-transition:all 1.5s;transition:all 1.5s;} 
.fp-completely li a:hover span { width:230px; height:160px;  font-size:15px; margin-left:-115px; margin-top:-145px;background:#316ec8;box-shadow:0 0 15px rgba(0,0,0,.3);	-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;  transition:all .5s;}

.quick li a span:before {content:""; display:block; width:1px; height:20px; background:#fff; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin:18px auto 5px auto;}
.quick li a span:after {content:""; display:block; width:100%; height:188px; position:absolute; top:0; left:0;}
.quick li:nth-child(1) a span:after { background-position:center 70; }
.quick li:nth-child(2) a span:after { background-position:center -100px; }
.quick li:nth-child(3) a span:after { background-position:center -270px; }
.quick li:nth-child(4) a span:after { background-position:center -460; }
.quick li a:after {content:"";position:absolute; width:100%; height:100%; z-index:90; opacity:0; -webkit-transition:opacity 1s; -moz-transition:opacity 1s; -ms-transition:opacity 1s; -o-transition:opacity 1s; transition:opacity 1s; top:0; left:0; right:0; bottom:0;}


/*메인 스페셜 미리보기*/
#facs {padding-top: 50px; height: auto;  text-align: center;}
.cpage {clear: both; position: relative;overflow: visible; width: 100%; height: auto; min-height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.decoEng {font-size: 11px;  line-height: 20px;  color: #888888;  text-align: center;}
#facs ul { height: auto; padding-top: 50px;  margin-left: 10px;}
.slider_area { width: 100%;  height: 100%;  font-size: 0px;  white-space: nowrap;word-break: break-all;}
#facs ul li { width: auto; max-width: 120%;  padding: 0 3%;  font-size: 14px;  line-height: 19px;  color: #616161; font-weight: bold;cursor: pointer;}
.slider_area li { white-space: normal; word-break: normal;  position: relative;  display: inline-block;  _display: inline;  width: 100%;  height: 100%;background-repeat: no-repeat; background-position: center center;  background-size: cover;}
#facs ul .photo {  display: inline-block;  position: relative;  z-index: 5; overflow: hidden;  width: 355px;  max-width: 100%; border-radius: 25px; padding-top: 100%;  margin-bottom: 30px;}
#facs ul .photo .loader { position: absolute;  top: 0; transform: scale(1) rotate(0deg);  transition: transform 0.5s;}
.loader {  width: 100%;  height: 100%;  background-repeat: no-repeat;  background-position: center center;  background-size: cover;   transform-origin: 50% 50%; left: 0%;}
#facs ul .titleE {   margin-bottom: 10px; font-size: 20px; line-height: 20px; color: #8d8d8d; font-weight: bold;  font-family: 'Libre Baskerville', serif !important;  transition: color 0.5s;}
#facs ul .titleH {  margin-bottom: 30px;  font-size: 16px; color: #8d8d8d;  font-weight: bold;  font-family: 'Libre Baskerville', serif !important; transition: color 0.5s;}

.quick li:nth-child(1) { left:0; }
.quick li:nth-child(2) {width: 33%;left: 34%;}
.quick li:nth-child(3) {width: 33%;right: 0%;}
.quick li:nth-child(4) { right:0; }
.quick li:nth-child(1) a { background:url("../images/main/quick1.jpg") center center no-repeat;background-size:cover; }
.quick li:nth-child(2) a { background:url("../images/main/quick2.jpg") center center no-repeat;background-size:cover; }
.quick li:nth-child(3) a { background:url("../images/main/quick3.jpg") center center no-repeat;background-size:cover; }
.quick li:nth-child(4) a { background:url("../images/main/quick4.jpg") center center no-repeat;background-size:cover; }
.quick li:nth-child(1) a:hover:after,
.quick li:nth-child(1) a:focus:after { opacity:1;background:url("../images/main/quick1_on.jpg") center center no-repeat;background-size:cover; }
.quick li:nth-child(2) a:hover:after,
.quick li:nth-child(2) a:focus:after { opacity:1;background:url("../images/main/quick2_on.jpg") center center no-repeat;background-size:cover; }
.quick li:nth-child(3) a:hover:after,
.quick li:nth-child(3) a:focus:after { opacity:1;background:url("../images/main/quick3_on.jpg") center center no-repeat;background-size:cover; }
.quick li:nth-child(4) a:hover:after,
.quick li:nth-child(4) a:focus:after { opacity:1;background:url("../images/main/quick4_on.jpg") center center no-repeat;background-size:cover; }

#section3 {background:url("../images/main_bg.jpg") 0 0 no-repeat;background-size:cover;}
#section3 .special {background:rgba(255,255,255,.9); position:absolute; width:100% ;bottom:112px; left:100%; -webkit-transition:all 1s; -moz-transition:all 1s;-ms-transition:all 1s ;-o-transition:all 1s; transition:all 1s;}
#section3.active .special {left:0;}
#section3 .special .bx-wrapper {margin:0 auto; opacity:0;}


@media (max-width:1800px){
#section3 .special{bottom:20px !important;}
.cpage { clear: both; position: relative; overflow: visible; width: 100%; height: 50%; min-height: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.fp-tableCell {display: table-cell; vertical-align: middle; /*width: 1600px; */height: 50%;}
#facs ul {height: 50%;  padding-top: 10px; margin-left: 10px;}
.slider_area { width: 50%; height: 20%; font-size: 0px; white-space: nowrap;  word-break: break-all;}
#myVideo{position: absolute; top:50%; left:50%; min-width: 10%; min-height: 10%; background-size: 100% 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); background-color: black; /* in case the video doesn't fit the whole page*/ background-image: /* our video */; background-position: center center; background-size: contain; object-fit: cover; /*cover video background */ z-index:3;}
#i1 { width: 20%; margin-bottom: 50px; margin-left: -40; }
#facs ul { height: 100%; padding-top: 0px; margin-left: 30px;       }
.quick li a span { position: absolute; width: 140px; height: 100px; margin-left: -110px; margin-top: -100px;  padding-top: 0px;}
#section1 .bx-wrapper, #section1 .bx-viewport, #section1 ul, #section1 li{width:1800px}
}


@media (max-width:1730px){
#section1 .bx-wrapper, #section1 .bx-viewport, #section1 ul, #section1 li{width:1730px}
#section1 li img{width:100%;}
#myVideo{width:100%;}
#section3 .special{bottom:50px !important;}
#facs ul{padding-top:5px; height: 20%; }
.header #gnb1 > li > ul.navi_01{left:28px;}
.header #gnb1 > li > ul.navi_02{left:155px;}
.header #gnb1 > li > ul.navi_03{left:285px;}
.header #gnb1 > li > ul.navi_04{left:420px;}
.header #gnb1 > li > ul.navi_05{left:550px;}
.header #gnb1 > li > ul{width:129px;}
.header #gnb1 > li > a{padding:0px 39px;}
    
.cpage {margin-left: 50px; clear: both; position: relative; overflow: visible; width: 35%; height: 50%; min-height: 50%; background-repeat: no-repeat; background-position: center center;  background-size: cover;}
.fp-tableCell {display: table-cell; vertical-align: middle; /*width: 40%; */ height: 50%;}
#i1 {width: 30%; margin-bottom: -80px; margin-left: 650;}
#facs ul { height: 70%; padding-top: 10px; margin-left: 30px;       }
.quick li a span { position: absolute;  width: 140px; height: 100px; margin-left: -110px; margin-top: -100px;  padding-top: 0px;}
.loader {width: 100%; height: 60%; margin-top: 30% !important;}
}
 
 
@media (max-width:1600px){
.vdobtn {display:none;}
#section1 .bx-wrapper, #section1 .bx-viewport, #section1 ul, #section1 li{width:1600px}
.header #gnb1 > li > ul.navi_01{left:-2px;}
.header #gnb1 > li > ul.navi_02{left:125px;}
.header #gnb1 > li > ul.navi_03{left:256px;}
.header #gnb1 > li > ul.navi_04{left:391px;}
.header #gnb1 > li > ul.navi_05{left:524px;}
}


@media  (max-width: 1440px){
.header #gnb > li > ul{width:129px !important;}
.header #gnb1 > li > ul.navi_01{left:25px !important;}
.header #gnb1 > li > ul.navi_02{left:157px!important;}
.header #gnb1 > li > ul.navi_03{left:283px !important;}
.header #gnb1 > li > ul.navi_04{left:413px !important;}
.header #gnb1 > li > ul.navi_05{left:543px !important;} 
.fp-tableCell{display:block;}
.footer{padding-top:0px !important;}
}


@media  (max-width: 1366px){
.s_menu > li { width: 70px; padding: 3px !important; float: left !important; margin-left: 15px !important; margin-top: 15px !important;}
.s_menu > li > a {font-size:3px !important; padding: 3px !important;}

#section3 .special{bottom:10px !important;}
#section1 .bx-wrapper, #section1 .bx-viewport, #section1 ul, #section1 li{width:1366px; overflow:auto; height:625px; overflow-y:hidden;}
.aboutCon0203{top:35%;}
.header #gnb > li > ul{width:129px !important;}
.header #gnb1 > li > ul.navi_01{left:64px !important;}
.header #gnb1 > li > ul.navi_02{left:193px!important;}
.header #gnb1 > li > ul.navi_03{left:322px !important;}
.header #gnb1 > li > ul.navi_04{left:451px !important;}
.header #gnb1 > li > ul.navi_05{left:581px !important;} 
}


@media  (max-width: 1360px){
#section1 .bx-wrapper, #section1 .bx-viewport, #section1 ul, #section1 li{width:1360px}
.header #gnb > li > ul{width:129px !important;}
.header #gnb1 > li > ul.navi_01{left:69px !important;}
.header #gnb1 > li > ul.navi_02{left:184px!important;}
.header #gnb1 > li > ul.navi_03{left:316px !important;}
.header #gnb1 > li > ul.navi_04{left:444px !important;}
.header #gnb1 > li > ul.navi_05{left:576px !important;} 

}

@media (max-width:1280px){
#section1 .bx-wrapper, #section1 .bx-viewport, #section1 ul, #section1 li{width:1280px}
#section1 li img{width:100%;}
#myVideo{width:100%;}
#section3 .special{bottom:-60px !important;}
#facs ul{padding-top:5px;}
.header #gnb1 > li > ul.navi_01{left:98px;}
.header #gnb1 > li > ul.navi_02{left:210px;}
.header #gnb1 > li > ul.navi_03{left:333px;}
.header #gnb1 > li > ul.navi_04{left:454px;}
.header #gnb1 > li > ul.navi_05{left:585px;}
.header #gnb1 > li > ul{width:129px;}
.header #gnb1 > li > a{padding:0px 34px;}
#section1 .bx-wrapper, #section1 .bx-viewport, #section1 ul, #section1 li{width:1600px}
}


@keyframes opacitySpecial {
  from { opacity:0 }
  to {opacity:1; }
}

.special {padding-bottom:50px;}
.special li:hover strong { color:#3e78cc;}
.special li strong {font-family:'Noto Serif','serif', 'Noto Sans KR','NanumGoithic', "맑은 고딕", 'Nanum Myeongjo'; display:block; font-size:17px; font-style:italic; color:#494949; margin-top:15px; margin-bottom:7px;}
.no-italic {font-style:normal !important;}
.special li span {color:#888; font-size:13px; display:block; font-weight:300;}


/* FOOTER */
.footer {padding-top:87px; height:200px; position:relative; background:#fff;}
.footer ul.fnb {border-top:1px solid #ccc; text-align:center; padding-top:50px; padding-bottom:65px;}
.footer ul.fnb li {display:inline-block; width:270px; margin:0 50px;}
.footer ul.fnb li strong {font-family:"Noto Serif","serif";	font-size:17px; color:#555; font-style:italic; display:block; padding-bottom:15px;}
.footer ul.fnb li p {padding:10px 0; font-weight:300; font-size:12px; color:#a9a9a9; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}

.fnb li p b:before {content: "";display: inline-block;background-image: url("http://hi-web.co.kr/web/img/hi_web_b.png");vertical-align: middle;width: 20px;height: 20px;background-size: cover;background-position: center;margin: 0 1px 4px 4px;}


/*popup*/
body.main > .popup {display:block; opacity:1; min-width:300px; width:22%;}
.popup {background:#fff; position:absolute; z-index:9999; top:20%; right:82px;	}
.popup.hide {display:none !important; opacity:0;}
.popup-body a { display:block; }


.simbol{width: 22px; display: inline-block; position: relative; top: 5px;}
#tm_bt{ width: 6%; /*height: 4%;*/  position: absolute;  right: 1%;  bottom: 80px;   z-index:999;}


@media (max-height: 816px) { 
.popup {top:auto;bottom:10px;}
.popup .popup-body {max-height:90vh;box-sizing:border-box;}
.popup .popup-body a {max-height:calc(90vh - 50px);}
.popup .popup-body a img {display:block;max-height:calc(90vh - 50px);margin:0 auto;}}
.popup .close {padding:0 20px 10px;position:relative;}
.popup .close input { vertical-align:middle;border-radius:0; }
.popup .close label { color:#3c3c3c;vertical-align:middle;font-size:14px; }
.bnn-close { border:0;padding:0;background:none;position:absolute;right:25px;top:5px;color:#555;outline:0;cursor:pointer;}
.bnn-close span {display:inline-block;height:20px;font-size:14px;line-height:20px;vertical-align:bottom;}
.ico-x {  display:inline-block;width:20px;height:20px;vertical-align:bottom;position:relative;}
.ico-x:before, .ico-x:after {content:'';width:20px;height:1px;background:#555;display:block;position:absolute;top:10px;left:0px;}
.ico-x:before { -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.ico-x:after {-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);}
}