/* bg */
.bg-dark {
    background-color: #181818;
}
.bg-gray {
    background-color: #f8f9fb;
}
.bg-w {
    background-color: #fff !important;
}

/*mapbox*/
.mapbox .root_daum_roughmap .wrap_map {
    height: 450px !important;
}
@media (max-width:767px) {
	.mapbox .root_daum_roughmap .wrap_map {
		height: 250px !important;
	}
}

/* endlessRiverList */
.endlessRiverList {
    display: flex;
    align-items: center;
}

/* vdoWrp */
.vdoWrp video {
    width: 100%;
}

/* fbox */
.fbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (min-width:768px) {
    .fbox.fx > div {
        width: 50%;
    }
    .fbox > .txt.lft {
        padding-right: 30px;
    }
    .fbox > .txt.rt {
        padding-left: 30px;
    }
    .fbox.short > .txt.lft {
        padding-right: 5px;
    }
    .fbox.short > .txt.rt {
        padding-left: 5px;
    }
    .fbox.long > .txt.lft {
        padding-right: 60px;
    }
    .fbox.long > .txt.rt {
        padding-left: 60px;
    }
}
@media (max-width:767px) {
    .fbox {
        flex-wrap: wrap;
    }
}

/* company1 .sec1 */
#company1 .sec1 .mtit img {
    max-width: 50vw;
}
#company1 .sec1 .endlessRiverList li {
    margin: 0px;
}
#company1 .sec1 .endlessRiverList li img {
    max-width: 80vw;
}
/* company1 .sec2 */
#company1 .sec2 .logoWrp {
    background-color: #f4f4f4;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#company1 .sec2 .logoWrp svg {
    width: 650px;
    max-width: 70vw;
}
#company1 .sec2 .logoWrp .cls-1 {
    stroke: #7bc8c1;
}
#company1 .sec2 .logoWrp .cls-3 {
    stroke: #000;
}
#company1 .sec2 .logoWrp .cls-1,
#company1 .sec2 .logoWrp .cls-3 {
    stroke-width: 0.6px;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:#f4f4f4;

    transition-delay: 1s;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
#company1 .sec2 .logoWrp .aos-animate .cls-1 {
	fill: #7bc8c1;
	transition-delay: 1.5s;
	stroke-dasharray: 120; 
	stroke-dashoffset: -220;
	animation: ch-anim 4s linear .0s forwards;
}
#company1 .sec2 .logoWrp .aos-animate .cls-3 {
	fill: #000;
	transition-delay: 1.5s;
	stroke-dasharray: 120; 
	stroke-dashoffset: -220;
	animation: ch-anim 4s linear .0s forwards;
}
 
@keyframes ch-anim {
   0% {stroke-dashoffset : -320px;}
   70% {stroke-dashoffset : 0px;}
}
#company1 .sec2 .aboutSym {
    border: 1px solid #ddd;
    padding: 50px 30px;
}
#company1 .sec2 .aboutSym .fbox .lft {
    width: 100px;
}
#company1 .sec2 .aboutSym .fbox .rt {
    width: calc(100% - 100px);
}

@media (min-width:992px) {
    #company1 .sec2 .fbox1 .lft {
        width: 450px;
    }
    #company1 .sec2 .fbox1 .rt {
        width: calc(100% - 450px);
    }
}
@media (max-width:992px) {
    #company1 .sec2 .logoWrp {
        height: 70vw;
    }
}
@media (max-width:767px) {
    #company1 .sec2 .mtit {
        text-align: center;
    }
    #company1 .sec2 .fbox1 .rt {
        margin-top: 15px;
    }
    #company1 .sec2 .aboutSym {
        padding: 10px 20px;
    }
    #company1 .sec2 .aboutSym ul li {
        margin: 20px 0;
    }
    #company1 .sec2 .aboutSym .fbox .lft {
        width: 50px;
    }
    #company1 .sec2 .aboutSym .fbox .rt {
        width: calc(100% - 50px);
        padding-left: 25px;
    }
}

