@charset "utf-8";

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2022-11-10
Modify Date : 2022-11-10
File : /event/2022/bigsale
*******************************************/

/* 공통 */
*, body, div, dl, dt, li, ul, ol, li, h1, h2, h1, h2, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button {/*font-family:"Noto Sans KR", sans-serif;*/}
body {min-width:320px; letter-spacing:-1px;}
img {max-width:100%;}
#header {position:relative; background:#fff; z-index:100;}
#footer {border-color:#d0d0d0; background:#fff;}
#wrap {position:relative; overflow:hidden;}
.top_btn {background:#333;}
.show_mot {transform:translateY(100px); opacity:0; transition:transform 1s cubic-bezier(0.15, 0.85, 0.45, 1), opacity 1s cubic-bezier(0.32, 0.94, 0.6, 1);}

.section {position:relative; padding:110px 0; text-align:center; transition:all 0.3s ease;}
.section .inner {position:relative; max-width:1220px; margin:auto; padding:0 20px;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}
.section .tit_area_comm{margin-bottom:55px; text-align: center;}
.section .sec_tit_comm {font-size:60px; font-weight:900; color:#0c0c0c; letter-spacing:-.025em; line-height:1;}
.section .sec_desc_comm{font-size: 20px; color:#848079; margin-top:1em; word-break: keep-all;}
.section .cont_area{position:relative;}
.section .list_comm{display: flex; justify-content: space-between;align-items: flex-start; gap:20px;}
.section .list_comm::after{content:none;}
.section .list_comm li{overflow: hidden; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,.2);}
.section .list_comm li img{width:100%; height:auto;}
.section .list_desc{margin-top:45px; font-size:20px; color:#848079; text-align:center; line-height:1.8; word-break: keep-all;}
.section .highlight{display:inline-block; position:relative; margin-top:75px; font-size:30px; color:#000; text-align: center; word-break: keep-all;}
.section .highlight::before{content:''; display: inline-block; position:absolute; bottom:0; left:-.2em; right:-.2em; height:.7em; z-index:0; background:rgba(255,255,255,.25);}
.section .highlight .line{position:relative; z-index: 1;}
.section .btns{display:flex; justify-content: center; align-items: center; gap:30px; margin-top:60px;}
.section .mo{display:none;}
#notice {background:#3c3c3c; padding:50px 0;}
#notice .inner {text-align:left;}
#notice .tit {margin-bottom:15px; font-size:20px; font-weight:600; color:#fff;}
#notice .tit img {margin:2px 10px 0 0;}
#notice .list li {padding-top:.5em; padding-left:9px; text-indent:-9px; font-size:16px; color:#a5a5a5;}


/* animation */
@keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
@keyframes bounce { from {transform:translateY(0);} to {transform:translateY(10px);}}
@keyframes steps-up-down { 0% {transform:translateY(0);} 10% {transform:translateY(45px);} 50% {transform:translateY(45px);} 60% {transform:translateY(0);}}

/* #section1 */
#section1{background:url(/images/event/20221110/sec01_bg.jpg) center top no-repeat, url(/images/event/20221110/sec01_bg2.jpg) center;}
#section1 .sec_tit{text-align: left;}
#section1 .list_comm{margin-top:80px;}
#section1 .flake1{position:absolute; top:120px; left:-25px;}
#section1 .flake2{position:absolute; top:120px; right:-20px;}
#section1 .no1{position:absolute; top:-53px; left:calc(50% + 161px); animation:bounce-in-top .5s both linear .2s;}
#section2{background:url(/images/event/20221110/sec02_bg_point.jpg) center bottom no-repeat, url(/images/event/20221110/sec02_bg.jpg) center;}

#section3{background:url(/images/event/20221110/sec03_bg_blink.png) center top repeat-x, url(/images/event/20221110/sec03_bg.jpg) center;}
#section3 .txt_area{padding-top:90px; padding-bottom:55px; text-align: center;}
#section3 .txt_area .txt{padding-bottom:15px; font-size:40px; font-weight:300; color:#fff; line-height:1.4; letter-spacing: -.05em;}
#section3 .txt_area .btn_layer{font-size: 18px; color:#fad78b; font-weight:300; text-decoration:underline; letter-spacing: -.05em;}
#section3 .view_layer{position:relative;}
#section3 .layer_box{display:none; position:absolute; top:0; left:50%; z-index: 10; margin-left:-400px; max-width:95vw;}
#section3 .layer_box img{max-width:none; position:relative; z-index:1;}
#section3 .layer_box::before{content:'';display:block;position:fixed;top: 50%;left: 50%;z-index:0;width:100vw;height:100vh;background:rgba(0,0,0,.7);transform: translate(-50%, -50%);}
#section3 .layer_box .layer_close{position:absolute; top:20px; right:20px;}
#section3 .setting{display:flex;}
#section3 .setting li{flex:1; position:relative;}
#section3 .setting .list2{border-left:1px solid #515151;}
#section3 .setting .list1 .point{position:absolute; top:30%; right:64%; animation:bounce 1s infinite ease-in-out alternate;}
#section3 .setting .list2 .point{position:absolute; top:-15%; left:63%; animation:bounce 1s infinite ease-in-out alternate -1s;}

#section4{background:url(/images/event/20221110/sec04_bg.jpg) center;}

#section5{background:url(/images/event/20221110/sec05_bg.jpg) center;}
#section5 .gift1{position:absolute; top:365px; left:0;}
#section5 .gift2{position:absolute; top:165px; right:10px; animation:bounce 1s infinite ease-in-out alternate -1s;}
#section5 .steps > li{position:relative;}
#section5 .steps .link{position:absolute; top:171px; left:50%; transform:translateX(-50%); width:233px;}
#section5 .steps .link > li{border-radius:0;}
#section5 .steps .link li + li{margin-top:17px;}
#section5 .list_desc .white{font-weight: 300;}
#section5 .list_desc #copyText{position:absolute;opacity:0;}
#section5 .btn_event{display:inline-block; margin-left:1em; padding-left:.8em; padding-right:.8em; border:1px solid #fff; border-radius:.8em; font-size:.7em; line-height:1.6em; color:#fff; vertical-align: middle;}

#section6{background:url(/images/event/20221110/sec06_bg_point.jpg) center bottom no-repeat, url(/images/event/20221110/sec02_bg.jpg) center;}
#section6 .sec_desc_comm{color:#544b36;}
#section6 .list_comm{padding-bottom:45px; gap:15px;}
#section6 .list_comm li{animation: steps-up-down 4s infinite; }
#section6 .list_comm li:nth-of-type(even){animation-delay: -2s;}
#section6 .list_comm:hover li{animation-play-state: paused;}

#section7{background:url(/images/event/20221110/sec07_bg.jpg) center;}
#section7 .swiper-wrapper{transition-timing-function: linear;}


/* 반응형 처리 */
@media only screen and (max-width:1180px) {
	.section{padding:9.3220vw 0;}
	.section .tit_area_comm{margin-bottom:6.661vw;}
	.section .sec_tit_comm{font-size:5.0847vw;}
	.section .sec_tit_comm img{width:55vw;}
	.section .sec_desc_comm{font-size:1.6949vw;}
	.section .list_comm{gap:1.7vw;}
	.section .list_comm li{border-radius:1.6949vw;}
	.section .highlight{margin-top:6.3559vw; font-size:2.5424vw;}
	.section .list_desc{margin-top:3.8136vw; font-size:1.6949vw;}
	.section .btns{margin-top:5.0847vw;}
	.section .btns .btn{width:25.1695vw;}
	#section1{background-size:163%, 163%;}
	#section1 .sec_tit{width:52.37vw;}
	#section1 .list_comm{margin-top:6.7797vw;}
	#section1 .no1{top:-4.9153vw; right:3.9831vw; left:auto; width:32.3729vw;}
	#section1 .flake1{width:5.1695vw;}
	#section1 .flake2{width:2.9661vw;}
	#section2{background-size:100%, auto;}
	#section3{background-size:200%, auto;}
	#section3 .txt_area{padding-top:7.6271vw; padding-bottom:4.661vw;}
	#section3 .txt_area .txt{padding-bottom:1.2712vw; font-size:3.3898vw;}
	#section3 .txt_area .btn_layer{font-size:1.5254vw;}
	#section3 .setting .list1 .point,
	#section3 .setting .list2 .point{width:11.3559vw;}
	#section5 .gift1{top:30.9322vw; width:9.8305vw;}
	#section5 .gift2{top:13.9831vw; width:14.1525vw;}
	#section5 .steps .link{top:14.4915vw; width:19.7458vw;}
	#section5 .steps .link li + li{margin-top:1.44vw;}
}
@media only screen and (max-width:639px) {
	.section:not(#section1){padding:60px 0;}
	.section .sec_tit_comm{font-size:30px;}
	.section .sec_tit_comm img{width:320px;}
	.section .sec_desc_comm,
	#section3 .txt_area .btn_layer,
	.section .list_desc{font-size:13px;}
	.section .list_desc{line-height:1.5;}
	.section .highlight{font-size:14px;}
	.section .list_comm{flex-flow:column; align-items: stretch; gap:15px;}
	.section .list_comm li{text-align: center;}
	.section .btns{gap:15px; margin-top:30px;}
	.section .btns .btn{width:150px;}
	.section .pc{display:none;}
	.section .mo{display:block;}
	.section .mo .highlight + .highlight{margin-top:0;}
	#notice .tit{font-size:16px;}
	#notice .tit img{margin-right:5px; width:20px;}
	#notice .list li{font-size:13px;}

	#section1{background-position: 55% -2vw, center;background-size: 190%, 180%;}
	#section1 .sec_tit{position:relative;width:80vw;z-index: 1;padding-top: 5vw;}
	#section1 .no1{top: -9vw;right: 0;z-index: 0;filter: brightness(0.4);width: 40vw;}
	#section1 .list_comm{margin-top:12vw;}
	#section1 .list_comm li{background:#282828;}
	#section1 .list_comm li img{width:250px;}
	#section1 .flake1{top: 100vw; width:30px;}
	#section1 .flake2{top: 170vw; right:-5px; width:15px;}
	#section2 .list_comm li{background:#fff;}
	#section2 .list_comm li img{width:250px;}
	#section3 .txt_area{padding-top:40px; padding-bottom:40px;}
	#section3 .txt_area .txt{font-size:18px; word-break: keep-all;}
	#section3 .setting{flex-flow:column; gap:20px;}
	#section3 .setting .list2{border-left:0;}
	#section3 .setting li img{border-radius:1.6949vw;}
	#section3 .setting .list1 .point{top:10%; left:10vw; width:23vw;}
	#section3 .setting .list2 .point{top:10%; right:10vw; width:23vw;}
	#section3 .layer_box{position:relative;  max-width:100vw; margin-left:-50vw;}
	#section3 .layer_box::after{content:'';display:block;position:absolute;top:0;right:0;left:0;bottom:0;z-index:1;background: linear-gradient(to left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 3%,rgba(0,0,0,0) 7%,rgba(0,0,0,0) 93%,rgba(0,0,0,0.2) 97%,rgba(0,0,0,0.5) 100%);pointer-events: none;}
	#section3 .layer_box .table{overflow-x:auto;}
	#section3 .layer_box .table img{width:600px; padding-left:20px; padding-right:20px;}
	#section3 .layer_box .layer_close{top:10px; right:30px;}
	
	#section5 .list_comm li{background:#323232;}
	#section5 .list_comm li img{width:250px;}
	#section5 .list_desc{text-align:left;}
	#section5 .list_desc li{position:relative; padding-right:7.5em; word-break:break-all}
	#section5 .list_desc li + li{margin-top:1em;}
	#section5 .list_desc li .btn_event{position:absolute; right:0; top:0; width:8em; font-size:.9em;}
	#section5 .gift2{top:115vw; right:0; width:20vw;}
	#section5 .steps{}
	#section5 .steps .link{top:120px; width:50vw; max-width:200px;}
	#section5 .steps .link li + li{margin-top:10px;}
	#section6 .list_comm{flex-wrap:wrap !important; flex-flow:row; gap:10px; padding-bottom:0;}
	#section6 .list_comm li{width:calc(50% - 5px); background:#fff; animation: none;}
	#section6 .list_comm li img{width:250px;}
}