body, html {
    overflow-x: hidden;
}

.inner {
    width: 1400px;
    margin: 0 auto;
}

#footer {
    z-index: 4;
    position: relative
}


/* 메인비주얼 */
.main_visual {
    width: 100%;
    position: relative;
    z-index: 3;
    height: 100vh;
    background: #f6f7f8;
}

.main_visual .main_slider {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.main_visual .main_slider .slide_box {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #f6f7f8;
}

.main_visual .main_slider .slide_box > div {
    overflow: hidden;
    height: inherit;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 3;
    overflow: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.main_visual .main_slider .slide_box > div {
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

.main_visual .main_slider .slide_box .main_img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 100%;
    height: 100%;
    -moz-transition: all 8s;
    -webkit-transition: all 8s;
    -o-transition: all 8s;
    -ms-transition: all 8s;
    transition: all 8s;
}

.main_visual .main_slider .slide_box .main_img #main-video {
    display: block;
    min-height: 100vh;
    min-width: 100vw;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.main_visual .main_slider .slide_box .main_img img {
    display: block;
    min-width: 100%;
    max-width: auto;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    top: 50%;
    transition: transform 5s;
}

.main_visual .main_slider .slide_box div.on .main_img img {
    transform: translate(-50%, -50%) scale(1);
}

.main_visual .main_slider .slide_box .in_obj {
    text-align: left;
    top: 0%;
    width: 100%;
    z-index: 9
}

.main_visual .main_slider .slide_box .in_obj:after {
    content: '';
    display: block
}

.main_visual .main_slider .slide_box .in_obj .wrap_t {
    margin-bottom: 25px;
}

.main_visual .main_slider .slide_box div div.wrap_tit {
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
    transition-delay: 0.6s;
}

.main_visual .main_slider .slide_box div.on div.wrap_tit {
    opacity: 1
}


.main_visual .main_slider .slide_box > div.on {
    z-index: 5;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}


.main_visual .main_slider .slide_box .in_inner .in_obj strong {
    display: block;
    display: flex;
}

.main_visual .main_slider .slide_box .in_inner .in_obj strong span {
    display: block;
    font-size: 70px;
    font-weight: 600;
    color: #fff;
    line-height: 100px;
    opacity: 0;
    text-transform: uppercase
}


.main_visual .vis_title .in_inner .in_obj strong {
    display: block;
    font-size: 70px;
    font-weight: 600;
    color: #fff;
    line-height: 100px;
    opacity: 0;;
    transform: translateY(80px)
}

.main_visual.on .vis_title .in_inner .in_obj strong {
    display: block;
    transition: 1.2s;
    transition-delay: 0.3s;
    transform: translateY(0);
    opacity: 1
}

.main_visual.on .vis_title .in_inner .in_obj strong:nth-child(2) {
    transition-delay: 0.7s
}


.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong span {
    animation: fade .5s forwards;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(2) {
    animation-delay: 0.05s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(3) {
    animation-delay: 0.1s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(4) {
    animation-delay: 0.15s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(5) {
    animation-delay: 0.2s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(6) {
    animation-delay: 0.25s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(7) {
    animation-delay: 0.3s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(8) {
    animation-delay: 0.35s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(9) {
    animation-delay: 0.4s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(10) {
    animation-delay: 0.45s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(11) {
    animation-delay: 0.5s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(12) {
    animation-delay: 0.55s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(13) {
    animation-delay: 0.6s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(14) {
    animation-delay: 0.65s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(15) {
    animation-delay: 0.7s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(16) {
    animation-delay: 0.75s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(17) {
    animation-delay: 0.8s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(18) {
    animation-delay: 0.85s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(19) {
    animation-delay: 0.9s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(20) {
    animation-delay: 0.95s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(21) {
    animation-delay: 1s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(22) {
    animation-delay: 1.05s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(23) {
    animation-delay: 1.1s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(1) span:nth-child(24) {
    animation-delay: 1.15s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(1) {
    animation-delay: 1.2s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(2) {
    animation-delay: 1.25s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(3) {
    animation-delay: 1.3s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(4) {
    animation-delay: 1.35s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(5) {
    animation-delay: 1.4s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(6) {
    animation-delay: 1.45s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(7) {
    animation-delay: 1.5s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(8) {
    animation-delay: 1.55s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(9) {
    animation-delay: 1.6s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(10) {
    animation-delay: 1.65s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(11) {
    animation-delay: 1.7s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(12) {
    animation-delay: 1.75s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(13) {
    animation-delay: 1.8s;
}

.main_visual .main_slider .slide_box > div.on .in_inner .in_obj strong:nth-child(2) span:nth-child(14) {
    animation-delay: 1.85s;
}

@keyframes fade {
    to {
        opacity: 1;
    }
}


.m_tit {
    margin-bottom: 55px;
}

.m_tit strong {
    font-size: 50px;
    color: #fff;
    display: block;
    line-height: 1;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.m_tit strong:before {
    content: '';
    display: inline-block;
    height: 37px;
    width: 4px;
    background: #880505;
    margin-right: 45px;
}

.m_tit p {
    padding-left: 52px;
    font-size: 30px;
    font-weight: 300;
    color: #281212;
    letter-spacing: -0.5px;
    margin-top: 15px;
}


/*효과*/
.main_visual .in_inner {
    width: 1560px;
    margin: 0 auto;
    max-width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
}

.main_visual .box.on .dim {
    opacity: 0.1;
    transition: 1.5s
}

.main_visual .box1.on .dim {
    opacity: 0.3
}

.main_visual .txt, .main_visual .txt2 {
    overflow: hidden
}

.main_visual .txt p {
    display: block;
    transform: translateY(100%);
}

.main_visual .box.on .txt p {
    transform: translateY(0%);
    transition: transform 1.4s;
    transition-delay: 1.2s
}

.main_visual .txt2 span {
    display: block;
    transform: translateY(100%);
}

.main_visual .box.on .txt2 span {
    transform: translateY(0%);
    transition: transform 1.4s;
    transition-delay: 2.7s
}

.main_visual {
    position: relative
}

.main_visual .scroll {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11
}

.m_tit strong {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s, transform 1s;
}

.on .m_tit strong {
    opacity: 1;
    transform: translateY(0);
}

.m_tit p {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s, transform 1s;
    transition-delay: 0.3s
}

.on .m_tit p {
    opacity: 1;
    transform: translateY(0);
}


.inner {
    width: 1560px;
    margin: 0 auto;
}


/* con01 */
#main .con_w {
    height: 100vh;
    width: 100%;
}

#main .con01 {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}

#main .con01 .bg img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    min-width: 100%;
}

#main .con01 .bg img {
    transform: translate(-50%, -50%) scale(1.3);
    transition: transform 3s, opacity 1s;
    opacity: 0;
}

#main .con01.on .bg img {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

#main .con01 .txt {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#main .con01 .txt strong {
    display: block;
    font-size: 100px;
    color: #2B2B2B;
    line-height: 1;
}

#main .con01 .txt p {
    display: block;
    font-size: 20px;
    line-height: 1.7;
    color: #4E4E4E;
    font-weight: 400;
}

#main .con01 .txt p span {
    font-weight: 600;
}

#main .con01 .txt p {
    transition: transform 1s, opacity 1s;
    transform: translateX(50px);
    opacity: 0;
}

#main .con01.on .txt p {
    transform: translateX(0);
    opacity: 1;
}

#main .con01.on .txt p:nth-child(2) {
    transition-delay: .5s;
}

#main .con01.on .txt p:nth-child(3) {
    transition-delay: .8s;
}

#main .con01.on .txt p:nth-child(4) {
    transition-delay: 1.1s;
}

#main .con01 .bg .over {
    opacity: 0;
    transition: 1s;
    transition-delay: 2.5s
}

#main .con01.on .bg .over {
    opacity: 1
}

#main .con02 {
    position: relative;
    overflow: hidden;
}

#main .con02 .bg video {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-70%, -46%) rotate(180deg);
    min-width: 100%;
    height: 110vh;
}

#main .con02 .bg img {
    transform: translate(-50%, -50%) scale(1.3);
    transition: transform 3s, opacity 1s;
    opacity: 0;
}

#main .con02.on .bg img {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

#main .con02 .bg:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
}

#main .con02 .txt {
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translate(0, -50%);
}

#main .con02 .txt strong {
    display: block;
    font-size: 120px;
    font-weight: 600;
    color: #2B2B2B;
    margin-bottom: 20px;
}

#main .con02 .txt strong i {
    font-size: 45px;
    vertical-align: top;
    position: relative;
    top: 20px;
    left: -10px;
}

#main .con02 .txt p {
    font-size: 20px;
    line-height: 1.7;
    color: #4E4E4E;
    font-weight: 400;
}

#main .con02 .txt p b {
    font-weight: 600;
}

#main .con02 .txt p span {
    font-weight: 500;
    color: #3DAE2B;
}

#main .con02 .txt strong {
    transition: transform 1s, opacity 1s;
    transform: translateX(50px);
    opacity: 0;
    transition-delay: .7s;
}

#main .con02.on .txt strong {
    transform: translateX(0);
    opacity: 1;
}

#main .con02 .txt strong img {
    height: 80px;
}

#main .con02 .txt p {
    transition: transform 1s, opacity 1s;
    transform: translateX(50px);
    opacity: 0;
    transition-delay: 1s;
}

#main .con02.on .txt p {
    transform: translateX(0);
    opacity: 1;
}

#main .con03 {
    position: relative;
    overflow: hidden;
    height: 970px;
    cursor: pointer;
}

#main .con03 .bg_base {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#main .con03 .list ul {
    display: flex;
    position: relative;
    z-index: 2;
    height: 100%
}

#main .con03 .list ul li {
    width: 16.666666%;
    position: relative;
    position: relative
}

#main .con03 .list ul li:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(28, 19, 17, 0.5);
    transition: 1s;
    height: 0
}

#main .con03 .list ul li:nth-child(1):before {
    background: rgba(0, 176, 165, 0.5);
}

#main .con03 .list ul li:nth-child(2):before {
    background: rgba(217, 157, 6, 0.5);
}

#main .con03 .list ul li:nth-child(3):before {
    background: rgba(171, 77, 83, 0.5);
}

#main .con03 .list ul li:nth-child(4):before {
    background: rgba(0, 100, 232, 0.5);
}

#main .con03 .list ul li:nth-child(5):before {
    background: rgba(0, 176, 165, 0.5);
}

#main .con03 .list ul li:nth-child(6):before {
    background: rgba(237, 202, 196, 0.5);
}

#main .con03 .list ul li:hover:before {
    height: 100%
}

