@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



body { font-family: 'Pretendard'; color: #1f1c1a; scroll-behavior: smooth;  }
body, input, textarea, select, button, table, h1, h2, h3, h4, h5 { font-size:16px; line-height:1.25em }

/* HTML Default */
article, aside, figcaption, figure, footer, .header, hgroup, nav, section {display:block}
mark{background:#FF0;color:#000}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, article, aside, hgroup, .header, footer, figure, figcaption, nav, section { margin:0; padding:0; border:0; font-size:100%;}
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,q:before, q:after { content:''; }
a {margin:0; padding:0; text-decoration:none;}
button { margin:0; padding:0; border:0; font:inherit; color:inherit; background:transparent; overflow:visible; cursor:pointer; line-height:1; }
button::-moz-focus-inner { margin: -1px; padding: 0; }
table {border-collapse:collapse; border-spacing:0; width:100%;}
h1, h2, h3, h4, h5 {font-weight:normal; }
img, select, input, button {vertical-align:middle;}
input, select { color:inherit; font:inherit; line-height:100%; }
textarea { resize:none; font:inherit; overflow-y:auto; }
html {-webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}
.hid, legend, hr {position:absolute; left:-10000%; top:0; overflow:hidden; width:1px; height:1px; font-size:0; line-height:0; text-indent:-10000px;}
caption {visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
body {margin:0; padding:0; font-size:14px; word-break:break-all; -webkit-text-size-adjust:none; overflow-x: hidden; }
ul, ol, li, figure {list-style-type:none; margin:0; padding:0;}
cite, blockqoute {display:block; font-style:normal;}
figcaption { display:none;}
.blind {display:block; overflow:hidden; position:absolute; top:0; left:0; width:0 !important; min-width:0 !important; height:0; border:0; background:0 0; font-size:0; line-height:0}

video { display: block; }

img { vertical-align: middle; }

.al {text-align:left !important;}
.ac {text-align:center !important}
.ar {text-align:right !important}
.fl {float:left !important;}
.fr {float:right !important;}
.c_b { clear: both; }

strong { font-weight: 800; }


a { transition: all 0.3s ease; }

a:focus { background: none!important;  text-decoration: none!important;  outline: none!important; }

:focus {
    outline: 0;
}


.pc { }

.m { display: none!important; }



/*전체*/
#wrap  { position: relative; width: 100%;  }


/*공통*/
.inner { width: 1300px; margin: 0 auto; padding: 30px; box-sizing: border-box; }
.flex_wrap { display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 30px -15px 30px -15px;  }
.title { font-family: 'GmarketSansMedium'; font-size: 21px; text-align: center;  font-weight: 700; }




/*헤더*/

.header { width: 100%; position: relative; overflow: hidden; }

.header .flex_wrap li { width: calc(50.0% - 0px); }

.header .flex_wrap li:first-child {text-align: left; }
.header .flex_wrap li:last-child {text-align: right; }


.header .logo img { width: 150px; height: auto; }

.header .pb_wrap img { width: 365px; height: auto; padding-top: 6px;  }




/*네비게이션*/

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
    background: #fff; 
    border-bottom: 1px #ccc; 
    
}

.navbar h1 {
    margin: 0;
}

.menu {
    display: flex;
    gap: 20px;
}

.menu a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    transition: color 0.3s ease;
}

.menu a:hover {
    color: #ff9800;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        gap: 10px;
        position: absolute;
        top: 50px;
        right: 20px;
        background-color: #333;
        padding: 10px;
        border-radius: 5px;
    }

    .menu.active {
        display: flex;
    }

    .hamburger {
        display: flex;
    }
}

.section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.section:nth-child(odd) {
    background-color: #f4f4f4;
}

.section:nth-child(even) {
    
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}



/*비주얼*/

