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

/* header */
#header{position: fixed;left: 0;top: 0;width: 100%;z-index: 2000;transition:.3s;}
#header .inner{display: flex;align-items: center;justify-content: space-between;height: 80px;width: 100%;}
#header h1 a{display: block;width: 210px;height: 40px;background: url(../images/main/header_logo.png);background-size: cover;transition:.3s;}
#header .btn_box{display: flex;align-items: center;gap:20px;}
#header .btn_box a{display: flex; width: 180px;height: 45px;border-radius: 45px;gap:10px;font-size: 14px;font-weight: 700;color: #fff; border: 2px solid #fff;background: rgba(0,0,0,.3);align-items: center;justify-content: center;transition:.3s;}
#header .btn_box a img{transition: .3s;}
#header .all_btn{display: none; position: relative;width: 22px;height: 19px;}
#header .all_btn span{position: absolute; width: 100%;height: 2px;background: #fff;left: 0;transition: .3s;}
#header .all_btn span:nth-child(1){top: 0;}
#header .all_btn span:nth-child(2){top: 50%;transform: translate(-50% , -50%);left: 50%;}
#header .all_btn span:nth-child(3){bottom: 0;}
#header .all_btn.on span{background: #000;}
#header .all_btn.on span:nth-child(1){top: 50%;transform: translateY(-50%) rotate(45deg);}
#header .all_btn.on span:nth-child(2){opacity: 0;}
#header .all_btn.on span:nth-child(3){top: 50%;transform: translateY(-50%) rotate(-45deg);}
#header .navi_btn{display: block; position: relative;width: 22px;height: 19px;}
#header .navi_btn span{position: absolute; width: 100%;height: 2px;background: #fff;left: 0;transition: .3s;}
#header .navi_btn span:nth-child(1){top: 0;}
#header .navi_btn span:nth-child(2){top: 50%;transform: translate(-50% , -50%);left: 50%;}
#header .navi_btn span:nth-child(3){bottom: 0;}
#header .navi_btn.on span{background: #000;}
#header .navi_btn.on span:nth-child(1){top: 50%;transform: translateY(-50%) rotate(45deg);}
#header .navi_btn.on span:nth-child(2){opacity: 0;}
#header .navi_btn.on span:nth-child(3){top: 50%;transform: translateY(-50%) rotate(-45deg);}

#header.white{background: #fff;}
#header.white h1 a{background: url(../images/main/header_logo02.png);background-size: cover;}
#header.white .all_btn span{background: #000;}
#header.white .navi_btn span{background: #000;}
#header.white .gnb > li > a{color: #000;}
#header.white .gnb > li.on > a{color: var(--color_primary);}
#header.white .btn_box a{color: #000;}

#header.on{background: #fff;}
#header.on h1 a{background: url(../images/main/header_logo02.png);background-size: cover;}
#header.on .all_btn span{background: #000;}
#header.on .navi_btn span{background: #000;}
#header.on .gnb > li > a{color: #000;}
#header.on .gnb > li.on > a{color: var(--color_primary);}
#header.on .btn_box a{color: #000;}


