@charset "utf-8";

h3, h4 {font-family:  Cafe24Ssurround,"써라운드", Dotum, "돋움", sans-serif;color:#444f55;}
h4 {color: #575f64;}
.main_container {overflow: hidden;}

/* Mobile */
.main_container {padding-top: 200px;}
.section h3 {font-size: 25px;}
.m_gallery {position: relative;}
.m_gallery .g_tit span {padding: 30px 0 50px; display: block;}
.g_list {margin: auto; max-width: 319px;}
.g_list li {max-width: 334px; display: inline-block;transition: .2s ease; margin-bottom: 40px;border-radius: 20px 40px 20px 20px; overflow: hidden; box-shadow: 0 5px 20px #75a5c752; min-height: 300px;min-width: 283px;max-height: 317px;}
.g_list li:has(a):hover, .g_list li:has(a):active, .g_list li:has(a):focus {box-shadow: 0 20px 20px #75a5c752;}
.g_list li:has(a):hover strong, .g_list li:has(a):active strong, .g_list li:has(a):focus strong {color: #006fb8;}
.g_list li a {display: block;}
.g_list li img {width: 100%;height: 222px;}
.g_list p {padding: 20px;}
.g_list p strong {overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;font-family: 'Cafe24Ssurround';-webkit-text-stroke: 0.4px;}
.g_list p .g_date { margin-top: 20px;font-style: normal; color: #8b9297; font-size: 14px;text-align: right; display: block;}
.m_gallery .more {transition: .2s ease; position: absolute; top: 0; right: 0;color: #006cb8; font-size: 14px; border: 1px solid transparent; border-radius: 20px; border-image: linear-gradient(to right, #348dcc 0%, #075e66 100%);border-image-slice: 1;width: 100px; height: 30px; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #348dcc 0%, #075e66 100%); background-clip: content-box, border-box; text-align: center;}
.m_gallery .more span {display: block; padding-top: 4px;}
.m_gallery .more:hover, .m_gallery .more:active, .m_gallery .more:focus {border: 1px solid transparent;background: linear-gradient(to right, #348dcc, #075e66);color: #fff;}

.m_btn {z-index: 0;margin: 50px 0; background: linear-gradient(158deg, #3ea3ea, #0fa2b1);padding: 60px 0; position: relative;}
.m_btn .mb_tit::before {content: ''; top: -165px; left: -50px;z-index: -1;background: url("/images/hydrogen/main/mo_sec2_bg1.png") no-repeat; width: 192px; height: 192px; position: absolute; }
.m_btn .mb_tit {position: relative; margin-bottom: 50px;color: #fff;font-size: 25px; font-family: 'Cafe24Ssurround'; transform: skewX(-5deg);display: block; max-width: 500px;}
.m_btn a {margin: 0 auto 40px auto; box-shadow: 0 10px 10px #87badea6;position: relative; background: #fff; display: block; min-width: 296px; height: 125px; padding: 20px; border-radius: 10px 30px 10px 10px;}
.m_btn a span {color: #567386;}
.m_btn a strong {-webkit-text-stroke: .3px;font-size: 20px;font-family: 'Cafe24Ssurround'; color: #39719e; display: block; padding-top: 15px;}
.m_btn a:last-of-type {margin-bottom: 0;}
.m_btn a::after {content: ''; position: absolute; right: 20px; bottom: 20px; background: url("/images/hydrogen/main/m_ico.png") no-repeat;width: 73px; height: 40px; position: absolute;right: 20px; bottom: 20px; background-size: 310px;}
.m_btn a.m_ico2::after {background-position-x: 50%;width: 60px;}
.m_btn a.m_ico3::after {background-position-x: 100%;height: 45px}
.m_btn a:hover, .m_btn a:active, .m_btn a:focus {box-shadow: 0 10px 10px #87bade;}
.m_btn a:hover span, .m_btn a:active span, .m_btn a:focus span {color: #346e93;}
.m_btn a:hover strong, .m_btn a:active strong, .m_btn a:focus strong {color: #006cb8;}
.m_btn::after {content: ''; background: url("/images/hydrogen/main/mo_sec2_bg2.png") no-repeat;width: 202px;height: 126px;position: absolute;right: 0;bottom: 20%;z-index: -1;}

.bbs_wrap>div {position: relative;}
.m_schedule {margin: 60px 0 120px;}
.bbs_wrap h3 {margin-bottom: 50px;}
.bbs_wrap li {border-bottom:1px solid #b9d3e6; min-height: 64px;}
.bbs_wrap li:first-of-type {border-top:2px solid #004984;}
.m_schedule .mbbs_con li {border-color:#c2d7da;}
.m_schedule .mbbs_con li:first-of-type {border-top:2px solid #007180;}
.mbbs_con {min-height: 255px;}
.mbbs_con a::before {content: '';position: absolute;background: #004984; width: 5px; height: 5px; border-radius: 10px; display: inline-block;}
.mbbs_con a {min-height: 125px; min-width: 100%;padding: 20px 0;display: flex; justify-content: space-between; align-items: center;}
.m_schedule .mbbs_con a::before {background: #007180;}
.m_schedule .mbbs_con a {justify-content: normal;}
.mbbs_con a.mbbs_new::before {content: none;}
.m_notice a.mbbs_new {justify-content: normal;}
.bbs_wrap strong {padding-left: 20px; transition: .2s ease; font-weight: 500;max-width: 65%;overflow: hidden;white-space: normal; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.mbbs_con em {transition: .2s ease;color: #8b9297;font-style: normal;font-style: normal;font-size: 14px;}
.m_schedule .mbbs_con em {color: #00575a; font-weight: 500;padding-left: 20px;}
.mbbs_con a.mbbs_new span:nth-of-type(2) strong {max-width: 100%; margin: 0 0 20px 0; color: #444f55; font-weight: 600; -webkit-line-clamp: 2; overflow: hidden; white-space: normal;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0;}
.mbbs_con .m_circle {min-width: 88px;background: #b4ddf8;border-radius: 50%; margin-right: 20px; padding: 15px;}
.m_schedule .m_circle {background-color: #aedfe5;}
.mbbs_con .m_circle strong {padding-left: 0; display: block; margin: auto;font-size: 25px; font-weight: 600;text-align: center;}
.mbbs_con .mbbs_new em {overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;padding-left: 0; color: #666; font-weight: 400;}
.m_notice .m_circle strong, .m_notice .m_circle em { color: #004c81;}
.m_schedule .m_circle strong, .m_schedule .m_circle em {color: #00575a;}

.m_notice .mbbs_con a:hover strong, .m_notice .mbbs_con a:active strong, .m_notice .mbbs_con a:focus strong, .m_notice .mbbs_new:hover span:nth-of-type(2) strong, .m_notice .mbbs_new:active span:nth-of-type(2) strong, .m_notice .mbbs_new:focus span:nth-of-type(2) strong {color: #0062b2;}
.m_notice .mbbs_con a:hover em, .m_notice .mbbs_con a:active em, .m_notice .mbbs_con a:focus em {color: #447390;}
.m_schedule .mbbs_con a:hover strong, .m_schedule .mbbs_con a:active strong, .m_schedule .mbbs_con a:focus strong, .m_schedule .mbbs_con a.mbbs_new:hover span:nth-of-type(2) strong, .m_schedule .mbbs_con a.mbbs_new:active span:nth-of-type(2) strong, .m_schedule .mbbs_con a.mbbs_new:focus span:nth-of-type(2) strong {color: #008390;}
.m_schedule .mbbs_con a.mbbs_new:hover span:nth-of-type(2) em, .m_schedule .mbbs_con a.mbbs_new:active span:nth-of-type(2) em, .m_schedule .mbbs_con a.mbbs_new:focus span:nth-of-type(2) em {color: #5a8a8f;}
.m_notice .mbbs_con a:hover .m_circle strong, .m_notice .mbbs_con a:active .m_circle strong, .m_notice .mbbs_con a:focus .m_circle strong {color: #004c81;}
.m_notice .mbbs_con a:hover .m_circle em, .m_notice .mbbs_con a:active .m_circle em, .m_notice .mbbs_con a:focus .m_circle em {color: #004c81;}
.m_schedule .mbbs_con a:hover .m_circle strong, .m_schedule .mbbs_con a:active .m_circle strong, .m_schedule .mbbs_con a:focus .m_circle strong {color: #00575a;}
.m_schedule .mbbs_con a:hover .m_circle em, .m_schedule .mbbs_con a:active .m_circle em, .m_schedule .mbbs_con a:focus .m_circle em {color: #00575a;}

.bbs_wrap .more {transition: .2s ease; position: absolute; top: 0; right: 0; color: #006cb8; font-size: 14px;border: 1px solid #1068ad;border-radius: 20px; background: #fff; width: 100px; height: 30px; text-align: center; border-radius: 20px; padding: 5px;}
.m_schedule .more {color: #008b9d; border-color: #008b9d;}
.bbs_wrap .more:hover, .bbs_wrap .more:active, .bbs_wrap .more:focus {background: #006cb8; color: #fff;}
.m_schedule .more:hover, .m_schedule .more:active, .m_schedule .more:focus {background: #008b9d; color: #fff;}

/* Tablet */
@media all and (min-width:768px) {
.section h3 {font-size: 35px;}
.m_gallery .g_tit span {font-size: 20px;}
.g_list {max-width: 100%;}
.g_list li {width: calc(100% / 3 - 18px); margin-right: 22px; min-width: auto;}
.g_list li:last-of-type {margin-right: 0;}
.m_gallery .more {font-size: 16px; width: 130px; height: 40px;border: 2px solid transparent;}
.m_gallery .more span {padding-top: 7px;}
}
/* Desktop */
@media all and (min-width:1023px) {
.main_container {overflow: visible;padding-top: 110px;}

.g_tit {float: left;margin-top: 30px;}
.m_gallery .g_tit span {padding: 70px 0;max-width: 231px; line-height: 1.7;}
.g_list {max-width: 1125px;margin: 0; float: right;}
.g_list li {min-width: 283px;margin-right: 50px;max-width: 320px;width: auto; max-height:325px;}
.g_list p strong {font-size: 18px;-webkit-text-stroke: 0.35px;}
.g_list p .g_date {font-size: 16px;}
.m_gallery .more {bottom: 40px; top: auto; right: auto; left: 0;}
.m_gallery::after {content: '';display: block; clear: both;}
.m_gallery .more:hover, .m_gallery .more:active, .m_gallery .more:focus {border: 2px solid transparent;}

.m_btn {min-width: 1400px; background: linear-gradient(93deg, #3ea3ea, #0fa2b1 85%); margin: 115px 0;padding: 80px 0 65px;}
.m_btn .mb_tit::before {width: 572px; height: 287px; top: -100px; left: -155px;background: url("/images/hydrogen/main/sec2_bg1.png") no-repeat;}
.m_btn .mb_tit {margin-bottom: 60px;font-size: 35px;position: relative;}
.m_btn .mb_tit::after {content: ''; background: url("/images/hydrogen/main/circle_bg.png") no-repeat;width: 121px; height: 73px; position: absolute; left: -85px; z-index: -1; top: -35px;transform: skewX(5deg);}
.m_btn a {transition: .2s ease; margin: 0 50px 0 0;display: inline-block; min-width: 418px; height: 212px; padding: 40px; border-radius: 20px 40px 20px 20px; max-width: 433px;width: 430px;}
.m_btn a:last-of-type {margin-right: 0;}
.m_btn a span {font-size: 18px; line-height: 1.7;}
.m_btn a strong {-webkit-text-stroke: 0;font-size: 30px;padding-top: 40px;}
.m_btn a::after {right: 40px; bottom: 40px;width: 110px; height: 62px; background-size: auto;}
.m_btn a.m_ico2::after {background-position: center; width: 95px;}
.m_btn a.m_ico3::after {height: 68px; width: 112px;}
.m_btn a:hover, .m_btn a:focus {margin-top: -20px;box-shadow: 0 15px 20px #87bade;}
.m_btn::after {background: url("/images/hydrogen/main/sec2_bg2.png") no-repeat;width: 805px; height: 381px;}

.bbs_wrap {margin-bottom: 130px; display: flex;justify-content: space-between; align-items: flex-start;}
.m_notice, .m_schedule {width: 49%;}
.m_notice {margin-right: 90px;}
.m_schedule {margin: 0;}
.bbs_wrap li {min-height: 66px;}
.mbbs_con {min-height: 280px;}
.bbs_wrap .mbbs_con strong {max-width: 85%;font-size: 18px;}
.m_schedule .mbbs_con strong {padding-left: 30px;}
.bbs_wrap .mbbs_con .m_circle {min-width: 106px;padding: 20px;}
.bbs_wrap .mbbs_con .m_circle strong {padding-left: 0;font-size: 30px; max-width: fit-content;}
.bbs_wrap .mbbs_con a.mbbs_new span:nth-of-type(2) strongg {font-size: 20px;}
.bbs_wrap .mbbs_new em {margin-right: 20px; -webkit-line-clamp: 2;font-size: 16px;}
.bbs_wrap .mbbs_con .m_circle em {margin-right: 0;}
.bbs_wrap .mbbs_con em {font-size: 16px;}

.bbs_wrap .more {font-size: 16px; width: 130px; height: 40px;padding: 7px;border-width: 2px;}
}

/* Pc */
@media all and (min-width:1600px) {
.m_btn {border-radius: 150px 0 0;}
}