/* company1 .sec3 */
#company1 .sec3 {
    position: relative;
}
#company1 .sec3:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    mix-blend-mode: color-burn;
    z-index: 2;

    transition-delay: 2s;
    -webkit-transition: all 2.5s ease-out;
    -moz-transition: all 2.5s ease-out;
    -ms-transition: all 2.5s ease-out;
    -o-transition: all 2.5s ease-out;
    transition: all 2.5s ease-out;
}
#company1 .sec3.aos-animate:after {
    width: 100%;
}
#company1 .sec3 img {
    position: relative;
    z-index: 1;
    transform: scale(0.3);
    -webkit-transition: all 2.5s ease-out;
    -moz-transition: all 2.5s ease-out;
    -ms-transition: all 2.5s ease-out;
    -o-transition: all 2.5s ease-out;
    transition: all 2.5s ease-out;
}
#company1 .sec3.aos-animate img {
    transform: scale(1);
}
#company1 .sec3 .txt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
    opacity: 0;
    padding: 0 20px;
    transform: translateY(100px);

    transition: opacity 1.5s ease-out 1.5s, transform 1.5s ease-out 1.5s;
}
#company1 .sec3.aos-animate .txt {
    opacity: 1;
    transform: translateY(0%);
}

/* iconBanList */
.iconBanList > li {
    margin: 15px 0;
}
.iconBanList .op0 {
    opacity: 0;
}
.iconBanList .banItem {
    background-color: #eff8f7;
    padding: 60px 40px;
    border-radius: 20px;
}
@media (max-width:767px){
    .iconBanList .op0 {
        display: none;
    }
    .iconBanList .banItem {
        padding: 30px 25px;
        border-radius: 10px;
        display: flex;
        align-items: flex-end;
    }
    .iconBanList .banItem .txt {
        width: calc(100% - 70px);
    }
    .iconBanList .banItem .icon {
        width: 70px;
        padding: 0 10px;
    }
}

/* company1 .sec5 */
#company1 .sec5 .logoList {
    mix-blend-mode: darken;
}
/* company1 .sec6 */
#company1 .sec6 .inner {
    position: relative;
}
#company1 .sec6 .txtFloat svg {
    width: 425px;
    max-width: 25vw;
}
#company1 .sec6 .rotSlide {
    margin-left: 22%;
}
#company1 .sec6 .rotSlide .lft {
    width: 50%;
}
#company1 .sec6 .rotSlide .lft .imgWrp {
    display: inline-block;
    position: relative;
    padding: 20px 0;
}
#company1 .sec6 .rotSlide .lft .imgWrp .imotion {
    position: absolute;
    max-width: 20vw;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#company1 .sec6 .rotSlide .lft .imgWrp .imotion1 {
    right: -10px;
    top: 20px;
    transform: translate3d(-30px, 30px, 0);
}
#company1 .sec6 .rotSlide .lft .slick-current .imgWrp .imotion1 {
    transform: translate3d(0, 0, 0);
}
#company1 .sec6 .rotSlide .lft .imgWrp .imotion2 {
    right: -10px;
    bottom: 30px;
    transform: translate3d(0, 0, 0);
}
#company1 .sec6 .rotSlide .lft .slick-current .imgWrp .imotion2 {
    transform: translate3d(30px, 30px, 0);
}
#company1 .sec6 .rotSlide .rt {
    width: 50%;
    display: flex;
    justify-content: flex-end;
}
#company1 .sec6 .rotSlide .rt .slick-slide {
    float: none;
    margin: 15px 0;
    width: 100% !important;
}
#company1 .sec6 .rotSlide .rt .slick-slide h2,
#company1 .sec6 .rotSlide .rt .slick-slide h4 {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#company1 .sec6 .rotSlide .rt .slick-slide h2 {
    color: #999;
}
#company1 .sec6 .rotSlide .rt .is-active h2 {
    color: #7ac9c1 !important;
}
#company1 .sec6 .rotSlide .rt .slick-slide h4 {
    height: 0px;
    overflow: hidden;
    padding-top: 0px;
}
#company1 .sec6 .rotSlide .rt .is-active h4 {
    height: 120px;
    padding-top: 10px;
}
@media (min-width:768px) {
    #company1 .sec6 .txtFloat {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        z-index: 10;
    }
}
@media (min-width:991px){
    #company1 .sec6 .txtFloat {
        flex-direction: column;
    }
}
@media (min-width:768px) and (max-width:992px){
    #company1 .sec6 .txtFloat {
        position: relative;
        flex-direction: row;
        align-items: center;
    }
}
@media (max-width:1200px) {
    #company1 .sec6 .rotSlide .lft .imgWrp .imotion2 {
        right: 30px;
        bottom: 10px;
    }
    #company1 .sec6 .rotSlide {
        margin-left: 10%;
    }
}
@media (max-width:992px) {
    #company1 .sec6 .rotSlide {
        margin-left: 0%;
    }
}
@media (max-width:767px) {
    #company1 .sec6 .txtFloat {
        text-align: center;
    }
    #company1 .sec6 .rotSlide {
        display: block;
    }
    #company1 .sec6 .rotSlide .rt,
    #company1 .sec6 .rotSlide .lft {
        width: 100%;
        display: block;
    }
    #company1 .sec6 .rotSlide .lft {
        text-align: center;
    }
    #company1 .sec6 .rotSlide .lft .imgWrp {
        max-width: 50vw;
    }
    #company1 .sec6 .rotSlide .rt .is-active h4 {
        height: 80px;
    }
}

