/*index.css*/ a, img, label{display: block;} .clearfix::before, .clearfix::after{content: ''; display: table; line-height: 0;} .clearfix::after{clear: both;} #wrapper{width: 100%; color: #fff;} #hd_pop, #hd_wrapper, #gnb .gnb_wrap, #container_wr, #ft_wr, #container{width: 100%;} #hd, #wrapper, #ft{min-width: inherit;} #container{margin: 0;} #container_wr{margin:0;} .inner{max-width: 100%; width: 1600px; margin: 0 auto; z-index: 1; position: relative;} .suit{font-family: ‘SUIT Variable’, sans-serif;} /*.gmark{font-family: 'GmarketSans';}*/ .p_color{color: #1edc1f;} @media screen and (max-width : 1620px) { .inner{padding: 0 20px;} } .main_video img {width:100%} /* 페이지 공통 */ #main{width: 100%; overflow-x: hidden;} #main .page{width: 100%;} #main .page .title_txt{text-align: left;} #main .page .title_txt.center{text-align: center;} #main .page .title_txt h2{line-height: 150% !important;} #main .page .title_txt h2 span.c_bg{display: inline-block; position: relative; color: #000; z-index: 1; padding: 0 10px;} #main .page .title_txt h2 span.c_bg::before{content: ""; width: 100%; height: 100%; background: #1edc1f; position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); z-index: -1;} #main .page .title_txt p{padding-top: 40px;} #main .page .title_txt p.l_height{line-height: 200% !important;} #main .page .title_txt p b{display: inline-block; padding: 0 15px; border: 1px solid #fff; box-sizing: border-box; border-radius: 20px;} /* 메인 랜딩페이지 css */ #main{width: 100%; height: auto; background: #000;} /* 첫번째 페이지 */ #sec_one{width: 100%; height: 100vh; background: #000;} /* 두번째 페이지 */ #sec_two{width: 100%; padding: 150px 0 100px;} #sec_two .swiper_ticket{margin-top: 60px; width: 100%;} #sec_two .swiper_ticket .swiper-container{width: 100%; padding: 40px 20px 0;} #sec_two .swiper_ticket .swiper-slide{background: #1edc1f; color: #000; min-height: 220px; max-height: 220px; padding: 0 20px; position: relative; z-index: 1; cursor: pointer;} #sec_two .swiper_ticket .swiper-slide::before{content: ""; position: absolute; width: calc(100% - 40px); height: 12px; background: #000; top: 0; left: 50%; transform: translateX(-50%);} #sec_two .swiper_ticket .swiper-slide::after{content: ""; position: absolute; width: calc(100% - 40px); height: 15px; background: #1edc1f; border-top: 5px solid #000; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 5;} #sec_two .swiper_ticket .swiper-slide .brand_img{position: absolute; right: 10px; bottom: 15px; z-index: 2;} #sec_two .swiper_ticket .swiper-slide .brand_img img:nth-child(1){position: absolute; bottom: 0px; right: 5px; height: 220px;} #sec_two .swiper_ticket .swiper-slide .brand_img img:nth-child(2){position: absolute; bottom: 10px; right: 20px;} #sec_two .swiper_ticket .swiper-slide h3{line-height: 100% !important; padding-top: 20px;} #sec_two .swiper_ticket .swiper-slide h3, #sec_two .swiper_ticket .swiper-slide h4{position: relative; z-index: 4;} #sec_two .swiper_ticket .swiper-slide span{position: absolute; bottom: 20px; z-index: 4;} @media screen and (max-width : 1400px) { #sec_two .swiper_ticket .swiper-slide{min-height: 180px; max-height: 180px;} #sec_two .swiper_ticket .swiper-slide .brand_img img:nth-child(1){height: 180px;} } @media screen and (max-width : 650px){ #sec_two .swiper_ticket{margin-top: 20px;} #sec_two .swiper_ticket .swiper-slide{min-height: 150px; max-height: 150px;} #sec_two .swiper_ticket .swiper-slide .brand_img img:nth-child(1){height: 150px;} #sec_two .title_txt p{margin: 0 9%;} } /* 세번째 페이지 */ #sec_three{width: 100%; padding: 150px 0 100px; position: relative;} #sec_three .inner::after{content: ""; display: block; clear: both;} /* 팝업 모션 들어갈부분 */ #sec_three .popup_bg{width: 42%; height: 100%; background: #000; position: absolute; top: 55%; left: 0; transform: translateY(-50%);} #sec_three .popup_bg img:nth-child(1){max-width: 98%; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 1; animation: pop_img_float 50s ease-in-out infinite;} #sec_three .popup_bg img:nth-child(2){max-width: 40%; z-index: 2; position: absolute; left: 28%; top: 50%; transform: translate(-50%, -50%); animation: pop_img_float02 50s ease-in-out infinite;} #sec_three .popup_bg img:nth-child(3){max-width: 75%; z-index: 3; position: absolute; top: 40%; left: 60%; transform: translateX(-50%); animation: pop_img_float03 50s ease-in-out infinite;} @keyframes pop_img_float { /* 0%{opacity: 0; transform: translate(-50%, -30%);} */ 0%{opacity: 1; transform: translate(-50%, -50%);} 5%{opacity: 1; transform: translate(-50%, -48%);} 10%{opacity: 1; transform: translate(-50%, -50%);} 15%{opacity: 1; transform: translate(-50%, -48%);} 20%{opacity: 1; transform: translate(-50%, -50%);} 25%{opacity: 1; transform: translate(-50%, -48%);} 30%{opacity: 1; transform: translate(-50%, -50%);} 35%{opacity: 1; transform: translate(-50%, -48%);} 40%{opacity: 1; transform: translate(-50%, -50%);} 45%{opacity: 1; transform: translate(-50%, -48%);} 50%{opacity: 1; transform: translate(-50%, -50%);} 55%{opacity: 1; transform: translate(-50%, -48%);} 60%{opacity: 1; transform: translate(-50%, -50%);} 65%{opacity: 1; transform: translate(-50%, -48%);} 70%{opacity: 1; transform: translate(-50%, -50%);} 75%{opacity: 1; transform: translate(-50%, -48%);} 80%{opacity: 1; transform: translate(-50%, -50%);} 85%{opacity: 1; transform: translate(-50%, -48%);} 90%{opacity: 1; transform: translate(-50%, -50%);} 95%{opacity: 1; transform: translate(-50%, -48%);} 100%{opacity: 1; transform: translate(-50%, -50%);} } @keyframes pop_img_float02 { /* 0%{opacity: 0; transform: translate(-50%, -30%);} */ 0%{opacity: 1; transform: translate(-50%, -50%);} 5%{opacity: 1; transform: translate(-50%, -42%);} 10%{opacity: 1; transform: translate(-50%, -50%);} 15%{opacity: 1; transform: translate(-50%, -42%);} 20%{opacity: 1; transform: translate(-50%, -50%);} 25%{opacity: 1; transform: translate(-50%, -42%);} 30%{opacity: 1; transform: translate(-50%, -50%);} 35%{opacity: 1; transform: translate(-50%, -42%);} 40%{opacity: 1; transform: translate(-50%, -50%);} 45%{opacity: 1; transform: translate(-50%, -42%);} 50%{opacity: 1; transform: translate(-50%, -50%);} 55%{opacity: 1; transform: translate(-50%, -42%);} 60%{opacity: 1; transform: translate(-50%, -50%);} 65%{opacity: 1; transform: translate(-50%, -42%);} 70%{opacity: 1; transform: translate(-50%, -50%);} 75%{opacity: 1; transform: translate(-50%, -42%);} 80%{opacity: 1; transform: translate(-50%, -50%);} 85%{opacity: 1; transform: translate(-50%, -42%);} 90%{opacity: 1; transform: translate(-50%, -50%);} 95%{opacity: 1; transform: translate(-50%, -42%);} 100%{opacity: 1; transform: translate(-50%, -50%);} } @keyframes pop_img_float03 { /* 0%{opacity: 0; transform: translate(-50%, 30%);} */ 0%{opacity: 1; transform: translate(-50%, 0%);} 5%{opacity: 1; transform: translate(-50%, 3%);} 10%{opacity: 1; transform: translate(-50%, 0%);} 15%{opacity: 1; transform: translate(-50%, 3%);} 20%{opacity: 1; transform: translate(-50%, 0%);} 25%{opacity: 1; transform: translate(-50%, 3%);} 30%{opacity: 1; transform: translate(-50%, 0%);} 35%{opacity: 1; transform: translate(-50%, 3%);} 40%{opacity: 1; transform: translate(-50%, 0%);} 45%{opacity: 1; transform: translate(-50%, 3%);} 50%{opacity: 1; transform: translate(-50%, 0%);} 55%{opacity: 1; transform: translate(-50%, 3%);} 60%{opacity: 1; transform: translate(-50%, 0%);} 65%{opacity: 1; transform: translate(-50%, 3%);} 70%{opacity: 1; transform: translate(-50%, 0%);} 75%{opacity: 1; transform: translate(-50%, 3%);} 80%{opacity: 1; transform: translate(-50%, 0%);} 85%{opacity: 1; transform: translate(-50%, 3%);} 90%{opacity: 1; transform: translate(-50%,0%);} 95%{opacity: 1; transform: translate(-50%, 3%);} 100%{opacity: 1; transform: translate(-50%, 0%);} } #sec_three .popup_ctt{width: 58%; float: right;} #sec_three .popup_ctt .pop_info{margin: 40px 0 20px;} #sec_three .popup_ctt .pop_info li{margin-bottom: 10px;} #sec_three .popup_ctt .pop_info li span{background: #1edc1f; color: #000; border-radius: 20px; display: inline-block; padding: 0 20px; margin-right: 10px;} #sec_three .popup_ctt .pop_info li p{display: inline-block;} #sec_three .popup_ctt .pop_info li p a{display: inline-block; color: #fff;} /* 팝업 지도 */ #sec_three .popup_ctt .popup_map{width: 100%; height: 300px; background: #000; border: 3px solid #1edc1f; box-sizing: border-box; position: relative;} #sec_three .popup_ctt .popup_map > img:nth-child(2){position: absolute; top: -32%; right: -20px; z-index: 3; max-width: 25%;} #sec_three .popup_ctt .popup_map > img:nth-child(3){position: absolute; bottom: -25%; right: -40px; z-index: 3; max-width: 35%;} #sec_three .popup_ctt .popup_map.web{display: block;} #sec_three .popup_ctt .popup_map.mo{display: none;} #sec_three .popup_ctt .popup_map .map_box{width: 100%; height: 100%; position: relative;} #sec_three .popup_ctt .popup_map .map_click_ctt{width: 200px; height: 90%; position: absolute; z-index: 2; top: 0; left: 20px;} #sec_three .popup_ctt .popup_map .map_click_ctt .tit_logo{background: #1edc1f; width: 100%; padding: 10px 12px;} #sec_three .popup_ctt .popup_map .map_click_ctt .tit_logo img{max-width: 80%;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button{background: #000; padding: 15px 12px;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li{cursor: pointer; padding-bottom: 12px; border-bottom: 1px solid #9fa0a0; box-sizing: border-box; color: #9fa0a0; transition: .25s; width: 100%; position: relative;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li:nth-child(1){margin-bottom: 10px;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li img{filter: grayscale(1); transition: .25s; position: absolute; right: 0px; top: 0px;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li h4{line-height: 130% !important; padding-bottom: 10px;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li.on{border-bottom: 1px solid #1edc1f;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li.on h4{color: #1edc1f;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li.on p{color: #fff;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li.on img{filter: grayscale(0);} #sec_three .popup_ctt .popup_map .map_show_img{width: 100%; height: 100%; overflow: hidden;} #sec_three .popup_ctt .popup_map .map_show_img ul{width: 100%; height: 100%;} #sec_three .popup_ctt .popup_map .map_show_img ul li{display: none; width: 100%; height: 100%;} #sec_three .popup_ctt .popup_map .map_show_img ul li a{display: inline-block; width: 100%; height: 100%; text-align: center;} #sec_three .popup_ctt .popup_map .map_show_img ul li img{width: 100%; height: 100%; object-fit: cover;} #sec_three .popup_ctt .popup_map .map_show_img ul li.on{display: block;} @media screen and (max-width : 1650px) { #sec_three .popup_ctt .popup_map > img:nth-child(3){right: 20px;} } @media screen and (max-width : 1400px) { #sec_three .inner{display: flex; flex-wrap: wrap;} #sec_three .popup_bg{width: 100%; height: 700px; position: initial; transform: translateY(0); order: 2; margin-top: 30px;} #sec_three .popup_bg img:nth-child(1){max-width: 90%;} #sec_three .popup_bg img:nth-child(2){max-width: 25%;} #sec_three .popup_bg img:nth-child(3){max-width: 45%;} #sec_three .popup_ctt{width: 100%; float: none; order: 1; margin-top: 30px;} #sec_three .popup_ctt .popup_map.web{display: none;} #sec_three .popup_ctt .popup_map.mo{display: block;} } @media screen and (max-width : 1000px) { #sec_three{padding: 60px 0 50px;} #sec_three .popup_bg{height: 530px; margin-top: 40px;} } @media screen and (max-width : 768px) { #sec_three .popup_bg{height: 420px;} #sec_three .popup_ctt .popup_map > img:nth-child(2){top: -23%;} #sec_three .popup_ctt .popup_map > img:nth-child(3){bottom: -15%;} } @media screen and (max-width : 650px){ #sec_three .popup_ctt .popup_map{height: 280px;} #sec_three .popup_ctt .popup_map .map_click_ctt{left: 0; width: 140px;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li img{width: 12px;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li h4{padding-bottom: 5px;} #sec_three .popup_ctt .popup_map .map_click_ctt .click_button li p{font-size: 10px !important;} } @media screen and (max-width : 550px){ #sec_three .popup_bg{height: 250px;} #sec_three .popup_ctt .pop_info li p{display: block;} } /* 네번째 페이지 */ #sec_four{width: 100%; margin: 150px 0 0px; position: relative;} #sec_four .trip_txt{width: 32%;} #sec_four .trip_txt h2 span{margin-top: 10px;} #sec_four .trip_txt h3{padding-top: 50px;} #sec_four .trip_txt .ticket_txt{width: 100%;} #sec_four .trip_txt .ticket_txt .ticket_img{width: 100%; margin-top: -30px; position: relative; padding-bottom: 50px;} #sec_four .trip_txt .ticket_txt .ticket_img img{max-width: 100%;} #sec_four .trip_txt .ticket_txt .ticket_img img:nth-child(1){position: relative; z-index: 2;} #sec_four .trip_txt .ticket_txt .ticket_img img:nth-child(2){position: absolute; bottom: 0; z-index: 1;} #sec_four .trip_txt .ticket_txt .date_open{width: 100%; margin-top: 20px; text-align: center; background: #000;} #sec_four .trip_txt .ticket_txt .date_open p{border: 3px solid #1edc1f; box-sizing: border-box; padding: 5px 10px;} #sec_four .trip_txt .ticket_txt span{display: block; padding-top: 10px; text-align: center;} #sec_four .ticket_ctt{position: absolute; right: 0; bottom: 0; width: 55%; z-index:1} #sec_four .ticket_ctt > div{background: #fff; padding: 50px 60px; color: #000; border: 3px solid #1edc1f; box-sizing: border-box;} #sec_four .ticket_ctt .top_info{border-radius: 55px 0 0 55px; border-right: 0;} #sec_four .ticket_ctt .top_info > img{max-width: 30%;} #sec_four .ticket_ctt .bottom_info{border-radius: 55px 0 0 55px; position: relative; border-right: 0;} #sec_four .ticket_ctt .bottom_info::after{content: ""; width: calc(100% - 55px); height: 0px; border-top: 8px dashed #fff; position: absolute; top: -8px; right: 0; z-index: 1;} #sec_four .ticket_ctt .top_info p{padding-top: 10px;} #sec_four .ticket_ctt .bottom_info h5 b{background: #1edc1f; display: inline-block; padding: 0px 15px; border-radius: 20px;} #sec_four .ticket_ctt .bottom_info ul.tk_info{margin: 30px 0 20px; display: flex; flex-wrap: wrap;} #sec_four .ticket_ctt .bottom_info ul.tk_info li{background: #1edc1f; width: 250px; margin-right: 20px; padding: 20px; position: relative; margin-top: 10px;} #sec_four .ticket_ctt .bottom_info ul.tk_info li::after{content: ""; width: calc(100% - 40px); height: 8px; background: #000; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);} #sec_four .ticket_ctt .bottom_info ul.tk_info li p span{border: 2px solid #000; box-sizing: border-box; border-radius: 20px; display: inline-block; padding: 0 10px;} #sec_four .ticket_ctt .bottom_info ul.tk_info li img{position: absolute; top: 20px; right: 20px;} #sec_four .floating_img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index:1} #sec_four .floating_img > img:nth-child(1){position: absolute; left: 0%; bottom: 20%;animation: img_float05 50s ease-in-out infinite; max-width: 20%;} #sec_four .floating_img > img:nth-child(2){position: absolute; top: -8%; right: 10%;animation: img_float05 50s ease-in-out infinite; max-width: 25%;} #sec_four .floating_img > img:nth-child(3){position: absolute; right: 5%; top: 4%; max-width: 50%; opacity: 0;} #sec_four .floating_img > img:nth-child(4){position: absolute; right: 3%; bottom: -10%;animation: img_float05 50s ease-in-out infinite; max-width: 15%;} #sec_four .floating_img.on > img:nth-child(3){animation: flying 1.5s ease-in-out forwards;} @keyframes flying{ 0%{right: -50%; top: 90%; opacity: 0;} 100%{right: 5%; top: 4%; opacity: 1;} } @media screen and (max-width : 1400px){ #sec_four .trip_txt{width: 42%;} #sec_four .ticket_ctt{width: 48%;} #sec_four .floating_img > img:nth-child(1){position: absolute; left: 0%; bottom: 20%;max-width: 3%;} #sec_four .floating_img > img:nth-child(2){position: absolute; top: -20%; right: 10%;max-width: 12%;} #sec_four .floating_img > img:nth-child(3){position: absolute; right: 4%; top: -7%; max-width: 25%; opacity: 0;} #sec_four .floating_img > img:nth-child(4){position: absolute; right: 3%; bottom: -10%;max-width: 12%;} @keyframes flying{ 0%{right: -50%; top: 90%; opacity: 0;} 100%{right: 3%; top: -14%; opacity: 1;} } } @media screen and (max-width : 1200px){ #sec_four .ticket_ctt > div{padding: 40px 30px;} } @media screen and (max-width : 1000px){ #sec_four{margin: 80px 0 0;} #sec_four .trip_txt{width: 100%;} #sec_four .ticket_ctt{width: calc(100% - 20px); position: static; margin-left: 20px; margin-top: 50px;} #sec_four .ticket_ctt .bottom_info ul.tk_info li{width: calc(33.3333% - 20px);} #sec_four .floating_img > img:nth-child(1){position: absolute; left: 1%; bottom: 20%;max-width: 5%;} #sec_four .floating_img > img:nth-child(2){position: absolute; top: 0%; right: 6%;max-width: 13%;} #sec_four .floating_img > img:nth-child(3){position: absolute; right: 3%; top: 2%; max-width: 25%; opacity: 0;} #sec_four .floating_img > img:nth-child(4){position: absolute; right: 3%; bottom: -4%;max-width: 14%;} @keyframes flying{ 0%{right: -50%; top: 90%; opacity: 0;} 100%{right: 4%; top: 2%; opacity: 1;} } } @media screen and (max-width : 768px){ #sec_four .ticket_ctt .bottom_info ul.tk_info li{width: calc(50% - 20px);} } @media screen and (max-width : 550px){ #sec_four .trip_txt .ticket_txt .ticket_img{margin-top: -40px;} #sec_four .ticket_ctt .bottom_info ul.tk_info li{width: calc(100%); margin-right: 0;} #sec_four .trip_txt .ticket_txt .date_open p{font-size: 17px !important;} #sec_four .floating_img > img:nth-child(1){position: absolute; left: 3%; bottom: 20%;max-width: 8%;} #sec_four .floating_img > img:nth-child(2){position: absolute; top: 0%; right: 6%;max-width: 20%;} #sec_four .floating_img > img:nth-child(4){position: absolute; right: 5%; bottom: 0%;max-width: 14%;} } /* 다섯번째 페이지 */ #sec_five{width: 100%; padding: 100px 0 150px; position: relative;} #sec_five .floating_img{position: absolute; top: 4%; right: 14%; animation: img_float05 50s ease-in-out infinite; max-width: 35%; z-index:1} #sec_five .floating_img img{max-width: 100%;} @keyframes img_float05 { /* 0%{opacity: 0; transform: translate(-50%, -30%);} */ 0%{opacity: 1; transform: translateY(0);} 5%{opacity: 1; transform: translateY(10px);} 10%{opacity: 1; transform: translateY(0);} 15%{opacity: 1; transform: translateY(10px);} 20%{opacity: 1; transform: translateY(0);} 25%{opacity: 1; transform: translateY(10px);} 30%{opacity: 1; transform: translateY(0);} 35%{opacity: 1; transform: translateY(10px);} 40%{opacity: 1; transform: translateY(0);} 45%{opacity: 1; transform: translateY(10px);} 50%{opacity: 1; transform: translateY(0);} 55%{opacity: 1; transform: translateY(10px);} 60%{opacity: 1; transform: translateY(0);} 65%{opacity: 1; transform: translateY(10px);} 70%{opacity: 1; transform: translateY(0);} 75%{opacity: 1; transform: translateY(10px);} 80%{opacity: 1; transform: translateY(0);} 85%{opacity: 1; transform: translateY(10px);} 90%{opacity: 1; transform: translateY(0);} 95%{opacity: 1; transform: translateY(10px);} 100%{opacity: 1; transform: translateY(0);} } #sec_five .swiper_people{width: 100%; margin-top: 50px;} #sec_five .swiper_people .swiper-container{width: 100%; padding: 20px 0 0;} #sec_five .swiper_people .swiper-slide{width: 100%; height: 450px; background: url(../img/main/people_bar_bg.png) no-repeat; background-size: contain; background-position: center center; position: relative; filter: brightness(0.4); transition: .25s; cursor: pointer;} #sec_five .swiper_people .swiper-slide .people_txt{position: absolute; left: 15%; top: 50%; transform: translateY(-50%); z-index: 2;} #sec_five .swiper_people .swiper-slide .people_txt h3{background: #000; color: #1edc1f; display: inline-block; padding: 2px 12px; margin-bottom: 20px;} #sec_five .swiper_people .swiper-slide .people_txt p{color: #000;} #sec_five .swiper_people .swiper-slide .emoji{position: absolute; right: 5%; top: 50%; transform: translateY(-50%); max-width: 40%; max-height: 100%;} #sec_five .swiper_people .swiper-slide.swiper-slide-active{filter: brightness(1);} @media screen and (max-width : 1400px) { #sec_five .floating_img{max-width: 27%;} } @media screen and (max-width : 1000px) { #sec_five .swiper_people .swiper-slide{height: 350px;} #sec_five .floating_img{max-width: 27%; top: 0%; right: 19%;} #sec_five .swiper_people .swiper-container{padding: 98px 0 0;} #sec_five .swiper_people .swiper-slide .emoji{max-width: 35%; top: 20%;} } @media screen and (max-width : 768px) { #sec_five .swiper_people .swiper-slide{height: 280px;} #sec_five .swiper_people .swiper-slide .people_txt{left: 12%;} } @media screen and (max-width : 550px) { #sec_five .swiper_people .swiper-slide{height: 210px;} #sec_five .swiper_people .swiper-slide .people_txt{left: 12%;} #sec_five .swiper_people .swiper-slide .people_txt h3{font-size: 18px !important; margin-bottom: 5px;} #sec_five .swiper_people .swiper-slide .people_txt p{font-size: 13px !important; letter-spacing:-0.2px; line-height:16px} #sec_five .swiper_people .swiper-container{padding: 40px 0 0;} #sec_five .swiper_people .swiper-slide .emoji{max-width: 25%; top: 25%;} #sec_five .swiper_people .swiper-slide:nth-child(3) .emoji{max-width: 25%; top: 10%;} #sec_five .swiper_people .swiper-slide:nth-child(7) .emoji{max-width: 25%; top: 10%;} } /* 여섯번째 페이지 */ #sec_six{width: 100%; padding: 100px 0 80px;} #sec_six .inner{display: flex; flex-wrap: wrap; margin-bottom: 60px;} #sec_six > h5{text-align: center;} #sec_six > p{text-align: center; padding-top: 5px;} #sec_six .contact_info{width: 480px; background: #1edc1f; border-radius: 80px 40px 40px 80px;box-shadow: 2px 2px 35px -2px #1edc1f; display: flex; padding: 55px 20px 50px 30px; position: relative;} #sec_six .contact_form{width: calc(100% - 480px); background: #fff; border-radius: 40px 80px 80px 40px; box-shadow: 2px 2px 35px -2px #1edc1f; position: relative; padding: 30px 50px 20px 60px;} #sec_six .contact_info::after{content: ""; background: url(../img/common/foot_logo_maison.png) no-repeat; position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; width: 140px; height: 28px; background-size: contain; background-position: center; filter: brightness(0);} #sec_six .contact_form::after{content: ""; width: 0; height: calc(100% - 52px); border-left: 4px dashed #000; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);} #sec_six .contact_info .info_left{color: #000;margin-right: 20px;} #sec_six .contact_info > img{max-height: 90%;} #sec_six .contact_info .info_left h4{background: #000; color: #1edc1f; text-align: center; display: inline-block; padding: 10px 15px;} #sec_six .contact_info .info_left span{display: block; padding: 20px 0 30px;} #sec_six .contact_info .info_left img{max-width: 95%;} #sec_six .contact_form .form_top{border-bottom: 2px solid #1edc1f; box-sizing: border-box; display: flex; justify-content: space-between; padding-bottom: 5px;} #sec_six .contact_form .form_top span{font-size: 12px;} #sec_six .contact_form .form_bottom{width: 100%;} #sec_six .contact_form .form_bottom ul{display: flex; justify-content: space-between; align-items: center;} #sec_six .contact_form .form_bottom ul li{width: 33%; font-size: 14px; display: flex; justify-content: flex-end;} #sec_six .contact_form .form_bottom ul li span{color: #9fa0a0; display: inline-block; margin-right: 5px;} #sec_six .contact_form .form_bottom ul li p{display: inline-block; color: #1edc1f; border: 1px solid #1edc1f; box-sizing: border-box; font-style: italic; font-weight: bold; /*width: calc(100% - 160px);*/ text-align: center; padding: 3px 20%; font-size: 12px;} @media screen and (max-width : 1400px) { #sec_six .contact_info{width: 390px;} #sec_six .contact_form{width: calc(100% - 390px); padding: 30px 50px 20px 30px;} #sec_six .contact_form .form_bottom ul li p{padding: 3px 10%;} } @media screen and (max-width : 1000px) { #sec_six{padding: 0 0 50px;} #sec_six .contact_info{width: 100%; justify-content: space-between; height: 430px; padding: 30px 20px 50px 30px; border-radius: 50px 50px 20px 20px;} #sec_six .contact_form{width: calc(100%); border-radius: 20px 20px 50px 50px;} #sec_six .contact_form::after{content: ""; width: calc(100% - 35px); height: 0; border-top: 3px dashed #000; position: absolute; left: 50%; top: -1px; transform: translate(-50%, 0);} #sec_six .contact_info .info_left img{max-width: 60%;} #sec_six .contact_info .info_left span{padding: 10px 0 20px;} #sec_six .contact_form .form_bottom ul li{font-size: 12px;} #sec_six .contact_form .form_bottom ul li p{font-size: 10px;} } @media screen and (max-width : 768px){ #sec_six .contact_info{padding: 30px 20px 50px;} #sec_six .contact_form{padding: 20px 20px 30px;} #sec_six .contact_form .form_top span{font-size: 10px;} #sec_six .contact_form .form_bottom ul{flex-wrap: wrap; justify-content: flex-start;} #sec_six .contact_form .form_bottom ul li{font-size: 10px; width: 100%; justify-content: space-between; margin-bottom: 2px;} #sec_six .contact_form .form_bottom ul li p{font-size: 8px; width: 180px;} } @media screen and (max-width : 550px){ #sec_six .contact_info{padding: 30px 12px 50px; height: 360px;} #sec_six .contact_form{padding: 20px 12px 30px;} #sec_six .contact_info .info_left h3{font-size: 25px !important;} #sec_six .contact_info .info_left h4{font-size: 35px !important;} #sec_six .contact_form .form_bottom ul li p{font-size: 8px; width: 140px;} } /* 하단 고정 scroll */ .fix_line_scroll{width: 100%; height: 40px; background: #1edc1f; color: #000; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 99999999;} .fix_line_scroll ul{animation: scroll_txt 40s linear infinite; white-space: nowrap; display: flex; align-items: center; height: 100%;} .fix_line_scroll ul li{font-family: ‘SUIT Variable’, sans-serif; font-size: 24px; font-weight: 800; line-height: 38px; display: inline-block; margin: 0 20px;} @keyframes scroll_txt { 0%{transform: translateX(calc(100% - 2500px));} 100%{transform: translateX(-100%);} } @media screen and (max-width : 1200px) { .fix_line_scroll{height: 35px;} .fix_line_scroll ul{animation: scroll_txt 30s linear infinite;} .fix_line_scroll ul li{font-size: 20px; line-height: 32px;} @keyframes scroll_txt { 0%{transform: translateX(calc(100% - 1400px));} 100%{transform: translateX(-100%);} } } @media screen and (max-width : 768px) { .fix_line_scroll{height: 30px;} .fix_line_scroll ul{animation: scroll_txt 15s linear infinite;} .fix_line_scroll ul li{font-size: 17px; line-height: 15px;} @keyframes scroll_txt { 0%{transform: translateX(calc(100% - 900px));} 100%{transform: translateX(-100%);} } }