/*     1186625 : 인트로 페이지      */
/*지마켓산스(GmarketSans)*/
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.font_point {font-family: 'GmarketSansMedium'!important;}

.main_cont_wrap02{position:relative; padding:0px 0;}
.main_cont_wrap02::after{
    content:''; position:absolute; top:25rem; right:-6rem; width:31.5625rem; height:34.125rem; background: url(../img/main_circle_bg01.png) 50% 50%/100% no-repeat; z-index:0;
    animation: main_circle_bg 30s infinite linear;
    -webkit-animation: main_circle_bg 30s infinite linear; 
    -moz-animation: main_circle_bg 30s infinite linear; 
    -ms-animation: main_circle_bg 30s infinite linear; 
    -o-animation: main_circle_bg 30s infinite linear;
}
@keyframes main_circle_bg {
    0% {
        transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
        -webkit-transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
        -moz-transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
        -ms-transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
        -o-transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
    }
    100% {
        transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
        -webkit-transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
        -moz-transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
        -ms-transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
        -o-transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
    }
}
@-webkit-keyframes main_circle_bg {
    0% {
        transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
        -webkit-transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
        -moz-transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
        -ms-transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
        -o-transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
    }
    100% {
        transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
        -webkit-transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
        -moz-transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
        -ms-transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
        -o-transform:translate(-50%,-50%) translateZ(0) rotate(360deg);
    }
}
.main_cont02_section{position:relative; width:100%; margin:0 auto; z-index:1;}

