/************************** about **************************/
#about .about-top {
	position: relative;
	padding: 40px 0 240px;
}
#about .about-top p {
	position: relative;
	font-size: 100px;
	font-weight: 700;
	color: var(--black-color);
	transform: translateY(50px);
	opacity: 0;
	animation: txt-show3 .6s forwards ease-in-out;
	z-index: 1;
}
#about .about-top.on p:nth-child(2) {
    animation-delay: 0.5s;
}
#about .about-top.on p:nth-child(3) {
	animation-delay: 1s;
}
@keyframes txt-show3 {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
#a-content {
	padding-bottom: 140px;
}
#about .about-top p:nth-child(1) {
	padding-left: 90px;
}
#about .about-top p:nth-child(2) {
	margin: 60px 0;
	color: var(--white-color);
	-webkit-text-stroke: 1.5px var(--black-color);
}
#about .about-top p:nth-child(3) {
	text-align: center;
}
#about .about-bg {
	position: absolute;
	top: 50%;
    right: 94px;
	transform: scale(1) translateY(-50%);
	z-index: 0;
	animation: imgmove 3s infinite;
}
@keyframes imgmove {
	0% {
		top: 55%;
		transform: scale(1) translateY(-50%);
	}
	50% {
		top: 54%;
		transform: scale(1.01) translateY(-50%);
	}
	100% {
		top: 55%;
		transform: scale(1) translateY(-50%);
	}
}
#about .about-bg2 {
	position: absolute;
	top: -120px;
	right: 240px;
	z-index: 0;
}
.about-sec .in {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 140px;
}
.about-sec.flex {
	display: block;
}
.about-sec.flex .section-in {
	display: flex;
	align-items: center;
	gap: 56px;
}
.about-sec .txt-wrap > span {
	font-size: 100px;
	font-weight: 300;
	color: var(--main-color);
}
.about-sec .txt-wrap > strong {
	display: block;
	margin: 10px 0 30px;
	font-size: var(--font-medium);
	font-weight: 700;
	line-height: 1.2;
	color: var(--black-color);
}
.about-sec .txt-wrap > strong span {
	display: block;
}
.about-sec .txt-wrap p {
	font-size: var(--font-regular);
	line-height: 1.4;
	color: var(--gray-color);
}
.about-sec .txt-wrap p:not(:last-child) {
	margin-bottom: 15px;
}
.about-sec.one .in, .about-sec.two .in, .about-sec.three .in, .about-sec.four .in {
	opacity: 0;
	transform: translateY(50px);
}
.about-sec.one .in.on, .about-sec.two .in.on, .about-sec.three .in.on, .about-sec.four .in.on {
	animation: section .6s forwards ease-in-out;
}
@keyframes section {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.about-sec.one .in {
	min-height: 650px;
}
.about-sec.one .img-wrap {
	position: absolute;
	top: 0;
	width: 50%;
	height: 650px;
	background: url("../img/sub/about01.jpg") no-repeat center / cover;
}
.about-sec.one .txt-wrap {
	padding-left: 56px;
	width: 50%;
	float: right;
}
.about-sec.two .txt-wrap {
	float: left;
	width: calc(100% - 500px);
}
.about-sec.two .img-wrap {
	float: right;
	width: 500px;
	height: 680px;
	background: url("../img/sub/about02.jpg") no-repeat center / cover;
}
.about-sec.three .img-wrap {
	float: left;
	width: 50%;
	height: 742px;
	background: url("../img/sub/about03.jpg") no-repeat center / cover;
}
.about-sec.three .txt-wrap {
	float: right;
	width: 50%;
}
.about-sec.four {
	min-height: 680px;
}
.about-sec.four .in {
	margin-bottom: 0px;
}
.about-sec.four .img-wrap {
	position: absolute;
	top: 0;
	right: 0;
	width: 40%;
	height: 680px;
	background: url("../img/sub/about04.jpg") no-repeat center / cover;
}
.about-sec.four .txt-wrap {
	padding-right: 56px;
	width: 60%;
}
.about-sec.four .txt-wrap p:last-child {
	font-weight: 600;
	color: var(--main-color);
}
.about-sec.four .contact {
	position: relative;
    display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
	padding: 0 20px;
	max-width: 170px;
    height: 46px;
	font-size: var(--font-regular);
	font-weight: 600;
	color: var(--white-color);
    border-radius: 25px;
    background: var(--main-color);
    overflow: hidden;
    cursor: pointer;
}
.about-sec.four .contact img {
	width: 20px;
}
.about-sec.one .in:after, .about-sec.two .in:after, .about-sec.three .in:after, .about-sec.four .in:after {
	content: "";
	display: block;
	clear: both;
}
/************************** service **************************/


/************************** contact **************************/
#contact .form > li:not(:last-child) {
	margin-bottom: 40px;
}
#contact .form .frm-tit {
	display: block;
	margin-bottom: 15px;
	font-size: var(--font-basic);
	font-weight: 700;
}
#contact .form .half {
	display: flex;
	align-items: center;
	gap: 50px;
	width: 100%;
}
#contact .form .half li {
	width: 50%;
}
#contact .form .half li > span {
	display: block;
	margin-bottom: 8px;
	font-size: var(--font-regular);
	font-weight: 600;
	color: var(--gray-color);
}
#contact .form .half li > div {
	display: flex;
	align-items: center;
	gap: 15px;
}
#contact .form .half li > div span {
	display: block;
	min-width: 40px;
	font-size: var(--font-small);
	color: var(--gray-color);
}
#contact .form input[type='text'] {
    width: 100%;
    height: 54px;
    padding: 10px;
    font-size: var(--font-small);
    border: none;
    background: var(--white-color);
	border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
}
#contact .form .radio-wrap {
	flex-wrap: wrap;
	gap: 15px;
}
#contact .form .unit_list {
	width: 220px;
}

