@charset "UTF-8";

#mainContainer {position: relative; min-height: 795px;}

#mainVisual {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.main-visual-slider {height: 100%;}
.main-visual-slider .slick-list, .main-visual-slider .slick-track{height: 100%;}
.main-visual-inner {width: 100%; height: 100%; outline: none;}

.main-visual-btn-group {position: absolute; width: 100%; top: 350px; left: 0; text-align: center; z-index: 15;}
.main-visual-btn-group .main-visual-btn-inner {display: inline-block;}
.main-visual-btn-group .main-visual-btn-inner .main-visual-btn {float: left; margin-right: 10px;}
.main-visual-btn-group .main-visual-btn-inner .main-visual-dots {float: left;}

.main-visual-btn > button {width: 22px; height: 22px;}
.main-visual-btn .main-visual-pause {background: url("../images/button/btn_pause_1.png") no-repeat center;}
.main-visual-btn .main-visual-play {display: none; background: url("../images/button/btn_play_1.png") no-repeat center;}

.main-visual-btn.on .main-visual-pause {display: none;}
.main-visual-btn.on .main-visual-play {display: block;}

.main-visual-dots li {display: inline-block; vertical-align: middle; margin: 0 5px;}
.main-visual-dots li button {text-indent: -99999px; display: inline-block; vertical-align: middle; width: 25px; height: 1px; background-color: rgba(255, 255, 255, 0.5); transition: all 0.3s;}

.main-visual-dots li.slick-active button {height: 3px; background-color: rgba(255, 255, 255, 1);}


