*{margin: 0; padding: 0;}
ul,ol,li{list-style: none;}
a{text-decoration: none;}
img:hover{cursor: pointer;}

@import url(//cdn.design-factory.co.kr/_font/notosanskr/fonts.css);
@import url(//cdn.design-factory.co.kr/_font/gotham/fonts.css);
@import url(//cdn.design-factory.co.kr/_font/nexon_lv2_gothic/fonts.css);
@import url(//cdn.design-factory.co.kr/_font/poppins/fonts.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 


font-family:"Gotham", sans-serif;
font-family:"NEXON Lv2 Gothic", sans-serif;
font-family:"Poppins", sans-serif;
font-family:'Noto Sans KR', sans-serif;


.wrap{width: 100%;}

header{
    width: 100%; 
}

.nav {
    width: 100%;
    height: 70px;
    background: #ec6b78;
    position: fixed;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    z-index: 999999;
}

nav{
    width: 1500px;
    height: 70px;
    background: #ec6b78;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    position: fixed;
    text-align: center;
    margin: 0 auto;
}

nav ul {
    display: flex;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

nav ul li {
    width: 130px;
}

nav ul li:hover {color: #fcdade; cursor: pointer;}


nav img {
    width: 207px;
    height: 45px;
    cursor: pointer;
}

.main>img{width: 100%;}

/* container_1 */

.container_1{
    width: 100%;
    text-align: center;
}


.container_1>p{
    font-size: 55px;
    padding-top: 100px;
    font-family:"NEXON Lv2 Gothic", sans-serif;
    font-weight: 600;
}

.container_1>p>span{color: #d2d2d2;}


.contents1 {
    width: 82%;
    height: 380px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.ct1_title{color: #292929; padding-top: 20px; padding-bottom: 3px; font-size: 18px; font-weight: 800; font-family: "NotoSansKR", sans-serif;}
.ct_ft{color: #999999; font-size: 14px; font-family: "Poppins", sans-serif;}

/* 이미지 호버시 */
.ct1_1:hover .ct1_1img{
    transition: 0.5s;
    transform: scale(1.1);
}

.ct1_2:hover .ct1_2img{
    transition: 0.5s;
    transform: scale(1.1);
}

.ct1_3:hover .ct1_3img{
    transition: 0.5s;
    transform: scale(1.1);
}

.ct1_4:hover .ct1_4img{
    transition: 0.5s;
    transform: scale(1.1);
}

.ct1_5:hover .ct1_5img{
    transition: 0.5s;
    transform: scale(1.1);
}

.ct1_6:hover .ct1_6img{
    transition: 0.5s;
    transform: scale(1.1);
}



/* 3d */
.d3 h1{
    font-size: 55px;
    padding-top: 100px;
    font-family:"NEXON Lv2 Gothic", sans-serif;
    font-weight: 600;
    text-align: center;
}


.d3{width: 100%; height: 850px; background: url(./img/3d/3d_background.png) no-repeat; background-attachment: fixed; background-size: cover;}

.bigbox{width: 400px; height: 550px; margin: 0 auto; padding-top: 36px;} 
.box{width: 100%; height: 100%; text-align: center; background-color: #ffffff; border-radius: 40px; position: relative;  
perspective: 800px;
transform-style:preserve-3d;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: pink 4s infinite ease-in-out;
animation-direction: alternate;
}

@keyframes pink {
    0% {transform: rotateY(0deg);}
    30%{transform: rotateY(-11deg);}
    70%{transform: rotateY(11deg);}
    100%{transform: rotateY(0deg);}
}

.imgbox    { width: 35%;  position: absolute; top: 60px; left: -80px; transform: translateZ(700px); }
.imgbox img{ width: 35%; position: absolute;  /*border: 1px solid red;*/  transform: translateZ(700px); }
.box h2    { width: 100%; position: absolute; bottom: 150px;  transform: translateZ(140px); }
.box p     { width: 100%; position: absolute; bottom: 110px;  transform: translateZ(130px); }
.box .text { width: 100%; position: absolute; bottom: 80px;   transform: translateZ(120px); }
.text>del{color: #e9474f;}





/* container_2 */

.container_2{
    width: 100%;
    /* background-color: aqua; */
}

.contents2{
    width: 76%;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap : 120px;
    row-gap: 40px;
    padding: 80px 80px;
}

.contents2>li>img{width: 80%;}

.ct2_title{color: #292929; padding-top: 2px; padding-bottom: 3px; font-size: 18px; font-weight: 800; font-family: "NotoSansKR", sans-serif;}
/* container_3 */

.container_3{
    width: 100%;
    height: 700px;
    background:  rgb(221, 221, 221);
    position: relative;
    overflow: hidden;
}

.contents3{
    width: 76%;
    height: 700px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.contents3>li{width: 420px;}
.contents3>li>img{width: 100%;}

.fix_con>img{width: 100%;}
.fix_con{animation:rotate_img 10s linear infinite; transform-origin: 50% 50%;}
.motion_con{width: 20.8%; position: absolute; z-index: 20; top: -193px; right: -224.2px;}

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


/* container_5 */
.container_5{width: 100%; height: 800px;}
.contents5{width: 76%; height: 800px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; }

.ct5_font1{font-size: 34px; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;}
.ct5_font2{font-size: 80px; font-weight: 900; font-family:"Gotham", sans-serif;}
.ct5_font3{font-size: 80px; font-weight: 900; font-family:"Gotham", sans-serif; margin-top: -25px;}
.ct5_font4{font-size: 24px; font-weight: 600; font-family: 'Noto Sans KR', sans-serif; padding: 20px 0 40px 0;}

.button{color: #fff; background-color: #af231c; width: 582px; height: 64px; line-height: 64px; font-size: 20px; font-weight: 600; text-indent: 24px;}

.button2{width: 582px; height: 64px; display: flex; justify-content: space-between; align-items: center; margin-top: 20px;}
.google{width: 248px; height: 64px; border: 2px solid #d4d4d4; text-align: center; line-height: 64px; font-weight: 600; display: flex; justify-content: center; gap: 6px; }
.google>img{width: 24px; height: 24px; margin-top: 20px;}

.apple{width: 248px; height: 64px; border: 2px solid #d4d4d4; text-align: center; line-height: 64px; font-weight: 600; display: flex; justify-content: center; gap: 6px; }
.apple>img{width: 24px; height: 24px; margin-top: 20px;}

.qr{width: 64px; height: 64px; border: 2px solid #d4d4d4;}
/* container_4 */

.container_4{
    width: 100%;
    height: 515px;
    position: relative;
}


.box1{position: absolute; width: 100%;}
.box2{position: relative; margin-top: -8px;}


/* footer */

footer{
    width: 100%;
    font-family: "NEXON Lv2 Gothic", sans-serif;
}

.footer{
    width: 60%;
    height: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0 auto;
}

/* footer_bottom */

.footer_bottom{ width: 100%; height: 120px; background: #4b4e51;}
.footer_bt_img{width: 60%; height: 120px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.footer_bt_img>img{width: 80px;}