@charset "utf-8";

@import url(common.css);

/* -------------------------- visual -------------------------- */

.main_visual .inner {display: table;}
.visual .title_area {display: table-cell;width: 100%;vertical-align: middle;}
.visual .title_area .img_area {}
.visual .title_area .insec {padding-top: 45px;}
.visual .title_area .txt {padding-top: 24px;color: #fff;font-size: 26px;font-weight: normal;text-align: center;}
.visual .scroll_down {position: absolute;left: 50%;bottom: 50px;margin-left: -45px;display: inline-block;text-align: center;text-decoration: none;z-index: 2;
  -webkit-animation: scroll_down 1.2s linear infinite normal none;
    animation: scroll_down 1.2s linear infinite normal none;
}
.visual .scroll_down p {padding-bottom: 10px;color: #fff;font-size: 17px;}

@keyframes scroll_down {
    0%/*from*/ {bottom: 50px;}
    50% {bottom: 70px;}
    100%/*to*/ {bottom: 50px;}
}
@-webkit-keyframes scroll_down {
    0%/*from*/ {bottom: 50px;}
    50% {bottom: 70px;}
    100%/*to*/ {bottom: 50px;}
}

/* -------------------------- //visual -------------------------- */

/* -------------------------- content -------------------------- */

#content .con1 {}
/*#content .con1 .inner {padding: 130px 0;}*/

#content .con1 .inner h1 {color: #2d2d2d;font-size: 40px;font-weight: bold;}
#content .con1 .inner > p {padding-top: 36px;color: #5d5d5d;font-size: 22px;font-weight: bold;}
#content .con1 .inner .banner {margin: 66px auto 0;width: 999px;}
#content .con1 .inner .banner li {position: relative;float: left;margin-right: 6px;width: 195px;}
#content .con1 .inner .banner li:last-child {margin-right: 0;}
#content .con1 .inner .banner li a {display: block;width: 100%;height: 100%;text-decoration: none;}
#content .con1 .inner .banner li:hover a::after {display: block;content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7) url(/magnet/img/banner_hover.png) 50% 50% / 50% no-repeat;z-index: 1;}
#content .con1 .inner .banner li .img_area {position: relative;height: 210px;background: 50% 50% / cover no-repeat;}
#content .con1 .inner .banner li .img_area img {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);height: 42px;}
#content .con1 .inner .banner li .txt_area {}
#content .con1 .inner .banner li.li1 .txt_area {background: #5F9CC8;background: #5F9CC8 linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33));}
#content .con1 .inner .banner li.li2 .txt_area {background: #60A8B4;background: #60A8B4 linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33));}
#content .con1 .inner .banner li.li3 .txt_area {background: #9B9387;background: #9B9387 linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33))}
#content .con1 .inner .banner li.li4 .txt_area {background: #929B87;background: #929B87 linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33));}
#content .con1 .inner .banner li.li5 .txt_area {background: #738CA5;background: #738CA5 linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33));}
#content .con1 .inner .banner li.li6 .txt_area {background: #37669D;background: #37669D linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33));}
#content .con1 .inner .banner li.li7 .txt_area {background: #459D7A;background: #459D7A linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33));}
#content .con1 .inner .banner li.li8 .txt_area {background: #5463A1;background: #5463A1 linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33));}
#content .con1 .inner .banner li.li9 .txt_area {background: #AE6C75;background: #AE6C75 linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33));}
#content .con1 .inner .banner li.li10 .txt_area {background: #568EC5;background: #568EC5 linear-gradient(180deg,rgba(28,27,26,0),rgba(28,27,26,0.33));}
#content .con1 .inner .banner li .txt_area .txt {padding: 20px 10px;color: #fff;font-size: 16px;line-height: 27px;font-weight: normal;word-break: keep-all;text-align: center;}

#content .con2 .con_left,
#content .con2 .con_right {position: relative;float: left;width: 50%;height: 380px;}
#content .con2 .con_left {background-color: #538dc5;}
#content .con2 .con_right {background-color: #304268;}
#content .con2 .bg {
	height: 100%;
	-webkit-transition: opacity 0.5s ease-in-out;
 	-moz-transition: opacity 0.5s ease-in-out;
 	-o-transition: opacity 0.5s ease-in-out;
 	transition: opacity 0.5s ease-in-out;
 	opacity: 0;
}
#content .con2 .con_left:hover .bg {background: #538dc5 url(../img/con2_left_bg.png) 100% 50% no-repeat;opacity: 1;}
#content .con2 .con_right:hover .bg {background: #304268 url(../img/con2_right_bg.png) 0 50% no-repeat;opacity: 1;}
#content .con2 .box_area {position: absolute;top: 0;width: 600px;height: 380px;}
#content .con2 .box_area a {text-decoration: none;}
#content .con2 .box_area .box {padding-top: 92px;}
#content .con2 .box_area .box .tit {margin-bottom: 20px;color: #fff;font-size: 40px;font-weight: bold;}
#content .con2 .box_area .box .txt {color: #fff;font-size: 20px;font-weight: normal;line-height: 28px;}
#content .con2 .box_area .box .more {margin-top: 27px;display: block;width: 173px;height: 43px;border: 1px solid #fff;background: url(../img/more_btn_arrow.png) 146px 50% no-repeat;color: #fff;font-size: 18px;line-height: 43px;font-weight: normal;}
#content .con2 .box_area .box .more span {padding-left: 13px;}
#content .con2 .con_left .box_area {right: 0;}
#content .con2 .con_right .box_area {left: 0;}
#content .con2 .con_right .box_area .box {padding-left: 110px;}

/* -------------------------- //content -------------------------- */