header { background:#fff; }
.header-cont { width:1170px; height:100px; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.logo { height:100px; }
nav { display:flex; align-items:flex-start; }
nav span { position:relative; z-index:5; margin:0 1em; }
nav > a { margin:0 1em; }
nav a { color:#53555a; padding:.5em; }
nav ul { background:#fff; border:1px solid #ccc; position:absolute; z-index:4; top:0; left:0; height:0; overflow:hidden; transition:.4s; margin-top:2em; opacity:0; }
nav ul li { white-space:nowrap; padding:.5em; border-bottom:1px solid #ccc; transition:.4s; }
nav ul li:hover { background:#eaeaea; }
nav span:hover > ul { opacity:1; height:max-content;  }

.langs { display:flex; }
.langs a {  }

.banner { position:relative; height:400px; }
.banner img { width:100vw; height:400px; object-fit:cover; }
.banner span { position:absolute; z-index:5; left:calc(50% - 585px); top:300px; color:#fff;font-size:2.5em;font-weight:100;}

main { background:url('../_img/mask.jpg') #fff no-repeat right bottom; background-size:contain; width:calc(1170px - 2em); margin:auto; padding:2em 0 3em 2em; }
main h2 { font-size:3.5em; font-weight:100; color:#b81137; }
main > p { width:450px; color:#696b73; margin-bottom:2em; }
main section { display:flex; }
main span { width:300px; margin-right:2em; }
main span figure { width:300px; height:225px; position:relative; }
main span img { width:300px; height:225px; object-fit:cover; }
main span figure::after { content:''; position:absolute; top:0; left:0; bottom:0; right:0; border:10px solid #095a95; opacity:.5; }
main span h3 { font-size:1.5em; font-weight:300; color:#b81137; text-align:center; }
main span article { height:215px; }
main span p { color:#696b73; padding:.5em 0; }
main span a { border:1px solid #b81137; color:#696b73; text-align:center; padding:1em; }

/****/
.container { background:#f1f1f1; width:calc(1170px - 4em); margin:auto; padding:0 2em; }
.container h3 { color:#b81137; font-size:2em; font-weight:300; letter-spacing:.5px; }
.container h4 { color:#b81137; font-size:1.5em; font-weight:300; padding:.5em 0; }
.container p { padding:5px 0; }
.container ul { margin-left:2em; }
.container li { position:relative;padding:5px 0; }
.container li:before { content:''; position:absolute; top:9px; left:-1em; padding:4px; background:#b81137; }

.company-section { padding:1em 0; border-bottom:1px solid #dddee0; }
.company-section figure { display:flex; flex-wrap:wrap; }
.company-section picture { width:calc(25% - 1px); margin:0 1px 1px 0; padding:1em 0; background:#fff; display:flex; justify-content:center; align-items:center; }
.company-section img {  }

.statics {  }
.statics > article { padding-top:2em; }
.content-section { display:flex; justify-content:space-between; align-items:flex-start; padding:2.5em 0 4.5em 0; border-bottom:1px solid #dddee0; }
.content-section:nth-child(odd) { flex-direction: row-reverse; }
.content-section span { width:calc(100% - 350px); }
.content-section figure {}
.content-section figure img {}

.order-form {  }
.order-form h3 { text-align:center;}
form {display:flex;justify-content:center;padding:1em 0 2em 0;}
form .left-box {width:30%;margin-right:1em;}
form input {width:100%;display:block;background:none;padding:5px;margin-bottom:10px;border:1px solid #acacac;}
form .right-box {width:30%;margin-left:1em;}
form textarea {width:100%;display:block;background:none;padding:5px;margin-bottom:10px;border:1px solid #acacac;height:83px;}
form input[type="button"] {width:calc(100% + 12px);display:block;background:#61636b;color:#fff;padding:5px;margin-bottom:10px;border:1px solid #61636b;cursor:pointer;transition:.4s;}
form input[type="button"]:hover {background:#fff;color:#61636b;}
.form-result {display:block;text-align:center;padding-bottom:2em;color:#61636b;}

.blog-cont {width:1170px;margin:auto;background:#fff;}

.blog-list {background:#fff;}
.blog-list a {padding:1em;border-bottom:1px solid #ddd;color:#53555a;display:flex;justify-content:flex-start;align-items:center;}
.blog-list a img {width:150px;height:150px;object-fit:cover;}
.blog-list a span {font-size:1.5em;padding:1em;}
.blog-list a:hover {color:#000;}

.blog-detail {padding:2em;}
.blog-detail a {color:#53555a;padding:1em;margin-bottom:1em;border:1px solid #ddd;display:inline-block;}
.blog-detail a:hover {color:#000;}
.blog-detail > strong {display:block;padding-bottom:1em;font-size:2em;}
.blog-detail article {}
.blog-detail p {padding:.5em 0;line-height:1.5em;font-weight:300;}
.blog-detail img {width:200px;height:200px;object-fit:cover;margin:1em 0;display:block;}

.contact section { padding:1em 0; display:flex; align-items:center; }
.contact figure { width:40%; }
.contact figure img { }
.contact article { padding-left:5em; }
.contact h4 {  }
.contact span { display:flex; margin:1em 0; }
.contact span a { color:#54565f; }
.contact span a:hover { color:#000; }

.wrapper { width:1170px; background:#54565f; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.wrapper article { width:700px; color:#f1f1f1; padding:0 50px 0 20px; }
.wrapper h4 { font-size:3em; font-weight:100; }
.wrapper span { display:flex; margin:.5em 0; }
.wrapper a { color:#f1f1f1; }
.wrapper .socials { display:flex; }
.wrapper .socials a { width:30px; height:30px; margin-right:1em; border-radius:30px; background:#b81137; display:flex; justify-content:center; align-items:center; }
.wrapper .socials img { width:20px; height:auto; }
.wrapper .socials a:hover { background:#fff; }
.wrapper .socials a:hover > img { filter:invert(100%); }
.wrapper > a { width:400px; height:300px; }
.wrapper > a > img { width:400px; height:300px; }

footer { height:40px; padding:0 1em; display:flex; justify-content:center; align-items:center; background:#080808; color:#a6a6a6; font-size:.9em; }
footer span { display:flex; align-items:center; border-right:1px solid #a6a6a6; padding:0 .5em; }
footer a { color:#a6a6a6; padding-left:.5em; }
footer a:hover { color:#b81137; }
footer > img { margin:0 1em; }