/* header */
header{  background-color: rgba(255,255,255,1); }
header .logo img:nth-child(2){ display: none}
header img.p-open-active{ display: block;}
header .menu span{ background-color: #666; }
.panel{ background-color: rgba(255,255,255,1); }
.panel .sns ul li i{ color: #666; }



/* content */
#s-con01{ padding: 80px 0 120px; }
#s-con01 .travel-wrap{ width: 1200px; box-sizing: border-box; left: 0; right: 0; margin: 0 auto;}

#s-con01 .travel-wrap .img-wrap{ margin-bottom: 40px; position: relative; width: 1680px; left: -240px;}
#s-con01 .travel-wrap .img{ padding-top: 48%;}
#s-con01 .travel-wrap .travel-text{position: absolute; right: 0; top: 0; height: 100%; width: 720px; background-color: rgba(0,0,0,0.5); padding: 25px; box-sizing: border-box; }

#s-con01 .travel-wrap .textwrap{ position: absolute; width: 91%; bottom: 25px;}

#s-con01 .travel-wrap .travel-text h4{ color: #eee; font-size: 50px;font-weight: 400;margin-bottom: 10px; }
#s-con01 .travel-wrap .travel-text h5{ display: inline; color: #eee; font-size: 20px;}
#s-con01 .travel-wrap .travel-text p.car{ display: inline; padding-left: 10px; color: #eee; font-size: 14px; font-weight: 500; }
#s-con01 .travel-wrap .travel-text p{ padding-top: 30px; color: #eee; font-size: 14px; font-weight: 500; line-height: 24px; font-weight: 500; word-break: keep-all;}


#s-con01 .img-listwrap{ text-align: center; width: 1515px; position: relative; left: -157.5px;}
#s-con01 .img-list{ display: inline; text-align: center; width: 100%; font-size: 0;}
#s-con01 .img-list li{ display: inline-block; width:210px; height: 122px; padding: 5px; text-align: center; box-sizing: border-box;}
#s-con01 .img-list li .img{ width: 200px; height: 112px; border-radius: 8px; position: relative; padding-top: 0;}
#s-con01 .img-list li .img p{ display: block;  color: #fff; position: absolute; bottom: 10px; left: 5px; width: 90%; height: 10px; font-size: 14px; text-align: left}

#s-con01 .img-list li.active .img:after{ content:''; position: absolute; width: 98%; height: 96%; border-radius: 8px; border: 2px solid #000; top: 0; left: 0;}

#s-con01 .img-list li .img:before {content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,.5); border-radius: 8px; opacity: 1; transition: .3s;}
#s-con01 .img-list li.active .img:before {opacity: 0;}
#s-con01 .img-list li:hover .img:before {opacity: 0;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #s-con01{ padding: 10.67vw 0 16vw;}
    #s-con01 .travel-wrap{width: 100%;}
    #s-con01 .travel-wrap .img-wrap{ margin-bottom: 8vw; position: relative; width: 100%; left: auto;}

    #s-con01 .travel-wrap{ width: 100%; padding: 0 15px; box-sizing: border-box;}
    #s-con01 .travel-wrap .travel-text{position: relative; right: 0; top: 0; height: auto; width: 100%; background-color: rgba(0,0,0,0.5); padding: 10.67vw 15px 9.33vw;}
    
    #s-con01 .travel-wrap .textwrap{ position: relative; width: 100%; bottom: 0;}
    
    #s-con01 .travel-wrap .travel-text h4{ font-size:40px; }
    #s-con01 .travel-wrap .travel-text h5{ display: block; font-size: 18px; line-height: 7vw; }
    #s-con01 .travel-wrap .travel-text p.car{ display: block; padding-top: 1vw; padding-left: 0; font-size: 1rem; }
    #s-con01 .travel-wrap .travel-text p{ padding-top: 8vw; font-size: 1rem; font-weight: 500; line-height: 5.5vw; }
    
    #s-con01 .img-listwrap{ text-align: left; width: 100%; position: relative; left: 0;}
    #s-con01 .img-list li{ display: inline-block; width: 33%; height: auto; padding: 1%; text-align: center;}
    #s-con01 .img-list li .img{ padding-top: 56.25%; width: 100%; height: auto; border-radius: 8px; position: relative;  }

    #s-con01 .img-list li .img p{ display: block;  color: #fff; position: absolute; bottom: 5px; left: 5px; width: 100%; height: 2.67vw; font-size: 0.8333rem;}
}