#contact .form .radio-wrap.kind > li {
	width: calc(94%/4);
}

#contact .form input[type="radio"] + label span {
    display: inline-block;
    margin-top: -18px;
    width: 100%;
    height: 54px;
    line-height: 54px;
    font-size: var(--font-small);
    color: var(--main-color);
    text-align: center;
    background: transparent;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid var(--main-color);
    cursor: pointer;
}
#contact .form input[type="radio"]:checked + label span {
    border: 1px solid var(--main-color);
    background: var(--main-color);
    color: var(--white-color);
    font-weight: 700;
}
#contact form .check {
    margin-top: 20px;
}
#contact form .check input[type="checkbox"] {
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    background: var(--white-color);
    border-radius: 4px;
	border: 1px solid var(--border-color);
    outline: none;
    vertical-align: middle;
    cursor: pointer;
}
#contact form .check input[type="checkbox"]:checked {
    background: var(--gray-color);
	border-color: var(--gray-color);
}
#contact form .check input[type="checkbox"]:checked::before {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
    color: var(--white-color);
}
#contact form .check label {
	font-size: var(--font-footer);
    color: var(--gray-color);
}
#contact form .submit {
    display: block;
    padding: 18px 0;
    margin: 90px auto 140px;
    width: 230px;
    font-size: var(--font-regular);
    color: var(--main-color);
    letter-spacing: -0.005em;
    text-align: center;
    background: var(--white-color);
    border: 1px solid var(--main-color);
    border-radius: 50px;
    transition: all .3s ease-in;
}
#contact form .submit:hover {
    background: var(--main-color);
	color: var(--white-color);
}
#contact form .submit button {
	font-weight: 600;
}
#location {
	background: var(--black-color);
}
#location .sub-top {
	border-color: var(--gray-color);
}
#location .sub-title-content {
	color: var(--border-color);
}
#location .loaction-list {
	display: flex;
	padding-bottom: 80px; 
}
#location .loaction-list li {
	width: 33.33%;
}
#location .loaction-list li span {
	display: block;
	margin-bottom: 15px;
	font-size: var(--font-small);
	color: var(--main-color);
	letter-spacing: 0.005em;
}
#location .loaction-list li div {
	font-size: var(--font-small);
	line-height: 1.4;
	color: var(--white-color);
	letter-spacing: 0.005em;
}
#location .root_daum_roughmap {
	width: 100%;
}
#location .root_daum_roughmap .wrap_map {
	height: 500px;
}
#location #daumRoughmapContainer1724136585686 img:not([src*=marker]) {
    filter: grayscale(1) invert(1);
}
#location .root_daum_roughmap .wrap_controllers {
    background-color: #060606;
}
/************************** contact **************************/


