@media screen and (max-width:1800px){
	/* common */
	.w1800{ padding: 0 20px;}

	/* header */
	header .header-box{ padding: 0 20px;}

	#allmenu .top-box .allclose{ right: 20px;}

	/* main */
	main .visual .slide-box .swiper-slide .txt-box{ left: 20px;}
}

@media screen and (max-width:1600px){
	/* common */
	.font66{ font-size:56px; }
	.font60{ font-size:50px; }
	.font50{ font-size:40px; }
	.font46{ font-size:36px; }
	.font40{ font-size:32px; }

	.w1500{ padding: 0 20px;}

	#viewbtn{ padding: 0 20px;}

	#main-pop .slide-box .swiper-slide{ width: 280px; height: 400px; }

	/* main */
	main .philosophy .content .item-box .txt-box .txt{ width: 30%; }
	main .philosophy .content .item-box .txt-box .txt br{ display:none; }

	main .sale .slide-box .swiper-slide .img-box{ height: 600px;}


	.calender .content .year-box .month-box .item-box{ padding: 30px;}
	.calender .content .year-box .month-box .item-box .txt-box .img-pop{ width: 90%; padding: 50px;}
	.calender .content .year-box .month-box .item-box .txt-box .main-slide .slide figure{ width: 50%; }
	.calender .content .year-box .month-box .item-box .txt-box .sub-wrap{ width: calc( 50% - 60px); }

	.guide .content .flex-box{ gap:50px; }
	.guide .content .flex-box .item-box{ width: calc((100% - 150px) / 4); height: 320px; padding: 0 20px;}
	.guide .content .flex-box .item-box > figure{ margin: 20px 0;}
	.guide .content .flex-box .item-box:after{ width: 50px;}

	.form .content{ padding: 80px 40px; }
	.form .content > dl dd .item-box > .title{ min-width:200px; }

	#faq .content .item-box{ padding: 0 50px;}

	#introduce .character > div > .title{ margin-left: 20px; }
}

@media screen and (max-width:1400px){
	/* header */

	/* main */
	main .sale .slide-box .swiper-slide .img-box{ height: 500px;}
	#img-flex .content .item-box .txt-box{ padding: 40px 20px; }
	#img-flex .content .item-box .txt-box .stxt{ left: 20px;}

	.view .content{  gap:50px; }
	.view .content > *{ width: calc((100% - 50px) / 2);}
	.view .content .info-box{ margin-top: 0; }
	.view .order-box .ctnSwiper .circle-box .item-box{ height: 180px; text-align: center; }

	.calender .content .year-box.list .month-box .item-box{ padding: 50px 30px;}
	.calender .content .year-box.list .month-box .item-box .month{ min-width:200px; } 

	.form .content > dl dd .item-box .select-box select{ margin-right: 0; margin-bottom: 10px;}
	.form .content > dl dd .item-box .select-box.flex-box{ flex-wrap:wrap; }
	.form .content > dl dd .item-box .pw-box .flex-box{ flex-wrap:wrap; }
	.form .content > dl dd .item-box .pw-box .flex-box input{ margin-right: 0; margin-bottom: 10px;}

	#introduce .intro .ctn-box .item-box{ width: 300px; height: 300px;}
	
	#news .content .item-box{ width: calc((100% - 20px) / 2); }
}

