/* 硫붿씤 */
.mainWrap { background:url('../img/main_bg.jpg') center top no-repeat; background-size: cover; height:100vh}
.mainArea {padding:20px 0;}

.mainArea .container {margin-top:15px}
.mainArea .row {margin-bottom:20px;}

/* 硫붿씤 諛곕꼫 �곸뿭 �≪쓣�� CSS 泥섎━  -S */
/* .mainVisual .swiper-container { height:366px;}
@media screen and (max-width:991px) {
	.mainVisual .swiper-container { height:auto;}
}*/
/* 硫붿씤 諛곕꼫 �곸뿭 �≪쓣�� CSS 泥섎━  -S */

.mainVisual {margin-right:20px;}

/* 硫붿씤 諛곕꼫 �곸뿭 �≪쓣�� CSS 泥섎━  -S */
/*.mainVisual .swiper-container {border-radius: 10px; height:100%;box-shadow: 0 10px 10px;}*/
.mainVisual .swiper-container {border-radius: 10px; box-shadow: 0 10px 10px;}
/* 硫붿씤 諛곕꼫 �곸뿭 �≪쓣�� CSS 泥섎━  -E */

.mainVisual .swiper-container .swiper-slide .img {width:100%; max-height:200px;}
.mainVisual .swiper-container .swiper-slide img {width:100%; height:auto;}
.visual-btn { position: relative; right:0; bottom:28px; width:101px; float:right;}
.mainVisual .visual-btn .swiper-button-prev {width:50px; height:50px; background:rgba(0,0,0,0.2); text-align: center; line-height: 50px;  float:right; left:0;}
.mainVisual .visual-btn .swiper-button-next {width:50px; height:50px; background:rgba(0,0,0,0.2); text-align: center; line-height: 50px;  float:right; right:0;}
.mainVisual .visual-btn div:hover { background:rgba(0,0,0,0.4); transition:all .5s ease;}
.mainVisual .swiper-button-prev:after, .mainVisual .swiper-button-next:after {content: '';}

.box {-moz-box-sizing: border-box; /* Firefox  */  -webkit-box-sizing: border-box; /* Safari */  box-sizing: border-box; /* CSS3 Standard */}


