@charset "utf-8";
.nav_float ul li {min-width:auto}
.titbox { padding-bottom: var(--sub_pd); }
.title_img {background-image: url(/img/page/ethics/title.jpg);margin-bottom: 0;}
.full_bg {padding:var(--sub_pd_half) 0}
.eth_sec1 {padding-bottom:120px}
.eth_sec1 > p {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 20px;
    font-weight: 400;
}
.eth_sec1 span {font-size:20px;font-weight: 700;color: var(--color-main);}
.sflow {
    display: flex;
    justify-content: space-between;
}
.sflow li{
    border: 1px solid var(--color-main2);
    width: 19%;
    padding: 1rem;
    text-align: center;
    border-radius: 10px;
    box-shadow: inset 1px 10px 50px rgba(255, 255, 255, 0.8), 0px 1px 5px rgba(0, 0, 0, 0.3);
}
.sflow li p {
    word-break: keep-all;
}
.sflow li strong {background-color: var(--color-main2);color: #fff;width: 100%;display: inline-flex;align-items: center;justify-content: center;padding: .5rem;border-radius: 2rem;margin-bottom: 1rem;}
.eth_sec2 {}
.eth_box {
    border-radius: 20px;
    margin-bottom: 120px;
}
.eth_conts {
    background-color: #fff;
    padding: 3rem 2rem;
    margin-bottom: 3rem;
    border-radius: 2rem;
    /* box-shadow: 0 3px 20px rgb(18 91 58 / 20%); */
    border: 1px solid #ddd;
}
.eth_conts h4 {
    font-family: var(--font-point);
    text-align: center;
    margin-bottom: 2rem;
}
.eth_conts p {}
.eth_conts p.ct {
    text-align: center;
    word-break: keep-all;
    font-weight: 500;
    color: #555;
    font-size: 18px;
}
.eth_conts strong {font-weight:500;display: inline-block;/* margin: 1rem 0 .5rem; */}
.eth_conts .conts_tit {
    margin-bottom: 3rem;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 3rem;
}
.eth_conts .conts_tit > h3 {margin-top:0}
.eth_conts .conts_tit > p {margin-bottom:2rem;font-size: 19px;}
.list_inner {
    padding-left: 1rem;
}
.list_inner h5 {font-size:30px;color:var(--color-main);font-family: var(--font-point);margin-bottom: 1rem;}
.conts_list {/* text-align: center; */display: flex;flex-wrap: wrap;}

.eth_conts dl {width: 100%;margin-bottom: 1.5rem;display: flex;align-items: flex-start;}
.eth_conts dl dt {
	display: inline-flex;
	color: var(--color-main);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.6;
	width: 20%;
	word-break: keep-all;
	margin-right: 4%;
	align-items: baseline;
	letter-spacing: -.5px;
	word-break: keep-all;
	}

.eth_conts dl:last-of-type {margin-bottom:0}
.eth_conts dl dd {
    width: 80%;
}
.eth_conts dl.one_line {
    display: flex;
    align-items: center;
    width: 33.333%;
    margin-bottom: 0;
}
.eth_conts dl.one_line  dt {
    margin-right: 1rem;
    margin-bottom: 0;
}
.eth_conts dl.one_line  dd {
    /* width: 80%; */
}
.eth_conts .conts_group {
    padding-left: 10px;
}
.eth_conts .conts_group > li {
    margin-bottom: .5rem;
}
.eth_conts i {
    font-size: 26px;
    margin-right: 8px;
    font-weight: 100;
}
.eth_conts dl dt span {
	font-size: 26px;
    margin-right: 8px;
	
}
.eth_logo {
    /* text-align: center; */
    margin-top: 3rem;
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
    /* padding: 1rem; */
    /* border-bottom: 1px solid var(--color-main); */
    /* border-top: 1px solid var(--color-main); */
    text-align: center;
}
.eth_logo img {width: 286px;object-fit:contain;}
.eth_logo p {/* margin-top: 2rem; */font-size: 20px;font-weight: 500;display: inline-block;/* border-bottom: 1px solid #000; *//* border-top: 1px solid #000; */}
.eth_conts .decimal {
    list-style: decimal;
    margin-left: 25px;
}
.eth_conts .decimal li, .eth_conts .square li, .eth_conts .num li {
    /* padding: 0 0 .2rem .5rem; */
    padding: .2rem 0 .3rem;
    list-style: unset;
    letter-spacing: -.5px;
    word-break: keep-all;
}
.eth_conts .square {list-style: square;margin-left: 20px;}
.square li::marker {color: #e2e2e2;}
.eth_conts .num {list-style:decimal; margin-left: 20px;}
.num li::marker {color: #5a5a5a;}
li.none {list-style:none;}
li.none::before {display:none;}
li.none ul {}
.eth_conts .bar {}
.eth_conts .bar li {
    position: relative;
}
.eth_conts .bar li:before {
	content:"";
	width:8px;
	height: 1px;
	background-color: #2f6988;
	position:absolute;
	left:-10px;
	top: 13px;
}

.subbox {
    margin: .5rem 0;
    background-color: #f5f5f5;
    padding: 1rem;
}
.subbox ul {
    padding-left: 1rem;
}
.subbox p, .subbox ul li {margin-bottom:.5rem;list-style: circle;}
.subbox span {
    color: #5b5b5b;
    text-align: right;
    display: block;
    font-size: 16px;
}
.subbox ul li p {margin-bottom:0}
.step > ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 1rem 0;
}
.step ul li {
    text-align: center;
    letter-spacing: -1px;
}
.step .sflow {}
.step .sflow li {
    width: 30%;
    padding: 0 1rem 1rem;
}
.step .step_1 {position:relative;}
.step .step_1 li {
    width: 100%;
    margin-right: 3%;
}
.step .step_1 li:last-of-type {margin-right:0}
.step .step_2 li {
    /* background: #f7f7f7; */
    /* height: 5em; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-radius: 0 0 1em 1em; */
    padding: .5rem 0;
}
.step ul.step_2 {position:relative;}
.step .step_2 li.tit {border: 1px solid var(--color-main2);box-shadow: inset 1px 10px 50px rgba(255, 255, 255, 0.8), 0px 1px 5px rgba(0, 0, 0, 0.3);background: -webkit-linear-gradient(top, #ffffff, #edf6ff);height: 76px;background-color: #edf6ff;color: var(--color-main2);font-weight: 500;border-radius: 10px;}
.step > ul.h_fix li.tit:after{content:'';position: absolute;top: 30px;right: 0;margin-right: -15%;width: 11px;height: 16px;background-image: url(/img/common/step.png);background-repeat: no-repeat;}
.step > ul.h_fix li:last-child .tit::after {display:none;}
.step .step_2 li.etc {position:relative;height: 220px;}
.step .step_2 li.etc div {position:absolute;width: 380px;text-align: left;background-color: #f8f8f8;padding: 1rem;bottom: 0;border-radius: 10px;border: 1px solid var(--color-main);box-shadow: inset 1px 10px 50px rgba(255, 255, 255, 0.8), 0px 1px 5px rgba(0, 0, 0, 0.3);}
.step .step_2 li.etc:before {
	content:"";
	position:absolute;
	width:1px;
	height: 50%;
	background-color:var(--color-main);
	top: 0;
}
.step .step_2 li.etc div span {
    color: var(--color-main);
    font-weight: 500;
    text-align: center;
    display: block;
    /* margin-bottom: 1rem; */
}
.step .step_2 li.etc div p {padding-top: .5rem;}
.groundbox {background-color:#EFF5EF;padding: 4rem;border-radius: 2rem;margin-top: var(--sub_pd_half);}
.bodybox {background-color: #eff5ef;border-radius: 2rem;padding: 3rem;background-color: #fff;}
.body_tit {/* border-bottom: 2px solid var(--color-main); */text-align:center;padding-bottom:3rem;/* margin-bottom:3rem; */}
.body_tit h3 {font-size:40px;margin-bottom:2rem }
.body_tit p {font-size: 20px;color: #444;}
.unm_list {
    /* padding: 3rem; */
    /* background-color: #fff; */
    /* border-radius: 2rem; */
    /* border-top: 2px solid var(--color-main); */
    /* padding: 2rem 0; */
}
.unm_list li {
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    border-bottom: 1px dashed #eee;
}
.unm_list li:last-child {border:0;}
.unm_list span {
    color: var(--color-main);
    font-size: 1.4rem;
    font-weight: 600;
    min-width: 70px;
}
.unm_list span i {font-weight:400}
.unm_list p {
    font-size: 20px;
}
.promise {
    /* border-bottom: 1px solid var(--color-main); */
    /* border-top: 2px solid var(--color-main); */
    padding: 2rem;
    text-align: center;
    background-color: #f4f4f4;
    border-radius: 1rem;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 10px rgb(0 0 0 / 8%);
    margin: 2rem 0 0;
}
.promise p {
    font-size: 18px;
    font-weight: 500;
    position: relative;
    color: #444;
}

.practice {display: flex;border:1px solid #ddd;border-radius:2rem;padding: var(--sub_pd_half);}
.practice  h4 {font-size:28px; margin-bottom:2rem}
.practice > div {width: 100%;}

.practice ul li {font-size:20px;padding: 1.2rem 0;position: relative;}
.practice .glist li {padding-left: 30px;}
.practice .step1 ul {}
.practice .step1 li {}
.practice .step1 span {background-color:var(--color-main);width: 100px;display: inline-block;text-align: center;color: #fff;border-radius: 1rem;margin-right: 1rem;font-size: 17px;}
.practice .step2 ul {position: relative;}
.practice .step2 li {padding-left:2rem}
.practice .step2 ul:before, .practice .step2 li:before, .practice .step2 li:after {content:""; position:absolute;background-color:#ddd; left:0; top:0}
.practice .step2 ul:before {height: 82%;width:1px;top: 50%;left: 10px;transform: translateY(-50%);}
.practice .step2 li:before, .practice .step2 li:after {width:20px;height:20px;border:1px solid #ddd;background-color:#fff;border-radius:50%;top:50%;transform:translateY(-50%);}
.practice .step2 li:after {width:10px;height:10px;border:0;background-color:var(--color-main);margin-left: 5px;}
.results {text-align: center;position:relative}
.results span {margin-top: -4rem;display: inline-block;}
.results_txt {background-color:var(--color-main);text-align: center;margin-top: 2rem;border-radius: 2rem;padding: 3rem;}
.results h4 {color:#fff;opacity: .7;font-size: 28px;margin-bottom: 2rem;}
.results p {font-size: 32px;font-weight: 500;color:#fff}
.list_wrap {padding: var(--sub_pd_half) 0 var(--sub_pd);}
.boxlist {display: flex;gap: 3rem;}
.boxlist li {width:100%;border: 1px solid #ddd;border-radius: 1rem;padding: 2rem;position:relative}
.boxlist li strong {font-size:1.5rem; color:var(--color-main); font-weight:600;display:inline-block; margin-bottom:1rem}
.boxlist li p {}
.boxlist li p + p {margin-top:.5rem; line-height:120%}
.boxlist li span {position:absolute; bottom:2rem; right:2rem}

/* PC */ 
@media only screen and (min-width:1025px) and (max-width: 1500px)  {
	.eth_conts { padding: 3rem 2rem;}
	.eth_conts dl.one_line dt {width: 25%;margin-right: 0;}
	.eth_conts dl.one_line dd {width:80%}
	.step .step_2 li {word-break:keep-all}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
	.eth_box {/* padding:1rem; */margin-bottom: 80px;}
	.eth_conts {padding: 2rem 1rem;margin-bottom: 0;border-radius: 1rem;}
	.eth_conts dl {flex-wrap:wrap}
	.eth_conts dl dt {width:100%;margin-right: 2%;}
	.eth_conts dl dd {width:100%;word-break:keep-all}
	.groundbox {padding:2rem}
    .bodybox {padding:2rem}
	.unm_list li {padding:1.5rem 0}
	.eth_logo {margin-top:1.5rem}
	.practice {padding:2rem;flex-wrap: wrap;gap: 3rem 0;}
	.practice > div {width:50%}
	.practice .step3 {width:100%}
	.practice ul li {padding:.5rem 0;font-size: 18px;}
	.practice .step3 ul li {padding-left: 2rem;/* font-size: 18px; */}
	.results_txt {padding: 2rem;}
	.results p {font-size: 1.5rem;}
	.boxlist {flex-wrap:wrap; gap:2%}
	.boxlist li {width:32%; padding: 1.2rem 1.2rem 6rem;}
	.boxlist li span {
    bottom: 1rem;
    right: 1rem;
}
	/*.boxlist li p {width:90%}*/
	.boxlist li p br {display:none}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
	.eth_box {margin-bottom: 60px;}
	.tit_box {padding:1rem}
	.eth_conts {padding:1rem}
	.eth_conts dl {margin-bottom: .5rem;}
	.eth_conts dl dt {font-size: 18px;}
	.eth_conts i {font-size:20px}
    .groundbox {padding:1rem;border-radius: 1.5rem;}
    .bodybox {padding:1rem;border-radius: 1rem;}
	.unm_list li {padding:1rem 0;flex-wrap: wrap;gap: .5rem;}
	.unm_list span {font-size:18px}
	.unm_list p {font-size:15px}
	.promise {padding:1rem;margin-top: 0;}
	.promise p {font-size:15px}
	.eth_logo {margin-top:1rem;}
	.eth_logo img {width:80%}
	.practice > div {width:100%}
	.practice ul li {font-size:16px}
	.practice .step1 span {width:30%; font-size:16px}
	.practice h4 {font-size:1.5rem;margin-bottom: 1rem;}
	.boxlist {gap:1rem; height:auto}
	.boxlist li {width:100%; padding:2rem 1rem}
	.boxlist li span {width:50px; bottom:unset; top:1rem}
	.boxlist li span img {width:100%}
	.boxlist li strong {font-size:20px}
}