@charset "utf-8";
											.mainMenu{		 background-color:#fff } .mainMenu>.outBox{ } @media screen and (max-width:768px){ .mainMenu{		 } .mainMenu>.outBox{ } }										 .mainMenu{ width:100%; max-width: 1600px; z-index: 20000; /*display:none;*/ } .mainMenu a{ color:#222; border:none !important; text-decoration:none !important; } .mainMenu>.outBox{ width:100%; max-width:1600px; color: #222; font-size:14px; } .mainMenu .part1{ width:100%; height:120px; text-align:center; border-bottom:1px #dcdcdc solid; } .mainMenu .part1A{ display:none; } .mainMenu .part2{ width:100%; max-width: 1600px; height:60px; text-align:center; } .mainMenu .partInbox{ width:100%; height:100%; max-width:1600px; margin:0 auto; box-shadow: 0 2px 4px rgba(0,0,0,0.07); z-index:1; background-color:#fff; } .mainMenu .logo{ background-image: url(/hk/images/common/logo-black.svg); } .mainMenu .logoBox1{ width:300px; height:100%; } .mainMenu .logoBox2{ width:200px; height:100%; } .mainMenu .trans_opacity_03{ transition: opacity 0.3s; } .mainMenu .part2 .userInfo, .mainMenu .part2 .login { opacity:0; visibility:hidden; transition:opacity 0.3s; } .mainMenu .part2A .userInfo, .mainMenu .part2A .login { opacity:1; visibility:visible; } .mainMenu .hiddenBox{ opacity: 0 !important; visibility: hidden !important; } .mainMenu .visibleBox{ opacity: 1 !important; visibility: visible !important; } .mainMenu .sideBoxL{ left:0; top:0; padding-left:55px; } .mainMenu .sideBoxR{ right:0; top:0; padding-right:55px; } .mainMenu .sideBoxL, .mainMenu .sideBoxR{ height:100%; } .mainMenu .login, .mainMenu .logout { border: 1px #ddd solid; font-size: 12px; padding: 5px 18px; pointer-events: all; } .mainMenu .menuBox, .ui-widget{ font-size:16px; } .mainMenu .dItem{ padding:0 16px 0 16px; height: 35px; } .mainMenu .searchUI{ padding:0; min-width:40px; } .mainMenu .dItem>.icon{ right:0px; top:calc(50% - 6px); width:12px; height:16px; transition: opacity 0.3s; opacity: 0; } .mainMenu .dItem:hover .icon{ opacity: 1; } .mainMenu .dItem>.arrow_down, .mainMenu .mItem>.arrow_down{ background-image:url(/hk/images/common/arrow_down_black.svg); } .mainMenu .mItem>.arrow_downA{ transform:scaleY(-1); } .mainMenu .pos_fixed{ position:fixed; top:0; left:0; } .mainMenu .userInfo .userBox { padding: 0px 18px; pointer-events: all; } .mainMenu .userInfo .imgBox { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; } .mainMenu .userInfo .imgBox img { width: 100%; height: 100%; opacity: 0; } .mainMenu .userInfo .name { line-height: 40px; } .mainMenu .userInfo .nameA { display: none; } .mainMenu .mainBox{ } .mainMenu .dSubmenu{ width:100%; left:0; top:100%; background-color:#fff; z-index:0; box-shadow: 0 2px 4px rgba(0,0,0,0.07); padding:32px 0 60px 0; display:none; opacity:0; } .mainMenu .dSubmenuInBox{ width:100%; max-width:1120px; margin:0 auto; } .mainMenu .lBox{ text-align:left; width:15%; padding:0 1.5%; } .mainMenu .lBoxA{ width:70%; } .mainMenu .dSubmenu[data-key=VIDEOS] .lBox{ width:18.3%; } .mainMenu .lBox .ul_A{ width:33.33333333333333333%; } .mainMenu .lBox .ul_B{ margin-left:1.5%; } .mainMenu .rBox{ text-align:center; border-left: 1px solid rgba(190, 147, 92, 0.4); width:85%; padding-left:1.5%; } .mainMenu .rBoxA{ width:30%; } .mainMenu .lBox li{ margin:0 0 17px 0; } .mainMenu .lBox li:hover{ color:#be9664; } .mainMenu .lBox a:nth-last-child(1) li{ padding:0 0 0 0; } .mainMenu .rBox .unit{ width:100%; margin-left:2%; } .mainMenu .rBox .unit:hover .visual{ webkit-filter: grayscale(0%) brightness(100%) contrast(100%); filter: grayscale(0%) brightness(100%) contrast(100%); } .mainMenu .dSubmenu[data-key=VIDEOS] .rBox { padding-left: 0%; } .mainMenu .dSubmenu[data-key=VIDEOS] .rBox .unit { margin-left: 9%; } .mainMenu .unit .imgBox{ width:100%; } .mainMenu .unit .visual{ width:100%; padding-top:71.3%; transition:all 0.6s; } .mainMenu .dSubmenu[data-key=VIDEOS] .unit .visual { padding-top: 56.18%; } .mainMenu .unit .category{ width:100%; left:0; bottom:5%; color:#fff; letter-spacing: 5px; z-index: 1; } .mainMenu .unit .categoryA{ height:100%; bottom:0; letter-spacing: 0; } .mainMenu .unit .categoryA .title1 { font-size: 20px; } .mainMenu .unit .categoryA .title2 { font-size: 29px; } .mainMenu .dSubmenu[data-key=VIDEOS] .unit .iconPlay { width:100%; height:100%; left:0; top:0; background-image: url(/hk/images/common/ico_video_play_1.svg); background-size:17%; } .mainMenu .unit .subject{ text-align:left; padding:10px 0 0 0; }												.mainMenu .expressBox{					 width:100%;					 height:40px; color:#222 !important; background-color:#ded9d5; text-align:right; padding:0 40px; font-size:16px; position: relative; z-index: 1; } .mainMenu .expressBox a{ color:#222 !important; } .mainMenu .shortenUrlBox{						 position:absolute;						 top:0;						 right:0;						 z-index:2;						}												.mainMenu .extra{						 width:100%;						 height:60px;						 background-color:#fff;						 display:none;						 border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; display:none !important;						}												.mainMenu .UserTimes{ margin:0 0 0 5px; } .mainMenu .UserTimes .listBoard{ top:60px; box-shadow: 0 2px 4px rgba(0,0,0,0.07); } .mainMenu .UserTimes .icon { height:60px; background-image: url(/hk/images/common/bell_gray_2.svg?20200520); background-size:42%; } .ui-widget { font-family: 'Noto Sans TC', Sans-Serif !important; } .mainMenu .editorBtnB { right: 0; top: 0; } .mainMenu .mBtn { margin: 15px 15px 0 0; color: #D00; } .mainMenu .icon_fair{ left: 6%; top: 5%; width: 24.5%; height: 0; padding-top: 24.5%; z-index: 1; } @media screen and (min-width:1601px){ .mainMenu .part2{ left: calc(50% - 800px) !important; } } @media screen and (max-width:1200px){ .mainMenu .dSubmenuInBox{ width:calc(100% - 110px); } .mainMenu .pos_fixed .partInbox, .mainMenu .part2A .partInbox{ text-align:right; } .mainMenu .part1 .sideBoxR .userInfo, .mainMenu .part1 .sideBoxR .login, .mainMenu .part2 .sideBoxR .userInfo, .mainMenu .part2 .sideBoxR .login{ display:none; } .mainMenu .pos_fixed .sideBoxR, .mainMenu .part2A .sideBoxR{ float:none; position:static; } .mainMenu .extra{ display:block; text-align:right; padding-right: 55px; } } @media screen and (max-width:900px){ .mainMenu .part2 .logoBox2{ width:22.22vw; } .mainMenu .sideBoxL{ padding-left:5vw; } .mainMenu .sideBoxR{ padding-right:5vw; } .mainMenu .dItem { padding: 0 1.78vw; } .mainMenu .searchUI{ padding:0; } .mainMenu .extra{ padding-right:5vw; } } @media screen and (max-width:768px){ .mainMenu .expressBox{ padding:0 5vw; height:40px; font-size:12px; } .mainMenu .mobile{ width:100%; height:60px; text-align:center; background-color:#fff; box-shadow: 0 2px 4px rgba(0,0,0,0.07); } .mainMenu .logoBox1{ width:100%; height:25px; } .mainMenu .logoOutBox3{ line-height:1em; } .mainMenu .logoBox3{ max-height:46px; width:50%; height:auto; } .mainMenu .btnMobileMenu{ width:60px; height:60px; left:0; top:0; transform:rotate(0deg); transition:transform 0.2s; } .mainMenu .btnMobileMenuA{ transform:rotate(90deg); } .mainMenu .icon_menu_mobile{ width:100%; height:100%; background-image:url(/hk/images/common/icon_menu_mobile_black_1.svg); background-size:45%; } .mainMenu .menuBox, .ui-widget{ font-size:3.86vw; } .mainMenu .sub_mobile{ left:0; top:100%; display:none; width:100%; height:100vh; background-color:#fff; padding:3% 8% 3% 8%; border-top: 1px solid #e6e6e6; text-align:left; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; -ms-touch-action: manipulation; touch-action: manipulation; } .mainMenu .mMenu{ padding:0 0 25vh 0; } .mainMenu .mItem{ width:100%; padding:4.35vw 0; border-bottom: 1px solid #e6e6e6; } .mainMenu .mItem>a{ left:0; top:0; width:100%; height:100%; } .mainMenu .searchUI_m{ padding:0; } .mainMenu .UISearch{ padding:0; width:100%; } .mainMenu .mItem>.icon{ right:1vw; top:calc(50% - 1.93vw); width:2.9vw; height:3.86vw; transition: opacity 0.3s; opacity: 1; } .mainMenu .mSubmenu{ display:none; height:auto; padding:3vw 5vw; } .mainMenu .mSubmenuA{ display:block; } .mainMenu .mSubmenu li{ padding:2vw 0; } .mainMenu .searchBox_m{ right:0; top:0; height:60px; width:calc(100% - 70px); text-align:right; margin:0 10px 0 0; pointer-events:none; } .mainMenu .searchBox_m .panel{ padding:0 0 5px 0; } .mainMenu .searchUI_m_2{ width:40px; height:40px; text-align:center; pointer-events:all; } .UISearch .btnSearch .icon, .UISearch .btnDoSearch .icon, .UISearch .classifyUI .unit .icon { width: 20px !important; height: 20px !important; } }