.bnArea {background:#ece1ff url('../img/mileage_bg.png') center bottom no-repeat;  border-radius: 10px; height:100%; margin:0 20px;}
.bnArea .bnMileage {padding:30px 10px; text-align: center; }
.bnArea .bnMileage h2 {font-size:24px; color:#000; padding:15px 0; letter-spacing: -1pt;}
.bnArea .bnMileage h3 {font-size: 1em; padding-bottom:25px;}
.bnArea .bnMileage h3 span {display: block;}
.bnArea .bnMileage a {background:#fff; color:#444; padding:10px 20px; border-radius: 50px; box-shadow: 0 10px 10px rgba(9, 42, 116, 0.1);   position: relative; overflow: hidden!important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}    
.bnArea .bnMileage a:hover {background:#3d4049; color:#fff;}


.popupArea {background: #fff; border-radius: 10px; padding:30px;  height:100%;}
.popup-zone {overflow: hidden; position: relative;}
.popup-zone h2 {font-size:20px; font-weight: bold;} 
.popup-zone .sns-area ul {width:100%; margin:30px 0;}
.popup-zone .sns-area li {width:33%; text-align: center; float:left}

.popup-zone .swiper-container {margin-top:15px;   overflow: hidden; height:260px;}
.popup-zone .swiper-wrapper {text-align: center;}
.popup-zone .swiper-wrapper .img {border:1px solid #ddd; max-height:260px;}
.popup-zone .pop-btn {position:absolute; float:right; top:5px; right:-20px; width:80px }
.popup-zone .pop-btn .swiper-button-prev {float:left; left:-24px; top:6px;}
.popup-zone .pop-btn .swiper-button-next {float:right; right:10px; top:6px}
.popup-zone .pop-btn .swiper-pagination { width:50px; top:-7px;  float:right; font-size: 16px;}


.boardArea {margin-right:20px;}
.boardArea .nav-pills .nav-link {color:#4e5260; font-size: 20px; padding:0; position: relative; margin-right:30px;}
.boardArea .nav-pills .nav-link::after {content: ''; background:#4e5260; position: absolute; width:5px; height:5px; border-radius: 50%; left:85px; margin-top:12px;}
.boardArea .nav-pills .nav-link.last::after  {background:none}
.boardArea .nav-pills .nav-link.active::before {content: ''; background:#fce8b1; position: absolute; width:74px; height:7px; left:0; margin-top:20px; z-index:-1;}
.boardArea .nav-pills .nav-link.active, .boardArea .nav-pills .show>.nav-link {color:#000; background:none;  z-index:1;}


.boardArea .tab-content {border-radius: 10px; background: rgba(0,0,0,0.6);}
/*.boardArea .tab-content li {padding:14px; border-bottom:1px solid rgba(255,255,255,0.2)}*/
.boardArea .tab-content li {
    padding:14px; border-bottom:1px solid rgba(255,255,255,0.2);display: flex;
}
/*.boardArea .tab-content li a {color:#fff; background:url('../img/ic_main_dot.gif') left 10px no-repeat; padding-left:15px;}*/
.boardArea .tab-content li a {
    color: #fff;
    background: url(../img/ic_main_dot.gif) left 10px no-repeat;
    padding-left: 15px;
    float: left;
    display: block;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc( 100% - 100px );
}
.boardArea .tab-content li a span.date {float:right; right:0; color:#83868f}
.boardArea .tab-content li span.date {
    float: right;
    display: block;
    color: lightgray;
    width: 100px;
    text-align: right;
}
.boardArea .tab-content li a:hover {color:#ff7200; transition:.5s;}

.snsBox {background:#fff; padding:30px; border-radius: 10px; height:100%; }
.snsBox h2 {color:#000; font-size: 20px; font-weight: bold;}
.snsBox1 {margin-right:20px;}


.embed-youtube {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin-top:15px;}
.embed-youtube iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.facebook-in {border:1px solid #eee; background:#f5f5f5; height:85%; margin-top:15px;}



/* Content 2 */
.con2_wrap {background:url('../img/con_2_bg.png') center top no-repeat; background-size: cover; padding:5rem 0; height:100vh;}
.con2_wrap .title-wrap {letter-spacing: -0.7pt; background-color: #fff; border-radius: 10px; padding:20px 40px; margin-bottom:20px; position: relative; overflow: hidden;}
.con2_wrap .title-wrap h3 {font-size: 2.5rem; font-weight: bold; color:#010101;  float:left; text-align: left;;}
.con2_wrap .title-wrap h3 span {font-size:1.25rem; font-weight: normal; display: block;}
.con2_wrap .title-wrap p {font-size:1.125rem;  text-align: right; padding-top:20px;}
.con2_wrap .title-wrap p b {position: relative; font-weight: bold;  z-index: 1;}
.con2_wrap .title-wrap p b::after {content: ''; position: absolute; width:100%; height:5px; background:#fce8b1; left:0; top:30px; margin-top:-10px; z-index:-1}
.con2_wrap .title-wrap p span {display: block;}

.m-left {background:#00b6b3 url('../img/img_main_n02.png') center bottom no-repeat; background-size: contain; padding:30px 40px; border-radius: 10px; height:100%; position: relative; overflow: hidden;}
.m-left:hover {box-shadow: 0 20px 20px rgba(0,182,179,0.3); transition: all .3s ease;}
.m-left h4 {color:#fff; font-size: 1.5rem; padding-bottom:10px; font-weight:600; letter-spacing: -0.7pt;}
.m-left .line {background:url('../img/line_p.png') left top repeat-x; height:3px; width: 100%; margin-bottom:30px;}

.con2_wrap .box .m-left dt {float:left; padding-right:20px}
.con2_wrap .box .m-left dd {line-height: 100px; float: left; color:#fff; font-size:1.2rem; letter-spacing: -1.2pt;}
.con2_wrap .box .m-left dt span.circle {background:#fff; position:relative; width:100px; height:100px; text-align: center; border-radius: 80px; display: block;}
.con2_wrap .box .m-left dt span.circle > img { position:absolute; max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0;}



.m-right .w-box {background:#fff;  padding:30px 40px; border-radius: 10px; height:100%; clear: both; position:relative; overflow: hidden;}
.m-right .w-box:hover {box-shadow: 0 20px 20px rgba(187,197,215,0.4); transition: all .3s ease;}
.m-right .w-box h4 {color:#222; font-size: 1.5rem; padding-bottom:10px; letter-spacing: -0.7pt;}
.m-right .w-box h4 span {color:#00b6b3; font-weight: 600;}
.m-right .w-box .line {background:url('../img/line_p.png') left top repeat-x; height:3px; width: 100%; margin-bottom:30px;}

.m-right .w-box a dl {margin-right:10px; padding:10px; border:2px solid #eee; position:relative; overflow: hidden; border-radius:10px; transition: all .3s ease;}
.m-right .w-box a:hover dl {border:2px solid #00b6b3; color:#00b6b3}

.m-right dl {width:48%; float: left; overflow: hidden;}
.m-right dt {font-size:1.125rem; float:left; padding-right:20px}
.m-right dd {line-height: 32x; padding:20px 0; float: left;  font-size: 1.2rem; letter-spacing: -1.2pt; font-weight: 300;}
.m-right dt span.circle {background:#e5edf5; position:relative; width:100px; height:100px; text-align: center; border-radius: 80px; display: block;}
.m-right dt span.circle > img { position:absolute; max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0;}

.m-right .box2 dl {width:31.3%}


.mb-20 {margin-bottom:20px;}




/* 諛붾줈媛�湲� 留곹겕 */

.linkArea {background:#fff; border-top:1px solid #eee;}
.linkArea .cityList {background: url('../img/bg_map.gif') right top no-repeat; padding:40px 0; display: flex;}
.linkArea .cityList p {font-size:20px; font-weight: bold; float:left; color: #000; padding-right:30px; width:33%}
.linkArea .cityList p span {display: block; font-weight: bold; }
.linkArea .cityList li {float:left; margin-right:10px; margin-bottom:10px}
.linkArea .cityList li a {display: block; border:1px solid #ddd; padding: 10px 30px; background:#fff;}
.linkArea .cityList li a:hover {border:1px solid #00b6b3; background:#00b6b3; color:#fff; box-shadow: 0 5px 20px rgba(0,182,179,0.3); transition: .5s;}

.linkArea .ceCenter {border-left:1px solid #ddd; padding-left:30px; margin:30px 0;}
.linkArea .ceCenter .cs_info {display: flex;}
.linkArea .ceCenter dt {font-size:20px; font-weight: bold;  color: #000; padding-right:20px;  letter-spacing: -1pt; padding-top:5px}
.linkArea .ceCenter dd span {font-size: 24px; color:#ff7200; font-weight: 900;}


.mainWrap { position: relative; height: 100vh; min-height:900px;  overflow: hidden;}
.mainWrap .mainArea { margin: 0; margin-top: 50px;  position: absolute;  top: 367px;/*34%;*//* 50%; */  left: 50%;  -ms-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);}

.con2_wrap { position: relative; height: 100vh;  min-height:900px; overflow: hidden;}
.con2_wrap .inWrap { margin: 0; width:100%;  position: absolute;  top: 45%;/* top: 50%; */  left: 50%;  -ms-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);}



@media screen and (max-width:1400px) {
    .mainWrap, .con2_wrap {height:auto; min-height: auto;}
    .mainWrap .mainArea {margin-top:0;}
    .mainWrap .mainArea, .con2_wrap .inWrap {position: inherit; top:0; left:0; transform: inherit;}

    .con2_wrap .box .m-left dd {line-height: 1.2; padding:15px 0}
    .con2_wrap .box .m-left dd span {display: block;}

}


@media screen and (max-width:1200px) {
    .m-right .box2 dl {text-align: center; width:31.3%;}
    .m-right .box2 dl dt {width:100%; float:inherit !important; padding-right:0; padding-bottom:10px;}
    .m-right .box2 dl dt span.circle {margin:0 auto;}
    .m-right .box2 dl dd {float:none !important}

}


@media screen and (max-width: 1024px) {
    .m-right dt span.circle {width:80px; height:80px;}
    .m-right dt span.circle > img {max-width: 60%;}
    .m-right dd {padding:10px 0; font-size: 1.1rem; line-height: 1.4;}

    .con2_wrap .title-wrap {padding:20px;}
    .con2_wrap .title-wrap h3 {font-size:1.8rem; padding-right:20px}
    .con2_wrap .title-wrap h3 span {font-size: 1rem;}
    .con2_wrap .title-wrap p {font-size: .9rem;}
    .con2_wrap .box .m-left dd {line-height: 80px;}
    .con2_wrap .box .m-left dd span {display: inline-block; line-height: 1.2;}


}


@media screen and (max-width:991px) {

    .mainWrap, .con2_wrap {height:auto;}


    .mainVisual {margin-bottom:20px; margin-right:0;}
    .bnArea {margin-left:0; margin-right:20px;}
    .boardArea {margin-right:0;}
    .boardArea .tab-content {margin-bottom:20px;}



    .con2_wrap h4, .m-right .w-box h4 {font-size: 20px;}
    .m-left {background-size: auto 100%; background-position-x: 80%; padding:20px; margin-bottom:20px; height:auto;}
    .m-left h4 {color:#fff;  padding-bottom:5px; float:left; display: flex; line-height: 100px; padding-right:30px; }
    .m-left .line {background:none; height:0; margin-bottom:0;}

    .m-right .w-box {padding:20px;}





    
    .linkArea .cityList {display: block; padding:20px 15px}
    .linkArea .cityList p {float:inherit;  width:100%; margin-bottom:15px;}
    .linkArea .cityList p span {display: inline-flex;}
    .linkArea .cityList li {width:15%; text-align: center;}
    .linkArea .cityList li a {padding:10px;}
    
    .linkArea .ceCenter {padding:15px; border-top:1px solid #eee; margin-top:0;}
          
    }
    

@media screen and (width: 768px) {.boardArea{margin-right:0;}}
@media screen and (max-width: 767px) {

    .visual-btn {bottom:8px; width:61px;}
    .mainVisual .visual-btn .swiper-button-prev {width:30px; height:30px; background:rgba(0,0,0,0.2); text-align: center; line-height: 30px;  float:right; left:0;}
    .mainVisual .visual-btn .swiper-button-next {width:30px; height:30px; background:rgba(0,0,0,0.2); text-align: center; line-height: 30px;  float:right; right:0;}

    .boardArea {padding-top:30px;}

    .bnArea {background:#ece1ff url('../img/mileage_bg.png') right bottom no-repeat;  background-size: 50%; margin:0}
    .bnArea .bnMileage {padding:20px 15px 30px 20px; text-align: left;}
    .bnArea .bnMileage h2 {padding-top:0; padding-bottom:15px;}
    .bnArea .bnMileage h3 span {display: inline;}
    .popupArea {margin-top:0;}

    .snsBox {margin-top:20px;}
    .snsBox1 {margin:0}

    .con2_wrap .title-wrap p {font-size: 1rem;}
    .con2_wrap .title-wrap p span {display: inline-block; }
    .m-left {padding-right:0;}
    .m-left h4 {line-height: 80px; padding-right: 15px;}
    .con2_wrap .box .m-left dt {padding-right:10px;}
    .con2_wrap .box .m-left dt span.circle {width:70px; height:70px; margin:0 auto;}
    .con2_wrap .box .m-left dt span.circle > img { max-width:60%; max-height:60%;}
    .con2_wrap .box .m-left dd {line-height: 80px; padding:0;}


    .m-right dl {text-align: center; width:45%; margin:0 5px;}
    .m-right dt {padding-right:0}
    .m-right dt span.circle {width:80px; height:80px; margin:0 auto;}
    .m-right dt span.circle > img {max-width:60%;}
    .m-right dt {text-align: center; float: inherit; display: block; width:100%;}
    .m-right dd {clear: both;   padding-top:10px;  width:100%;}
    
        .m-right .box2 a dl {margin:0 10px 0 0; width:30%; padding:10px 0;}

    .con2_wrap .title-wrap h3 {float: inherit; text-align: center;}
    .con2_wrap .title-wrap p {float: inherit; text-align: center;}

    .linkArea .cityList li {width:22%;}
     

}

/* �앹뾽議� 醫뚯슦 踰꾪듉 (IOS 臾몄젣 �섏젙) */
.popupArea .swiper-button-prev:after,
.popupArea .swiper-button-next:after {content: '';}

/* 硫붿씤 怨듭��ы빆 �щ씪�대뜑 �믪씠 �쒗븳 */
.mainVisual .swiper-slide {
    max-height: 368px;
}

@media screen and (max-width: 600px) {
    .boardArea {margin-right:0px;}
}


@media screen and (max-width: 600px) {
    .m-left {background:#00b6b3}

    .m-left h4 {line-height: 60px;}
    .con2_wrap .box .m-left dt {padding-right:10px;}
    .con2_wrap .box .m-left dt span.circle {width:55px; height:55px; margin:0 auto;}
    .con2_wrap .box .m-left dt span.circle > img { max-width:60%; max-height:60%;}
    .con2_wrap .box .m-left dd {font-size:1.2em; line-height: 55px; padding:0;}
}