/************************** privacy **************************/
#privacy {
	padding-top: 150px;
}
#privacy .wrap-in {
	margin: auto;
    border-bottom: 1px solid #ddd;
}
#privacy .title {
	margin-bottom: 50px;
	font-size: 40px;
	font-weight: bold;
    text-align: center;
}
#privacy h3 {
    display: block;
    margin-bottom: 50px;
    font-size: var(--font-smaller);
    font-weight: 500;
	line-height: 1.6;
}
#privacy ul {
    margin-bottom: 180px;
}
#privacy li {
    margin-bottom: 50px;
    font-size: var(--font-smaller);
    line-height: 1.6;
}
#privacy ul li > div {
	margin-bottom: 30px;
}
#privacy li strong {
	display: block;
}
#privacy li p:nth-child(2) {
    margin-top: 5px;
}
/************************** privacy **************************/


@media all and (max-width:1501px) {
	#about .about-top p, .about-sec .txt-wrap > span {font-size: 80px;}
	#about .about-bg {width: 480px;}
}

@media all and (max-width:1281px) {
	.about-sec .in {margin-bottom: 120px;}
	.about-sec.three .img-wrap {height: 680px;}
}

@media all and (max-width:1025px) {
	.about-sec .in {margin-bottom: 100px;}
	.about-sec .txt-wrap > strong {margin: 10px 0 20px;}
	#about .about-bg {width: 400px;}
	#about .about-bg2 {width: 60px; top: -100px; right: 100px;}
	#about .about-top p, .about-sec .txt-wrap > span {font-size: 60px;}
	#about .about-top {padding: 20px 0 140px;}
	#about .about-top p, .about-sec .txt-wrap > span {font-size: 64px;}
	.about-sec.one .in{min-height: 580px;}
	.about-sec.one .img-wrap {height: 580px;}
	.about-sec.one .txt-wrap {padding-left: 40px;}
	.about-sec.flex .section-in {gap: 40px; justify-content: space-between;}
	.about-sec.two .txt-wrap {width: calc(100% - 400px);}
	.about-sec.two .img-wrap {width: 400px; height: 580px;}
	.about-sec.three .img-wrap {height: 650px;}
	.about-sec.four .in {min-height: 600px;}
	.about-sec.four .img-wrap {height: 600px;}
	.about-sec.four .txt-wrap {padding-right: 40px;}

	#contact .form .half {flex-direction: column; gap: 15px;}
	#contact .form .half li {width: 100%;}
	#contact .form .unit_list {width: calc(33.33% - 10px);}
	#contact .form .radio-wrap.kind > li {width: calc(50% - 10px);}

	#location .loaction-list {flex-wrap: wrap; gap: 30px 0;}
	#location .loaction-list li {width: 50%;}
	#location .loaction-list li span {margin-bottom: 10px;}
	#location .root_daum_roughmap .wrap_map {height: 400px;}

	#privacy {padding-top: 130px;}
	#privacy .title {font-size: 30px;}
	#privacy ul {margin-bottom: 100px;}
}