/* gnb */
.menu_box{position: absolute;display: none; left: 0;width: 100%;top: 0;align-items: center;justify-content: center;}
.gnb{display: flex;}
.gnb > li > a{display: block;line-height: 100px;text-align: center;width: 190px;font-size: 17px;transition: .3s;font-weight: 700;color: #fff;}
.gnb > li .fade_box{display: none; position: absolute;width: 100%; left: 0;top: 100%;background: #fafafa;}
.gnb > li ul{display: flex;width: 100%;justify-content: center;gap:50px;}
.gnb > li ul li a{position: relative; display: block;line-height: 100px;color: #232323;font-weight: 600;}
.gnb > li ul li a:hover{color: var(--color_primary);}
.gnb > li ul li a:after{content:'';position: absolute;right: -26px;top: 50%;transform: translateY(-50%);width: 1px;height: 16px;background: #232323;}
.gnb > li ul li:last-child a:after{display: none;}

/* all_menu */
#all_menu{display: none; position: absolute;left: 0;top: 100px;width: 100%;background: #fafafa;z-index: 2000;padding: 50px 0;}
#all_menu ul{display: flex;justify-content: center;}
#all_menu ul li{width: 190px;}
#all_menu ul li a{display: block;text-align: center;font-size: 17px;margin-bottom: 15px;transition: .2s;}
#all_menu ul li a:hover{color: var(--color_primary);}
#all_menu ul li a:last-child{margin-bottom: 0;}


/* 네비게이션 */
#navigation{display: none; position: fixed;left: 0;top: 80px;z-index: 1000;width: 100%;height: calc(100vh - 80px);background: rgba(0,0,0,.5);}
#navigation .navi_box{position: absolute; width: 50%;right: 0;top: 0;background: #fff;height: 100%;}
#navigation .navi_box > ul > li > a{position: relative; display: block;line-height: 60px;padding: 0 20px;border-top: 1px solid #ddd;font-size: 16px;}
#navigation .navi_box > ul > li > a:after{content:'';position: absolute;transition: .3s; right: 20px;top: 50%;transform: translateY(-50%);width: 12px;height: 8px;background: url(../images/main/navi_ico01.png);}
#navigation .navi_box > ul > li > a.no_ico:after{display: none;}
#navigation .navi_box > ul > li.on > a:after{transform:  translateY(-50%) rotate(180deg);}
#navigation .navi_box > ul > li:last-child > a{border-bottom: 1px solid #ddd;}
#navigation .navi_box > ul > li ul{display: none; background: #f4f4f4;padding: 15px 20px;border-top: 2px solid var(--color_primary);}
#navigation .navi_box > ul > li ul li a{display: block; line-height: 35px;font-size: 16px;}
#navigation .navi_box > ul > li ul li.on a{color: var(--color_primary);font-weight: 600;}


/* 공통 */
.section{overflow: hidden;}

.tit_st01 h2{font-size: 45px;margin-bottom: 20px;}
.tit_st01 h2 span{color: var(--color_primary);}
.tit_st01 p{font-size: 24px;color: #333;line-height: 40px;font-weight: 500;}
.tit_st01 p span{color: var(--color_primary);}

.btn_st01{display: flex;width: fit-content; padding: 0 40px;height: 60px;border-radius: 60px;background: #000;align-items: center;justify-content: center;gap:10px;color: #fff;font-size: 20px;}
.btn_st01 img{transition: .2s;}
.btn_st01:hover img{transform: translateX(3px);}


/* visual_wrap */
#visual_wrap{position: relative;height: 100vh;}
#visual_wrap ul li{position: relative;}
#visual_wrap ul li .bg_box{width: 100%;height: 100vh;background: url(../images/main/visual01.jpg) center no-repeat;background-size: cover;}
#visual_wrap ul li.slick-active .bg_box {animation:visual_ani01 ease 2.5s forwards;}
#visual_wrap ul li.visual02 .bg_box{background: url(../images/main/visual02.jpg) center no-repeat;background-size: cover;}
#visual_wrap ul li .inner{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;}
#visual_wrap ul li.visual01 .inner strong{display: block; font-size: 45px;line-height: 65px;margin-bottom: 20px;}
#visual_wrap ul li.visual01 .inner p{font-size: 40px;font-weight: 500;}
#visual_wrap ul li.visual02 .inner strong{display: block; font-size: 50px;margin-top: 30px;text-align: center;}
#visual_wrap ul li.visual02 .inner p{font-size: 50px;font-weight: 500;text-align: center;}

#visual_wrap .slide_items{position: absolute;display: flex; left: 50%;transform: translateX(-50%);z-index: 20;bottom: 100px;gap:10px;align-items: center;color: #fff;}
#visual_wrap .slide_items p{font-size: 20px;font-weight: 600;width: 28px;text-align: center;}
#visual_wrap .slide_items .dots ul{position: relative;width: 110px;height: 5px;background: rgba(255,255,255,.5);}
#visual_wrap .slide_items .dots ul li{position: absolute;text-indent: -9999px;width: 0;height: 100%;background: #fff;}
#visual_wrap .slide_items .dots ul li.slick-active{animation:visual_ani02 linear 4s forwards;}
#visual_wrap .slide_items .btn_box i{font-size: 20px;color: #fff;}

@keyframes visual_ani01{
0%{transform: scale(1.15);}
100%{transform: scale(1);}
}

@keyframes visual_ani02{
0%{width: 0;}
100%{width: 100%;}
}

/* section01 */
#section01 .inner{display: flex; height: 370px;align-items: center;}
#section01 .inner .txt{flex:1;text-align: center;}
#section01 .inner .txt p{font-size: 30px;font-weight: 600;margin-bottom: 35px;}
#section01 .inner .txt strong{display: block;font-size: 60px;color: var(--color_primary);}


/* section02 */
#section02{position: relative; padding: 100px 0 100px;background: url(../images/main/sec01_bg01.jpg) center no-repeat;background-size: cover;}
#section02 .inner{ display: block;justify-content: space-between;align-items: flex-start;}
#section02 .left_box{position: relative;top: 0px;left: 0;margin-bottom: 50px;}
#section02 .left_box .tit_st01{margin-bottom: 50px;text-align: center;}
#section02 .left_box .tit_st01 h2{color: #fff;}
#section02 .left_box .tit_st01 p{color: #fff;}
#section02 .left_box .tit_st01 p br{display: none;}
#section02 .left_box .btn_st01{margin: 0 auto;}
#section02 .right_box{display: flex;gap:30px;justify-content: center;}
#section02 .right_box ul{width: calc((100% - 30px)/2);max-width: 400px;}
#section02 .right_box ul:nth-child(1){margin-top: 130px;}
#section02 .right_box ul li{position: relative; width: 100%; height: 520px;border-radius: 20px;overflow: hidden;margin-bottom: 50px;}
#section02 .right_box ul li:last-child{margin-bottom: 0;}
#section02 .right_box ul li img{width: 100%;height: 100%;object-fit: cover;}
#section02 .right_box ul li .txt{position: absolute;bottom: 0;left: 0;width: 100%;padding: 50px 35px;color: #fff;}
#section02 .right_box ul li .txt p{font-size: 30px;font-weight: 600;line-height: 45px;margin-bottom: 20px;}
#section02 .right_box ul li .txt span{font-size: 20px;font-weight: 500;line-height: 28px;}


/* section03 */
#section03{padding: 100px 0 120px;}
#section03 .tit_st01{text-align: center;margin-bottom: 55px;}
#section03 .inner{position: relative;}
#section03 ul li{position: relative; border-radius: 20px;overflow: hidden;}
#section03 ul li img{width: 100%;}
#section03 ul li .txt{position: absolute;top: 40px;left: 30px;}
#section03 ul li .txt p{font-size: 25px;font-weight: 700;margin-bottom: 20px;}
#section03 ul li .txt span{font-size: 17px;font-weight: 500;color: #333;}
#section03 .dots{position: absolute;left: 55px;bottom: 40px;}
#section03 .dots ul{display: flex;gap:10px;}
#section03 .dots ul li{text-indent: -9999px;width: 10px;height: 10px;border-radius: 50%;background: #7a7d7e;transition: .2s;}
#section03 .dots ul li.slick-active{background: var(--color_primary);}
#section03 .arrow_left{position: absolute;display: none !important; left: 40px;top: auto;transform: translateY(0%);bottom: 30px;}
#section03 .arrow_left img{width: 13px;}
#section03 .arrow_right{position: absolute;display: none !important; right: 40px;top: auto;transform: translateY(0%);bottom: 30px;}
#section03 .arrow_right img{width: 13px;}


/* section04 */
#section04{padding-bottom: 90px;}
#section04 ul{display: flex;gap:20px;flex-wrap:wrap;}
#section04 ul li{position: relative;display: flex; width: calc((100% - 20px)/2);padding: 20px 20px;height: 270px;border-radius: 20px;background: #f4fbfc;border: 1px solid transparent;align-items: flex-end;}
#section04 ul li:nth-child(1){display: block;}
#section04 ul li.line{border: 1px solid var(--color_primary);background: #fff;}
#section04 ul li .btn_st01{margin-top: 40px;}
#section04 ul li img{position: absolute;top: 30px;right: 35px;}
#section04 ul li h2{font-size: 30px;}
#section04 ul li p{font-size: 17px;font-weight: 700;line-height: 30px;}
#section04 ul li p span{color: var(--color_primary);}


/* footer */
#footer .top{padding: 40px 0 60px;background: #f8f8f8;}
#footer .top .inner{display: flex;align-items: flex-start;justify-content: space-between;}
#footer .top .left{display: block;align-items: flex-start;gap:60px;margin-top: 10px;}
#footer .top .left address{font-size: 14px;font-weight: 500;line-height: 24px;color: #333;font-style: normal;margin-top: 20px;}
#footer .top .right ul{display: flex;gap:25px;}
#footer .top .right ul li a{font-weight: 600;color: #333;}
#footer .copy{line-height: 40px;text-align: center;font-size: 14px;font-weight: 500;color: #333;}


/* ------------------------------------------------------sub------------------------------------------------------ */
/* 공통 */
.sub_wrap{margin-top: 80px;}

.sub_tit{font-size: 45px;line-height: 60px;}
.sub_tit span{color: var(--color_primary);}


/* 브랜드 스토리 */
#brand_wrap .con01{display: flex;align-items: center;justify-content: center;flex-direction: column; height: 100vh;background: url(../images/sub/sub01_bg01.jpg) center bottom no-repeat;background-size: cover;color: #fff;text-align: center;}
#brand_wrap .con01 h3{font-size: 45px;line-height: 1;margin-bottom: 40px;}
#brand_wrap .con01 h3 span{font-weight: 500;}
#brand_wrap .con01 p{font-size: 22px;font-weight: 500;line-height: 35px;margin-bottom: 30px;}
#brand_wrap .con01 p:last-child{margin-bottom: 0;}

#brand_wrap .con02{padding: 125px 0 160px;}
#brand_wrap .con02 ul li{display: flex;align-items: center;flex-direction: column-reverse; justify-content: space-between;margin-bottom: 100px;gap:50px;}
#brand_wrap .con02 ul li:last-child{margin-bottom: 0;}
#brand_wrap .con02 ul li:nth-child(2){gap:50px;justify-content: center;flex-direction: column;}
#brand_wrap .con02 ul li .txt_wrap .sub_tit{margin-bottom: 50px;text-align: center;}
#brand_wrap .con02 ul li .txt_wrap .txt p{font-size: 24px;line-height: 36px;margin-bottom: 25px;text-align: center;}
#brand_wrap .con02 ul li .txt_wrap .txt p:last-child{margin-bottom: 0;}

#brand_wrap .con03{padding: 105px 0 90px;background: url(../images/sub/sub01_bg02.jpg) no-repeat center;background-size: cover;}
#brand_wrap .con03 .sub_tit{margin-bottom: 50px;text-align: center;}
#brand_wrap .con03 ul{display: flex;gap:40px;flex-wrap:wrap;}
#brand_wrap .con03 ul li{display: flex;flex-direction: column;align-items: center;justify-content: center; width: 100%;height: 300px;background: #fff;border-radius: 20px;text-align: center;}
#brand_wrap .con03 ul li p{font-size: 32px;font-weight: 700;margin-bottom: 25px;color: var(--color_primary);}
#brand_wrap .con03 ul li span{display: block; font-size: 22px;font-weight: 500;line-height: 36px;}

#brand_wrap .con04{display: flex; height: 600px;flex-direction: column;align-items: center;justify-content: center;background: url(../images/sub/sub01_bg03.jpg) no-repeat center ;background-size: cover;}
#brand_wrap .con04 h3{font-size: 40px;line-height: 50px;}
#brand_wrap .con04 h3:nth-child(2){margin: 15px 0 25px;}
#brand_wrap .con04 p{font-size: 22px;font-weight: 500;line-height: 36px;}
#brand_wrap .con04 img{display: block;margin-top: 55px;width: 600px;}


/* 자주묻는 질문 */
#customer_wrap{padding: 100px 0 80px;}
#customer_wrap .tit_st01{margin-bottom: 60px;text-align: center;}
#customer_wrap .con01 .tab_menu_wrap{display: flex;gap:10px;margin-bottom: 35px;}
#customer_wrap .con01 .tab_menu_wrap a{display: block;line-height: 45px;padding: 0 25px;border-radius: 45px;background: #f3fbfc;font-size: 17px;font-weight: 500;}
#customer_wrap .con01 .tab_menu_wrap a.on{background: var(--color_primary);color: #fff;}
#customer_wrap .con01 .faq_wrap li{margin-bottom: 20px;border-radius: 10px;border: 1px solid #c7c7c7;}
#customer_wrap .con01 .faq_wrap li button{display: flex; padding: 32px 40px;align-items: center;justify-content: space-between;width: 100%;}
#customer_wrap .con01 .faq_wrap li button p{font-size: 18px;font-weight: 600;line-height: 1.5;width: calc(100% - 130px);text-align: left;transition: .2s;}
#customer_wrap .con01 .faq_wrap li button img{transition: .2s;}
#customer_wrap .con01 .faq_wrap li button.on img{transform: rotate(180deg);}
#customer_wrap .con01 .faq_wrap li .txt{display: none; padding: 32px 40px;border-top: 1px solid #c7c7c7;font-size: 16px;font-weight: 500;line-height: 24px;}

#customer_wrap .con02{margin-top: 90px;}
#customer_wrap .con02 h3{font-size: 24px;text-align: center;margin-bottom: 40px;}
#customer_wrap .con02 .txt_wrap{display: block;height: auto;align-items: center;border-radius: 10px;background: #f4fbfc;padding: 40px 40px;}
#customer_wrap .con02 .txt_wrap .txt01{display: flex; width: 100%;align-items: center;gap:20px;justify-content: center;}
#customer_wrap .con02 .txt_wrap .txt01 strong{font-size: 40px;font-weight: 800;color: var(--color_primary);}
#customer_wrap .con02 .txt_wrap .txt02{width: 100%;font-size: 18px;font-weight: 500;line-height: 30px;margin-top: 20px;text-align: center;}

}