section.sec01 {padding: 100px 0; background-color: #fafafa;}
section.sec01 .boxFlx {display: flex; align-items: center;}
section.sec01 .boxFlx .txt {width: 360px;padding-right:60px; box-sizing: border-box;}
section.sec01 .boxFlx .txt h5 {font-size: 40px; font-weight: 600; font-family: 'SUIT-Bold'; margin-bottom: 50px;}
section.sec01 .boxFlx .txt p {font-size: 18px; color: #666; line-height:1.6}
section.sec01 .boxFlx .img  {width: calc(100% - 360px);}
section.sec01 .boxFlx .img ul {display: flex; width: 100%}
section.sec01 .boxFlx .img ul li {width: calc((100% - 64px) / 3); margin-right: 32px; position: relative; height:auto; border-radius: 12px; border: 1px solid #ddd;}
section.sec01 .boxFlx .img ul li:last-of-type {margin-right: 0;}
section.sec01 .boxFlx .img ul li .imgarea {display: block;width:100%; height:0; padding-bottom: 77.5% !important; position: relative; border-radius: 12px 12px 0 0; overflow: hidden; }
section.sec01 .boxFlx .img ul li .imgarea img {display: block;position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%);  width: 100%; height: 100%; object-fit: cover;}
section.sec01 .boxFlx .img ul li .txtarea {border-radius: 0 0 12px 12px; background-color: #fff; overflow: hidden; padding: 25px; box-sizing: border-box; }
section.sec01 .boxFlx .img ul li .txtarea span {font-size: 20px; width:100%; display: block; text-overflow: ellipsis; white-space:nowrap; overflow: hidden; font-weight: 500; font-family: 'SUIT-Medium';}

section.sec02 {height: 623px; background: url(../images/main/main_banner.png) no-repeat center; display: block; position: relative; margin-bottom: 100px;}
section.sec02 .inner {position: relative; height: inherit;}
section.sec02 .inner .txtbox {position: absolute; bottom: 0; z-index: 1; transform:translateY(40px)}
section.sec02 .boxbg {position: absolute; left:0; bottom: 0; background-color: #fff; border-radius: 0 200px 0 0; width: 70%; min-height: 400px; transform: translateY(50px); }
section.sec02 .inner .txtbox h5 {font-size: 40px; margin-bottom: 50px;}
section.sec02 .inner .txtbox h5 b {font-weight: 600; font-size: 40px; font-family: 'SUIT-Bold';}
section.sec02 .inner .txtbox p {font-size: 18px; color: #666; line-height: 1.8;}
section.sec02 .inner .txtbox a {display: block; color: #536a57; font-size:20px ; font-weight: 600; font-family: 'SUIT-Bold'; display: flex; align-items: center; margin-top:50px;}
section.sec02 .inner .txtbox a img { padding-left: 5px;}

section.sec03 {display: flex; height: 820px;}
/* section.sec03 .mapbox {width: 60%;} */
section.sec03 .spot {width: calc(100% - 1190px); background-color: #fafafa; padding: 50px; box-sizing: border-box;}
section.sec03 .spot .filter {padding-bottom: 30px; margin-bottom: 30px; border-bottom:  1px solid #ddd;}
section.sec03 .spot .filter .inputbox {display: flex; align-items: center; width: 100%;}
section.sec03 .spot .filter .inputbox input {display: none;}
section.sec03 .spot .filter .inputbox input + label {display: flex; margin-right:20px;}
section.sec03 .spot .filter .inputbox input + label span {width:18px; height: 18px; background-color: #fff; border-radius: 50%; border: 1px solid #ddd; display: inline-block; margin-right: 5px; position: relative;} 
section.sec03 .spot .filter .inputbox input:checked + label span:before { position: absolute; content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: #536a57; left: 50%; top: 50%; transform: translate(-50%,-50%);}
section.sec03 .spot .filter .inputbox input + label p {color: #666;}
section.sec03 .spot .filter .inputbox input:checked + label p {color: #333; font-weight: 600; font-family: 'SUIT-Bold';}
section.sec03 .spot .detailWrap {max-height:640px; overflow-y:scroll; padding-right: 40px;}
section.sec03 .spot .detailWrap::-webkit-scrollbar {width: 10px; background-color: #dddddd; border-radius: 4px;}
section.sec03 .spot .detailWrap::-webkit-scrollbar-thumb {height: 100px; background-color: #536a57; border-radius: 4px; width: 10px;}
section.sec03 .spot .detailWrap::-webkit-scrollbar-track {width: 10px; background-color: #dddddd; border-radius: 4px;}
section.sec03 .spot .detail {background-color: #fff; height: 200px; padding: 18px; border-radius: 12px; box-sizing: border-box; margin-bottom: 20px; border: 1px solid #ddd; }
section.sec03 .spot .detail ul li ul {height: inherit;}
section.sec03 .spot .detail ul li {display: flex; height: auto;}
section.sec03 .spot .detail .thumb {width: 240px; height:160px; border-radius: 12px; overflow: hidden; display: block;/*  height:0; *//*  padding-bottom: 29.5% !important; */ position: relative; margin-right: 30px; }
section.sec03 .spot .detail .thumb img {display: block;position: absolute; left: 50%; top: 50%;  transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
section.sec03 .spot .detail .over {display: none;}
section.sec03 .spot .infoDirection p {display: flex; justify-content: space-between; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #ddd;}
section.sec03 .spot .infoDirection p span {display: flex; align-items: center; }
section.sec03 .spot .infoDirection p span em { font-size: 18px; font-weight: 600; font-family: 'SUIT-Bold'; margin-left: 10px;}
section.sec03 .spot .infoName b{display: block; font-size: 26px;font-weight: 600; font-family: 'SUIT-Bold'; margin-bottom: 15px; color: #666; }
section.sec03 .spot .infoName span {font-size: 20px; display: block; width: 100%; color: #999;}
section.sec03 .spot .detail:hover {box-shadow: 0 0 10px #ddd;}
section.sec03 .spot .detail:hover .infoName b{color: #536a57;}
section.sec03 .spot .detail:hover .infoName span{color: #333;}
section.sec03 .spot .detail:hover .over {display: flex; position: absolute; left: 0; top: 0; background-color: #536a57c7; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; }
section.sec03 .spot .detail:hover .over img {width: auto; height: 35px; position: static; transform: translate(0,0); margin-bottom: 10px;}
section.sec03 .spot .detail:hover .over span {display: block; font-size: 18px; font-weight: 600; font-family: 'SUIT-Bold'; color: #fff;}
section.sec03 .mapbox  {width: 1190px;}
.root_daum_roughmap {width: 100% !important; height: 100% !important;}
.root_daum_roughmap .wrap_map {height: 100% !important}


section.sec04 {height: 270px; display: flex;}
section.sec04 > div {width: 50%; position: relative;}
section.sec04 > div.leftbanner {background: url(../images/main/leftbanner.png) no-repeat center; background-size: cover;}
section.sec04 > div.rightbanner {background: url(../images/main/rightbanner.png) no-repeat center; background-size: cover;}
section.sec04 > div .txt {position: absolute; left: 0; right: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1;}
section.sec04 > div .txt p {font-size: 34px; font-weight: 600; font-family: 'SUIT-Bold'; color: #fff; margin-top: 25px; margin-bottom: 25px;}
section.sec04 > div .txt span {display: flex; align-items: center;}
section.sec04 > div .txt span em {font-size: 18px; font-weight: 500; font-family: 'SUIT-Medium'; color: #fff; opacity: 0.6;}
section.sec04 > div .txt span a {display:flex; align-items: center; display: none;}
section.sec04 > div .txt span a b{font-size: 20px; font-weight: 600; font-family: 'SUIT-Bold'; color: #fff; margin-left: 20px;}
section.sec04 > div .txt span a img {vertical-align: middle; margin-left: 5px;}
section.sec04 > div:hover .txt span a {display: flex;}
section.sec04 > div:hover:after {content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #536a57c7;}

/* 모바일 하단 스티키 메뉴 24.03.21 */
#mobile-bottom {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 11;
}

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

    section.sec03 .mapbox {width: 60%;}
    section.sec03 .spot {width: 40%;}
  
 
    .rightInfo {width: calc(100% - 270px);}
    section.sec03 .spot .detail {height: auto;}
    section.sec03 .spot .infoDirection p span {width: 50%;}
    section.sec03 .spot .infoDirection p span em {margin-left: 0; padding-left: 5px; font-size: 16px; width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    section.sec03 .spot .infoDirection p span img {width: 20px;}
    section.sec03 .spot .infoDirection p {padding-bottom: 10px; margin-bottom: 10px;}
}

@media screen and (max-width:1500px) {
    section.sec03 {height:768px}
    section.sec03 .spot .infoName b {font-size: 22px;margin-bottom: 5px;}
    section.sec03 .spot .infoName span {font-size: 16px;}
    section.sec03 {min-height: 640px;}
    section.sec03 .spot .detailWrap {min-height: 480px;}
    section.sec03 .spot .detail ul li {flex-direction: column;}
    section.sec03 .spot .detail .thumb{width: 100%; margin-right: 0;margin-bottom: 25px; height:auto; padding-bottom: 49.5% !important;}
    .rightInfo {width: 100%;}
    section.sec03 .spot .detailWrap {max-height:580px}
}


@media screen and (max-width:1460px){
    .inner {width: 95%; margin:0 auto;}
    section.sec03 {min-height: 480px;}
    section.sec03 .spot .detailWrap {min-height: 420px;}
 
}

@media screen and (max-width:1280px){
    section.sec01 .boxFlx {flex-direction: column;}
    section.sec01 .boxFlx .txt {width: 100%; margin-bottom: 45px;}
    section.sec01 .boxFlx .txt br {display: none;}
    section.sec01 .boxFlx .txt h5 {margin-bottom: 25px;}
    section.sec01 .boxFlx .img {width: 100%;}


    section.sec02 .boxbg {min-height: 350px;}
    section.sec02 .inner .txtbox {transform: translateY(0);}
    section.sec02 .inner .txtbox h5 {font-size: 26px; margin-bottom: 25px;}
    section.sec02 .inner .txtbox h5 b {font-size: 26px;}
    section.sec02 .inner .txtbox p {font-size: 16px;;}
    section.sec02 .inner .txtbox a {margin-top: 25px; font-size: 18px;}

    section.sec03 {min-height: 360px;}
    section.sec03 .spot .detailWrap {min-height: 300px;}

    section.sec04 > div .txt img {height: 60px;}
    section.sec04 > div .txt span a img {height: 10px !important}
    section.sec04 > div .txt span a b {font-size: 18px;}
    section.sec04 > div .txt span em {font-size: 16px;}
    section.sec04 > div .txt p {font-size: 28px; margin-top: 10px; margin-bottom: 10px;}
}

@media screen and (max-width:1024px) {
    section.sec02 .boxbg {width: 90%;}

    section.sec03 .spot {padding: 30px; min-height: 280px;}
    section.sec03 .spot .detailWrap {padding-right: 20px; min-height: 220px;}

    section.sec04 > div .txt span {flex-direction: column;}
    section.sec04 > div .txt span a {margin-top: 10px;}
    section.sec04 > div .txt span a b {font-size: 14px;}
    section.sec04 > div .txt p {font-size: 24px;}
}

@media screen and (max-width:768px) {
    section.sec01 {padding:60px 0}
    section.sec01 .boxFlx .txt h5 {font-size: 32px; margin-bottom: 15px;}
    section.sec01 .boxFlx .txt p {font-size: 16px;}
    

    section.sec01 .boxFlx .img ul li .txtarea span {font-size: 16px;}
    section.sec02 .inner .txtbox h5 {font-size: 20px;}
    section.sec02 .inner .txtbox h5 b {font-size: 20px;}
    section.sec02 .inner .txtbox p {font-size: 14px;}
    section.sec02 .inner .txtbox a {font-size: 16px;}
    section.sec02 .boxbg {min-height: 310px;}


    section.sec03 {flex-direction: column; min-height: auto; height: auto;}
    section.sec03 .mapbox {width: 100%; height:70vh}
    section.sec03 .spot {width: 100%;}
    section.sec03 .spot .detail ul li {flex-direction: row;}
    section.sec03 .spot .detail .thumb {padding-bottom: 27.5% !important; width: calc((100% - 30px) / 2); margin-right: 30px;}
    section.sec03 .spot .detail .thumb{margin-bottom: 0;}
    .rightInfo {width: calc((100% - 30px) / 2)}

    section.sec04 {flex-direction: column; min-height:auto; height:auto}
    section.sec04 > div {width: 100%;}
    section.sec04 > div {height: 300px;}

    
}


@media screen and (max-width:640px){
    section.sec01 .boxFlx .img ul {flex-direction: column;}
    section.sec01 .boxFlx .img ul li {width: 100%; margin-right: 0; margin-bottom: 35px;}
    section.sec01 .boxFlx .img ul li:last-of-type {margin-bottom: 0;}

    section.sec02 {margin-bottom: 150px;}
    section.sec02 .boxbg {width: 95%; min-height: 290px;}
    section.sec02 {background-size: cover; height:540px ;}
    section.sec02 .boxbg {width: 100%; border-radius: 0; display: none;}
    section.sec02 .inner .txtbox {width: 100%; background-color: #fff;
    padding:50px; transform: translateY(100px);}
    section.sec02 .inner .txtbox br {display: none;}
    
    section.sec03 .spot .detail ul li {flex-direction: column;}
    section.sec03 .spot .detail .thumb{padding-bottom: 49.5% !important; width: 100%; margin-right: 0;  margin-bottom: 20px;}
    .rightInfo {width: 100%;}
}

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


}

@media screen and (max-width:480px) {
    section.sec01 .boxFlx .txt h5 {font-size: 24px;}
    section.sec01 .boxFlx .txt p {font-size: 14px;}

    section.sec02 .inner .txtbox{padding: 25px;}

    section.sec03 .spot {padding: 30px 20px;}
    section.sec03 .spot .filter {padding-bottom: 15px; margin-bottom: 15px;}
    section.sec03 .spot .detail:hover .over span{font-size: 14px;}
    
    /* 모바일 하단 스티키 메뉴 24.03.21 */
    #mobile-bottom {
        display: flex;
    }
    #mobile-bottom .btn {
        border-radius: 0;
        display: grid;
        place-items: center;
        height: 100%;
        font-weight: 600;
        font-size: 20px;
        background-color: #fff;
        color: #536a57;
        flex-grow: 1;
        margin: 0;
    }
    #mobile-bottom .btn.btn-primary {
        background-color: #536a57;
        color: #fff;
    }
}