.visual { margin: 80px 0 0 0;  position: relative;  width: 100%;  height: 660px;  background: #ffc64c url("../images/visual_bg_02.png") 50% 50% no-repeat;    }

.visual .text { padding: 50px 30px 30px 0; box-sizing: border-box; }
.visual .text img { width: 550px; height: auto; }

.visual .btn_wrap ul { max-width: 400px; }
.visual .btn_wrap li  { 
	width: calc(50.0% - 15px); margin: 0 7px 0 7px;
    
    height: 50px;
    border-radius: 10px;   }
.visual .btn_wrap li a { display: block; text-align: center; color: #fff; font-size: 17px; line-height: 48px;   }

.visual .btn_wrap li img  { display: inline-block; margin-right: 7px; width: 20px; height: 20px; }

.visual .btn_wrap .call { background: #252121;}
.visual .btn_wrap .kakao { background: #252121;}



.content_01 {  position: relative;  width: 100%; margin: 50px 0 50px 0;   }

.content_01 .flex_wrap li {  width: calc(33.3% - 30px); margin: 0 15px 0 15px; 
box-sizing: border-box; border-radius: 15px;  box-shadow: 6px 5px 8px 4px rgb(216 216 216);  }
.content_01 .flex_wrap li .img_wrap  { background: #f8f7f1; border-radius: 15px;    }
.content_01 .flex_wrap li .img_wrap img { display: block; width: 100%; height: auto; margin: 0 auto;    }


.content_01 .flex_wrap li .text_wrap { text-align: center; padding: 30px; box-sizing: border-box;  font-family: 'GmarketSansMedium'; }
.content_01 .flex_wrap li .text_wrap h3 { font-size: 21px; font-weight: 700; line-height: 23px; } 
.content_01 .flex_wrap li .text_wrap p { font-size: 18px;  font-weight: 200; padding: 13px 0 0 0; box-sizing: border-box;  
line-height: 25px; } 


.content_02 .con  { width: calc(50.0% - 30px); margin: 0 15px 0 15px;  }



 .animated-list {
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

.animated-list ul {
    background: #eeeeee;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    animation: moveUpDown 7s infinite linear; /* Adjusted speed and smoothness */
}

.animated-list li {
    text-align: center;
    line-height: 50px;
    height: 50px;
}



@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-200px); /* Matches content height for flawless looping */
    }
}

/* Ensure perfect loop by repeating entire content */
.animated-list ul {
    display: flex;
    flex-direction: column;
    width: 100%;
}


.animated-list table tr { background: #eeeeee; padding: 20px; height: 40px; box-sizing: border-box; }
.animated-list table img {  width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; } 
.animated-list table td { font-size: 16px; }


.animated-list .icon_text span {  display: inline-block; font-weight: 700;  }

.animated-list .price { font-weight: 700; color: #ce2525;  }

.animated-list .today { color: #707070; font-size: 14px;  }









.content_03 .flex_wrap  {  }
.content_03 .flex_wrap li {  width: calc(33.3% - 30px); margin: 0 15px 0 15px; font-family: 'GmarketSansMedium'; 
    font-size: 21px; border-radius: 20px; text-align: center!important; padding: 40px 30px 40px 30px; box-sizing: border-box; }

.content_03 .flex_wrap li img { width: 40px; height: 40px; margin-right: 10px;   }


.content_03 .flex_wrap li a {  display: inline-block; color: #fff;  } 

.content_03 .flex_wrap li:nth-child(1) { background: #ffe700; } 
.content_03 .flex_wrap li:nth-child(1)  a { color: #000; }
.content_03 .flex_wrap li:nth-child(2) { background: #371d1e; }
.content_03 .flex_wrap li:nth-child(3) { background: #1a1805;  }



.content_04 .flex_wrap .con {  width: calc(27.0% - 30px); margin: 0 15px 0 15px;  }
.content_04 .flex_wrap .con h3 { font-weight: 800; font-size: 19px; margin: 20px 0 0 0;  }

.content_04 .flex_wrap .con ul li { font-size: 15px; line-height: 24px; }



.content_04 .flex_wrap .con3 { padding: 10px 0 10px 0;  width: calc(46.0% - 30px); } 


.content_04 .flex_wrap .con1 img { display: block;  width: 175px; height: auto;  }
.content_04 .flex_wrap .con1 strong { display: block; font-size: 26px; padding: 10px 0 10px 0; }

.content_04 .flex_wrap .con1 ul { padding: 10px 0 10px 0; }

.content_04 .flex_wrap .con3 { border-radius: 20px; }
.content_04 .con3 img {  display: block; width: 100%; height: auto; border-radius: 15px;     }


.content_04 .flex_wrap .con2 ul li { line-height: 31px;  }  
  


	.quick-menu {
		position: fixed;
		bottom: 200px;
		right: 30px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		z-index: 1; 
	}
	.menu-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 150px;
		height: 50px;
		background-color: #000!important;
		color: white;
		text-decoration: none;
		font-size: 16px;
		border-radius: 8px;
		text-align: center;
		transition: transform 0.1s;
		font-weight: bold; 
	}
	.menu-item:hover {
		background-color: #393535!important;
	}
	.menu-item:active {
		transform: scale(0.95); background-color: #393535 !important;
	}

.menu-item {
    background-color: #393535 !important;
}
.menu-item:hover {
    background-color: #393535 !important;
}
.menu-item:active {
    background-color: #393535 !important;
}
.menu-item:focus {
    background-color: #000 !important;
    outline: none;
}


#kakao-btn { background:#ffe700!important; color: #000!important;  }




.quick-menu img { width: 20px; height: 20px; margin-right: 20px; }



/*footer*/

.footer { position: relative; width: 100%; background: #171616;   }
.footer .inner { padding: 30px 20px 30px 20px; }
.footer .flex_wrap {  margin: 0; }
.footer .flex_wrap li {  color: #fff; font-size: 15px; float: left; line-height: 25px; margin: 0 10px 0 10px;  }

.footer .flex_wrap li{ font-weight: 400; }

.footer .copy { color: #c7c3c3; font-size: 15px; padding: 20px 0 10px 0; }



      




@media screen and (max-width: 1600px) {
    
    
    .inner { width: 100%; }    



    
    
    .navbar { height: 70px; }
    
    
    .visual { background: #ffc64c url(../images/visual_bg_02.png) bottom center no-repeat; height: 500px;  margin: 70px 0 0 0; background-size: contain; }
    .visual .text { padding: 30px 0 30px 0; }

    
    
    .content_01 { padding: 0; margin: 0;  }
    .content_01 .flex_wrap li .text_wrap { padding: 20px; }
    .content_01 .flex_wrap li .text_wrap h3 { font-size: 16px; } 
    
    
    .content_01 .flex_wrap li .text_wrap p { font-size: 14px; line-height: 20px; }
    
    
    
    .content_02 .con { width: 100%; margin-bottom: 30px;  }
    .animated-list table td { font-size: 13px; }
    
    .content_03 .flex_wrap li img { display: block; margin: 0 auto; } 
    
    
    .content_03 .flex_wrap li { padding: 30px; 20px 30px 20px;  }
    
    .content_03 .flex_wrap li span { display: block;  font-size: 16px; margin: 13px 0 0 0; }
    
    
     .content_04 .flex_wrap .con { width: calc(33.3% - 30px);  }
    
    
    .content_04 .flex_wrap .con3 { }
    
  
	
	
	
    
    

}


	
	
   

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


.pc { display: none; }

.m { display: block!important; }
	
	
.visual .text img { width: 100%; }


.inner { padding: 20px; }  

.visual { height: 375px; }

.content_04 .flex_wrap { margin: 0; }
.content_04 .flex_wrap .con1,
.content_04 .flex_wrap .con2 { width: calc(50.0% - 0px); margin: 0;   }  	


.content_04 .flex_wrap .con3 { width: 100%; margin-top: 20px;   }


.header .pb_wrap img { width: 100%; padding-top: 14px; }


.flex_wrap { margin: 20px 0 20px 0; }	

.content_01 .flex_wrap li {  width: calc(33.3% - 20px);
margin: 0 10px 0 10px;  }

.content_01 .flex_wrap li .img_wrap { border-radius: 10px; }
.content_01 .flex_wrap li .text_wrap h3 { font-size: 15px; line-height: 21px; }
.content_01 .flex_wrap li .text_wrap p { font-size: 13px; line-height: 19px; }
.content_01 .flex_wrap li .img_wrap img { width: 60%;  padding: 10px; }


.animated-list { height: 200px; }

.content_03 .inner { padding: 0 20px 10px 20px; }

.content_04 .flex_wrap .con { margin: 0 0 10px 0; }

.content_04 .flex_wrap .con3 { padding: 0;}
.content_04 .flex_wrap .con h3 { font-size: 15px; }

.content_04 .flex_wrap .con1 strong { font-size: 21px;  }

.content_04 .flex_wrap .con ul li { font-size: 13px; line-height: 20px; }



.footer .inner { padding: 40px 20px 40px 20px; }	
.footer .flex_wrap li { font-size: 15px; }
.footer .copy { font-size: 12px; }

	
	
.visual .btn { margin:0; }
.visual .btn a { font-size: 16px;   }


.quick-menu { bottom: 30px;  }
.quick-menu span { display: none; }

.menu-item { width: 70px; height: 70px; border-radius: 200px; }
.quick-menu img { width: 30px; height: 30px; display: block; margin: 0 auto; }



}



	
   

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

.content_01 .flex_wrap li { width: calc(100% - 0px); margin: 20px 10px 20px 10px;  }

.content_02 .con { margin: 0 0 20px 0; }

.content_03 .flex_wrap li { width: calc(33.3% - 10px); margin: 0 5px 0 5px; border-radius: 15px;  }
.content_03 .flex_wrap li { padding: 20px 10px 20px 10px; }

.content_03 .flex_wrap li img { width: 30px; height: 30px; }
.content_03 .flex_wrap li span { font-size: 14px; }

.content_04 .flex_wrap .con1, .content_04 .flex_wrap .con2 { width: 100%; }
.content_04 .inner { padding: 0 20px 20px 20px; }

.content_04 .flex_wrap .con3 { margin: 20px 0 20px 0; }


.animated-list table td { font-size: 12px; }	

.animated-list li { padding: 0 20px 0 20px; height: auto; line-height: auto; }
.animated-list table img { width: 15px; height: 15px; }


.visual .btn_wrap li { height: 45px; border-radius: 7px; }
.visual .btn_wrap li a { font-size: 15px; line-height: 45px;  }	


}