body,html { max-width: 1280px; }
#content.full { width: 100%; }
#content_main { position: relative; }
#kachel_container { width: 100%; overflow: hidden; background-color: #f6f8f9; padding: 0px 0 35px; position: relative; z-index: 1; }
#kacheln { transform-origin: left top; -webkit-transform-origin: left top; -moz-transform-origin: left top; }
.col { float: left; }
.col.one { width: 255px; }
.col.two { width: 510px; }
.col.three { width: 676px; }
.col.four { width: 1020px; }


.col > div { background-color: #d2eeec; float: left; margin-right: 15px; position: relative; overflow: hidden; box-shadow: 1px 1px 2px #999; }
.hc .col > div { box-shadow: 1px 1px 3px #7E7E7E; }

#kachel_container.round .col > div { border-radius: 15px; overflow: hidden; }

.col > div { max-width: 100%; max-height: 100%; }

/* Formate: 1x1 1x2 2x1 2x2 */

.col .one_one { height: 167px; width: 240px; margin-right: 15px; margin-bottom: 15px; }
.col .one_two { height: 167px; width: 495px; margin-right: 15px; margin-bottom: 15px; }
.col .two_one { height: 349px; width: 240px; margin-right: 15px; margin-bottom: 15px; }
.col .two_two { height: 349px; width: 495px; margin-right: 15px; margin-bottom: 15px; text-align: center; }
.col .three_four { width: 1005px; height: 531px; margin-bottom: 15px; }
.col .two_three { height: 349px; width: 661px; margin-bottom: 15px; }

img.fill { width: 100%; height: 100%; }
.img_text { height: 100%; }
.img_text > a { display: block; }
#content_main .img_text h2, #content_main .text_box h2  { font-family: Arail,OpenSans,Verdana,sans-serif; color: #208192; margin: 15px 13px; font-size: 15px; line-height: 25px; font-weight: bold; }
.img_text div span { display: block; margin: 15px; font-size: 13px; line-height: 16px; }
.img_text div a { text-decoration: none; color: #208192; }

.text_box > div { margin: 15px; }

.one_one .img_text { position: relative; }
.one_one .img_text.top div { position: absolute; z-index: 5; top: 0; left: 0; }
.one_one .img_text.bot div { position: absolute; z-index: 5; bottom: 0; left: 0; }

.one_two img  { width: 50%; }
.two_one img  { height: 50%; }

.one_one video { width: 100%; }

.one_two img.full { width: 100%; }
.two_one img.full { height: 100%; }

.one_two .img_text img, .one_two .img_text.bot img + div { float: right; width: 50%; }
.one_two .img_text.top > div, .one_two .img_text.top a > div { float: left; width: 50%; height: 100%; background-color: #d2eeec; color: #208192; }
.one_two .img_text.top a { height: 100%; }

.one_two .img_text.bot img { float: left; width: 50%; }
.one_two .img_text.bot > div { float: right; width: 50%; height: 100%; background-color: #fff; color: #2a2e39; }

.two_one .img_text.top { float: left; width: 100%; }
.two_one .img_text.top > div { height: 176px; float: left; }
.two_one .img_text.top > a > div { height: 167px; }


.col .ww { background-color: #fff; }

.col .video { width: 100%; }

.special_wrap .image_container img.htrigger { opacity: 0; -webkit-transition: all .3s linear 0s; transition: all .3s linear .1s; -webkit-transform: scale(.7); transform: scale(.7); -webkit-transform-origin: center left; transform-origin: center left; }
.special_wrap .image_container img.active + img.htrigger { opacity: 1; -webkit-transform: scale(1); -webkit-transition-delay: .3s; transform: scale(1); transition-delay: .3s; }


/* .col > div:hover { opacity: .9; } */
.col > div:last-child { margin-bottom: 0; }
.col > div.one_one:last { background-color: red; }
.col:last-child > div:last-child { margin-right: 0; }
.scroll_items { float: left; display: inline-block; }

.html_box { line-height: 18px; position: relative; }
.html_box table { position: relative; text-align: center; width: 100%; height: 100%; margin: 0; padding: 0; }
.html_box table td { padding: 0; margin: 0; line-height: 0; position: relative; }
.html_box table img { width: 100%; }

.html_box img { max-width: 100%; max-height: 100%; }

.three_four .html_box { padding: 0; width: 100%; height: 100%; }

.toLeft1 { right: 255px; }
.toLeft2 { right: 510px; }
.toRight1 { left: 255px; }
.toRight2 { left: 510px; }

#content_main { width: 100%; }
#content > div { padding: 0; }

#idx_arr_l, #idx_arr_r { background-size: cover; position: absolute; top: 0; width: 60px; height: 48px; z-index: 10; cursor: pointer; }
#idx_arr_l { left: 0; background: #fff url(../images/v9/index_lr.png) no-repeat left 10px center; opacity: .3; height: 100%; transition: opacity .2s ease-in; }
#idx_arr_r { right: 0; background: #fff url(../images/v9/index_lr.png) no-repeat right 10px center; opacity: .3; height: 100%; transition: opacity .2s ease-in; }

#idx_arr_l:hover, #idx_arr_r:hover { opacity: .8; }
#kachel_container.preview { background-color: #ccc; }


#page_footer { max-width: 1600px; }

@media (max-width: 1023px) and (max-height: 1280px) {
   #content_main { margin-left: 0; }
}

@media (max-width: 1023px) {
   #content.full { width: 768px; }
}

@media (max-width: 480px) {
   #content.full { width: 100%; }
   #idx_arr_r,#idx_arr_l { display: none; }
   #kachel_container { padding: 0; }
   .scroll_items { display: block; float: none; }
   .scroll_items > div, .scroll_items noscript > div { margin: 10px; box-shadow: 2px 2px 4px #ccc; background-color: #fff; clear: both; }
   .scroll_items > div img { max-width: 100%; width: 100%; }

   .col.three { width: 100%; }
   .two_three { line-height: 0; }
   .one_one img, .two_one img, .one_two img { width: 100%; height: initial; }
   .one_two .img_text img, .one_two .img_text.bot img + div { width: 100%; float: left; }
   .img_text { float: none; line-height: 0; }
   .img_text div { line-height: 18px; }
   
   .two_one .img_text.top > div { height: inherit; }
   
   .one_two .img_text.bot img, .one_two .img_text img { float: none; width: 100%; }
   .one_two .img_text.bot > div, .one_two .img_text.top > div, .one_two .img_text.top a > div { width: 100%; height: inherit; }
   
   .two_one .html_box { height: 436px; }
   #content_main .img_text h2 { font-size: 16px; color: #208192; }
   .img_text h2 + span { color: #208192; font-size: 13px; line-height: 18px; }
   
   .scroll_items > div:after { content: "."; height: 0; line-height: 0; visibility: hidden; clear: both; display: block; }
   #page_footer { padding-top: 90px; }
}

/*.special_wrap * { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }*/
.special_wrap { 
   -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; 
   -webkit-transition: transform .5s ease-out 0s; -moz-transition: transform .5s ease-out 0s; -ms-transition: transform .5s ease-out 0s; transition: transform .5s ease-out 0s;
   -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}

/*.special_wrap:hover, .special_wrap.hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }*/
.image_cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*.special_wrap .image_container { width: 2010px; height: 1062px; position: relative; 
   -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); 
   -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; 
   background: transparent url(../images/v9/bg_wide_v4.jpg) no-repeat 0 0; 
   background-size: 100% 100%; }*/
/*.special_wrap .image_container > img { position: absolute; top: 0; left: 0; }

.special_wrap .image_container > div { position: absolute; font-size: 25px; height: 30px; line-height: 33px; opacity: 0; text-align: right; text-shadow: 1px 1px 2px #ccc;
   -webkit-transition: opacity .5s linear 0s; -ms-transition: opacity .5s linear 0s; transition: opacity .5s linear 0s;
}

.special_wrap .image_container > div::after { position: absolute; left: 0; top: 35px; content: ""; width: 0; height: 1px; background-color: #208192; padding-right: 50px;
   -webkit-transition: width .5s ease-in 0s; -ms-transition: width .5s ease-in 0s; transition: width .5s ease-in 0s;
   -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}

.special_wrap .image_container > div.frev::after { right: 0; left: initial; }

.special_wrap .image_container > div.active::after { width: 100%; }

.special_wrap .image_container > div.active { opacity: 1; }
.special_wrap .image_container img { opacity: 1;
   -webkit-transition: transform .5s, opacity .5s linear 0s; -ms-transition: transform .5s, opacity .5s linear 0s; transition: transform .5s, opacity .5s linear 0s; 
   -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; 
}
.special_wrap .image_container img:not(.htrigger).active { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }
.special_wrap .image_container img.backFade { opacity: .25; }*/