body{overflow-y: auto}
html,#wrap{height: 100%}
#wrap{background: #eeefef; overflow-y: auto;}
#main{background: #fff}
#main_visual{float: left; width: 50%; position: relative;}
#main_visual .img{height: 100%; background: url('') center center no-repeat; background-size: cover}
#main_visual .img a{display:block; width:100%; height:100%;}
#main_visual img{display: none}
#main_visual .s,#main_visual .s > *, #main_visual .s > * > *, #main_visual .s > * > * > *{height: 100%}
#main_visual .btns{position: absolute; left: 8%; bottom: 40px; z-index: 1}
/* #main_visual .btns > *{display: inline-block; vertical-align: middle;} */
#main_visual .btns button{width: 66px; height: 66px; background: rgba(0,0,0,.5) url('') center center no-repeat; float: left;}
#main_visual .btns .prev{background-image: url('../img/main/controls/prev_w.png');}
#main_visual .btns .next{background-image: url('../img/main/controls/next_w.png');}
#main_visual .btns .controls{background-image: url('../img/main/controls/stop_w.png'); margin: 0 1px; white-space: nowrap; overflow: hidden; text-indent: -999px;}
#main_visual .btns .controls.play{background-image: url('../img/main/controls/play_w.png')}
#main_visual .append{margin-right: 18px;}
#main_visual .slick-dots{position: absolute;z-index: 100;top: 92%;left: 50%;transform: translateX(-50%);visibility: hidden;}
#main_visual .slick-dots li{display: inline-block; border-radius: 50%; margin-left: 10px; border:0; background: #a9a9a9; width: 6px; height: 6px}
#main_visual .slick-dots .slick-active{background: #444; width: 24px;border-radius: 100px}
#main_visual .slick-dots li:first-child{margin-left: 0;}
#main_visual .slick-dots button{display: block; width: 100%; height: 100%}

#m_parts{float: right; width: 50%}
#m_parts.down{width: 100%;}
#m_parts.down .bot{width: 100%}
#m_parts.down .bot .l{width: 50%}
#m_parts.down .bot .small{width: 25%;background: #fff;}