/* company1 .sec7 */
#company1 .sec7 {
    position: relative;
    overflow: hidden;
}
#company1 .sec7 .ver_logo {
    position: absolute;
    right: 20vw;
    top: 0;
    z-index: 0;
    max-width: 30vw;
}
#company1 .sec7 .sec_dvd {
    position: relative;
    z-index: 1;
}
#company1 .sec7 .inner {
    position: relative;
    z-index: 2;
}
#company1 .sec7 .mtit .topTxt {
    position: relative;
}
#company1 .sec7 .mtit .topTxt .quotes {
    position: absolute;
    right: 0;
    top: 0;
    max-width: 10vw;
}
#company1 .sec7 .mtit .bottomTxt {
    padding-top: 16%;
    position: relative;
    display: inline-block;
}
#company1 .sec7 .mtit .bottomTxt .floatHand {
    width: 289px;
    height: 233px;
    position: absolute;
    right: 0;
    top: 15%;
    display: flex;
    align-items: center;
    z-index: 1;
}
#company1 .sec7 .mtit .bottomTxt .floatHand img {
    transform: rotate(0deg);
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    transition-delay: 1s;
}
#company1 .sec7 .mtit.aos-animate .bottomTxt .floatHand .lftHand {
    transform: rotate(10deg) translateX(15px);
    z-index: 3;
}
#company1 .sec7 .mtit.aos-animate .bottomTxt .floatHand .rtHand {
    transform: rotate(-15deg) translateX(-15px);
    z-index: 1;
}
#company1 .sec7 .mtit .bottomTxt h1,
#company1 .sec7 .mtit .bottomTxt h3 {
    position: relative;
    z-index: 3;
}
#company1 .sec7 .mtit .bottomTxt h1 {
    line-height: 1.2em;
}
#company1 .sec7 .ceoImg {
    padding: 0 15px;
}
@media (min-width:768px) {
    #company1 .sec7 .mtit {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        z-index: 5;
    }
    #company1 .sec7 .mtit .topTxt {
        max-width: 50%;
    }
    #company1 .sec7 .ceoImg {
        margin-left: 50%;
        text-align: center;
    }
}
@media (max-width:992px) {
    #company1 .sec7 .ver_logo {
        right: 5vw;
    }
    #company1 .sec7 .mtit .bottomTxt .floatHand {
        width: 180px;
        height: 145px;
        top: 0;
    }
    #company1 .sec7 .mtit .bottomTxt .floatHand img {
        height: 145px;
    }
    #company1 .sec7 .mtit.aos-animate .bottomTxt .floatHand .lftHand {
        transform: rotate(10deg) translateX(5px);
        z-index: 3;
    }
    #company1 .sec7 .mtit.aos-animate .bottomTxt .floatHand .rtHand {
        transform: rotate(-15deg) translateX(-5px);
        z-index: 1;
    }
}
@media (max-width:767px) {
    #company1 .sec7 .mtit {
        text-align: center;
    }
    #company1 .sec7 .mtit .container{
        display: inline-block;
        text-align: left;
    }
    #company1 .sec7 .mtit .topTxt {
        display: block;
    }
    #company1 .sec7 .mtit .bottomTxt {
        padding-top: 25%;
    }
}

