@import url('font.css'); /* 폰트임 */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap');

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,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,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,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0; line-height:160%; letter-spacing:normal} /* delete vertical-align,font:inherit; */
html {overflow-x:hidden;}
body,html{width:100%; font-size:17px; color: rgba(51, 51, 51, 0.60); font-weight:400; font-family:'Jost', 'Pretendard',  Malgun Gothic,'Malgun Gothic', sans-serif; word-break: keep-all;}
*{font-family: 'Jost','Pretendard', Malgun Gothic,'Malgun Gothic', sans-serif; word-break: keep-all;}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table {border-collapse:separate;border-spacing:0; font-size:0.9375rem;}
table caption {overflow:hidden; font-size:0; line-height:0; font-size:0.9375rem;}
tbody,tfoot,thead,tr,th,td {margin:0;line-height:160%;letter-spacing:normal;}
dt{display:block;}
hr{display:none;}
a{cursor:pointer;text-decoration:none;color:inherit;}
a, a:hover{transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
input:focus, textarea:focus, button:focus {outline:none;}  /* 크롬에서 커서 클릭시 파란색 테두리 제외*/
/* input, button {border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;} */
select { border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: url("/img/cat_arrow_bk.png") no-repeat right 18px center !important;;}
select::-ms-expand {display:none}
input[type=text]::-ms-clear {display: none;}

input::-webkit-input-placeholder {color:rgba(255,255,255,0.8);}
input:-ms-input-placeholder {color:rgba(255,255,255,0.8);}
input::placeholder {color:rgba(255,255,255,0.8);}
textarea::placeholder {color:rgba(255,255,255,0.8);} 

span, b, strong, br {line-height:inherit; font-family:inherit;}

/* Web Content Accessibility TTS(Text To Speech) Code */
.blind {position:absolute; top:0px; left:0px; overflow:hidden; display:inline-block !important; width:1px !important; height:1px !important; margin:0 !important; font-size:0 !important; line-height:0 !important;}




/* Common */
.ls0 {letter-spacing:0 !important; }
.white {color:var(--white) !important; }
.sub_color {color:var(--sub-color) !important; }
.eng {font-family:var(--eng); letter-spacing:0 !important;}
.center{text-align:center !important;}
.bold{font-weight:700 !important; letter-spacing:inherit; line-height:inherit;}
.medium{font-weight:500 !important; letter-spacing:inherit; line-height:inherit;}
.sbold{font-weight:600 !important; letter-spacing:inherit; line-height:inherit;}
.grayBox{background-color:#F5F5F5 !important;}
.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48; transition:all 0.2s linear;}
.colormain { color:var(--main) !important; }
.light {line-height:inherit; letter-spacing:inherit; font-weight:300;}

.com_pad {padding:200px 0; box-sizing:border-box;}
.com_pad_b {padding:0 0 200px; box-sizing:border-box;}
.com_pad_t {padding:200px 0 0; box-sizing:border-box;}

.sub_pad {padding:100px 0; box-sizing:border-box;}
.sub_pad_b {padding:0 0 100px; box-sizing:border-box;}
.sub_pad_t {padding:100px 0 0; box-sizing:border-box;}



/***** S:: 변수 *****/
:root{
	--main:#C18861;
	--sub-color:#5A514B;
	--black:#333;
	--white:#fff;
	--green:#009944;
	--grayBg:#F5F5F5;
	--eng:'Jost', sans-serif;
	--vh: 100vh;
}
/***** E:: 변수 *****/


/* Start-슬릭기본 */
.slick-slider{display: block;box-sizing: border-box;
		-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
			touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;}
.slick-list{display: block;overflow: visible;margin: 0; padding:0 !important;  outline: 0 !important;}
.slick-track {display:flex; flex-wrap:wrap;}
.slick-slide{outline: 0 !important; border:0;}
.slick-initialized .slick-slide{display: block; outline: 0 !important;}
/* End-슬릭기본 */

@keyframes slide-up_ani {
	from{opacity:0; transform: translateY(70px);}
	to{opacity:1.0; transform: translateY(0);}
}


/* 레이아웃 */
#wrap {position:relative; min-width:320px; width:100%}
.w1350 {width:90%; max-width:1350px; box-sizing:border-box; margin:0 auto;}



/**** 공통 CSS ****/
.section_scroll {position:absolute; top:50%; left:3%; display:flex; flex-wrap:wrap; align-items:flex-end; transform:translateY(-50%); z-index:90;}
.section_scroll p {writing-mode:vertical-rl; font-size: 12px; font-family:var(--eng); line-height:1; text-transform: uppercase;  letter-spacing: 8.4px; color:rgba(255,255,255,0.7); position:relative; top:5px; text-align:right; transition:all 0.3s linear;}
.section_scroll span {display:block; width:1px; height:170px; display:block; margin-left:18px; background:rgba(217,217,217,0.3); position:relative;  overflow:hidden;  transition:all 0.3s linear;}
.section_scroll span::after {content:''; width:1px; height:25px; background:#D9D9D9; position:absolute; top:-25px; left:0; animation:scroll_ani 1.5s linear infinite; transition:all 0.3s linear;}

.section_scroll.black p {color:var(--black); transition:all 0.3s linear;}
.section_scroll.black span {background:rgba(51,51,51,0.14); transition:all 0.3s linear;}
.section_scroll.black span::after {background:var(--black); transition:all 0.3s linear;}

@keyframes scroll_ani {
	0% {top:-25px;}
	100% {top:170px;}
}
/**** 공통 CSS ****/

/* header */
#header{position:fixed; left:0; top:0; z-index:99999; transition:all .4s; width: 100%; border-bottom:1px solid transparent;}
#header .header_in{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:50; max-width:1600px; padding:30px 0;}
#header .header_in h1{}
#header .header_in h1 a{display:block; width:277px; height:48px;}
#header .header_in h1 a img{width: 100%; height: auto;}
#header .header_in {}

#header .header_in .lang {position:absolute; top:40px; right:0; width:54px; height:30px; border-radius:50%; background:rgba(255,255,255,0.2); padding:0 12px; box-sizing:border-box; cursor:pointer; overflow:hidden; transition:all 0.3s linear; margin-right:0;}
#header .header_in .lang:hover {height:90px; border-radius:15px; transition:all 0.3s linear; background:#f5f5f5;}
#header .header_in .lang span {position:relative; font-family:var(--eng); display:block; width:100%; line-height:32px; font-size:12px; color:#fff;  display:flex; flex-wrap:wrap; align-items:center; transition:all 0.3s linear;  letter-spacing: 0.24px;
text-transform: uppercase; font-weight:500; transition:all 0.3s linear;}
#header .header_in .lang span::after {content:''; width:6px; height:6px; background:url("/img/sm_arrow.png")no-repeat center; position:absolute; top:50%; right:0; margin-top:-3px; transition:all 0.3s linear;}
#header .header_in .lang:hover span::after {transform:rotate(180deg); transition:all 0.3s linear; background:url("/img/sm_arrow_up.png")no-repeat center;}
#header .header_in .lang:hover span {color:rgba(34,34,34,0.6); transition:all 0.3s linear; }
#header .header_in .lang ul {padding:0 0 6px;}
#header .header_in .lang ul li {margin-left:0; margin-bottom:5px;}
#header .header_in .lang ul li:last-of-type {margin-bottom:0;}
#header .header_in .lang ul li a {font-size:12px; font-family:var(--eng); line-height:1; display:block; font-weight:400;  transition:all 0.3s linear; }
#header .header_in .lang ul li a:hover {color:var(--main);  transition:all 0.3s linear; font-weight:bold;}

#header.on .header_in .lang, #header.fixed .header_in .lang, #header.black .header_in .lang {background:#f5f5f5; transition:all 0.3s linear;}
#header.on .header_in .lang span, #header.fixed .header_in .lang span, #header.black .header_in .lang span {color:rgba(51,51,51,0.6);  transition:all 0.3s linear;}
#header.on .header_in .lang span::after, #header.fixed .header_in .lang span::after, #header.black .header_in .lang span::after{background:url("/img/sm_arrow_up.png")no-repeat center; transition:all 0.3s linear;}


#header.on, #header.fixed, #header.back_w  {background:#fff; transition:all 0.3s linear; }
#header.fixed {border-color:rgba(221,221,221,0.6);}
#header.on .header_in h1 a, #header.fixed .header_in h1 a, #header.black .header_in h1 a {background:url("/eng/img/logo_up.png")no-repeat center / 100%; transition:all 0.3s linear; }
#header.on .header_in h1 a img, #header.fixed .header_in h1 a img, #header.black .header_in h1 a img{opacity: 0;}











/* footer */
#contact {background:var(--black); padding:170px 0 0;}
#contact .section_scroll {left:auto; right:3%;}
#contact .section_scroll span::after {animation-direction:reverse;}
#contact .contact {display:flex; flex-wrap:wrap; justify-content:space-between;}
#contact .contact .info, #contact .contact .cont_map {width:calc((100% - 45px) / 2);}
#contact .contact .info > img {display:block; margin:0 0 50px; max-width:100%;}
#contact .contact .info dl {display:flex; flex-wrap:wrap; padding:27px 0; border-top:1px solid rgba(255,255,255,0.1);}
#contact .contact .info dl.last{border-bottom:1px solid rgba(255,255,255,0.1);}
#contact .contact .info dl dt {width:230px; color:var(--white); font-weight:500; font-size:1.167rem;}
#contact .contact .info dl dd {width:calc(100% - 230px);}
#contact .contact .info dl dd.eng {display:flex; flex-wrap:wrap; align-items:center; font-size:1.278rem; color:var(--white); font-weight:bold;}
#contact .contact .info dl dd.eng i {font-size:23px; display:block; margin-right:8px;}

		#contact .contact .info dl dd ul {padding:6px 0 0;}
		#contact .contact .info dl dd ul li {padding-left:116px; box-sizing:border-box; position:relative; line-height:1.4; color:rgba(255,255,255,0.6); font-size:0.833rem; margin:0 0 6px;}
		#contact .contact .info dl dd ul li:last-of-type {margin:0;}
		#contact .contact .info dl dd ul li.po_txt {padding-left:0; color:var(--main); margin:11px 0 0;}
		#contact .contact .info dl dd ul li span {position:absolute; top:0; left:0; line-height:inherit;  display:block; font-size:inherit; color:var(--white);}

.link_cont {display:flex; flex-wrap:wrap; justify-content:space-between; margin: 25px 0 0;}
.link_cont a {display:flex; flex-wrap:Wrap; align-items:center; justify-content:center; width:calc((100% - 2px) / 3); background:rgba(255,255,255,0.1); line-height:56px; font-size:0.833rem; text-align:center; color:var(--white); transition:all 0.3s linear;}
.link_cont a i {display:block; margin-right:10px;}
.link_cont a i img {margin:0  !important; width: 100%;}
.link_cont a:hover {background:#fff; transition:all 0.3s linear; color:var(--main);}


#contact {position:relative; }
#contact .contact .cont_map {}
#contact .contact .cont_map .map_wrap {width:100%; height:calc(100% - 100px);}
#contact .contact .cont_map .map_wrap iframe{width:100%; height:100%;}
#contact .contact .cont_map .adr{display: flex; flex-wrap:wrap; margin: 0 0 20px;}
#contact .contact .cont_map .adr dt{width: 136px; color:var(--white); font-weight:500; font-size:1.167rem; line-height:1;}
#contact .contact .cont_map .adr dd{width: calc(100% - 136px); font-size:0.882rem; line-height: 160%; color:#fff;}
#contact .contact .cont_map .adr dd .po_txt{color:var(--main); padding:12px 0 0;}

#footer {padding:70px 0;}
#footer .copy {letter-spacing: 0.28px; text-transform: uppercase; font-size:0.778rem; color:rgba(255,255,255,0.5);}
#footer .copy a {display:inline-block; font-size:inherit; letter-spacing:inherit; color:inherit; line-height:inherit; transition:all 0.3s linear;}
#footer .copy a:hover {color:var(--white); transition:all 0.3s linear;}


#bottom_quick {position:fixed; bottom:0; left:0; width:100%; z-index:99999;  transition:all 0.5s ; min-width:320px;}
#bottom_quick.on {bottom:-90px; transition:all 0.5s ;}
#bottom_quick .quick_close {display:block; width: 50px; height: 50px; border-radius:100% 100% 0 0; background:var(--main); margin:0 auto -25px; text-align:center;  padding-top:5px; box-sizing:border-box;}
#bottom_quick .quick_close i {display:block; color:#fff; font-size:18px; transition:all 0.3s ; transform:rotate(0);  }
#bottom_quick.on .quick_close i {transform:rotate(-180deg);  transition:all 0.3s ;}
#bottom_quick .quick_in {border-top:3px solid var(--main); background:#fff;}
#bottom_quick .quick_in .w1350 {display:flex; flex-wrap:wrap; max-width:1600px;}
#bottom_quick .quick_in dl {width:25%; padding:20px 0;}
#bottom_quick .quick_in dl a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;  width:100%; height:100%; padding:0 10px; box-sizing:border-box; min-height:50px; border-right:1px solid #ddd;}
#bottom_quick .quick_in dl:first-of-type a {border-left:1px solid #ddd; }
#bottom_quick .quick_in dl dt {width: 32px;}
#bottom_quick .quick_in dl dt img{width: 100%;}
#bottom_quick .quick_in dl dd {padding:0 0 0 10px; box-sizing:border-box; font-size:0.889rem; color:#666; transition:all 0.3s linear;}
#bottom_quick .quick_in dl a:hover dd {color:var(--main); transition:all 0.3s linear;}












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



.section_scroll {transform:scale(0.8) translateY(-50%); left:1%;}
#contact .section_scroll {right:1%;}



}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){


/* footer */
#contact .contact {}
#contact .contact .info > img {width: 300px;}
#contact .contact .info dl dt {width:100%; margin: 0 0 5px;}
#contact .contact .info dl dd {width:100%;}

#contact {}
#contact .contact .cont_map {}
#contact .contact .cont_map .map_wrap {height:calc(100% - 150px);}
#contact .contact .cont_map .adr dt{width: 100%; margin: 0 0 10px;}
#contact .contact .cont_map .adr dd{width: 100%;}


#bottom_quick.on {bottom:-100px}
#bottom_quick .quick_in dl a {align-content:center; text-align:center; }
#bottom_quick .quick_in dl a dd {margin:5px 0 0; width:100%; padding: 0;}


}