.main_cont_wrap02 .main_cont02_title .txt01 { font-size:22px; margin:0 0 20px; font-weight:700 }
.main_cont_wrap02 .main_cont02_title .txt02 { font-size:20px; margin-top:0; }
.main_cont_wrap02 .more_btn01 .txt01 { font-size:18px; font-weight:500 }
.txt03  {font-size:16px; color:#fff; line-height: 2em;} 
.txt03 a {color:#fff;}
.txt03 a>span{background:#fff; color:#000; border-radius:50px; padding: 1px 8px 3px; margin-left: 10px; line-height: 1em; display: inline-block;}

.main_cont02_title{position:relative; width:100%;}
.main_cont02_title > p + p{margin-top:2rem;}
.main_cont02_title > .txt02 + .txt02{margin-top:0rem;}

.main_cont02_list_wrap{position:relative; width:100%; max-width:100%; padding:0px 0 0; margin-left:auto; margin-right:auto;}
.main_cont02_list{position:relative; width:100%; display:flex; justify-content:center; align-items:center; gap:5px; flex-wrap:wrap;}
.main_cont02_list_item{ position: relative;display: flex;width: 100%; height:50vh; margin-bottom:0px;  border-radius:0px; overflow:hidden;align-items: center;justify-content: center;transition: width 500ms cubic-bezier(0.4, 0.0, 0.2, 1); -webkit-transition: width 500ms cubic-bezier(0.4, 0.0, 0.2, 1);  -moz-transition: width 500ms cubic-bezier(0.4, 0.0, 0.2, 1);  -ms-transition: width 500ms cubic-bezier(0.4, 0.0, 0.2, 1);  -o-transition: width 500ms cubic-bezier(0.4, 0.0, 0.2, 1);}

.main_cont02_list_item > div{position:relative; width:100%; height:100%; display:block;}
.main_cont02_item_bg{ position:absolute; top:0%; left:0%; width:100%; height:100%; z-index:0;  -moz-transform: scale(1) translateZ(0); -ms-transform: scale(1) translateZ(0); -o-transform: scale(1) translateZ(0); -moz-transition: transform 1.5s 0.1s ease; -ms-transition: transform 1.5s 0.1s ease; -o-transition: transform 1.5s 0.1s ease;}

.main_cont02_item_bg01 { background:url(/img_up/shop_pds/kncpain11/build/option/01_pain1790735681.jpg) 50% 20%/auto no-repeat;   background-size: cover;}
.main_cont02_item_bg02 { background:url(/img_up/shop_pds/kncpain11/build/option/02_skin1790735681.jpg) 50% 34%/auto no-repeat;  background-size: cover;}

.main_cont02_list_item img { height:100%; width:100%; }

.main_cont02_item_box{/* position:relative;*/ width:100%;height:100%;padding:2rem 0 2rem 1.5rem; display:flex; justify-content: flex-end; align-items:flex-start; flex-direction: column; z-index:1;}

.main_cont02_item_title{  position: absolute;  left: 15px; bottom: 0; padding:0 0 1rem;}
.main_cont02_item_title > p + p{margin:0.5rem 0 0;}
.main_cont02_item_title > .txt02{opacity:0.5; color:#fff;}

.main_cont02_item_title .txt01 { font-size:30px; color:#fff; font-weight: 700; padding:0; margin:0; line-height:1.2em;}


.main_cont_wrap02 .more_btn01{position:absolute; top:118%; left:7n0%; margin:0; z-index:2;}
.more_btn01.s_more_btn01 > a{background-color:#6f6d89;}
.more_btn01.s_more_btn01 > a:hover{background-color:transparent;}
.main_cont02_list_btn{position:absolute; bottom:2rem; right:2rem; width:26px; height:26px; background: url(/img_up/shop_pds/sample03/design/next_btn.png) 50% 50%/100% no-repeat;}
.main_cont02_list_btn { display:none; }
.main_cont02_item_text { opacity:1; position:sticky; left:20px; color:#fff;  }
.main_cont_wrap02 .main_cont02_title .txt01 { font-size:20px;  font-weight:800;}
.main_cont_wrap02 .main_cont02_title .txt02 { font-size:16px; }
.plus{display:none;}

.mb {display:block;}
.pc {display:none;}

@media all and (min-width:1024px) {
.main_cont02_item_box{ justify-content: flex-end;}
.main_cont02_list { flex-wrap:nowrap } 
.main_cont02_list_item:nth-child(1) { width:50vw; height: 100vh; margin-bottom:0; }
.main_cont02_list_item:nth-child(2) { width:50vw; height: 100vh; margin-bottom:0; }
.main_cont_wrap02 { padding:0px 0; }
.main_cont_wrap02 .main_cont02_title .txt01 { font-size:36px;  font-weight:800;}
.main_cont_wrap02 .main_cont02_title .txt02 { font-size:20px; }
.main_cont_wrap02 .more_btn01 .txt01 { font-size:20px; }
.plus{display:none;}
.main_cont02_item_title {padding:0 0 5rem 2rem; left: 30px;}
.main_cont02_item_title .txt01 { font-size:60px; }
.main_cont02_item_title .txt01 font{ font-size:32px; }
.main_cont02_item_title .txt02 { font-size:12px; }
.txt03  {font-size:16px; }

.main_cont_wrap02 .more_btn01{position:absolute; top:78%; right:0; margin:0; z-index:2; text-align:right;}

.main_cont02_item_text {
    position:absolute; bottom:2.5rem; left:11rem;  
    opacity: 0; color:#fff;
    transition: 0.2s ease-in-out;
    will-change: transform, contents;
}

.main_cont02_item_text.main_cont02_item_text01{bottom:4rem;}
.main_cont02_item_text.main_cont02_item_text02{bottom:4rem;}
.main_cont02_list_item:hover .main_cont02_item_text {
    opacity: 1;
    transition-duration: 0.2s;
   transition-delay: 0.2s;
}

.main_cont02_list_item:hover > a > .main_cont02_item_bg{
    transform: scale(1.1) translateZ(0);
    -webkit-transform: scale(1.1) translateZ(0);
    -moz-transform: scale(1.1) translateZ(0);
    -ms-transform: scale(1.1) translateZ(0);
    -o-transform: scale(1.1) translateZ(0);
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
.main_cont02_list_item:hover{
    width:calc(90% - 0.5rem);
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}


.main_cont02_list_btn{display:block;}

.mb {display:none !important;}
.pc {display:block;}
}

@media all and (min-width:1700px) {
.main_cont02_item_text {left:30rem;}
.main_cont02_list_item:hover{ width:calc(62% - 0.5rem);}
.main_cont02_item_title .txt01 { font-size:60px; }
.txt03  {font-size:23px; }
.main_cont02_item_title .txt02 { font-size:15px; }
}

/*모바일 액티브*/
@media all and (max-width:1023px) {
  .main_cont02_hover_text {
    display: none;
  }

  .main_cont02_hover_text.active {
    display: block;
    margin-top: 1rem;
  }

  .main_cont02_list_item {
    transition: all 0.3s ease;
  }

  .main_cont02_list_item.expanded {
    height: auto; /* 기존 30vh에서 auto로 바뀜 */
  }
}