@charset "utf-8";

/* sub1 */
/* 소개 */
.goal>h4::before {content: ''; background: url("/images/hydrogen/content/goal01.png") no-repeat;width: 445px; height: 389px; position: absolute;left: 0;z-index: -1;}
.goal>h4 {overflow: hidden; margin: 0;background: #0082ca;border-radius: 10px; padding: 50px 0 150px; text-align: center; font-size: 25px;color: #fff; z-index: 0;}
.goal_txt {background: #fff;padding: 20px 20px 0; border-radius: 10px; word-break: keep-all; text-align: center; line-height: 1.7; margin: 0 20px -80px;position: relative;top: -115px;}
.goal_txt>strong {display: block; font-weight: 600;}

.vision {margin-bottom: 90px;}
.vision ul {border-radius: 20px; border: 1px solid #b9d3e6;}
.vision li {padding: 30px 0;margin: 0 30px; word-break: keep-all;}
.vision li:first-of-type {border-bottom: 1px dashed #b9d3e6;}
.vision span::before {content: '';margin: 0 auto 10px;background: url("/images/hydrogen/content/vision.png") no-repeat center top;width: 186px; height: 100px; display: block;background-size: 100px;}
.vision li:nth-of-type(2) span::before {background-position-y: 100%;}
.vision span {-webkit-text-stroke: 0.3px;font-family: 'Cafe24Ssurround'; text-align: center; display: block; line-height: 1.5;}

.task ul {background: #f8f9fb;padding: 20px 20px 20px 30px; border-radius: 20px;}
.task li {box-shadow: 0 0 10px #c4cddf9c;background: #fff; border: 1px solid #4688e3; border-radius: 20px; padding: 20px; text-align: center;margin-bottom: 10px; position: relative;}
.task em {font-style: normal; font-family: 'Cafe24Ssurround'; background: #4688e3; border-radius: 20px;color: #fff;padding: 15px; max-width: 50px;box-shadow: 0 0 15px #0b3d6e54; position: absolute; left: -25px; top: 6px;min-width: 50px;}
.task span {display: inline-block; word-break: keep-all; padding-left: 15px; text-align: left;}

/* 조직도 */
.org_box {margin: 50px 0 100px;}
.org1 {max-width: 215px; margin: 0 auto 30px;}
.org1 strong {font-family: 'Cafe24Ssurround';display: inline-block; padding: 20px 85px; border-radius: 15px; background-color: #0082ca; font-size: 20px; line-height: 24px;color: #fff}
.org2 {max-width: 200px; margin: auto;}
.org2>ul {margin-bottom: 20px;}
.org2 li {margin-top: 10px; padding: 11px 5px;  border: 1px solid #29a0e1; border-radius: 10px; font-size: 17px; line-height: 24px;color: #0082ca; letter-spacing: -0.01em; text-align: center;}
.org2 li:last-of-type {color: #575f64; font-size: 16px; padding: 18px 22px;border: 1px solid #d9d9d9;  border-radius: 10px;}
.org2 li:last-of-type span::before {content: '';margin: 4px 8px 4px 0;background: #d9d9d9; width: 5px; height: 5px; border-radius: 10px; display: inline-block;}
.org2 li:last-of-type span {text-align: left; line-height: 2;display: block;}

/* CI */
.notice_box strong {font-weight: 600;}
.ci_wrap {margin: 50px 0;}
.ci_img {margin: 10px 0 50px;}
.ci_img>div {margin: 20px 0 40px;padding: 30px; border-radius: 20px 20px 40px 20px;box-shadow: 0 5px 20px rgb(185 211 230 / 34%);}
.ci_img strong::before {content: ''; margin: 0 7px 4px 0;background: #d9d9d9; width: 5px; height: 5px; border-radius: 10px; display: inline-block;}
.ci_img strong {display: block; font-weight: 500;}
.ci_img .ci02 {box-shadow: none;border: 1px solid #b9d3e6;margin: 10px 0 20px;}
.ci_img img {width: 100%;}
.ci_img .ci03 img {width: auto;display: block; margin: auto;}
.ci_wrap p.basic_p::before {content: ''; background: url("/images/hydrogen/content/warning.png") no-repeat; width: 20px; height: 20px; position: absolute; left: 0; background-size: 15px; top: 2px;}
.ci_wrap p.basic_p {color: #888;position: relative;padding-left: 22px;font-size: 14px;line-height: 1.5;margin-bottom: 10px;}

/* 오시는 길 */
.map_info {margin: 30px 0;}
.map_info p::before {content: '';margin-right: 30px;box-shadow: 0 0 15px #198dff54;background: #4688e3 url("/images/hydrogen/content/map_info.png") no-repeat center; width: 30px; height: 30px; position: absolute;left: 0; border-radius: 18px;color: #fff; padding: 10px;}
.map_info p {line-height: 1.5;position: relative; padding-left: 65px; word-break: keep-all; font-size: 20px;}

/* 수소이야기 */
.h2o_box {margin-bottom: 30px;border: 1px solid #85a6b0; border-radius: 10px 10px 30px; overflow: hidden;}
.h20_tit::before {content: ''; background: url("/images/hydrogen/content/h2o_ico.png") no-repeat; width: 25px; height: 25px;background-size: contain; position: absolute; left: 20px;}
.h20_tit {display: flex;position: relative;background: #f5fafb; padding: 20px;word-break: keep-all;}
.h20_tit strong {line-height: 1.5;-webkit-text-stroke: .25px;color: #158793; font-family: 'Cafe24Ssurround'; padding-left: 35px;}
.h2o_box>ul {padding:20px;}
.h2o_box li::before {content: ''; background-color: #5dbbc7; width: 3px; height: 3px; position: absolute; left: 0; top: 8px; border-radius: 5px;}
.h2o_box li {word-break: keep-all; padding-left: 10px;margin: 0 0 15px; position: relative; font-size: 14px; padding-left: 10px;}
.h2o_box li:last-of-type {margin-bottom: 0;}
.h2o_box li>ul {margin-top: 10px;}
.h2o_box li li::before {background-color: #91c5e7;}
.h2o_box li li {margin: 0 0 5px;}
span.tit_point::before {content: ''; background-color: #d7eeff; position: absolute; bottom: 0; width: 100%; height: 20px;z-index: -1;}
span.tit_point {position: relative;}
.h2o_why li {padding: 20px;word-break: keep-all;background: #ecf6fc; border-radius: 10px;display: flex;  justify-content: flex-start;margin-bottom: 30px;}
p.why_ico {margin-right:15px;}
p.why_ico span {width: 60px; display: block;}
.h2o_why img {width: 100%;}
.h2o_why strong {font-size: 18px; font-family: 'Cafe24Ssurround';  color: #2780bb;  -webkit-text-stroke: .25px;}
.h2o_why p:nth-of-type(2) span {margin-top: 20px; display: block;}
h5>span { padding-left: 10px;font-family: 'SCDream'; font-weight: 500; font-size: 1rem;}
.pt_now>span {display: block;color: #e56777; margin: 3px 0; font-weight: 500;font-size: .95rem;}
.pt_now>span>em {display: block; font-style: normal; background: linear-gradient(84deg, #e56777, #f5bc90); border-radius: 5px 5px 15px;color: #fff;font-size: .8rem; padding: 3px;font-weight: 500; margin-top: 5px;box-shadow: 0 0 10px rgb(229 166 166 / 51%);}
.why_txt::before, .why_txt::after {content: "";opacity: .2; background: url("/images/hydrogen/content/why_txt.png") no-repeat; width: 32px; height: 19px; position: absolute; left: 25px; top: 15px;}
.why_txt {position: relative; display: block; font-size: 21px; margin: 30px 0 50px; font-family: 'Cafe24Ssurround';color: #64728d; background: #f9fbff; padding: 40px 30px;  border-radius: 20px 20px 40px;word-break: keep-all; }
.why_txt::after {transform: rotate(180deg); top: auto; bottom: 20px;  left: auto; right: 25px;}

/* Tablet */
@media all and (min-width:768px) {
.goal>h4::before {left: -60px;}
.goal>h4 {border-radius: 20px;font-size: 30px;padding: 60px 0 160px;}
.goal>h4::after {content: ''; top: 0;background: url("/images/hydrogen/content/goal02.png") no-repeat;width: 445px; height: 389px; position: absolute;right: 0;z-index: -1;}
.goal_txt {font-size: 18px;margin: 0 50px -80px;border-radius: 20px;padding: 40px 80px;}
.goal_txt>strong {padding-top: 20px;}

.vision li {display: inline-block; width: 49%;padding: 0;  margin: 30px 0;}
.vision li:first-of-type {border-right: 1px dashed #b9d3e6; border-bottom: 0;}
.vision span::before {width: 186px; height: 154px;background-size: 167px;}
.vision span {font-size: 20px;padding: 30px; max-width: 300px;  margin: auto;}

.task ul {padding: 50px;}
.task li {display: inline-flex; width: 47%; margin: 0 5% 4% 0; align-items: center;}
.task li:nth-of-type(2n) {margin-right: 0;}
.task li:nth-of-type(13), .task li:nth-of-type(14) {margin-bottom: 0;}
.task em {position: unset;}

.org1 {max-width: 250px;margin: 0 auto 50px;}
.org1 strong {padding: 20px 97px;}
.org2 {max-width: 1000px;display: flex; justify-content: space-around;}
.org2 li {min-width: 200px; padding: 20px 30px;font-size: 18px; background: #fff;}

.ci_img {border-radius: 20px 20px 40px 20px; box-shadow: 0 5px 20px rgb(185 211 230 / 34%); display: flex;justify-content: space-evenly;}
.ci_img>div, .ci_img .ci02 {width: 47%; display: inline-block;margin-right: 5%;border-radius:0; box-shadow: none;}
.ci_img:nth-of-type(2), .ci_img:nth-of-type(3) {display: block;border-radius: 0; box-shadow: none;}
.ci_img:nth-of-type(2) .ci02, .ci_img:nth-of-type(3) .ci02 {border-radius: 20px 20px 40px 20px;border: 1px solid #b9d3e6;}
.ci_img>div:last-of-type, .ci_img .ci02:last-of-type {margin-right: 0;}

.h2o_box {margin-bottom: 50px;}
.h20_tit::before {left: 30px; width: 31px; height: 31px;}
.h20_tit {padding: 20px 40px;}
.h20_tit strong {padding-left: 40px;font-size: 20px;}
.h2o_box>ul {padding: 30px;}
.h2o_box li::before {top: 10px;}
.h2o_box li {font-size: 16px; margin: 0 0 20px;}
.h2o_box li>ul {margin-top: 15px;}
.h2o_box li li {margin: 0 0 10px;}
.h2o_why {margin: 20px 0 50px;}
.h2o_why li {padding: 30px;}
p.why_ico {margin-right: 20px;}
.h2o_why strong {font-size: 20px;}

.why_txt::before {left: 10%; top: 30px;}
.why_txt {text-align: center;}
.why_txt::after { bottom: 35px;right: 10%;}
}

/* Desktop */
@media all and (min-width:1023px) {
.goal>h4::before {left: 0;}
.goal>h4 {padding: 65px 0 200px;}
.goal_txt {top: -155px;margin: 0 70px -80px;border-radius: 30px;}
.goal_txt>strong {font-size: 20px;}

.vision {margin-top: -150px;}
.vision li {margin: 70px 0;}
.vision span::before {margin-bottom: 30px;}
.vision span {padding: 0 30px;}

.task span {padding-left: 20px; font-weight: 500;}

.org_box:before {content: '';width: 667px; height: 0px; background-color: #fff; border: 1px dotted #ddd; position: absolute; top: 143px; left: 167px;}
.org_box {position: relative; width: 1000px;  margin: 0 auto 130px;}
.org1 {margin-bottom: 100px;}
.org1 strong {padding: 30px 97px;font-size: 25px;}
.org2>ul::before {content: '';background: #fff; width: 0;  height: 50%; position: absolute; top: -40px;border: 1px dotted #ddd; left: 50%; z-index: -1;}
.org2>ul {position: relative;}
.org2>ul:nth-of-type(2)::before {top: -100px;}
.org2 li {padding: 20px 50px;}

.ci_wrap {margin: 80px 0;}
.ci_img:nth-of-type(3) {margin-bottom: 100px;}
.ci_img>div, .ci_img .ci02 {margin-bottom: 0;margin-right: 70px;width: 44%;padding: 50px;}
.ci_img strong::before { margin: 0 10px 5px 0;}
.ci_img strong {padding: 10px 10px 10px 0; font-size: 18px;}
.ci_wrap p.basic_p::before {background-size: contain; top: 0;}
.ci_wrap p.basic_p {font-size: 16px; padding-left: 30px; margin-bottom: 20px;}

.map_info {margin: 45px 0 50px;}
.map_info p::before {top: 0;}
.map_info p {padding-left: 70px; padding-top: 10px;}

.h2o_box {border-radius: 20px 20px 40px;position: relative;}
.h20_tit {padding: 25px 40px 20px;}
.h2o_box::after {content: ''; background: url("/images/hydrogen/content/h2o_ico2.png") no-repeat; width: 150px; height: 136px;position: absolute;top: 8%; right: 4%;background-size: 100%;}
.h2o_why {display: flex;flex-wrap: wrap; justify-content: space-between;}
p.why_ico {box-shadow: 0 0 15px rgb(69 141 185 / 20%);margin-top: -130px; margin-right: 0; display: inline-block; background: linear-gradient(133deg, #53c8ff, #3878b6);border-radius: 100%; width: 152px; padding: 6px 0;}
p.why_ico span {width: 140px; display: block; background: #fff;border-radius: 100%; padding: 33px 0px; margin: auto;}
.h2o_why img {width: 78px;}
.h2o_why li {text-align: center;padding: 50px 30px 40px;width: 48%; display: inline-block;  margin: 100px 0 30px 0;border-radius: 20px;}
.h2o_why p:nth-of-type(2) {margin-top: 30px;}

.why_txt::before {left: 21%; top: 25px;}
.why_txt {margin: 10px 0 70px; padding: 30px;}
.why_txt::after {bottom: 28px; right: 21%;}
}

/* Pc */
@media all and (min-width:1400px) {
.goal_txt {padding: 45px 90px;margin: 0 auto -80px;max-width: 1000px;}

.task ul {padding: 80px;}
.task li { margin: 0 4% 3% 0;width: 47.8%;}

.org_box:before {width: 670px;top: 140px;left: 165px;}
.org2>ul::before {top: -44px;}

.ci_img:first-of-type {margin-bottom: 100px;}
.ci_img>div {padding: 70px 50px;}
.ci_img .ci02 {padding:30px;}
.ci_img>div, .ci_img .ci02 {width: 47%;}
.ci_img img { width: 300px; margin: auto; display: block;}

.h20_tit strong {font-size: 22px;}
.h2o_box::after {width: 207px; height: 188px;}
.h2o_why {flex-wrap: nowrap;}
.h2o_why li {padding: 50px 20px 30px; width: calc(100% / 4);margin-right: 50px;}
.h2o_why li:last-of-type {margin-right: 0;}

.why_txt::before {left: 29%; top: 23px;}
.why_txt::after {bottom: 28px; right: 29%;}
}