/*              visual              */
.visual {position:relative;overflow:hidden;}
.visual ul {height:500px;overflow:hidden;}
.visual li {position:absolute;left:0;top:0;width:100%;height:100%;}
.visual ul ._container {position:absolute;left:50%;top:0;margin-left:-625px;padding-top:35px;}
.visual-pager a {display:inline-block;vertical-align: middle;margin-left:5px;width:12px;height:12px;border-radius: 12px;background:#fff;-moz-box-shadow:    inset 1px 1px 2px #000;
   -webkit-box-shadow: inset 1px 1px 2px #000;  box-shadow: inset 1px 1px 2px #000;}
.visual-pager._container {position:absolute;left:50%;top:200px;margin-left:-625px;}
.visual-pager a.active {width:35px;background:#399bd7;}

.visual .main-txt,
.visual-pager._container > div {max-width:625px;}
.visual .main-txt p {font-size:40px;font-weight:400;color:#88c2ff;margin-bottom:10px;letter-spacing: -1px;}
.visual .main-txt span {color:#000;font-size:20px;}
.bx-wrapper {margin:0;}
.bx-wrapper .bx-viewport {-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;border: none;left: 0;background: transparent;}


/*              main content              */
.main-content {position:relative;}
.main-content:before,
.main-content:after {content:'';display:block;width:700px;position:absolute;top:0;bottom:0;z-index:-1;}
.main-content:before {left:0;background:#f1f0f0;}
.main-content:after {right:0;background:#5591d1;}
.main-content ul {z-index:1;display: table;table-layout: fixed;width:100%;}
.main-content ul li {display:table-cell;vertical-align: top;}
.main-content ul li a {color:#fff;display:block;padding:20px 15px;height:300px;font-size:14px;}
.main-content .dist-content {font-size:30px;font-weight:500;margin-bottom:10px;}
.main-content ul li:first-child {background:#f1f0f0 url('../img/main/bg_content1.png') right bottom no-repeat;}
.main-content ul li:first-child a {color:#7e7e7e;}
.main-content ul li:first-child + li {background:#6cb7ba url('../img/main/bg_content2.png') right bottom no-repeat;}
.main-content ul li:first-child + li + li {background:#ad5856 url('../img/main/bg_content3.png') right bottom no-repeat;}
.main-content ul li:first-child + li + li + li{background:#5591d1 url('../img/main/bg_content4.png') right bottom no-repeat;}
.main-content ul li:first-child .dist-content {color:#1d9095;}
.main-content ul li:first-child + li .dist-content,
.main-content ul li:first-child + li + li .dist-content,
.main-content ul li:first-child + li + li + li .dist-content {color:#fff;}

/*              Media queries              */
@media (max-width:1300px){
    .visual ul ._container,
    .visual-pager._container {margin-left:0;left:20px;}
}

@media (max-width:1024px){
    .main-content ul {display:block;}
    .main-content ul:after {content:'';display: block;clear:both;}
    .main-content ul li {float:left;display:block;}
    .main-content ul li:first-child {width:40%;}
    .main-content ul li:first-child + li {width:60%;}
    .main-content ul li:first-child + li + li {width:60%;}
    .main-content ul li:last-child {width:40%;}
}

@media (max-width:680px){
    .main-content {background:#f1f0f0}

    .visual ul {height:350px}
    .visual .main-txt p {font-size:28px;}
    .visual .main-txt span {font-size:16px;}
    .visual-pager._container {top:auto;bottom:15px;}
    .main-content .dist-content {font-size:25px}
    .main-content:before,
    .main-content:after {content:none}
    .main-content ul li {float:none;}
    .main-content ul li:first-child,
    .main-content ul li:first-child + li,
    .main-content ul li:first-child + li + li,
    .main-content ul li:last-child {width:100%;}
    .main-content ul li a {height:230px;}
}