.main-visual-txt-wrap {width: 100%; left: 0; top: 0; margin-bottom: 170px;}
.main-visual-txt {text-align: center; box-sizing: border-box; padding-top: 155px; padding-bottom: 30px;}
.main-visual-txt p {font-size: 30px; color: #fff; text-shadow: 6px 6px 7px rgba(0, 0, 0, 0.51); margin-bottom: 25px; word-break: keep-all;}
.main-visual-txt h3 {font-size: 50px; color: #fff; text-shadow: 6px 6px 7px rgba(0, 0, 0, 0.51); font-weight: 400; word-break: keep-all;}



#mainContent {position: relative; width: 100%; left: 0; z-index: 10; text-align: center;}

.main-content-wrap {display: inline-block; width: 100%; max-width: 1315px; box-sizing: border-box;}
.main-banner {position: relative; float: left; width: 350px;}

.main-banner .slick-dots {position: absolute; top: 17px; right: 45px; text-align: center;}
.main-banner .slick-dots li {display: inline-block; width: 22px; height: 22px; border: 1px solid transparent; border-radius: 50%; line-height: 20px; vertical-align: middle;}
.main-banner .slick-dots li button {display: inline-block; vertical-align: middle; width: 6px; height: 6px; background-color: #fff; border-radius: 50%; text-indent: -999999px;}
.main-banner .slick-dots li.slick-active {border-color: #fff;}
.main-banner img {width: 100%;}

.main-banner-btn {position: absolute; right: 19px; top: 17px; width: 22px; height: 22px; z-index: 10; }
.main-banner-btn > button {width: 22px; height: 22px;}
.main-banner-btn .main-banner-pause {background: url("../images/button/btn_banner_pause.png") no-repeat center;}
.main-banner-btn .main-banner-play {display: none; background: url("../images/button/btn_banner_play.png") no-repeat center;}

.main-banner-btn.on .main-banner-pause {display: none;}
.main-banner-btn.on .main-banner-play {display: block;}

.main-link-list {float: left; width: 705px;}
.main-link-list li {float: left; width: 235px;}
.main-link-list li:first-child {width: 235px;}

.main-link-list li.link1 {background: url("../images/main/main_link_1.png");}
.main-link-list li.link2 {background: url("../images/main/main_link_2.png");}
.main-link-list li.link3 {background: url("../images/main/main_link_3.png");}
.main-link-list li a {display: block; height: 222px; padding: 0 10px;}

.main-link-table {display: table; width: 100%; height: 100%; }
.main-link-table .main-link-cell {display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center;}
.main-link-table .main-link-cell p {font-size: 20px; line-height: 30px; color: #fff; font-weight: 400; margin-bottom: 30px;}
.main-link-table .main-link-cell p span {display: block; font-size: 14px; line-height: 25px; color:rgba(255, 255, 255, 0.5);}
.main-link-table .main-link-cell img {transition: all 0.3s; }

.main-link-list li a:hover .main-link-table .main-link-cell img {transform: translateY(-10px);}

.main-alarm {position: relative; float: right; width: 240px;}
.main-alarm .main-alarm-tit {position: absolute; z-index: 10; width: 100%; left: 0; bottom: 0; height: 40px; padding: 0 15px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5);}
.main-alarm .main-alarm-tit p {float: left; font-size: 16px; line-height: 40px; color: #fff; }

.main-alarm .main-alarm-inner a {position: relative; display: block; padding-top: 93%; width: 100%;}
.main-alarm .main-alarm-inner img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}


.main-alarm-btn-group {float: right; padding-top: 15px;}
.main-alarm-btn-group > button {float: left; width: 6px; height: 9px; cursor: pointer; }
.main-alarm-btn-group .main-alarm-prev {background: url("../images/button/btn_alarm_prev.png") no-repeat center;}
.main-alarm-btn-group .main-alarm-next {background: url("../images/button/btn_alarm_next.png") no-repeat center;}
.main-alarm-check {float: left; margin: 0 10px; margin-top: -3px;}
.main-alarm-check > button {width: 7px; height: 9px; }
.main-alarm-pause {background: url("../images/button/btn_alarm_pause.png") no-repeat center;}
.main-alarm-play {display: none; background: url("../images/button/btn_alarm_play.png") no-repeat center;}

.main-alarm-check.on .main-alarm-pause {display: none;}
.main-alarm-check.on .main-alarm-play {display: block;}

.main-alarm .popup-n {margin: 0; height: 222px; line-height: 222px; background-color: rgba(0, 0, 0, 0.5); color: #fff;  text-align: center;}

@media all and (max-width: 1660px){
  .main-link-list li {width:33.333%;}
  .main-link-list li:first-child {width: 33.333%;}
}

@media all and (max-width: 1640px){
  .main-banner {width: 28%;}
  .main-link-list {width: 53%;}
  .main-link-list li {position: relative; padding-top: 33.4%;}
  .main-link-list li a {position: absolute; width: 100%; height: 100%; left: 0; top: 0; box-sizing: border-box; word-break: keep-all;}

  .main-alarm {width: 19%;}
  .main-alarm .popup-n {padding-top: 93%; height: auto; line-height: 93%; width: 100%; }
  .main-alarm .popup-n p {position: absolute; width: 100%; height: 100%; text-align: center; left: 0; top: 40%;}
}

@media all and (max-width: 1220px){
  #mainContent {position: static; box-sizing: border-box; padding: 0 3%; text-align: center; padding-bottom: 60px;}

  .main-banner {float: none; display: inline-block; width: 440px;}
  .main-alarm {float: none; display: inline-block; width: 300px; margin-left: -5px;}

  .main-link-list {width: 100%; max-width: 860px; float: none; margin: 0 auto;}
  
}

@media all and (max-width: 860px){

  .main-visual-btn-group {top: 225px;}

  .main-visual-txt-wrap {margin-bottom: 110px;}
  .main-visual-txt {padding-top: 85px;}
  .main-visual-txt p {font-size: 25px;}
  .main-visual-txt h3 {font-size: 35px;}

  .main-banner {display: block; float: left; width: 55%; max-width: 440px;}
  .main-alarm {display: block; float: left; width: 45%; max-width: 300px; margin-left: 0;}

  .main-alarm .main-alarm-inner a {padding-top: 0;}
  .main-alarm .main-alarm-inner a img {position: static;}





}

@media all and (max-width: 630px){
  .main-visual-btn-group {top: 180px;}

  .main-content-wrap {display: block;}
  .main-visual-txt-wrap {margin-bottom: 50px;}
  .main-visual-txt {padding-top: 40px;}
  .main-visual-txt p {font-size: 18px; margin-bottom: 10px; line-height: 25px;}
  .main-visual-txt p span {display: block;}
  .main-visual-txt h3 {font-size: 26px;}

  .main-banner {float: none; width: 100%; max-width: none; }
  .main-alarm {width: 100%; max-width: none; margin-left: 0;}

  .main-link-list {float: none;}
  .main-link-list li {width: 100%; padding-top: 0;}
  .main-link-list li a {position: static; overflow: hidden;}
  .main-link-list li:first-child {width: 100%;}

  .main-link-table .main-link-cell {height: 130px;}
  .main-link-table .main-link-cell p {float: left; width: 60%; margin-bottom: 0;}
  .main-link-table .main-link-cell .main-link-img {float: left; width: 40%; text-align: center;}

  .main-link-table .main-link-cell p {font-size: 20px;}
  .main-link-list li.link1 .main-link-table .main-link-cell p, .main-link-list li.link3 .main-link-table .main-link-cell p {margin-top: 10px;}

}














  * {}