@media all and (max-width:877px){
	.about-sec .in {margin-bottom: 80px;}
	#about .about-bg {width: 350px; right: 60px;}
	#about .about-bg2 {width: 50px; top: -100px; right: 50px;}
	#about .about-top p, .about-sec .txt-wrap > span {font-size: 50px;}
	#about .about-top {padding: 20px 0 120px;}
	#about .about-top p:nth-child(1) {padding-left: 50px;}
	#about .about-top p:nth-child(2) {margin: 50px 0;}
	.about-sec, .about-sec.flex .section-in {display: block;}
	.about-sec.one .in, .about-sec.four .in {display: block;}
	.about-sec.one .img-wrap {position: relative; margin-bottom: 40px; width: 80%; height: 260px;}
	.about-sec.one .txt-wrap {width: 100%; float: none;}
	.about-sec.two .section-in {display: flex; flex-direction: column-reverse;}
	.about-sec.two .img-wrap {width: 350px; height: 460px;}
	.about-sec.two .txt-wrap {width: 85%;}
	.about-sec.three .section-in {display: flex; flex-direction: column;}
	.about-sec.three .img-wrap {width: 500px; height: 500px;}
	.about-sec.three .txt-wrap {width: 85%;}
	.about-sec.four .img-wrap {position: relative; margin: 0 auto 40px; width: 300px; height: 420px;}
	.about-sec.four .txt-wrap {width: 100%; padding-right: 0px; padding-left: 40px;}

}

@media all and (max-width:641px){
	#a-content {padding-bottom: 110px;}
	.about-sec .in {margin-bottom: 60px;}
	.about-sec.flex .section-in {gap: 30px;}
	#about .about-top p, .about-sec .txt-wrap > span {font-size: 44px;}
	#about .about-bg {width: 250px; right: 0px;}
	#about .about-bg2 {width: 40px; top: -70px; right: 20px;}
	#about .about-top p:nth-child(1) {padding-left: 30px;}
	.about-sec .txt-wrap p:not(:last-child) {margin-bottom: 12px;}
	.about-sec.one .in {min-height: auto;}
	.about-sec.one .img-wrap, .about-sec.four .img-wrap {margin-bottom: 30px;}
	.about-sec.one .txt-wrap, .about-sec.four .txt-wrap {padding-left: 20px;}
	.about-sec.one .img-wrap {width: 90%;}
	.about-sec.three .img-wrap {width: 440px; height: 440px;}
	.about-sec.three .txt-wrap {width: 90%;}

	#contact .form .frm-tit {margin-bottom:  10px;}
	#contact .form > li:not(:last-child) {margin-bottom: 30px;}
	#contact .form .radio-wrap {gap: 10px;}
	#contact .form .unit_list {width: calc(50% - 5px);}
	#contact .form input[type='text'], #contact .form input[type="radio"] + label span {height: 48px; line-height: 48px;}
	#contact form .submit {width: 200px; margin: 60px auto 110px;}
	#location .loaction-list {gap: 20px 0; padding-bottom: 50px;}
	#location .loaction-list li {width: 100%;}
	#location .root_daum_roughmap .wrap_map {height: 300px;}

	#privacy .title {font-size: 26px;}
	#privacy .title, #privacy h3 {margin-bottom: 30px;}
	#privacy ul {margin-bottom: 90px;}
}

@media all and (max-width:481px){
	#about .about-top p, .about-sec .txt-wrap > span {font-size: 36px;}
	#about .about-top p:nth-child(2) {margin: 40px 0;}
	#about .about-bg {width: 200px; right: 0px;}
	#about .about-bg2 {width: 30px; top: -50px; right: 10px;}
	.about-sec .txt-wrap p:not(:last-child) {margin-bottom: 10px;}
	.about-sec.one .txt-wrap, .about-sec.four .txt-wrap {width: 95%; padding-left: 0px;}
	.about-sec.one .img-wrap {height: 230px;}
	.about-sec.two .img-wrap {width: 280px; height: 380px;}
	.about-sec.two .txt-wrap, .about-sec.three .txt-wrap {width: 95%;}
	.about-sec.three .img-wrap {width: 340px; height: 340px;}
	.about-sec.four .img-wrap {width: 260px; height: 320px;}

	#privacy .title, #privacy h3 {margin-bottom: 30px;}
}

@media (max-width: 481px) {
	#about .about-top p, .about-sec .txt-wrap > span {font-size: 30px;}
	#about .about-top p:nth-child(1) {padding-left: 10px;}
	#about .about-top p:nth-child(2) {-webkit-text-stroke: 1px var(--black-color);}
	#about .about-bg {right: -50px;}
	.about-sec .txt-wrap > strong {margin: 8px 0 15px;}
}