/* t2 */
.t2 {
    background-color: rgba(0,0,0,0.4);
}
.t2 .tags span {
    display: inline-block;
    border: 2px solid #fff;
    line-height: 1em;
    padding: 10px 30px;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
}
@media (max-width:767px) {
    .t2 .tags span {
        padding: 5px 15px;
    }
}
/* t3 */
.t3 .imp {
    display: inline-block;
    border-bottom: 2px solid #7ac9c1;
    font-size: 1.15em;
    font-weight: 600;
}

@media (max-width:992px) {
    .t3 .fbox ,
    .t2 .fbox {
        flex-wrap: wrap;
    }
    .t3 .fbox > div,
    .t2 .fbox > div {
        order: 1;
        width: 100%;
    }
    .t3 .fbox .txt,
    .t2 .fbox .txt {
        order: 2 !important;
        padding-top: 30px;
    }
    .t3 .fbox > div img,
    .t2 .fbox > div img {
        width: 100%;
    }
}

/* contList */
.contList > li {
    margin-top: 5px;
}
.contList h5 {
    display: flex;
    align-items: flex-start;
}
.contList h5 strong {
    min-width: 80px;
}
.contList p {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* product1 */
#product1 .sec1 {
    position: relative;
    overflow: hidden;
}
#product1 .floatTxt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
#product1 .sec1:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    mix-blend-mode: color-burn;
    z-index: 2;

    transition-delay: 1s;
    -webkit-transition: all 1.5s ease-out;
    -moz-transition: all 1.5s ease-out;
    -ms-transition: all 1.5s ease-out;
    -o-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
}
/* #product1 .sec1.aos-animate:after {
    width: 100%;
} */
#product1 .sec1 .sqWrp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
#product1 .sec1 .sqWrp .sq {
    position: relative;
    top: 0;
    height: 100%;
    width: 9.090909%;
    background-color: rgba(255, 255, 255, 1);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
#product1 .sec1.aos-animate .sqWrp .sq:nth-child(even) {
    top: 100%;
}
#product1 .sec1.aos-animate .sqWrp .sq:nth-child(odd) {
    top: -100%;
}
#product1 .sec2 {
    background-color: #fff;
}
@media (max-height: 500px) {
    #product1 .sec1 {
        min-height: 500px;
    }
}
@media (min-width:1600px) {
    #product1 .sec1 {
        height: 100vh;
        min-height: 800px;
    }
    #product1 .sec1 .vdoWrp {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: -1;
    }
}

/* gallListCustom */
.gallListCustom a .img {
    overflow: hidden;
    background-color: #fff;
    position: relative;
    border-radius: 20px;
}
.gallListCustom a .img:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/hover_plus.png) center center no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    z-index: 4;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.gallListCustom a:hover .img:before {
	opacity: 1;
}
.gallListCustom a .img img {
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
.gallListCustom a:hover .img img {
    transform: scale(1.15);
    -o-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -webkit-transform: scale(1.15);
}

/* product2 */
#product2 .sec1 .pr2_tit .con {
    display: inline-block;
    position: relative;
}
#product2 .sec1 .pr2_tit .con .pr2_tit1_img {
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
#product2 .sec1 .pr2_tit .con .pr2_tit1 {
    position: relative;
    z-index: 2;
}
#product2 .sec1 ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
}
#product2 .sec1 ul li {
    flex: 1 180px;
}
#product2 .sec1 ul li a {
    text-decoration: none;
    display: block;
    border: 2px solid #fff;
    border-radius: 15px;
    padding: 30px 15px;
}
@media (max-width:767px) {
    #product2 .sec1 ul li a {
        border: 1px solid #fff;
        border-radius: 5px;
        padding: 20px 15px;
    }
    #product2 .sec1 ul li a img {
        width: 35px;
    }
}

