@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

@font-face {
	font-family: 'nexen_b';
	src: url('../fonts/NEXEN TIRE_Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'nexen_r';
	src: url('../fonts/NEXEN TIRE_Regular.ttf') format('truetype');
}

.ns {font-family: 'Noto Sans KR', sans-serif;}
.nx_b {font-family: 'nexen_b', sans-serif;}
.nx_r {font-family: 'nexen_r', sans-serif;}

#content {max-width: 960px; margin: 0 auto}

.logo {text-align: center; padding: 32px 0;}

.cont {background:url(http://cj-inplant.com/form/img/main_bg.jpg); padding: 10px 0px 80px; box-sizing: border-box; text-align: center;}
.cont .txt {color: #444; font-weight: 700 !important; font-size: 5rem !important; line-height: 1.2;}
.cont .img {margin: 100px 0; display: block;}
.cont .select {}
.cont li a {width: 90%; margin-bottom: 2rem;}
.cont li:last-child a {margin-bottom: 0;}

.co_txt {text-decoration: none; font-weight: 600 !important; font-size: 3rem !important; display: inline-block; padding: 2.5rem 0; background: #0e71b8; border-radius: 10rem; color: #fff; text-align: center;  transition: all 0.3s ease-in-out;}

.main {text-align: center}
.main .img_wrap {position: relative;}
.main .img_wrap img {width: 100%}
.main .img_wrap a {position: absolute;  left: 50%; top: 65%;  width: 70%; transform: translateX(-50%);}
.main .txt_wrap {padding: 2.5rem; color: #777; font-size: 2rem; line-height: 1.4; text-align: left}

.step3 .select {padding: 0 2rem; display: flex; justify-content: space-between; flex-wrap: wrap;}
.step3 .select li {width: calc((100% - 30px) / 2);}
.step3 .select li a {margin-bottom: 1rem; width: 100%}
.step3 .select li:nth-child(3) a {margin-bottom: 0}
.step3 .select li:nth-child(4) a {margin-bottom: 0}

.step4 {display: none}
.step4 .txt_wrap {padding: 0 40px;      background: url(http://cj-inplant.com/form/img/main_bg.jpg); padding-bottom: 13rem;}
.step4 .box_wrap {display: flex; justify-content: space-between; padding-top: 6rem;}
.step4 .box_wrap .box {text-align: center; padding: 0 10px;}
.step4 .box_wrap .box h5 {position: relative; display: inline-block; line-height: 1; border-left: 5px solid #0e71b8; border-right: 5px solid #0e71b8; box-sizing: border-box; padding: 0 2rem; color: #999; transition: all 0.3s ease-in-out; font-size: 2.5rem !important; margin-bottom: 3rem;}
.step4 .box_wrap .box .photo {margin-bottom: 1rem;}
.step4 .box_wrap .box .photo img {width: 100%}

.step4 .txt_box {margin: 3rem 0;}
.step4 .txt_box p {position: relative; height: auto; color: #444; padding-left: 2rem; line-height: 1.8; font-size: 2.5rem;}
.step4 .txt_box p span {font-weight: bold}

.step4 .form_box {}
.step4 .form_box .write_div {display: flex; align-items: center}
.step4 .form_box .write_div .tit {width: 10rem; height: 13rem;  box-sizing: border-box; text-align: justify; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2.5rem; min-width: 10rem;}
.step4 .form_box .write_div .cor {position: relative; background: #fff; height: 8rem; box-sizing: border-box; padding: 2rem; border: 1px solid #ccc; font-size: 2.5rem; width: 100%}
.step4 .form_box .write_div .ph {margin-right: 1.2rem}
/* .step4 .form_box .write_div select {-webkit-appearance: none; -moz-appearance: none; appearance: none; } */

.step5 .form_box {}
.step5 .form_box .write_div {display: flex; align-items: center}
.step5 .form_box .write_div .tit {width: 10rem; height: 13rem;  box-sizing: border-box; text-align: justify; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2.5rem; min-width: 10rem;}
.step5 .form_box .write_div .cor {position: relative; background: #fff; height: 8rem; box-sizing: border-box; padding: 2rem; border: 1px solid #ccc; font-size: 2.5rem; width: 100%}
.step5 .form_box .write_div .ph {margin-right: 1.2rem}

.step4 .form_box .check_div_wrap {padding-left: 10rem}
.step4 .form_box .check_div {margin-top: 2rem}
.step4 .form_box .check_div input {display: none;}
.step4 .form_box .check_div input + label {font-size: 2.5rem; padding-left: 60px; background: url('../img/icon_checkbox_type3_1.png') no-repeat; background-position: left center; background-size: 40px 40px; color: #444;}
.step4 .form_box .check_div input:checked + label {background: url('../img/icon_checkbox_type3_2.png') no-repeat; background-position: left center; background-size: 40px 40px;}
.step4 .form_box .check_div .mod_open {display: inline-block; color: #777; text-align: center; padding: 0 1rem; text-decoration: underline; text-underline-position: under; text-underline-offset: 5px; font-size: 2.5rem;}
.step4 .form_box .sub_txt {font-size: 1.7rem; color: #999; margin-top: 2rem; display: block;}
.step4 .co_txt {width: 80%; display: block; margin: 5rem auto; border: 0; cursor: pointer;}

.footer {background: #0e71b8; text-align: center; color: #fff; padding: 2.5rem 0;}
.footer .foot_img {display: block; padding-bottom: 10px}
.footer p {line-height: 2; font-size: 14px;}

@media screen and (max-width: 768px){
	.logo {width: 50%; margin: 0 auto;}
	.logo img {width: 100%}

	.co_txt {font-size: 1.3rem !important; padding: 1rem 0;}
	.cont {padding: 10px 0 80px;}
	.cont .txt {font-size: 2rem !important}
	.cont .img {width: 100%; margin: 3rem auto}
	.cont .img img {width: 100%}
	.cont li a {margin-bottom: 1rem}
	.select_img li img{width: 100%}
	
	.main .txt_wrap {font-size: 1rem; padding: 2rem;}

	.step3 .select li {width: calc((100% - 15px) / 2);}

	.step4 .select {justify-content: flex-start;}
	.step4 .select li {width: calc((100% - 34px) / 3); margin-right: 17px}
	.step4 .select li:nth-child(3n) {margin-right: 0}

	.step4 .txt_wrap {     background: url(http://cj-inplant.com/form/img/main_bg.jpg);}
	.step4 .img_wrap img {width: 100%}
	.step4 .box_wrap {padding-top: 3rem;}
	.step4 .box_wrap .box {width: 45%;}
	.step4 .box_wrap .box h5 {padding: 0 1rem; font-size: 1.2rem !important;}
	.step4 .txt_box {margin: 2rem 0;}
	.step4 .txt_box p {padding-left: 0.4rem; font-size: 1.2rem;}
	.step4 .form_box .write_div .tit {width: 4rem; font-size: 1.2rem; min-width: 4rem; height: 4rem;}
	.step4 .form_box .write_div .cor {height: 3rem; font-size: 1.2rem; padding: 0.5rem;}
	.step4 .form_box .write_div .ph {margin-right: 0.2rem;}

	.step4 .form_box .check_div {margin-top: 1.3rem;}
	.step4 .form_box .check_div_wrap {padding-left: 0;}
	.step4 .form_box .check_div input + label {font-size: 1.5rem; padding-left: 40px; background-size: 25px 25px;}
	.step4 .form_box .check_div input:checked + label {background-size: 25px 25px;}
	.step4 .form_box .check_div .mod_open {padding-left: 40px; display: block; text-align: left;font-size: 1.3rem; text-underline-offset: 1px; margin-top: 10px;}
	.step4 .form_box .sub_txt {font-size: 1.1rem; line-height: 1.4;}
	.step4 .co_txt {margin: 2rem auto; width: 100%;}

	.footer .foot_img {width: 40%; margin: 0 auto;}
	.footer .foot_img img {width: 100%}
	.footer p {font-size: 11px}
}