#main .con03 .list ul li .p_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#main .con03 .bg ul li {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 1.2s
}

#main .con03 .bg ul li.on {
    opacity: 1
}

/*
#main .con03{ display: flex; overflow: hidden; }
#main .con03 > div{ width: 20%; position: relative; overflow: hidden; }
#main .con03 > div > a{ transform: translateY(60px); opacity: 0; transition: transform 1s, opacity 1s; }
#main .con03 > div:nth-child(odd) > a{ transform: translateY(-60px); }
#main .con03.on > div > a{ transform: translateY(0); opacity: 1; }


#main .con03 > div > a{ display: block; height: 100%;width: 100%; }
#main .con03 > div > a .img{ position: relative; width: 100%; height: 100%; }
#main .con03 > div > a .img:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(238,238,238,0.7); transition: opacity .3s; }
#main .con03 > div > a:hover .img:after{ opacity: 0; }
#main .con03 > div > a .img img{ display: block; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: transform .8s; }
#main .con03 > div > a:hover .img img{ transform: translate(-50%,-50%) scale(1.1);}
#main .con03 > div > a .txt{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 100%; display: flex; align-items: center; flex-flow: column; padding: 40px 0;
  backdrop-filter: blur(0) brightness(100%);
}
#main .con03 > div > a:hover .txt{
  background-color: rgba(255,255,255,0);
  backdrop-filter: blur(10px) brightness(115%);
  -webkit-backdrop-filter: blur(10px) brightness(115%);
}
#main .con03 > div > a .txt button { display: flex; align-items: center; margin-top: 25px; opacity: 0; transition: opacity .3s; }
#main .con03 > div > a:hover .txt button{ opacity: 1; }
#main .con03 > div > a .txt button strong{ display: block; margin-right: 18px; font-size: 20px; color:#2B2B2B; font-weight: 400; }
*/