/* infoList */
.infoList li {
    position: relative;
}
.infoList #target1 {
    background-color: #eff8f7;
}
.infoList #target2 {
    background-color: #f4c3c3;
}
.infoList #target3 {
    background-color: #eff8f7;
}
.infoList #target4 {
    background-color: #c2ede8;
}
.infoList li .img {
    display: flex;
    align-items: center;
    position: relative;
}
.infoList li .img:not(.noHasContainer) {
    justify-content: center;
}
.infoList li:nth-child(odd) .img {
    text-align: right;
}
.infoList li:nth-child(even) .img {
    text-align: left;
}
@media (min-width:991px) {
    .infoList li .txt {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .infoList li:nth-child(even) .con {
        padding-left: 60px;
        width: 50%;
        margin-left: auto;
    }
    .infoList li .img {
        height: 660px;
    }
}
@media (max-width:992px) {
    .infoList li {
        display: flex;
        flex-wrap: wrap;
    }
    .infoList li > div {
        width: 100%;
    }
    .infoList li .img {
        order: 2;
        text-align: center !important;
    }
    .infoList li#target2 .noHasContainer.img:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100px;
        background: linear-gradient(to bottom, #f4c3c3, transparent);
    }
    .infoList li .txt {
        order: 1;
        padding-top: 50px;
        text-align: center;
    }
    /* .infoList #target1 .img img {
        max-width: 70vw;
    } */
}
/* product3 */
#product3 .sec1 {
    position: relative;
    overflow: hidden;
}
#product3 .sec1 .container {
    position: relative;
    z-index: 3;
}
#product3 .sec1 .centLogo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
}
#product3 .topVdo {
    display: inline-block;
    position: relative;
}
#product3 .topVdo .decoVideo {
    position: absolute;
}
#product3 .topVdo .decoVideo1 {
    right: -3.5vw;
    bottom: 5vw;
}
#product3 .topVdo .decoVideo2 {
    left: -5.5vw;
    top: 20%;
}
#product3 .topVdo .floatVdo {
    position: absolute;
    left: 17px;
    top: 17px;
    width: 648px;
    height: 366px;
}


.prdVdo {
    display: inline-block;
    position: relative;
}
.prdVdo .decoVideo {
    position: absolute;
}
.prdVdo .floatVdo {
    position: absolute;
    left: 13px;
    top: 13px;
    width: 515px;
    height: 290px;
}

.slick-iphone {
    max-width: 1000px;
    margin: 0 auto;
}
.prdIphone {
    display: inline-block;
    position: relative;
}
.prdIphone .decoVideo {
    position: absolute;
}
.prdIphone .floatVdo {
    position: absolute;
    left: 14px;
    top: 6px;
    width: 242px;
    height: 430px;
    border-radius: 20px;
    overflow: hidden;
}

@media (max-width:767px) {
    #product3 .topVdo {
        width: 500px;
    }
    #product3 .topVdo .decoVideo1 {
        right: -2vw;
        bottom: 15%;
        max-width: 20vw;
    }
    #product3 .topVdo .decoVideo2 {
        max-width: 20vw;
    }
    #product3 .topVdo .floatVdo {
        position: absolute;
        left: 12px;
        top: 11px;
        width: 476px;
        height: 270px;
    }
    .prdVdo {
        width: 500px;
        margin-top: 40px;
    }
    .prdVdo .floatVdo {
        width: 475px;
    }
}
@media (max-width:500px) {
    .prdVdo,
    #product3 .topVdo {
        width: 300px;
    }
    .prdVdo {
        margin-top: 20px;
    }
    #product3 .topVdo .floatVdo {
        left: 7px;
        top: 7px;
        width: 287px;
        height: 270px;
    }
    .prdVdo .floatVdo {
        left: 6px;
        top: 7px;
        width: 289px;
        height: 270px
    }
}


