/*=====================
			반응형
=====================*/

@media screen and (max-width: 1700px){
	#sv .icon {right: 4%;}
}

@media screen and (max-width: 1300px){
	#about .history .list .slide .item:after,
	#about .history .list .slide .item:before {left: 120px;}
	#about .history .list .slide .item dl {padding-left: 30px;}

	#location .list ul li {padding-left: 0;}
}

@media screen and (max-width: 1200px){	
	#sv .icon {bottom: 5px;}
	#sv .icon img {width: 86%;}

	.h3-tit {font-size: 46px;}
	.sub-tit span {font-size: 19px;}

	/* 회사소개 */
	#about .about-list ul li .circle .icon {margin: 20px 0;}
	#about .about-list ul li .circle p {font-size: 35px; letter-spacing: -0.5px; margin-bottom: 18px;}
	#about .smaple-list {height: calc(100vw*(960/1200));}
	#about .smaple-list .list .item {padding-bottom: 34%;}
	#about .smaple-list .list .item .txt-con .dot {margin: 45px auto 48px;}
	#about .history .list .slide .item dl dt {font-size: 70px; letter-spacing: -0.5px;}
	#about .history .list .slide .item dl dd {padding-left: 35px;}
	#about .history .list .slide .item dl dd p {margin-bottom: 20px; align-items: initial;}
	#about .history .list .slide .item dl dd p .year {font-size: 21px;}
	#about .history .list .slide .item dl dd p .txt {margin-top: 5px;}
	#about .develop {height: calc(100vw*(791/1200)); background-attachment: initial;}
	#about .develop .sub-tit h3 > span {font-size: 46px;}
	#about .develop .img {text-align: center;}
	#about .develop .img img {width: 75%;}
	#about .career .img {right: 2%;}

	
	/* 오시는길 */ 
	#location .map-con {height: 420px;}
	#location .list ul li .icon {width: 90px; height: 90px;}
	#location .list ul li .txt {width: calc(100% - 90px); padding-left: 30px;}

	/* 인재상 */
	#employee .list .item .txt-con {padding-left: 50px;}
	#employee .list .item .txt-con .tit {font-size: 35px;}

	/* 채용절차 */
	#process .list {flex-wrap: wrap; justify-content: center; gap: 30px 0;}
	#process .list .item {margin-left: 0; width: 35%; padding-bottom: 35%; margin-left: -3%;}
	#process .list .item:last-child {margin-left: -3%;}
	#process .list .item > div {text-align: center; padding-left: 0;}
	#process .list .item:after {right: 15px;}
	#process .list .item:nth-child(3):after {opacity: 0; visibility: hidden;}
	#process .list .item .img {margin: 27px auto; max-width: 50px;}
	#process .list .item05 .img img {margin-left: 9px;}

	/* 채용FAQ */
	#faq .tab-con .list ul li {padding: 0 50px;}
	#faq .tab-con .list ul li .tit p {font-size: 19px;}
	#faq .tab-con .list ul li.on {padding: 40px 50px;}

	/* 복리후생 */
	#benefits .line {flex-wrap: wrap; }
	#benefits .line .tit {width: 100%;}
	#benefits .line .list {width: 100%; margin-top: 40px;}

	/* 직무소개 */
	#introduce .item .info {padding-left: 0; margin-top: 30px;}
	#introduce .item .circle .txt-con {padding-left: 50px;}

	/* 코젠이야기 */
	#story .list .item .img {width: 45%;}
	#story .list .item .txt-con {width: 55%; padding-left: 70px;}
	#story .list .item:nth-child(2n) .txt-con {padding-right: 70px;}

	/* 채용공고 */
	#recruit .search-con {flex-wrap: wrap; justify-content: center; max-width: 550px; margin: 0 auto;}
	#recruit .tab_box {max-width: initial; }
	#recruit .search-box {width: 100%; margin: 30px 0 0 0;}
	#recruit .search-box .btn-sch {position: absolute; right: 0; top: 0;}
	#recruit .search-box .input-cnt {width: 100%; margin: 0; position: relative; }
	#recruit .search-box .input-cnt:after {display: none;}
	#recruit .search-box .input-cnt input {border-radius: 33px; padding: 0 82px 0 30px; }

}