#main .con04 {
    position: relative;
    display: flex;
    width: 1560px;
    margin: 0 auto;
    align-items: center;
    max-width: 1920px;
    margin: 0 auto;
    max-width: 100%
}

#main .con04 .wrap {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 2;
}

#main .con04 .wrap .tit {
    width: 100%;
    text-align: right;
}

#main .con04 .wrap .tit div {
    display: inline-block;
    text-align: left
}

#main .con04 .tit strong {
    line-height: 1
}

#main .tit strong {
    font-size: 100px;
    font-weight: 600;
    color: #2B2B2B;
    display: block;
    margin-bottom: 8px;
    line-height: 1;
    text-align: left;
    display: inline-block
}

#main .tit p {
    font-size: 28px;
    font-weight: 500;
    color: #4E4E4E;
}

#main .con04 .wrap .price {
    float: right;
    position: relative;
    margin-top: 17px;
    width: 423px;
    padding: 40px 30px;
}

#main .con04 .wrap .price strong {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #4E4E4E;
    text-align: left;
    margin-bottom: 25px;
}

#main .con04 .wrap .price:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1px) brightness(100%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

#main .con04 .wrap .price ul {
}

#main .con04 .wrap .price ul li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    transition: opacity 1s;
    opacity: 0;
}

#main .con04 .wrap .price ul li:last-child {
    margin-bottom: 0;
}

#main .con04 .wrap .price ul li .stick {
    height: 39px;
    border-radius: 0 8px 8px 0;
    margin-left: -18px;
    margin-top: -15px;
    transition: width 1s;
}

