@charset "utf-8";

@import url('//fonts.googleapis.com/earlyaccess/jejumyeongjo.css');

/* 내용관리 */
#ctt { background:#fff; }
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con { }
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

.inner {  width:100%; max-width:1230px; line-height:1; margin:0 auto; padding:clamp(70px, 10vw, 130px) 15px; text-align:center; }
.full { width:100%; line-height:1; margin:0 auto; padding:0; text-align:center; }

.title_wrap { display:flex; flex-flow:column; text-align:left; }
.title_wrap .bold_title { line-height:1.5; font-size:clamp(18px, 2.4vw, 30px); font-weight:600; letter-spacing:-0.02em; word-break:keep-all; }
.title_wrap .title2 { width:fit-content; line-height:1.5; margin-bottom:10px; font-size:clamp(16px, 1.8vw, 20px); font-weight:600; word-break:keep-all; position:relative; }
.title_wrap .title2::after { content:''; display:flex; width:clamp(6px, 1vw, 8px); aspect-ratio:1/1; border-radius:50%; background:#f59023; position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); }

.text_wrap { display:flex; flex-flow:column; text-align:left; }
.text_wrap .tit { line-height:1.5; font-size:clamp(16px, 2vw, 24px); font-weight:600; letter-spacing:-0.02em; word-break:keep-all; }
.text_wrap .txt { line-height:1.7; margin-top:clamp(10px, 1vw, 15px); font-size:clamp(14px, 1.7vw, 20px); font-weight:400; color:#000; letter-spacing:-0.02em; word-break:keep-all; }
.text_wrap .txt .bold { font-weight:600; color:#333; }

.as_location { background:#fff; position:relative; }
.as_location .inner { padding:clamp(40px, 10vw, 60px) 15px; }
.as_location .inner2 { padding:0 15px clamp(100px, 15vw, 150px); }
.as_location .map_wrap { width:100%; height:clamp(300px, 40vw, 500px) !important; margin:0 auto; padding:0; overflow:hidden; }
.as_location .map_wrap .contact_map { width:100% !important; }
.as_location .map_wrap .contact_map .wrap_map { height:clamp(300px, 40vw, 500px) !important; transition:height 0.4s linear; }
.as_location .map_wrap .contact_map .wrap_controllers { display:none; }
.as_location .map_wrap .contact_map .cont { display:none; }

.as_location .location_wrap { position:relative; }
.as_location .location_wrap .location_ul { display:flex; flex-flow:wrap; gap:10px; margin-top:clamp(-60px, -5vw, -40px); }
.as_location .location_wrap .location_ul .location_li {
	display:flex; align-items:center; justify-content:space-between; width:calc((100% - 30px) / 4); padding:clamp(15px, 2vw, 30px); background:#f8f8f8; border:1px solid #ddd; border-radius:10px;
	font-size:clamp(10px, 1.4vw, 18px); text-align:left; letter-spacing:-0.02em; word-break:keep-all; cursor:pointer; transition:background 0.2s ease, border 0.2s ease; order:1;
}
.as_location .location_wrap .location_ul .location_li .location_name { font-weight:600; color:#777; transition:color 0.2s ease; }
.as_location .location_wrap .location_ul .location_li .location_info { display:none; }
.as_location .location_wrap .location_ul .location_li .location_info li {}
.as_location .location_wrap .location_ul .location_li .location_info li span {}
.as_location .location_wrap .location_ul .location_li .location_info li .icon {}
.as_location .location_wrap .location_ul .location_li .location_icon { display:flex; font-size:0.8em; color:#777; transition:color 0.2s ease; }
.as_location .location_wrap .location_ul .location_li .location_icon i { margin-left:5px; }
.as_location .location_wrap .location_ul .location_li:not(.active):hover { background:#fff; border:1px solid #ccc; box-shadow:0 0 6px rgba(0,0,0,0.1); }
.as_location .location_wrap .location_ul .location_li:not(.active):hover .location_name { color:#000; }
.as_location .location_wrap .location_ul .location_li:not(.active):hover .location_icon { color:#f59023; }

.as_location .location_wrap .location_ul .location_li.active {
	display:flex; align-items:center; justify-content:flex-start; width:100%; margin-bottom:clamp(20px, 3vw, 40px); padding:clamp(20px, 4vw, 60px); padding-left:clamp(10px, 5vw, 100px); background:#fff; border:0; border-radius:clamp(10px, 1vw, 15px);
	box-shadow:0 0 20px rgba(100,100,100,0.2); cursor:auto; order:0;
}
.as_location .location_wrap .location_ul .location_li.active .location_name { width:40%; padding-top:clamp(15px, 2vw, 23px); font-size:clamp(18px, 2.4vw, 30px); font-weight:700; color:#000; position:relative; }
.as_location .location_wrap .location_ul .location_li.active .location_name::before { content:''; display:block; width:clamp(25px, 3vw, 40px); height:3px; background:#f59023; position:absolute; top:0; left:0; }
.as_location .location_wrap .location_ul .location_li.active .location_name::after { content:'T&K Automatic Door'; display:block; margin-top:clamp(10px, 1.5vw, 20px); font-size:clamp(10px, 1.3vw, 16px); font-weight:300; color:#aaa; }
.as_location .location_wrap .location_ul .location_li.active .location_info { display:flex; flex-flow:column; flex-grow:1; gap:clamp(5px, 1vw, 10px); }
.as_location .location_wrap .location_ul .location_li.active .location_info li { display:flex; align-items:center; }
.as_location .location_wrap .location_ul .location_li.active .location_info li span { min-width:clamp(20px, 3vw, 40px); margin:0 clamp(10px, 2vw, 20px); font-weight:600; }
.as_location .location_wrap .location_ul .location_li.active .location_info li .icon { display:flex; align-items:center; justify-content:center; width:clamp(16px, 2vw, 30px); aspect-ratio:1/1; background:#eee; border-radius:50%; color:#aaa; }
.as_location .location_wrap .location_ul .location_li.active .location_icon { display:none; }

.bottom_location { position:relative; background:url('./img/img1.jpg') no-repeat center center/ cover; }
.bottom_location::before { content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; top:0; left:0; }
.bottom_location .inner {}
.bottom_location .section_contents { display:flex; flex-flow:wrap; width:100%; }
.bottom_location .section_contents li {
	display:flex; flex-flow:column; width:calc(100% / 3); padding-left:clamp(20px, 4vw, 60px); border-right:1px solid rgba(255,255,255,0.3); color:#fff; text-align:left; text-shadow:0 0 10px rgba(0, 0, 0, 0.5); letter-spacing:-0.02em; word-break:keep-all;
}
.bottom_location .section_contents li:last-of-type { border:0; }
.bottom_location .section_contents li .num { font-size:clamp(16px, 1.8vw, 20px); font-weight:300; }
.bottom_location .section_contents li .tit { margin:clamp(20px, 2.5vw, 30px) 0; font-size:clamp(18px, 2.1vw, 24px); font-weight:600; }
.bottom_location .section_contents li .txt { line-height:1.5; font-size:clamp(14px, 1.7vw, 20px); font-weight:400; }





/* 반응형 */
@media (max-width: 1450px){
	
}

@media (max-width: 1250px){

}

@media (max-width: 1200px){

	.inner { width:90% !important; }
	.inner2 { width:90% !important; }

	.as_location .location_wrap .location_ul .location_li { width:calc((100% - 20px) / 3); }

}

@media (max-width: 980px){

}

@media (max-width: 760px){

	.as_location .location_wrap .location_ul .location_li { width:calc((100% - 10px) / 2); }

	.bottom_location { background-attachment:fixed; }
	.bottom_location .section_contents li { align-items:center; width:100%; padding:30px 0; border:0; border-bottom:1px solid rgba(255,255,255,0.3); text-align:center; }
	.bottom_location .section_contents li .num { font-size:12px; }
	.bottom_location .section_contents li .tit { margin:clamp(10px, 3vw, 20px) 0; font-size:clamp(16px, 3vw, 18px); }
	.bottom_location .section_contents li .txt { font-size:clamp(14px, 3vw, 16px); }

}

@media (max-width: 650px){

}

@media (max-width: 540px){

	.as_location .location_wrap .location_ul .location_li.active { flex-flow:column; align-items:flex-start; }
	.as_location .location_wrap .location_ul .location_li.active .location_name { display:flex; flex-flow:wrap; align-items:center; width:100%; padding:15px 0 15px 0; }
	.as_location .location_wrap .location_ul .location_li.active .location_name::before {}
	.as_location .location_wrap .location_ul .location_li.active .location_name::after { margin:0; margin-left:5px; }
	.as_location .location_wrap .location_ul .location_li.active .location_info {}
}