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; }
}