#main .con04 .wrap .price ul li .p_txt {
    margin-top: -15px;
    margin-left: 15px;
    font-size: 14px;
    font-weight: 500;
    color: #4E4E4E;
}

#main .con04 .wrap .price ul li:nth-child(1) .stick {
    background-color: #DEE2DE;
    width: 0;
    transition-delay: 1.3s;
}

/* width: 61px; */
#main .con04 .wrap .price ul li:nth-child(2) .stick {
    width: 0;
    background-color: #CAECC5;
    transition-delay: 1.5s;
}

/* width: 90px; */
#main .con04 .wrap .price ul li:nth-child(3) .stick {
    width: 0;
    background-color: #99D991;
    transition-delay: 1.7s;
}

/* width: 173px; */
#main .con04 .wrap .price ul li:nth-child(4) .stick {
    width: 0;
    background-color: #64CE57;
    transition-delay: 1.9s;
}

/* width: 250px; */
#main .con04 .wrap .price ul li:nth-child(5) .stick {
    width: 0;
    background-color: #3DAE2B;
    transition-delay: 1.9s;
}

/* width: 250px; */

#main .con04.on .wrap .price ul li:nth-child(1) {
    opacity: 1;
    transition-delay: 1.3s;
}

#main .con04.on .wrap .price ul li:nth-child(2) {
    opacity: 1;
    transition-delay: 1.5s;
}

#main .con04.on .wrap .price ul li:nth-child(3) {
    opacity: 1;
    transition-delay: 1.7s;
}

#main .con04.on .wrap .price ul li:nth-child(4) {
    opacity: 1;
    transition-delay: 1.9s;
}

#main .con04.on .wrap .price ul li:nth-child(5) {
    opacity: 1;
    transition-delay: 2.1s;
}


#main .con04.on .wrap .price ul li:nth-child(1) .stick {
    width: 48px;
}

#main .con04.on .wrap .price ul li:nth-child(2) .stick {
    width: 68px;
}

#main .con04.on .wrap .price ul li:nth-child(3) .stick {
    width: 114px;
}

#main .con04.on .wrap .price ul li:nth-child(4) .stick {
    width: 151px;
}

#main .con04.on .wrap .price ul li:nth-child(5) .stick {
    width: 250px;
}


#main .con04 .maps {
    position: relative;
    z-index: 1;
}

#main .tit strong {
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 1s, opacity 1s;
}

#main .on .tit strong {
    transform: translateX(0);
    opacity: 1;
}

#main .tit p {
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transition-delay: .2s;
}

#main .on .tit p {
    transform: translateX(0);
    opacity: 1;
}


#main .con04 .sta div {
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transition-delay: .4s;
}

#main .con04.on .sta div {
    transform: translateX(0);
    opacity: 1;
}


#main .con04 .maps svg #CENTER ~ g {
    cursor: pointer;
    transition: transform 1s, opacity 1s;
}

#main .con04 .maps svg #CENTER ~ g text {
    opacity: 0;
    transition: opacity .3s;
}

#main .con04 .maps svg #CENTER ~ g > g:nth-child(1) {
    opacity: 0;
    transition: opacity .3s;
}

#main .con04 .maps svg #CENTER ~ g:hover > g:nth-child(1) {
    opacity: 1;
}

#main .con04 .maps svg #CENTER ~ g:hover text {
    opacity: 1;
}

#main .con04.on .maps svg #CENTER ~ g > g:nth-child(1) {
    opacity: 1;
    transition: 1.7s;
    transition-delay: 4s;
}

#main .con04 .maps svg #LINE {
    opacity: 0;
    transition: 1s;
    transition-delay: 1.8s;
}

#main .con04.on .maps svg #LINE {
    opacity: 1;
}

#main .con04 .sta {
    text-align: right;
    margin-top: 35px
}

#main .con04 .sta div {
    display: inline-block;
    align-items: center;
    width: 394px;
    text-align: left
}

#main .con04 .sta div > * {
    display: inline-block;
    vertical-align: middle
}

#main .con04 .sta div strong {;
    color: #4E4E4E;
    font-size: 24px;
}

#main .con04 .sta div p {
    font-size: 18px;
    color: #4E4E4E;
    font-weight: 600;
    margin-left: 20px;
    vertical-align: middle;
    position: relative;
    top: 3px;
}

#main .con04 .sta div p span {
    font-size: 50px;
    color: #3DAE2B;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px
}