@media screen and (max-width: 1024px){
	#sv h3 > span {font-size: 60px;}
	#sv .icon {text-align: right;}
	#sv .icon img {width: 80%;}

	.h3-tit {font-size: 43px;}


	/* 회사소개 */
	#about .about-list ul {flex-wrap: wrap; justify-content: center; gap: 30px 0;}
	#about .about-list ul li {width: 42%; margin-left: -33px;}
	#about .about-list ul li:nth-child(3) {margin-left: 0;}
	#about .smaple-list .list {flex-wrap: wrap; /* gap: 45px 30px; */}
	#about .smaple-list .list .item {width: calc(50% - 15px); border-radius: 24px; margin-right: 30px;margin-bottom: 45px;}
	#about .smaple-list .list .item:nth-child(2n) {margin-right: 0;}
	#about .smaple-list .list .item:hover {transform: translateY(-35px);}
	#about .smaple-list {height: calc(100vw*(1250/1024));}

	#about .history .list .slide .item:after,
	#about .history .list .slide .item:before {left: 90px;} 
	#about .history .list .slide .item dl {flex-wrap: wrap;}
	#about .history .list .slide .item dl dt {font-size: 58px;width: 100%;}
	#about .history .list .slide .item dl dd {padding: 25px 0 0 0 ;}
	#about .history .list .slide .item dl dd p .year {font-size: 20px; width: 60px;}
	#about .history .list .slide .item dl dd p .txt {width: calc(100% - 60px); margin-top: 3px;}

	#about .develop { background-attachment: initial;}
	#about .develop .sub-tit {width: 60%;}
	#about .develop .sub-tit h3 > span {font-size: 43px;} 
	#about .develop .img {width: 40%;}
	#about .develop .img img {width: 85%;}
	#about .career .img {max-width: 320px;}

	/* 인재상 */
	#employee > .inner1300 {flex-wrap: wrap;}
	#employee .sub-tit {width: 100%;}
	#employee .list {width: 100%; margin-top: 70px; padding-left: 12px; box-sizing: border-box;}
	#employee .h3-tit br {display: none;}


}


@media screen and (max-width: 960px){
	#sv h3 > span{font-size: 50px;}
	#sv .sv-bg {height: 480px;}


	/* 회사소개 */
	#about .sub-tit.df {flex-wrap: wrap; }
	#about .sub-tit.df > * {width: 100%; /* text-align: center; */}
	#about .sub-tit.df span {margin-top: 30px; font-size: 20px;}
	#about .career .img {max-width: 31%;}
	#about .develop {margin-top: 80px;}

	#location .list ul {gap: 50px 0;}
	#location .list ul li {width: 100%;}

	#process .list .item:after {right: 8px;}
	#process .list .item p {font-size: 18px;}

	#faq .tab-con .list ul li {padding: 0 30px;}
	#faq .tab-con .list ul li.on {padding: 30px;}

	#introduce .item .circle .img {width: 120px; height: 120px; }
	#introduce .item .circle .txt-con {width:  calc(100% - 120px); padding-left: 30px;}
	#introduce .item .circle .txt-con .tit {font-size: 22px;}
	#introduce .item .circle .txt-con .txt {font-size: 18px; }
	#introduce .item .info .box {padding: 35px 20px 40px 40px;}

	#story .list .item .txt-con .tit {font-size: 35px;}

}