/*******************************************************************************
    @media  ~980px                body,html{font-size:14px; }     3%
*******************************************************************************/
@media all and (max-width:980px){


/* Common */
html,body{font-size:14px;}

.com_pad {padding:150px 0;}
.com_pad_b {padding:0 0 150px;}
.com_pad_t {padding:150px 0 0;}

.sub_pad {padding:70px 0;}
.sub_pad_b {padding:0 0 70px;}
.sub_pad_t {padding:70px 0 0;}

.section_scroll {display:none !important;}


/* header */
#header{}
#header .header_in{padding:20px 0;}
#header .header_in h1 a{width:219px; height:38px;}
#header .header_in .lang {top:25px;}







/* footer */
#contact {padding:100px 0 0;}
#contact .contact {}
#contact .contact .info, #contact .contact .cont_map {width:calc((100% - 20px) / 2);}
#contact .contact .info > img {margin:0 0 30px; width: 200px;}
#contact .contact .info dl {padding:20px 0;}
#contact .contact .info dl dd.eng {}
#contact .contact .info dl dd.eng i {font-size:20px; margin-right:5px;}

		#contact .contact .info dl dd ul {padding:6px 0 0;}
		#contact .contact .info dl dd ul li {padding-left:100px; margin:0 0 6px;}
		#contact .contact .info dl dd ul li.po_txt {margin:8px 0 0;}

.link_cont {margin: 20px 0 0;}
.link_cont a {width:calc((100% - 2px) / 3); line-height:40px;}
.link_cont a i {margin-right:5px; width: 15px;}

#contact {}
#contact .contact .cont_map {}
#contact .contact .cont_map .adr dd .po_txt{padding:10px 0 0;}
#footer {padding:30px 0 50px;}




#bottom_quick.on {bottom:-80px}
#bottom_quick .quick_in .w1350 {width:100%;}
#bottom_quick .quick_in dl {padding:15px 0;}
#bottom_quick .quick_in dl a{padding: 0 5px;}
#bottom_quick .quick_in dl dt img {max-width:20px;}
#bottom_quick .quick_in dl:first-of-type a {border-left:0;}
#bottom_quick .quick_in dl:last-of-type a {border-right:0;}








}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* Common */
html,body{font-size:13px;}