/*
#main .con04 .maps svg #에스토니아{ transform: translate(381px, 5343px); opacity: 0; }
#main .con04.on .maps svg #에스토니아{ transform: translate(381px, 5353px); opacity: 1; }

#main .con04 .maps svg #튀르키예_조지아{ transform: translate(306px, 5453px); opacity: 0; transition-delay: .1s !important; }
#main .con04.on .maps svg #튀르키예_조지아{ transform: translate(306px, 5463px); opacity: 1; }

#main .con04 .maps svg #우크라이나{ transform: translate(380px, 5441px); opacity: 0; transition-delay: .2s !important; }
#main .con04.on .maps svg #우크라이나{ transform: translate(380px, 5451px); opacity: 1; }

#main .con04 .maps svg #홍콩{ transform: translate(651px, 5556px); opacity: 0; transition-delay: .3s !important; }
#main .con04.on .maps svg #홍콩{ transform: translate(651px, 5566px); opacity: 1; }

#main .con04 .maps svg #대만{ transform: translate(689px, 5517px); opacity: 0; transition-delay: .4s !important; }
#main .con04.on .maps svg #대만{ transform: translate(689px, 5527px); opacity: 1; }

#main .con04 .maps svg #일본{ transform: translate(778px, 5479px); opacity: 0; transition-delay: .5s !important; }
#main .con04.on .maps svg #일본{ transform: translate(778px, 5489px); opacity: 1; }

#main .con04 .maps svg #중국{ transform: translate(574px, 5427px); opacity: 0; transition-delay: .6s !important; }
#main .con04.on .maps svg #중국{ transform: translate(574px, 5437px); opacity: 1; }

#main .con04 .maps svg #태국{ transform: translate(600px, 5543px); opacity: 0; transition-delay: .7s !important; }
#main .con04.on .maps svg #태국{ transform: translate(600px, 5553px); opacity: 1; }

#main .con04 .maps svg #베트남{ transform: translate(612px, 5594px); opacity: 0; transition-delay: .8s !important; }
#main .con04.on .maps svg #베트남{ transform: translate(612px, 5604px); opacity: 1; }

#main .con04 .maps svg #말레이시아{ transform: translate(635px, 5632px); opacity: 0; transition-delay: .9s !important; }
#main .con04.on .maps svg #말레이시아{ transform: translate(635px, 5642px); opacity: 1; }

#main .con04 .maps svg #말레이시아-3{ transform: translate(661px, 5658px); opacity: 0; transition-delay: 1s !important; }
#main .con04.on .maps svg #말레이시아-3{ transform: translate(661px, 5668px); opacity: 1; }

#main .con04 .maps svg #헝가리_슬로바키아{ transform: translate(241px, 5403px); opacity: 0; transition-delay: 1.1s !important; }
#main .con04.on .maps svg #헝가리_슬로바키아{ transform: translate(241px, 5413px); opacity: 1; }

#main .con04 .maps svg #뉴질랜드{ transform: translate(892px, 5823px); opacity: 0; transition-delay: 1.2s !important; }
#main .con04.on .maps svg #뉴질랜드{ transform: translate(892px, 5833px); opacity: 1; }

#main .con04 .maps svg #라트비아_리투아니아{ transform: translate(291px, 5390px); opacity: 0; transition-delay: 1.3s !important; }
#main .con04.on .maps svg #라트비아_리투아니아{ transform: translate(291px, 5400px); opacity: 1; }

#main .con04 .maps svg #호주{ transform: translate(753px, 5747px); opacity: 0; transition-delay: 1.4s !important; }
#main .con04.on .maps svg #호주{ transform: translate(753px, 5757px); opacity: 1; }

#main .con04 .maps svg #뉴질랜드{ transform: translate(892px, 5833px); opacity: 0; transition-delay: 1.5s !important; }
#main .con04.on .maps svg #뉴질랜드{ transform: translate(892px, 5833px); opacity: 1; }
*/


#main .con04.on .maps svg #line path {
    stroke-dasharray: 850;
    stroke-dashoffset: 850;
    animation: dash 3s linear forwards;
    animation-delay: 2s
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

/*
#main .con04 .maps svg #line{transform: scale(0.0);transform-origin:760px 5510px}
#main .con04.on .maps svg #line{transform: scale(1);transform-origin:760px 5510px}
*/

#main .con04 .wrap .price {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transition-delay: .7s;
}

#main .con04.on .wrap .price {
    transform: translateY(0);
    opacity: 1;
}

#main .con04 .wrap .price svg #y2019 #사각형_123 {
    clip-path: 0 0, 100% 100%;
}

#main .con05 {
    background-color: #F6F7F8;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main .con05 .tit {
    margin-bottom: 50px;
}

#main .con05 .n_list {
    border-top: 2px solid #2B2B2B;
}

#main .con05 .n_list ul li {
    border-bottom: 1px solid #DDDDDD;
}

#main .con05 .n_list ul li a {
    padding: 0 40px;
    display: flex;
    width: 100%;
    height: 120px;
    align-items: center;
    justify-content: space-between;
}

#main .con05 .n_list ul li a .right {
    display: flex;
    align-items: center;
}

