@charset "utf-8";
/* CSS Document */

.m_view{display: none;}

/*sec1*/
.sec1{background:url(../img/visual_01.png) center bottom no-repeat; background-size:cover; height:100vh; width:100%; position: relative; display: flex; justify-items: center; align-items: center; justify-content: center; }
.sec1 .sectionIn{color:#fff; text-align: center;}
.sec1 .sectionIn h3{color:#4b3a11; font-size: 28px; font-weight: 300; letter-spacing: 4px;}
.sec1 .sectionIn h1{font-size: 82px; line-height: 94px; margin:10px 0 20px;}
.sec1 .sectionIn h1 span{font-weight: 400;}
.sec1 .sectionIn p{color:#fff; font-size: 20px; font-weight: 300; line-height: 1.5em;}


/*sec2*/
.sec2{height:100vh; width:100%; }
.sec2 .sectionIn{background:url(../img/visual_02.png) center bottom no-repeat; background-size:904px 900px; height:100vh; position: relative; width:1200px; margin:0 auto;}
.sec2 h3{color:#d5d9db; font-size:36px; text-align: center; font-weight: 300; padding-top:4vw;}
.sec2 h1{color:#d5d9db; font-size:67px; text-align: center; line-height: 1em;}
.sec2 li{font-size:26px; line-height: 35px}
.sec2 li span{font-weight: 700;}

.sec2 .p_view li:nth-child(1){position: relative; position:absolute; right:27px; bottom:550px; }
.sec2 .p_view li:nth-child(1) .dot{width:10px; height:10px; background:#4f4c43; border-radius: 50%; position: absolute; top:-22px; left:37%; transform: translateX(-50%);}

.sec2 .p_view li:nth-child(2){position: relative; position:absolute; left:60px; bottom:420px; }
.sec2 .p_view li:nth-child(2) .dot{width:10px; height:10px; background:#4f4c43; border-radius: 50%; position: absolute; top:-22px; left:89%; transform: translateX(-50%);}

.sec2 .p_view li:nth-child(3){position: relative; position:absolute; right:47px; bottom:250px;}
.sec2 .p_view li:nth-child(3) .dot{width:10px; height:10px; background:#4f4c43; border-radius: 50%; position: absolute; top:-22px; left:16%; transform: translateX(-50%);}


/*animation*/
.reveal{position: relative; transform: translateX(150px); opacity: 0; transition: 1s all ease;}
.reveal2{position: relative; transform: translateX(-150px); opacity: 0; transition: 1s all ease;}
.reveal3{position: relative; transform: translateY(-150px); opacity: 0; transition: 1s all ease;}
.reveal.active{transform: translateX(0); opacity: 1;}
.reveal2.active{transform: translateX(0); opacity: 1;}
.reveal3.active{transform: translateY(0); opacity: 1;}


/*slider*/
.slider {width: 65%; margin: 40px auto; max-width:1360px; padding:20px; box-sizing: border-box; position: relative;}
.slick-slide {margin: 10px 10px;}
.slick-arrow{visibility: hidden;}
.slick-next{right:-35px!important;}
.slick-prev{left:-35px!important;}
.slick-next, .slick-prev{top:50% !important; transform:translateY(-50%) !important;} 
.slick-slide {transition: all ease-in-out .3s; opacity: 1;}
.slick-active {opacity: 1;}
.slick-current {opacity: 1;}

/*sec3*/
.sec3{height:100vh; width:100%; background: background: rgb(242,254,159); background: linear-gradient(90deg, rgba(242,254,159,1) 0%, rgba(86,237,234,1) 100%);}
.sec3 .sectionIn>h3{font-size:36px; text-align: center; font-weight: 400; padding-top:6vh;}
.sec3 .sectionIn>h1{font-size:62px; text-align: center; line-height: 1em;}
.sec3 .box_wrapper{width:100%; max-width:1100px; margin:0 auto; background:#fff; border-radius: 25px; overflow: hidden; margin-top:5vh;}

/*sec3_tab*/
.tabs_wrapper{text-align: center;}
.tabs{display:flex; align-items: center; justify-content: center; box-sizing: border-box;}
.tabs li{width:25%; padding:20px 0; color:#c7c7c7; font-size:22px; border-bottom: 2px solid #eaf0f3;}
.tab-link.current{background:#eaf0f3; color:#282828; font-weight: 600;}
.tab-content{display: none; padding:40px 0; box-sizing: border-box;}
.tab-content.current{display: inherit;   }
.flex_box{display: flex; justify-content:space-around;}
.flex_box>div:nth-child(1){width:55%; }
.flex_box>div img{width:100%; padding:0 40px; box-sizing: border-box;}

.tab-content .text_box{text-align: left; width:40%;}
.tab-content .text_box h3{font-size:23px ; font-weight:400; margin-bottom: 20px;}
.tab-content .text_box h1{font-size:48px ; line-height: 1.2em; margin-bottom: 40px;}
.tab-content .text_box li{font-size:24px; line-height: 35px;  padding-left: 15px; position: relative;}
.tab-content .text_box li::before{width:5px; height:5px; display: inline-block; background:#282828; content: ""; border-radius: 50%; position: absolute; top:50%; left:0px;}

/*sec4*/
.sec4{background:url(../img/pattern_01.png); height:80vh; }
.sec4 .sectionIn{position: relative;}
.sec4 .sectionIn>img{margin:10vh 0 2vh; }
.sec4 .box_wrapper{margin-left:20vw;}
.btn_more{text-align: center; border:1px solid #fff; border-radius: 40px; position: absolute; top:20vh; right:30%; padding:8px 35px; }
.btn_more a{color:#fff; font-weight: 600; font-size: 22px;}
.sec4 .cont{border-radius: 20px; width:100%; position: relative; overflow: hidden; margin-right: 30px; background:#fff; height:260px; padding:25px; box-sizing: border-box;}
.slick-slide{margin-left:12px; width:20%;}
.sec4 .cont img{position: absolute; bottom:25px; right:25px; width:30px;}
.sec4 .cont h3{font-size: 22px; font-weight: 300; margin-bottom: 10px;}
.sec4 .cont h1{font-size:26px; }







/*기본값끝*/



@media screen and (max-width:1300px){
    
}



@media all and (max-width:1024px){
    .sec1 .sectionIn h3{font-size:20px;}
    .sec1 .sectionIn h1{font-size: 65px; line-height: 1.2em;}
    .sec1 .sectionIn p{font-size: 16px;}
    .sec2 li{font-size:18px;}
    .sec2 h3{font-size:24px;}
    .sec2 h1{font-size:54px;}
    .sec2 li:nth-child(3){right:-3px; bottom:333px;}
    .sec2 .m_view li{}
    
    
    
    
    
}

@media all and (max-width:768px){
    .p_view{display: none;}
    .m_view{display: block;}
    .sec2 .m_view{text-align: center; margin-top:20px;}
    .sec3 .sectionIn>h3{font-size: 24px; padding-top:3vh;}
    .sec3 .sectionIn>h1{font-size: 36px}
    .tab-content .flex_box{display: block;}
    .flex_box>div:nth-child(1), .flex_box>div:nth-child(2), .flex_box>div:nth-child(3), .flex_box>div:nth-child(4){width:100%; text-align: center;}
    .sec3 .box_wrapper{width:90%; border-radius: 20px; margin-top: 3vh; min-height:75vh;}
    .tabs li{font-size: 16px; padding:10px 0;}
    .flex_box>div img{width:80%; }
    .tab-content{padding:22px 0;}
    .tab-content .text_box{text-align: center; width: 100%;}
    .tab-content .text_box h3{font-size: 20px; margin-bottom: 10px;}
    .tab-content .text_box h1{font-size: 32px; margin-bottom: 20px;}
    .tab-content .text_box li{padding-left: 0; font-size: 18px; line-height: 23px;}
    .tab-content .text_box li::before{width:0; height:0;}
    .sec4 .sectionIn>img{margin:35px 0 40px -70vw; height:100px;}
    .btn_more{padding:4px 20px; top:22vh; right:10px;}
    .btn_more a{font-size: 18px;}
}




@media all and (max-width:425px){
}