/* BASIC css start */
#wrap { background: #090909; }
.section { position: relative; width: 100%; overflow: hidden; margin-bottom: 100px; }
.container { position: relative; width: 100%; word-break: keep-all; }
.container h2 { font-size: 14px; color: #fff; padding: 50px 12%; text-align: left; }
.aos_ani { z-index: 3; }
.aos_bg { position: absolute; top:0; left: 0; }

.btn_home { position: fixed; top: 12px; left: 5px; z-index: 10; width: 25px; padding: 5px; }

/* TOP */
.cont7 { text-align: center; padding: 80% 0; }
.cont7 img { width: 65%; }

.slideInDown { animation-iteration-count: infinite; opacity: .5; color: #fff; text-align: center;  }
[data-aos^=zoom][data-aos^=zoom].aos-animate { opacity: 1; transform: translateZ(0) scale(1)!important; }
[data-aos=zoom-out] { transform: scale(2)!important; }

/* BRAND STORY */
.cont1 .txt_left { text-align: left; color: #fff; padding: 50px 12% 25px; }
.cont1 .txt_left p:nth-child(1) { font-size: 28px; line-height: 36px; padding-bottom: 25px; }
.cont1 .txt_left p:nth-child(2) { font-size: 14px; line-height: 22px; color: #666; }
.cont1 .txt_left2 { text-align: left; color: #fff; padding: 50px 12%; font-size: 48px; line-height: 60px; }


/* CATEGORY */
.phone_case { width: 61%; position: absolute; top: 0; left: 19.5%; z-index: 2; }
.phone_img { width: 60%; margin: 0 auto; padding-top: 3px!important; }
.phone_img .swiper-slide img { width: 100%; }

.xexy_category { padding: 80px 9% 0; }
.xexy_category ul { overflow: hidden; }
.xexy_category li { display: inline-block; width: 44%; font-size: 13px; line-height: 21px; color: #666; text-align: center; padding-bottom: 80px; }
.xexy_category li:nth-child(2) { margin-left: 10%; }
.xexy_category li.catemain { display: block; margin: 0 auto; }
.xexy_category li p { padding-bottom: 18px; }
.xexy_category li p img { width: 80%; }
.xexy_category li strong { display: block; font-size: 17px; color: #fff; padding-bottom: 10px; }


/* LOGO NAME */
.cont3 { background: url(//xexymix.jpg3.kr/xexymix/2020/sub/brandstory/2022/story_m_img3.jpg) no-repeat center; background-size: cover; background-position-y: center; padding-bottom: 110%; }
.cont3 .txt_con2 { margin-top: 50px; padding: 0 9%; font-size: 13px; line-height: 21px; font-weight: 200; color: #fff; text-align: center; }

.cont3 .txt-con { width: 340px; height: 80px; margin: 0 auto; margin-top: 20%; position: relative; }
.cont3 .txt-con .fulltText01 { position: absolute; top: 0; /*width: 100%; height: 100%; padding: 5% 0; background: url(//xexymix.jpg3.kr/xexymix/2020/sub/brandstory/2022/fullText01.png) no-repeat center; background-size: 140%;*/ }
.cont3 .Text01 { position: absolute; top: 40px; width: 100%; height: 50px; letter-spacing: 2px; }
.cont3 .Text01 span { color:#fff; font-size: 40px; font-weight: 600; }
.cont3 .Text01 .txt01 { position: absolute; left: 45px;}
.cont3 .Text01 .txt02 { position: absolute; left: 105px;}
.cont3 .Text01 .txt03 { position: absolute; left: 223px;}
.cont3 p { font-size: 14px; color: #fff;}
.cont3 .plusBtn { opacity: 0; position: absolute; top: 50px; width: 30px; height: 30px; }
.cont3 .btn01 { position: absolute; left: 72px; }
.cont3 .btn02 { position: absolute; left: 195px; }
.cont3 .txt-con p { font-size: 16px; line-height: 1.6; text-align: center; font-weight: 300; }




/* HISTORY */
.cont4 .txt_con { text-align: left; color: #fff; padding: 0 12% 50px; font-size: 28px; line-height: 36px; }

.history_img { padding-top: 32%; }
.history_img .swiper-slide-active { opacity: 1; animation: fadein 2s; }
.history_img .swiper-slide-prev,
.history_img .swiper-slide-next { opacity: .3; }
.history_img .swiper-button-next, .history_img .swiper-button-prev { width: 50px; height: 50px; top: 23%; color: #fff; }
.history_img .swiper-button-next { right: 1%; }
.history_img .swiper-button-prev { left: 1%; }
.history_img .txt_list { padding-top: 50px; }
.history_img .txt_list h3 { padding-bottom: 15px; font-size: 28px; font-weight: 500; color: #ff6d44; }
.history_img .txt_list ul { overflow: hidden; }
.history_img .txt_list li { padding-bottom: 3px; color: #fff; font-size: 13px; font-weight: 200; }
.history_img .txt_list li span { position: absolute; min-width: 25px; max-width: 70px; text-align: right; }
.history_img .txt_list li p { padding-bottom: 7px; padding-left: 40px; line-height: 18px; }
.history_img .pw80 li p { padding-left: 70px; }

@keyframes fadein {
    from { opacity: .3; }
    to { opacity: 1; }
}


/* VALUES */
.cont5 { text-align: center; }
.cont5 .txt_con { text-align: left; color: #fff; padding: 0 12% 50px; font-size: 28px; line-height: 36px; }
.cont5 .txt_off { font-size: 34px; font-weight: 600; padding-top: 45%; color: #fff; }
.cont5 .txt_on { position: absolute; top: 0; z-index: 2; width: 100%; color: #fff; }
.cont5 .txt_on p:nth-child(1) { font-size: 15px; font-weight: 600; padding-top: 10%; }
.cont5 .txt_on p:nth-child(2) { font-size: 20px; font-weight: 600; padding-top: 20%; }
.cont5 .txt_on p:nth-child(3) { font-size: 13px; line-height: 21px; font-weight: 200; padding-top: 8%; }
.cont5 i { font-weight: 300; }

.cont5 .bg01 { background: url(//xexymix.jpg3.kr/xexymix/2020/sub/brandstory/2022/story_img5_1.jpg) no-repeat center; background-size: cover; }
.cont5 .bg02 { background: url(//xexymix.jpg3.kr/xexymix/2020/sub/brandstory/2022/story_img5_2.jpg) no-repeat center; background-size: cover; }
.cont5 .bg03 { background: url(//xexymix.jpg3.kr/xexymix/2020/sub/brandstory/2022/story_img5_3.jpg) no-repeat center; background-size: cover; }
.cont5 .bg04 { background: url(//xexymix.jpg3.kr/xexymix/2020/sub/brandstory/2022/story_img5_4.jpg) no-repeat center; background-size: cover; }

.values_img {  }
.values_img .swiper-button-next, .values_img .swiper-button-prev { width: 50px; height: 50px; top: 49%; color: #fff; }
.values_img .swiper-button-next { right: 1%; }
.values_img .swiper-button-prev { left: 1%; }
.point_img { position: relative; display: flex; flex-wrap: wrap; }
.point_img .thecard:hover { transform: rotateY(180deg); cursor: pointer; }
.thecard { padding-bottom: 130%; transform-style: preserve-3d; transition: all 0.5s ease; flex-basis: 100%; display: flex; flex-direction: column; }
.thefront { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; text-align: center; border-radius: 10px; }
.thefront:after { content: ""; position: absolute; left: 0; z-index: 2; bottom: 10%; background: url(//xexymix.jpg3.kr/xexymix/2020/sub/brandstory/2022/icon_plus.png) no-repeat center; background-size: contain; width: 100%; height: 30px; }
.theback { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; transform: rotateY(180deg); background: #161616; }
.theback:after { content: ""; position: absolute; left: 0; z-index: 2; bottom: 10%; background: url(//xexymix.jpg3.kr/xexymix/2020/sub/brandstory/2022/icon_minus.png) no-repeat center; background-size: contain; width: 100%; height: 30px; }
.theback:hover { transform: rotateY(180deg); }


/* MISSION */
.cont6 { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -70%; }
.cont6 .txt_con { text-align: center; color: #fff; padding-top: 50px; }
.cont6 .txt_con p:nth-child(1) { font-size: 28px; line-height: 36px; padding-bottom: 15px; }
.cont6 .txt_con p:nth-child(2) { font-size: 13px; line-height: 21px; font-weight: 300; }


.mv { height: 100vh; margin-bottom: 0; }
.mv .aos_ani { text-align: center; }
.section.mv video { width: auto; height: 100vh; opacity: .3; }


.pcolor { color: #ff6d44; }
.bold300 { font-weight: 300; }
.bold500 { font-weight: 500; }
.bold600 { font-weight: 600; }




/* BASIC css end */