.inner {position: relative; max-width: 1200px; margin: 0 auto;}
.inner:after {content: ''; clear: both; display: block;}

/* visual */
.main_visual {position: relative; background: #25245e; width: 100%; height: 100vh; min-height: 680px; max-height: 880px;}
.main_visual .bg_box {overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main_visual .inner {max-width: 1200px; width: 100%; height: 100%;}
.visual_title {position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 100;}
.visual_title h2 {font-size: 46px; font-weight: 800; color: #fff; margin-bottom: 40px;}
.visual_title p {color: rgba(255,255,255,0.6);}

.main_visual .bg_box .bx-wrapper,
.main_visual .bg_box .bx-viewport,
.main_visual .bg_box ul.slide_list,
.main_visual .bg_box ul.slide_list li {width: 100% !important; height: 100% !important;}
.slide_list li {background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;}
.slide_list li.bg1 {background-image: url(../images/main/main_img1.jpg);}
.slide_list li.bg2 {background-image: url(../images/main/main_img2.jpg);}

/* visual bar */
.ctrl_wrap {position: relative; margin-top: 60px;}
.ctrl_wrap .bar {display: block; position: relative; width: 280px; height: 2px; background:rgba(255,255,255,0.4)}
.ctrl_wrap .bar:after {content:''; display: block; position: absolute; top:0; left:0; width:0; height:2px; background:#fff;}
.ctrl_wrap .bar.active:after{width: 100%; -webkit-transition: width 6s; -moz-transition: width 6s; -ms-transition: width 6s; -o-transition: width 6s; transition: width 6s;}

/* visual number */
.idx_wrap {display: block; margin-top: 10px;}
.idx_wrap .idx {display: inline-block; font-size: 16px; color: #fff; opacity: 0.5;}
.idx_wrap .idx:after {content: '/'; color: #fff; margin: 0 6px; font-weight: 400;}
.idx_wrap .idx:last-child:after {content: none;}
.idx_wrap .idx.current {opacity: 1; font-weight: 600;}

/* visual button */
.ctrl_box {width: 16px; height: 16px; position: absolute; top: -7px; left: 300px;}
.ctrl_box .state {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.ctrl_box button {opacity: 0; background: transparent; background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px auto; transition: opacity .4s;}
.ctrl_box button.state_play {background-image: url(../images/common/icon_play_WH.svg);}
.ctrl_box button.state_pause {background-image: url(../images/common/icon_pause_WH.svg);}
.ctrl_box.play .state_pause {opacity: 1; visibility: visible;}
.ctrl_box.pause .state_play {opacity: 1; visibility: visible;}

/* section common */
.section {overflow: hidden;}
.section_tit {text-align: left;}
.section_tit > span {font-size: 16px; font-weight: 600;}
.section_tit > h3 {font-family: 'Kanit'; font-size: 40px; font-weight: 800; word-break: keep-all; letter-spacing: .2em; color: #25245e; text-transform: uppercase;}
.section_cont {position: relative;}

/* section1 */
.sec1 {overflow: hidden; margin-bottom: 120px;}
.sec1 .section_tit {position: absolute; top: 80px; left: 0; width: 100%; text-align: center; z-index: 1;}
.business_cont {position: relative;}
.business_cont > div {position: relative; float: left; width: 25%; height: 100%; text-align: center; border-right: 1px solid #ededed; padding: 280px 0 120px;}
.business_cont > div:first-child {border-left: 1px solid #ededed;}
.business_cont a {display: block;}
.business_cont strong {display: block; font-size: 20px; font-weight: 800; margin-bottom: 20px; transition: color .4s;}
.business_cont strong:before {content: ''; display: block; width: 60px; height: 60px; margin: 0 auto 40px; background-repeat: no-repeat; background-position: 50% 50%; background-size: auto 70px;  transition: all .4s;}
.business_cont a.list1 strong:before {background-image: url(../images/main/business_list1.svg);}
.business_cont a.list2 strong:before {background-image: url(../images/main/business_list2.svg);}
.business_cont a.list3 strong:before {background-image: url(../images/main/business_list3.svg);}
.business_cont a.list4 strong:before {background-image: url(../images/main/business_list4.svg);}
.business_cont p {color: #767676; font-size: 16px;}
.business_cont a:hover strong {color: #1780c3;}
.business_cont a:hover strong:before {transform: translateY(-16px);}

/* section2 */
.sec2 {padding: 100px 0; position: relative;}
.sec2 .bg_box:after {content: ''; display: block; position: absolute; top: -80px; right: -80px; background: #25245e; width: 160px; height: 460px;}
.sec2 .section_tit {position: absolute; top: 0; left: 0;}
.equipment_wrap .img_box {width: 600px; height: 100%; min-height: 420px; overflow: hidden; float: right; position: relative; background: #333;}
.equipment_wrap .img_box img {position: absolute; top: -8%; left: 0; width: 100%; min-height: 100%; max-height: none; min-width: 100%; object-fit: cover;} 
.equipment_wrap .cont_box {padding-top: 120px; padding-bottom: 40px; float: left; width: calc(100% - 600px);}
.equipment_wrap .cont_box p {color: #767676; margin-bottom: 80px; font-size: 17px;}
.equipment_wrap .cont_box .btn_wrap a {display: block; padding: 20px 0 20px 48px; border: 1px solid #ededed; border-width: 1px 0 1px 0; width: 300px; background-repeat: no-repeat; background-size: auto 30px; background-position: left 50%; transition: padding .3s;}
.equipment_wrap .cont_box .btn_wrap a {background-image: url(../images/main/eq_list2.svg)}
.equipment_wrap .cont_box .btn_wrap a:hover {padding-left: 58px; color: #25245e; font-weight: 600;}

/* section3 */
.sec3 {position: relative; padding: 100px 0;}
/* .sec3 .section_tit {position: absolute; top: 0; left: 0;} */
.sec3 .cont_tit {font-weight: 800; font-size: 18px; margin-bottom: 20px;}
.section_tit .btn_wrap {padding-top: 40px;}
.float_wrap {margin-bottom: 40px;}
.float_wrap:last-child {margin-bottom: 0;}
.float_wrap:after {content: ''; display: block; clear: both;}
.float_left {width: 45%; float: left;}
.float_right {width: 45%; float: right;}

.news_wrap li {float: left; width: 48%; margin-right: 20px;}
.news_wrap li:last-child {margin-right: 0;}
.news_wrap li a {position: relative; display: block; padding: 20px; border: 1px solid #ededed; overflow: hidden; transition: border .4s;}
.news_wrap li:hover a {border: 1px solid #25245e;}
/* .news_wrap ul li a:after {content: ''; opacity: 0; visibility: hidden; display: block; border: 2px solid #25245e; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box;}
.news_wrap ul li:hover a:after {content: ''; opacity: 1; visibility: visible;} */
.news_wrap li strong {font-weight: 600;}
.news_wrap li .date {font-size: 14px; color: #767676; float: right; margin-top: 40px;}

.quick_wrap li {float: left; width: 48%; margin-right: 20px;}
.quick_wrap li:last-child {margin-right: 0;}
.quick_wrap li a {display: block; border: 1px solid #ededed; padding: 54px 0; text-align: center; transition: all .4s;}
.quick_wrap li:hover a {border: 1px solid #25245e;}
.quick_wrap li a span {font-weight: 600;}
.quick_wrap li a span:before {content: ''; display: block; width: 60px; height: 60px; margin: 0 auto 20px; background-repeat: no-repeat; background-position: 50% 50%; background-size: auto 60px;}
.quick_wrap li.list1 span:before{background-image: url(../images/main/quick_list1.svg);}
.quick_wrap li.list2 span:before{background-image: url(../images/main/quick_list2.svg);}

.notice_wrap {border-top: 2px solid #25245e;}
.notice_wrap li {position: relative; transition: all .4s;}
.notice_wrap li:after {content: ''; display: block; width: 100%; height: 1px; background: #ededed; position: absolute; left: 0; bottom: 0;}
.notice_wrap li:hover {background: #fff; z-index: 1; box-shadow: 0 10px 20px rgba(0,0,0,.05);}
.notice_wrap li:hover:after {content: none;}
.notice_wrap li a {display: block; padding: 24px 10px;}
.notice_wrap li .subject {font-weight: 600; margin-left: 120px; word-break: keep-all;}
.notice_wrap li .subject .ico {display: block; width: 100%; padding-right: 20px; position: relative;}
/* .notice_wrap li .subject .ico:after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 24px; height: 24px; background: url(../images/common/icon_arw.svg) no-repeat 50% 50%;} */
.notice_wrap .state {float: left; display: block; width: 120px; font-weight: 800;}
.notice_wrap .state.state1 {color: #f68925;}
.notice_wrap .state.state2 {color: #999999;}

.no_data {display: block; width: 100% !important; border: 1px dashed #ededed; padding: 20px;}
.notice_wrap .no_data {margin: 10px 0;}
.notice_wrap .no_data:after {content: none;}

/* section4 */
.sec4 {display: table; width: 50%; height: 100px; background: #25245e;}
.contact_wrap {display: table-cell; vertical-align: middle;}
.contact_txt {margin-left: 360px;}
/* .contact_wrap:before {content: ''; display: block; position: absolute; bottom: 0; left: 0; background: #25245e; width: 50%; height: 100px;} */
.contact_txt span {position: relative; color: #fff; padding-right: 40px; margin-right: 40px; vertical-align: middle;}
.contact_txt span:after {content: ''; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: rgba(255,255,255,.6);}
.contact_txt .number a{display: inline-block; font-size: 30px; font-weight: 800; color: #fff; vertical-align: middle; letter-spacing: .1em;}

/* **************************************** *
 * 1400px
 * **************************************** */
@media (max-width: 1400px) {
    .inner {width: 92%; margin: 0 auto;}
    .main_visual .inner {max-width: auto; width: 92%; margin: 0 auto;}

    .visual_title h2 {font-size: 40px;}

    /* section2 */
    /* .sec2 .bg_box:after {right: 0;} */
    
    /* section3 */
    .news_wrap li {width: 49%; margin-right: 2%;}
    .quick_wrap li {width: 49%; margin-right: 2%;}

    /* section4 */
    .contact_txt {margin: 0; text-align: center;}
}


/* **************************************** *
 * 1200px
 * **************************************** */
 @media (max-width: 1200px) {
    .visual_title h2 {font-size: 36px;}

    /* section2 */
    /* .sec2 .bg_box:after {content: none;} */
 }

/* **************************************** *
 * 1024px
 * **************************************** */
 @media (max-width: 1024px) {
     .visual_title h2 {font-size: 36px;}
     .visual_title p {font-size: 14px;}

     /* section common */
     .section_tit {text-align: center;}
     .section_tit > h3 {font-size: 36px;}

     /* section2 */
     .sec2 .section_tit {position: static;}
     .sec2 .bg_box:after {content: none;}
     .equipment_wrap .cont_box {float: none; width: 100%; padding-top: 20px; padding-bottom: 20px;}
     .equipment_wrap .cont_box p {margin-bottom: 40px; text-align: center; word-break: keep-all;}
     .equipment_wrap .cont_box li a {background-size: auto 20px; padding-left: 32px;}
     /* .equipment_wrap .bx-wrapper {display: none;} */
     .equipment_wrap .img_box {float: none; width: 80%; overflow: visible;}
     .equipment_wrap .img_box:after {content: ''; display: block; position: absolute; top: -80px; right: -20%; background: #25245e; width: 50%; height: 420px; z-index: -1;}

     .tab {position: static; margin-top: 20px;}
     .tab .tab_list li {width: 15%; margin-right: 1%; margin-bottom: 1%;}
     .tab .tab_list li:last-child {margin-right: 0;}

     /* section3 */
     .float_left, .float_right {float: none; width: 100%;}
     .float_right {margin-top: 40px;}
     .float_left:after, .float_right:after {content: ''; display: block; clear: both;}

     /* section4 */
     .sec4 {height: 80px;} 
     .contact_txt .number a {font-size: 28px;}
 }

/* **************************************** *
 * 767px
 * **************************************** */
 @media (max-width: 767px){
     /* visual */
     .main_visual {min-height: 480px;}
     .visual_title h2 {font-size: 20px;}
     .visual_title p {font-size: 12px;}
     .visual_title p br {display: none !important;}
     
     .idx_wrap .idx {font-size: 14px;}

     /* section common */
     .section_tit {text-align: center;}
     .section_tit > span {font-size: 14px;}
     .section_tit > h3 {font-size: 26px;}

     /* section1 */
     .sec1 {padding: 60px 0; margin-bottom: 0;}
     .sec1 .section_tit {position: static;}
     .business_cont {padding: 20px 0;}
     .business_cont > div {float: none; width: 100%; border-right: 0; border-bottom: 1px solid #ededed; padding: 24px 0;}
     .business_cont > div:first-child {border-left: 0; border-top: 1px solid #ededed;}
     /* .business_cont > div:last-child {border-bottom: 0;} */
     .business_cont strong:before {margin: 0 auto 20px; width: 48px; height: 48px; background-size: auto 48px;}
     .business_cont strong {font-size: 16px;}
     .business_cont p {font-size: 13px;}

     /* section2 */
     .sec2 {padding: 40px 0;}
     .equipment_wrap .img_box {float: none; width: 100%; min-height: 240px;}
     .equipment_wrap .img_box:after {content: none;}
     .tab .tab_list li {width: 32%; height: 110px; margin-right: 1%; margin-bottom: 1%;}
     .tab .tab_list li:last-child {margin-right: 0;}

     /* section3 */
     .sec3 {padding: 40px 0;}
     .section_tit .btn_wrap {padding-top: 20px;}
     .news_wrap li {margin-right: 2%;}
     .quick_wrap li {margin-right: 2%;}
     .quick_wrap li a {padding: 20px 0;}
     .quick_wrap li a span:before {width: 36px; height: 36px; background-size: auto 36px;}
     .notice_wrap li a {padding: 12px 10px;}
     .notice_wrap .state {width: 80px;}
     .notice_wrap li .subject {margin-left: 80px;}
     
     /* section4 */
     .sec4 {width: 100%; margin-top: 40px;}
     .contact_txt {width: 92%; margin: 0 auto;}
     .contact_txt span {margin-right: 10px; padding-right: 10px;}
     .contact_txt .number a {font-size: 20px;}
 }