@charset "utf-8";
:root { --count: 1; } 

@keyframes deco { 
 0% { transform: translateY(-56px); } 
 25% { transform: translateY(0); } 
 100% { transform: translateY(0); } 
 }
@keyframes big { 
 0% { transform: scale(1); opacity: 1; } 
 25% { transform: scale(1); opacity: 1; } 
 50% { transform: scale(2); opacity: 0; } 
 50.01% { transform: scale(1); opacity: 1; } 
 75% { transform: scale(2); opacity: 0; } 
 75.01% { transform: scale(1); opacity: 1; } 
 100% { transform: scale(2); opacity: 0; } 
 }

.scrolldown { position: absolute; bottom: 60px; left: calc(50% - 31px); width: 62px; padding-bottom: 91px; z-index: 99; } 
.scrolldown:before { content: ''; display: block; position: absolute; bottom: 12px; left: 50%; width: 1px; height: 60px; background :#fff; opacity: 0.5; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); } 
/*clip-path: circle(50% at 50% 0); */

.scrolldown .text { line-height: 16px; text-align: center; color: #fff; font-size: 11px; font-weight: 400; letter-spacing: 0.3em; } 
.scrolldown .deco { position: absolute; bottom: 0; left: calc(50% - 15px); width: 30px; height: 30px; animation: deco 4s ease infinite; } 
.scrolldown .half { position: absolute; bottom: 16px; left: calc(50% - 11px); width: 22px; height: 22px; background:#fff; clip-path: circle(50% at 50% 100%); animation: deco 4s ease infinite; } 
.scrolldown .deco:before { content: ''; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(255,255,255,.2); border-radius: 100%; animation: big 4s ease infinite; } 
.scrolldown .deco:after { content: ''; display: block; position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); z-index: 2; width: 8px; height: 8px; background-color: #fff; border-radius: 7px; } 



button { padding: 10px 6px; } 
button::after { display: block; content: ''; border-bottom: solid 1px #000; transform: scaleX(0) translateY(5px); transition: transform 250ms ease-in-out; } 
button:hover::after { transform: scaleX(1) translateY(5px); } 

.container { width: 1400px; margin: auto; position: relative; height: auto; } 
.container.fw_container { width: 100%; } 

#section1 { } 

/*
#section1 .bg { width: 100%; height: 100vh; background: url(../img/main/image1.jpg) 50% 0% no-repeat; background-size: cover; } 
*/
#section1 .bg { width: 100%; height: 100vh; } 
#section1 .bg .swiper-wrapper { width: 100%; height: 100%; } 
#section1 .bg .swiper-wrapper .swiper-slide { width: 100%; height: 100%; } 
#section1 .bg .swiper-wrapper .s1 { background:url(../img/main/image1.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s2 { background:url(../img/main/image2.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s3 { background:url(../img/main/image3.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s4 { background:url(../img/main/image4.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s5 { background:url(../img/main/image5.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s6 { background:url(../img/main/image6.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s7 { background:url(../img/main/image7.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s8 { background:url(../img/main/image8.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s9 { background:url(../img/main/image9.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s10 { background:url(../img/main/image10.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s11 { background:url(../img/main/image11.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s12 { background:url(../img/main/image12.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s13 { background:url(../img/main/image13.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s14 { background:url(../img/main/image14.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s15 { background:url(../img/main/image15.jpg) 50% 50% no-repeat; background-size:cover; } 
#section1 .bg .swiper-wrapper .s16 { background:url(../img/main/image16.jpg) 50% 50% no-repeat; background-size:cover; } 

#section1 .bg .main_pagination { position: absolute; bottom: 20px; left:50%; transform:translateX(-50%); text-align: center; z-index: 9; color:#fff; font-size: 14px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); } 


#section1 .logo { width: 136px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; pointer-events: none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); } 

#section2 .title_con { margin-bottom: 50px; } 
#section2 .three_con { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: auto; } 
#section2 .three_con .contents { padding-top: 50px; } 
#section2 .three_con .contents p { line-height: 2.3em; width: 100%; font-size: 14px; } 
#section2 .three_con .contents.contents1 { max-width: 320px; min-width: 300px; width: 100%; } 
#section2 .three_con .contents.contents1 .inner { display: flex; justify-content: space-between; flex-wrap: wrap; filter: saturate(--count); } 
#section2 .three_con .contents.contents1 .inner p.left_t { } 
#section2 .three_con .contents.contents1 .inner p.right_t.top { padding-top: 160px; } 
#section2 .three_con .contents.contents2 { position: absolute; left: 50%; transform: translateX(-50%); width: 600px; padding: 0; z-index: 2; } 
#section2 .three_con .contents.contents2 .inner { width: 100%; padding-bottom: 67%; background: url(../img/main/image9.jpg) 50% no-repeat; background-size: cover; cursor: pointer; } 
#section2 .three_con .contents.contents3 { min-width: 300px; } 


#section6 .two_con { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: auto; } 
#section6 .two_con .contents { padding-top: 50px; padding-right: 40px; } 
#section6 .two_con .contents p { line-height: 2.3em; width: 100%; font-size: 14px; } 
#section6 .two_con .contents.contents2 .inner p:last-child { margin-bottom: 30px; } 
#section6 .two_con .contents.contents2 .inner p.right_t { } 
#section6 .two_con .contents.contents1 { width: 864px; padding: 0; } 
#section6 .two_con .contents.contents1 .inner { width: 100%; padding-bottom: 56.25%; background: #222; background-size: cover; } 




#section3 { } 
#section3 .bg { width: 100%; height: 450px; background: url(../img/sub1/image4.jpg) 50% 48% no-repeat; background-size: cover; filter: brightness(.7); } 
#section3 .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; line-height: 2.3em; width: 100%; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); } 
#section3 .text p { width: inherit; } 



#section4 .title_con { margin-bottom: 30px; } 

/*
#section4 .three_con { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: auto; } 
#section4 .three_con .contents { padding-top:50px } 
#section4 .three_con .contents p { line-height: 2.3em; width: 100%; font-size: 14px; } 
#section4 .three_con .contents.contents1 { min-width: 320px; max-width: 320px; width: 100%; } 
#section4 .three_con .contents.contents1 .inner { display: flex; justify-content: space-between; flex-wrap: wrap; } 
#section4 .three_con .contents.contents1 .inner p.left_t { } 
#section4 .three_con .contents.contents2 { width: 600px; padding:0; } 
#section4 .three_con .contents.contents2 .inner { width: 100%; padding-bottom: 67%; background:url(http://najuhyang.cdn1.cafe24.com/sub2/1/image4.jpg) 50% no-repeat; background-size:cover; } 
#section4 .three_con .contents.contents3 { min-width: 320px; } 
#section4 .three_con .contents.contents3 .inner h3 { margin-bottom:60px; } 
#section4 .three_con .contents.contents3 .inner p { margin-bottom:30px; } 
#section4 .three_con .contents.contents3 .inner p.right_t { } 
*/

#section4 .three_con { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: auto; width: 100%; overflow: hidden; } 
#section4 .three_con .swiper-slide { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: auto; width: 100%; } 
#section4 .three_con .contents { padding-top: 50px}
#section4 .three_con .contents p { line-height: 2.3em; width: 100%; font-size: 14px; } 
#section4 .three_con .contents.contents1 { min-width: 300px; max-width: 320px; width: 100%; } 
#section4 .three_con .contents.contents1 .inner { display: flex; justify-content: space-between; flex-wrap: wrap; } 
#section4 .three_con .contents.contents1 .inner p.left_t { } 
#section4 .three_con .contents.contents2 { position: absolute; left: 50%; transform: translateX(-50%); width: 600px; aspect-ratio: 3/ 2; padding: 0; } 
#section4 .three_con .s1 .contents.contents2 .inner { width: 100%; height: 100%; background: url(http://najuhyang.cdn1.cafe24.com/sub2/1/image1.jpg) 50% no-repeat; background-size: cover; cursor: pointer; } 
#section4 .three_con .s2 .contents.contents2 .inner { width: 100%; height: 100%; background: url(http://najuhyang.cdn1.cafe24.com/sub2/2/image2.jpg) 50% no-repeat; background-size: cover; cursor: pointer; } 
#section4 .three_con .s3 .contents.contents2 .inner { width: 100%; height: 100%; background: url(http://najuhyang.cdn1.cafe24.com/sub2/3/image1.jpg) 50% no-repeat; background-size: cover; cursor: pointer; } 
#section4 .three_con .s4 .contents.contents2 .inner { width: 100%; height: 100%; background: url(../img/main/image8.jpg) 50% no-repeat; background-size: cover; cursor: pointer; } 
#section4 .three_con .contents.contents3 { width: 17%; }
#section4 .three_con .contents.contents3 .inner h3 { margin-bottom: 60px; } 
#section4 .three_con .contents.contents3 .inner p { margin-bottom: 30px; } 
#section4 .three_con .contents.contents3 .inner p.right_t { } 
#section4 .controls { position: absolute; bottom: 0; left: 10px; z-index: 9999; } 
#section4 .swiper-button-prev::after,
#section4 .swiper-button-next::after,
#section4 .sub2_pagi { font-size: 14px; color: #111; margin: 10px; } 
#section4 .swiper-button-prev,
.swiper-rtl .swiper-button-next { left: -20px; right: auto; } 
#section4 .swiper-button-next,
.swiper-ltr .swiper-button-prev { right: -20px; left: auto; } 


#section5 .two_con { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: auto; } 
#section5 .two_con .contents { padding-top: 50px}
#section5 .two_con .contents p { line-height: 2.3em; width: 100%; font-size: 14px; } 
#section5 .two_con .contents.contents1 { width: 864px; padding: 0; } 
#section5 .two_con .contents.contents1 .inner { width: 100%; padding-bottom: 54%; background: url(../img/sub3/1/image4.jpg) 50% no-repeat; background-size: cover; cursor: pointer; } 
#section5 .two_con .contents.contents2 { min-width: 300px; } 
#section5 .two_con .contents.contents2 .inner h3 { margin-bottom: 60px; } 
#section5 .two_con .contents.contents2 .inner p:last-child { margin-bottom: 30px; } 
#section5 .two_con .contents.contents2 .inner p.right_t { } 



@media screen and (min-width:1px) and (max-width:1400px){
 .container { width: 100%; padding: 0 20px; } 

 .container.fw_container { padding: 0px; } 

 #section2 .three_con .contents { padding-top: 30px}
 #section2 .three_con .contents.contents1 { min-width: 300px; } 
 #section2 .three_con .contents.contents1 .inner p.right_t.top { padding-top: 100px; } 
 #section2 .three_con .contents.contents3 { min-width: 300px; } 
 #section4 .three_con .contents { padding-top: 30px}
}

@media screen and (min-width:1px) and (max-width:1024px){
 .container { width: 100%; padding: 0 20px; } 
 .container.fw_container { padding: 0px; } 
/*
 #section1 .bg { height: 100dvh; } 
*/
 #section2 .three_con { flex-direction: column-reverse; width: 100%; flex-wrap: wrap; } 
 #section2 .three_con .contents.contents1 { display: none; } 
 #section2 .three_con .contents.contents2 { position: static; transform: none; width: 100%; padding: 0; order: 3; } 
 #section2 .three_con .contents.contents3 { width: 100%; order: 2; } 
 #section2 .three_con .contents.contents1 .inner p.right_t.top { text-align: left; padding-top: 0; } 
 #section2 .three_con .contents.contents1 .inner p.right_t { text-align: left; padding-top: 0; } 

 #section3 .bg { height: 350px; } 

 #section4 .title_con { text-align: right; margin-bottom: 0; } 
 #section4 .three_con .swiper-slide { flex-direction: column; width: 100%; flex-wrap: wrap; } 
 #section4 .three_con .contents.contents1 { width: 100%; order: 1; display: none; } 
 #section4 .three_con .contents.contents2 { position: static; transform: none; width: 100%; aspect-ratio: 4 / 3; padding: 0; order: 3; } 
 #section4 .three_con .contents.contents3 { width: 100%; order: 2; padding-top: 0;  } 
 #section4 .three_con .contents.contents1 .inner p.right_t { text-align: left; padding-top: 0; } 
 #section4 .controls { position: absolute; bottom: auto; top: 250px; left: 30px; z-index: 9999; } 
 #section4 .swiper-button-prev::after,
 #section4 .swiper-button-next::after,
 #section4 .sub2_pagi { font-size: 14px; color: #111; margin: 10px; } 

 #section5 .two_con { flex-direction: column; width: 100%; flex-wrap: wrap; } 
 #section5 .two_con .contents.contents1 { width: 100%; order: 2; } 
 #section5 .two_con .contents.contents2 { width: 100%; padding: 0; order: 1; } 
 #section5 .two_con .contents.contents2 .right_t { text-align: center; } 

 #section6 .two_con { flex-direction: column; width: 100%; flex-wrap: wrap; } 
 #section6 .two_con .contents.contents1 { width: 100%; order: 2; } 
 #section6 .two_con .contents.contents2 { width: 100%; padding: 0; order: 1; padding-bottom: 30px; } 
 #section6 .two_con .contents.contents2 .right_t { text-align: center; } 

 .hfp { padding: 100px 0 50px; } 
}

@media screen and (min-width:1px) and (max-width: 768px){
    #section1 .logo {display: none; } 
}