/* product4 */
#product4 .sec1 {
    position: relative;
    overflow: hidden;
}
#product4 .sec1 .tit {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;

    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
}
#product4 .sec1:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    mix-blend-mode: color-burn;
    z-index: 2;

    transition-delay: 1s;
    -webkit-transition: all 1.5s ease-out;
    -moz-transition: all 1.5s ease-out;
    -ms-transition: all 1.5s ease-out;
    -o-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
}
#product4 .sec2 {
    background-color: #fff;
}
@media (max-height: 500px) {
    #product4 .sec1 {
        min-height: 500px;
    }
}
@media (min-width:1600px) {
    #product4 .sec1 {
        height: 100vh;
        min-height: 800px;
    }
    #product4 .sec1 .vdoWrp {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: -1;
    }
}

/* processList */
.processList > li {
    position: relative;
}
.processList > li .processArr {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 88px;
    height: 62px;
    transform: translate3d(-50%, -50%, 0);
    z-index: 3;
}
.processList .item {
    background-color: #eff8f7;
    padding: 60px 20px;
    border-radius: 20px;
    text-align: center;
}
@media (max-width:992px) and (min-width:768px) {
    .processList .item {
        padding: 30px 15px;
        border-radius: 10px;
    }
    .processList .item .icon img {
        width: 80px;
    }
    .processList .item .txt h3 {
        font-size: 18px;
    }
}
@media (max-width:767px) {
    .processList > li {
        margin: 10px 0;
    }
    .processList > li .processArr {
        left: 0;
        top: 100%;
        width: 100%;
        text-align: center;
        transform: translate3d(0%, -50%, 0);
        height: auto;
    }
    .processList > li .processArr img {
        rotate: 90deg;
        width: 40px;
    }
    .processList .item {
        display: flex;
        align-items: center;
        background-color: #eff8f7;
        padding: 30px 15px;
        text-align: center;
        border-radius: 10px;
    }
    .processList .item .icon {
        width: 80px;
        text-align: center;
    }
    .processList .item .icon img {
        width: 80px;
    }
    .processList .item .txt {
        width: calc(100% - 80px);
        text-align: left;
        padding-left: 15px;
    }
    .processList .item .txt h3 {
        margin-top: 0px;
    }
}


/* banListWrp */
#banListWrp ul {
    display: flex;
    align-items: center;
    margin: 0 -15px;
}
#banListWrp ul li {
    width: 33.33333%;
    position: relative;
    padding: 0 15px;

    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
#banListWrp #banList .banBg1 a {
    background: url(../img/banBg1.jpg) center center no-repeat;
    background-size: cover;
}
#banListWrp #banList .banBg2 a {
    background: url(../img/banBg2.jpg) center center no-repeat;
    background-size: cover;
}
#banListWrp #banList .banBg3 a {
    background: url(../img/banBg3.jpg) center center no-repeat;
    background-size: cover;
}
#banListWrp #banList li > div {
    position: relative;
    width: 100%;
    height: 420px;

    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
