html,body { box-sizing:border-box; margin:0px; padding:0px; min-height:100%; } body { background-color:#EFEFEF; font-family:'Noto Sans TC', 'Noto Sans', sans-serif; font-size:14px; line-height:17px; } * { box-sizing:border-box; -webkit-tap-highlight-color:rgba(255,255,255,0); tap-highlight-color:rgba(255,255,255,0); } a { outline:none; border:none; } a:active { outline:none; border:none; } p { margin:0px; padding:0px; } img,canvas,select,input { display:block; outline:none; box-shadow:none; } input:focus, select:focus { outline:none; } table { border:0; margin:0; border-spacing:0; } .font-oswald { font-family:'Oswald',sans-serif; } .font-noto { font-family:'Noto Sans TC', 'Noto Sans', sans-serif; } .layout-sprite { position:relative; background-image:url('/i/discovereurope/sprite00.svg'); background-size:500px 500px; } .layout-ceiling { position:absolute; top:0; left:0; right:0; z-index:9000; background-color:#5782BB; background: radial-gradient(circle at bottom right, rgba(111, 156, 214, 1) 0%, rgba(87,130,187,1) 10%, rgba(87,130,187,1) 90%, rgba(53,97,153,1) 100%); box-shadow:0 2px 2px rgba(38,68,108,0.65); } .layout-ceiling.fixed { position:fixed; } .layout-ceiling-container { position:relative; width:100%; height:68px; margin:0 auto; } .layout-ceiling .mainmenu { position:relative; display:inline-flex; flex-wrap:nowrap; column-gap:10px; align-items:center; margin:10px 0 0 10px; } .layout-ceiling .mainmenu .logo { padding-right:20px; } .layout-ceiling .mainmenu .option { position:relative; display:none; font-size:14px; line-height:16px; font-weight:700; color:#FFFFFF; text-decoration:none; background-color:rgba(255,255,255,0); border-radius:6px; transition:all 0.25s; padding:3px 5px; } .layout-ceiling .mainmenu .option:hover { background-color:rgba(255,255,255,0.65); color:#26446C; } .layout-ceiling .mainmenu .option .grid { position:relative; display:inline-flex; align-items:center; } .layout-ceiling .mainmenu .option .grid .text { padding:4px 7px; } .layout-ceiling .mainmenu .option .grid .text.text-phone { display:none; } .layout-ceiling .mainmenu .option .grid .icon .icon-profile { width:21px; height:22px; background-position:-110px -108px; } .layout-ceiling .mainmenu .option:hover .grid .icon .icon-profile { background-position:-140px -108px; } .layout-ceiling .mainmenu .option .grid .icon .icon-contacts { width:13px; height:20px; background-position:0 -113px; } .layout-ceiling .mainmenu .option:hover .grid .icon .icon-contacts { background-position:-20px -113px; } .layout-ceiling .mainmenu .option .grid .icon .icon-phone { width:24px; height:24px; background-position:-40px -110px; transform:translateY(1px); } .layout-ceiling .mainmenu .option:hover .grid .icon .icon-phone { background-position:-180px -110px; } .layout-ceiling .mainmenu .option .grid .icon .icon-mail { width:27px; height:24px; background-position:-70px -110px; transform:translateY(1px); } .layout-ceiling .mainmenu .option:hover .grid .icon .icon-mail { background-position:-210px -110px; } @media (min-width:768px) { .layout-ceiling-container { height:88px; } .layout-ceiling .mainmenu .logo img { width:285px; height:64px; } } @media (min-width:1020px) { .layout-ceiling .mainmenu .option .grid .text.text-phone { display:block; } } .layout-ceiling .lang-container { position:absolute; top:50%; right:68px; transform:translateY(-50%); display:none; flex-direction:row; column-gap:15px; align-items:center; } .layout-ceiling .lang { position:relative; width:24px; height:24px; border-radius:50%; transition:transform 0.18s; } .layout-ceiling .lang:hover { transform:scale(1.1); } .layout-ceiling .lang.active { outline:solid 2px rgba(255,255,255,0.55); box-shadow:4px 4px 3px rgba(38,68,108,0.45); transform:scale(1.2); } .layout-ceiling .lang.active:hover { transform:scale(1.3); } .layout-ceiling .lang[data-id="en-us"] { background-position:-476px 0; } .layout-ceiling .lang[data-id="it-it"] { background-position:-476px -48px; } .layout-ceiling .lang[data-id="es-es"] { background-position:-476px -72px; } .layout-ceiling .lang[data-id="zh-cn"] { background-position:-476px -24px; } @media (min-width:380px) { .layout-ceiling .lang-container { display:inline-flex; } } @media (min-width:910px) { .layout-ceiling .lang-container { right:10px; } } @media (min-width:1100px) { .layout-ceiling .lang-container { right:0; } } .layout-ceiling .mobile-menu { position:absolute; top:0; bottom:0; right:0; width:58px; } .layout-ceiling .mobile-menu:hover { cursor:pointer; } .layout-ceiling .mobile-menu.active { background-color:#DD3311; } .layout-ceiling .mobile-menu .hline { position:absolute; left:15px; right:15px; top:50%; height:3px; background-color:#FFFFFF; } .layout-ceiling .mobile-menu .hline[data-n="1"] { margin-top:-9.5px; } .layout-ceiling .mobile-menu .hline[data-n="2"] { margin-top:-1.5px; } .layout-ceiling .mobile-menu .hline[data-n="3"] { margin-top:6.5px; } .layout-ceiling-mobile-anim-in-hline1 { animation-fill-mode:forwards; animation-duration:0.35s; animation-name:layout-ceiling-mobile-anim-in-hline1-frames; } @keyframes layout-ceiling-mobile-anim-in-hline1-frames { 0% { transform:rotate(0deg) translate(0,0); } 100% { transform:rotate(-45deg) translate(-5.5px,5.5px); } } .layout-ceiling-mobile-anim-in-hline2 { animation-fill-mode:forwards; animation-duration:0.2s; animation-name:layout-ceiling-mobile-anim-in-hline2-frames; } @keyframes layout-ceiling-mobile-anim-in-hline2-frames { 0% { left:15px; right:15px; } 99% { left:50%; right:50%; } 100% { left:50%; right:50%; display:none; } } .layout-ceiling-mobile-anim-in-hline3 { animation-fill-mode:forwards; animation-duration:0.35s; animation-name:layout-ceiling-mobile-anim-in-hline3-frames; } @keyframes layout-ceiling-mobile-anim-in-hline3-frames { 0% { transform:rotate(0deg) translate(0,0); } 100% { transform:rotate(45deg) translate(-5.5px,-5.5px); } } .layout-ceiling-mobile-anim-out-hline1 { animation-fill-mode:forwards; animation-duration:0.35s; animation-name:layout-ceiling-mobile-anim-out-hline1-frames; } @keyframes layout-ceiling-mobile-anim-out-hline1-frames { 0% { transform:rotate(-45deg) translate(-5.5px,5.5px); } 100% { transform:rotate(0deg) translate(0,0); } } .layout-ceiling-mobile-anim-out-hline2 { animation-fill-mode:forwards; animation-duration:0.2s; animation-name:layout-ceiling-mobile-anim-out-hline2-frames; } @keyframes layout-ceiling-mobile-anim-out-hline2-frames { 0% { left:50%; right:50%; display:block; } 100% { left:15px; right:15px; display:block; } } .layout-ceiling-mobile-anim-out-hline3 { animation-fill-mode:forwards; animation-duration:0.35s; animation-name:layout-ceiling-mobile-anim-out-hline3-frames; } @keyframes layout-ceiling-mobile-anim-out-hline3-frames { 0% { transform:rotate(45deg) translate(-5.5px,-5.5px); } 100% { transform:rotate(0deg) translate(0,0); } } .layout-ceiling-mobile-options { position:fixed; top:68px; bottom:-100px; left:0; right:0; z-index:999990; background:#FFFFFF; padding:15px; } .layout-ceiling-mobile-options-link { position:relative; display:block; padding:10px 12px 10px 12px; font-size:20px; line-height:24px; font-weight:700; color:#26446C; text-decoration:none; } .layout-ceiling-mobile-options-link:hover { background:#5782BB; color:#FFFFFF; } @media (min-width:768px) { .layout-ceiling-mobile-options { top:88px; } } .layout-ceiling-mobile-options-in { animation-fill-mode:forwards; animation-duration:0.4s; animation-name:layout-ceiling-mobile-options-in-frames; } @keyframes layout-ceiling-mobile-options-in-frames { 0% { opacity:0; transform:translateX(-50%); } 100% { opacity:1; transform:translateX(0); } } .layout-ceiling-mobile-options-out { animation-fill-mode:forwards; animation-duration:0.4s; animation-name:layout-ceiling-mobile-options-out-frames; } @keyframes layout-ceiling-mobile-options-out-frames { 0% { opacity:1; transform:translateX(0); } 100% { opacity:0; transform:translateX(-100%); } } .layout-topphoto { position:relative; height:330px; overflow:hidden; z-index:10; background-size:cover; background-position:center center; } .layout-topphoto img { object-fit:cover; object-position:center center; width:100%; height:100%; } .layout-topphoto-title { position:relative; padding:93px 30px 0 30px; text-align:center; margin:0 auto; font-size:36px; line-height:42px; font-weight:900; color:#FFFFFF; text-shadow:1px 1px 1px rgba(64,64,64,0.80); } .layout-topphoto-title-href { color:#FFFFFF; text-decoration:none; } .layout-content { position:relative; background-color:#FFFFFF; } .layout-content-first { margin-top:-80px; } .layout-content-container { position:relative; z-index:100; width:100%; background-color:#FFFFFF; } .layout-content-first { min-height:140px; } .layout-content-width { width:100%; margin:0 auto 0 auto; } .layout-content-padding { padding:15px; } .layout-footer { position:relative; z-index:100; background: #EFEFEF; background: -moz-linear-gradient(top, #A0A0A0 0%, #CCCCCC 5%, #EFEFEF 100%); background: -webkit-linear-gradient(top, #A0A0A0 0%, #CCCCCC 5%,#EFEFEF 100%); background: linear-gradient(top, #A0A0A0 0%, #CCCCCC 5%,#EFEFEF 100%); padding:20px 0 20px 0; } .layout-footer-container { position:relative; margin:0 auto 0 auto; padding:0 15px 0 15px; width:100%; font-size:13px; line-height:17px; color:#404040; } .layout-footer-table { display:block; } .layout-footer-col1 { display:block; text-align:center; } .layout-footer-col2 { position:relative; text-align:center; padding:15px 0 0 0; } .layout-footer-logo { position:relative; display:block; width:220px; margin:0 auto 15px auto; } .layout-footer-link { position:relative; display:inline-block; float:none; font-size:12px; line-height:16px; font-weight:700; color:#404040; border-bottom:solid 1px rgba(87,130,187,0); text-decoration:none; margin:5px 12px 5px 12px; transition:all 0.25s; } .layout-footer-link:hover { color:#5782BB; border-bottom:solid 1px rgba(87,130,187,1); } /* ---------------------------------------------------------------------------------------------- */ .layout-title-text { position:relative; text-align:center; font-size:26px; line-height:30px; font-weight:700; color:#5782BB; margin:25px auto 25px auto; } .layout-title-link { color:#5782BB; text-decoration:none; } .layout-forms-fieldtitle { font-size:14px; line-height:16px; color:#3B3C3C; margin-bottom:2px; } .layout-forms-field { -webkit-appearance:none; -moz-appearance:none; appearance:none; position:relative; display:block; width:100%; background-color:#FFFFFF; margin:0; outline:none; padding:8px 10px 8px 10px; border:solid 1px #CCCCCC; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; font-size:16px; line-height:20px; font-weight:700; } .layout-forms-field:focus { border:solid 1px #7D7D7D; box-shadow:1px 1px 2px rgba(164,164,164,0.65); } .layout-forms-error { position:relative; display:table; background:#D94A2A; color:#FFFFFF; font-weight:700; margin-top:5px; padding:5px 8px 5px 8px; } .layout-buttons-container { position:relative; display:table; padding:8px 15px 9px 15px; background: #5782BB; background: -moz-linear-gradient(-45deg, #5782BB 0%, #26446C 100%); background: -webkit-linear-gradient(-45deg, #5782BB 0%,#26446C 100%); background: linear-gradient(135deg, #5782BB 0%,#26446C 100%); } .layout-buttons-container.gray { background: #707070; background: -moz-linear-gradient(-45deg, #707070 0%, #505050 100%); background: -webkit-linear-gradient(-45deg, #707070 0%,#505050 100%); background: linear-gradient(135deg, #707070 0%,#505050 100%); } .layout-buttons-container:hover { cursor:pointer; } .layout-buttons-text { position:relative; display:block; z-index:100; font-size:18px; line-height:20px; color:#FFFFFF; text-align:center; text-transform:uppercase; } .layout-buttons-text-active { animation-fill-mode:forwards; animation-duration:0.25s; animation-name:layout-buttons-text-active-frames; } @keyframes layout-buttons-text-active-frames { 0% { transform:translateY(0px); opacity:1.0; } 50% { transform:translateY(2px); opacity:0.80; } 100% { transform:translateY(0px); opacity:0.55; } } .layout-buttons-over { position:absolute; z-index:50; top:0; bottom:0; left:0; right:0; opacity:0; background: #5782BB; background: -moz-linear-gradient(-45deg, #6F9CD6 0%, #355C8F 100%); background: -webkit-linear-gradient(-45deg, #6F9CD6 0%,#355C8F 100%); background: linear-gradient(135deg, #6F9CD6 0%,#355C8F 100%); } .layout-buttons-over-in { animation-fill-mode:forwards; animation-duration:0.35s; animation-name:layout-buttons-over-in-frames; } @keyframes layout-buttons-over-in-frames { 0% { opacity:0; } 100% { opacity:1; } } .layout-buttons-over-out { animation-fill-mode:forwards; animation-duration:0.2s; animation-name:layout-buttons-over-out-frames; } @keyframes layout-buttons-over-out-frames { 0% { opacity:1; } 100% { opacity:0; } } /* ---------------------------------------------------------------------------------------------- */ .layout-tooltip { position:absolute; display:table; width:auto; top:-500px; right:-500px; z-index:9999990; } .layout-tooltip .back { position:relative; display:table; background-color:rgba(0,0,0,0.75); border-radius:3px; font-size:13px; line-height:14px; color:#FFFFFF; font-weight:500; padding:4px 8px 6px 8px; } /* ---------------------------------------------------------------------------------------------- */ @media (min-width:910px) { .layout-ceiling .mainmenu .option { display:block; } .layout-ceiling .mobile-menu { display:none; } .layout-ceiling .mobile-options { display:none; } .layout-footer-table { display:table; } .layout-footer-col1 { display:table-cell; text-align:left; } .layout-footer-col2 { position:absolute; display:block; top:18px; right:0; transform:translateY(-50%); padding:0; text-align:right; } .layout-footer-logo { margin:0 auto 0 0; width:255px; } .layout-footer-logo img { width:255px; height:40px; } .layout-footer-link { display:block; float:left; } } @media (min-width:960px) { .layout-ceiling-menu-phone, .layout-ceiling-menu-mail { display:block; } } @media (min-width:1100px) { .layout-ceiling-mainmenu { margin-left:0; } .layout-topphoto-title { width:1080px; } .layout-content-width { width:1080px; } .layout-content-padding { padding:20px; } .layout-footer-container { width:1080px; padding:0; } }