@media screen and (max-width:1200px){
	/* common */
	.font66{ font-size:46px; }
	.font60{ font-size:40px; }
	.font50{ font-size:37px; }
	.font46{ font-size:35px; }
	.font40{ font-size:32px; }
	.font36{ font-size:30px; }
	.font30{ font-size:28px; }

	#viewbtn{ height: 55px; padding: 0 20px;}

	.paging{ margin-top: 80px; }

	/* header */
	header{ height: 90px; }
	header .header-box nav #gnb{ display:none; }
	header .header-box .logo a,
	#allmenu .top-box .logo a{ height: 60px; }

	#allmenu .top-box .allclose{ top: 30px; }
	#allmenu .allgnb #gnb{ display:block; margin-top: 120px; padding: 0 20px; }
	#allmenu .allgnb #gnb > li{ display:block; }
	#allmenu .allgnb #gnb > li:not(:last-child){ margin-bottom: 30px; }
	#allmenu .allgnb #gnb > li > a{ font-size:30px; opacity: 1; }
	#allmenu .allgnb #gnb > li .depth2{ position: relative; transform:none; top: auto; left: auto; pointer-events:auto; opacity: 1; text-align: left; margin: 20px 0; display:none; 
    transition: none;}
	#allmenu .allgnb #gnb > li .depth2 li{ display:inline-block; }
	#allmenu .allgnb #gnb > li .depth2 li:not(:last-child){ margin-bottom: 0; margin-right: 20px;}
	#allmenu .allgnb #gnb > li .depth2 li a{ font-size:22px; }
	#allmenu .allgnb #gnb > li:hover > a{ pointer-events:auto; opacity: 1; color:#111; }

	#main-pop{ width: 70%; margin: 0 0 0 auto; right: calc( -70%); }
	#main-pop .slide-box .swiper-slide{ width: 50%; height: 500px; }

	/* main */
	main section:not(:last-of-type){ margin-bottom: 100px; }
	main .visual .slide-box .swiper-slide .txt-box{ left: 0; padding: 0 20px;}
	main .philosophy .content .item-box .txt-box .txt{ width: 28%; }

	main .info#img-flex .content .item-box .txt-box .link-box #viewbtn{ padding: 0 10px;}

	main .sale .slide-box .swiper-slide{ width: calc((100% - 15px) / 2); }
	main .sale .slide-box .swiper-slide .img-box{ height: 600px;}

	main .news .content .item-box .title{ margin: 0 20px;}
	main .news .content .item-box .day{ min-width:100px; }

	#img-flex .content .item-box .txt-box .link-box #viewbtn{ font-size:16px; }

	/* sub */
	#subContents{ padding: 100px 0 40px;}
	#subContents.sc07{ padding: 150px 0 80px;}


	.mb100,
	.mb150{ margin-bottom: 100px;}

	.popup{ width: calc(100% - 40px); }
	#refusal-pop{ padding: 50px 20px; width: 90%;}

	#search{ margin-bottom: 80px; }

	.complex .content .item-box{ width: calc((100% - 30px) / 3); }

	.view .content{ gap:20px; }
	.view .content > *{ width: calc((100% - 20px) / 2);}
	.view .content .info-box .txt-box dl dt{ min-width:120px; }
	.view .txt-box-b{ padding: 50px 30px; }
	.view .order-box .ctnSwiper .circle-box .item-box{ height: 150px; }
	.view .order-box .ctnSwiper .circle-box .item-box .title{ font-size:18px; }

	.calender .content .tab-box li button{ font-size: 70px; }
	.calender .content .tab-box li:nth-child(2) button{ font-size:90px; }
	.calender .content .year-box .month-box .item-box{ width: calc(100% / 3); min-height:350px; }
	.calender .content .year-box.list .month-box .item-box .txt-box a .info-box p span{ font-size:28px; }

	.guide .content .flex-box{ justify-content:center; flex-wrap:wrap; gap:30px; }
	.guide .content .flex-box:not(:last-child){ margin-bottom: 30px; }
	.guide .content .flex-box .item-box{ width: 400px; height: 400px; transition-delay: 0s;}
	.guide .content .flex-box .item-box:after,
	.guide .content .flex-box .item-box:before{ display:none !important; }
	.guide .btn-box{ padding: 40px 30px;}

	#guide-m .content .flex-box{ margin-bottom: 100px;}
	#guide-m .sec-box dl{ padding: 50px 0 80px;}
	#guide-m .sec-box dl dt{ min-width:30%; }
	#guide-m .sec-box dl dd .item-box #viewbtn{ margin-top: 40px;}

	#as .ctn-box .item-box{ padding: 40px 20px; height: 350px;}
	#as .ctn-box .item-box .num{ font-size:25px; }
	#as #img-flex .content .item-box .txt-box .link-box a{ padding: 0 10px;}

	.form .content{ padding: 50px 30px;}
	.form .content > dl:not(:last-child){ margin-bottom: 80px;}
	.form .content > dl dd .item-box input, 
	.form .content > dl dd .item-box select, 
	.form .content > dl dd .item-box .input-box.file label .txt,
	.form .content > dl dd .item-box .select-box div,
	.form .content > dl dd .item-box *.w690,
	.form .content > dl dd .item-box *.w150{ width: 100%; }
	.form .content .policy-box .policy-wrap{ padding-left: 30px; }
	.form .content > dl dd .item-box .flex-box{ flex-wrap:wrap; }
	.form .content > dl dd .item-box .birth-box input{ width: 150px;}
	.form .content .btn-txt{ padding: 50px;}

	#introduce section:not(:last-child){ margin-bottom: 100px; }
	#introduce .intro .ctn-box figure{ margin: 0 20px;}
	#introduce .ci .ctn-box .item-box{ padding: 0 20px; }
	#introduce .info .ctn-box .item-box{ height: auto; }
	#introduce .info .ctn-box .item-box .txt-box{ padding: 40px 20px;}
	#introduce .info .ctn-box .item-box .txt-box .title{ margin-bottom: 40px;}
	#introduce .info .ctn-box .item-box .img-box{ height: auto; }
	#introduce .character > div > .title{ margin-right: 50px; }

	#news_view .content .file-box{ padding: 40px 30px; }
	#news_view .page-box > div{ padding: 0 20px;}

	#materials .main-wrap{ padding: 50px 20px; height: fit-content; width: calc(100% - 210px);}
	#materials .main-wrap .main-slide{ height: 470px; }
	#materials .sub-wrap{ margin-left: 30px;}

	#app_view .content{ padding: 70px 30px;}
	#app_view .content .item-box dt{ min-width: 200px; }

	/* footer */
	footer{ padding: 100px 0 60px; }
	footer .flex-box{ flex-direction:column; }
	footer .flex-box .info-box .txt-box{ text-align: left; margin-top: 20px; }
}

