@font-face { font-family: 'icomoon'; src: url("../fonts/icomoon/icomoon.eot?srf3rx"); src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg"); font-weight: normal; font-style: normal; }
/* =======================================================
*
* 	Template Style 
*
* ======================================================= */
a { -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; }
body { font-family: "Work Sans", Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: #000; background: #fff; }
#page { position: relative; overflow-x: hidden; width: 100%; height: 100%; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.offcanvas #page { overflow: hidden; position: absolute; }
.offcanvas #page:after { -webkit-transition: 2s; -o-transition: 2s; transition: 2s; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 101; background: rgba(0, 0, 0, 0.7); content: ""; }
a { color: #961412; }
a:hover, a:active, a:focus { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; outline: none; text-decoration: none; }
p { margin-bottom: 20px; }
h1, h2, h3, h4, h5, h6, figure { color: #000; font-family: "Work Sans", Arial, sans-serif; font-weight: 400; margin: 0 0 20px 0; line-height: 1.7em; letter-spacing: 1px; }
.fh5co-heading h2 { color: #99140a !important; font-weight: bold; }
#fh5co-started h2 { color: #fff !important; font-weight: bold; }
#fh5co-started p { color: #fff !important; }
::-webkit-selection {
 color: #fff;
 background: #961412;
}

::-moz-selection {
 color: #fff;
 background: #961412;
}
::selection { color: #fff; background: #961412; }
.fh5co-nav { position: absolute; top: 0; margin: 0; padding: 0; width: 100%; padding: 0; z-index: 1001; transition-duration: 0.1s; }
.fh5co-nav .top-menu { padding: 0px 0 13px 0; }
.fh5co-nav .top { padding: 14px 0 0 0; margin-bottom: 0; }
.fh5co-nav .top .num, .fh5co-nav .top .fh5co-social { display: inline-block; margin: 0; }
.fh5co-nav .top .num { color: rgba(255, 255, 255, 0.6); font-size: 13px; padding-right: 10px; margin-right: 5px; border-right: 1px solid rgba(255, 255, 255, 0.2); letter-spacing: 0px; }
.fh5co-nav .top .fh5co-social li { font-size: 16px; }
.fh5co-nav .top .fh5co-social li a { padding: 0 7px; }
.fh5co-nav .top .fh5co-social li a i { font-size: 16px; }
.fh5co-nav #fh5co-logo { font-size: 24px; margin: 0; padding: 0; text-transform: uppercase; font-weight: bold; font-weight: 700; font-family: "Work Sans", Arial, sans-serif; margin-top: -0.7em; }
.fh5co-nav #fh5co-logo a span { color: #961412; }
.fh5co-nav #fh5co-logo a { background: url(../images/logo4.png) no-repeat center center; width: 200px; height: 50px; display: block; background-size: contain; }
.fh5co-nav a { padding: 5px 10px; color: #fff; }

@media print, screen and (max-width: 768px) {
.fh5co-nav .menu-1 { display: none; }
}
.fh5co-nav ul { padding: 0; margin: 10px 0 0 0; }
.fh5co-nav ul li { padding: 0; margin: 0; list-style: none; display: inline; }
.fh5co-nav ul li a { font-size: 14px; padding: 17px 0px 30px 15px; color: rgba(255, 255, 255, 0.5); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.fh5co-nav ul li a:hover, .fh5co-nav ul li a:focus, .fh5co-nav ul li a:active { color: white; }
.fh5co-nav ul li { position: relative; }
.fh5co-nav ul li .dropdown { width: auto; min-width: 190px; -webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75); box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75); z-index: 1002; visibility: hidden; opacity: 0; position: absolute; top: 40px; left: 0; text-align: left; background: #000; padding: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; }
.fh5co-nav ul li. .dropdown:before {
bottom: 100%;
left: 40px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #000;
border-width: 8px;
margin-left: -8px;
}
.fh5co-nav ul li. .dropdown li {
display: block;
margin-bottom: 7px;
}
.fh5co-nav ul li. .dropdown li:last-child {
margin-bottom: 0;
}
.fh5co-nav ul li. .dropdown li a {
padding: 2px 0;
display: block;
color: #999999;
line-height: 1.2;
text-transform: none;
font-size: 13px;
letter-spacing: 0;
}
.fh5co-nav ul li. .dropdown li a:hover {
color: #fff;
}
.fh5co-nav ul li.:hover a, .fh5co-nav ul li.:focus a {
color: #fff;
}
.fh5co-nav ul li.btn-cta a { padding: 30px 0px !important; color: #fff; }
.fh5co-nav ul li.btn-cta a span { background: rgba(255, 255, 255, 0.2); padding: 4px 10px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;
-webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; border-radius: 100px; }
.fh5co-nav ul li.btn-cta a:hover span { -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75); box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75); }
.fh5co-nav ul li.active > a { color: #fff !important; }
.fh5co-nav.is-fixed ul li.active > a { color: #000 !important; }
.fh5co-nav.is-fixed #fh5co-logo a { background: url(../images/logo3.png) no-repeat center center; width: 200px; height: 50px; display: block; background-size: contain; }


#fh5co-header, #fh5co-counter, .fh5co-bg { background-size: cover; background-position: top center; background-repeat: no-repeat; position: relative; }
.fh5co-bg { background-size: cover; background-position: center center; position: relative; width: 100%; float: left; }
.fh5co-video { overflow: hidden; }

@media print, screen and (max-width: 992px) {
.fh5co-video { height: 450px; }
}
.fh5co-video a { z-index: 1001; position: absolute; top: 50%; left: 50%; margin-top: -45px; margin-left: -45px; width: 90px; height: 90px; display: table; text-align: center; background: #fff; -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75); box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; }
.fh5co-video a i { text-align: center; display: table-cell; vertical-align: middle; font-size: 40px; }
.fh5co-video .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.fh5co-video:hover .overlay { background: rgba(0, 0, 0, 0.7); }
.fh5co-video:hover a { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
.fh5co-cover { height: 800px; background-size: cover; background-position: top center; background-repeat: no-repeat; position: relative; float: left; width: 100%; }
.fh5co-cover .overlay { z-index: 0; position: absolute; bottom: 0; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.4); }
.fh5co-cover > .fh5co-container { position: relative; z-index: 10; }

@media print, screen and (max-width: 768px) {
.fh5co-cover { height: 600px; }
}
.fh5co-cover .display-t, .fh5co-cover .display-tc { z-index: 9; height: 700px; display: table; width: 100%; margin-top: 100px; }

@media print, screen and (max-width: 768px) {
.fh5co-cover .display-t, .fh5co-cover .display-tc { height: 600px; }
}
.fh5co-cover.fh5co-cover-sm { height: 400px; }

@media print, screen and (max-width: 768px) {
.fh5co-cover.fh5co-cover-sm { height: 400px; }
}
.fh5co-cover.fh5co-cover-sm .display-t, .fh5co-cover.fh5co-cover-sm .display-tc { height: 400px; display: table; width: 100%; }

@media print, screen and (max-width: 768px) {
.fh5co-cover.fh5co-cover-sm .display-t, .fh5co-cover.fh5co-cover-sm .display-tc { height: 400px; }
#fh5co-header .display-tc h1, #fh5co-counter .display-tc h1, .fh5co-cover .display-tc h1 { font-size: 7vw !important; }
}
#fh5co-header .display-tc, #fh5co-counter .display-tc, .fh5co-cover .display-tc { display: table-cell !important; vertical-align: middle; }
#fh5co-header .display-tc h1, #fh5co-header .display-tc h2, #fh5co-counter .display-tc h1, #fh5co-counter .display-tc h2, .fh5co-cover .display-tc h1, .fh5co-cover .display-tc h2 { margin: 0; padding: 0; color: white; }
#fh5co-header .display-tc h1, #fh5co-counter .display-tc h1, .fh5co-cover .display-tc h1 { margin-bottom: 40px; font-size: 35px; line-height: 50px; font-weight: bold; }

@media print, screen and (max-width: 768px) {
#fh5co-header .display-tc h1, #fh5co-counter .display-tc h1, .fh5co-cover .display-tc h1 { font-size: 20px !important;}
}
#fh5co-header .display-tc h2, #fh5co-counter .display-tc h2, .fh5co-cover .display-tc h2 { font-size: 20px; line-height: 1.5; margin-bottom: 30px; }
#fh5co-header .display-tc .btn, #fh5co-counter .display-tc .btn, .fh5co-cover .display-tc .btn { padding: 15px 30px; color: #fff; border: none !important; font-size: 18px; }
#fh5co-header .display-tc .btn.btn-video, #fh5co-counter .display-tc .btn.btn-video, .fh5co-cover .display-tc .btn.btn-video { background: rgba(9, 198, 171, 0.8); border: none; }
#fh5co-header .display-tc .btn.btn-video:hover, #fh5co-header .display-tc .btn.btn-video:focus, #fh5co-counter .display-tc .btn.btn-video:hover, #fh5co-counter .display-tc .btn.btn-video:focus, .fh5co-cover .display-tc .btn.btn-video:hover, .fh5co-cover .display-tc .btn.btn-video:focus { background: rgba(9, 198, 171, 0.9) !important; color: #fff !important; }
#fh5co-header .display-tc .btn:hover, #fh5co-header .display-tc .btn:focus, #fh5co-counter .display-tc .btn:hover, #fh5co-counter .display-tc .btn:focus, .fh5co-cover .display-tc .btn:hover, .fh5co-cover .display-tc .btn:focus { color: #fff !important; }
#fh5co-header .display-tc .btn.btn-learn, #fh5co-counter .display-tc .btn.btn-learn, .fh5co-cover .display-tc .btn.btn-learn { background: rgba(234, 146, 21, 0.8); border: none; }
#fh5co-header .display-tc .btn.btn-learn:hover, #fh5co-header .display-tc .btn.btn-learn:focus, #fh5co-counter .display-tc .btn.btn-learn:hover, #fh5co-counter .display-tc .btn.btn-learn:focus, .fh5co-cover .display-tc .btn.btn-learn:hover, .fh5co-cover .display-tc .btn.btn-learn:focus { background: rgba(234, 146, 21, 0.9) !important; color: #fff !important; }
#fh5co-header .display-tc .btn:hover, #fh5co-counter .display-tc .btn:hover, .fh5co-cover .display-tc .btn:hover { background: #961412 !important; -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important; -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important; box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important; }
#fh5co-header .display-tc .form-inline .form-group, #fh5co-counter .display-tc .form-inline .form-group, .fh5co-cover .display-tc .form-inline .form-group { width: 100% !important; margin-bottom: 10px; }
#fh5co-header .display-tc .form-inline .form-group .form-control, #fh5co-counter .display-tc .form-inline .form-group .form-control, .fh5co-cover .display-tc .form-inline .form-group .form-control { width: 100%; background: #fff; border: none; }
.fh5co-bg-section { background: rgba(0, 0, 0, 0.05); }
#fh5co-explore, #fh5co-pricing, #fh5co-testimonial, #fh5co-started, #fh5co-project, #fh5co-blog, #fh5co-contact, #fh5co-footer, #fh5co-services, #fh5co-privacy, #fh5co-contact, #fh5co-news { padding: 3em 0; clear: both; }
#fh5co-about { padding: 0; clear: both; }

@media print, screen and (max-width: 768px) {
#fh5co-explore, #fh5co-pricing, #fh5co-testimonial, #fh5co-started, #fh5co-project, #fh5co-blog, #fh5co-contact, #fh5co-footer { padding: 3em 0; }
}
#fh5co-counter { padding: 3em 0; clear: both; }
#fh5co-steps { clear: both; padding-bottom: 7em; }
.fh5co-counters { padding: 3em 0; background-size: cover; background-attachment: fixed; background-position: center center; }
.fh5co-counters .counter-wrap { border: 1px solid red !important; }
.fh5co-counters .fh5co-counter { font-size: 44px; display: block; color: rgba(0, 0, 0, 0.7); font-family: "Work Sans", Arial, sans-serif; width: 100%; font-weight: 400; margin-bottom: .3em; }
.fh5co-counters .fh5co-counter-label { color: rgba(0, 0, 0, 0.5); text-transform: uppercase; font-size: 16px; letter-spacing: 3px; margin-bottom: 2em; display: block; }
#fh5co-explore .fh5co-explore1 { margin-bottom: 7em; }
.mt { margin-top: 70px; }
.mt h4 { position: relative; padding-left: 40px; font-size: 20px; }
.mt h4 i { position: absolute; left: 0; top: 0; color: #961412; }
.mt > div { margin-bottom: 40px; }
.mt .list-nav { margin: 50px 0 30px 0; padding: 0; }
.mt .list-nav li { list-style: none; margin: 0; padding: 0; font-size: 16px; padding-left: 30px; margin-bottom: 10px; position: relative; }
.mt .list-nav li i { position: absolute; left: 0; top: 0; font-size: 18px; color: #961412; }
.fh5co-social-icons { margin: 0; padding: 0; }
.fh5co-social-icons li { margin: 0; padding: 0; list-style: none; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;
}
.fh5co-social-icons li a { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;
color: #961412; padding-left: 10px; padding-right: 10px; }
.fh5co-social-icons li a i { font-size: 20px; }
.fh5co-contact-info ul { padding: 0; margin: 0; }
.fh5co-contact-info ul li { padding: 0 0 0 40px; margin: 0 0 30px 0; list-style: none; position: relative; }
.fh5co-contact-info ul li:before { color: #961412; position: absolute; left: 0; top: .05em; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.fh5co-contact-info ul li.address:before { font-size: 30px; content: "\e9d1"; }
.fh5co-contact-info ul li.phone:before { font-size: 23px; content: "\e9f4"; }
.fh5co-contact-info ul li.email:before { font-size: 23px; content: "\e9da"; }
.fh5co-contact-info ul li.url:before { font-size: 23px; content: "\e9af"; }
.proj-bottom { padding-bottom: 4em; }
.fh5co-project { margin-bottom: 30px; }
.fh5co-project > a { display: block; color: #000; position: relative; bottom: 0; overflow: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.fh5co-project > a img { position: relative; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.fh5co-project > a:after { opacity: 0; visibility: hidden; content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 0; -webkit-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75); -ms-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75); -o-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75); box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75); z-index: 8; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.fh5co-project > a h3, .fh5co-project > a span { z-index: 12; position: absolute; right: 20px; left: 20px; bottom: 50px; color: #fff; margin: 0; padding: 0; opacity: 1; font-size: 20px; font-weight: 300; visibility: visible; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
.fh5co-project > a span { font-size: 16px; bottom: 20px; }
.fh5co-project > a:hover { -webkit-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75); box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75); }
.fh5co-project > a:hover:after { opacity: 1; visibility: visible; }

@media print, screen and (max-width: 768px) {
.fh5co-project > a:hover:after { opacity: 0; visibility: hidden; }
.fh5co-project > a h3, .fh5co-project > a span { font-size: 4vw; }
}
.fh5co-project > a:hover h3, .fh5co-project > a:hover span { opacity: 1; bottom: 55px; }
.fh5co-project > a:hover span { bottom: 15px; }
.fh5co-project > a:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }

@media print, screen and (max-width: 768px) {
.fh5co-project > a:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
}
.features { margin-bottom: 3em; width: 100%; float: left; }
.fh5co-heading { margin-bottom: 3em; }
.fh5co-heading.fh5co-heading-sm { margin-bottom: 2em; }
.fh5co-heading h2 { font-size: 32px; margin-bottom: 20px; line-height: 1.5; color: #000; }
.fh5co-heading p { font-size: 18px; line-height: 1.5; color: #000; }
.fh5co-heading span { display: block; margin-bottom: 10px; text-transform: uppercase; font-size: 12px; letter-spacing: 2px; }
#fh5co-testimonial { background: #efefef; }
#fh5co-testimonial .testimony-slide { text-align: center; }
#fh5co-testimonial .testimony-slide span { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; display: block; }
#fh5co-testimonial .testimony-slide figure { margin-bottom: 10px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;
}
#fh5co-testimonial .testimony-slide figure img { width: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; }
#fh5co-testimonial .testimony-slide blockquote { border: none; margin: 30px auto; width: 70%; position: relative; padding: 0; }

@media print, screen and (max-width: 992px) {
#fh5co-testimonial .testimony-slide blockquote { width: 100%; }
}
#fh5co-testimonial .arrow-thumb { position: absolute; top: 40%; display: block; width: 100%; }
#fh5co-testimonial .arrow-thumb a { font-size: 32px; color: #dadada; }
#fh5co-testimonial .arrow-thumb a:hover, #fh5co-testimonial .arrow-thumb a:focus, #fh5co-testimonial .arrow-thumb a:active { text-decoration: none; }
.bs-wizard { margin-top: 40px; }
/*Form Wizard*/
.bs-wizard { border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0; }
.bs-wizard > .bs-wizard-step { padding: 0; position: relative; }
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum { font-size: 16px; margin-bottom: 10px; }
.bs-wizard > .bs-wizard-step .bs-wizard-info { color: #999; font-size: 16px; padding: 20px; }
.bs-wizard > .bs-wizard-step > .bs-wizard-dot { position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%; }
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after { content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step > .progress { position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 22px 0; }
.bs-wizard > .bs-wizard-step > .progress > .progress-bar { width: 0px; box-shadow: none; background: #fbe8aa; }
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar { width: 100%; }
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar { width: 50%; }
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar { width: 0%; }
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar { width: 100%; }
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot { background-color: #f5f5f5; }
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after { opacity: 0; }
.bs-wizard > .bs-wizard-step:first-child > .progress { left: 50%; width: 50%; }
.bs-wizard > .bs-wizard-step:last-child > .progress { width: 50%; }
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot { pointer-events: none; }
#fh5co-started { background-size: cover; background-position: top center; background-repeat: no-repeat; position: relative; float: left; width: 100%; }
#fh5co-started .overlay { z-index: 0; position: absolute; bottom: 0; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); }
#fh5co-started .fh5co-heading h2 { color: #fff; margin-bottom: 20px !important; }
#fh5co-started .fh5co-heading p { color: rgba(255, 255, 255, 0.5); }
#fh5co-started .form-control { background: rgba(255, 255, 255, 0.2); border: none !important; color: #fff; font-size: 16px !important; width: 100%; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
#fh5co-started .form-control::-webkit-input-placeholder {
 color: #fff;
}
#fh5co-started .form-control:-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
}
#fh5co-started .form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
}
#fh5co-started .form-control:-ms-input-placeholder {
 color: #fff;
}
#fh5co-started .form-control:focus { background: rgba(255, 255, 255, 0.3); }
#fh5co-started .btn { height: 54px; border: none !important; background: #961412; color: #fff; font-size: 16px; text-transform: uppercase; font-weight: 400; padding-left: 50px; padding-right: 50px; }
#fh5co-started .form-inline .form-group { width: 100% !important; margin-bottom: 10px; }
#fh5co-started .form-inline .form-group .form-control { width: 100%; }
.fh5co-blog { margin-bottom: 60px; }
.fh5co-blog > a { display: block; position: relative; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.fh5co-blog > a img { width: 100%; }

@media print, screen and (max-width: 768px) {
.fh5co-blog { width: 100%; }
}
.fh5co-blog .blog-text { margin-bottom: 30px; position: relative; background: #fff; width: 100%; padding: 30px; float: left; -webkit-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18); box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18); }
.fh5co-blog .blog-text span { display: block; margin-bottom: 20px; font-size: 12px; text-align: right; }
.fh5co-blog .blog-text span.comment { float: right; }
.fh5co-blog .blog-text span.comment a { color: rgba(0, 0, 0, 0.3); }
.fh5co-blog .blog-text span.comment a i { color: #961412; padding-left: 7px; }
.fh5co-blog .blog-text h3 { font-size: 20px; margin-bottom: 20px; line-height: 1.5; }
.fh5co-blog .blog-text h3 a { color: black; }
.pricing { display: block; float: left; margin-bottom: 30px; width: 100%; }
.price-box { width: 100%; text-align: center; padding: 30px; background: rgba(0, 0, 0, 0.05); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; margin-bottom: 40px; position: relative; }
.price-box.popular .btn-select-plan { background: #961412; }
.price-box.popular .price { color: #961412; }
.price-box .btn-select-plan { padding: 10px 20px; background: #09C6AB; color: #fff; }
.price-box .classes { padding: 0; }
.price-box .classes li { display: block; width: 100%; list-style: none; margin: 0; font-size: 16px; padding: 8px 10px; }
.price-box .classes li.color { background: rgba(0, 0, 0, 0.04); }
.pricing-plan { margin: 0 0 50px 0; padding: 0; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: #888f94; }
.pricing-plan.pricing-plan-offer { margin-bottom: 24px; }
.pricing-plan span { display: block; margin-top: 10px; margin-bottom: 0; color: #d5d8db; }
.price { font-size: 72px; color: #000; line-height: 50px; }
.price .currency { font-size: 30px; top: -0.9em; padding-right: 10px; }
.price small { font-size: 13px; display: block; text-transform: uppercase; color: #888f94; }
#fh5co-footer { background: #efefef; }
#fh5co-footer .fh5co-footer-links { padding: 0; margin: 0; }
#fh5co-footer .fh5co-footer-links li { padding: 0; margin: 0; list-style: none; }
#fh5co-footer .fh5co-footer-links li a { color: rgba(0, 0, 0, 0.5); text-decoration: none; }
#fh5co-footer .fh5co-footer-links li a:hover { text-decoration: underline; }
#fh5co-footer .fh5co-widget { margin-bottom: 30px; }

@media print, screen and (max-width: 768px) {
#fh5co-footer .fh5co-widget { text-align: left; }
}
#fh5co-footer .fh5co-widget h3 { margin-bottom: 15px; font-weight: bold; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }
#fh5co-footer .copyright .block { display: block; }
#map { width: 100%; height: 500px; position: relative; clear: both; }

@media print, screen and (max-width: 768px) {
#map { height: 200px; }
}
#fh5co-offcanvas { position: absolute; z-index: 1901; width: 270px; background: black; top: 0; right: 0; top: 0; bottom: 0; padding: 75px 40px 40px 40px; overflow-y: auto; display: none; -moz-transform: translateX(270px); -webkit-transform: translateX(270px); -ms-transform: translateX(270px); -o-transform: translateX(270px); transform: translateX(270px); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

@media print, screen and (max-width: 768px) {
#fh5co-offcanvas { display: block; }
}
.offcanvas #fh5co-offcanvas { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); }
#fh5co-offcanvas a { color: rgba(255, 255, 255, 0.5); }
#fh5co-offcanvas a:hover { color: rgba(255, 255, 255, 0.8); }
#fh5co-offcanvas ul { padding: 0; margin: 0; }
#fh5co-offcanvas ul li { padding: 0; margin: 0; margin-bottom: 1em; list-style: none; }
#fh5co-offcanvas ul li > ul { padding-left: 20px; display: none; }
#fh5co-offcanvas ul li.offcanvas- > a { display: block; position: relative; }
#fh5co-offcanvas ul li.offcanvas- > a:after { position: absolute; right: 0px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e921"; font-size: 20px; color: rgba(255, 255, 255, 0.2); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
#fh5co-offcanvas ul li.offcanvas-.active a:after { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); }
.uppercase { font-size: 16px; color: #000; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; }
.gototop { position: fixed; bottom: 20px; right: 20px; z-index: 999; opacity: 0; visibility: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.gototop.active { opacity: 1; visibility: visible; }
.gototop a { width: 50px; height: 50px; display: table; background: rgba(150, 20, 22, 0.5); color: #fff; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; }
.gototop a i { height: 50px; display: table-cell; vertical-align: middle; }
.gototop a:hover, .gototop a:active, .gototop a:focus { text-decoration: none; outline: none; }
.fh5co-nav-toggle { width: 25px; height: 25px; cursor: pointer; text-decoration: none; }
.fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after { background: #444; }
.fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active { outline: none; border-bottom: none !important; }
.fh5co-nav-toggle i { position: relative; display: inline-block; width: 25px; height: 2px; color: #252525; font: bold 14px/.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: #252525; transition: all .2s ease-out; }
.fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after { content: ''; width: 25px; height: 2px; background: #252525; position: absolute; left: 0; transition: all .2s ease-out; }
.fh5co-nav-toggle.fh5co-nav-white > i { color: #fff; background: #fff; }
.fh5co-nav-toggle.fh5co-nav-white > i::before, .fh5co-nav-toggle.fh5co-nav-white > i::after { background: #fff; }
.fh5co-nav-toggle i::before { top: -7px; }
.fh5co-nav-toggle i::after { bottom: -7px; }
.fh5co-nav-toggle:hover i::before { top: -10px; }
.fh5co-nav-toggle:hover i::after { bottom: -10px; }
.fh5co-nav-toggle.active i { background: transparent; }
.fh5co-nav-toggle.active i::before { top: 0; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); }
.fh5co-nav-toggle.active i::after { bottom: 0; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); transform: rotateZ(-45deg); }
.fh5co-nav-toggle { position: fixed; right: 0px; top: 42px; z-index: 21; padding: 6px 0 0 0; display: block; margin: 0 auto; display: none; height: 44px; width: 44px; z-index: 2001; border-bottom: none !important; }

@media print, screen and (max-width: 980px) {
.side_menu { clear: both !important; }
}

@media print, screen and (max-width: 768px) {
.fh5co-nav-toggle { display: block; }
}
.btn { margin-right: 4px; margin-bottom: 4px; font-family: "Work Sans", Arial, sans-serif; font-size: 16px; font-weight: 400; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 8px 20px; }
.btn.btn-md { padding: 8px 20px !important; }
.btn.btn-lg { padding: 18px 36px !important; }
.btn:hover, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.btn-primary { background: #961412; color: #fff; border: 2px solid #961412; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: #e70d11 !important; border-color: #e70d11 !important; }
.btn-primary.btn-outline { background: transparent; color: #961412; border: 2px solid #961412; }
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active { background: #961412; color: #fff; }
.btn-success { background: #5cb85c; color: #fff; border: 2px solid #5cb85c; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: #4cae4c !important; border-color: #4cae4c !important; }
.btn-success.btn-outline { background: transparent; color: #5cb85c; border: 2px solid #5cb85c; }
.btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active { background: #5cb85c; color: #fff; }
.btn-info { background: #5bc0de; color: #fff; border: 2px solid #5bc0de; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background: #46b8da !important; border-color: #46b8da !important; }
.btn-info.btn-outline { background: transparent; color: #5bc0de; border: 2px solid #5bc0de; }
.btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active { background: #5bc0de; color: #fff; }
.btn-warning { background: #f0ad4e; color: #fff; border: 2px solid #f0ad4e; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: #eea236 !important; border-color: #eea236 !important; }
.btn-warning.btn-outline { background: transparent; color: #f0ad4e; border: 2px solid #f0ad4e; }
.btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active { background: #f0ad4e; color: #fff; }
.btn-danger { background: #d9534f; color: #fff; border: 2px solid #d9534f; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #d43f3a !important; border-color: #d43f3a !important; }
.btn-danger.btn-outline { background: transparent; color: #d9534f; border: 2px solid #d9534f; }
.btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active { background: #d9534f; color: #fff; }
.btn-outline { background: none; border: 2px solid gray; font-size: 16px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
.btn-outline:hover, .btn-outline:focus, .btn-outline:active { box-shadow: none; }
.btn.with-arrow { position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
.btn.with-arrow i { visibility: hidden; opacity: 0; position: absolute; right: 0px; top: 50%; margin-top: -8px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; }
.btn.with-arrow:hover { padding-right: 50px; }
.btn.with-arrow:hover i { color: #fff; right: 18px; visibility: visible; opacity: 1; }
.form-control { box-shadow: none; background: transparent; border: 2px solid rgba(0, 0, 0, 0.1); height: 54px; font-size: 18px; font-weight: 300; }
.form-control:active, .form-control:focus { outline: none; box-shadow: none; border-color: #961412; }
.row-pb-lg { padding-bottom: 7em !important; }
.row-pb-md { padding-bottom: 4em !important; }
.row-pb-sm { padding-bottom: 2em !important; }
.row-pt-lg { padding-top: 7em !important; }
.row-pt-md { padding-top: 4em !important; }
.row-pt-sm { padding-top: 2em !important; }
.fh5co-loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../images/loader.gif) center no-repeat #fff; }
.js .animate-box { opacity: 0; }
h2 { letter-spacing: 5px; }
h2 span { display: block; }
.scrolldownbar { background: rgba(0,0,0,0.6); padding: 40px 0; width: 100%; margin-bottom: 7em; }
.scrolldownbar .img { height: 37px; width: 97px; margin: 0 auto; }
#fh5co-about p { color: #fff; }
#fh5co-about .container-fluid { padding: 7em 0 !important; }
/*#fh5co-about .logo { background: url(../images/logo4.png) no-repeat center center; width: 233px; height: 58px; background-size: contain; margin: 0 auto 3em; }*/
.fh5co-project h3 div { font-size: 16px; margin-top: 1em; }
#fh5co-started h3 { color: #fff; font-size: 15px; }
/*# sourceMappingURL=style.css.map */
#fh5co-services .col-md-3 { background-position: center center; background-size: cover; }
.row-bottom-padded-sm { padding-bottom: 3em; }
.fh5co-cover-sm h1 { font-size: 40px !important; }
ul.nav_sub { margin: 0 0 0 1em !important; padding: 3em 0 1em 0em !important; }
ul.nav_sub li { margin: 0; padding: 1em 0 !important; list-style-type: none; border-bottom: dotted 1px #CBCBCB; line-height: 1.2em !important; }
ul.nav_sub li a { margin: 0; padding: 0; display: block; color: #000000; line-height: 1.2em !important; }
ul.nav_sub li.title { line-height: 3em; }
ul.nav_sub + ul.nav_sub { padding-top: 3em !important; }

@media print, screen and (max-width: 768px) {
ul.nav_sub { margin: 0 !important; }
.row-bottom-padded-sm { padding-bottom: 1.5em; }
#fh5co-services h2 { font-size: 6vw !important; }
}
dl.table { }
dl.table dd { float: left; width: 40%; padding: 2em 0em; border-top: solid 1px #961412; font-weight: normal; color: #961412; clear: both; }
dl.table dt { float: left; width: 60%; padding: 2em 1em; border-top: solid 1px #D4D4D4; font-weight: normal; }
.container.common { padding: 3em 0; }
.height_sm { height: 200px; }
.height_md { height: 300px; }
.height_lg { height: 400px; }
.fh5co-blog .blog-text.area_case h3 { margin-bottom: 0; height: 9em; line-height: 1em; }
.fh5co-blog .blog-text.area_case p { margin-bottom: 5px; }
.fh5co-blog .blog-text.area_case { padding-bottom: 15px; }
#fh5co-services .col-md-3 { background-position: center center; background-size: cover; }
.row-bottom-padded-sm { padding-bottom: 3em; }
.fh5co-cover-sm h1 { font-size: 40px !important; }
ul.nav_sub { margin: 0; padding: 3em 0; }
ul.nav_sub li { margin: 0; padding: 0; list-style-type: none; border-bottom: dotted 1px #CBCBCB; }
ul.nav_sub li a { margin: 0; padding: 0; display: block; color: #000000; line-height: 3em; }

@media print, screen and (max-width: 768px) {
.area_case .col-md-4 { width: 50% !important; float: left; }
.area_case .col-md-4 .fh5co-blog .blog-text { padding: 0; }
.area_case p { height: 8em !important; }
.row-bottom-padded-sm { padding-bottom: 2em; }
.container.common { padding-left: 15px !important; padding-right: 15px !important; }
dd, dt { float: none !important; width: 100% !important; }
dd { padding-bottom: 0 !important; }
dt { padding-top: 0 !important; border: none !important; }
dl.table dt { padding: 0 0 1.5em 0 !important; }
}
dl.table { }
dl.table dd { float: left; width: 20%; padding: 2em 0; border-top: solid 1px #e79392; font-weight: normal; color: #961412; }
dl.table dt { float: left; width: 80%; padding: 2em 1em; border-top: solid 1px #D4D4D4; font-weight: normal; }
.container.common { padding: 3em 0; }
.height_sm { height: 200px; }
.height_md { height: 300px; }
.height_lg { height: 400px; }
.bg_gray { background: #EDEDED; padding: 1.5em; margin-top: 2em; }
.bg_gray p { margin-bottom: 0; }
.bg_gray h3 { margin-bottom: 0.8em !important; }
h3 { color: #961412; }
.row.service_detail { }
.row.service_detail h2 { font-weight: bold; letter-spacing: 0; line-height: 1.3em; border-left: solid 5px #961412; padding-left: 1em; color: #961412; font-size: 1.8em; }
.row.service_detail h2 span { font-weight: normal; display: block; font-size: 12px; color: #8C8C8C; }
.row.service_detail ul { clear: both; }
.row.service_detail ul li { }
.row.service_detail h3 { color: #961412; font-size: 1em; }
.image { display: block; width: 100%; max-width: 750px; height: auto; margin: 0 auto 2em; }
.icon_circle { border: solid 3px #961412; width: 150px; height: 150px; border-radius: 50%;		/* CSS3草案 */ -webkit-border-radius: 50%;	/* Safari,Google Chrome用 */ -moz-border-radius: 50%; margin: 0 auto 2em; }
.bg_cc { background-position: center center; margin-bottom: 2em; background-size: cover; }
.icon1 { background: url(../images/service/icon1.png) no-repeat center center; background-size: 50px; }
.icon2 { background: url(../images/service/icon2.png) no-repeat center center; background-size: 50px; }
.icon3 { background: url(../images/service/icon3.png) no-repeat center center; background-size: 50px; }
.icon4 { background: url(../images/service/icon4.png) no-repeat center center; background-size: 50px; }
.icon5 { background: url(../images/service/icon5.png) no-repeat center center; background-size: 50px; }
.icon6 { background: url(../images/service/icon6.png) no-repeat center center; background-size: 50px; }
.icon7 { background: url(../images/service/icon7.png) no-repeat center center; background-size: 50px; }
.icon8 { background: url(../images/service/icon8.png) no-repeat center center; background-size: 50px; }
.icon9 { background: url(../images/service/icon9.png) no-repeat center center; background-size: 50px; }
.icon10 { background: url(../images/service/icon10.png) no-repeat center center; background-size: 50px; }
.icon11 { background: url(../images/service/icon11.png) no-repeat center center; background-size: 50px; }
.icon12 { background: url(../images/service/icon12.png) no-repeat center center; background-size: 50px; }
.icon13 { background: url(../images/service/icon13.png) no-repeat center center; background-size: 50px; }
.icon14 { background: url(../images/service/icon14.png) no-repeat center center; background-size: 50px; }
.icon15 { background: url(../images/service/icon15.png) no-repeat center center; background-size: 50px; }
.icon16 { background: url(../images/service/icon16.png) no-repeat center center; background-size: 50px; }
.icon17 { background: url(../images/service/icon17.png) no-repeat center center; background-size: 50px; }
span.anchorlink { position: relative; top: -250px; display: block; }
.service_detail p + ul { padding: 0 0 0 1em; padding-bottom: 2em; }
.service_detail h2 + p { font-size: 20px; color: #961412 }
.multi_line .icon_circle + h3 { color: #961412; font-size: 1em; height: 4em !important; display: block; }
span.required { color: #FF0004; margin-left: 0.5em; font-size: 12px; }
#fh5co-news dl { border-bottom: solid 1px #B7B7B7; clear: both; }
#fh5co-news dd { float: left; width: 20%; }
#fh5co-news dt { float: left; width: 80%; }
#fh5co-privacy h3 { margin-bottom: 0; }
#fh5co-privacy h3 + p { border-bottom: dotted 1px #D0D0D0; padding-bottom: 2em; margin-bottom: 2em; }
.fixed ul.nav_sub { padding: 3em 0 1em 0em !important; }
#loader-bg { display: none; position: fixed !important; width: 100%; height: 100%; top: 0px; left: 0px; background: #ffffff; z-index: 10000000 !important; }
#loader_rogo { display: none; position: fixed !important; top: 50% !important; left: 50% !important; width: 200px; height: 143px; margin-top: -89px; margin-left: -100px; text-align: center; color: #fff; z-index: 9999; }
.is-fixed { position: fixed; top: 0; left: 0; z-index: 2; width: 100%; background: #ffffff; border-bottom: 1px solid #dddddd; }
.is-fixed a { color: #666666 !important; }
.nav_sub .active { border-left: solid 4px #99140a; }
.nav_sub .active a { color: #99140a; }
ul.nav_sub li a { padding-left: 1em; }
ul.nav_sub li { border-left: solid 4px #fff; }
#fh5co-footer a, #fh5co-footer p { font-size: 13px; }
ul.nav_sub li.title { background: #99140a; color: #fff; padding-left: 1em !important; margin-bottom: 1.5em; border: none; }
ul.nav_sub li { font-size: 14px; white-space: nowrap; }
.area_case .fa { color: #fff; text-align: center; font-size: 3rem; margin: 0 auto 1em; height: 100px; width: 100px; display: block; background: #99140a; line-height: 100px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
.area_case p { height: 6em; }
.area_case h3 { text-align: center; }
span.anchorlink { position: relative; top: -250px; display: block; }
.nav_sub .service_parents { border-bottom: none; }
.nav_sub .service_parents .red { margin-bottom: 1em; font-weight: bold; }
.nav_sub .service_parents ul { padding-left: 0; }
ul.nav_sub li li a { }
p.name { padding-top: 1em; color: #000000; font-size: 25px; text-align: right; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
ul { padding-left: 1em; }
.nav_sub .fa { padding-right: 1em; color: #929292; }
.nav_sub .active .fa { padding-right: 1em; color: #99140a; }
textarea { height: 300px !important; }
.parenthesis { font-size: 20px; color: #99140a !important; font-style: italic; position: relative; width: 100%; padding: 25px 30px 15px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.parenthesis p span { }
.err { color: #FF0004; font-size: 15px; font-weight: normal; margin-top: 0.5em; }
.image:hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; }

#fh5co-services .box-list {position: relative; width: 100%; height: 550px;}
#fh5co-services .inbox {position: absolute; margin: auto; display: inline-block; width: 270px; height: 210px; background-color: #ff8c00; padding: 10px;}
#fh5co-services .inbox h2 {text-align: center; font-size: 18px; font-weight: bold; letter-spacing: 1px; color: #fafafa;}
#fh5co-services .inbox p {text-align: left; font-size: 14px; margin: 5px; line-height: 17px; color: #fafafa;}
#fh5co-services .inbox.top {top: 0; left: 0; right: 0;}
#fh5co-services .inbox.left {bottom: 0; left: 0;}
#fh5co-services .inbox.right {bottom: 0; right: 0;}


/*news_list*/
.news-content {
  max-width: 1100px;
  margin: auto;
}

.news-list-box {
  width: 250px;
  height: 250px;
  position: relative;
  display: inline-block;
  margin: 15px;
}

.news-list-box .textbox {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  padding: 10px;
}

.news-list-box .title {
  font-weight: bold;
  font-size: 16px;
}

.news-list-box .date {
  font-size: 12px;
  color: #ddd;
  text-align: right;
}

.page-box {
  margin: 30px;
  position: relative;
  font-size: 20px;
}

.page-box .page-prev {
  position: absolute;
  left: 0px;
  text-align: left;
}

.page-box .page-center {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.page-box .page-next {
  position: absolute;
  right: 0px;
  text-align: left;
}

@media print, screen and (max-width: 768px) {
.news-list-box {
  width: 94%;
  height: 250px;
  position: relative;
  display: inline-block;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-left: 3%;
}

.news-list-box .title {
  font-weight: bold;
  font-size: 14px;
}

.page-box {
  margin: 20px;
  position: relative;
  font-size: 14px;
}
}