@import url(common.css);

#container{display: flex;height: 650px;margin-bottom: 50px;}

/* sub - visual */
.cont_left{flex: 0.34;background: url(../images/sub1/visual.jpg) no-repeat;position: relative;}
.cont_left .tit{color: #fff;font-size: 22px;font-weight: 600;position: absolute;top: 50px;left: 30px;}

.cont_left .v_menu{position: absolute;left: 0;bottom: 0;height: 115px;background-color: rgba(104, 134, 216, 0.8);width: 100%;}
.cont_left .text{padding: 25px;}
.cont_left .text .v_tit{border: 1px solid #fff;height: 65px;width: 80px;box-sizing: border-box;float: left;}
.cont_left .text .v_tit a{display: block;height: 65px;width: 80px;color: #fff;font-size: 14px;font-weight: 600;text-align: center;padding-top: 12px;}
.cont_left .text .v_tit a:hover, .cont_left .text .v_tit a:focus{text-decoration: underline;}

.cont_left .text > ul{float: left;width: 278px;}
.cont_left .text > ul li{float: left;margin-left: 10%;width: 40%;list-style: square;color: #fff;font-size: 7px;height: 20px;}
.cont_left .text > ul li a{display: block;font-size: 14px;color: #fff;height: 20px;line-height: 20px;margin-top: 2px;}
.cont_left .text > ul li a:hover, .cont_left .text > ul li a:focus{text-decoration: underline;}

/* right */
.cont_right{flex: 0.66;}

/* con1 */
.cont_right .con1{height: 250px;display: flex;}

/* con1 con1-1 */
.con1 .con1-1{flex: 0.5;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
.con1 .con1-1 .padd{padding: 20px;}
.con1 .con1-1 .padd > h3{font-size: 18px;font-weight: 600;color: #333;margin-top: 5px;margin-bottom: 20px;}

.con1 .con1-1 .padd > ul{width: 100%;margin-bottom: 20px;}
.con1 .con1-1 .padd > ul:after{content: '';display: block;clear: both;}
.con1 .con1-1 .padd > ul li{float: left;width: 33.3%;}
.con1 .con1-1 .padd > ul li:first-child a{text-align: left;}
.con1 .con1-1 .padd > ul li a{display: block;text-align: center;font-size: 14px;color: #777;}
.con1 .con1-1 .padd > ul li a:hover, .con1 .con1-1 > ul li a:focus{text-decoration: underline;}

.con1 .con1-1 .list{background-color: #f0f4f7;height: 75px;padding: 15px;position: relative;}
.con1 .con1-1 .list > h3{font-size: 15px;margin-bottom: 15px;}

.con1 .con1-1 .list .more{width: 13px;height: 13px;position: absolute;top: 15px;right: 15px;}
.con1 .con1-1 .list .more img{width: 100%;height: 100%;}

.con1 .con1-1 .list > ul li{margin-bottom: 5px;}
.con1 .con1-1 .list > ul li a{display: block;font-size: 13px;color: #777;}
.con1 .con1-1 .list > ul li a:hover, .con1 .con1-1 .list > ul li a:focus{text-decoration: underline;}

/* con1 - con1-2 */
.con1 .con1-2{flex: 0.5;}
.con1 .con1-2 .half2{width: 50%;float: left;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;height: 100%;box-sizing: border-box;position: relative;}
.con1 .con1-2 .half2:first-child{background: url(../images/sub1/icon_1.png) no-repeat right 10px bottom 40px;}
.con1 .con1-2 .half2:last-child{background: url(../images/sub1/icon_2.png) no-repeat right 10px bottom 35px;}

.con1 .con1-2 .half2 > h3{font-size: 18px;font-weight: 600;color: #333;margin-top: 25px;margin-left: 20px;}
.con1 .con1-2 .half2 > .link{font-size: 13px;color: #3c5fa0;position: absolute;left: 25px;bottom: 30px;}

/* con2 */
.cont_right .con2{height: 200px;display: flex;}

/* con2 - con2-1 */
.con2 .con2-1{flex: 0.5;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;padding: 20px;}
.con2 .con2-1 > h3{font-size: 18px;font-weight: 600;color: #333;margin-top: 5px;margin-bottom: 20px;}

.con2 .con2-1 .service ul{display: flex;}
.con2 .con2-1 .service li{flex: 1;margin-right: 1px;height: 110px;background-color: #b7c2df;}
.con2 .con2-1 .service li:last-child{margin-right: 0;}

.con2 .con2-1 .service li a{display: block;height: 110px;text-align: center;}
.con2 .con2-1 .service li a img{margin-top: 10px;}
.con2 .con2-1 .service li a p{font-size: 12px;font-weight: 600;color: #333;}
.con2 .con2-1 .service li:first-child a p, .con2 .con2-1 .service li:last-child a p{margin-top: 10px;}
.con2 .con2-1 .service li a:hover p, .con2 .con2-1 .service li a:focus p{text-decoration: underline;color: #3d6abd;}

/* con2 - con2-2 */
.con2 .con2-2{flex: 0.5;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;padding: 20px;background: url(../images/sub1/icon_3.png) no-repeat left 20px bottom 50px;}
.con2 .con2-2 > h3{font-size: 18px;font-weight: 600;color: #333;margin-top: 5px;margin-bottom: 20px;}

.con2 .con2-2 > ul{padding-left: 100px;}
.con2 .con2-2 > ul li{float: left;width: 43%;list-style: disc;font-size: 10px;color: #777;margin-right: 6%;margin-bottom: 10px;}
.con2 .con2-2 > ul li:nth-child(2),.con2 .con2-2 > ul li:nth-child(3),.con2 .con2-2 > ul li:last-child{margin-right: 0;}
.con2 .con2-2 > ul li a{display: block;font-size: 13px;color: #777;}
.con2 .con2-2 > ul li a:hover, .con2 .con2-2 > ul li a:focus{text-decoration: underline;}

/* con3 */
.cont_right .con3{height: 200px;display: flex;}
.con3 .half3{flex: 1;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;padding: 20px;position: relative;}
.con3 .half3 .link{font-size: 13px;color: #3c5fa0;position: absolute;left: 25px;bottom: 30px;}
.con3 .half3 > h3{font-size: 18px;font-weight: 600;color: #333;margin-top: 5px;margin-bottom: 20px;}

.con3 .half3:first-child{background: url(../images/sub1/icon_4.png) no-repeat right 25px bottom 30px;}
.con3 .half3:last-child{background: url(../images/sub1/icon_5.png) no-repeat right 25px bottom 30px;}

.con3 .half3 > ul{padding-left: 40px;}
.con3 .half3 > ul li{list-style: disc;color: #777;font-size: 10px;margin-bottom: 5px;}
.con3 .half3 > ul li a{display: block;font-size: 13px;color: #777;}
.con3 .half3 > ul li a:hover, .con3 .half3 > ul li a:focus{text-decoration: underline;}