@charset "utf-8";
.main-top-wrap {background: #f0f7f7; padding: 40px 0 0;}
.main-top-wrap:after {content: ""; display: block; clear: both;}
.main-top-wrap .slogan {text-align: center; font-size: 18px; color: #0e0f28; padding-bottom: 35%; background: url("..images/main/top-bg-mob.png") no-repeat center bottom; background-size: 100%;}
.main-top-wrap .slogan .top-txt {font-size: 25px; font-weight: bold; display: block; letter-spacing: -2px;}
.main-top-box {background: #e0ecee; padding: 0 15px 18px; max-width: 1200px; margin: 0 auto;}
.top-info-box {margin-bottom: 14px;}
.top-info-box .infotxt {background: #0fae8f; color: #fff; font-size: 18px; text-align: center; padding: 28px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.top-info-box .petition-btn {background: #1a5995; color: #fff; font-size: 18px; font-weight: bold; display: block; text-align: center; padding: 22px 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.top-info-box .petition-btn .ico {position: relative; padding-left: 26px;}
.top-info-box .petition-btn .ico:before {content: ""; display: block; position: absolute; background: url("..images/common/ico-pen.png") no-repeat; width: 18px; height: 18px; left: 0; top: 4px; background-size: 100%;}
.main-btm-wrap {padding: 25px 15px 50px;}
.main-btm-wrap .title-box {text-align: center; margin-bottom: 20px;}
.main-btm-wrap .title-box .tit {font-size: 40px; font-weight: bold; color: #344554; margin-bottom: 5px;}
.main-btm-wrap .title-box .txt {font-size: 24px; color: #000;}

/* slide */
.opacityslide ul{ position: relative; }
.opacityslide ul li{ display:none; position: absolute; left:0; top:0; opacity: 0; z-index:0; width: 100%;}
.opacityslide ul li.op-active{ z-index:1; }
.opacityslide .slide-indicator {z-index: 5;}
.basicslide-container {overflow: hidden;width: 100%;;}
/*.basicslide ul{position: relative; display: table; margin-left:-1px; width: 100%;}
.basicslide ul li{position: relative; display: inline-block; float: left;}
.basicslide ul li:first-child{margin-left:0;}*/

.petition-slide {position: relative;}
.petition-slide .op-indicator{display:block; position:absolute; left: 0; bottom: 30px; z-index: 2; width: 100%; text-align: center;}
.petition-slide .op-control .prev,
.petition-slide .op-control .next {display: none; position: absolute; width:50px; height:50px; z-index: 5; background: url("..images/main/banner-arrow.png") no-repeat left top; left: 20px; top:50%; margin-top: -15px;}
.petition-slide .op-control .next {background-position: right top; left: auto; right: 20px;}
.petition-slide .op-indibox {display: inline-block; vertical-align: middle; margin-top: -2px;}
.petition-slide .op-indibox .op-pager {display:inline-block; width: 14px; height: 14px; background:#c1c1c1;  vertical-align: middle; border-radius: 100%; margin-right: 7px;}
.petition-slide .op-indibox .op-pager.active {background: #000;}
.petition-slide .op-indicator .op-play,
.petition-slide .op-indicator .op-stop {display: inline-block; width: 31px; height: 31px; background: url("../../../images/common/slide-play.png") no-repeat left top;}
.petition-slide .op-indicator .op-play {background-position: right top;}
.petition-slide .petition-box.max {height: 380px; width: 100%;}
.petition-slide .slide {width: 100%; position: relative; padding-top: 380px;}
.best-nodata-wrap {text-align: center; background: #fff; border-radius: 10px; padding: 70px 40px;}
.best-nodata-wrap > img {margin-bottom: 43px;}
.best-nodata-wrap > p {color: #666; font-size: 14px;}


@media all and (min-width:768px) {
}

@media all and (min-width:1024px) {
    .main-top-wrap {padding: 0; background: #e0ecee;}
    .main-top-wrap .slogan {font-size: 30px; padding: 55px 0 50px; background: url("../../../images/main/top-bg-pc.png") no-repeat center -24px;}
    .main-top-wrap .slogan .top-txt {font-size: 38px; margin-bottom: 10px;}
    .main-top-box {margin-bottom: 0; padding-bottom: 40px;}
    .top-info-box {display: table; width: 100%; max-width: 1200px; margin: 0 auto 20px; overflow: hidden;}
    .top-info-box:after {content: ""; display: block; clear: both;}
    .top-info-box .infotxt {display: table-cell; width: 81%; border-bottom-left-radius: 10px; border-top-right-radius: 0; padding: 30px 65px 30px 65px; font-size: 24px; text-align: left;}
    .top-info-box .petition-btn {display: table-cell; width: 19%; border-top-right-radius: 10px; border-bottom-left-radius: 0; padding: 30px 20px 30px 0; font-size: 24px; position: relative;}
    .top-info-box .petition-btn:before {content: ""; position: absolute; display: block; width: 0; height: 0; border-bottom: 126px solid #1a5995; border-left: 126px solid transparent; left: -125px; top: 0;}
    .top-info-box .petition-btn .ico {padding-left: 35px;}
    .top-info-box .petition-btn .ico:before {width: 28px; height: 28px;}
    .top-content-box .slide-wrap {width: 63%; margin-right: 2%; float: left; margin-bottom: 40px;}
    .top-content-box .calendar-wrap {width: 35%; float: left; margin-top: 0; margin-bottom: 40px; max-height: 340px;}

    .petition-slide .slide {padding-top: 340px;}
    .petition-slide .op-indicator{bottom: 0;}
    .petition-slide .op-control .prev, .petition-slide .op-control .next {display: block;}
    .petition-slide .petition-box.max {padding: 45px 95px 50px; height: 352px;}
    .petition-slide .petition-box.max .ico-box {display: inline-block; margin-bottom: 15px;}
    .petition-slide .petition-box.max .ico-box .ico {font-size: 16px;}
    .petition-slide .petition-box.max .name-box {display: inline-block; margin: 0 0 15px 15px;}
    .petition-slide .petition-box.max .name-box .name {font-size: 18px; margin-bottom: 0;}
    .petition-slide .petition-box.max .name-box .date {font-size: 16px; top: 3px; left: 62px;}
    .petition-slide .petition-box.max .tit-box .tit {font-size: 24px;}
    .petition-slide .petition-box.max .tit-box .con {font-size: 16px;}
    .petition-slide .petition-box.max .best {width: 69px; height: 88px; right: 95px;}
    .petition-slide .op-control button  {display: block;}
    .best-nodata-wrap {width: 63%; margin-right: 2%; float: left; margin-bottom: 40px; padding: 50px 85px 60px; height: 352px;}
    .best-nodata-wrap > p {font-size: 16px; letter-spacing: -2px;}
}