body{ background: #fff; }
.tablet{ display: none; }
.overview{ padding: 180px 0; }

.overview .cont{ max-width: 1440px; margin: 0 auto; }
.overview .flxbx{ display: flex; }

.overview .cont .tit_area{ margin-bottom: 0; }

.overview .cont.n1{ padding-bottom: 166px; }
.overview .cont.n1>.flxbx{ justify-content: space-between; align-items: flex-start; padding-top: 240px; }
.overview .cont.n1 .lbx{
    width: 42.5%; /* 544/1280*100 */  
    max-width: 500px;
} 
.overview .cont.n1 .lbx>div{ 
    width: 100%;  position: relative; 
}
.overview .cont.n1 .lbx>div::before{ display: block; content: ''; padding-top: calc(769/544*100%); }
.overview .cont.n1 .lbx>div img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}
.overview .cont.n1 .rbx .desc{ align-items: center; gap: 19px; }
.overview .cont.n1 .rbx .desc p{ font-size: 30px; font-weight: 700; line-height: calc(80/30); color: #ed558b; }
.overview .cont.n1 .rbx .tit{ font-size: 50px; font-weight: 700; line-height: calc(90/30); }
.overview .cont.n1 .rbx .datebx{ padding-bottom: 70px; }
.overview .cont.n1 .rbx .date{ align-items: center; gap: 20px; }
.overview .cont.n1 .rbx .date p{ font-size: 30px; font-weight: 600; line-height: calc(40/30); font-variant-numeric: tabular-nums; }
.overview .cont.n1 .rbx .date .line{ width: 2px; height: 21px; background: #ee88a6; }
.overview .cont.n1 .location{ 
    margin-bottom: 87px;
    border-top: 1px solid #f6c3d2;
    border-bottom: 1px solid #f6c3d2;
 }
.overview .cont.n1 .location .bx{ flex: 1; padding: 30px 20px; }
.overview .cont.n1 .location .bx + .bx{
    border-left: 1px solid #f6c3d2;
}
.overview .cont.n1 .location .bx p{ font-size: 26px; font-weight: 500; line-height: calc(40/26); text-align: center; }
.overview .cont.n1 .detail .bx .badge{ 
    border: 1px solid #ed558b; padding: 15px 0; width: 85px; margin-bottom: 33px;
    font-size: 24px; color: #ed558b; text-align: center; font-weight: 500;
 }
.overview .cont.n1 .detail .bx._1{ padding-bottom: 110px; }
.overview .cont.n1 .detail .bx._1 .flxbx{ gap: 40px; flex-direction: column; }
.overview .cont.n1 .detail .bx span{ font-size: 22px; font-weight: 600; color: #ed558b; width: 80px; }
.overview .cont.n1 .detail .bx p{ font-size: 22px; line-height: calc(28/20); }
.overview .cont.n1 .detail .bx._2 ul{ display: flex; flex-direction: column; gap: 50px; }
.overview .cont.n1 .detail .bx._2 ul li{ gap: 24px; }
.overview .cont.n1 .detail .bx._2 ul li .flxbx{ flex-direction: column; gap: 28px; }

.overview .cont.n2 .tit_area{ margin-bottom: 40px; }
.overview .cont.n2 .tit_area h3{ font-size: 40px; text-align: center; line-height: 1.3;}
.overview .cont.n2 .tit_area h3 em{ color: #ed558b; }
.overview .cont.n2 .img_area{ position: relative; padding-bottom: 51px; }
.overview .cont.n2 .img_area .img{ max-width: 1074px; width: 100%; position: relative; overflow: hidden; border-radius: 36px; margin: 0 auto; }
.overview .cont.n2 .img_area .img::before{ display: block; content: ''; padding-top: calc(583/1073*100%) }
.overview .cont.n2 .img_area .img::after{ content: ''; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); }
.overview .cont.n2 .img_area .img img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* img_area 오브젝트 */
.overview .cont.n2 .obj{ 
    position: absolute;
    width: 136px; padding: 16px 0; border-radius: 25px;
    color: #fff; font-size: 22px; font-weight: 700; text-align: center;
 }
.overview .cont.n2 .obj._1{ background: #1b75b9; top: 12%; left: 15%; }
.overview .cont.n2 .obj._2{ background: #199746; bottom: 15%; left: 10%; }
.overview .cont.n2 .obj._3{ background: #ee88a6; top: 25%; left: 30%; }
.overview .cont.n2 .obj._4{ background: #00a34f; top: 40%; right: 28%; }
.overview .cont.n2 .obj._5{ background: #1b75b9; top: 20%; right: 8%;}
.overview .cont.n2 .obj._6{ background: #ee88a6; bottom: 20%; right: 8%;}
.overview .cont.n2 .txt_area{ text-align: center; }
.overview .cont.n2 .txt_area .desc{ align-items: center; justify-content: center; padding-bottom: 33px; gap: 6px; }
.overview .cont.n2 .txt_area .desc span{ display: block; width: 19px; }
.overview .cont.n2 .txt_area .desc p{ font-size: 20px; font-weight: 700; color: #ed558b; line-height: calc(24/20); }
.overview .cont.n2 .txt_area>p{ font-size: 20px; line-height: calc(32/20); color: rgba(0, 0, 0, 0.8); }

.overview .cont.n3{ padding-top: 160px; }
.overview .cont.n3 .tit_area{ margin-bottom: 80px; }
.overview .cont.n3 .tit_area h3{ font-size: 40px; }
.overview .cont.n3 .tabs{ margin-bottom: 80px; justify-content: center; gap: 10px; }
.overview .cont.n3 .tabs .tab{ font-size: 18px; border: 1px solid #000; text-align: center; width: 157px; padding: 16px 0; cursor: pointer; }
.overview .cont.n3 .tabs .tab.active{ background: #ed558b;  color: #fff; border: 1px solid #ed558b;}

/* .overview .cont.n3 .map_area{ margin-bottom: 50px; } */
.overview .cont.n3 .tab_cont{ display: none; }
.overview .cont.n3 .tab_cont.active{ display: block; }

.overview .cont.n3 .tab_cont.n1{ max-width: 1440px; }
.overview .cont.n3 .tab_cont.n1 .map_area{ width: 1440px; position: relative; }
.overview .cont.n3 .tab_cont.n1 .map_area::before{ display: block; content: ''; padding-bottom: calc(488/1440*100%); }
.overview .cont.n3 .tab_cont.n1 .map_area img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.overview .cont.n3 .tab_cont.n1 ul {
    max-width: 1440px; gap: 18px; background: #f7f7f7;
    padding: 50px 40px; justify-content: center; box-sizing: border-box;
}
.overview .cont.n3 .tab_cont.n1 ul {
    display: flex;
    gap: 18px;
    justify-content: center;
    padding: 50px 40px;
    background: #f7f7f7;
}
.overview .cont.n3 .tab_cont.n1 ul li {
    width: 312px;
}
.overview .cont.n3 .tab_cont.n1 ul li .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
}
.overview .cont.n3 .tab_cont.n1 ul li .spot_wrap {
    position: absolute; top: 0; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center;
}
.overview .cont.n3 .tab_cont.n1 ul li .spot_wrap span {
    display: block;
}
.overview .cont.n3 .tab_cont.n1 ul li .spot_name {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.overview .cont.n3 .tab_cont.n1 ul li .desc {
    border-radius: 25px;  border: 1px solid #f8a233;  background: #fff;
    font-size: 18px; line-height: calc(28/18);  text-align: center;
    padding: 40px 0 20px; box-sizing: border-box;
    width: 100%; height: 120px;
    display: flex;  align-items: center; justify-content: center;
}
.overview .cont.n3 .tab_cont.n1 ul li .desc._3 { border-color: #00a34f; }
.overview .cont.n3 .tab_cont.n1 ul li .desc._4 { border-color: #1b75b9; }

.overview .cont.n3 .tab_cont.n2{ max-width: 1440px; }
.overview .cont.n3 .tab_cont.n2 .bx + .bx{ margin-top: 153px; }
.overview .cont.n3 .tab_cont.n2 .date{ align-items: center; gap: 11px; margin-bottom: 10px; }
.overview .cont.n3 .tab_cont.n2 .date .line{ width: 8px; height: 39px; background: #ed558b; }
.overview .cont.n3 .tab_cont.n2 .date p{ font-size: 18px; font-weight: 600;  }
.overview .cont.n3 .tab_cont.n2 .layout_area{ max-width: 1440px; width: 100%;  border: 1px solid #000; }
.overview .cont.n3 .tab_cont.n2 .layout_area .img{ 
    max-width: 1439px; width: 100%;  position: relative;
    border-bottom: 1px solid #000; 
}
.overview .cont.n3 .tab_cont.n2 .layout_area .img::before{
    display: block; content: ''; padding-bottom: calc(500/1439*100%);
}
.overview .cont.n3 .tab_cont.n2 .layout_area .img img{ 
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; top: 0; left: 0;
 }
.overview .cont.n3 .tab_cont.n2 .layout_area .desc{ background: #f7f7f7; padding: 44px 0 37px; }
.overview .cont.n3 .tab_cont.n2 .layout_area .desc ul{ width: 100%; display: flex; justify-content: center; }
.overview .cont.n3 .tab_cont.n2 .layout_area .desc ul li{ 
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; 
    padding: 0 94px; position: relative;
}
.overview .cont.n3 .tab_cont.n2 .layout_area .desc ul li + li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 80px;
    background: #c6c6c6;
}
.overview .cont.n3 .tab_cont.n2 .layout_area .desc ul._2 li{ padding: 0 16px; }
.overview .cont.n3 .tab_cont.n2 .layout_area .desc ul li p{ font-size: 16px; text-align: center; color: rgba(0, 0, 0, 0.9); }
.overview .cont.n3 .tab_cont.n2 .layout_area .desc ul li div{ 
    font-size: 16px; color: #fff; font-weight: 600; text-align: center;
    width: 13px;  padding: 6px 8px; border: 2px solid #ed558b;
    display: flex; justify-content: center; align-items: center;
}

/* 원 */
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li .circle{ border-radius: 50%; }

/* div 색상 */
.overview .cont.n3 .tab_cont.n2 .bx.n1 .layout_area .desc ul li ._1{ background: #1b75b9; }
.overview .cont.n3 .tab_cont.n2 .bx.n1 .layout_area .desc ul li ._2{ background: #00a34f; }
.overview .cont.n3 .tab_cont.n2 .bx.n1 .layout_area .desc ul li ._3{ background: #ee88a6; }

.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._1{ background: #f2b376; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._2{ background: #8db5d3; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._3{ background: #1b75b9; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._4{ background: #00a34f; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._5{ background: #ee88a6; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._6{ background: #bfbfbf; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._7{ background: #7030a0; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._8{ background: #3cf4f4; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._9{ background: #00a34f; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._10{ background: #d12f2d; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._11{ background: #000000; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._12{ background: #bff539; }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._13 {
    background: repeating-linear-gradient(
        45deg,
        #1b75b9 0px,
        #1b75b9 2px,
        #fff    2px,
        #fff    4px
    );
    color: #1b75b9;
}
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._14{ 
        background: repeating-linear-gradient(
        45deg,
        #d12f2d 0px,
        #d12f2d 2px,
        #fff    2px,
        #fff    4px
    );
    color: #d12f2d;
 }
.overview .cont.n3 .tab_cont.n2 .bx.n2 .layout_area .desc ul li ._15{ background: #f8a233; }

@media screen and (max-width: 1500px){
    .overview .cont.n1 .rbx .desc span{ display: block; width: 22px; }
    .overview .cont.n1 .rbx .desc p{ font-size: 24px; line-height: 1; }
    .overview .cont.n1 .rbx .tit{ font-size: clamp(40px, 46/1500*100vw, 46px); }
    .overview .cont.n1 .rbx .date p{ font-size: clamp(22px, 24/1500*100vw, 24px); }
    .overview .cont.n1 .location .bx p{ font-size: clamp(20px, 22/1500*100vw, 22px); }

    .overview .cont.n3 .tab_cont.n1 .map_area{ width: 100%; }
    .overview .cont.n3 .tab_cont.n2 .layout_area .desc ul._2{
        flex-wrap: wrap; justify-content: flex-start; gap: 30px 0;
    }
}
@media screen and (max-width: 1280px){
    .overview .cont.n1>.flxbx{ padding-top: 140px; }
    /* .overview .cont.n1 .lbx{ width: 34%; } */
    .overview .cont.n1 .rbx .datebx{ padding-bottom: 42px; }
    .overview .cont.n1 .location{ margin-bottom: 60px; }
    .overview .cont.n1 .location .bx{ padding: 20px; }
    .overview .cont.n1 .detail .bx._1{ padding-bottom: 40px; }
    .overview .cont.n1 .detail .bx .badge{ font-size: 20px; padding: 12px 0; width: 76px; margin-bottom: 22px; }
    .overview .cont.n1 .detail .bx span{ font-size: 18px; }
    .overview .cont.n1 .detail .bx p{ font-size: 18px; }
    .overview .cont.n1 .detail .bx._2 ul li .flxbx{ gap: 24px; }

    .overview .cont.n3 .tab_cont.n1 ul li .spot_name{ font-size: 16px; }
    .overview .cont.n3 .tab_cont.n1 ul li .desc{ font-size: 16px; }

    .overview .cont.n3 .tab_cont.n2 .layout_area .desc ul li{ padding: 0 80px; }

    /* .overview .cont.n3 .tab_cont.n1 ul li span{ left: 15%; }
    .overview .cont.n3 .tab_cont.n1 ul li span::before{ font-size: 18px; }
    .overview .cont.n3 .tab_cont.n1 ul li div{ font-size: 16px; } */

}

@media screen and (max-width: 1024px){
    .tablet{ display: block; }
    .overview .cont.n1>.flxbx{
        padding-top: 80px;
        /* flex-direction: column;  */
        /* align-items: center; */
        gap: 40px;
    }
    .overview .cont.n1 .lbx{ width: 34%; }
    .overview .cont.n1 .rbx .desc span{ width: 19px; }
    .overview .cont.n1 .rbx .desc p{ font-size: 20px; }
    .overview .cont.n1 .rbx .tit{ font-size: 34px; }
    .overview .cont.n1 .rbx .date p,
    .overview .cont.n1 .detail .bx p{ font-size: clamp(16px, 18/1024*100vw, 18px); }
    .overview .cont.n1 .rbx .date .line{ height: 18px; }
    .overview .cont.n1 .location .bx p{ font-size: clamp(16px, 18/1024*100vw, 18px); }
    .overview .cont.n1 .detail .bx._1{ padding-bottom: 40px; }

    .overview .cont.n2 .tit_area h3{ font-size: 32px; }
    .overview .cont.n2 .txt_area .desc span{ width: 17px; }
    .overview .cont.n2 .txt_area .desc p{ font-size: 18px; }
    .overview .cont.n2 .txt_area>p{ font-size: 18px; }
    .overview .cont.n2 .obj{ 
        font-size: 18px;
        padding: 12px 0; width: 120px;
     }

     /* obj 위치 */
     .overview .cont.n2 .obj._1{ top: 7%; left: -2%; }
     .overview .cont.n2 .obj._2{ left: -2%; bottom: 22%; }
     .overview .cont.n2 .obj._3{ top: 22%; left: 22%; }
     .overview .cont.n2 .obj._4{ right: 20%; }
     .overview .cont.n2 .obj._5{ right: -2.5%; }
     .overview .cont.n2 .obj._6{ right: -2%; bottom: 24%; }

    .overview .cont.n3 .tit_area h3{ font-size: 32px; }
    .overview .cont.n3 .tabs .tab{ width: 142px; }
    .overview .cont.n3 .tab_cont.n1 ul li .spot_wrap span{ width: 120px; }
    .overview .cont.n3 .tab_cont.n1 ul li .desc{ font-size: 15px; }
    .overview .cont.n3 .tab_cont.n1 ul li .desc br{ display: none; }

    .overview .cont.n3 .tab_cont.n2 .layout_area .desc ul li p{ font-size: clamp(14px, 16/1024*10vw, 16px); } 
}

@media (max-width: 820px) {
    .tablet{ display: none; }
    .overview{padding: 140px 0;}
    .overview .cont.n1{ padding-bottom: 120px; }
    .overview .cont.n1>.flxbx{ flex-direction: column; align-items: center; }
    .overview .cont.n1 .lbx{ width: 100%; }
    .overview .cont.n1 .rbx{ width: 100%; }
    .overview .cont.n1 .rbx .desc{ gap: 8px; }
    .overview .cont.n1 .rbx .desc span{ width: 15px; }
    .overview .cont.n1 .rbx .desc p,
    .overview .cont.n1 .rbx .date p{ font-size: clamp(14px, 16/820*100vw, 16px); }
    .overview .cont.n1 .rbx .tit{ font-size: 26px; line-height: 1; margin: 20px 0; }
    .overview .cont.n1 .rbx .date .line{ height: 12px; }
    .overview .cont.n1 .location .bx p{ font-size: 15px; }
    .overview .cont.n1 .detail .bx .badge{ 
        /* font-size: 18px;  */
        font-size: clamp(14px, 16/820*100vw, 16px);
        width: 68px; 
    }
    /* .overview .cont.n1 .detail .bx p{ font-size: 16px; } */
    .overview .cont.n1 .detail .bx span,
    .overview .cont.n1 .detail .bx p,
    .overview .cont.n1 .detail .bx .badge{
        font-size: clamp(14px, 16/820*100vw, 16px);
    }
    .overview .cont.n1 .detail .bx._1 .flxbx{ flex-direction: row;}
    .overview .cont.n1 .detail .bx._1.fixStyle > .flxbx > div{ width: 50%; }
    .overview .cont.n1 .detail .bx._1{ padding-bottom: 26px; }
    .overview .cont.n1 .detail .bx._2 ul li .flxbx{ gap: 20px; }

    .overview .cont.n2 .tit_area h3,
    .overview .cont.n3 .tit_area h3{ font-size: 26px; }

    .overview .cont.n2 .img_area{ padding-bottom: 34px; }
    .overview .cont.n2 .obj_wrap{ max-width: 420px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; }
    .overview .cont.n2 .obj{ font-size: 14px; width: 78px; padding: 10px 0; position: static; }


    .overview .cont.n2 .txt_area .desc{ padding-bottom: 18px; }
    .overview .cont.n2 .txt_area .desc span{ width: 15px; }
    .overview .cont.n2 .txt_area .desc p{ font-size: 16px; word-break: keep-all; }
    .overview .cont.n2 .txt_area>p br{ display: none; }
    .overview .cont.n2 .txt_area>p{ font-size: 16px; }

    .overview .cont.n3{ padding-top: 120px; }
    .overview .cont.n3 .tit_area{ margin-bottom: 42px; }
    .overview .cont.n3 .tabs{ margin-bottom: 60px; }
    .overview .cont.n3 .tabs .tab{ font-size: 16px; width: 100px; padding: 14px 0; }

    .overview .cont.n3 .tab_cont.n1{ 
        overflow-x: auto; -webkit-overflow-scrolling: touch; overflow-y: hidden;
        width: 100%; padding: 0;
     }
    .overview .cont.n3 .tab_cont .map_area{ width: 1024px !important; overflow-x: auto; }
    .overview .cont.n3 .tab_cont .map_area img{ width: 100%; height: 100%; }
    .overview .cont.n3 .tab_cont.n1 ul{ 
        flex-wrap: nowrap; gap: 18px; display: flex; justify-content: flex-start; 
        width: 1024px;
    }
    .overview .cont.n3 .tab_cont.n1 ul li .desc br{ display: block; }
    .overview .cont.n3 .tab_cont.n2{
        overflow-x: auto; -webkit-overflow-scrolling: touch; overflow-y: hidden;
        width: 100%; padding: 0;
    }
    .overview .cont.n3 .tab_cont.n2 .bx{
        /* width: 1440px;  */
        width: 1024px;
        flex-shrink: 0;
    }
    .overview .cont.n3 .tab_cont.n2 .bx + .bx{ margin-top: 120px; }
    .overview .cont.n3 .tab_cont.n2 .layout_area .desc ul._2{
        /* flex-wrap: nowrap; */
        /* width: 1440px; */
        width: 1024px;
    }
}
@media screen and (max-width: 500px){
    .overview .cont.n1 .rbx .date p{ font-size: 14px; }
    .overview .cont.n2 .obj_wrap{ margin: 18px auto 0; }
    .overview .cont.n1 .detail .bx._2 ul li{ flex-direction: column; gap: 20px; }
    .overview .cont.n3 .tab_cont .map_area{ width: 820px !important; overflow-x: auto; }
    .overview .cont.n3 .tab_cont.n1 ul {width: 820px;}
    .overview .cont.n3 .tab_cont.n1 ul li .desc {font-size: clamp(14px, 15/500*100vw, 15px);}
    .overview .cont.n3 .tab_cont.n2 .bx {width: 820px !important;}
    .overview .cont.n3 .tab_cont.n2 .layout_area .desc ul._2 {width: 100%;}
}
@media screen and (max-width: 360px){
    .overview .cont.n1 .rbx .datebx {display: flex; flex-direction: column; text-align: left; align-items: flex-start; gap: 10px;}
    .overview .cont.n1 .rbx .date {flex-direction: column; align-items: flex-start; gap: 0px; position: relative;}
    .overview .cont.n1 .rbx .date .line {display: none;}

    .overview .cont.n1 .location {flex-direction: column;}
    .overview .cont.n1 .location .bx + .bx {border-left: none; border-top: 1px solid #f6c3d2;}

    .overview .cont.n1 .detail .bx._1 .flxbx{ flex-direction: column; gap: 26px; }

    .overview .cont.n2 .txt_area>p{ font-size: 14px; }
}