.sec {
    position:relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 150px;
	width: 100%;
    justify-content: center;
}
.section{background: #fff;}
.spWrap {
    position:absolute;
    top:50%;
    right:45px;
    width: 1px;
    height: 1px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 40px 0;
    z-index: 10000;
}

.spWrap a {
    display: flex;
    flex-flow: column;
    gap:40px 0;
    width: 12px;
}

.spWrap a img {
    display: none;
}

.spWrap a .circle {
    width: 100%;
    height: 12px;
    border-radius:100%;
    border:1px solid #fff;
    transition:all .5s;
}

.spWrap a.active .circle {
    background-color: #fff;
}

.spWrap a.active img {
    display: block;
}

.spWrap.active a .circle {
    border-color:#897d76;
}

.spWrap.active a.active .circle {
    background-color: #897d76;
}

.scrollWrap {
    position:absolute;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
}

.scrollWrap img {
    transition:all .5s;
	transform: rotate(180deg);
}

.scrollWrap.active img {
    transform: rotate(180deg);
}

.visualWrap {
	width: 100%; position: relative;
display: flex;
  align-items: center;
    padding-top: 0;
}

.visualWrap .bgWrap {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.visualWrap .swiper-container { width: 100%; position: relative; max-width: 100%; }
.visualWrap .swiper-wrapper { overflow: hidden;}
.visualWrap .imgWrap { width: 100%; position: relative; min-width: 100vw; overflow: hidden;}
.visualWrap .swiper-slide .imgWrap img { position: relative; transform: scale(1); /*transition: all 2s ease 0s;*/ max-width: inherit; left: 50%; margin-left: -960px; width: 1920px;}
.visualWrap .swiper-slide-active .imgWrap img { transform: scale(1); z-index: 1;   animation: subImage 5s forwards;  }

@keyframes subImage {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/*.visualWrap .bgWrap:before {
    content: '';
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    z-index: 10;
}*/

.visualWrap .textWrap {
	width: 1400px; 
    position:absolute;
    left: 50%;
	margin-left: -700px;
    top: 265px;
    z-index: 10;
	text-align: right;
}
.visualWrap .textWrap img { display: inline-block; opacity: 0;  position: relative; transition: all 1s;}
.visualWrap .swiper-slide-active .textWrap img { animation: subImage2 1.5s forwards; }
@keyframes subImage2 {
    0% {
        opacity: 0; top: 50px;
    }

    100% {
         opacity: 1; top: 0;
    }
}

.visualWrap .snsWrap {
    display: flex;
    position:absolute;
    left:53px;
    bottom: 67px;
    gap: 0 8px;
    z-index: 40;
}

.visualWrap .snsWrap>* {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:100%;
    background-color: rgba(255, 255, 255, 0.3);
    width: 54px;
    height: 54px;
    position:relative;
    transition:all .5s;
}

.visualWrap .snsWrap>* img {
    position:relative;
}

.visualWrap .snsWrap>*:before {
    content:'';
    width: 100%;
    height: 100%;
    position:absolute;
    border-radius:100%;
    opacity: 0;
    transition:all .5s;
}

.visualWrap .snsWrap>*.youtube:before {
    background-color: #f34a00;
}

.visualWrap .snsWrap>*.insta:before {
    background:#b02f86;
}

.visualWrap .snsWrap>*.fb:before {
    background-color: #4c69ba;
}

.visualWrap .snsWrap>*.kakao:before {
    background-color: #fae300;
}

.visualWrap .snsWrap>*:before {
    opacity: 1;
}

.visualWrap .snsWrap>*:hover {
    margin-top: -15px;
}

.sec1Wrap {
    background: url(../images/main/bg_sec1.png) no-repeat 50vw center/50vw auto;
}

.sec1Wrap .posWrap {
    position:absolute;
    left:0;
    padding:0 155px 0 55px;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 55px 0;
    background: linear-gradient(to right, #fff 60%, rgba(255, 255, 255, 0));
    z-index: 10;
}

.sec1Wrap .posWrap .piWrap {
    background: url(../images/main/img_sec1_p_bg.png) no-repeat center/cover;
    width: 100px;
    height: 121px;
    display: flex;
}

.sec1Wrap .posWrap .piWrap .swiper-container,
.sec1Wrap .posWrap .piWrap .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec1Wrap .posWrap .piWrap .swiper-slide {
    padding-bottom: 20px;
    opacity: 0 !important;
    transition:all 1s;
}

.sec1Wrap .posWrap .piWrap .swiper-slide-active {
    opacity: 1 !important;
}

.sec1Wrap .posWrap .ptWrap {
    display: flex;
    flex-flow: column;
    gap: 80px 0;
    align-items: center;
}

.sec1Wrap .posWrap .ptWrap a {
    opacity: .5;
    transition:all .5s;
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec1Wrap .posWrap .ptWrap a.active {
    opacity: 1;
}

.sec1Wrap .posWrap .ptWrap a:before {
    content:'';
    position:absolute;
    left:-10px;
    width: 1px;
    height: 0%;
    transition:all .5s;
    background-color: #747474;
}

.sec1Wrap .posWrap .ptWrap a.active:before {
    height: 100%;
}

.sec1Wrap .contWrap {
    position:absolute;
    display: flex;
    align-items: flex-end;
    /* gap: 0 80px; */
}

.sec1Wrap .contWrap .centerWrap {
    width: 520px;
    height: 720px;
    margin-left: 55px;
    margin-right: 80px;
}

.sec1Wrap .contWrap .centerWrap .swiper-slide {
    opacity: .5 !important;
    transition: all 1s;
    /* padding-right: 200px; */
    position: relative;
    overflow: hidden;
}

.sec1Wrap .contWrap .centerWrap .swiper-slide img {
    width: 520px;
}

.sec1Wrap .contWrap .centerWrap .swiper-slide-active {
    padding-right: 0;
    opacity: 1 !important;
}

.sec1Wrap .contWrap .rightWrap {
    width: 248px;
    padding-bottom: 50px;
}

.sec1Wrap .contWrap .rightWrap .swiper-slide {
    opacity: 0 !important;
    transition: all 1s;
}

.sec1Wrap .contWrap .rightWrap .swiper-slide-active {
    opacity: 1 !important;
}

.sec1Wrap .contWrap .leftWrap {
    padding-bottom: 45px;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    position:relative;
    z-index: 10;
}

.sec1Wrap .contWrap .leftWrap .text1 {
    margin-bottom: 160px;
}

.sec2Wrap {
    background: url(../images/main/bg_sec2.png) no-repeat center/cover;
}

.sec2Wrap .contWrap {
    position:absolute;
    display: flex;
    align-items: flex-end;
    gap: 0 100px;
    width: 100%;
    padding-right: 210px;
}

.sec2Wrap .contWrap .bgWrap {
    width: 1270px;
    height: 625px;
    position:relative;
    overflow: hidden;
}

.sec2Wrap .contWrap .bgWrap .image1Wrap {
    position:absolute;
    top: 65px;
    right: 50px;
    width: calc(100% - 50px);
    z-index: 10;
    height: calc(100% - 65px);
    display: flex;
    justify-content: flex-end;
}

.sec2Wrap .contWrap .bgWrap .image1Wrap .swiper-container {
    width: 800px;
    height: 100%;
}

.sec2Wrap .contWrap .bgWrap .image2Wrap {
    position:absolute;
    width: 150px;
    height: 308px;
    top:0;
    right:0;
}

.sec2Wrap .contWrap .bgWrap .image2Wrap .swiper-slide {
    opacity: 0 !important;
    transition:all 1s;
}

.sec2Wrap .contWrap .bgWrap .image2Wrap .swiper-slide-active {
    opacity: 1 !important;
}

.sec2Wrap .contWrap .bgWrap .image1Wrap .swiper-slide {
    opacity: .5 !important;
    transition: all 1s;
}

.sec2Wrap .contWrap .bgWrap .image1Wrap .swiper-slide-active {
    opacity: 1 !important;
}

.sec2Wrap .contWrap .textWrap {
    flex:1;
    padding-bottom: 40px;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}

.sec2Wrap .contWrap .textWrap .text1 {
    margin-bottom: 50px;
}

.sec2Wrap .contWrap .textWrap .swiper-container {
    margin-bottom: 60px;
    width: 350px;
}

.sec2Wrap .contWrap .textWrap .swiper-slide {
    opacity: 0 !important;
    transition: all 1s;
}

.sec2Wrap .contWrap .textWrap .swiper-slide-active {
    opacity: 1 !important;
}

.sec2Wrap .contWrap .textWrap .btn1 {
    margin-bottom: 100px;
}

.sec2Wrap .contWrap .textWrap .arrowsWrap {
    display: flex;
    align-items: center;
    align-self: flex-end;
    gap: 0 33px;
}

.sec3Wrap {
    padding-top: 0;
}

.sec3Wrap .leftWrap {
    width: 50%;
    height: 100%;
    background: url(../images/main/bg_sec3_1.png) no-repeat center/cover;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position:relative;
    padding-top: 180px;
}

.sec3Wrap .leftWrap .btn1 {
    position:absolute;
    right: 80px;
    bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.sec3Wrap .leftWrap .btn1 .b2 {
    position:absolute;
}

.sec3Wrap .leftWrap .btn1 .b1 {
    animation:rotateLoop 5s infinite linear;
}

.sec3Wrap .rightWrap {
    padding-top: 180px;
    width: 50%;
    height: 100%;
    background: url(../images/main/bg_sec3_2.png) no-repeat center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec3Wrap .rightWrap .ctWrap {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}

.sec3Wrap .rightWrap .ctWrap .text2 {
    margin-bottom: 32px;
}

.sec3Wrap .rightWrap .ctWrap .text3 {
    margin-bottom: 44px;
}

.sec3Wrap .rightWrap .ctWrap .image1 {
    margin-bottom: 33px;
}

.sec3Wrap .rightWrap .ctWrap .linkWrap {
    width: 100%;
    display: flex;
    flex-flow: column;
}

.sec3Wrap .rightWrap .ctWrap .linkWrap p {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sec3Wrap .rightWrap .ctWrap .linkWrap p:first-child {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
}


.sec4 { width: 100%; position: relative; overflow: hidden; background: url("../images/main/sec4_bg.png") no-repeat center 150px;}
.sec4 .bg { max-width: inherit; position: relative;}
.sec4 .leftWrap { width: 872px; position: relative; margin: 0 auto;}
.sec4 .txtWrap { width: 100%; margin-bottom: 60px; text-align: center;}
.sec4 .txtWrap img { display: inline-block;}
.sec4 .scd { width: 100%; z-index: 1; position: relative;}
.sec4 .scd::after { width: 1px; height: 0; display: block; clear: both; content: "";}
.sec4 .scd li { width: 200px; height: 200px; position: relative; float: left; margin-right: 24px; margin-bottom: 24px; overflow: hidden; transition: all .3s; background: rgba(0,0,0,0)}
.sec4 .scd li.nth4 { margin-right: 0; margin-bottom: 0;}
.sec4 .scd li.nth5 { margin-bottom: 0; width: 424px;}
.sec4 .scd li.nth6 { margin-bottom: 0; width: 424px;  margin-right: 0px;}
.sec4 .scd li img { transition: all .3s;}
.sec4 .scd li img { transition: all .3s;}
.sec4 .scd li img:first-child { opacity: 1}
.sec4 .scd li img:last-child { opacity: 0; position: absolute; top: 0;}
.sec4 .scd li:hover img:first-child { opacity: 0}
.sec4 .scd li:hover img:last-child { opacity: 1}
.sec4 .rightWrap { width: 29.2%; position: absolute; top: 0; right: 0; overflow: hidden; z-index: 1; }
.sec4 .rightWrap a { width: 100%; display: block; position: relative;  background: rgba(0,0,0,0)}
.sec4 .rightWrap a img { max-width: inherit; transition: all .3s;}
.sec4 .rightWrap a:hover {background: rgba(0,0,0,.3);transition: all .3s;}

.sec5 { width: 100%; height: 100%; position: relative; overflow: hidden; }
.sec5 .layout { width: 100%; height: 100%; position: relative; }
.sec5 .tit { position: absolute; top: 155px; left: 170px; z-index: 1;}
.sec5 .bgWrap { width: 100%; height: 100%; position: relative;}
.sec5 .bgWrap img { max-width: inherit; position: absolute; opacity: 0; transition: all .4s;}
.sec5 .bgWrap img.on { opacity: 1;}
.sec5 .linkWrap { width: 490px; height: 100%; position: absolute; top: 0; right: 0; border-left: 1px solid #fff; z-index: 1;}
.sec5 .linkWrap li { width: 100%; height: 50%; position: relative; border-bottom: 1px solid #fff; background: rgba(140,111,79,0); transition: all .4s;}
.sec5 .linkWrap li:hover {background: rgba(140,111,79,.5);}
.sec5 .linkWrap li:last-child { border-bottom: none;}
.sec5 .linkWrap li:nth-child(1)::after {width: 350px; height: 200px; display: block; content: ""; position: absolute; top: 50%; left: 100px; margin-top: -120px; background: url("../images/main/sec5_txt_01.png") no-repeat 0 0;}
.sec5 .linkWrap li:nth-child(2)::after {width: 350px; height: 200px; display: block; content: ""; position: absolute; top: 50%; left: 100px; margin-top: -120px; background: url("../images/main/sec5_txt_02.png") no-repeat 0 0;}
.sec5 .linkWrap li a.nth1 { width: 50%; height: 16%; display: block; position: absolute; bottom: 0; left: 0;  background: url("../images/main/sec5_link_01.png") no-repeat center center; border-top: 1px solid rgba(255,255,255,.4); border-right: 1px solid rgba(255,255,255,.4)}
.sec5 .linkWrap li a.nth2 { width: 50%; height: 16%; display: block; position: absolute; bottom: 0; right: 0;  background: url("../images/main/sec5_link_02.png") no-repeat center center; border-top: 1px solid rgba(255,255,255,.4)}


.sec6 { width: 100%; position: relative; overflow: hidden; background: url("../images/main/sec6_bg.png") no-repeat center 150px;}
.sec6 .titWrap { width: 450px; top: 230px; left: 50%; margin-left: -710px; z-index: 10; position: absolute;}
.sec6 .titWrap img:nth-child(2) {margin-top: 67px; margin-bottom: 38px;}
.sec6 .swiper-container { width: 1511px; position: absolute; top: 230px; left: 50%; margin-left: -260px; z-index: 1; overflow: hidden;}
.sec6 .btnWrap { width: 130px; top: 795px; left: 50%; margin-left: -710px; z-index: 10; position: absolute;}
.sec6 .btnWrap img { cursor: pointer;}
.sec6 .btnWrap .next { position: absolute; top: 0; right: 0;}