@media screen and (max-width: 767px){
	#sv .sv-bg {height: 440px;}
	#sv > .inner1300 {margin-top: -20px;}
	#sv h3 > span {font-size: 42px;}
	#sv .sub-navi {margin-top: 30px;}
	#sv .icon img {width: 64%;}
	#sv .sv-bg .icon2-01 {height:calc(100vw*(282/960)); background-position-x: right;}

	.sub-cnt {padding-top: 80px; padding-bottom: 35px;}
	.h3-tit {font-size: 35px;}

	/* 회사소개 */
	#about .sub-tit.df span {font-size: 17px;}
	#about .about-list {margin-top: 60px;}
	#about .about-list ul li {width: 52%;}
	#about .about-list ul li .circle p {font-size: 30px;margin-bottom: 22px;}
	#about .smaple-list {height: calc(100vw*(1010/767));}
	#about .smaple-list {padding-top: 145px;}
	#about .smaple-list .sub-tit span {font-size: 16px;}
	#about .smaple-list .list {margin-top: 50px; /* gap: 40px 26px; */}
	#about .smaple-list .list .item {width: calc(50% - 13px); padding-bottom: 38%; margin-right: 26px; margin-bottom: 40px; }
	#about .smaple-list .list .item:hover {transform: translateY(-20px);}
	#about .smaple-list .list .item .txt-con .icon img {max-width: 62px;}
	#about .smaple-list .list .item .txt-con .dot {margin: 25px auto;}
	#about .smaple-list .list .item .txt-con .txt {font-size: 18px;}
	#about .history .sub-tit span {font-size: 16px; margin-top: 30px;}
	#about .history .list .slide .item dl dt {font-size: 45px;}
	#about .history .list .slide .item dl dd p .year {font-size: 19px;}
	#about .develop {margin-top: 50px; height: calc(100vw*(805/767)); }
	#about .develop > .inner1300 {flex-wrap: wrap; }
	#about .develop .sub-tit {width: 100%; text-align: center;}
	#about .develop .sub-tit h3 > span {font-size: 35px;}
	#about .develop .sub-tit > span {font-size: 16px;}
	#about .develop .img {width: 70%; margin: 30px auto 0;}
	#about .career {padding: 80px 0 163px;}
	#about .career .img {top: initial; bottom: -120%; right: 6%; max-width: 34%;}

	
	/* 오시는길 */
	#location .map-con {height: 340px;}
	#location .list ul li .txt p {font-size: 20px;}
	#location .list ul li .txt span {margin-top: 18px;}

	/* 인재상 */
	#employee .list:before {top: 21px; left: -210px; width: 325px; height: 400px;}
	#employee .list:after {top: 16px; left: -220px;}
	#employee .list .item {margin-bottom: 60px;}
	#employee .list .item .circle {width: 100px; height: 100px;}
	#employee .list .item .circle:before {width: 122%; height: 122%;}
	#employee .list .item .txt-con {width: calc(100% - 100px); padding-left: 40px;}
	#employee .list .item .txt-con .tit {font-size: 28px;}
	#employee .list .item .txt-con .txt {font-size: 16px;}
	#employee .list .item02 {margin-left: 50px;}

	/* 채용절차 */
	#process .list .item {width: 52%; padding-bottom: 52%; margin-left: -4%;}
	#process .list .item:nth-child(3),
	#process .list .item:last-child {margin-left: 0;}
	#process .list .item:nth-child(2):after {opacity: 0; visibility: hidden;}
	#process .list .item:nth-child(3):after {opacity: 1; visibility: visible; }
	#process .list .item p {font-size: 16px;}
	#process .txt-con p {font-size: 16px; }

	/* 채용FAQ */
	#faq .tab-con {margin-top: 50px;}
	#faq .tab_box .tab {margin-top: 0;}
	#faq .tab-con .list ul li {padding: 0 20px; margin-bottom: 40px;}
	#faq .tab-con .list ul li .tit p {font-size: 16px; font-weight: 500;}
	#faq .tab-con .list ul li .tit span {width: 42px; height: 42px;}
	#faq .tab-con .list ul li .txt-con {margin-top: 25px;}
	#faq .tab-con .list ul li .txt-con p {font-size: 15px;}
	#faq .tab-con .list ul li.on {padding: 20px 20px 30px;}

	/* 복리후생 */
	#benefits .h3-tit br {display: none;}
	#benefits .line {margin-bottom: 80px;}
	#benefits .line .list ul li {width: calc(33.3333% - 15px); padding-bottom: calc(33.3333% - 15px);}
	#benefits .line .list ul li p {font-size: 16px;}

	/* 직무소개 */
	#introduce .item {margin-bottom: 50px;}
	#introduce .item .circle .img {width: 105px; height: 105px;}
	#introduce .item .circle .txt-con {width: calc(100% - 105px);}
	#introduce .item .circle .txt-con .tit {font-size: 18px;}
	#introduce .item .circle .txt-con .txt {font-size: 16px;}
	#introduce .item .circle .txt-con span {font-size: 15px;}
	#introduce .item .info .box {padding: 30px 20px 40px;}
	#introduce .item .info .box ul li span {font-size: 14px; padding: 8px 10px; }
	#introduce .item .info .box ul li p {font-size: 15px;}

	/* 코젠 이야기 */
	#story {padding-bottom: 50px;}
	#story .list .item { flex-flow: column; margin-bottom: 70px;}
	#story .list .item .img {width: 100%; order:1; text-align: center;}
	#story .list .item .txt-con {width: 100%; padding-left: 0; order: 2; margin-top: 40px;}
	#story .list .item:nth-child(2n) .img {text-align: center;}
	#story .list .item:nth-child(2n) .txt-con {padding-right: 0;}
	#story .list .item .txt-con .tit {font-size: 27px;}
	#story .list .item .txt-con .txt {margin-top: 30px; font-size: 16px;}
	#story .list .item .txt-con .plus {margin-top: 30px;}
	#story .list .item .txt-con .plus .info-tit .plus_btn {width: 38px; height: 38px; }
	#story .list .item .txt-con .plus .info-tit p {font-size: 16px; padding-left: 12px;}
	#story .list .item .txt-con .plus .info-txt {padding: 58px 20px 25px 30px;}
	#story .list .item .txt-con .plus .info-txt p {font-size: 15px;}


	#recruit .tab-con {margin: 50px 0 0 0;}
	#recruit .search-box {margin: 20px 0 0 0;}


	.recruit-cont .view .viewCont {padding: 20px 10px 50px;}
	.recruit-cont .viewCont .board-cnt h3 {font-size: 22px;}
}

