/* html {
    overflow: hidden;
} */

.visualWrap {
    height: 100vh;
    overflow: hidden;
    position:relative;
}

.visualWrap .contWrap {
    position:relative;
    width: calc(100% - 200px);
    height: calc(100% - 85px);
	margin-left: 100px;
    overflow: hidden;
    border-radius:0 0 50px 0;
}

.visualWrap ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.visualWrap ul li {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.visualWrap ul li.active {
    left: 0;
}

@keyframes visualAni {
    0% {
        transform: scale(1.2);
    }

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

.visualWrap .text1 {
    position: absolute;
    bottom: 100px;
    right: 100px;
    width: 100%;
    display: flex;
    justify-content: right;
    z-index: 100;
}
.visualWrap .text2 {
    position: absolute;
    top: 120px;
    left: 100px;
    width: 100%;
    display: flex;
    justify-content: left;
	padding-left: 100px;
    z-index: 100;
}
.visualWrap .text1 img { width: auto; height: auto;}
.visualWrap .text2 img { width: auto; height: auto; position: relative; left: -50px;}
.visualWrap .ctrWrap {
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    z-index: 100;
}

.visualWrap .ctrWrap .posWrap {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-right: 25px;
}

.visualWrap .ctrWrap .posWrap a {
    display: flex;
    width: 33px;
    height: 33px;
    position: relative;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    margin: 0 3px;
}

.visualWrap .ctrWrap .posWrap a:before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background-color: #fff;
}

.visualWrap .ctrWrap .posWrap a.active {
    border: 1px solid #fff;
}

.visualWrap .ctrWrap .stBtn {
    margin: 0 15px;
}

.visualWrap .icon {
    position:absolute;
    top: 90px;
    right: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.visualWrap .icon img {
    position:absolute;
}

.visualWrap .icon img.rotate {
    animation:visualIconAni 5s infinite linear;
}

@keyframes visualIconAni {
    0% {
        transform:rotate(0deg);
    }

    100% {
        transform:rotate(360deg);
    }
}

.visualWrap .icon img.visi {
    visibility: hidden;
    position:static;
}

.visualWrap .openImage {
    position:absolute;
    top:80px;
    z-index: 10;
    right: 20px;
}

.sec {
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    position:relative;
    flex-flow:column wrap;
    justify-content: center;
}

.sec .contWrap {
    width: 100%;
    margin-top:120px;
}

.layout {
    width: 1337px;
    margin:0 auto;
    position:relative;
}

.sec1Wrap {
    background:url(../images/main/bg_sec1.png) no-repeat center 110px/100% auto;
}

.sec1Wrap .text1 {
    margin:0 auto 15px;
}

.sec1Wrap .swiper-slide {
    box-shadow: 5.541px 7.092px 32px 0px rgba(114, 114, 114, 0.28);
}

.sec1Wrap .contentWrap {
    padding-left:130px;
}

.sec1Wrap .leftWrap {
    float:left;
    margin-right:27px;
    padding:30px 0 65px;
}

.sec1Wrap .rightWrap {
    float:left;
    width: calc(100% - 42px);
}

.sec1Wrap .swiper-container {
    padding:30px 0 65px;
    height: 670px;
}

.sec1Wrap .swiper-wrapper {
    height: auto;
}

.sec1Wrap .swiper-slide {
    width: auto;
    border-radius: 30px;
}

.sec2Wrap .bgWrap {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sec2Wrap .bgWrap img {
    position:absolute;
    top:0;
    left:100%;
    width: 100%;
    height: 100%;
    display: none;
}

.sec2Wrap .bgWrap img.deBg {
    left:0;
    display: block;
}

.sec2Wrap .contWrap {
    position:relative;
    z-index: 100;
}

.sec2Wrap .contWrap .text1 {
    margin:0 auto 30px;
}

.sec2Wrap .contWrap ul {
    display:flex;
    flex-flow:row wrap;
    align-items: center;
}

.sec2Wrap .contWrap ul li {
    flex:1 1;
    padding:10px 10px 10px;
    border-radius:50px 0 0;
    transition:all .3s;
}

/*.sec2Wrap .contWrap ul li:hover {
    background-color:rgba(0, 77, 78, 0.8);
}*/

.sec2Wrap .contWrap ul li>img {
    margin-bottom:28px;
}

.sec2Wrap .contWrap ul li .inBtn {
    margin-bottom:10px;
    display: block;
}

.sec2Wrap .contWrap:before {
    content:'';
    width: 100%;
    height: 1px;
    background-color:rgba(255, 255, 255, 0.2);
    position:absolute;
    top:297px;
    left:0;
}

.sec3Wrap {
    background:#faf6f2 url(../images/main/bg_sec22.png) no-repeat right bottom;
}

.sec3Wrap .text1 {
    margin:0 auto 17px;
}

.sec3Wrap .contentWrap {
    padding-top:10px;
    position:relative;
    padding-left:calc(50% - 768.5px);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}



.sec3Wrap .contentWrap .leftWrap {
    position:relative;
    margin-right:30px;
}

.sec3Wrap .contentWrap .leftWrap .text2 {
    margin-bottom:130px;
}

.sec3Wrap .contentWrap .leftWrap .moreBtn {
    margin-bottom:115px;
    display: block;
}

.sec3Wrap .contentWrap .leftWrap .arrowsWrap {
    display:flex;
    flex-flow:row wrap;
}

.sec3Wrap .contentWrap .leftWrap .arrows {
    position:relative;
    display: block;
}

.sec3Wrap .contentWrap .leftWrap .arrows img:last-child {
    opacity: 0;
    position:absolute;
    top:0;
    left:0;
    transition:all .3s;
}

.sec3Wrap .contentWrap .leftWrap .arrows:hover img:last-child {
    opacity: 1;
}

.sec3Wrap .contentWrap .leftWrap .arrows.left {
    margin-right:70px;
}

.sec3Wrap .contentWrap .rightWrap {
    max-width: calc(100% - 380px);
}

.sec3Wrap .contentWrap .rightWrap .swiper-container {
    padding:50px 0 65px 0px;
}

.sec3Wrap .contentWrap .rightWrap .swiper-slide {
    width: auto;
    box-shadow: 5.541px 7.092px 62px 0px rgba(114, 114, 114, 0.28);
    border-radius: 30px;
    position:relative;
}

.sec3Wrap .contentWrap .rightWrap .swiper-slide span {
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    display: flex;
    width: 182px;
    height: 41px;
    border-radius:10px 10px 0 0;
    background-color:#c5bfba;
    align-items: center;
    justify-content: center;
    transition:all .3s;
}

.sec3Wrap .contentWrap .rightWrap .swiper-slide:hover span {
    background-color:#004a4e;
}

.sec4Wrap {
    background:#d7dcdc url(../images/main/bg_sec4.png) no-repeat left top/100% auto;
}

.sec4Wrap .text1 {
    margin:0 auto 40px;
}

.sec4Wrap .contentWrap {
    position:relative;
    width: 100%;
}

.sec4Wrap .videoWrap {
    border:10px solid #fff;
    width: 950px;
    height:530px;
    margin:0 auto;
    overflow: hidden;
    box-shadow: 5.541px 107.092px 112px 0px rgba(114, 114, 114, 0.28);
}

.sec4Wrap .videoWrap iframe {
    width: 100%;
    height: 100%;
}

.sec4Wrap .icon {
    position:absolute;
    top: 25%;
    right: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec4Wrap .icon img {
    position:absolute;
}

.sec4Wrap .icon img.rotate {
    animation:sec4Ani 5s infinite linear;
}

@keyframes sec4Ani {
    0% {
        transform:rotate(0deg);
    }

    100% {
        transform:rotate(360deg);
    }
}

.sec4Wrap .icon img.visi {
    visibility: hidden;
    position:static;
}
.popupWrap {
    position:absolute;
    top:100px;
    left:0;
     transition:all 1s; 
    z-index: 100;
    background-color:#004652;
    display:flex;
    flex-flow:row wrap;
     transform:translateX(-100%); 
}

.popupWrap.active {
     transform: translateX(0); 
}

.popupWrap .contWrap {
    /*flex:1 1;
    display:flex;*/
    flex-flow:row wrap;
	float:left;
	position: relative;
}

.popupWrap .contWrap>div {
    /* flex:1 1; */
	float:left;
	position:relative;
}

.popupWrap .btnsWrap {
    float:left;
	display: block;
    width: 50px;
	height: 100%;
	background-color:#000;
	top: 0px;
	right: -50px;
    position: absolute;
    cursor: pointer;
}

.popupWrap .btnsWrap p {
    color:#fff;
    font-size: 18px;
    font-family: 'NotoKrR';
    position:absolute;
    top:20px;
    left:70%;
    transform-origin: 0 0;
    transform: rotate(90deg);
}

.popupWrap .btnsWrap span {
    position:absolute;
    display:block;
    width: 100%;
    height: 70px;
    bottom: 0;
    left: 0;
    background:url(../images/common/img_popup_btn.png) no-repeat center center/20px;
    transition:all .3s;
}

.popupWrap.active .btnsWrap span {
    background:url(../images/common/img_popup_close_btn.png) no-repeat center center/25px;
}


	.popupWrap .btnsWrap::after { width: 20px; height: 4px; display: block; background: #fff; position: absolute; bottom: 17px; left: 15px; transform: rotate(-45deg); content: ""; transition: all .5s; z-index: 1}
	.popupWrap .btnsWrap::before { width: 20px; height: 4px; display: block; background: #fff; position: absolute; bottom: 29px; left: 15px; transform: rotate(45deg); content: "";  transition: all .5s; z-index: 1}
	.popupWrap.active .btnsWrap::after { width: 30px; height: 4px; display: block; background: #fff; position: absolute; bottom: 30px; left: 10px; transform: rotate(-45deg); content: ""; z-index: 1}
	.popupWrap.active .btnsWrap::before { width: 30px; height: 4px; display: block; background: #fff; position: absolute; bottom: 30px; left: 10px; transform: rotate(45deg); content: ""; z-index: 1}