@charset "utf-8";

/* @import url(./reset.css);*/
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans:400');
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
font-weight: 100;
font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
	font-weight: 200;
	font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
	font-weight: 900;
	font-display: swap;
}

:root {
	--point-color:#ff9957;
}

ul,li,ol {list-style:none;}
#content {background-color: #fff; font-family: 'Pretendard' !important; font-size: 20px; line-height: 1.2;}
#content .content1 {padding:20px 0;}
#content .wrapper1 {width: 860px; overflow: hidden; border:1px solid #000; margin:0 auto;}
#content .red {color:#f00 !important;}
#content .fs16 {font-size: 16px;}
#content .fs14 {font-size: 14px;}
#content .fs10 {font-size: 10px !important;}
#content .ml20 {margin-left: 20px;}
#content .mb10 {margin-bottom: 10px;}
#content b {font-weight: bold;}
#content .list-dot {list-style: disc; margin-left: 20px;}
#content .d-flex {display: flex;}
#content .fix-ment {text-align: center; margin-bottom: 40px; margin-top: 40px;}
#content .fix-ment p { font-size:16px; margin-bottom:0;}


/* open-design-1 */
#open-design-1 .section {padding-inline:35px;  padding-bottom: 25px; font-size: 20px;}

/* section1 */
#open-design-1 .section1 {width: 100%;height: 630px;padding-top:90px;position: relative;}
#open-design-1 .section1::before {content:"Recruit";position: absolute;left:0; top:0;font-family: "Black Han Sans", sans-serif;font-size: 190px;opacity: 0.1;line-height: 1.4;z-index: 1;}
#open-design-1 .img-wrap {position: absolute;right:40px;top:180px;width: 350px;height: 245px;z-index: 0;}
#open-design-1 .img-wrap img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

#open-design-1 h2 {font-size: 80px; font-weight: 200; margin-bottom: 40px; position: relative ; z-index: 2;}
#open-design-1 h2 span {font-weight: 500; color:#384999;}
#open-design-1 .main-desc {font-size: 14px; font-weight: 400;}

/* section2,3 */
#open-design-1 .section2 { background: url('../image/grid-bg.png') repeat center / contain; width: 100%; height: auto; padding-top:40px;}

#open-design-1 .section2 > div {margin-bottom: 50px;}
#open-design-1 .section2 .list-desc {margin-bottom: 5px;}
#open-design-1 .section2 .list-desc:last-child {margin-bottom: 0px;}
#open-design-1 .section2 .list-desc span {font-size: 16px; color:#000;}
#open-design-1 .benefits {display:flex; align-items: center; flex-wrap: wrap; column-gap:35px; row-gap: 15px; margin-left: 20px; margin-top: 15px; width: 600px;}
#open-design-1 .benefits li {margin-bottom: 0 !important;}
#open-design-1 .section3 {padding-top:25px;}



/* open-design-2 */
#open-design-2 * {word-break: keep-all; line-height: 1.2;}
#open-design-2 p { font-size: 18px; margin-bottom:0;}
#open-design-2 .wrap-contents {margin-bottom: 100px;}
#open-design-2 .wrap-contents:last-child, #open-design-2 .wrap-contents:nth-last-child(2) {margin-bottom: 50px;}
#open-design-2 .section1 .img-wrap {width: 100%; height: 550px;}
#open-design-2 .section1 .img-wrap img {width: 100%; height: 100%; object-fit: contain; object-position: center;}
#open-design-2 .section2 {padding:60px 35px 0 35px;}
#open-design-2 .title {display:flex; justify-content: center; position: relative; margin-bottom: 30px; font-size: 24px; }
#open-design-2 .title::after {content:''; position: absolute; top:50%; left:0; width: 100%; height: 1px; background-color: var(--point-color); z-index: 1;}

#open-design-2 .title span {display:inline-block; padding-inline: 10px; border-right:2px solid var(--point-color); border-left:2px solid var(--point-color); background-color: #fff; position: relative; z-index:2;}
#open-design-2 .title span::after, #open-design-2 .title span::before {content:""; position: absolute; background-color: #fff; height:100%; width: 10px; top:0;}
#open-design-2 .title span::after {right:-12px;}
#open-design-2 .title span::before {left:-12px;}
#open-design-2 .paragraph {display: flex; flex-direction: column; gap:10px;}
#open-design-2 h3 {font-size: 28px; font-weight: 500;}
#open-design-2 .position {font-weight: 600;}
#open-design-2 ul {display: flex; flex-direction: column; gap:10px;}
#open-design-2 ul li {font-size: 18px;}
#open-design-2 .benefit {display: grid; grid-template-columns: repeat(3,auto); column-gap: 18px; row-gap:13px;}
#open-design-2 .benefit-item {border:1px solid #adadad; display:flex; flex-direction: column; align-items: center; justify-content: center; gap:23px; height: 182px; border-radius: 4px; position: relative;}
#open-design-2 .benefit-item::after {content:""; background: radial-gradient(#ffa845,#ffffff 65%); width: 76px; height: 76px; border-radius: 50%; position: absolute; top:46px; left:109px; z-index: 1;}
#open-design-2 .benefit-item img {position: relative; z-index: 2;}
#open-design-2 .benefit-item span {font-size: 18px;}


/* open-design-3 */
#open-design-3 .section1 .img-wrap {width: 100%; height: 550px; display:flex; align-items:center;}
/*#open-design-3 .section1 .img-wrap img {width: 100%; height: 100%; object-fit: contain; object-position: center;}*/
#open-design-3 .section1 .img-wrap img {width: 100%; height:100%; object-fit:contain;}
#open-design-3 .wrap-contents {margin-bottom: 60px;}
#open-design-3 .wrap-contents:last-child {margin-bottom: 0px;}
#open-design-3 .section2 {padding:50px 30px;}
#open-design-3 .section2 img {width:100% !important;}
#open-design-3 .title {margin-bottom: 30px; font-size: 24px;}
#open-design-3 .title span {padding-inline: 10px; border-right:2px solid var(--point-color); border-left:2px solid var(--point-color); font-weight:600; color:#000;}
#open-design-3 .paragraph {display: flex; flex-direction: column; gap:10px;}
#open-design-3 table {width: 100%;}
#open-design-3 thead {background-color: #FF9957; color:#fff;}
#open-design-3 thead td {color:#fff; height: 40px; text-align: center; vertical-align: middle; font-size: 20px;}
#open-design-3 thead td:first-child {border-right:1px solid #000;}
#open-design-3 tbody {font-size: 16px;}
#open-design-3 tbody td:first-child {border-right:1px solid #000; border-bottom:1px solid #000;vertical-align: middle; text-align: center;}
#open-design-3 tbody td:last-child {padding:30px; border-bottom:1px solid #000;}


.section3 {padding:0 35px 30px 35px;}
.section3 .info {margin-bottom:10px; font-weight:500;}
.section3 p, .section2 p  {margin-bottom:0;}



.benefit {display: grid; grid-template-columns: repeat(3,auto); column-gap: 18px; row-gap:13px;}
.benefit-item {border:1px solid #adadad; display:flex; flex-direction: column; align-items: center; justify-content: center; gap:23px; height: 182px; border-radius: 4px; position: relative;}
.benefit-item::after {content:""; background: radial-gradient(#ffa845,#ffffff 65%); width: 76px; height: 76px; border-radius: 50%; position: absolute; top:46px; left:109px; z-index: 1;}
.benefit-item img {position: relative; z-index: 2;}
.benefit-item span {font-size: 18px;}