@media screen and (max-width: 640px){
	#sv .sv-bg .icon2-01 {height:calc(100vw*(282/640)); }

	.h3-tit {font-size: 32px;}


	/* 회사소개 */
	#about .smaple-list {height: calc(100vw*(1010/640));}
	#about .history {margin-top: 50px;}
	#about .history .list .control {top: 30px;}
	#about .history .list .control .page-num .current {font-size: 18px;}
	#about .history .list .control .page-num .total {font-size: 15px;}
	#about .develop .sub-tit h3 > span {font-size: 32px;}


	/* 오시는길 */
	#location .list ul li .icon {width: 65px; height: 65px; }
	#location .list ul li .txt {width: calc(100% - 65px);}
	#location .list ul li .txt span {font-size: 15px; margin-top: 10px;}
	#location .list ul li .txt span br {display: none;}
	#location .list ul li .txt > span > span {display: block; }
	#location .list ul li .txt > span > span:last-child {margin-top: 0;}

	
	/* 인재상 */
	#employee .list:before {top: 0; left: 50px; width: 2px; height: 95%; border: none; background: rgba(213, 213, 213, 0.5);}
	#employee .list:after {display: none;}
	#employee .list .item {margin-bottom: 50px;}
	#employee .list .item .circle {width: 75px; height: 75px;}
	#employee .list .item .circle img {max-width: 40px;}
	#employee .list .item .txt-con {width: calc(100% - 75px); padding-left: 20px;}
	#employee .list .item .txt-con .tit {font-size: 23px;}
	#employee .list .item .txt-con .txt {font-size: 15px;}
	#employee .list .item02 {margin-left: 0;}


	
}


