/* PC */ @media screen and (min-width: 1201px) { /* */ /* common */ /* */ .contitle_wrap{width: 92%; max-width: 1600px; margin: 0 auto; padding-top: 120px; position: relative;} .contitle_wrap p{font-size: 1.4em; color: #06793e; font-family: 'SUIT Variable', sans-serif; font-weight: 900; margin-bottom: 20px; transition-duration: 0.5s;} .contitle_wrap h2{font-size: 2.7em; font-weight: 900; line-height: 1.2em; transition-duration: 0.5s;} .more_btn{border: 1px solid #313131; padding: 10px 30px; background-color: #fff; border-radius: 19px; color: #313131;} /* */ /* topBanner */ /* */ #topBanner{position: relative; background-color: #F9E5C4; height: 100vh;} #topBanner .top_list>li{position: absolute; left: 0; top: 0; background-image: url(../img/topBanner0.jpg); width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; display: none;} #topBanner .top_list>li:first-child{display: block;} #topBanner ul li>div{position: absolute; z-index: 1; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%);} #topBanner ul li>div h2{text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); color: #fff; transition-duration: 0.5s; font-size: 4em; margin-bottom: 20px; font-family: 'SUIT Variable', sans-serif; font-weight: 900;} #topBanner ul li>div p{color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); font-size: 1.4em;} /* 탑배너 controls */ #topBanner .controls{position: absolute; width: 90%; height: 10px; left: 50%; bottom: 20px; transform: translateX(-50%); background-color: rgba(255,255,255,0.5); z-index: 1;display: flex; border-radius: 5px;} #topBanner .controls li{position: relative; width: 33.33%; height: 10px; cursor: pointer; transition-duration: 0.5s;} #topBanner .controls li.select{background-color: #06793e; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box;} #topBanner .top_play{ position: absolute; left: 50%; bottom: 50px; width: 20px; height: 20px; background: none; border: none; background-image: url(../img/play_btn_spirte.png); background-color: #000;} /* */ /* history */ /* */ #history{position: relative; background-color: white; border-radius: 0 0 30px 30px; overflow: hidden; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);} #history .history_inner .history_page_wrap{position: relative;} #history .history_inner .history_page{position: relative; height: 100vh; display: flex; align-items: center; justify-content: right;} #history .history_inner .history_page>div:first-child{width: 40%;} #history .history_inner .history_page>div:last-child{width: 55%;} /*텍스트 */ #history .history_inner .history_page .history_text_wrap{position: relative; left: -100px; transition-duration: 0.5s; opacity: 0;} #history .history_inner .history_page .history_text_wrap .history_context{position: relative; width: 80%; margin: 0 auto;} #history .history_inner .history_page .history_text_wrap .history_context h3{position: relative; font-size: 2em; font-weight: bold; margin-bottom: 20px;} #history .history_inner .history_page .history_text_wrap .history_context h3::after{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-color: #06793e; left: -30px; top: -20px; border-radius: 50%;} #history .history_inner .history_page .history_text_wrap .history_context p{line-height: 1.6em; height: 4.8em; text-align: justify;} /* 우측_이미지 */ #history .history_inner div.history_page .history_img_wrap{position: relative; right: -100px; transition-duration: 0.5s; opacity: 0;} #history .history_inner div.history_page .history_img_wrap .history_img{border-radius: 20px 0 0 20px; overflow: hidden;} #history .history_inner .history_page .history_img_wrap .history_img{overflow: hidden;} #history .history_inner .history_page .history_img_wrap .history_img img{width: 100%;} /* 더 알아보기 버튼 */ #history .history_inner>div:last-child a{text-align: center; margin: 50px 0;} #history .history_inner>div:last-child a span{font-size: 1.4em; font-weight: bold; color: #06793e; display: block; margin-top: 10px;} /* */ /*midBanner*/ /* */ #midBanner{position: relative; margin-top: -30px;;} #midBanner div{position: relative; transition-duration: 0.5s; height: 530px; background-image: url(../img/midBanner.jpg); background-size: cover; background-position: center; background-attachment: fixed; display: flex; flex-direction: column; justify-content: center; z-index: -1;} #midBanner div h2{text-align: center; font-size: 2.5em; font-weight: bold; color: #fff; margin: 20px 0; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); position: relative; top: -100px; opacity: 0;} #midBanner div p{font-size: 18px; line-height: 1.6em; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} /* */ /*product*/ /* */ #product{position: relative; height: 100vh; background-image: url(../img/product_bg0.jpg); background-size: cover; background-position: center; overflow: hidden; margin-bottom: 150px; display: flex; flex-direction: column; justify-content: center;} #product .contitle_wrap{width: 100%; padding-top: 0;} /* 모바일 타이틀 제거 */ #product .product_wrap .m_contitle_wrap{display: none;} /* 텍스트|이미지배치 */ #product .product_wrap .product_list_wrap {position: relative; display: flex; justify-content: right; align-items: center;} #product .product_wrap .product_list_wrap .pd_about{width: 39%; margin-right: 2%; height: 70vh;} #product .product_wrap .product_list_wrap .pd_img{position: relative; width: 55%; } /* more버튼 */ #product .more_btn{background: none; padding: 10px 40px;} /* 텍스트 */ #product .product_wrap .product_list_wrap .pd_about{position: relative; display: flex; flex-direction: column; justify-content: space-between; left: -100px; opacity: 0;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul{position: relative; width: 100%; height: 250px;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li:first-child{display: block; } #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li{display: none; position: absolute; padding-left: 10%; left: 0; top: 0;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li h3{font-size: 2em; font-weight: bold; margin-bottom: 20px;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li h3 span{font-size: 15px; display: block; line-height: 1.6em; font-weight: normal; margin-bottom: 4px;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li p{position: relative; font-size: 1.1em; margin-bottom: 20px; line-height: 1.6em; text-align: justify; white-space: nowrap;} /* 컨트롤즈 */ #product .product_wrap .product_list_wrap .pd_about .product_controls{align-self: flex-end; display: flex; flex-direction: column; align-items: center;position: relative; transition-duration: 0.5s;} #product .product_wrap .product_list_wrap .pd_about .product_controls p{font-size: 1.4em; font-weight: bold; text-align: center;} #product .product_wrap .product_list_wrap .pd_about .product_controls p span{display: inline-block; width: 1.6em; font-size:1.5em; font-weight: bold; color: #06793e;} #product .product_wrap .product_list_wrap .pd_about .product_controls button{padding: 5px 20px; background: none; border: 1px solid #313131; border-radius: 15px;} #product .product_wrap .product_list_wrap .pd_about .product_controls button:last-child{margin-left: 20px;} /* 이미지 */ #product .product_wrap .product_list_wrap .pd_img{position: relative; right: -100px; opacity: 0;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list{position: relative; border-radius: 20px 0 0 20px; overflow: hidden;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:first-child{display: block; position: relative;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li{display: none; position: absolute; width: 100%; height: 100%;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li div{width: 100%; background-size: cover; background-position: center; height: 70vh;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(1) div{background-image: url(../img/product0.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(2) div{background-image: url(../img/product1.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(3) div{background-image: url(../img/product2.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(4) div{background-image: url(../img/product3.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(5) div{background-image: url(../img/product4.jpg);} /* */ /* enjoy */ /* */ #enjoy{position: relative; margin-bottom: 150px;} #enjoy .enjoy_inner{display: flex;} #enjoy .enjoy_inner .enjoy_img{transition-duration: 0.5s; position: relative; width: 55%; background-image: url(../img/enjoy0.jpg); background-position: center; background-size: cover; border-radius: 0 20px 0 0;} #enjoy .enjoy_inner .enjoy_about{position: relative; width: 45%;} #enjoy .enjoy_inner .enjoy_about .enjoy_list{position: relative; padding: 50px 0 100px 0; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .contitle_wrap{transition-duration: 0.5s; margin-bottom: 40px;} /* 배경 회색 */ #enjoy .enjoy_inner .enjoy_about .enjoy_list::after{position:absolute; content: ""; display: block; background-color: #f0f0f0; width: 110%; height: 100%; bottom: 0; right: 0; z-index: -2; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul{position: relative; z-index: 2;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li{position: relative; cursor: pointer; padding: 30px 40px; box-sizing: border-box; top: -100px; opacity: 0;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li h3{font-size: 1.6em; font-weight: bold; margin-bottom: 10px;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li p{font-size: 1.1em; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select::after{content: ""; display: block; position: absolute; width: calc(92% + 120px); height: 100%; background-color: #06793e; top: 0; left: -100px; border-radius: 20px; z-index: -1; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select::before{content: ""; display: block; position: absolute; width: 40px; height: 40px; background-color: #F9E5C4; top: 50%; left: -60px; border-radius: 20px; z-index: 0; background-image: url(../img/arrow_left_c.png); background-size: cover; transform: translateY(-50%);} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select a h3{color:#fff;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select p{color:#fff;} /* */ /* event */ /* */ #event{position: relative; box-sizing: border-box; padding: 80px 0;} #event::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 100%; height: 50%; bottom: 0; z-index: -1;} #event .event_wrap{position: relative; overflow: hidden; display: flex; width: 92%; margin: 0 auto; max-width: 1600px; align-items: center; } #event .event_left{position: relative; width: 18%;} #event .event_left .contitle_wrap{padding: 0; width: 100%;} #event .event_left .event_btn_wrap{margin-top: 40px;} #event .event_left .event_btn{background-color: #fff; width: 40px; height: 40px; border-radius: 21px; border:1px solid #06793e;} #event .event_left .next_btn{margin-left: 30px;} #event .event_left .event_btn img{width: 100%;} #event .event_left .more{width: 130px; height: 40px; margin: 40px 0; background-color: #06793e; color: #fff; line-height: 40px; text-align: center; border-radius: 20px; border: none;} /* 이벤트리스트 */ #event .event_right{position: relative; width: 80%; overflow: hidden; height: 450px;} #event .event_right .event_list{position: absolute; left: 0; width: 125%; height: 100%; display: flex; align-items: center;} #event .event_right .event_list::after{display: block; content: ""; clear: both;} #event .event_right .event_list li{top:100px; opacity: 0; position: relative; width: 20%; overflow: hidden; box-sizing: border-box; float: left; padding-left: 2%; } #event .event_right .event_list li .img_box{display: flex; border-radius: 20px 20px 0 0; overflow: hidden;} #event .event_right .event_list li .img_box img{position: relative; width: 100%;} #event .event_right .event_list li:first-child{padding-left: 0;} /* 이벤트리스트 텍스트 박스 */ #event .event_right .event_list li .text_box{overflow: hidden; position: relative; background-color: #fff; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; transition-duration: 0.5s; border-radius: 0 0 20px 20px;} #event .event_right .event_list li .text_box .event_title{padding: 4px 2%; box-sizing: border-box; font-size: 1.1em; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px;} #event .event_right .event_list li .text_box p:first-of-type{padding: 0 2%; box-sizing: border-box; font-size: 0.9em; display: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10px;} #event .event_right .event_list li:first-child .text_box .event_text{display: block} #event .event_right .event_list li .text_box .more{box-sizing: border-box; transition-duration: 0.5s; padding: 2px 2%; text-align: center; position:relative; color:#555; } #event .event_right .event_list li .text_box .more:hover{background-color: #06793e;} #event .event_right .event_list li .text_box .more:hover a{color: #fff;} #event .event_right .event_list li .text_box .more:hover a span{color: #f9e5c4;} #event .event_right .event_list li .text_box .more a{font-size: 0.7em;} #event .event_right .event_list li .text_box .more a span{color: #06793e;} #event .event_right .event_list li:first-child .img_box img:last-child{left: -100%;} #event .event_right .event_list li:first-child .text_box p:first-of-type{display: block;} /* */ /* notice */ /* */ #notice{position: relative; background-color: #F9E5C4; padding: 150px 0;} /* 타이틀 common 너비값 제거 */ #notice .contitle_wrap{width: 100%; margin-bottom: 40px; padding-top: 0;} #notice .notice_inner{position: relative; display: flex; max-width: 1600px; width: 92%; margin: 0 auto; align-items: center; justify-content: space-between;} #notice .notice_inner>div:first-child{position: relative; width: 45%; transition-duration: 0.5s;} #notice .notice_inner>div:last-child{position: relative; width: 50%;} #notice .notice_inner .notice_wrap ul{width: 100%;} #notice .notice_inner .notice_wrap ul li{line-height: 60px; border-bottom: 1px solid #06793e;} #notice .notice_inner .notice_wrap ul li:last-child{border: none;} #notice .notice_inner .notice_wrap ul li a{display: flex; color: #aaa; justify-content: space-between; align-items: center; font-size: 0.9em; font-weight: normal;} #notice .notice_inner .notice_wrap ul li a span{color: #313131; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; box-sizing: border-box;} #notice .notice_inner .notice_video>div{position: relative; overflow: hidden; border-radius: 20px; background-color: #000;} #notice .notice_inner .notice_video>div iframe{width: 100%;} #notice .notice_inner .notice_wrap ul li:hover a{color: #313131;} #notice .notice_inner .notice_wrap ul li:hover a span{color: #06793e; font-weight: bold;} } /* Tablet 가로 */ @media screen and (min-width: 801px) and (max-width: 1200px){ /* */ /* common */ /* */.contitle_wrap{width: 92%; margin: 0 auto; padding-top: 100px; position: relative;} .contitle_wrap p{font-size: 1.3em; color: #06793e; font-family: 'SUIT Variable', sans-serif; font-weight: 900; margin-bottom: 20px; transition-duration: 0.5s;} .contitle_wrap h2{font-size: 2.5em; font-weight: bold; line-height: 1.2em; transition-duration: 0.5s;} .more_btn{border: 1px solid #313131; padding: 10px 30px; background-color: #fff; border-radius: 19px; color: #313131;} /* */ /* topBanner */ /* */ #topBanner{position: relative; background-color: #F9E5C4; height: 100vh;} #topBanner .top_list>li{position: absolute; left: 0; top: 0; background-image: url(../img/topBanner0.jpg); width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; display: none;} #topBanner .top_list>li:first-child{display: block;} #topBanner ul li>div{position: absolute; z-index: 1; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%);} #topBanner ul li>div h2{text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); color: #fff; transition-duration: 0.5s; font-size: 3.6em; margin-bottom: 20px; font-family: 'SUIT Variable', sans-serif; font-weight: 900; white-space: nowrap;} #topBanner ul li>div p{color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); font-size: 1.4em; white-space: nowrap;} /* 탑배너 controls */ #topBanner .controls{position: absolute; width: 90%; height: 10px; left: 50%; bottom: 20px; transform: translateX(-50%); background-color: rgba(255,255,255,0.5); z-index: 1;display: flex; border-radius: 5px;} #topBanner .controls li{position: relative; width: 33.33%; height: 10px; cursor: pointer; transition-duration: 0.5s;} #topBanner .controls li.select{background-color: #06793e; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box;} #topBanner .top_play{ position: absolute; left: 50%; bottom: 50px; width: 20px; height: 20px; background: none; border: none; background-image: url(../img/play_btn_spirte.png); background-color: #000;} /* */ /* history */ /* */ #history{position: relative; background-color: white; border-radius: 0 0 30px 30px; overflow: hidden; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);} #history .history_inner .history_page{position: relative; height: 100vh; display: flex; align-items: center; justify-content: right;} #history .history_inner .history_page>div:first-child{width: 40%;} #history .history_inner .history_page>div:last-child{width: 55%;} /*텍스트 */ #history .history_inner .history_page .history_text_wrap{position: relative; left: -100px; transition-duration: 0.5s; opacity: 0;} #history .history_inner .history_page .history_text_wrap .history_context{width: 80%; margin: 0 auto;} #history .history_inner .history_page .history_text_wrap .history_context h3{position: relative; font-size: 2em; font-weight: bold; margin-bottom: 20px;} #history .history_inner .history_page .history_text_wrap .history_context h3::after{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-color: #06793e; left: -30px; top: -20px; border-radius: 50%;} #history .history_inner .history_page .history_text_wrap .history_context p{line-height: 1.6em; height: 6.4em; text-align: justify;} /* 우측_이미지 */ #history .history_inner div.history_page .history_img_wrap{position: relative; right: -100px; transition-duration: 0.5s; opacity: 0;} #history .history_inner div.history_page .history_img_wrap .history_img{border-radius: 20px 0 0 20px; overflow: hidden;} #history .history_inner .history_page .history_img_wrap .history_img{overflow: hidden;} #history .history_inner .history_page .history_img_wrap .history_img img{width: 100%;} /* 더 알아보기 버튼 */ #history .history_inner>div:last-child a{text-align: center; margin: 50px 0;} #history .history_inner>div:last-child a span{font-size: 1.4em; font-weight: bold; color: #06793e; display: block; margin-top: 10px;} /* */ /*midBanner*/ /* */ #midBanner{position: relative; margin-top: -30px;;} #midBanner div{position: relative; transition-duration: 0.5s; height: 430px; background-image: url(../img/midBanner.jpg); background-size: cover; background-position: center; background-attachment: fixed; display: flex; flex-direction: column; justify-content: center; z-index: -1;} #midBanner div h2{text-align: center; font-size: 2.5em; font-weight: bold; color: #fff; margin: 20px 0; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} #midBanner div p{font-size: 18px; line-height: 1.6em; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} /* */ /*product*/ /* */ #product{position: relative; height: 100vh; background-image: url(../img/product_bg0.jpg); background-size: cover; background-position: center; overflow: hidden; margin-bottom: 150px; display: flex; flex-direction: column; justify-content: center;} #product .contitle_wrap{width: 100%; padding-top: 0;} /* 모바일 타이틀 제거 */ #product .product_wrap .m_contitle_wrap{display: none;} /* 텍스트|이미지배치 */ #product .product_wrap .product_list_wrap {position: relative; display: flex; justify-content: right; align-items: center;} #product .product_wrap .product_list_wrap .pd_about{width: 39%; margin-right: 2%; height: 70vh;} #product .product_wrap .product_list_wrap .pd_img{position: relative; width: 55%; } /* more버튼 */ #product .more_btn{background: none; padding: 10px 40px;} /* 텍스트 */ #product .product_wrap .product_list_wrap .pd_about{position: relative; display: flex; flex-direction: column; justify-content: space-between; } #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul{position: relative; width: 100%; height: 230px;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li:first-child{display: block; } #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li{display: none; position: absolute; left: 0; top: 0;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li h3{font-size: 2em; font-weight: bold; margin-bottom: 20px;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li h3 span{font-size: 15px; display: block; line-height: 1.6em; font-weight: normal; margin-bottom: 4px;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li p{position: relative; font-size: 1.1em; margin-bottom: 20px; line-height: 1.6em; text-align: justify; white-space: nowrap; text-shadow: 0 0 4px rgba(255,255,255,0.5);} /* 컨트롤즈 */ #product .product_wrap .product_list_wrap .pd_about .product_controls{align-self: flex-end; display: flex; flex-direction: column; align-items: center;position: relative; transition-duration: 0.5s;} #product .product_wrap .product_list_wrap .pd_about .product_controls p{font-size: 1.4em; font-weight: bold; text-align: center;} #product .product_wrap .product_list_wrap .pd_about .product_controls p span{display: inline-block; width: 1.6em; font-size:1.5em; font-weight: bold; color: #06793e;} #product .product_wrap .product_list_wrap .pd_about .product_controls button{padding: 5px 20px; background: none; border: 1px solid #313131; border-radius: 15px;} #product .product_wrap .product_list_wrap .pd_about .product_controls button:last-child{margin-left: 20px;} /* 이미지 */ #product .product_wrap .product_list_wrap .pd_img .pd_img_list{position: relative; border-radius: 20px 0 0 20px; overflow: hidden;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:first-child{display: block; position: relative;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li{display: none; position: absolute; width: 100%; height: 100%;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li div{width: 100%; background-size: cover; background-position: center; height: 70vh;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(1) div{background-image: url(../img/product0.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(2) div{background-image: url(../img/product1.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(3) div{background-image: url(../img/product2.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(4) div{background-image: url(../img/product3.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(5) div{background-image: url(../img/product4.jpg);} /* */ /* enjoy */ /* */ #enjoy{position: relative; margin-bottom: 150px; } #enjoy .enjoy_inner{display: flex;} #enjoy .enjoy_inner .enjoy_img{transition-duration: 0.5s; position: relative; width: 55%; background-image: url(../img/enjoy0.jpg); background-position: center; background-size: cover; border-radius: 0 20px 0 0;} #enjoy .enjoy_inner .enjoy_about{position: relative; width: 45%;} #enjoy .enjoy_inner .enjoy_about .enjoy_list{position: relative; padding: 30px 0 60px 0; transition-duration: 0.5s; } #enjoy .enjoy_inner .enjoy_about .contitle_wrap{transition-duration: 0.5s; margin-bottom: 30px; padding-top: 60px;} /* 배경 회색 */ #enjoy .enjoy_inner .enjoy_about .enjoy_list::after{position:absolute; content: ""; display: block; background-color: #f0f0f0; width: 110%; height: 100%; bottom: 0; right: 0; z-index: -2; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul{position: relative; z-index: 2;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li{position: relative; cursor: pointer; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li h3{font-size: 1.4em; font-weight: bold; margin-bottom: 10px;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li p{font-size: 1em; line-height: 1.6em; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select::after{content: ""; display: block; position: absolute; width: calc(92% + 120px); height: 100%; background-color: #06793e; top: 0; left: -100px; border-radius: 20px; z-index: -1; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select::before{content: ""; display: block; position: absolute; width: 40px; height: 40px; background-color: #F9E5C4; top: 50%; left: -60px; border-radius: 20px; z-index: 0; background-image: url(../img/arrow_left_c.png); background-size: cover; transform: translateY(-50%);} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select a h3{color:#fff;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select p{color:#fff;} /* */ /* event */ /* */ #event{position: relative; box-sizing: border-box; padding: 60px 0;} #event::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 100%; height: 50%; bottom: 0; z-index: -1;} #event .event_wrap{position: relative; overflow: hidden; display: flex; width: 92%; margin: 0 auto; max-width: 1600px; align-items: center;} #event .event_left{position: relative; width: 26%;} #event .event_left .contitle_wrap{padding: 0; width: 100%;} #event .event_left .event_btn_wrap{margin-top: 40px;} #event .event_left .event_btn{background-color: #fff; width: 40px; height: 40px; border-radius: 21px; border:1px solid #06793e;} #event .event_left .next_btn{margin-left: 30px;} #event .event_left .event_btn img{width: 100%;} #event .event_left .more{width: 130px; height: 40px; margin: 40px 0; background-color: #06793e; color: #fff; line-height: 40px; text-align: center; border-radius: 20px; border: none;} /* 이벤트리스트 */ #event .event_right{position: relative; width: 72%; overflow: hidden; height: 400px;} #event .event_right .event_list{position: absolute; left: 0; width: 166.66%; height: 100%; display: flex; align-items: center;} #event .event_right .event_list::after{display: block; content: ""; clear: both;} #event .event_right .event_list li{top:100px; opacity: 0; position: relative; width: 20%; overflow: hidden; box-sizing: border-box; float: left; padding-left: 2%; } #event .event_right .event_list li .img_box{display: flex; border-radius: 20px 20px 0 0; overflow: hidden;} #event .event_right .event_list li .img_box img{position: relative; width: 100%;} #event .event_right .event_list li:first-child{padding-left: 0;} /* 이벤트리스트 텍스트 박스 */ #event .event_right .event_list li .text_box{overflow: hidden; position: relative; background-color: #fff; border-radius: 0 0 20px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; transition-duration: 0.5s;} #event .event_right .event_list li .text_box .event_title{padding: 4px 2%; box-sizing: border-box; font-size: 1.1em; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px;} #event .event_right .event_list li .text_box p:first-of-type{padding: 0 2%; box-sizing: border-box; font-size: 0.9em; display: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10px;} #event .event_right .event_list li:first-child .text_box .event_text{display: block} #event .event_right .event_list li .text_box .more{box-sizing: border-box; transition-duration: 0.5s; padding: 2px 2%; text-align: center; position:relative; color:#555; } #event .event_right .event_list li .text_box .more:hover{background-color: #06793e;} #event .event_right .event_list li .text_box .more:hover a{color: #fff;} #event .event_right .event_list li .text_box .more:hover a span{color: #f9e5c4;} #event .event_right .event_list li .text_box .more a{font-size: 0.7em;} #event .event_right .event_list li .text_box .more a span{color: #06793e;} #event .event_right .event_list li:first-child .img_box img:last-child{left: -100%;} #event .event_right .event_list li:first-child .text_box p:first-of-type{display: block;} /* */ /* notice */ /* */ #notice{position: relative; background-color: #F9E5C4; padding: 100px 0 150px 0;} /* 타이틀 common 너비값 제거 */ #notice .contitle_wrap{width: 100%; margin-bottom: 40px; padding-top: 0;} #notice .notice_inner{position: relative; display: flex; width: 92%; margin: 0 auto; align-items: center; justify-content: space-between;} #notice .notice_inner>div:first-child{position: relative; width: 46%; transition-duration: 0.5s;} #notice .notice_inner>div:last-child{position: relative; width: 50%;} #notice .notice_inner .notice_wrap ul{width: 100%;} #notice .notice_inner .notice_wrap ul li{line-height: 60px; border-bottom: 1px solid #06793e;} #notice .notice_inner .notice_wrap ul li:last-child{border: none;} #notice .notice_inner .notice_wrap ul li a{display: flex; color: #aaa; justify-content: space-between; align-items: center; font-size: 0.9em; font-weight: normal;} #notice .notice_inner .notice_wrap ul li a span{color: #313131; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; box-sizing: border-box;} #notice .notice_inner .notice_video>div{position: relative; overflow: hidden; border-radius: 20px; background-color: #000;} #notice .notice_inner .notice_video>div iframe{width: 100%;} #notice .notice_inner .notice_wrap ul li:hover a{color: #313131;} #notice .notice_inner .notice_wrap ul li:hover a span{color: #06793e; font-weight: bold;} } /* Tablet 세로 */ @media screen and (min-width: 601px) and (max-width: 800px){ /* */ /* common */ /* */.contitle_wrap{width: 92%; margin: 0 auto; padding-top: 80px; position: relative;} .contitle_wrap p{font-size: 1.3em; color: #06793e; font-family: 'SUIT Variable', sans-serif; font-weight: 900; margin-bottom: 12px; transition-duration: 0.5s;} .contitle_wrap h2{font-size: 2.2em; font-weight: bold; line-height: 1.2em; transition-duration: 0.5s;} .more_btn{border: 1px solid #313131; padding: 10px 30px; background-color: #fff; border-radius: 19px; color: #313131;} /* */ /* topBanner */ /* */ #topBanner{position: relative; background-color: #F9E5C4; height: 100vh;} #topBanner .top_list>li{position: absolute; left: 0; top: 0; background-image: url(../img/topBanner0.jpg); width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; display: none;} #topBanner .top_list>li:first-child{display: block;} #topBanner ul li>div{position: absolute; z-index: 1; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%);} #topBanner ul li>div h2{text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); color: #fff; transition-duration: 0.5s; font-size: 3em; margin-bottom: 20px; font-family: 'SUIT Variable', sans-serif; font-weight: 900; white-space: nowrap;} #topBanner ul li>div p{color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); font-size: 1.2em; white-space: nowrap;} /* 탑배너 controls */ #topBanner .controls{position: absolute; width: 90%; height: 10px; left: 50%; bottom: 20px; transform: translateX(-50%); background-color: rgba(255,255,255,0.5); z-index: 1;display: flex; border-radius: 5px;} #topBanner .controls li{position: relative; width: 33.33%; height: 10px; cursor: pointer; transition-duration: 0.5s;} #topBanner .controls li.select{background-color: #06793e; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box;} #topBanner .top_play{ position: absolute; left: 50%; bottom: 50px; width: 20px; height: 20px; background: none; border: none; background-image: url(../img/play_btn_spirte.png); background-color: #000;} /* */ /* history */ /* */ #history{position: relative; background-color: white; border-radius: 0 0 30px 30px; overflow: hidden; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);} #history .history_inner .history_page{position: relative; height: 500px; display: flex; align-items: center; justify-content: right;} #history .history_inner .history_page>div:first-child{width: 40%;} #history .history_inner .history_page>div:last-child{width: 55%;} /*텍스트 */ #history .history_inner .history_page .history_text_wrap .history_context{width: 80%; margin: 0 auto;} #history .history_inner .history_page .history_text_wrap .history_context h3{position: relative; font-size: 2em; font-weight: bold; margin-bottom: 20px;} #history .history_inner .history_page .history_text_wrap .history_context h3::after{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-color: #06793e; left: -30px; top: -20px; border-radius: 50%;} #history .history_inner .history_page .history_text_wrap .history_context p{line-height: 1.6em; height: 6.4em; text-align: justify;} /* 우측_이미지 */ #history .history_inner div.history_page .history_img_wrap .history_img{border-radius: 20px 0 0 20px; overflow: hidden;} #history .history_inner .history_page .history_img_wrap .history_img{overflow: hidden;} #history .history_inner .history_page .history_img_wrap .history_img img{width: 100%;} /* 더 알아보기 버튼 */ #history .history_inner>div:last-child a{text-align: center; margin: 50px 0;} #history .history_inner>div:last-child a span{font-size: 1.4em; font-weight: bold; color: #06793e; display: block; margin-top: 10px;} /* */ /*midBanner*/ /* */ #midBanner{position: relative; margin-top: -30px;;} #midBanner div{position: relative; transition-duration: 0.5s; height: 330px; background-image: url(../img/midBanner.jpg); background-size: cover; background-position: center; background-attachment: fixed; display: flex; flex-direction: column; justify-content: center; z-index: -1;} #midBanner div h2{text-align: center; font-size: 2em; font-weight: bold; color: #fff; margin: 20px 0; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} #midBanner div p{font-size: 16px; line-height: 1.6em; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} /* */ /*product*/ /* */ #product{position: relative; height: 100vh; background-image: url(../img/product_bg0.jpg); background-size: cover; background-position: center; overflow: hidden; margin-bottom: 100px; display: flex; flex-direction: column; justify-content: center;} /* 모바일 타이틀 사용 */ #product .product_wrap .m_contitle_wrap{width: 92%; margin-bottom: 2%;} /* 텍스트|이미지배치 */ #product .product_wrap .product_list_wrap {position: relative; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center;} #product .product_wrap .product_list_wrap .pd_about{width: 92%;} #product .product_wrap .product_list_wrap .pd_img{position: relative; width: 92%;} /* more버튼 */ #product .more_btn{display: none;} /* 텍스트 */ #product .product_wrap .product_list_wrap .pd_about{position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center;} #product .product_wrap .product_list_wrap .pd_about .contitle_wrap{display: none;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list{position: relative;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul{padding-top: 2%; position: relative; width: 601px; height: 15vh;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li:first-child{display: block; } #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li{display: none; position: absolute; text-align: center; left: 0; height: 0; width: 100%;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li h3{font-size: 1.6em; font-weight: bold; margin: 10px 0; text-align: center;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li h3 span{font-size: 14px; display: block; line-height: 1.6em; font-weight: normal;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li p{position: relative; font-size: 1.1em; margin-bottom: 10px; line-height: 1.4em; text-align: center; width: 92%; margin: 0 auto; word-break: keep-all;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li p br{display: none;} /* 컨트롤즈 */ #product .product_wrap .product_list_wrap .pd_about .product_controls{display: flex; flex-direction: column; align-items: center;position: relative; transition-duration: 0.5s; margin-bottom: 1%;} #product .product_wrap .product_list_wrap .pd_about .product_controls p{font-size: 1.4em; font-weight: bold; text-align: center;} #product .product_wrap .product_list_wrap .pd_about .product_controls p span{display: inline-block; width: 1.6em; font-size:1.5em; font-weight: bold; color: #06793e;} #product .product_wrap .product_list_wrap .pd_about .product_controls button{padding: 5px 20px; background: none; border: 1px solid #313131; border-radius: 15px;} #product .product_wrap .product_list_wrap .pd_about .product_controls button:last-child{margin-left: 20px;} /* 이미지 */ #product .product_wrap .product_list_wrap .pd_img .pd_img_list{position: relative; border-radius: 20px; overflow: hidden;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:first-child{display: block; position: relative;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li{display: none; position: absolute; width: 100%; height: 100%;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li div{width: 100%; background-size: cover; background-position: center; height: 46vh;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(1) div{background-image: url(../img/product0.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(2) div{background-image: url(../img/product1.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(3) div{background-image: url(../img/product2.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(4) div{background-image: url(../img/product3.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(5) div{background-image: url(../img/product4.jpg);} /* */ /* enjoy */ /* */ #enjoy{position: relative; margin-bottom: 100px; } #enjoy .enjoy_inner{display: flex; flex-direction: column-reverse;} #enjoy .enjoy_inner .enjoy_img{transition-duration: 0.5s; position: relative; width: 100%; height: 340px; background-image: url(../img/enjoy0.jpg); background-position: center; background-size: cover; border-radius: 0 0 20px 20px; } #enjoy .enjoy_inner .enjoy_about{position: relative; width: 100%;} #enjoy .enjoy_inner .enjoy_about .enjoy_list{position: relative; transition-duration: 0.5s; } #enjoy .enjoy_inner .enjoy_about .contitle_wrap{transition-duration: 0.5s; margin-bottom: 30px; padding-top: 60px;} /* 배경 회색 */ #enjoy .enjoy_inner .enjoy_about .enjoy_list::after{position:absolute; content: ""; display: block; background-color: #f0f0f0; width: 100%; height: 100%; bottom: 0; right: 0; z-index: -2; transition-duration: 0.5s; border-radius: 20px 20px 0 0;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul{position: relative; z-index: 2; display: flex;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li{position: relative; cursor: pointer; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li h3{font-size: 1.1em; font-weight: bold; margin-bottom: 10px;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li p{font-size: 0.9em; line-height: 1.4em; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select::after{content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: #06793e; top: 0; left: 0; border-radius: 20px 20px 0 0; z-index: -1; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select::before{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-color: #F9E5C4; bottom: -15px; left: 50%; border-radius: 15px; z-index: 0; background-image: url(../img/arrow_down_c.png); background-size: cover; transform: translateX(-50%);} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select a h3{color:#fff;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select p{color:#fff;} /* */ /* event */ /* */ #event{position: relative; box-sizing: border-box; padding: 40px 0;} #event::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 100%; height: 50%; bottom: 0; z-index: -1;} #event .event_wrap{position: relative; overflow: hidden; width: 92%; margin: 0 auto; } #event .event_left{position: relative; display: flex;} #event .event_left .contitle_wrap{padding: 0; width: 100%;} #event .event_left .event_all_btn{display: flex; flex-direction: row-reverse; align-items: center;} #event .event_left .event_btn_wrap{display: flex; margin-left: 40px;} #event .event_left .event_btn{background-color: #fff; width: 40px; height: 40px; border-radius: 21px; border:1px solid #06793e;} #event .event_left .next_btn{margin-left: 20px;} #event .event_left .event_btn img{width: 100%;} #event .event_left .more{width: 130px; height: 40px; margin: 20px 0; background-color: #06793e; color: #fff; line-height: 40px; text-align: center; border-radius: 20px; border: none;} /* 이벤트리스트 */ #event .event_right{position: relative; overflow: hidden; height: 350px;} #event .event_right .event_list{position: absolute; left: 0; width: 166.66%; height: 100%; display: flex; align-items: center; } #event .event_right .event_list::after{display: block; content: ""; clear: both;} #event .event_right .event_list li{top:100px; opacity: 0; position: relative; width: 20%; overflow: hidden; box-sizing: border-box; float: left; padding-left: 2%; } #event .event_right .event_list li .img_box{display: flex; border-radius: 20px 20px 0 0; overflow: hidden;} #event .event_right .event_list li .img_box img{position: relative; width: 100%;} #event .event_right .event_list li:first-child{padding-left: 0;} /* 이벤트리스트 텍스트 박스 */ #event .event_right .event_list li .text_box{overflow: hidden; position: relative; background-color: #fff; border-radius: 0 0 20px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; transition-duration: 0.5s;} #event .event_right .event_list li .text_box .event_title{padding: 4px 2%; box-sizing: border-box; font-size: 1.1em; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px;} #event .event_right .event_list li .text_box p:first-of-type{padding: 0 2%; box-sizing: border-box; font-size: 0.9em; display: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10px;} #event .event_right .event_list li:first-child .text_box .event_text{display: block} #event .event_right .event_list li .text_box .more{box-sizing: border-box; transition-duration: 0.5s; padding: 2px 2%; text-align: center; position:relative; color:#555; } #event .event_right .event_list li .text_box .more:hover{background-color: #06793e;} #event .event_right .event_list li .text_box .more:hover a{color: #fff;} #event .event_right .event_list li .text_box .more:hover a span{color: #f9e5c4;} #event .event_right .event_list li .text_box .more a{font-size: 0.7em;} #event .event_right .event_list li .text_box .more a span{color: #06793e;} #event .event_right .event_list li:first-child .img_box img:last-child{left: -100%;} #event .event_right .event_list li:first-child .text_box p:first-of-type{display: block;} /* */ /* notice */ /* */ #notice{position: relative; background-color: #F9E5C4; padding: 100px 0;} /* 타이틀 common 너비값 제거 */ #notice .contitle_wrap{width: 100%; margin-bottom: 40px; padding-top: 0;} #notice .notice_inner{position: relative; width: 92%; margin: 0 auto;} #notice .notice_inner>div:first-child{position: relative; transition-duration: 0.5s;} #notice .notice_inner>div:last-child{position: relative; } #notice .notice_inner .notice_wrap ul{width: 100%;} #notice .notice_inner .notice_wrap ul li{line-height: 60px; border-bottom: 1px solid #06793e;} #notice .notice_inner .notice_wrap ul li:last-child{border: none;} #notice .notice_inner .notice_wrap{margin-bottom: 50px;} #notice .notice_inner .notice_wrap ul li a{display: flex; color: #aaa; justify-content: space-between; align-items: center; font-size: 0.9em; font-weight: normal;} #notice .notice_inner .notice_wrap ul li a span{color: #313131; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; box-sizing: border-box;} #notice .notice_inner .notice_video>div{position: relative; overflow: hidden; border-radius: 20px; background-color: #000;} #notice .notice_inner .notice_video>div iframe{width: 100%;} #notice .notice_inner .notice_wrap ul li:hover a{color: #313131;} #notice .notice_inner .notice_wrap ul li:hover a span{color: #06793e; font-weight: bold;} } /* Mobile */ @media screen and (max-width: 600px) { /* */ /* common */ /* */.contitle_wrap{width: 92%; margin: 0 auto; padding-top: 0px; position: relative;} .contitle_wrap p{font-size: 1em; color: #06793e; font-family: 'SUIT Variable', sans-serif; font-weight: 900; margin-bottom: 4px; transition-duration: 0.5s;} .contitle_wrap h2{font-size: 1.6em; font-weight: bold; line-height: 1.2em; transition-duration: 0.5s;} .more_btn{border: 1px solid #313131; padding: 10px 30px; background-color: #fff; border-radius: 19px; color: #313131;} /* */ /* topBanner */ /* */ #topBanner{position: relative; background-color: #F9E5C4; height: 100vh;} #topBanner .top_list>li{position: absolute; left: 0; top: 0; background-image: url(../img/topBanner0.jpg); width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; display: none;} #topBanner .top_list>li:first-child{display: block;} #topBanner ul li>div{position: absolute; z-index: 1; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%);} #topBanner ul li>div h2{text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); color: #fff; transition-duration: 0.5s; font-size: 2em; margin-bottom: 20px; font-family: 'SUIT Variable', sans-serif; font-weight: 900; white-space: nowrap;} #topBanner ul li>div p{color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); font-size: 1em; white-space: nowrap;} /* 탑배너 controls */ #topBanner .controls{position: absolute; width: 90%; height: 10px; left: 50%; bottom: 20px; transform: translateX(-50%); background-color: rgba(255,255,255,0.5); z-index: 1;display: flex; border-radius: 5px;} #topBanner .controls li{position: relative; width: 33.33%; height: 10px; cursor: pointer; transition-duration: 0.5s;} #topBanner .controls li.select{background-color: #06793e; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box;} #topBanner .top_play{ position: absolute; left: 50%; bottom: 50px; width: 20px; height: 20px; background: none; border: none; background-image: url(../img/play_btn_spirte.png); background-color: #000;} /* */ /* history */ /* */ #history{position: relative; background-color: white; border-radius: 0 0 30px 30px; overflow: hidden; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3); padding-top: 80px;} #history .history_inner .history_page{position: relative; margin-top: 50px;} #history .history_inner .history_page>div:first-child{width: 92%; margin: 0 auto;} #history .history_inner .history_page>div:last-child{width: 92%; margin: 0 auto;} /*텍스트 */ #history .history_inner .history_page .history_text_wrap .history_context h3{position: relative; font-size: 1.4em; font-weight: bold; margin-bottom: 10px; text-align: center;} #history .history_inner .history_page .history_text_wrap .history_context p{line-height: 1.6em; height:4.8em; text-align: center; margin-bottom: 10px;} /* 우측_이미지 */ #history .history_inner div.history_page .history_img_wrap .history_img{border-radius: 20px; overflow: hidden;} #history .history_inner .history_page .history_img_wrap .history_img{overflow: hidden;} #history .history_inner .history_page .history_img_wrap .history_img img{width: 100%;} /* 더 알아보기 버튼 */ #history .history_inner>div:last-child a{text-align: center; margin: 50px 0;} #history .history_inner>div:last-child a span{font-size: 1.4em; font-weight: bold; color: #06793e; display: block; margin-top: 10px;} /* */ /*midBanner*/ /* */ #midBanner{position: relative; margin-top: -30px; overflow: hidden;} #midBanner div{position: relative; transition-duration: 0.5s; height: 280px; background-image: url(../img/midBanner.jpg); background-size: cover; background-position: center; background-attachment: fixed; display: flex; flex-direction: column; justify-content: center; z-index: -1;} #midBanner div h2{text-align: center; font-size: 1.4em; font-weight: bold; color: #fff; margin: 20px 0; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} #midBanner div p{font-size: 14px; line-height: 1.6em; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); word-break: keep-all; width: 90%; margin: 0 auto;} #midBanner div p br{display: none;} /* */ /*product*/ /* */ #product{position: relative; height: 100vh; background-image: url(../img/product_bg0.jpg); background-size: cover; background-position: center; overflow: hidden; margin-bottom: 100px; display: flex; flex-direction: column; justify-content: center;} /* 모바일 타이틀 사용 */ #product .product_wrap .m_contitle_wrap{width: 92%; margin-bottom: 20px;} /* 텍스트|이미지배치 */ #product .product_wrap .product_list_wrap {position: relative; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center;} #product .product_wrap .product_list_wrap .pd_about{width: 92%;} #product .product_wrap .product_list_wrap .pd_img{position: relative; width: 92%;} /* more버튼 */ #product .more_btn{display: none;} /* 텍스트 */ #product .product_wrap .product_list_wrap .pd_about{position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center;} #product .product_wrap .product_list_wrap .pd_about .contitle_wrap{display: none;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list{position: relative;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul{padding-top: 2%; position: relative; width: 360px; height: 18vh; margin-bottom: 3%;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li:first-child{display: block; } #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li{display: none; position: absolute; text-align: center; left: 0; height: 0; width: 100%;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li h3{font-size: 1.4em; font-weight: bold; margin-bottom: 4px; text-align: center;margin: 10px 0;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li h3 span{font-size: 13px; display: block; font-weight: normal;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li p{position: relative; font-size: 1em; margin-bottom: 10px; line-height: 1.4em; text-align: center; width: 92%; margin: 0 auto; word-break: keep-all;} #product .product_wrap .product_list_wrap .pd_about .pd_text_list ul li p br{display: none;} /* 컨트롤즈 */ #product .product_wrap .product_list_wrap .pd_about .product_controls{display: flex; flex-direction: column; align-items: center;position: relative; transition-duration: 0.5s; margin-bottom: 1%;} #product .product_wrap .product_list_wrap .pd_about .product_controls p{font-size: 1.2em; font-weight: bold; text-align: center;} #product .product_wrap .product_list_wrap .pd_about .product_controls p span{display: inline-block; width: 1.6em; font-size:1.3em; font-weight: bold; color: #06793e;} #product .product_wrap .product_list_wrap .pd_about .product_controls button{padding: 4px 15px; background: none; border: 1px solid #313131; border-radius: 15px;} #product .product_wrap .product_list_wrap .pd_about .product_controls button:last-child{margin-left: 10px;} /* 이미지 */ #product .product_wrap .product_list_wrap .pd_img .pd_img_list{position: relative; border-radius: 20px; overflow: hidden;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:first-child{display: block; position: relative;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li{display: none; position: absolute; width: 100%; height: 100%;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li div{width: 100%; background-size: cover; background-position: center; height: 45vh;} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(1) div{background-image: url(../img/product0.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(2) div{background-image: url(../img/product1.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(3) div{background-image: url(../img/product2.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(4) div{background-image: url(../img/product3.jpg);} #product .product_wrap .product_list_wrap .pd_img .pd_img_list li:nth-child(5) div{background-image: url(../img/product4.jpg);} /* */ /* enjoy */ /* */ #enjoy{position: relative; margin-bottom: 80px; } #enjoy .enjoy_inner{display: flex; flex-direction: column-reverse; width: 92%; margin: 0 auto;} #enjoy .enjoy_inner .enjoy_img{transition-duration: 0.5s; position: relative; width: 100%; height: 300px; background-image: url(../img/enjoy0.jpg); background-position: center; background-size: cover; border-radius: 0 0 20px 20px; } #enjoy .enjoy_inner .enjoy_about{position: relative; width: 100%;} #enjoy .enjoy_inner .enjoy_about .enjoy_list{position: relative; transition-duration: 0.5s; } #enjoy .enjoy_inner .enjoy_about .contitle_wrap{transition-duration: 0.5s; margin-bottom: 30px;} /* 배경 회색 */ #enjoy .enjoy_inner .enjoy_about .enjoy_list::after{position:absolute; content: ""; display: block; background-color: #f0f0f0; width: 100%; height: 100%; bottom: 0; right: 0; z-index: -2; transition-duration: 0.5s; border-radius: 20px 20px 0 0;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul{position: relative; z-index: 2; display: flex;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li{position: relative; cursor: pointer; width: 33.33%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; transition-duration: 0.5s; padding: 20px 0;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li h3{font-size: 1em; font-weight: 700; word-break: keep-all; text-align: center;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li p{display: none;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select::after{content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: #06793e; top: 0; left: 0; border-radius: 20px 20px 0 0; z-index: -1; transition-duration: 0.5s;} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select::before{content: ""; display: block; position: absolute; width: 24px; height: 24px; background-color: #F9E5C4; bottom: -15px; left: 50%; border-radius: 12px; z-index: 0; background-image: url(../img/arrow_down_c.png); background-size: cover; transform: translateX(-50%);} #enjoy .enjoy_inner .enjoy_about .enjoy_list ul li.enjoy_select a h3{color:#fff;} /* */ /* event */ /* */ #event{position: relative; box-sizing: border-box; padding: 50px 0;} #event .event_wrap{position: relative; overflow: hidden; width: 92%; margin: 0 auto; align-items: center;} #event::after{content: ""; display: block; position: absolute; width: 100%; height: 50%; background-color: #F9E5C4; bottom: 0; z-index: -1;} #event .event_left{position: relative; display: flex;} #event .event_left .contitle_wrap{padding: 0; width: 100%;} #event .event_left .event_all_btn{display: flex; flex-direction: column-reverse; align-items: center;} #event .event_left .event_btn_wrap{display: flex; margin-top: 10px;} #event .event_left .event_btn{background-color: #fff; width: 30px; height: 30px; border-radius: 16px; border:1px solid #06793e;} #event .event_left .next_btn{margin-left: 20px;} #event .event_left .event_btn img{width: 100%;} #event .event_left .more{width: 100px; height: 24px; background-color: #06793e; color: #fff; line-height: 24px; text-align: center; border-radius: 20px; border: none; font-size: 0.8em;} /* 이벤트리스트 */ #event .event_right{position: relative; overflow: hidden; height: 370px;} #event .event_right .event_list{position: absolute; left: 0; width: 250%; height: 100%; display: flex; align-items: center; } #event .event_right .event_list::after{display: block; content: ""; clear: both;} #event .event_right .event_list li{top:100px; opacity: 0; position: relative; width: 20%; overflow: hidden; box-sizing: border-box; float: left; padding-left: 2%; } #event .event_right .event_list li .img_box{display: flex; border-radius: 20px 20px 0 0; overflow: hidden;} #event .event_right .event_list li .img_box img{position: relative; width: 100%;} #event .event_right .event_list li:first-child{padding-left: 0;} /* 이벤트리스트 텍스트 박스 */ #event .event_right .event_list li .text_box{overflow: hidden; position: relative; background-color: #fff; border-radius: 0 0 20px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; transition-duration: 0.5s;} #event .event_right .event_list li .text_box .event_title{padding: 4px 2%; box-sizing: border-box; font-size: 1em; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px;} #event .event_right .event_list li .text_box p:first-of-type{padding: 0 2%; box-sizing: border-box; font-size: 0.9em; display: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10px;} #event .event_right .event_list li:first-child .text_box .event_text{display: block} #event .event_right .event_list li .text_box .more{box-sizing: border-box; transition-duration: 0.5s; padding: 2px 2%; text-align: center; position:relative; color:#555; } #event .event_right .event_list li .text_box .more:hover{background-color: #06793e;} #event .event_right .event_list li .text_box .more:hover a{color: #fff;} #event .event_right .event_list li .text_box .more:hover a span{color: #f9e5c4;} #event .event_right .event_list li .text_box .more a{font-size: 0.7em;} #event .event_right .event_list li .text_box .more a span{color: #06793e;} #event .event_right .event_list li:first-child .img_box img:last-child{left: -100%;} #event .event_right .event_list li:first-child .text_box p:first-of-type{display: block;} /* */ /* notice */ /* */ #notice{position: relative; background-color: #F9E5C4; padding: 50px 0 100px 0;} /* 타이틀 common 너비값 제거 */ #notice .contitle_wrap{width: 100%; margin-bottom: 40px; padding-top: 0;} #notice .notice_inner{position: relative; width: 92%; margin: 0 auto;} #notice .notice_inner>div:first-child{position: relative; transition-duration: 0.5s;} #notice .notice_inner>div:last-child{position: relative; } #notice .notice_inner .notice_wrap ul{width: 100%;} #notice .notice_inner .notice_wrap ul li{line-height: 60px; border-bottom: 1px solid #06793e;} #notice .notice_inner .notice_wrap ul li:last-child{border: none;} #notice .notice_inner .notice_wrap{margin-bottom: 50px;} #notice .notice_inner .notice_wrap ul li a{display: flex; color: #aaa; justify-content: space-between; align-items: center; font-size: 0.8em; font-weight: normal;} #notice .notice_inner .notice_wrap ul li a span{color: #313131; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; box-sizing: border-box;} #notice .notice_inner .notice_video>div{position: relative; overflow: hidden; border-radius: 20px; background-color: #000;} #notice .notice_inner .notice_video>div iframe{width: 100%; height: 300px;} #notice .notice_inner .notice_wrap ul li:hover a{color: #313131;} #notice .notice_inner .notice_wrap ul li:hover a span{color: #06793e; font-weight: bold;} }