#main,#m_parts .top,#m_parts .bot{display: -webkit-flex;
display: -ms-flex;
display: flex; flex-wrap:wrap}
.m_notice{background: #e6f1d9; color: #111}
#m_parts .wide{padding: 20px 35px;}
#m_parts .wide2{width: 33.33%; padding: 20px 35px 0 0;}
.tit-main{font-size: 26px; font-size: 1.625rem;; color: #6eb92b; position: relative; font-weight: 700; line-height: 1.15; margin-bottom: 1.18em;}
.tit-main .more{position: absolute;right: 0;top:50%; width: 40px; height: 40px; width: 2.6rem; height: 2.6rem; border:1px solid #6eb92b; display: block; white-space: nowrap;overflow: hidden; margin-top: -20px; margin-top: -1.3rem; background: url('../img/main/more.png') center center no-repeat;}

.m_media{padding: 20px 30px; color: #6eb92b}
.m_media .cont{text-align: center; margin-top: 1em;}
.m_media .img{    position: relative;
    padding-bottom: 55%;
    overflow: hidden;}
.m_media .img img{width: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;}
.m_media .cont > *{display: block;}
.wide{float: left; width: 66%}
.m_wide{padding: 20px 35px;}
.small{float: left;}
.m_notice .bul-dot > li{margin-top: 1em; position: relative;}
.m_notice a{display: block; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; position: relative;}
.m_notice a:hover{text-decoration: underline;}
.m_notice li{padding-right: 5em;}
.m_notice .date{position: absolute;right: 0; top:0; color: #858e9e; font-size:0.875em;}
.m_notice .new{font-size: 12px; font-weight: 700; border:2px solid #737a88; display: inline-block; width: 25px; height: 25px; border-radius: 50%; text-align: center; line-height: 20px; color: #6eb92b; margin-left: 5px;}

.main-mid{background: #6eb92b; color: #fff; font-size: 1.25em; line-height: 70px; position: relative;}
/* .main-mid .t{font-size: 1.100em; width: 187px; height: 57px; background: url('../img/main/tit.png') left top no-repeat; display: block; position: absolute;left: 0;top:50%; margin-top: -27px; line-height: 57px; text-align: center;}
.main-mid .t span{padding-left: ; background: url('../img/main/alram.png') left center no-repeat; padding-left: 50px; display: inline-block;} */
.main-mid .t{position: absolute;left: 0;top:50%; transform: translateY(-50%);}
.main-mid .t img{display: block;}
.main-mid .item{position: relative; height: 70px; padding-left: 210px;}

.main-mid .s_w{position: relative;}
.main-mid .btns{position: absolute;right: 3%;top:50%; height:100%; transform: translateY(-50%); z-index: 1; height: 60px}
.main-mid button{width: 26px; height: 32px; background: url('') center center no-repeat;}
.main-mid .prev{background-image: url('../img/main/prev3.png')}
.main-mid .next{border-top: 1px solid #6eb92b; background-image: url('../img/main/next3.png')}
.main-mid .s a{overflow: hidden; display: block; width: 90%; height: 100%;}
.main-mid .s span{display: inline-block;overflow: hidden;text-overflow: ellipsis; white-space: nowrap; word-break:keep-all;}
.main-mid .s a:hover{text-decoration: underline;}

@keyframes text-scroll{
  from{
    transform:translateX(20%);
    -moz-transform:translateX(20%);
    -webkit-transform:translateX(20%);
    -o-transform:translateX(20%);
    -ms-transform:translateX(20%);
  }
  to{
    transform:translateX(-100%);
    -moz-transform:translateX(-100%);
    -webkit-transform:translateX(-100%);
    -o-transform:translateX(-100%);
    -ms-transform:translateX(-100%);
  }
}


/* #main .nav{background: #0061a1 url('../img/main/link.gif') right bottom no-repeat; color: #fff} */
#main .nav > ul > li{float:left;border-top: 3px solid #ddd;width: 45%;margin: 0 0 0 4%;position: relative; transition: all ease-in-out .3s}
#main .nav > ul > li.special{width: 100%}
/* #main .nav > ul > li:first-child{float: left;border-top: 2px solid #6eb92b} */
#main .nav > ul > .process .p-title{font-weight:600;font-size: 20px;margin: 15px 0}
#main .nav > ul > .process .detail{font-size: 14px;border: 1px solid #ccc;border-radius: 20px;width: 90px;padding: 2px 5px;text-align: center;margin-top: 50px;}
#main .nav > ul > .process .d-txt{font-size: 14px;max-height: 63px;overflow: hidden;}
#main .nav > ul > .process img{position: absolute;bottom: 0;right: 0}
#main .nav > ul li:hover{border-top: 3px solid #6eb92b}
#main .nav > .clearfix{margin-left: -4%}

#main .nav .link{border:1px solid #3381b4}
#main .nav .link li{border-top: 1px solid #3381b4;}
#main .nav .link li:first-child{border-top: 0;}
#main .nav .link a{display: block; padding: 10px 20px}
#main .nav .link span{display: block; background: url('../img/main/arrow.gif') right center no-repeat; line-height: 1.15;}
#main .nav .link span{position: relative; padding-left: .7em; margin-top: .5em;}
#main .nav .link span:before{position: absolute;left: 0;top:.67em; left: 0; background: #fff; width: 3px; height: 3px; content: ''}
#main .nav .link span:first-child{margin-top: 0;}
#main .nav .link a:hover{text-decoration: underline;}

#main .bot .r{position: relative;}
#main .bot .r:after{position: absolute;right: -1px;top:0; width: 1px; height: 100%; content: ''; background: #ddd}
#main .ico{text-align: center; line-height: 1.15}
#main .ico ul{}
#main .ico ul > li{float: left; width: 33.3333333333%; padding: 20px 0; position: relative;}
#main .ico ul > li:first-child:before,
#main .ico ul > li:nth-child(2):before,
#main .ico ul > li:nth-child(3):before{position: absolute; left: 50%; width: 50%; margin-left: -25%; background: #ddd; content: ''; bottom:0; height: 1px}
#main .ico ul > li:after{position: absolute;left: 0;top:50%; width: 1px; height: 80px; margin-top: -40px; background: #ddd; content: ''}
#main .ico ul > li:first-child:after,#main .ico ul > li:nth-child(4):after{display: none;}
#main .ico img{display: block; margin: 0 auto;}
#main .txt{font-weight: 500; margin-top: 10px;}

.m_media{border-right: 1px solid #af914e;}
#main .r.ico{border-right: 1px solid #ddd;}


@media (max-width:1995px){
  .m_media{border-right: 0;}
  .main-mid{border-right: 0}
  #main .r.ico{border-right: 0}

}
@media (max-width:1180px){
#main_visual,#m_parts{float: none; width: 100%;}
#main_visual .img{background: none; padding-bottom: ;}
#main_visual .img img{display: block; width: 100%;height: 100%;}
#main_visual .btns{left: 30px; bottom: 30px}
#main .bot .r{border-right: 0;}
#main .bot .r:after{background: none}
.pc_only{display: none !important;}
.main-mid.tablet{display: block !important; width: 100%}
.main-mid .item{padding-left: 11em;}
#m_parts.down .bot .l{width: 100%}
#m_parts.down .bot .small{width: 50%}
ul.top{width:100%;}
}

@media (max-width:720px){
  #m_parts .wide,.m_media{padding: 1.5rem}
  .wide,.small{float: none; width: 100%}
  #m_parts .wide2{width: 100%; padding-right: 35px;}
  .main-mid{padding: 0}
  .main-mid .t{width: 9em}
  .main-mid .item{padding-left: 10em;}
  .main-mid .btns{left: 7.8em}
  /* #main_visual .btns{left: .938rem; bottom: 1rem} */
  #main_visual .btns{visibility: hidden;}
  #main_visual .btns button{width: 4rem; height: 4em}
  #main_visual .slick-dots{visibility: visible}
  #m_parts.down .bot .small{width: 100%}
  #main .nav > ul > li {width: 95%;margin-bottom: 30px}
}