@media screen and (max-width: 560px){
	#sv .sv-bg .icon2-01 {height:calc(100vw*(282/560)); }
	
	#sv h3 > span {font-size: 37px;}

	.h3-tit {font-size: 28px;}
	#about .sub-tit.df span {font-size: 16px; padding: 0;}
	#about .sub-tit.df span br {display: none;}

	#about .sub-tit span {padding: 0 4%; box-sizing: border-box;}

	#about .about-list ul {max-width: 350px; margin: 0 auto; gap: 0;}
	#about .about-list ul li {width: 80%; margin-left: 0; margin-top: -25px;}
	#about .about-list ul li:first-child  {margin-top: 0;}

	#about .smaple-list .list {/* gap: 35px 18px; */}
	#about .smaple-list .sub-tit span {margin-top: 30px;}
	#about .smaple-list .sub-tit span br {display: none;}
	#about .smaple-list .list .item {width: calc(50% - 9px); padding-bottom: 41%; border-radius: 15px; margin-right: 18px; margin-bottom: 35px;}
	#about .smaple-list .list .item .txt-con .dot {margin: 17px auto;}

	#about .history .sub-tit span {padding: 0;}

	#about .develop {height: calc(100vw*(805/560)); background-position-x: 47%;}
	#about .develop .sub-tit h3 > span  {font-size: 28px;}
	#about .develop .sub-tit > span {margin-top: 30px;}
	#about .develop .sub-tit > span br {display: none;}

	#about .career {padding: 80px 0 170px;}
	#about .career .sub-tit {text-align: center;}
	#about .career .img {bottom: -135%;}

	/* 채용절차 */
	#process .list {gap: 0;}
	#process .list .item {width: 80%; padding-bottom: 80%; margin-left: 0; margin-top: -20px;}
	#process .list .item:after {right: initial; top: initial; bottom: -18px; transform: translate(-50%, -50%) rotate(90deg); left: 50%;}
	#process .list .item:nth-child(2):after {opacity: 1; visibility: visible; }


	/* 채용FAQ */
	.sub-cnt .tab_box .tab {height: 55px; border-radius: 27px;}
	.sub-cnt .tab_box .line,
	.sub-cnt .tab_box .tab li {border-radius: 27px;}
	.sub-cnt .tab_box .tab li a {font-size: 14px;}
	#faq .tab-con .list ul li {padding: 0 15px;}
	#faq .tab-con .list ul li .tit p {font-size: 15px;}
	#faq .tab-con .list ul li.on {padding: 20px 15px 30px;}
	
	
	/* 복리후생 */
	#benefits .line .list ul li {width: calc(50% - 11px); padding-bottom: calc(50% - 11px);}
	#benefits .line .list ul li p {font-size: 15px;}

	
	/* 직무소개 */
	#introduce .item .circle {flex-wrap: wrap; }
	#introduce .item .circle .img {margin: 0 auto;}
	#introduce .item .circle .txt-con {width: 100%; padding-left: 0; margin-top: 10px;}

	#story .list .item .txt-con .tit {font-size: 20px;}
	#story .list .item .txt-con .txt {font-size: 15px;}


	#recruit .search-box .input-cnt {height: 55px;}
	#recruit .search-box .btn-sch {width: 55px; height: 55px;}


}

@media screen and (max-width: 420px){
	#sv > .inner1300 {margin-top: -30px;}
	#sv .sv-bg .icon2 {bottom: 50px;}
	#sv span {font-size: 15px;}

	.h3-tit {font-size: 26px;}
	.sub-cnt {padding-top: 50px;}

	#about .sub-tit.df span {font-size: 15px; line-height: 1.7;}
	#about .about-list ul li .circle p {margin-bottom: 25px;}
	#about .about-list ul li .circle .txt {font-size: 15px;}
	#about .smaple-list {height: calc(100vw*(1010/560)); padding-top: 120px;}
	#about .smaple-list .list {/* gap: 18px; */}
	#about .smaple-list .list .item {padding-bottom: 45%; margin-right: 18px; margin-bottom: 18px;}
	#about .smaple-list .list .item:hover {transform: translateY(-10px)}
	#about .smaple-list .list .item .txt-con .icon img {max-width: 55px;}
	#about .smaple-list .list .item .txt-con .txt {font-size: 16px; font-weight: 400;}
	#about .develop {height: calc(100vw*(805/420));}
	#about .develop .sub-tit > span {font-size: 15px;}
	#about .develop .img {width: 100%; margin-top: 50px;}
	#about .career .sub-tit h3 {font-size: 30px;}
	#about .career .sub-tit span {font-size: 16px;}
	#about .career .img {bottom: -160%; max-width: 48%;}

	
	#employee .sub-tit span {font-size: 15px;} 

}