/* Font */ @font-face { font-family: Parisienne; src: url(./fonts/Parisienne/Parisienne-Regular.ttf); } @font-face { font-family: Nanum Pen Script; src: url(./fonts/Nanum_Pen_Script/NanumPenScript-Regular.ttf); } @font-face { font-family: Ma Shan Zheng; src: url(./fonts/Ma_Shan_Zheng/MaShanZheng-Regular.ttf); } /* POPUP */ .popup { position: absolute; top: 0px; left: 0px; width: 1920px; height: 1080px; display: block; z-index: 1; } /* Hotkey(red) */ .popup .hotkey_mm_red { position: absolute; width: 100%; height: 100%; padding: 0px; overflow: hidden; display: none; } .popup .hotkey_mm_red div#lst_hotkey_mm_red { position: absolute; /* width: 1464px; height: 1007px; margin: 36px 226px 36px 226px; */ width: 100%; height: 100%; padding: 0; border-style: solid; border-color: rgb(160, 160, 160); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)); } .popup .hotkey_mm_red .owl-carousel .owl-stage-outer { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_red .owl-carousel .owl-stage-outer .owl-stage { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_red .owl-carousel .owl-stage-outer .owl-stage .owl-item { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_red div .item { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_red .owl-nav .nav-btn { /* height: 47px; */ position: absolute; /* width: 26px; */ /* cursor: pointer; */ top: 480px !important; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)); } .popup .hotkey_mm_red .owl-nav .owl-prev.disabled, .popup .hotkey_mm_red .owl-nav .owl-next.disabled { pointer-events: none; opacity: 0.4; } .popup .hotkey_mm_red .owl-nav .prev-slide { background: url(images/icon_brochure_prev.png) no-repeat scroll 0 0; left: 20px; width: 64px; height: 64px; background-size: contain; } .popup .hotkey_mm_red .owl-nav .next-slide { background: url(images/icon_brochure_next.png) no-repeat scroll 0px 0px; right: 20px; width: 64px; height: 64px; background-size: contain; } .popup .hotkey_mm_red .owl-dots { position: absolute; top: 1000px; width: 100%; align-content: center; } .popup .hotkey_mm_red .owl-dots .owl-dot span { width: 15px; border: 2px solid rgba(80, 80, 80, 0.8); filter: drop-shadow(0 1px 2px rgb(0, 0, 0)); background: none; } /* Hotkey(green) */ .popup .hotkey_mm_green { position: absolute; width: 100%; height: 100%; padding: 0px; overflow: hidden; display: none; } .popup .hotkey_mm_green div#lst_hotkey_mm_green { position: absolute; /* width: 1464px; height: 1007px; margin: 36px 226px 36px 226px; */ width: 100%; height: 100%; padding: 0; border-style: solid; border-color: rgb(160, 160, 160); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)); } .popup .hotkey_mm_green .owl-carousel .owl-stage-outer { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_green .owl-carousel .owl-stage-outer .owl-stage { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_green .owl-carousel .owl-stage-outer .owl-stage .owl-item { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_green div .item { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_green .owl-nav .nav-btn { /* height: 47px; */ position: absolute; /* width: 26px; */ /* cursor: pointer; */ top: 480px !important; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)); } .popup .hotkey_mm_green .owl-nav .owl-prev.disabled, .popup .hotkey_mm_green .owl-nav .owl-next.disabled { pointer-events: none; opacity: 0.4; } .popup .hotkey_mm_green .owl-nav .prev-slide { background: url(images/icon_brochure_prev.png) no-repeat scroll 0 0; left: 20px; width: 64px; height: 64px; background-size: contain; } .popup .hotkey_mm_green .owl-nav .next-slide { background: url(images/icon_brochure_next.png) no-repeat scroll 0px 0px; right: 20px; width: 64px; height: 64px; background-size: contain; } .popup .hotkey_mm_green .owl-dots { position: absolute; top: 1000px; width: 100%; align-content: center; } .popup .hotkey_mm_green .owl-dots .owl-dot span { width: 15px; border: 2px solid rgba(80, 80, 80, 0.8); filter: drop-shadow(0 1px 2px rgb(0, 0, 0)); background: none; } /* Hotkey(blue) */ .popup .hotkey_mm_blue { position: absolute; width: 100%; height: 100%; padding: 0px; overflow: hidden; display: none; } .popup .hotkey_mm_blue div#lst_hotkey_mm_blue { position: absolute; /* width: 1464px; height: 1007px; margin: 36px 226px 36px 226px; */ width: 100%; height: 100%; padding: 0; border-style: solid; border-color: rgb(160, 160, 160); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)); } .popup .hotkey_mm_blue .owl-carousel .owl-stage-outer { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_blue .owl-carousel .owl-stage-outer .owl-stage { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_blue .owl-carousel .owl-stage-outer .owl-stage .owl-item { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_blue div .item { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_blue .owl-nav .nav-btn { /* height: 47px; */ position: absolute; /* width: 26px; */ /* cursor: pointer; */ top: 480px !important; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)); } .popup .hotkey_mm_blue .owl-nav .owl-prev.disabled, .popup .hotkey_mm_blue .owl-nav .owl-next.disabled { pointer-events: none; opacity: 0.4; } .popup .hotkey_mm_blue .owl-nav .prev-slide { background: url(images/icon_brochure_prev.png) no-repeat scroll 0 0; left: 20px; width: 64px; height: 64px; background-size: contain; } .popup .hotkey_mm_blue .owl-nav .next-slide { background: url(images/icon_brochure_next.png) no-repeat scroll 0px 0px; right: 20px; width: 64px; height: 64px; background-size: contain; } .popup .hotkey_mm_blue .owl-dots { position: absolute; top: 1000px; width: 100%; align-content: center; } .popup .hotkey_mm_blue .owl-dots .owl-dot span { width: 15px; border: 2px solid rgba(80, 80, 80, 0.8); filter: drop-shadow(0 1px 2px rgb(0, 0, 0)); background: none; } /* Hotkey(yellow) */ .popup .hotkey_mm_yellow { position: absolute; width: 100%; height: 100%; padding: 0px; overflow: hidden; display: none; } .popup .hotkey_mm_yellow div#lst_hotkey_mm_yellow { position: absolute; /* width: 1464px; height: 1007px; margin: 36px 226px 36px 226px; */ width: 100%; height: 100%; padding: 0; border-style: solid; border-color: rgb(160, 160, 160); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)); } .popup .hotkey_mm_yellow .owl-carousel .owl-stage-outer { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_yellow .owl-carousel .owl-stage-outer .owl-stage { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_yellow .owl-carousel .owl-stage-outer .owl-stage .owl-item { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_yellow div .item { width: 100%; height: 100%; margin: 0; padding: 0; } .popup .hotkey_mm_yellow .owl-nav .nav-btn { /* height: 47px; */ position: absolute; /* width: 26px; */ /* cursor: pointer; */ top: 480px !important; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)); } .popup .hotkey_mm_yellow .owl-nav .owl-prev.disabled, .popup .hotkey_mm_yellow .owl-nav .owl-next.disabled { pointer-events: none; opacity: 0.4; } .popup .hotkey_mm_yellow .owl-nav .prev-slide { background: url(images/icon_brochure_prev.png) no-repeat scroll 0 0; left: 20px; width: 64px; height: 64px; background-size: contain; } .popup .hotkey_mm_yellow .owl-nav .next-slide { background: url(images/icon_brochure_next.png) no-repeat scroll 0px 0px; right: 20px; width: 64px; height: 64px; background-size: contain; } .popup .hotkey_mm_yellow .owl-dots { position: absolute; top: 1000px; width: 100%; align-content: center; } .popup .hotkey_mm_yellow .owl-dots .owl-dot span { width: 15px; border: 2px solid rgba(80, 80, 80, 0.8); filter: drop-shadow(0 1px 2px rgb(0, 0, 0)); background: none; } /*********************** * Amenity Style * ***********************/ .popup .amenity { position: absolute; top: 96px; left: -560px; width: 1302px; height: 700px; overflow: hidden; display: none; /* background-color: rgba(47, 47, 47, 1); */ /* border-style: solid; */ /* border-color: rgb(96, 96, 96); */ /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); */ } .popup .amenity .menu { width: 496px; height: 700px; overflow: hidden; display: inline-block; background-color: rgba(51, 63, 80, 1); color: rgb(255, 255, 255); vertical-align: top; /* border-style: solid; */ /* border-color: rgb(96, 96, 96); */ /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); */ /* box-shadow: 0px 0px 30px rgba(0, 0, 0, 1); */ } .popup .amenity .menu>#title { /* width: 466px; */ height: 45px; line-height: 36px; overflow: hidden; font-size: 38px; text-align: left; margin: 10px 20px 5px 20px; } .popup .amenity .menu>#usage { /* width: 454px; */ height: 112px; line-height: 22px; font-size: 18px; text-align: left; margin: 5px 22px 5px 22px; border-bottom: 1px solid rgb(67, 82, 105); white-space: pre-line; overflow: hidden; } .popup .amenity .menu>#items { height: 282px; overflow-y: hidden; overflow-x: hidden; margin: 5px 22px 5px 22px; } .popup .amenity .menu>#items table { width: 100%; margin: 0px 10px 0 0px; border-collapse: collapse; } .popup .amenity .menu>#items>.tbl_header { height: 34px; max-height: 34px; line-height: 32px; font-size: 30px; text-align: center; margin: 5px 0 25px 0; } .popup .amenity .menu>#items>.tbl_header tbody tr { width: 100%; } .popup .amenity .menu>#items>.tbl_header tbody tr>#type { width: 70%; float: left; } .popup .amenity .menu>#items>.tbl_header tbody tr>#quantity { width: 30%; float: left; } .popup .amenity .menu>#items>.tbl_record { height: 210px; } .popup .amenity .menu>#items>.tbl_record tbody { height: 210px; display: block; overflow: hidden; } .popup .amenity .menu>#items>.tbl_record tbody tr { height: 70px; max-height: 70px; border: 1px solid rgb(67, 82, 105); } .popup .amenity .menu>#items>.tbl_record tbody tr.active { border: 2px solid rgb(255, 192, 0); /* background-color: rgba(67, 67, 67, 1); */ /* box-shadow: 0px 0px 30px rgba(255, 192, 0, 1); */ } .popup .amenity .menu>#items>.tbl_record tbody tr>.products { height: 70px; } .popup .amenity .menu>#items>.tbl_record tbody tr>.products>#index { font-size: 22px; line-height: 24px; width: 10%; float: left; text-align: center; } .popup .amenity .menu>#items>.tbl_record tbody tr>.products>#title { font-size: 22px; line-height: 24px; width: 90%; float: left; } .popup .amenity .menu>#items>.tbl_record tbody tr>.products>#price { font-size: 36px; line-height: 36px; width: 70%; float: left; text-align: right; padding: 0 55px 0 0; } .popup .amenity .menu>#items>.tbl_record tbody tr>.products>#quantity { font-size: 36px; line-height: 36px; width: 30%; float: left; text-align: center; } .popup .amenity .menu>#summary { height: 70px; font-size: 38px; line-height: 64px; margin: 15px 22px 5px 22px; border: 1px solid rgb(67, 82, 105); } .popup .amenity .menu>#summary>#title { width: 22%; float: left; text-align: center; /* padding: 0% 5% 0 20%; */ } .popup .amenity .menu>#summary>#value { width: 48%; float: left; text-align: right; color: rgb(255, 192, 0); padding: 0px 55px 0px 0px; } .popup .amenity .menu>#summary>#quantity { width: 30%; float: left; text-align: center; color: rgb(255, 192, 0); } .popup .amenity .menu>div#buttons { height: 145px; font-size: 30px; text-align: center; color: rgba(255, 255, 255, 1.0); margin: 15px 22px 5px 22px; } .popup .amenity .menu>div#buttons div { height: 38px; border: 1px solid rgb(90, 90, 90); } .popup .amenity .menu>div#buttons .active { border: 1px solid rgb(255, 192, 0); background-color: rgba(34, 42, 53, 1.0); } .popup .amenity .menu>div#buttons #order { width: 100%; background-color: rgba(34, 42, 53, 1.0); /* border-radius: 5px; */ } .popup .amenity .menu>div#buttons #cancel { width: 100%; /* border-radius: 5px; */ } .popup .amenity .menu>div#buttons #details { width: 100%; /* border-radius: 5px; */ } /* ROOM SERVICE -> ITEM Description */ .popup .amenity .description { width: 802px; height: 700px; display: inline-block; margin: 0px 0px 0px -4px; color: rgb(255, 255, 255); /* padding: 0; */ background-color: rgba(36, 44, 56, 1.0); } .popup .amenity .description>#title { width: 100%; height: 64px; line-height: 38px; overflow: hidden; font-size: 36px; padding: 10px 10px 5px 10px; } .popup .amenity .description>#comment { width: 100%; height: 89px; line-height: 24px; overflow: hidden; font-size: 22px; padding: 5px 10px 5px 15px; white-space: pre-line; } .popup .amenity .description>#thumb { width: 760px; height: 460px; background-repeat: no-repeat; background-size: cover; margin: 30px 0px 0px 21px; border: 1px solid rgb(255, 255, 255); } /* ROOM SERVICE -> CART LIST */ .popup .amenity>.cart-list { width: 802px; height: 700px; display: inline-block; margin: 0px 0px 0px -4px; color: rgb(255, 255, 255); /* padding: 0; */ background-color: rgba(36, 44, 56, 1.0); } .popup .amenity>.cart-list>#title { height: 45px; line-height: 36px; overflow: hidden; font-size: 38px; text-align: left; margin: 10px 20px 5px 20px; } .popup .amenity>.cart-list>#usage { height: 102px; line-height: 22px; font-size: 18px; text-align: left; margin: 5px 22px 5px 22px; white-space: pre-line; overflow: hidden; } .popup .amenity .cart-list>#items { /* height: 352px; */ /* overflow-y: auto; */ /* overflow-y: hidden; overflow-x: hidden; */ margin: 5px 22px 5px 22px; } .popup .amenity .cart-list>#items table { width: 100%; margin: 0px 10px 0 0px; border-collapse: collapse; } .popup .amenity .cart-list>#items>.tbl_header { line-height: 54px; font-size: 30px; text-align: center; margin: 5px 0 15px 0; } .popup .amenity .cart-list>#items>.tbl_header tbody tr { height: 54px; max-height: 54px; background-color: rgb(51, 63, 80); border: 1px solid rgb(67, 82, 105); } .popup .amenity .cart-list>#items>.tbl_header tbody tr>#type { width: 50%; float: left; text-align: left; padding: 0 0px 0 80px; } .popup .amenity .cart-list>#items>.tbl_header tbody tr>#quantity { width: 20%; float: left; } .popup .amenity .cart-list>#items>.tbl_header tbody tr>#amount { width: 30%; float: left; padding: 0px 30px 0 0px; } .popup .amenity .cart-list>#items>.tbl_record { /* height: 284px;*/ } .popup .amenity .cart-list>#items>.tbl_record tbody { height: 276px; display: block; /* overflow: hidden; */ overflow-y: auto; } .popup .amenity .cart-list>#items>.tbl_record tbody tr { height: 52px; } .popup .amenity .cart-list>#items>.tbl_record tbody tr.active { border: 2px solid rgb(255, 192, 0); /* background-color: rgba(67, 67, 67, 1); */ /* box-shadow: 0px 0px 30px rgba(255, 192, 0, 1); */ } .popup .amenity .cart-list>#items>.tbl_record tbody tr>.products { height: 52px; width: 754px; font-size: 30px; line-height: 54px; border: 1px solid rgb(67, 82, 105); } .popup .amenity .cart-list>#items>.tbl_record tbody tr>.products>#title { width: 50%; float: left; padding: 0px 0px 0px 20px; } .popup .amenity .cart-list>#items>.tbl_record tbody tr>.products>#quantity { width: 20%; float: left; text-align: center; } .popup .amenity .cart-list>#items>.tbl_record tbody tr>.products>#price { width: 30%; float: left; text-align: right; padding: 0px 30px 0 0px; } .popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar { display: block; width: 20px; /* 세로축 스크롤바 길이 */ height: 20px; /* 가로축 스크롤바 길이 */ } .popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-track { background-color: rgb(67, 82, 105); } .popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-track-piece { background-color: rgb(80, 98, 124); } .popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgb(51, 63, 80); } .popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-button:start { display: none; /* background-color: orange; */ /* Top, Left 방향의 이동버튼 */ } .popup .amenity .cart-list>#items>.tbl_record ::-webkit-scrollbar-button:end { display: none; /* background-color: orange; */ /* Bottom, Right 방향의 이동버튼 */ } .popup .amenity .cart-list>#summary { height: 54px; font-size: 38px; line-height: 54px; background-color: rgb(51, 63, 80); margin: 5px 22px 5px 22px; border: 1px solid rgb(67, 82, 105); } .popup .amenity .cart-list>#summary>#title { width: 30%; float: left; text-align: center; /* padding: 0% 5% 0 20%;*/ } .popup .amenity .cart-list>#summary>#quantity { width: 40%; float: left; text-align: center; padding: 0 0 0 142px; color: rgb(255, 192, 0); } .popup .amenity .cart-list>#summary>#amount { width: 30%; float: left; text-align: right; color: rgb(255, 192, 0); padding: 0px 30px 0px 0px; } .popup .amenity .cart-list>#notice { font-size: 22px; line-height: 24px; margin: 10px 22px 5px 22px; text-align: center; } .popup .amenity .cart-list>div#buttons { font-size: 38px; text-align: center; color: rgba(255, 255, 255, 1.0); margin: 15px 22px 5px 22px; } .popup .amenity .cart-list>div#buttons>div { height: 38px; float: left; width: 50%; } .popup .amenity .cart-list>div#buttons>div div { height: 48px; border: 1px solid rgb(184, 184, 184); margin: 0px 25% 0px 25%; background-color: rgb(51, 63, 80); } .popup .amenity .cart-list>div#buttons .active { border: 1px solid rgb(255, 192, 0); background-color: rgba(34, 42, 53, 1.0); } .popup .amenity .cart-list>div#buttons #confirm { width: 50%; } .popup .amenity .cart-list>div#buttons #cancel { width: 50%; } /* ROOM SERVICE -> ORDER Details */ .popup .amenity .order-details { position: absolute; width: 100%; height: 100%; background-color: rgb(36, 44, 56); /* display: block; */ display: inline-block; color: rgb(255, 255, 255); } .popup .amenity .order-details>#title { /* width: 466px; */ height: 45px; line-height: 36px; overflow: hidden; font-size: 38px; text-align: left; margin: 10px 20px 5px 30px; } .popup .amenity .order-details>#usage { height: 80px; line-height: 22px; font-size: 18px; text-align: left; margin: 5px 22px 5px 30px; /* border-bottom: 1px solid rgb(67, 82, 105); */ white-space: pre-line; overflow: hidden; } .popup .amenity .order-details>#orders { height: 470px; overflow-y: hidden; overflow-x: hidden; margin: 5px 30px 5px 30px; } .popup .amenity .order-details>#orders>table { border-collapse: collapse; } .popup .amenity .order-details>#orders>.order_list { width: 100%; height: 485px; } .popup .amenity .order-details>#orders>.order_list>tbody { height: 210px; } .popup .amenity .order-details>#orders>.order_list>tbody>tr { height: 70px; max-height: 70px; border: 1px solid rgb(67, 82, 105); } .popup .amenity .order-details>#orders>.order_list>tbody>tr.active { border: 2px solid rgb(255, 192, 0); /* background-color: rgba(67, 67, 67, 1); */ /* box-shadow: 0px 0px 30px rgba(255, 192, 0, 1); */ } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.ordering { height: 44px; max-height: 44px; background-color: rgb(51, 63, 80); } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.ordering>div { padding: 0px 0px 5px 0px; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.ordering>#index { font-size: 30px; line-height: 32px; width: 5%; float: left; text-align: center; border-bottom: 1px solid; margin: 5px 0px 0px 2%; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.ordering>#date { font-size: 30px; line-height: 32px; width: 37%; float: left; border-bottom: 1px solid; margin: 5px 0px 0px 0; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.ordering>#orderId { font-size: 28px; line-height: 32px; width: 53%; float: left; /* text-align: right; */ margin: 5px 2% 0px 0%; } /* */ .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst { width: 100%; float: left; background-color: rgb(51, 63, 80); margin: 0px 0px 5px 0px; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header { width: 100%; font-size: 36px; line-height: 36px; border-collapse: collapse; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header>tbody { /* */ } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header tr { font-size: 30px; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #type { width: 40%; font-size: 25px; text-align: left; padding: 0px 0px 0px 90px; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #quantity { width: 10%; font-size: 25px; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #amount { width: 20%; font-size: 25px; text-align: right; padding: 0px 30px 0px 0px; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal1 {} .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal2 { color: rgb(255, 192, 0); } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal3 {} .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal4 { color: rgb(255, 192, 0); } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal5 {} .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record { width: 100%; font-size: 36px; line-height: 36px; border-collapse: collapse; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record>tbody {} .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr {} .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem {} .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div { float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#name { width: 40%; text-align: left; padding: 0px 0px 0px 90px; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#quantity { width: 10%; text-align: center; } .popup .amenity .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#amount { width: 20%; text-align: right; padding: 0px 20px 0px 0px; } .popup .amenity .order-details>#summary { height: 54px; line-height: 50px; overflow: hidden; font-size: 38px; text-align: left; margin: 15px 20px 5px 30px; background-color: rgb(51, 63, 80); } .popup .amenity .order-details>#summary>div { float: left; } .popup .amenity .order-details>#summary>#title { width: 40%; padding: 0px 0px 0px 90px; text-align: left; } .popup .amenity .order-details>#summary>#quantity { width: 10%; text-align: center; color: rgb(255, 192, 0); } .popup .amenity .order-details>#summary>#amount { width: 20%; text-align: right; padding: 0px 20px 0px 0px; color: rgb(255, 192, 0); } /* ROOM SERVICE -> ALRET */ .popup .amenity .alert { position: absolute; top: 197px; left: 340px; width: 600px; height: 325px; color: rgb(255, 255, 255); } .popup .amenity .alert>div#order-complete { width: 100%; height: 100%; background-color: rgb(36, 44, 56); border: 1px solid rgb(255, 255, 255); } .popup .amenity .alert>div#order-complete>div#title { float: left; width: 100%; height: 54px; background-color: rgb(51, 63, 80); margin: 42px 0px 0 0px; font-size: 38px; line-height: 52px; text-align: center; } .popup .amenity .alert>div#order-complete>div#message { width: 95%; float: left; margin: 40px 20px 5px 20px; font-size: 22px; line-height: 24px; text-align: center; white-space: pre-wrap; } /*********************** * Room Service Style * ***********************/ .popup .roomservice { position: absolute; top: 96px; left: -560px; width: 1302px; height: 700px; overflow: hidden; display: none; /* background-color: rgba(47, 47, 47, 1); */ /* border-style: solid; */ /* border-color: rgb(96, 96, 96); */ /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); */ } .popup .roomservice .menu { width: 496px; height: 700px; overflow: hidden; display: inline-block; background-color: rgba(51, 63, 80, 1); color: rgb(255, 255, 255); vertical-align: top; /* border-style: solid; */ /* border-color: rgb(96, 96, 96); */ /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); */ /* box-shadow: 0px 0px 30px rgba(0, 0, 0, 1); */ } .popup .roomservice .menu>#title { /* width: 466px; */ height: 45px; line-height: 36px; overflow: hidden; font-size: 38px; text-align: left; margin: 10px 20px 5px 20px; } .popup .roomservice .menu>#usage { /* width: 454px; */ height: 112px; line-height: 22px; font-size: 18px; text-align: left; margin: 5px 22px 5px 22px; border-bottom: 1px solid rgb(67, 82, 105); white-space: pre-line; overflow: hidden; } .popup .roomservice .menu>#items { height: 282px; overflow-y: hidden; overflow-x: hidden; margin: 5px 22px 5px 22px; } .popup .roomservice .menu>#items table { width: 100%; margin: 0px 10px 0 0px; border-collapse: collapse; } .popup .roomservice .menu>#items>.tbl_header { height: 34px; max-height: 34px; line-height: 32px; font-size: 30px; text-align: center; margin: 5px 0 25px 0; } .popup .roomservice .menu>#items>.tbl_header tbody tr { width: 100%; } .popup .roomservice .menu>#items>.tbl_header tbody tr>#type { width: 70%; float: left; } .popup .roomservice .menu>#items>.tbl_header tbody tr>#quantity { width: 30%; float: left; } .popup .roomservice .menu>#items>.tbl_record { height: 210px; } .popup .roomservice .menu>#items>.tbl_record tbody { height: 210px; display: block; overflow: hidden; } .popup .roomservice .menu>#items>.tbl_record tbody tr { height: 70px; max-height: 70px; border: 1px solid rgb(67, 82, 105); } .popup .roomservice .menu>#items>.tbl_record tbody tr.active { border: 2px solid rgb(255, 192, 0); /* background-color: rgba(67, 67, 67, 1); */ /* box-shadow: 0px 0px 30px rgba(255, 192, 0, 1); */ } .popup .roomservice .menu>#items>.tbl_record tbody tr>.products { height: 70px; } .popup .roomservice .menu>#items>.tbl_record tbody tr>.products>#index { font-size: 22px; line-height: 24px; width: 10%; float: left; text-align: center; } .popup .roomservice .menu>#items>.tbl_record tbody tr>.products>#title { font-size: 22px; line-height: 24px; width: 90%; float: left; } .popup .roomservice .menu>#items>.tbl_record tbody tr>.products>#price { font-size: 36px; line-height: 36px; width: 70%; float: left; text-align: right; padding: 0 55px 0 0; } .popup .roomservice .menu>#items>.tbl_record tbody tr>.products>#quantity { font-size: 36px; line-height: 36px; width: 30%; float: left; text-align: center; } .popup .roomservice .menu>#summary { height: 70px; font-size: 38px; line-height: 64px; margin: 15px 22px 5px 22px; border: 1px solid rgb(67, 82, 105); } .popup .roomservice .menu>#summary>#title { width: 22%; float: left; text-align: center; /* padding: 0% 5% 0 20%; */ } .popup .roomservice .menu>#summary>#value { width: 48%; float: left; text-align: right; color: rgb(255, 192, 0); padding: 0px 55px 0px 0px; } .popup .roomservice .menu>#summary>#quantity { width: 30%; float: left; text-align: center; color: rgb(255, 192, 0); } .popup .roomservice .menu>div#buttons { height: 145px; font-size: 30px; text-align: center; color: rgba(255, 255, 255, 1.0); margin: 15px 22px 5px 22px; } .popup .roomservice .menu>div#buttons div { height: 38px; border: 1px solid rgb(90, 90, 90); } .popup .roomservice .menu>div#buttons .active { border: 1px solid rgb(255, 192, 0); background-color: rgba(34, 42, 53, 1.0); } .popup .roomservice .menu>div#buttons #order { width: 100%; background-color: rgba(34, 42, 53, 1.0); /* border-radius: 5px; */ } .popup .roomservice .menu>div#buttons #cancel { width: 100%; /* border-radius: 5px; */ } .popup .roomservice .menu>div#buttons #details { width: 100%; /* border-radius: 5px; */ } /* ROOM SERVICE -> ITEM Description */ .popup .roomservice .description { width: 802px; height: 700px; display: inline-block; margin: 0px 0px 0px -4px; color: rgb(255, 255, 255); /* padding: 0; */ background-color: rgba(36, 44, 56, 1.0); } .popup .roomservice .description>#title { width: 100%; height: 64px; line-height: 38px; overflow: hidden; font-size: 36px; padding: 10px 10px 5px 10px; } .popup .roomservice .description>#comment { width: 100%; height: 89px; line-height: 24px; overflow: hidden; font-size: 22px; padding: 5px 10px 5px 15px; white-space: pre-line; } .popup .roomservice .description>#thumb { width: 760px; height: 460px; background-repeat: no-repeat; background-size: cover; margin: 30px 0px 0px 21px; border: 1px solid rgb(255, 255, 255); } /* ROOM SERVICE -> CART LIST */ .popup .roomservice>.cart-list { width: 802px; height: 700px; display: inline-block; margin: 0px 0px 0px -4px; color: rgb(255, 255, 255); /* padding: 0; */ background-color: rgba(36, 44, 56, 1.0); } .popup .roomservice>.cart-list>#title { height: 45px; line-height: 36px; overflow: hidden; font-size: 38px; text-align: left; margin: 10px 20px 5px 20px; } .popup .roomservice>.cart-list>#usage { height: 102px; line-height: 22px; font-size: 18px; text-align: left; margin: 5px 22px 5px 22px; white-space: pre-line; overflow: hidden; } .popup .roomservice .cart-list>#items { /* height: 352px; */ /* overflow-y: auto; */ /* overflow-y: hidden; overflow-x: hidden; */ margin: 5px 22px 5px 22px; } .popup .roomservice .cart-list>#items table { width: 100%; margin: 0px 10px 0 0px; border-collapse: collapse; } .popup .roomservice .cart-list>#items>.tbl_header { line-height: 54px; font-size: 30px; text-align: center; margin: 5px 0 15px 0; } .popup .roomservice .cart-list>#items>.tbl_header tbody tr { height: 54px; max-height: 54px; background-color: rgb(51, 63, 80); border: 1px solid rgb(67, 82, 105); } .popup .roomservice .cart-list>#items>.tbl_header tbody tr>#type { width: 50%; float: left; text-align: left; padding: 0 0px 0 80px; } .popup .roomservice .cart-list>#items>.tbl_header tbody tr>#quantity { width: 20%; float: left; } .popup .roomservice .cart-list>#items>.tbl_header tbody tr>#amount { width: 30%; float: left; padding: 0px 30px 0 0px; } .popup .roomservice .cart-list>#items>.tbl_record { /* height: 284px;*/ } .popup .roomservice .cart-list>#items>.tbl_record tbody { height: 276px; display: block; /* overflow: hidden; */ overflow-y: auto; } .popup .roomservice .cart-list>#items>.tbl_record tbody tr { height: 52px; } .popup .roomservice .cart-list>#items>.tbl_record tbody tr.active { border: 2px solid rgb(255, 192, 0); /* background-color: rgba(67, 67, 67, 1); */ /* box-shadow: 0px 0px 30px rgba(255, 192, 0, 1); */ } .popup .roomservice .cart-list>#items>.tbl_record tbody tr>.products { height: 52px; width: 754px; font-size: 30px; line-height: 54px; border: 1px solid rgb(67, 82, 105); } .popup .roomservice .cart-list>#items>.tbl_record tbody tr>.products>#title { width: 50%; float: left; padding: 0px 0px 0px 20px; } .popup .roomservice .cart-list>#items>.tbl_record tbody tr>.products>#quantity { width: 20%; float: left; text-align: center; } .popup .roomservice .cart-list>#items>.tbl_record tbody tr>.products>#price { width: 30%; float: left; text-align: right; padding: 0px 30px 0 0px; } .popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar { display: block; width: 20px; /* 세로축 스크롤바 길이 */ height: 20px; /* 가로축 스크롤바 길이 */ } .popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-track { background-color: rgb(67, 82, 105); } .popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-track-piece { background-color: rgb(80, 98, 124); } .popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgb(51, 63, 80); } .popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-button:start { display: none; /* background-color: orange; */ /* Top, Left 방향의 이동버튼 */ } .popup .roomservice .cart-list>#items>.tbl_record ::-webkit-scrollbar-button:end { display: none; /* background-color: orange; */ /* Bottom, Right 방향의 이동버튼 */ } .popup .roomservice .cart-list>#summary { height: 54px; font-size: 38px; line-height: 54px; background-color: rgb(51, 63, 80); margin: 5px 22px 5px 22px; border: 1px solid rgb(67, 82, 105); } .popup .roomservice .cart-list>#summary>#title { width: 30%; float: left; text-align: center; /* padding: 0% 5% 0 20%;*/ } .popup .roomservice .cart-list>#summary>#quantity { width: 40%; float: left; text-align: center; padding: 0 0 0 142px; color: rgb(255, 192, 0); } .popup .roomservice .cart-list>#summary>#amount { width: 30%; float: left; text-align: right; color: rgb(255, 192, 0); padding: 0px 30px 0px 0px; } .popup .roomservice .cart-list>#notice { font-size: 22px; line-height: 24px; margin: 10px 22px 5px 22px; text-align: center; } .popup .roomservice .cart-list>div#buttons { font-size: 38px; text-align: center; color: rgba(255, 255, 255, 1.0); margin: 15px 22px 5px 22px; } .popup .roomservice .cart-list>div#buttons>div { height: 38px; float: left; width: 50%; } .popup .roomservice .cart-list>div#buttons>div div { height: 48px; border: 1px solid rgb(184, 184, 184); margin: 0px 25% 0px 25%; background-color: rgb(51, 63, 80); } .popup .roomservice .cart-list>div#buttons .active { border: 1px solid rgb(255, 192, 0); background-color: rgba(34, 42, 53, 1.0); } .popup .roomservice .cart-list>div#buttons #confirm { width: 50%; } .popup .roomservice .cart-list>div#buttons #cancel { width: 50%; } /* ROOM SERVICE -> ORDER Details */ .popup .roomservice .order-details { position: absolute; width: 100%; height: 100%; background-color: rgb(36, 44, 56); /* display: block; */ display: inline-block; color: rgb(255, 255, 255); } .popup .roomservice .order-details>#title { /* width: 466px; */ height: 45px; line-height: 36px; overflow: hidden; font-size: 38px; text-align: left; margin: 10px 20px 5px 30px; } .popup .roomservice .order-details>#usage { height: 80px; line-height: 22px; font-size: 18px; text-align: left; margin: 5px 22px 5px 30px; /* border-bottom: 1px solid rgb(67, 82, 105); */ white-space: pre-line; overflow: hidden; } .popup .roomservice .order-details>#orders { height: 470px; overflow-y: hidden; overflow-x: hidden; margin: 5px 30px 5px 30px; } .popup .roomservice .order-details>#orders>table { border-collapse: collapse; } .popup .roomservice .order-details>#orders>.order_list { width: 100%; height: 485px; } .popup .roomservice .order-details>#orders>.order_list>tbody { height: 210px; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr { height: 70px; max-height: 70px; border: 1px solid rgb(67, 82, 105); } .popup .roomservice .order-details>#orders>.order_list>tbody>tr.active { border: 2px solid rgb(255, 192, 0); /* background-color: rgba(67, 67, 67, 1); */ /* box-shadow: 0px 0px 30px rgba(255, 192, 0, 1); */ } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering { height: 44px; max-height: 44px; background-color: rgb(51, 63, 80); } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering>div { padding: 0px 0px 5px 0px; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering>#index { font-size: 30px; line-height: 32px; width: 5%; float: left; text-align: center; border-bottom: 1px solid; margin: 5px 0px 0px 2%; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering>#date { font-size: 30px; line-height: 32px; width: 37%; float: left; border-bottom: 1px solid; margin: 5px 0px 0px 0; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.ordering>#orderId { font-size: 28px; line-height: 32px; width: 53%; float: left; /* text-align: right; */ margin: 5px 2% 0px 0%; } /* */ .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst { width: 100%; float: left; background-color: rgb(51, 63, 80); margin: 0px 0px 5px 0px; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header { width: 100%; font-size: 36px; line-height: 36px; border-collapse: collapse; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header>tbody { /* */ } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header tr { font-size: 30px; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #type { width: 40%; font-size: 25px; text-align: left; padding: 0px 0px 0px 90px; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #quantity { width: 10%; font-size: 25px; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #amount { width: 20%; font-size: 25px; text-align: right; padding: 0px 30px 0px 0px; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal1 {} .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal2 { color: rgb(255, 192, 0); } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal3 {} .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal4 { color: rgb(255, 192, 0); } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_header #subtotal5 {} .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record { width: 100%; font-size: 36px; line-height: 36px; border-collapse: collapse; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record>tbody {} .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr {} .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem {} .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div { float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#name { width: 40%; text-align: left; padding: 0px 0px 0px 90px; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#quantity { width: 10%; text-align: center; } .popup .roomservice .order-details>#orders>.order_list>tbody>tr>.OdItemLst .tbl_record tr>.oditem div#amount { width: 20%; text-align: right; padding: 0px 20px 0px 0px; } .popup .roomservice .order-details>#summary { height: 54px; line-height: 50px; overflow: hidden; font-size: 38px; text-align: left; margin: 15px 20px 5px 30px; background-color: rgb(51, 63, 80); } .popup .roomservice .order-details>#summary>div { float: left; } .popup .roomservice .order-details>#summary>#title { width: 40%; padding: 0px 0px 0px 90px; text-align: left; } .popup .roomservice .order-details>#summary>#quantity { width: 10%; text-align: center; color: rgb(255, 192, 0); } .popup .roomservice .order-details>#summary>#amount { width: 20%; text-align: right; padding: 0px 20px 0px 0px; color: rgb(255, 192, 0); } /* ROOM SERVICE -> ALRET */ .popup .roomservice .alert { position: absolute; top: 197px; left: 340px; width: 600px; height: 325px; color: rgb(255, 255, 255); } .popup .roomservice .alert>div#order-complete { width: 100%; height: 100%; background-color: rgb(36, 44, 56); border: 1px solid rgb(255, 255, 255); } .popup .roomservice .alert>div#order-complete>div#title { float: left; width: 100%; height: 54px; background-color: rgb(51, 63, 80); margin: 42px 0px 0 0px; font-size: 38px; line-height: 52px; text-align: center; } .popup .roomservice .alert>div#order-complete>div#message { width: 95%; float: left; margin: 40px 20px 5px 20px; font-size: 22px; line-height: 24px; text-align: center; white-space: pre-wrap; } /*********************** * MY PAGE Style * ***********************/ .popup>.mypage { position: absolute; width: 100%; height: 100%; } .popup>.mypage>.message { position: absolute; top: 13%; left: 6%; width: 88%; height: 80%; background-color: rgb(64, 64, 64); background-image: url(./images/bg_message_cream-paper.png); box-shadow: 2px 3px 20px black, 0 0 200px rgb(16, 16, 16) inset; overflow: hidden; display: none; } .popup>.mypage>.message>#hotel_logo { position: absolute; } .popup>.mypage>.message>#title { max-height: 200px; line-height: 200px; color: rgb(255, 255, 255); font-size: 48px; text-align: center; text-shadow: 2px 2px 4px rgba(0, 0, 0, 1) } .popup>.mypage>.message>#msg_ctz { position: absolute; top: 200px; width: 100%; height: 600px; font-size: 28px; line-height: 40px; padding: 0px 20px 0px 20px; color: rgb(235, 235, 235); text-align: center; text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); } .popup>.mypage>.message>#btn_back { position: absolute; top: 820px; left: 1542px; width: 140px; height: 36px; line-height: 38px; font-size: 28px; font-family: LG Display-Regular; color: rgb(255, 255, 255); text-shadow: 3px 3px 15px rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 0.4); padding-left: 50px; border-radius: 5px; text-align: center; filter: drop-shadow(2px 2px 4px black); } .popup>.mypage>.message>#btn_back::before { position: absolute; content: ''; width: 48px; height: 34px; margin-left: -62px; background-image: url(./images/icons/icon_btn_back.png); background-repeat: no-repeat; background-position: right center; background-size: contain; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1)); } /* Notification Style */ .popup>.notification { display: none; position: absolute; top: 10%; left: 73%; width: 26%; height: 10%; } .popup>.notification>.balloon { position: relative; display: inline-block; } .popup>.notification>.balloon span { display: inline-block; padding: 10px; color: #fff; background: #ad1e51; border-radius: 20px; font-size: 28px; } .popup>.notification>.balloon:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; } .popup>.notification>.balloon.right:after, .popup>.notification>.balloon.left:after { border-width: 10px 15px; top: 50%; margin-top: -10px; } .popup>.notification>.balloon.top:after, .popup>.notification>.balloon.bottom:after { border-width: 15px 10px; left: 50%; margin-left: -10px; } .popup>.notification>.balloon.top:after { border-color: #ad1e51 transparent transparent transparent; bottom: -25px; } .popup>.notification>.balloon.bottom:after { border-color: transparent transparent #ad1e51 transparent; top: -25px; } .popup>.notification>.balloon.left:after { border-color: transparent #ad1e51 transparent transparent; left: -25px; } .popup>.notification>.balloon.right:after { border-color: transparent transparent transparent #ad1e51; right: -25px; }