﻿.hubb-lst::after, .hubb-lst > .i > div > .s1::after { content:''; display:block; clear:both; }

.hubb-wrp .box_header .center { font-size: 28px; color: #232955; font-weight: 800; padding-bottom: 10px; padding-top:20px; text-transform:initial }

.hubb-lst {width:1170px;padding: 10px 2% 20px;margin:0 auto;}
.hubb-lst .i {float:left;width:33.33%;padding: 30px 20px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;  }
.hubb-lst .i > div {min-height: 200px;border:1px solid #ccc;background:#fff;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;overflow:hidden;box-shadow: 0 0 30px #0000001a;-moz-box-shadow: 0 0 30px #0000001a;-webkit-box-shadow: 0 0 30px #0000001a;position: relative; padding-bottom:40px }
.hubb-lst .i:nth-child(3n + 1) { clear:both; }
.hubb-lst .i > div > .s1 { position:relative; }

.hubb-lst .thumb { width: 100%; min-height: 250px; background-position: center center; background-size: contain; background-repeat: no-repeat; cursor: pointer; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; overflow: hidden; position: relative; }
.hubb-lst .thumb > img { width:100%; }
.hubb-lst .thumb.img-bkg {width:100%;height: 200px;background-size: cover !important;background-repeat: no-repeat;cursor:pointer;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;position:relative;overflow: hidden;background-position: center top !important;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;/* object-fit: cover; *//* opacity: 0.4; */align-items: center;}
.hubb-lst .thumb.img-bkg img { display:none !important; }
.hubb-lst .thumb.img-bkg::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;/* background-color: rgba(1,1,1,.5); *//* background-image: linear-gradient( to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)  50%, rgba(0, 0, 0, 0.5) 100% ); */}

.hubb-lst .brief {padding: 20px;position: relative;text-align: left;}
.hubb-lst .i > div > a {display: block;padding: 3px 15px 3px 25px;float: right;position: absolute;bottom: 15px;left: calc(50% - 50px);}
.hubb-lst .i > div > a::before {content:'\f178';font-family:FontAwesome;position:absolute;top: 3px;left:3px;font-size: 12px;transition: .35s;-moz-transition: .35s;-webkit-transition: .35s;}

.hubb-lst .title {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:2;vertical-align: middle;display: grid;align-items: end; text-align: center;}
.hubb-lst .title > h2 {padding: 20px 10px;margin: 0;}
.hubb-lst .title > h2 > a {color: #fff;line-height: 1.6;transition: all .2s ease-in-out;font-size:18px; text-shadow: 1px 1px 2px #111;}
.hubb-lst .title > h2 > span.num {color: #c9ffe5;font-size: 60px;display:block;padding-bottom: 5px;}

.hubb-lst .i:hover > div { box-shadow:0 6px 18px 0 #00000033; -moz-box-shadow:0 6px 18px 0 #00000033; -webkit-box-shadow:0 6px 18px 0 #00000033; }
/* .hubb-lst > .i:hover .thumb.img-bkg::before { background-image: linear-gradient( to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100% ); } */
.hubb-lst .i:hover .title > h2 > a, .hubb-lst > .i:hover .title > h2 > span { color: #f5f5f5; }
.hubb-lst .i:hover .thumb.img-bkg::before { background-image: linear-gradient(to top,rgba(56,87,35,.8),rgba(0,0,0,0) 60%); }

.hubb-wrp .group_c {position:relative;font-size: 28px;color: #f7971d;padding: 20px 0 10px;margin-bottom: 15px;text-transform: initial;text-align: center;line-height: 1.6;}
.hubb-wrp .group_c::after { bottom: 0px; content: ''; height: 2px; left: calc(50% - 100px); position: absolute; width: 200px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #1EA362, rgba(0, 0, 0, 0)); }

/* hub4 */
.hub4b .hubb-lst .i > div { position:relative; padding-bottom:30px;}
.hub4b .hubb-lst .i .btns {position: absolute;opacity: 0;bottom:-100px;left: 0;right: 0;background: #fff;align-items: center;height: 60px;transition:all 0.3s;align-content: center;text-align: center;padding-top: 10px;}
.hub4b .hubb-lst .i .btns > .button { display: inline-block; color:#fff !important; padding-left: 15px; padding-right: 15px; }
.hub4b .hubb-lst .i .btns > .button:last-child {
    margin-right: 0;
    background-image: -moz-linear-gradient(55deg, #f15722 0%,#F7921C);
    background-image: -webkit-linear-gradient(55deg, #f15722 0%,#F7921C);
    background-image: -ms-linear-gradient(55deg, #f15722 0%,#F7921C);
}
.hub4b .hubb-lst .i.nolink { cursor:default; }
.hub4b .hubb-lst .i:hover .btns { opacity:1; bottom:0; }

.hub4b .hubb-lst .i > div > .a { left:0; right:0; text-align: center; padding: 3px 15px;}
.hub4b .hubb-lst .i > div > .a::before { position:initial; left:initial; top:initial; padding-right:10px; }

.hubb-lst.dslider { padding-left:50px; padding-right:50px; width:1150px; }
.hubb-lst.dslider .i { clear:none !important; }
.hubb-lst.dslider .i > div { -moz-box-shadow: 0 0 20px #0000001a; -webkit-box-shadow: 0 0 20px #0000001a; box-shadow: 0 0 20px #0000001a; }

.hubb-lst .slick-dots { left:0; }
.hubb-lst .slick-btn-l, .hubb-lst .slick-btn-r { top:45%; }
.hubb-lst .slick-dots li button:before { font-size: 10px; line-height: 10px; color:#000; border-color:#000; }
.hubb-lst .slick-dots li.slick-active button:before { color:#01a6f0; border-color:#01a6f0; }

.hub4b-slider .hubb-lst.dslider { padding-left:0; padding-right:0; }
.hub4b-slider .slick-slider { padding-bottom: 55px; }
.hub4b-slider .slick-btn-l, .hub4b-slider .slick-btn-r { top: initial; bottom:8px; background: #fff; border: 1px solid #eee; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; }
.hub4b-slider .slick-btn-l { left: calc(50% - 50px); }
.hub4b-slider .slick-btn-r { right: calc(50% - 50px); }
.hub4b-slider .slick-btn-l:active, .hub4b-slider .slick-btn-r:active { transform: translateY(4px); }

@media (min-width:1200px) and (max-width:1500px) { 
}
@media (min-width:1024px) and (max-width:1199px) {
	.hubb-lst { width:100% }
}
@media (min-width:992px) and (max-width:1023px) { /* ipad pro */
}
@media (min-width:768px) and (max-width:991px) {
	.hubb-lst { width:100%; padding-left:0; padding-right:0; }
	.hubb-lst .i { width:50%;padding-left:15px; padding-right:15px; }
	.hubb-lst .i:nth-child(3n + 1) { clear:none; }
}
@media (max-width:767px) {
	.cpos_main_c {padding: 0 !important;}
    #cpos_25 > .box_c.hubb-wrp { padding-top:40px; padding-bottom:40px }
	.hubb-lst {width:100% !important;padding-left: 0;padding-right: 0;}
	.hubb-lst .i {width:100%;padding: 20px 0;}
	
	.hubb-lst.dslider {padding-left: 0 !important;padding-right: 0 !important;}
	.hubb-wrp.hub4b-slider {padding-left: 0 !important;padding-right: 0 !important;}
	.hubb-wrp .group_c {padding-top: 10px;font-size: 24px;}
}
@media only screen and (min-width:560px) and (max-width:767px) { 
}
@media (max-width:480px) { 	
}
@media only screen and (-webkit-device-pixel-ratio:3) and (device-width:812px) and (device-height:375px) and (orientation:landscape)
	,(min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait)
	,(min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape)
	,(device-width:667px) and (device-height:375px) and (orientation:landscape)
	,(device-width:736px) and (device-height:414px) and (orientation:landscape) /* ip7 landscape */
	,(max-device-width:736px) and (min-device-width:565px) and (orientation:landscape)
{ 
}
@media only screen and (device-width:768px) and (max-device-width:1024px) and (orientation:portrait) /* ipad portrait */
{
}
@media only screen and (device-width:1024px) and (orientation:landscape) /* ipad landscape */
{
}
@media only screen and (device-width:812px) and (orientation:landscape) /* ip X landscape */
{
}