@charset "utf-8";

/* 
 * Main CSS Document
 * IEETU Web Standardization Team
 * 2018-01-15
 */

@keyframes swing{
    15%{-webkit-transform:translateY(5px);-moz-transform:translateY(5px);-o-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}
    30%{-webkit-transform:translateY(-5px);-moz-transform:translateY(-5px);-o-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px);}
    50%{-webkit-transform:translateY(3px);-moz-transform:translateY(3px);-o-transform:translateY(3px);-ms-transform:translateY(3px);transform:translateY(3px);}
    65%{-webkit-transform:translateY(-3px);-moz-transform:translateY(-3px);-o-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px);}
    80%{-webkit-transform:translateY(2px);-moz-transform:translateY(2px);-o-transform:translateY(2px);-ms-transform:translateY(2px);transform:translateY(2px);}
    100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
} 



 /* visual */
.visual {position:relative; width:100%;}
.visual > a {display:block; width:77px; height:77px; position:absolute; z-index:102; top:50%; margin-top:-38px; text-indent:-9999px; background:rgba(0,0,0,0.8) url(../images/main/sp_main.png) no-repeat 0 0;}
.visual > a.vis_prev {margin-left:-500px; background-position:0 0;}
.visual > a.vis_next {margin-left:423px; background-position:-77px 0;}
.visual li {position:relative; width:100%; overflow:hidden;}
.visual li > .txt {position:absolute; width:350px; left:50%; bottom:20px; margin-left:150px; text-align:right; box-sizing:border-box;}
.visual li > .txt > span {padding:2px 5px; font-weight:600; font-size:11px; color:#f5f5f5; line-height:20px; letter-spacing:-0.05em; background:rgba(0,0,0,0.6);}
.visual li > .img {width:100%;}
.visual li > .img > img {width:100%;}

@media all and (min-width:1025px) {
.visual > a {left:50%;}
.visual li > .img {width:100%; min-height:458px;}
.visual li > .img > img {width:100%; min-height:458px;}
}

@media all and (max-width:1024px) {
.visual li > .txt {margin-left:-175px; text-align:center;}
.visual li > .img {width:150%;}
.visual > a.vis_prev {margin-left:0; left:23px;}
.visual > a.vis_next {margin-left:0; right:24px;}
}

@media all and (max-width:768px) {
.visual li > .txt {bottom:15px;}
.visual li > .img {width:180%;}
.visual > a {width:54px; height:54px; margin-top:-27px; background-size:336px 336px;}
.visual > a.vis_next {background-position:-54px 0;}
}

@media all and (max-width:480px) {
.visual li > .txt {bottom:10px;}
.visual li > .txt > span {font-weight:normal; font-size:11px; line-height:20px;}
.visual li > .img {width:200%;}
.visual > a {width:38px; height:38px; margin-top:-19px; background-size:235px 235px;}
.visual > a.vis_next {background-position:-38px 0;}
}


/* container & content */
#container {padding-bottom:50px; background:url(../images/main/bg_container.jpg) no-repeat center top; background-size:cover;}
#content {width:1000px; margin:0 auto; padding:50px 0 80px; box-sizing:border-box;}
#content h2 {position:relative; margin-bottom:50px; font-weight:600; font-size:26px; color:#fff; text-align:center; overflow:hidden;}
#content h2:before,
#content h2:after {content:''; display:block; height:1px; width:50%; position:absolute; top:50%; background:#fff; box-sizing:border-box;}
#content h2:before {left:-100px;}
#content h2:after {right:-100px;}
#content h2 > span {display:inline-block; letter-spacing:-0.05em;}

@media all and (max-width:1024px) {
#content {width:100%; padding:50px 24px 80px;}
#content h2 {margin-bottom:40px;}
}

@media all and (max-width:768px) {
#content {padding:40px 12px 60px;}
#content h2 {margin-bottom:30px;}
}

@media all and (max-width:480px) {
#content {padding:30px 12px 40px;}
#content h2 {margin-bottom:20px;}
}



/* sec01
.sec01 {position:relative;  z-index:2; min-height:250px; max-height:810px; margin-bottom:50px; padding-right:23px; overflow-y:scroll;}
.sec01 .item {display:block; position:relative; z-index:1; height:250px; margin-top:30px; padding:15px; background:#fff; box-sizing:border-box; overflow:hidden;}
.sec01 .item:first-child {margin-top:0;}
.sec01 .item:hover:before {content:''; display:block; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; border:2px solid #d9101b; box-sizing:border-box;}
.sec01 .item > .pic {float:left; position:relative; width:34.4%; height:220px; box-sizing:border-box; overflow:hidden;}
.sec01 .item > .pic > span {display: block; position: absolute; top:0; left:50%; width:200%; height:220px; background:#f5f5f5; margin-left:-100%; border-bottom:1px solid #d8d8d8; text-align:center;}
.sec01 .item > .pic > span img {height:100%;}
.sec01 .item > dl {float:right; width:62%;  padding-top:20px; color:#333; letter-spacing:-0.05em; box-sizing:border-box;}
.sec01 .item > dl > dt {font-weight:600; font-size:23px; line-height:28px;}
.sec01 .item > dl > dd {padding-top:13px; line-height:22px;}
.sec01 .date_area {display:block; position:absolute; top:184px; left:15px; color:#333;}
.sec01 .date_area > p {display:block; float:left; width:50px; height:50px; margin:0 0 1px 1px; line-height:19px; border:1px solid #fafaf9; background:#fff; text-align:center; box-sizing:border-box;}
.sec01 .date_area .date_01 {padding-top:3px;}
.sec01 .date_area .date_01 > strong {font-weight:600;} 
.sec01 .date_area .date_02 {padding-top:26px;}
.sec01 .date_area .mm {font-size:12px;}
.sec01 .date_area .dd {padding-top:2px; font-size:22px;}
.sec01 .date_area .hh { font-size:12px;}

@media all and (max-width:768px) {
.sec01 {min-height:22px; max-height:720px; padding-right:13px; }
.sec01 .item {height:220px; padding:10px;}
.sec01 .item > .pic {width:44%; height:200px;}
.sec01 .item > dl {width:52.5%; padding-top:0;}
.sec01 .item > dl > dt {font-size:18px; line-height:26px;}
.sec01 .item > dl > dd {padding-top:8px;}

.sec01 .date_area {top:173px; left:10px;}
.sec01 .date_area > p {width:36px; height:36px;}
.sec01 .date_area .date_01 {padding-top:0;}
.sec01 .date_area .date_02 {padding-top:15px;}
.sec01 .date_area .mm {font-size:11px;}
.sec01 .date_area .dd {padding-top:2px; font-size:14px;}
.sec01 .date_area .hh { font-size:11px;}
}

@media all and (max-width:480px) {
.sec01 {min-height:auto; max-height:1440px;}
.sec01 .item {height:auto;}
.sec01 .item > .pic {float:none; width:auto;}
.sec01 .item > dl {float:none; width:100%; padding-top:10px;}
}
 */


/* sec02 */
.sec02 > ul:after {content:''; display:block; clear:both;}
.sec02 > ul > li {float:left; /*width:155px;*/ margin:0 0 14px 14px;}
.sec02 > ul > li:first-child {margin-left:0;}
.sec02 > ul > li > a {display:block; width:155px; height:155px; padding-top:20px; border-radius:50%; text-align:center; box-sizing:border-box;}
.sec02 > ul > li:nth-of-type(1) > a {background:#68b229;}
.sec02 > ul > li:nth-of-type(2) > a {background:#005faf;}
.sec02 > ul > li:nth-of-type(3) > a {background:#fcc400;}
.sec02 > ul > li:nth-of-type(4) > a {background:#920783;}
.sec02 > ul > li:nth-of-type(5) > a {background:#e01c4b;}
.sec02 > ul > li:nth-of-type(6) > a {background:#313131;}
.sec02 > ul > li > a > span {position:relative; font-weight:600; color:#fff; letter-spacing:-0.04em;}
.sec02 > ul > li > a > span br {display:none;}
.sec02 > ul > li:nth-of-type(3) > a > span {color:#333;}
.sec02 > ul > li > a > span:before {content:''; display:block; width:80px; height:80px; margin:0 auto 5px; background:url(../images/main/sp_main.png) no-repeat 0 -77px; transition:all .3s ease;}
.sec02 > ul > li:nth-of-type(2) > a > span:before {background-position:-80px -77px;}
.sec02 > ul > li:nth-of-type(3) > a > span:before {background-position:-160px -77px;}
.sec02 > ul > li:nth-of-type(4) > a > span:before {background-position:-240px -77px;}
.sec02 > ul > li:nth-of-type(5) > a > span:before {background-position:-320px -77px;}
.sec02 > ul > li:nth-of-type(6) > a > span:before {background-position:-400px -77px;}
.sec02 > ul > li > a:hover > span:before {animation:swing 1s ease; animation-iteration-count:1;}

@media all and (max-width:1024px) {
.sec02 > ul {width:493px; margin:0 auto;}
.sec02 > ul > li:nth-of-type(3n-2) {margin-left:0;}
}

@media all and (max-width:768px) {
.sec02 > ul {width:388px;}
.sec02 > ul > li > a {width:120px; height:120px; margin:0 auto;}
.sec02 > ul > li > a > span br {display:block;}
.sec02 > ul > li > a > span:before {width:56px; height:56px; margin-bottom:0; background-size:336px 336px; background-position:0 -56px;}
.sec02 > ul > li:nth-of-type(2) > a > span:before {background-position:-56px -56px;}
.sec02 > ul > li:nth-of-type(3) > a > span:before {background-position:-112px -56px;}
.sec02 > ul > li:nth-of-type(4) > a > span:before {background-position:-168px -56px;}
.sec02 > ul > li:nth-of-type(5) > a > span:before {background-position:-222px -56px;}
.sec02 > ul > li:nth-of-type(6) > a > span:before {background-position:-278px -56px;}
}

@media all and (max-width:480px) {
.sec02 > ul {width:254px;}
.sec02 > ul > li:nth-of-type(3n-2) {margin-left:14px;}
.sec02 > ul > li:nth-of-type(2n-1) {margin-left:0;}
}