#main .con05 .n_list ul li a strong .cate {
    padding: 15px 24px;
    border-radius: 70px;
    background-color: #fff;
    font-size: 16px;
    font-weight: 600;
    color: #9A9A9A;
    margin-right: 30px;
    transition: background .3s, color .3s;
    line-height: 1em;
}

#main .con05 .n_list ul li a:hover strong .cate {
    background-color: #3DAE2B;
    color: #fff;
}

#main .con05 .n_list ul li a strong {
    font-size: 24px;
    line-height: 42px;
    color: #2B2B2B;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
}

#main .con05 .n_list ul li a .right .date {
    font-size: 18px;
    font-weight: 500;
    color: #9A9A9A;
    margin-right: 60px;
}

#main .con05 .n_list ul li a .right svg #타원_39 {
    transition: stroke .3s;
}

#main .con05 .n_list ul li a .right svg #패스_4778 {
    transition: stroke .3s;
}

#main .con05 .n_list ul li a:hover .right svg #타원_39 {
    stroke: #3DAE2B;
}

#main .con05 .n_list ul li a:hover .right svg #패스_4778 {
    stroke: #3DAE2B;
}


#main .con05 .n_list {
    transform: translateY(50px);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    transition-delay: .6s;
}

#main .con05.on .n_list {
    transform: translateY(0);
    opacity: 1;
}

#main .con03 .list ul li .p_logo img {
    transform: translateY(70px);
    display: block;
    margin: 0 auto;
    opacity: 0;
    transition: 1.2s
}

#main .con03.on .list ul li .p_logo img {
    transform: translateY(0);
    opacity: 1
}

#main .con03.on .list ul li:nth-child(1) .p_logo img {
    transition-delay: 0.2s
}

#main .con03.on .list ul li:nth-child(2) .p_logo img {
    transition-delay: 0.4s
}

#main .con03.on .list ul li:nth-child(3) .p_logo img {
    transition-delay: 0.6s
}

#main .con03.on .list ul li:nth-child(4) .p_logo img {
    transition-delay: 0.8s
}

#main .con03.on .list ul li:nth-child(5) .p_logo img {
    transition-delay: 1s
}

#main .con03.on .list ul li:nth-child(6) .p_logo img {
    transition-delay: 1.2s
}

#main .con03 .bg_base img {
    transform: scale(1.3);
    transition: transform 3s, opacity 1s;
}

#main .con03.on .bg_base img {
    transform: scale(1);
    transition: transform 3s, opacity 1s;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

}

@media (min-width: 1920px) {
    .main_visual {
        height: 100vh;
    }
}

@media (max-width: 1580px) {
    #main .con01 .txt {
        width: 100%;
    }

    .inner {
        width: 100%;
        padding: 0 20px;
    }

    /*  #main .con03 > div > a .txt .logo img{ max-width: 90%; margin: 0 auto; display: block; }*/
    #main .con04 .wrap {
        width: 423px;
    }

    #main .con04 .wrap {
        right: 20px;
    }

    #main .con01 .svg_w {
        width: 70%;
    }

    #main .con04 .maps svg {
        width: 100%;
        height: auto;
    }

    #main .con01 .svg_w svg {
        width: 100%;
        height: auto;
    }

    .main_visual .in_inner {
        width: 100%;
        padding: 0 20px;
    }

    #main .con03 {
        max-height: 100vh
    }

    #main .con03 .bg_base {
        height: 100%
    }

    #main .con03 .bg_base img {
        height: 100%
    }

    #main .con03 .bg ul li {
        height: 100%
    }

    #main .con03 .bg ul li img {
        height: 100%
    }

    #main .con03 .list ul li .p_logo img {
        width: 200px;
        max-width: 100%
    }

    .main_visual .vis_title .in_inner .in_obj strong {
        font-size: 50px;
        line-height: 1.5
    }
}

@media (max-width: 1416px) {
    #main .con02 .txt {
        padding-right: 20px;
    }

    #main .con02 .txt p {
        font-size: 18px;
    }

    /*  #main .con03 > div > a .txt button strong{ font-size: 16px; }*/
    /*  #main .con03 > div > a .txt button svg{ width: 50px; height: auto; }*/
    #main .con05 .n_list ul li a strong {
        font-size: 18px;
    }

    #main .con05 .n_list ul li a strong .cate {
        font-size: 14px;
        padding: 12px 20px;
        margin-right: 15px;
    }

    #main .con05 .n_list ul li a {
        padding: 0 20px;
        height: 80px;
    }

    #main .con05 .n_list ul li a .right .date {
        font-size: 14px;
        margin-right: 30px;
    }

    #main .con05 .n_list ul li a .right svg {
        width: 58px;
        height: auto;
    }

    #main .con05 .n_list ul li a {
        padding: 0 20px;
        height: 80px;
    }

    #main .con01 .txt p {
        font-size: 18px;
    }
}


