header{ position:absolute; width:100%; display:flex; align-items:center; justify-content:space-between; background-color:rgba(21,30,62,1); box-shadow:0 0 3px rgba(21,30,62,1); top:0; left:0; } .Home header{ background-color:rgba(0,0,0,0); position:absolute; box-shadow:none; } .Contact header{ position:absolute; top:0;} header > h1{ margin:16px 50px; width:120px; height:70px;} header > nav > ul{ display:flex; align-items:center; gap:50px; margin:0 50px;} header > nav > ul > li{ position:relative; display:flex; } header > nav > ul > li > a{ transition-duration:0.3s; position:relative;} header > nav > ul > li > a > span{font-size:20px; font-weight:400; display:inline-block; text-shadow:0px 0px 5px #000; color:#fff; text-transform:uppercase;} header > nav > ul > li > a:after{ content:""; z-index:2; position:absolute; left:0; bottom:-5px; width:0; height:2px; border-radius:3px; background-color:#ffffff; box-shadow:none; display:inline-block; transition-duration:0.15s;} header > nav > ul > li > a.active > span{ color:#ffd400;} header > nav > ul > li > a.active > span:after{ width:100%; background-color:#ffd400; box-shadow:0 0 5px #000;} header > nav ul > li > a:hover > span{ color:#ffd400;} header > nav > ul > li > a:hover:after{ width:100%; background-color:#ffd400; box-shadow:0 0 5px #000;} header > nav > ul > li:last-child > a:after{ display:none;} header > nav > ul > li > ul{ position:absolute; display:flex; flex-direction: column; gap:20px; width:160px; padding:20px; margin-left:-4px; margin-top:50px; visibility:hidden; opacity:0; background-color:rgba(16,23,106,0.7); border-radius:8px; transition-duration:0.5s;} header > nav > ul > li:last-child > ul{ width:30px; margin-left:-30px;} header > nav > ul > li:last-child > a > span{ font-size:0;} header > nav > ul > li:hover > ul{ visibility:visible; opacity:1;} header > nav > ul > li > ul > li > a{ display:inline-block; transition-duration:0.3s; position:relative; } header > nav > ul > li > ul > li > a > span{ font-size:18px; color:#fff; text-shadow:0px 0px 5px #000; position:relative; text-transform:uppercase; font-weight:400; line-height:1.2;} header > nav > ul > li > ul > li > a > span:after{ content:""; z-index:2; position:absolute; left:0; bottom:-5px; width:0; height:2px; border-radius:3px; background-color:#ffffff; box-shadow:none; display:inline-block; transition-duration:0.15s;} header > nav > ul > li > ul > li > a:hover > span:after{ width:100%; background-color:#ffd400; box-shadow:0 0 5px #000;} header > nav > ul > li > ul.languageul > li > a{ position:relative;} header > nav > ul > li > ul.languageul > li > a.active > span:before{ content:""; z-index:2; position:absolute; left:0; bottom:-5px; width:100%; height:2px; border-radius:3px; background-color:#ffffff; box-shadow:none; display:inline-block; transition-duration:0.15s;} header > nav > ul > li > ul.languageul > li > a:hover.active > span:after{ content:""; z-index:2; position:absolute; left:0; bottom:-5px; width:100%; height:2px; border-radius:3px; background-color:#ffd400; box-shadow:none; display:inline-block; transition-duration:0.15s;} header > nav > ul > li > a.languagebtn{ font-size:0; width:24px; height:24px; display:inline-block; background-size:cover; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0%200h48v48h-48z%22%20fill%3D%22none%22%2F%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M23.99%204c-11.05%200-19.99%208.95-19.99%2020s8.94%2020%2019.99%2020c11.05%200%2020.01-8.95%2020.01-20s-8.96-20-20.01-20zm13.85%2012h-5.9c-.65-2.5-1.56-4.9-2.76-7.12%203.68%201.26%206.74%203.81%208.66%207.12zm-13.84-7.93c1.67%202.4%202.97%205.07%203.82%207.93h-7.64c.85-2.86%202.15-5.53%203.82-7.93zm-15.48%2019.93c-.33-1.28-.52-2.62-.52-4s.19-2.72.52-4h6.75c-.16%201.31-.27%202.64-.27%204%200%201.36.11%202.69.28%204h-6.76zm1.63%204h5.9c.65%202.5%201.56%204.9%202.76%207.13-3.68-1.26-6.74-3.82-8.66-7.13zm5.9-16h-5.9c1.92-3.31%204.98-5.87%208.66-7.13-1.2%202.23-2.11%204.63-2.76%207.13zm7.95%2023.93c-1.66-2.4-2.96-5.07-3.82-7.93h7.64c-.86%202.86-2.16%205.53-3.82%207.93zm4.68-11.93h-9.36c-.19-1.31-.32-2.64-.32-4%200-1.36.13-2.69.32-4h9.36c.19%201.31.32%202.64.32%204%200%201.36-.13%202.69-.32%204zm.51%2011.12c1.2-2.23%202.11-4.62%202.76-7.12h5.9c-1.93%203.31-4.99%205.86-8.66%207.12zm3.53-11.12c.16-1.31.28-2.64.28-4%200-1.36-.11-2.69-.28-4h6.75c.33%201.28.53%202.62.53%204s-.19%202.72-.53%204h-6.75z%22%2F%3E%0A%3C%2Fsvg%3E");} header > nav > ul > li > a.languagebtn.active{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0%200h48v48h-48z%22%20fill%3D%22none%22%2F%3E%0A%3Cpath%20fill%3D%22%23ffd400%22%20d%3D%22M23.99%204c-11.05%200-19.99%208.95-19.99%2020s8.94%2020%2019.99%2020c11.05%200%2020.01-8.95%2020.01-20s-8.96-20-20.01-20zm13.85%2012h-5.9c-.65-2.5-1.56-4.9-2.76-7.12%203.68%201.26%206.74%203.81%208.66%207.12zm-13.84-7.93c1.67%202.4%202.97%205.07%203.82%207.93h-7.64c.85-2.86%202.15-5.53%203.82-7.93zm-15.48%2019.93c-.33-1.28-.52-2.62-.52-4s.19-2.72.52-4h6.75c-.16%201.31-.27%202.64-.27%204%200%201.36.11%202.69.28%204h-6.76zm1.63%204h5.9c.65%202.5%201.56%204.9%202.76%207.13-3.68-1.26-6.74-3.82-8.66-7.13zm5.9-16h-5.9c1.92-3.31%204.98-5.87%208.66-7.13-1.2%202.23-2.11%204.63-2.76%207.13zm7.95%2023.93c-1.66-2.4-2.96-5.07-3.82-7.93h7.64c-.86%202.86-2.16%205.53-3.82%207.93zm4.68-11.93h-9.36c-.19-1.31-.32-2.64-.32-4%200-1.36.13-2.69.32-4h9.36c.19%201.31.32%202.64.32%204%200%201.36-.13%202.69-.32%204zm.51%2011.12c1.2-2.23%202.11-4.62%202.76-7.12h5.9c-1.93%203.31-4.99%205.86-8.66%207.12zm3.53-11.12c.16-1.31.28-2.64.28-4%200-1.36-.11-2.69-.28-4h6.75c.33%201.28.53%202.62.53%204s-.19%202.72-.53%204h-6.75z%22%2F%3E%0A%3C%2Fsvg%3E");} header > nav > ul > li > a.languagebtn:hover{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0%200h48v48h-48z%22%20fill%3D%22none%22%2F%3E%0A%3Cpath%20fill%3D%22%23ffd400%22%20d%3D%22M23.99%204c-11.05%200-19.99%208.95-19.99%2020s8.94%2020%2019.99%2020c11.05%200%2020.01-8.95%2020.01-20s-8.96-20-20.01-20zm13.85%2012h-5.9c-.65-2.5-1.56-4.9-2.76-7.12%203.68%201.26%206.74%203.81%208.66%207.12zm-13.84-7.93c1.67%202.4%202.97%205.07%203.82%207.93h-7.64c.85-2.86%202.15-5.53%203.82-7.93zm-15.48%2019.93c-.33-1.28-.52-2.62-.52-4s.19-2.72.52-4h6.75c-.16%201.31-.27%202.64-.27%204%200%201.36.11%202.69.28%204h-6.76zm1.63%204h5.9c.65%202.5%201.56%204.9%202.76%207.13-3.68-1.26-6.74-3.82-8.66-7.13zm5.9-16h-5.9c1.92-3.31%204.98-5.87%208.66-7.13-1.2%202.23-2.11%204.63-2.76%207.13zm7.95%2023.93c-1.66-2.4-2.96-5.07-3.82-7.93h7.64c-.86%202.86-2.16%205.53-3.82%207.93zm4.68-11.93h-9.36c-.19-1.31-.32-2.64-.32-4%200-1.36.13-2.69.32-4h9.36c.19%201.31.32%202.64.32%204%200%201.36-.13%202.69-.32%204zm.51%2011.12c1.2-2.23%202.11-4.62%202.76-7.12h5.9c-1.93%203.31-4.99%205.86-8.66%207.12zm3.53-11.12c.16-1.31.28-2.64.28-4%200-1.36-.11-2.69-.28-4h6.75c.33%201.28.53%202.62.53%204s-.19%202.72-.53%204h-6.75z%22%2F%3E%0A%3C%2Fsvg%3E");} .logo_svg{ width:120px; height:70px;} .logo_svg g > path{ fill:#FFF; } .logo_svg g > polygon{ fill:#FFF; } .logo_svg g > rect{ fill:#FFF; } /* .logo_svg g > path{ fill:transparent; animation-name:effects; animation-duration:20s; animation-iteration-count:infinite;} .logo_svg g > polygon{ fill:transparent; animation-name:effects; animation-duration:20s; animation-iteration-count:infinite;} .logo_svg g > rect{ fill:transparent; animation-name:effects; animation-duration:20s; animation-iteration-count:infinite;} */ .logo_h1_1{ animation-delay:0.1s;} .logo_h1_2{ animation-delay:0.3s;} .logo_h1_3{ animation-delay:0.5s;} .logo_h1_4{ animation-delay:0.7s;} .logo_h1_5{ animation-delay:0.9s;} .logo_h1_6{ animation-delay:1.1s;} .logo_h1_7{ animation-delay:1.3s;} .logo_h1_8{ animation-delay:1.5s;} .logo_h1_9{ animation-delay:1.7s;} .logo_h2_1{ animation-delay:0.4s;} .logo_h2_2{ animation-delay:0.5s;} .logo_h2_3{ animation-delay:0.6s;} .logo_h2_4{ animation-delay:0.7s;} .logo_h2_5{ animation-delay:0.8s;} .logo_h2_6{ animation-delay:0.9s;} .logo_h2_7{ animation-delay:1s;} .logo_h2_8{ animation-delay:1.1s;} .logo_h2_9{ animation-delay:1.2s;} .logo_h2_10{ animation-delay:1.3s;} .logo_h2_11{ animation-delay:1.4s;} .logo_h2_12{ animation-delay:1.5s;} .logo_h2_13{ animation-delay:1.6s;} .logo_h2_14{ animation-delay:1.7s;} .logo_h2_15{ animation-delay:1.8s;} .logo_h2_16{ animation-delay:1.9s;} .logo_h2_17{ animation-delay:2s;} .logo_h2_18{ animation-delay:2.1s;} .logo_h2_19{ animation-delay:2.2s;} .logo_h2_20{ animation-delay:2.3s;} .logo_h2_21{ animation-delay:2.4s;} .logo_h2_22{ animation-delay:2.5s;} .logo_h2_23{ animation-delay:2.6s;} .logo_h2_24{ animation-delay:2.7s;} /* .KBody header .logo:hover .logo_svg g > path{ animation-name:effectshover;} .KBody header .logo:hover .logo_svg g > polygon{ animation-name:effectshover} .KBody header .logo:hover .logo_svg g > rect{ animation-name:effectshover} .KBody header .logo:hover .logo_h1_1{ animation-delay:0.0s;} .KBody header .logo:hover .logo_h1_2{ animation-delay:0.1s;} .KBody header .logo:hover .logo_h1_3{ animation-delay:0.1s;} .KBody header .logo:hover .logo_h1_4{ animation-delay:0.1s;} .KBody header .logo:hover .logo_h1_5{ animation-delay:0.1s;} .KBody header .logo:hover .logo_h1_6{ animation-delay:0.1s;} .KBody header .logo:hover .logo_h1_7{ animation-delay:0.1s;} .KBody header .logo:hover .logo_h1_8{ animation-delay:0.1s;} .KBody header .logo:hover .logo_h1_9{ animation-delay:0.2s;} .KBody header .logo:hover .logo_h2_1{ animation-delay:0.01s;} .KBody header .logo:hover .logo_h2_2{ animation-delay:0.02s;} .KBody header .logo:hover .logo_h2_3{ animation-delay:0.03s;} .KBody header .logo:hover .logo_h2_4{ animation-delay:0.04s;} .KBody header .logo:hover .logo_h2_5{ animation-delay:0.05s;} .KBody header .logo:hover .logo_h2_6{ animation-delay:0.06s;} .KBody header .logo:hover .logo_h2_7{ animation-delay:0.07s;} .KBody header .logo:hover .logo_h2_8{ animation-delay:0.08s;} .KBody header .logo:hover .logo_h2_9{ animation-delay:0.09s;} .KBody header .logo:hover .logo_h2_10{ animation-delay:0.1s;} .KBody header .logo:hover .logo_h2_11{ animation-delay:0.11s;} .KBody header .logo:hover .logo_h2_12{ animation-delay:0.12s;} .KBody header .logo:hover .logo_h2_13{ animation-delay:0.13s;} .KBody header .logo:hover .logo_h2_14{ animation-delay:0.14s;} .KBody header .logo:hover .logo_h2_15{ animation-delay:0.15s;} .KBody header .logo:hover .logo_h2_16{ animation-delay:0.16s;} .KBody header .logo:hover .logo_h2_17{ animation-delay:0.17s;} .KBody header .logo:hover .logo_h2_18{ animation-delay:0.18s;} .KBody header .logo:hover .logo_h2_19{ animation-delay:0.19s;} .KBody header .logo:hover .logo_h2_20{ animation-delay:0.20s;} .KBody header .logo:hover .logo_h2_21{ animation-delay:0.21s;} .KBody header .logo:hover .logo_h2_22{ animation-delay:0.22s;} .KBody header .logo:hover .logo_h2_23{ animation-delay:0.23s;} .KBody header .logo:hover .logo_h2_24{ animation-delay:0.24s;} */ svg{stroke:transparent;} @keyframes effects{ 0%{ fill:transparent;} 5%{ fill:#fff;} 85%{ fill:#fff;} 90%{ fill:transparent;} 100%{ fill:transparent;} } @keyframes effectshover{ 0%{ fill:transparent;} 5%{ fill:#ffd400;} 85%{ fill:#ffd400;} 90%{ fill:transparent;} 100%{ fill:transparent;} } footer{ background-color:#ffffff; color:#000000; border-top:5px solid #12176A; width:100%; padding:50px 0; position:relative;} footer > div > nav > ul{ display:flex; margin:auto; width:calc(100% - 120px); gap:30px; flex-wrap:wrap;} footer > div > nav > ul > li{ position:relative;} footer > div > nav > ul > li:after{ content:""; height:16px; display:inline-block; position:absolute; width:1px; background-color:#bbb; right:-15px; top:8px;} footer > div > nav > ul > li:last-child:after{ display:none;} footer > div > nav > ul > li > a{ display:inline-block; font-size:20px; font-weight:400; color:#000;} footer > div > div{ margin:auto; width:calc(100% - 120px); margin-top:30px;} footer > div > div > div{ display:flex; gap:8px; align-items:flex-end; margin-bottom:16px;} footer > div > div > div > h4{ } footer > div > div > div > h4 > span{ font-size:22px; font-weight:600;} footer > div > div > div > p{ } footer > div > div > div > p > span{ font-size:18px; font-weight:400;} footer > div > div > ul{ display:flex; flex-wrap:wrap; gap:15px 30px;} footer > div > div > ul > li{ display:flex;} /* footer > div > div > ul > li:last-child{ width:100%;} */ footer > div > div > ul > li.addressfooterli{ width:100%;} footer > div > div > ul > li > label{ font-size:20px; font-weight:400; } footer > div > div > ul > li > label:after{ content:":"; margin:0 4px; } footer > div > div > ul > li > div{ font-size:20px; font-weight:400; } footer > div > div > ul > li > div > a{ color:#000; } footer > div > div > ul > li > div > a:hover{ color:#12176A;} footer > div > aside{ display:flex; margin:auto; margin-top:50px; width:calc(100% - 120px); font-size:20px; font-weight:400; } .wheelbtn .topbtn{ bottom:1em;} .topbtn{ transition-duration:0.3s; position:fixed; z-index:501; right:1em; bottom:-60px; width:60px; height:60px; display:inline-block; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%22-265%20388.9%2064%2064%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%3Cpath%20fill%3D%22%23fff%22%20d%3D%22%0AM-255.4%2C444.9%0Ah44.8%0Ac0.9%2C0%2C1.6-0.7%2C1.6-1.6%0Av-44.8%0Ac0-0.9-0.7-1.6-1.6-1.6%0Ah-44.8%0Ac-0.9%2C0-1.6%2C0.7-1.6%2C1.6%0Av44.8%20%20%0AC-257%2C444.2-256.3%2C444.9-255.4%2C444.9z%20%0A%22%2F%3E%0A%3Cpath%20%20fill%3D%22%23000%22%20d%3D%22%0AM-221.4%2C416.9%0Ac0.3%2C0.1%2C0.4%2C0.4%2C0.4%2C0.8%0Av6.8%0Ac0%2C0.6-0.6%2C1.1-1.1%2C0.8%0Al-7.4-6%0Av14.3%20%20%0Ac0%2C0.5-0.3%2C0.9-0.8%2C0.9%0Ah-6%0Ac-0.4%2C0-0.8-0.4-0.8-0.9%0Av-14.1%0Al-6.9%2C5.7%0Ac-0.5%2C0.3-1.1-0.1-1.1-0.8%0Av-6.8%0Ac0-0.3%2C0.2-0.6%2C0.4-0.8%0Al11.7-9.3%20%20%0AL-221.4%2C416.9z%0A%22%2F%3E%0A%0A%0A%3C%2Fsvg%3E"); background-repeat:no-repeat; background-size:cover;} .topbtn:hover{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%22-265%20388.9%2064%2064%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%3Cpath%20fill%3D%22%23ffd400%22%20d%3D%22%0AM-255.4%2C444.9%0Ah44.8%0Ac0.9%2C0%2C1.6-0.7%2C1.6-1.6%0Av-44.8%0Ac0-0.9-0.7-1.6-1.6-1.6%0Ah-44.8%0Ac-0.9%2C0-1.6%2C0.7-1.6%2C1.6%0Av44.8%20%20%0AC-257%2C444.2-256.3%2C444.9-255.4%2C444.9z%20%0A%22%2F%3E%0A%3Cpath%20%20fill%3D%22%23000%22%20d%3D%22%0AM-221.4%2C416.9%0Ac0.3%2C0.1%2C0.4%2C0.4%2C0.4%2C0.8%0Av6.8%0Ac0%2C0.6-0.6%2C1.1-1.1%2C0.8%0Al-7.4-6%0Av14.3%20%20%0Ac0%2C0.5-0.3%2C0.9-0.8%2C0.9%0Ah-6%0Ac-0.4%2C0-0.8-0.4-0.8-0.9%0Av-14.1%0Al-6.9%2C5.7%0Ac-0.5%2C0.3-1.1-0.1-1.1-0.8%0Av-6.8%0Ac0-0.3%2C0.2-0.6%2C0.4-0.8%0Al11.7-9.3%20%20%0AL-221.4%2C416.9z%0A%22%2F%3E%0A%0A%0A%3C%2Fsvg%3E"); background-repeat:no-repeat; background-size:cover;} #AddressFindDiv{ position:fixed; left:0; top:0; width:100%; height:100vh; z-index:501; background-color:rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center;} #AddressFindDiv > div{ background-color:#fff; border-radius:8px; box-shadow:1px 1px 8px gray; width:90%; max-width:800px; height:70vh; overflow-y:auto;} #AddressFindDiv > div > form{ padding:30px; width:calc(100% - 60px);} #AddressFindDiv > div > form > .searchdiv{ display:flex; gap:4px;} #AddressFindDiv > div > form > .searchdiv > input[type=text]{ font-size:22px; padding:3px 6px; flex-grow:1;} #AddressFindDiv > div > form > .searchdiv > a{ border:1px solid #000; padding:0 24px; display:flex; align-items:center; font-size:22px;} .addrsearchbtn{ background-color:#000; color:#fff;} .addrclosebtn{ background-color:#fff; color:#000;} #AddressFindDiv > div > form > p{ color:#004cff; padding:3px 6px;} #AddressList > table{ width:100%; margin:30px 0;} #AddressList > table > tbody > tr > th{ border-top:2px solid #ebebeb; border-bottom:1px solid #ebebeb; padding:6px; font-size:20px;} #AddressList > table > tbody > tr > th:nth-child(1){ width:140px; } #AddressList > table > tbody > tr > td{ border-bottom:1px solid #ebebeb; padding:6px; font-size:18px;} #AddressList > table > tbody > tr > td > a{ font-size:18px; position:relative; display:inline-block;} #AddressList > table > tbody > tr > td:nth-child(1){ text-align:center;font-weight:bold; font-size:22px;} #AddressList > table > tbody > tr > td > a:hover{ color:#004cff; } #AddressList > table > tbody > tr > td > a:hover:before{ color:#004cff; border:1px solid #004cff; } #AddressList > nav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:30px;} #AddressList > nav > span ,#AddressList > nav > a{ border:1px solid #000; padding:6px 12px; font-size:18px; text-align:center;} #AddressList > nav > span{ background-color:#000; color:#fff; } /* .popup{ position:fixed; background-color:rgba(0,0,0,0.4); z-index:1000; width:100vw; height:100vh; left:0; top:0; justify-content:center; align-items:center; display:flex;} */ .popup{ z-index:1000;} .popup > div{ display:inline-block;} .popup > div > a{ } .popup > div > a > .hpimg{ display:none;} .popup > div > a > .pcimg{ border:2px solid #fff;}