.com_pad {padding:70px 0;}
.com_pad_b {padding:0 0 70px;}
.com_pad_t {padding:70px 0 0;}

.sub_pad {padding:40px 0;}
.sub_pad_b {padding:0 0 40px;}
.sub_pad_t {padding:40px 0 0;}


/* header */
#header{}
#header .header_in{padding:15px 0;}
#header .header_in h1 a{width:162px; height:28px;}
#header .header_in .lang {top:20px; width:45px; height:25px; padding:0 10px;}
#header .header_in .lang span {font-size:10px; line-height:25px;}
#header .header_in .lang ul li a {font-size:10px;}
#header .header_in .lang:hover {height:70px; border-radius:10px;}


/* footer */
#contact {padding:70px 0 0;}
#contact .contact {}
#contact .contact .info, #contact .contact .cont_map {width:100%;}
#contact .contact .info > img {margin:0 0 20px; width: 150px;}
#contact .contact .info dl {padding:15px 0;}
#contact .contact .info dl dt {margin: 0 0 3px;}
#contact .contact .info dl dd.eng {}
#contact .contact .info dl dd.eng i {font-size:18px;}

#contact {}
#contact .contact .cont_map {padding:30px 0 0;}
#contact .contact .cont_map .map_wrap {height:200px;}
#contact .contact .cont_map .adr{margin: 0 0 10px;}
#contact .contact .cont_map .adr dt{margin: 0 0 8px;}
#footer {padding:20px 0 40px;}


#bottom_quick.on {bottom:-76px}
#bottom_quick .quick_in dl{padding:13px 0;}


}
/*******************************************************************************
    @media 420px                body,html{font-size:13px; }
*******************************************************************************/
@media all and (max-width:420px){



#bottom_quick.on {bottom:-88px}




}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}