#banListWrp #banList li a {
    position: absolute;
    left: 0;
    top: 0;
    text-decoration: none;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 60px 30px;
    border-radius: 30px;
}
#banListWrp #banList li a .more {
    overflow: hidden;
    display: flex;
    align-items: center;
}
#banListWrp #banList li a .more img {
    margin-left: 5px;
}
#banListWrp #banList li a .subtit {
    opacity: .5;
}
@media (max-height: 500px){
    #banListWrp ul li {
        height: 600px;
    }
}
@media (min-width: 1200px){
    #banListWrp #banList.act li {
        width: 25%;
    }
    #banListWrp #banList.act li.act {
        width: 50%;
    }
}
@media (max-width: 1400px){
    #banListWrp #banList li a h1 {
        font-size: 30px;
    }
}
@media (max-width: 1200px){
    #banListWrp ul {
        margin: 0 -5px;
    }
    #banListWrp ul li {
        padding: 0 5px;
    }
    #banListWrp #banList li {
        width: 33.33333%;
    }
    #banListWrp #banList {
        flex-wrap: wrap;
    }
    #banListWrp #banList li > div {
        height: 300px;
    }
}
@media (max-width: 600px){
    #banListWrp #banList li {
        margin: 5px 0;
    }
    #banListWrp #banList li > div {
        height: 200px;
    }
    #banListWrp #banList li a {
        align-items: center;
        padding: 40px 20px;
        border-radius: 10px;
    }
    #banListWrp #banList li {
        width: 100%;
    }
    #banListWrp #banList li a .more img {
        width: 30px;
    }
}


/* product4 */
#product4 .sec3 {
    position: relative;
    overflow: hidden;
}

/*arr*/
.arr {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: -3px;
}
/* product4 : sec5*/
#product4 .sec5 {
    background: url(../img/ms5_bg.png) center center no-repeat;
    background-size: cover;
    position: relative;
}
#product4 .sec5:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 201px;
    width: 100%;
    background-color: #fff;
}
#product4 .sec5 .wave {
    background: url(../img/wave_w.png) 0 center repeat-x;
    height: 120px;
    width: 500%;
    position: absolute;
    left: 0;
    bottom: 200px;
    z-index: 1;
}
#product4 .sec5 .container {
    position: relative;
    z-index: 3;
}
#product4 .sec5 .topTxt {
    position: relative;
    display: inline-block;
}
#product4 .sec5 .topTxt .prd4_txt5_deco {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

@media (min-width:992px) {
    .slick-iphone .prdIphone2 {
        margin-top: 8%;
    }
    .slick-iphone .prdIphone3 {
        margin-top: 16%;
    }
}


/* product4 .sec6 */
#product4 .sec6 .tags h4,
#product4 .sec6 .tags h4 img,
#product4 .sec6 .tags h4 span {
    display: inline-block;
    vertical-align: middle;
    color: #727272;
}
#product4 .sec6 .tags h4 {
    background-color: #f7f7f7;
    border-radius: 100px;
    padding: 8px 30px;
    margin: 5px 1px;
}
#product4 .sec6 .tags h4 img {
    width: 30px;
}
@media (max-width:767px){
    #product4 .sec6 .tags h4 {
        padding: 8px 20px;
    }
    #product4 .sec6 .tags h4 img {
        width: 20px;
    }
    #product4 .sec6 #target1 .img {
        margin-top: 20px;
    }
}

/*  */
.owl-carousel .owl-dots 
.owl-dot.active span, 
.owl-carousel .owl-dots .owl-dot:hover span {
    background-color: #7ac9c1;
}

/* btImg */
#product4 .sec8 .btImg {
    position: relative;
}
#product4 .sec8 .btImg .float .img {
    background-color: #eff8f7;
}
@media (min-width:991px) {
    #product4 .sec8 .btImg .float {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #product4 .sec8 .btImg .float .img {
        width: 50%;
    }
    #product4 .sec8 .btImg .slickWrp {
        width: 50%;
        margin-left: 50%;
        padding-left: 60px;
        position: relative;
    }
    #product4 .sec8 .btImg .slickWrp:after {
        content: "";
        position: absolute;
        left: 60px;
        top: 0;
        width: 50px;
        height: 100%;
        background: linear-gradient(to right, #fff, transparent);
        z-index: 5;
    }
}
@media (max-width:992px) {
    #product4 .sec8 .slickWrp {
        margin-top: 20px;
    }
}

/* snsBox */
#product4 .sec7 .snsBox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 600px;
    max-width: 70%;
    margin: 0 auto;
}
#product4 .sec7 .snsBox img {
    width: calc(20% - 10px);
}


