@charset "utf-8";

/* main common */
.main_container {position: relative; min-height: 100%; width: 100%; height: 100%;}


/* visual */
.main_visual .slide,
.main_visual .slide li {width: 100%; height: 100vh;}
.main_visual .slide li {background-position: center top; background-size: cover; opacity: 0;}
.main_visual .slide li.op_active {opacity: 1;}
.main_visual .slide li:nth-child(1) {background-image: url(../images/main/main_visual_img1.jpg);}
.main_visual .slide li:nth-child(2) {background-image: url(../images/main/main_visual_img2.jpg);}
.main_visual .slide li:nth-child(3) {background-image: url(../images/main/main_visual_img3.jpg);}
.main_visual_container {max-width: 1200px; margin: 0 auto; width: 100%; height: 100%;}
.main_visual_wrap {display: table; width: 100%; height: 100%; table-layout: fixed;}
.main_visual_box {display: table-cell; width: 100%; height: 100%; color: #fff; font-weight: 500; text-align: center; vertical-align: middle;}
.main_visual_box .txt1 {font-size: 65px; line-height: 1.4;}
.main_visual_box .txt2 {font-size: 14px;}
.main_visual_box .txt3 {font-size: 48px; font-weight: 700; line-height: 1.3;}
.main_visual_box .txt4 {font-size: 20px; line-height: 1.3; margin-top: 30px;}
.main_visual .op_indicator {position: absolute; right: 60px; bottom: 140px; padding: 0 40px; font-size: 0;}
.main_visual .indicator_btn {display: inline-block; width: 26px; height: 26px; background-image: url(../images/main/visual_indicator.png); background-repeat: no-repeat; position: relative; z-index: 5;}
.main_visual .indicator_btn.op_prev {background-position: center 0;}
.main_visual .indicator_btn.op_next {background-position: center -29px;}
.main_visual .op_pager_box {display: inline-block; margin: 0 10px; font-size: 0; vertical-align: middle;}
.main_visual .op_pager {display: inline-block; width: 30px; height: 2px; background: #fff; opacity: 0.2; vertical-align: middle;}
.main_visual .op_pager.active {opacity: 1;}
.main_visual .slide_num {position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; z-index: 1;}
.main_visual .slide_num strong,
.main_visual .slide_num span {color: #fff; font-size: 20px; line-height: 26px;}
.main_visual .slide_num strong:before,
.main_visual .slide_num span:before {display: inline-block; content: "0";}
.main_visual .slide_num strong {float: left;}
.main_visual .slide_num span {float: right;}

@media all and (max-width:1023px) {
    .main_visual_box .txt1 {font-size: 58px;}
    .main_visual_box .txt3 {font-size: 42px;}
    .main_visual_box .txt4 {margin-top: 20px;}
    .main_visual .op_indicator {right: 0; width: 100%; text-align: center;}
    .main_visual .slide_num {left: 50%; width: 240px; margin-left: -120px; z-index: -1;}
}
@media all and (max-width: 767px) {
    .main_visual_box {word-break: keep-all;}
    .main_visual_box .txt1 {font-size: 45px;}
    .main_visual_box .txt3 {font-size: 28px; line-height: 1.3; padding: 0 20px;}
    .main_visual_box .txt3 br {display: none;}
    .main_visual_box .txt4 {font-size: 18px; padding: 0 20px;}
    .main_visual .indicator_btn {width: 21px; height: 21px; background-size: 12px;}
    .main_visual .indicator_btn.op_next {background-position: center -24px;}
    .main_visual .op_pager {width: 20px;}
    .main_visual .slide_num {width: 190px; margin-left: -95px;}
    .main_visual .slide_num strong,
    .main_visual .slide_num span {font-size: 18px; line-height: 21px;}
}


/* notice */
.main_notice {position: absolute; left: 0; bottom: 0; width: 100%; height: 110px; color: #fff; overflow: hidden; z-index: 10;}
.main_notice:after {display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.9; z-index: -1;}
.main_notice_wrap {display: table; width: 100%; height: 100%; table-layout: fixed;}
.main_notice_wrap > div {display: table-cell; vertical-align: middle;}
.main_notice_wrap .ym_box {width: 30%; background: #006eb7; background: -webkit-linear-gradient(to right, #8fc421, #006eb7, #006eb7); background: linear-gradient(to right, #8fc421, #006eb7, #006eb7); padding: 0 20px; font-size: 20px; font-weight: 700; text-align: right;}
.main_notice_wrap .ym_box > span {font-size: 40px;}
.main_notice_wrap .cont_box {position: relative; width: 70%; padding: 0 80px 0 40px; line-height: 1;}
.main_notice_wrap .cont_box a {display: inline-block; width: 80%; color: #fff; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main_notice_wrap .cont_box .date {display: inline-block; color: #006eb7; font-size: 15px;}
.main_notice_wrap .cont_box .date:before {display: inline-block; content: ""; width: 1px; height: 11px; background: #545454; margin-right: 20px; vertical-align: middle;}
.main_notice .bas_indicator {position: absolute; right: 80px; top: 10px; width: 31px; z-index: 10;}
.main_notice .indicator_btn {display: inline-block; width: 31px; height: 31px; background: url(../images/main/notice_indicator.png) no-repeat center 7px; margin: 7px 0;}
.main_notice .indicator_btn.bas_next {-webkit-transform: rotate(180deg); transform: rotate(180deg);}

@media all and (max-width:1023px) {
    .main_notice_wrap .ym_box {width: 24%;}
    .main_notice_wrap .cont_box {width: 86%;}
    .main_notice_wrap .cont_box a {width: 100%;}
    .main_notice_wrap .cont_box .date {display: block; margin-top: 10px;}
    .main_notice_wrap .cont_box .date:before {display: none;}
    .main_notice .bas_indicator {right: 40px;}
}
@media all and (max-width: 767px) {
    .main_notice {height: 80px;}
    .main_notice_wrap .ym_box {padding: 0 10px; font-size: 16px; text-align: center; line-height: 1.2;}
    .main_notice_wrap .ym_box > span {font-size: 22px;}
    .main_notice_wrap .cont_box {padding: 0 50px 0 20px;}
    .main_notice_wrap .cont_box a {font-size: 16px;}
    .main_notice_wrap .cont_box .date {margin-top: 6px; font-size: 14px;}
    .main_notice .bas_indicator {right: 20px; width: 24px;}
    .main_notice .indicator_btn {width: 24px; height: 24px; background-position: center 5px; background-size: 100%; margin: 3px 0;}
}