@media screen and (max-width:960px){
	/* common */
	.font66{ font-size:36px; }
	.font60{ font-size:32px; }
	.font50,.font46{ font-size:30px; }
	.font40{ font-size:28px; }
	.font36{ font-size:27px; }
	.font30{ font-size:25px; }
	.font24{ font-size:22px; }
	.font22{ font-size:20px; }
	.font20{ font-size:18px; }
	.font18{ font-size:16px; }

	body #star-box{ padding: 12px 25px; padding-right: 70px; right: 10px;}
	body.chat #HappytalkIframe{ bottom: 40px !important;}
	body.chat-f #star-box{ bottom: 48.5% !important;}
	body.chat-f #HappytalkIframe{ bottom: 49.5% !important;}

	#inquiry-btn.on2{ bottom: 44.5%; right: 20px;}

	#viewbtn{ height: 50px; }

	.paging{ margin-top: 60px; }

	/* header */
	header{ height: 70px; }
	header .header-box .logo a, 
	#allmenu .top-box .logo a{ width: 70px; height: auto; }
	header .header-box.on nav .gnb-bg{ opacity: 1; height: 70px; }

	#allmenu .top-box .allclose{ top: 22px; }
	#allmenu .allgnb #gnb > li > a{ font-size:28px; }
	#allmenu .allgnb #gnb > li .depth2 li a{ font-size:18px; }

	#privacy .prev-box{ flex-wrap:wrap; }
	#privacy .prev-box .txt{ width: 100%; margin-right: 0; margin-bottom: 20px;}
	#privacy .prev-box .list-box{ width: 100%; }
	#privacy .prev-box .list-box button{ padding: 0 20px; }
	#privacy .prev-box .list-box ul li a{ padding: 10px;}

	/* main */
	main .visual{ height: calc(100vh - 80px);}

	main section:not(:last-of-type){ margin-bottom: 80px; }
	main .philosophy .content .item-box{ height: 500px; }
	main .philosophy .content .item-box .txt-box{ position: static; display:block; width: 100%; margin-bottom: 100px; transform:none; }
	main .philosophy .content .item-box .txt-box .center{ bottom: 25px; font-size:16px; }
	main .philosophy .content .item-box .txt-box .txt{ width: 60%; }
	main .philosophy .content .item-box .txt-box .type2{ width: 100%; transition:all 0.8s 0.3s; text-align: left;}
	main .philosophy .content .item-box .txt-box .txt:first-child{ margin-bottom: 30px; }
	main .philosophy .content .item-box .txt-box.aos-animate .txt{ opacity: 1; filter:blur(0); -webkit-filter:blur(0); }
	main .philosophy .content .item-box .txt-box .txt br{ display:block; }
	main .philosophy .content .item-box:before{ opacity: 0.5; }

	main .sale .slide-box .swiper-slide{ width: 100%; }
	main .sale .slide-box .swiper-slide .img-box{ height: 700px;}

	main .news .content .item-box a{ padding: 30px 20px; flex-direction: column; }
	main .news .content .item-box .title{ margin: 20px 0; width: 100%; }

	#img-flex .content .item-box{ flex-direction: column; }
	#img-flex .content .item-box > *{ width: 100%; }
	#img-flex .content .item-box .txt-box{ height: 400px;  }
	#img-flex .content .item-box .txt-box .title{ top: 45%; }
	#img-flex .content .item-box .fit-box{ order:2; height: 250px; margin-top: -1px;}
	#img-flex .content .item-box .txt-box.aos-animate .stxt{ opacity: 1; filter: blur(0); -webkit-filter: blur(0);}

	/* sub */
	#sv{ height: 240px; clip-path: inset(0 0 3px);}
	#sv > div{ padding: 0 10px;}
	#sv > div .tab-box .depth2 li{ height: 55px; }

	#subContents{ padding: 80px 0 20px; }
	#subContents.sc07{ padding: 120px 0 30px;}
	
	.mb100,
	.mb150{ margin-bottom: 80px;}

	#search{ margin-bottom: 60px; }
	#search form{ flex-wrap:wrap; }
	#search form > *{ padding: 0 20px; height: 60px; width: 100%; }
	#search select{ margin-right: 0; }
	#search .input-box{ width: 100%; margin-top: 10px;}

	.popup{ padding: 80px 20px 60px;}
	.popup .txt br{ display:none; }
	.popup .close,
	#refusal-pop .close{ top: 20px; right: 20px;}
	#refusal-pop .txt-box{ margin-top: 30px; padding-top: 40px; }
	#refusal-pop .txt-box br{ display:none; }

	.complex .content{ gap:50px 15px; }
	.complex .content .item-box{ width: calc((100% - 15px) / 2); }
	.complex .content .item-box .txt-box ul{ gap:10px 0; }
	.complex .content .item-box .txt-box ul li{ width: 100%; }

	.view .content{ flex-direction:column; gap:0; }
	.view .content .slide-box,
	.view .content .info-box{ width: 100%; }
	.view .content .slide-box{ margin-bottom: 30px; }
	.view .content .info-box .txt-box{ margin: 30px 0;}
	.view .content .info-box .btn-box a,
	.view .content .info-box .btn-box #viewbtn{ height: 60px; padding: 0 20px;} 
	.view .txt-box-b{ padding: 30px; }
	.view > div > .btn-box #viewbtn{ height: 60px; width: 200px;}
	.view .order-box .tab-btn{ width: 50px; height: 50px;}
	.view .order-box .tab-slide-box{ margin-bottom: 40px;}
	.view .order-box .tabWrap{ width:calc(100% - 100px) }
	.view .order-box .tabSwiper .swiper-slide{ width: calc((100% - 40px) / 3);}
	.view .order-box .tabSwiper .swiper-slide button{ height: 50px;}
	.view .order-box .ctnSwiper .circle-box{ gap:20px 10px; }
	.view .order-box .ctnSwiper .circle-box .item-box{ width: calc((100% - 30px) / 4); height: 105px; padding: 0 20px;}
	.view .order-box .ctnSwiper .circle-box .item-box .step{ font-size:13px; }
	.view .order-box .ctnSwiper .circle-box .item-box .title{ font-size:16px; }
	.view .order-box .ctnSwiper .bar-box{ display:flex; flex-direction:column-reverse; margin-bottom: 60px; gap:8px; }
	.view .order-box .ctnSwiper .bar-box .line-box{ order:2; height: 10px; padding: 0;}
	.view .order-box .ctnSwiper .bar-box .line-box:after,
	.view .order-box .ctnSwiper .bar-box .line-box .item-box:before{ display:none; }
	.view .order-box .ctnSwiper .bar-box .line-box .item-box{ background: none;}
	.view .order-box .ctnSwiper .bar-box .line-box .percent.full span { top: calc(100% + 10px);}
	.view .order-box .ctnSwiper .bar-box .txt-box{ margin-top: 0; margin: 0 0 10px; }
	.view .order-box .ctnSwiper .bar-box .txt-box p:not(.txt){ display:none; }
	.view .order-box .ctnSwiper .bar-box .txt-box .txt{ color:#222; font-weight: 500;}
	.view .order-box .ctnSwiper .inner-slide{ flex-direction:column; height: auto; }
	.view .order-box .ctnSwiper .inner-slide .img-box{ width: 100%; height: 500px;}
	.view .order-box .ctnSwiper .inner-slide .wrap-box{ margin-left: 0; width: 100%; }
	.view .order-box .ctnSwiper .inner-slide .imgSwiper{ margin-top: 20px;}
	.view .order-box .ctnSwiper .inner-slide .imgSwiper .slide{ margin-bottom: 0; margin-right: 10px; width: 140px;}
	.view .order-box .ctnSwiper .inner-slide .imgSwiper .slick-list{ margin-bottom: 0; margin-right: -10px;}
	.view .order-box .ctnSwiper .inner-slide .arrow-box { height: 60px;}
	.view .order-box .ctnSwiper .inner-slide .arrow-box button img{ transform: rotate(-90deg); }

	.calender .select-box select{ padding: 0 20px; background: url(/img/sub/selectArrow.png) no-repeat top 50% right 20px;}
	.calender .content .tab-box li button{ font-size: 35px; }
	.calender .content .tab-box li:nth-child(2) button{ font-size:45px; }
	.calender .content .year-box .month-box .item-box{ width: 50%; min-height:300px; padding: 20px; padding-bottom: 40px;}
	.calender .content .year-box .month-box .item-box .txt-box{ margin-top: 20px;}
	.calender .content .year-box.list .month-box .item-box{ padding: 30px 20px; }
	.calender .content .year-box.list .month-box .item-box .txt-box{ flex-direction:column; align-items:flex-start; }
	.calender .content .year-box.list .month-box .item-box, 
	.calender .content .year-box.list .month-box .item-box .txt-box a{ flex-direction:column; align-items: flex-start;}
	.calender .content .year-box.list .month-box .item-box .txt-box .info-box{ margin: 20px 0; }
	.calender .content .year-box.list .month-box .item-box .txt-box a .info-box p span{ font-size:25px; }
	.calender .content .year-box .month-box .item-box .txt-box .img-pop{ padding: 60px 20px 30px;height: 80vh;}
	.calender .content .year-box .month-box .item-box .txt-box .img-pop .close{ top: 20px; right: 20px;}
	.calender .content .year-box .month-box .item-box .txt-box .inner{ height: 100%; display: flex; flex-direction: column;  justify-content: space-between;}
	.calender .content .year-box .month-box .item-box .txt-box .main-slide .slide{ flex-direction:column; height: auto;}
	.calender .content .year-box .month-box .item-box .txt-box .main-slide .slide figure{ width: 60%; height: 300px; margin: 0 auto; }
	.calender .content .year-box .month-box .item-box .txt-box .main-slide .slide .title{ margin-top: 30px;}
	.calender .content .year-box .month-box .item-box .txt-box .sub-wrap{ position: relative; bottom: auto; right: auto; width: 100%;} 
	.calender .content .year-box .month-box .item-box .txt-box .sub-slide{ height: 105px;}
	.calender .content .year-box .month-box .item-box .txt-box .sub-wrap .arrow-box{ margin-bottom: 20px;}
	.calender .content .year-box .month-box .item-box .txt-box .sub-wrap .arrow-box button{ width: 50px; height: 50px;}

	.guide .content .flex-box .item-box{ width: 300px; height: 300px; transition-delay: 0s;}
	.guide .content .flex-box .item-box > figure{ width: 50px;}
	.guide .content .flex-box .item-box #viewbtn.btn figure{ margin-left: 5px; width: 12px;}
	.guide .btn-box{ padding: 30px 20px; flex-direction:column; }
	.guide .btn-box p{ margin-bottom: 20px; display:flex; align-items:flex-start; }
	.guide .btn-box div{ width: 100%; }
	.guide .btn-box .btn{ width: 100%;}

	#inquiry .btn-box { flex-direction:row; }
	#inquiry .btn-box a#viewbtn{ width: 240px; height: 60px; }
	#inquiry .content .flex-box .item-box:last-child:after{ display:none !important; }

	#guide-m .content .flex-box{ margin-bottom: 80px;}
	#guide-m .content .flex-box .item-box{ width: 200px; height: 200px;}
	#guide-m .content .flex-box .item-box:after,
	#guide-m .content .flex-box .item-box:not(:first-child):before{ display:none !important; }
	#guide-m .sec-box dl{ flex-wrap:wrap; padding: 40px 0 60px;}
	#guide-m .sec-box dl dt{ width: 100%; margin-bottom: 30px;}
	#guide-m .sec-box .last-box{ padding: 30px;}
	#guide-m .sec-box dl dd .item-box:not(:last-child){ margin-bottom: 40px; }
	#guide-m .sec-box dl dd .item-box .table-box table tr{ height: 55px;}
	#guide-m .sec-box dl dd .item-box .table-box table tr th{ padding: 0 15px;}
	#guide-m .sec-box dl dd .item-box .title{ margin-bottom: 20px;}
	#guide-m .sec-box dl dd .order-box{  justify-content: center; gap:30px 20px;}
	#guide-m .sec-box dl dd .order-box div{ width: 180px; height: 180px;}
	#guide-m .sec-box dl dd .order-box div:not(:last-child):after,
	#guide-m .sec-box dl dd .order-box div:not(:first-child):before{ display:none; }

	#interest .tab-box li:not(:last-child):after{ margin: 0 30px;}

	#as .ctn-box{ gap:30px 20px; flex-wrap:wrap; }
	#as .ctn-box .item-box{ width: calc((100% - 20px) / 2); height: auto; padding: 20px; }
	#as .ctn-box .item-box div{ margin-top: 40px;}
	#as .ctn-box .item-box .txt{ margin-bottom: 20px; font-size:16px; }
	#as .ctn-box .item-box .num{ font-size:22px; }

	:root {
		--inputH: 55px;
	}
	.form .content{ padding: 40px 20px;}
	.form .content > dl:not(:last-child){ margin-bottom: 60px;}
	.form .content > dl dt.fs{ flex-wrap:wrap; }
	.form .content > dl dt.fs span{ margin-left: 0; margin-top: 10px; width: 100%;}
	.form .content > dl dd *:not(.title){ font-size:16px; } 
	.form .content > dl dd .item-box{ padding: 20px 0; flex-wrap:wrap; }
	.form .content > dl dd .item-box .title{ width: 100%; padding: 0; height: auto; line-height: 1.3; margin-bottom: 20px;}
	.form .content > dl dd .item-box .btn{ width: 120px;}
	.form .content > dl dd .item-box .select-box span:last-child{ margin-right: 0; }
	.form .content .policy-box .policy-wrap{ padding: 20px;}
	.form .btm-box div { margin-top: 40px;}
	.form .btm-box div #viewbtn{ width: 200px; height: 60px;}
	.form .content > dl dd .item-box .id-box div,
	.form .content > dl dd .item-box .email-box div,
	.form .content > dl dd .item-box .post-box div{ flex-wrap:nowrap; }
	.form .content > dl dd .item-box .flex-box.birth .radio-box{ margin-bottom: 10px; }
	.form .content > dl dd .item-box .birth-box p:not(:last-child){ margin-bottom: 10px;}
	.form .content > dl dd .item-box .radio-box div{ margin-right: 20px; }
	.form .content .btn-txt{ padding: 20px;}

	#faq .content .tab-box li:not(:last-child):after{ margin: 0 15px;}
	#faq .content .item-box{ padding: 0 20px; }
	#faq .content .item-box dl{ padding: 30px 0; }
	#faq .content .item-box dl dt{ margin-right: 20px;}
	#faq .content .item-box .q-box dd p{ flex-direction:column; align-items:flex-start; }
	#faq .content .item-box .q-box dd p span{ margin-right: 0; margin-bottom: 10px;}
	#faq .content .item-box .q-box dd figure{ flex-shrink:0; margin-left: 20px;}

	#introduce section:not(:last-child){ margin-bottom: 80px; }
	#introduce .intro .title-box br{ display:none; }
	#introduce .intro .title-box figure{ margin-bottom: 50px;}
	#introduce .intro .ctn-box{ flex-wrap:wrap; }
	#introduce .intro .ctn-box .item-box{ width: 170px; height: 170px; font-size:24px; }
	#introduce .intro .ctn-box figure.last{ width: 100%; margin: 20px 0; }
	#introduce .ci .ctn-box .item-box{ width: 100%; height: 250px;}
	#introduce .ci .ctn-box .item-box figure{ width: 50%; text-align: center; }
	#introduce .ci .ctn-box .item-box:nth-child(2n-1) figure{ width: 40%;}
	#introduce .ci .btn-box a{ width: 200px; height: 60px; }
	#introduce .info .ctn-box .item-box{ flex-wrap:wrap; }
	#introduce .info .ctn-box .item-box > *{ width: 100%; }
	#introduce .info .ctn-box .item-box .img-box{ height: 300px; order:2; }
	#introduce .info .ctn-box .item-box .img-box figure:not(.fit-box){ width: 50%; text-align: center; }
	#introduce .character > div{ flex-wrap:wrap; padding: 0 20px;}
	#introduce .character > div > .title{ margin: 0 0 30px; }
	#introduce .character .slide-box .swiper-slide{ width: 350px; }
	#introduce .character .slide-box .swiper-slide figure{ height: 200px; }
	#introduce .character .slide-box .swiper-slide .txt-box{ height: 250px;}


	#news_view .title-box{ flex-wrap:wrap; margin-bottom: 30px; }
	#news_view .title-box .title{ width: 100%; margin-bottom: 20px;}
	#news_view .content .file-box{ padding: 30px 20px; }
	#news_view .content .file-box .txt{ flex-wrap:wrap; }
	#news_view .content .file-box .txt span{ margin-right: 0; margin-bottom: 10px; width: 100%; }
	#news_view .page-box{ flex-wrap:wrap; justify-content: center; gap: 0 20px; }
	#news_view .page-box div{ width: 100%; margin-bottom: 10px; padding: 0 10px; height: 60px;}
	#news_view .page-box > div.next a{ justify-content:flex-start; }
	#news_view .page-box > div.next figure{ order:-1; }
	#news_view .page-box > div.next figure img{ transform:rotate(0); }
	#news_view .page-box .btn{ order:2; width: 200px; height: 60px; margin-top: 40px;}

	#materials .w1800 > .flex-box{ flex-wrap:wrap; }
	#materials .main-wrap{ width: 100%; padding: 30px 20px;}
	#materials .sub-wrap{ width: 100%; margin-left: 0; margin-top: 40px;}
	#materials .sub-wrap .sub-slide .slick-list{ margin-right:-15px; }
	#materials .sub-wrap .sub-slide .slick-slide{ margin: 0; margin-right: 15px; height: 140px;}
	#materials .sub-wrap .arrow-box{ padding-top: 30px; }
	#materials .sub-wrap .arrow-box button img{ transform:rotate(-90deg); }

	#appstatus .content .item-box{ flex-wrap:wrap; height: auto; padding: 20px 10px; }
	#appstatus .content .item-box p{ width: 100% !important; justify-content: flex-start; }
	#appstatus .content .item-box p:not(:last-child){ margin-bottom: 15px;}

	#app_view .content{ padding: 40px 20px;}
	#app_view .content .item-box{ flex-wrap:wrap; padding: 20px 10px;}
	#app_view .content .item-box > *{ padding: 0; }
	#app_view .content .item-box dt{ min-width: auto; width: 100%; margin-bottom: 10px; }
	#app_view .btn-box .btn{ width: 200px; height: 60px;}

	.account .w550{ padding: 0 20px;}
	.account .input-box input{ height: 60px; }
	.account .btn-box a{ height: 70px;}
	
	#signup h3.title{ margin-bottom: 40px;}

	/* footer */
	footer{ padding: 80px 0 40px; }
	footer .flex-box{ padding-top: 40px; margin-bottom: 50px;}
	footer .flex-box .footer-gnb #gnb{ justify-content: space-between; }
	footer .flex-box .footer-gnb #gnb > li:not(:last-child){ margin-right: 20px;}
	footer .flex-box .footer-gnb #gnb > li > a{ font-size:16px; margin-bottom: 0; }
	footer .flex-box .footer-gnb #gnb .depth2{ display:none; }
	footer .flex-box .info-box .txt-box{ margin: 30px 0;}
	footer .btn-box{ align-items: flex-start; flex-direction: column-reverse; }
	footer .btn-box .family-box button{ margin-bottom: 20px; }
}
@media screen and (max-width:768px){
	/* header */
	#main-pop{ width: 390px; right: -390px; top: 45%;}
	#main-pop .slide-wrap{ padding: 20px; }
	#main-pop .slide-wrap .btn{ width: 40px; padding: 20px 0; left: -40px;}
	#main-pop .slide-box .swiper-slide{ width: 100%; height: 450px; }
	#main-pop .slide-dots{ display: flex; justify-content:center; margin-top: 20px;}
	#main-pop .slide-dots span{ background: #fff;}

	.view .order-box .tabWrap{ width: calc( 100% - 100px) }
	#news .content{ gap:0;}
	#news .content .item-box{ width: 100%; }
	#news .content .item-box:not(:last-child){ margin-bottom: 60px;}
}

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

	/* main */
	main .sale .slide-box .swiper-slide .img-box{ height: 500px;}
	
	.complex .content .item-box{ width: 100%; }

	.guide .content .flex-box .item-box:after,
	.guide .content .flex-box .item-box:before{ display:block !important; }

	.guide .content .flex-box .item-box:after,
	.guide .content .flex-box.reverse .item-box:after{ width: 30px; transform: translateX(-50%) rotate(90deg); top: calc(100% + 15px); left: 50%; }
	.guide .content .flex-box .item-box:last-child:after{ width: 30px; bottom: -15px;}
	.guide .content .flex-box .item-box:not(:first-child):before{ transform: translateX(-50%);top: -5px; left: 50%; }
	.guide .content .flex-box.reverse .item-box.last:after{ display:none !important; }
	
	.view .order-box .ctnSwiper .inner-slide .img-box{ height: 300px;}
	.view .order-box .ctnSwiper .inner-slide .imgSwiper .slide{ height: 90px;}

	#materials .main-wrap .main-slide{ height: 250px; }
}