/* visual */
#visual {position: relative;}
#visual .swiper-container { width: 100%;}
#visual .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;      -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;      -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.swiper-slide img { display: block; width: 100%; height: 85vh; object-fit: cover;}
.swiper-pagination-bullet {width: 8px; height: 8px; opacity: 1;}
#visual .swiper-pagination-bullet-active {background: #fff; position: relative;}
#visual .swiper-pagination-bullet-active:before {content: ''; opacity: 1; width: 26px; height: 26px; border: 1px solid #fff; background: transparent; position: absolute; top: -10px; left: -9.5px; border-radius: 26px;}
#visual .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 15px; cursor: pointer;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 44%; left: -50.6%; width: 100%; transform: translate(20%, 50%);}
.tit {width: 750px; position: absolute; left: 35.6%; top: 36%; transform: translate(-50%,-50%);}
.tit h3 {font-size: 34px; font-weight: 300; color: #fff; }
.tit h2 {font-size: 54px; color: #fff; margin-top: -15px; margin: -15px 0 15px;} 
.tit p { font-size: 18px; color: rgba(255,255,255,0.7);}
#visual .guid_box {width: 1300px; position: absolute; left: 50%; bottom: 0; z-index: 1; transform: translateX(-50%);}
#visual .guid_box ul li {float: left; width: calc((100% - 60px) / 4); margin-right: 20px; box-sizing: border-box; padding: 25px 20px 0; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.4); transition: ease .3s;}

#visual .guid_box ul li:last-child{margin-right: 0; }
#visual .guid_box ul li:hover .txt_box {opacity: 0;}
#visual .guid_box ul li:nth-child(1):hover .txt_box2{background: #f8554b;}
#visual .guid_box ul li:nth-child(2):hover .txt_box2{background: #ffc145;}
#visual .guid_box ul li:nth-child(3):hover .txt_box2{background: #39a14a;}
#visual .guid_box ul li:nth-child(4):hover .txt_box2{background: #315f9b;}
#visual .guid_box ul li:hover .txt_box2 {opacity: 1; height: 292px;}
#visual .guid_box ul li .txt_box2 { opacity: 0; height: 0; position: absolute; bottom: 0;width: 100%; left: 0; transition: ease .5s;}
#visual .guid_box .txt_box2 ul {width: 100%; background-color: #000;}
#visual .guid_box .txt_box2 ul li {width: 100%; height: 146px; border: none;}
#visual .guid_box .txt_box2 ul li:first-child {text-align: left;}
#visual .guid_box .txt_box2 ul li:last-child {border-top: 1px solid rgba(255,255,255,0.4);}
.guidicon {float: right; margin-top: 7px;}
.txt_box {height: 120px;}
.txt_box strong {color: #fff; font-size: 20px; display: inline-block; margin-top: 15px;}
.txt_box p {color: rgba(255, 255, 255, 0.5); font-family: 'Montserrat', sans-serif;}
.txt_box2 strong {color: #fff; font-size: 20px; display: block; margin-top: 15px;}
.txt_box2 p {color: #fff; font-family: 'Montserrat', sans-serif}
.bor {display: block;}

.popup_box {width: 100% !important;}
.popup_box img {width: 100% !important; height: auto !important;}
@media screen and (max-width:1440px) {
    /* guid_box */
    #visual .guid_box {width: 98%; margin: 0 auto;}
    #visual .guid_box ul li {padding: 25px 5px 0 10px;}
    .txt_box p {font-size: 14px;}
}

@media screen and (max-width:1023px) {
    /*  */
    .tit {width: 90%; left: 50%;}
    .tit h3 {font-size: 24px;}
    .tit h2 {font-size: 42px;}
    .tit p {font-size: 16px;}

    /* guid_box */
    #visual .guid_box ul li {padding: 15px 10px 10px ;}
    .txt_box2 {text-align: center;}
    .guidicon {margin-top: 5px;}
    .txt_box strong {font-size: 16px;}
    .txt_box2 strong {font-size: 16px;}

}

@media screen and (max-width:767px) {
    .tit h3 {font-size: 20px; margin-bottom: 5px;}
    .tit h2 {font-size: 30px;}
    .bor {display: none;}

    /* guid_box */
    #visual .guid_box ul li {width: 48%; margin: 0 1% 0; padding: 15px 10px 10px;}
    #visual .guid_box ul li:hover .txt_box  {opacity: 1;}
    #visual .guid_box ul li:hover .txt_box2 {display: none;}
    #visual .guid_box ul li:nth-child(1):hover {background: #f8554b;}
    #visual .guid_box ul li:nth-child(2):hover {background: #ffc145;}
    #visual .guid_box ul li:nth-child(3):hover {background: #39a14a;}
    #visual .guid_box ul li:nth-child(4):hover {background: #315f9b;}
    .txt_box {height: 80px; }
    .txt_box strong {font-size: 18px; display: block; padding-top: 13px;}
    .txt_box p{display: none;}
    .txt_box2 strong {font-size: 18px; }
    .txt_box2 p{font-size: 14px;}
}
@media screen and (max-width:480px) {
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {width: 100%; transform: translate(0,50%); left: 0; top: 40%;}
    .tit {top: 30%;}
    .tit h3 {font-size: 18px; margin-bottom: 5px;}
    .tit h2 {font-size: 24px;}
    .bor {display: none;}

    /* guid_box */
    #visual .guid_box ul li {width: 48%; margin: 0 1% 0; padding: 15px 5px 0;}
    .txt_box {height: 80px; }
    .txt_box strong {display: block; padding-top: 15px; font-size: 14px;}
    .txt_box p {display: none;}
    .guidicon {float: right;}
}