/* websiteList */
#websiteList li {
    margin: 15px 0;
}
#websiteList .item {
    text-decoration: none;
    display: block;
}
@media (min-width:768px){
    #websiteList .item {
        position: relative;
        border-radius: 0px;
        overflow: hidden;
    }
    #websiteList .item .txt {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    #websiteList .item:hover .txt {
        background-color: rgba(0, 0, 0, 0.8);
    }
    #websiteList .item .txt h5,
    #websiteList .item .txt h3 {
        color: #fff;
    }
    #websiteList .item .txt h5 {
        height: 0px;
        overflow: hidden;

        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    #websiteList .item:hover .txt h5 {
        padding-top: 15px;
        height: 50px;
    }
}
@media (max-width:768px){
    #websiteList li {
        margin: 35px 0;
    }
    #websiteList .item .txt {
        margin-top: 10px;
    }
}
/* houseTxt */
.houseTxtWrp {
    display: inline-block;
    position: relative;
}
.houseTxt {
    position: absolute;
    left: 88%;
    top: -3vw;
    max-width: 10vw;
}
/* rotate */
#client1 .word-rotator-title .word-rotate {
    max-height: 100px;
    line-height: 100px;
}
#client1 .word-rotate.active .word-rotate-items span {
    position: relative;
    position: relative;
}
#client1 .word-rotator-title .word-rotate .underLined {
    position: relative;
}
#client1 .word-rotator-title .word-rotate .underLined:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 0%;
    height: 100%;
    width: calc(100% + 20px);
    background-color: #a3fff5;
    z-index: 1;
}
#client1 .word-rotator-title .word-rotate .underLined strong {
    position: relative;
    z-index: 3;
}
#client1 .word-rotator-title .word-rotate img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width:767px) {
    #client1 .word-rotator-title .word-rotate {
        max-height: 50px;
        line-height: 50px;
    }
    #client1 .word-rotator-title .word-rotate img {
        width: 35px;
    }
    #client1 .word-rotator-title .word-rotate .underLined:after {
        left: -5px;
        width: calc(100% + 10px);
    }
}


/* tt */
.tt svg {
	display: inline-block;
	width: 560px;
	height: 78px;
}
.tt svg text {
	font-size: 65px;
	stroke-width: 1;
	stroke: #fff;
	fill: rgba(255,255,255,0);
	stroke: rgba(255,255,255,1);
	animation: stroke 3s alternate;

    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
@keyframes stroke {
	0%   {
		fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1);
		stroke-dashoffset: 25%;
		stroke-dasharray:0 50%;
		stroke-width:1;
	}
	70%  {
		fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1);
		stroke-width:1;
	}
	80%  {
		fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1);
		stroke-width:1;
	}
	100% {
		fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1);
		stroke-dashoffset: -25%;
		stroke-dasharray:50% 0;
		stroke-width:1;
	}
}
@media (max-width:992px) {
    .tt svg {
        display: block !important;
        width: 300px !important;
        margin: -20px auto 0;
    }
    .tt svg text {
        font-size: 35px;
    }
}
@media (max-width:500px) {
    .tt svg {
        width: 220px !important;
        margin: -30px auto 0;
    }
    .tt svg text {
        font-size: 25px;
    }
    
    .tt svg text {
        stroke-width: 0;
        fill: rgba(255,255,255,1);
        stroke: rgba(255,255,255,1);
    }
    @keyframes stroke {
        0%   {
            fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1);
            stroke-dashoffset: 25%;
            stroke-dasharray:0 50%;
            stroke-width:0.5;
        }
        70%  {
            fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1);
            stroke-width:0.5;
        }
        80%  {
            fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1);
            stroke-width:0.5;
        }
        100% {
            fill: rgba(255,255,255,1); stroke: rgba(255,255,255,1);
            stroke-dashoffset: -25%;
            stroke-dasharray:50% 0;
            stroke-width:0.5;
        }
    }
}