@import url('sub.css');




.process_list {display: grid;  grid-template-columns: repeat(6, 1fr);  gap:50px; max-width:1330px; margin:0 auto;}
.process_list dl {text-align:center; }
.process_list dl dt {aspect-ratio: 3 / 3; border-radius:100%; background: var(--main); position:relative; }
.process_list dl dt::before {content:'';  -webkit-mask: url("/recruit/img/pro_arr.svg") no-repeat 50% 50%;   mask: url("/recruit/img/pro_arr.svg") no-repeat 50% 50%;  background-color: var(--main);   -webkit-mask-size: cover;   mask-size: cover; width: 35px; height: 12px; position:absolute; top:50%; right:0; transition:all 0.3s linear; transform:translate(100%,-6px);}
.process_list dl dt::after {content:''; width:calc(100% + 20px); height:calc(100% + 20px); background:rgba(0, 171, 169, 0.10); border-radius:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:-1;}
.process_list dl dt i {display:block; line-height:40px; width: 40px; height: 40px; box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 100%; background: var(--white); position:absolute; top:0; left:50%; transform:translate(-50%,-50%); font-size: 0.888rem; font-style: normal; font-weight: 700; color:var(--main);}
.process_list dl dt .in {width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.process_list dl dt .in::after {content:''; width:calc(100% - 20px); height:calc(100% - 20px); border-radius: 100%; border: 1px dashed var(--white); opacity: 0.5; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.process_list dl dt img {}
.process_list dl dd {color: var(--black); font-size: 1rem; font-weight: 500; line-height:150%; margin:35px 0 0;}



.process_list dl:nth-of-type(2) dt {background:#00A09F;}
.process_list dl:nth-of-type(2) dt i {color:#00A09F;}
.process_list dl:nth-of-type(2) dt::after {background:rgba(0, 160, 159, 0.10);}
.process_list dl:nth-of-type(2) dt::before {background-color:#00A09F;}
.process_list dl:nth-of-type(3) dt {background:#008E8D;}
.process_list dl:nth-of-type(3) dt i {color:#008E8D;}
.process_list dl:nth-of-type(3) dt::after {background:rgba(0, 142, 141, 0.10);}
.process_list dl:nth-of-type(3) dt::before {background-color:#008E8D;}
.process_list dl:nth-of-type(4) dt {background:#007574;}
.process_list dl:nth-of-type(4) dt i {color:#007574;}
.process_list dl:nth-of-type(4) dt::after {background:rgba(0, 117, 116, 0.10);}
.process_list dl:nth-of-type(4) dt::before {background-color:#007574;}
.process_list dl:nth-of-type(5) dt {background:#015251;}
.process_list dl:nth-of-type(5) dt i {color:#015251;}
.process_list dl:nth-of-type(5) dt::after {background:rgba(1, 82, 81, 0.10);}
.process_list dl:nth-of-type(5) dt::before {background-color:#015251;}
.process_list dl:nth-of-type(6) dt {background:#003F3E;}
.process_list dl:nth-of-type(6) dt i {color:#003F3E;}
.process_list dl:nth-of-type(6) dt::after {background:rgba(0, 63, 62, 0.10);}
.process_list dl:nth-of-type(6) dt::before {background-color:#003F3E; display:none;}



.benefits_list {border-top:1px solid var(--border); border-left:1px solid var(--border); display: grid;  grid-template-columns: repeat(2, 1fr);}
.benefits_list li {border-bottom:1px solid var(--border); border-right:1px solid var(--border); box-sizing:border-box; padding:40px;}
.benefits_list li.noimg {background:var(--grayBg) url("/recruit/img/noimg.png")no-repeat center; background-blend-mode: luminosity;}
.benefits_list li h4 {margin:18px 0 4px; color: var(--black); font-size: 1.111rem; font-weight: 500; line-height: 150%;}
.benefits_list li p {line-height:155.556%;}




.policy_dia {position:relative; width: 600px; height: 522px; margin:65px auto 0; background:url("/recruit/img/policy_bg.png")no-repeat center;}
.policy_dia dl {width:100%; position:absolute;}
.policy_dia dl dt {width:100%; color: var(--white); text-align: center; font-size: 1.111rem; font-weight: 500; line-height:150%;}
.policy_dia dl dd {display:flex; flex-wrap:wrap; position:absolute; white-space:nowrap; font-size:0.9rem;}
.policy_dia dl dd::before {content:''; width:58px; height:50px; display:block; position:relative; margin-right:13px; top:14px; background-repeat:no-repeat; background-position:Center;}
.policy_dia dl:nth-of-type(2n) dd::after {content:''; width:32px; height:50px; display:block; position:relative; margin-left:13px; top:14px; background-repeat:no-repeat; background-position:right center;}
.policy_dia dl:nth-of-type(2n) dd::before {display:none !important;}
.policy_dia dl:nth-of-type(1) dd::before {background-image:url("/recruit/img/line01.png");}
.policy_dia dl:nth-of-type(2) dd::after {background-image:url("/recruit/img/line02.png");}
.policy_dia dl:nth-of-type(3) dd::before {background-image:url("/recruit/img/line03.png");}
.policy_dia dl:nth-of-type(4) dd::after {background-image:url("/recruit/img/line04.png");}

.policy_dia dl.sec1 {top:60px; left:0;}
.policy_dia dl.sec1 dd {top:-80px; right:-30px;}
.policy_dia dl.sec2 {top:210px; left:0;}
.policy_dia dl.sec2 dd {top:-85px; left:-177px;}
.policy_dia dl.sec3 {top:320px; left:0;}
.policy_dia dl.sec3 dd {top:-88px; right:-71px;}
.policy_dia dl.sec4 {top:430px; left:0;}
.policy_dia dl.sec4 dd {top:-85px; left:-177px;}


/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


.benefits_list li br {display:none;}


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


/* Common */
html,body{font-size:15px;}


.process_list {grid-template-columns: repeat(3, 1fr);  gap:50px;}
.process_list dl:nth-of-type(3n) dt::before {display:none;}


.benefits_list {grid-template-columns: repeat(2, 1fr);}
.benefits_list li {padding:30px;}



.policy_dia {width: 350px; height: 405px; background-size:100%;}
.policy_dia dl dd::before {width:38px; height:33px; background-size:auto  100% !important;}
.policy_dia dl:nth-of-type(2n) dd::after {width:20px; height:33px; background-size:auto 100% !important;}
.policy_dia dl.sec1 {top:50px; left:0;}
.policy_dia dl.sec1 dd {top:-64px; right:-80px;}
.policy_dia dl.sec2 {top:163px; left:0;}
.policy_dia dl.sec2 dd {top:-69px; left:-190px;}
.policy_dia dl.sec3 {top:248px; left:0;}
.policy_dia dl.sec3 dd {top:-64px; right:-123px;}
.policy_dia dl.sec4 {top:335px; left:0;}
.policy_dia dl.sec4 dd {top:-74px; left:-190px;}


}
/*******************************************************************************
	@media 768px
*******************************************************************************/
@media all and (max-width:768px) {



.policy_dia {width:100%; height:auto; background:transparent; margin-top:30px;}
.policy_dia dl {position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;}
.policy_dia dl+dl {margin-top:20px;}
.policy_dia dl dt {position:relative; background:var(--main); padding:15px; border-radius:10px; box-sizing:border-box;}
.policy_dia dl dt::before {content:''; width:1px; height:20px; position:absolute; bottom:-20px; left:calc(50% + 2px); background:var(--border);}
.policy_dia dl dt::after {content:''; width:7px; height:7px; border:3px solid var(--main); border-radius:100%; position:absolute; bottom:-28px; left:50%; margin-left:-4px; z-index:10; background:var(--white);}
.policy_dia dl dd {display:block; position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; text-align:center; margin:20px 0 0; border:1px solid var(--border); box-sizing:border-box; border-radius:10px; padding:15px;}
.policy_dia dl dd::before {display:none !important;}
.policy_dia dl dd::after {display:none !important;}


.policy_dia dl.sec2 dt {background:#00A1A0;}
.policy_dia dl.sec2 dt::after {border-color:#00A1A0;}
.policy_dia dl.sec3 dt {background:#0C7C7F;}
.policy_dia dl.sec3 dt::after {border-color:#0C7C7F;}
.policy_dia dl.sec4 dt {background:#073A3C;}
.policy_dia dl.sec4 dt::after {border-color:#073A3C;}




}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 



.process_list {grid-template-columns: repeat(2, 1fr);  gap:40px 30px;}
.process_list dl dt i {width:35px; height:35px; line-height:35px; font-size:12px;}
.process_list dl dt::after {width: calc(100% + 10px); height: calc(100% + 10px);}
.process_list dl dt::before {right:10px;}
.process_list dl dt img {max-width:40%;}
.process_list dl dt .in::after {width: calc(100% - 10px); height: calc(100% - 10px);}

.process_list dl dd {margin:15px 0 0; }

.process_list dl:nth-of-type(3n) dt::before {display:block;}
.process_list dl:nth-of-type(2n) dt::before {display:none;}



.benefits_list {grid-template-columns: repeat(1, 1fr);}
.benefits_list li {position:relative; padding:20px 20px 20px 80px;}
.benefits_list li.noimg {display:none;}
.benefits_list li img {max-width:40px; position:absolute; top:50%; left:20px; transform:translateY(-50%);}
.benefits_list li h4 {margin-top:0;}



}