@media (max-width: 1080px) {
    .main_visual .main_slider .slide_box .in_inner .in_obj strong span {
        font-size: 50px;
        line-height: 70px;
    }

    #main .tit p,
    #main .con01 .txt p {
        line-height: 1.5;
        font-size: 20px;
    }

    #main .con01 .txt p {
        font-size: 14px;
        line-height: 1.7;
    }

    #main .con01 .txt {
        top: 30%;
    }

    #main .con02 .txt p {
        word-break: keep-all;
    }

    #main .con02 .txt p br {
        display: none;
    }

    #main .con02 .txt strong, #main .con01 .txt strong {
        font-size: 55px;
        margin-bottom: 20px;
    }

    #main .tit strong {
        font-size: 36px;
        margin-bottom: 20px;
    }

    #main .con04 .wrap .price strong {
        font-size: 18px;
    }

    #main .con05 .n_list ul li a strong {
        font-size: 16px;
    }

    #main .con05 .tit {
        margin-bottom: 30px;
    }

    #main .con03 .list ul {
        display: flex;
        flex-wrap: wrap
    }

    #main .con03 .list ul li {
        height: 50%;
        width: 33.33%
    }

    #main .con02 .txt strong i {
        font-size: 30px
    }

    #main .con02 .txt strong img {
        height: 50px;
    }

}

@media (max-width: 750px) {
    .main_visual .main_slider .slide_box .in_inner .in_obj strong span {
        font-size: 32px;
        line-height: 46px;
    }

    .main_visual .vis_title .in_inner .in_obj strong {
        font-size: 32px;
        line-height: 46px;
    }

    #main .con01 .svg_w {
        width: 90%;
    }

    #main .con02 .bg img {
        left: 100%;
    }

    #main .con02 .txt {
        left: 0;
        top: 20%;
        padding-left: 20px;
        width: 100%;
    }

    #main .con02 .bg:after {
        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
    }

    /*  #main .con03 > div{ width: 100%; height: 20%; }*/
    /*  #main .con03 { flex-direction: column; }*/
    /*  #main .con03 > div > a .img img{ width: 50%; }*/
    /*  #main .con03 > div > a .txt{ padding: 20px 0; }*/
    /*  #main .con03 > div > a .txt button{ margin-top: 12px; }*/
    /*  #main .con03 > div > a .txt .logo img{ max-width: auto; height: 18px; }*/
    #main .con04 .maps svg {
        width: 100%;
    }

    #main .con04 .wrap {
        width: 100%;
        padding: 0 20px;
    }

    #main .con04 {
        display: block;
        padding-top: 60px;
    }

    #main .con04 .wrap {
        display: block;
        position: static;
    }

    #main .con04 .maps {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
    }

    #main .con04 .wrap .price {
        margin-top: 0;
        position: absolute;
        left: 20px;
        top: 40px;
    }

    #main .con04 .wrap .price ul li .p_tit img {
        height: 42px;
    }

    #main .con04 .wrap .price ul li .stick {
        height: 32px;
        margin-left: -14px;
    }

    #main .con04.on .wrap .price ul li:nth-child(1) .stick {
        width: 20%;
    }

    #main .con04.on .wrap .price ul li:nth-child(2) .stick {
        width: 30%;
    }

    #main .con04.on .wrap .price ul li:nth-child(3) .stick {
        width: 50%;
    }

    #main .con04.on .wrap .price ul li:nth-child(4) .stick {
        width: 70%;
    }

    #main .con04 .wrap .price {
        width: 300px;
        padding: 0;
    }

    #main .con04 .wrap .price ul li .p_txt {
        font-size: 12px;
    }

    #main .con04 .wrap .price strong {
        font-size: 14px;
    }

    #main .con05 .n_list ul li a .right svg {
        display: none;
    }

    #main .con05 .n_list ul li a {
        height: auto;
        padding: 20px;
    }

    #main .con05 .n_list ul li a .right .date {
        margin-right: 0;
    }

    #main .con03 .list ul li {
        width: 100%;
        height: 16.66%
    }

    .main_visual .scroll {
        bottom: 20px
    }

    .main_visual .scroll svg {
        width: 60px;
        height: auto
    }

    #main .con02 .bg video {
        height: 100%
    }

    #main .con02 .bg video {
        transform: translate(-40%, -46%) rotate(180deg)
    }

    #main .con04 {
        padding-bottom: 40px;
        bottom: 0
    }

    #main .con04 .wrap .tit {
        float: none
    }

    #main .con04 .wrap .price {
        position: static;
        transform: none
    }

    #main .con04 .wrap {
        transform: none;
        margin-top: 60px
    }

    #main .con04 .wrap .tit {
        text-align: left
    }

    #main .con04 .sta div {
        width: 100%
    }

    #main .con04 .wrap .price {
        width: 100%
    }

    #main .con04 .maps {
        position: static;
        margin-top: 40px;
    }

    #main .con04 {
        height: auto
    }

    #main .con04 .sta div p span {
        font-size: 30px;
    }

    #main .con04 .sta div strong {
        font-size: 14px
    }

    #main .con04 .sta div p {
        font-size: 11px;
    }

    #main .con04 .sta div p {
        margin-left: 6px
    }

    #main .con04 .sta {
        margin-top: 17px;
    }

    #main .con04 .maps svg {
        margin-top: 20px
    }

    #main .con04 .sta {
        margin-bottom: 10px;
    }

    #main .con03 .bg {
        display: none
    }

    #main .con03 .list ul li:before {
        height: 100%;
    }
}

@media (max-width: 540px) {
    #main .con05 .n_list ul li a strong {
        display: block;
    }

    #main .con02 .txt strong, #main .con01 .txt strong {
        font-size: 32px;
        margin-bottom: 10px;
    }

    #main .con02 .txt strong img {
        height: 30px
    }

    #main .con02 .txt p {
        font-size: 14px;
        line-height: 1.5;
    }

    #main .tit strong {
        font-size: 30px;
        margin-bottom: 10px;
    }

    #main .tit p {
        font-size: 18px;
    }

    #main .con05 .n_list ul li a {
        display: block;
    }

    #main .con05 .n_list ul li a strong .cate {
        display: block;
        margin-bottom: 10px;
        width: 80px;
        height: 24px;
        line-height: 24px;
        padding: 0;
        text-align: center;
        font-size: 13px;
    }

    #main .con05 .n_list ul li a strong {
        line-height: 1em;
        font-size: 14px;
    }

    #main .con05 .n_list ul li a .right .date {
        margin-top: 10px;
    }

    #main .con04 .wrap .price {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        margin-top: 50px;
    }

    .main_visual .main_slider .slide_box .in_inner .in_obj strong span {
        font-size: 24px;
        line-height: 38px;
    }

    #main .con03 .list ul li .p_logo img {
        width: 160px
    }

    #main .con03 {
        height: 500px
    }

    #main .con02 .txt strong i {
        font-size: 20px
    }

    #main .con04 .wrap {
        position: relative;
        z-index: 2;
        top: 0;
        left: 0
    }

    .main_visual .vis_title .in_inner .in_obj strong {
        font-size: 23px;
        line-height: 32px;
    }

}

@media (max-width: 360px) {
    .main_visual .vis_title .in_inner .in_obj strong {
        font-size: 20px;
        line-height: 32px;
    }

    /*.main_visual .main_slider .slide_box .in_inner .in_obj strong span{ font-size: 20px; line-height: 32px; }*/
    #header h1 a svg {
        height: 14px;
    }

    #header .all_menu_b {
        width: 18px;
        height: 18px;
    }

    #header .all_menu_b span {
        width: 8px;
        height: 8px;
    }

    #header {
        height: 50px;
    }

    #header h1 {
        left: 10px;
    }

    #header .all_menu_b {
        right: 10px;
    }

    #header .lang ul li a {
        font-size: 12px;
    }

    #header .lang {
        right: 38px;
    }

    #main .con01 .txt p {
        font-size: 13px;
        line-height: 22px;
    }

    #main .con02 .txt p {
        font-size: 13px;
        line-height: 22px;
    }

    #main .con04 .wrap .price {
        width: 100%;
    }

    #main .tit p {
        font-size: 14px;
    }

    #main .tit strong {
        font-size: 28px;
    }

    #main .con05 .n_list ul li a strong {
        line-height: 22px;
    }

    #main .con05 .n_list ul li a {
        padding: 12px 0;
    }

    #main .con05 .tit {
        margin-bottom: 12px;
    }

    #main .con05 .n_list ul li a .right .date {
        font-size: 12px;
        margin-top: 8px;
    }

    #footer .wrap .f_logo svg {
        width: 120px;
    }

    #footer .wrap .f_top .f_nav a {
        font-size: 12px;
    }

    #footer .wrap .f_top .f_sns ul li a svg {
        width: 32px;
    }

    #footer .wrap .f_top {
        padding-bottom: 10px;
    }

    #footer {
        padding: 30px 10px;
    }

    #footer .wrap .f_logo {
        padding-top: 0;
    }

    #footer .wrap .f_bot dl dt {
        font-size: 12px;
        margin-right: 0;
    }

    #footer .wrap .f_bot dl dd {
        word-break: keep-all;
        font-size: 11px;
        line-height: 18px;
    }
}