@charset "utf-8";

.board{width: 100%;}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////

   board_search
   검색

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.board_search,
.board_search .select select,
.board_search .select input,
.board_search .select .search_btn{transition: all 0.2s linear;}
.board_search{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.8rem 2rem; width: 100%; margin-bottom: 1.6rem; font-size: 1.6rem;}
.board_search .count{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; color: #151515; font-weight: 500;}
.board_search .count strong{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-right: 1rem;}
.board_search .count strong:not(:first-of-type):before{content: ""; display: block; width: 1px; height: 1.2rem; margin: 0 1.6rem; background-color: #D9D9D9; }
.board_search .count span{color: #0073B1;}
.board_search .select{margin-left: auto; }
.board_search .select form{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0.4rem; }
.board_search .select select{width: auto; min-width: 10rem; height: 4.4rem; padding: 1rem 3rem 1rem 1.2rem; color: #555; font-size: 1.5rem; background: url(../../../images/site/kor/skin/board_img01.svg) no-repeat right 1.2rem center / 1rem auto; border: 1px solid #D8D8D8; border-radius: 0.6rem;}
.board_search .select input[type="text"]{width: auto; min-width: 24rem; height: 4.4rem; padding: 1rem 1.2rem; color: #555; border: 1px solid #D8D8D8; border-radius: 0.6rem;}
.board_search .select input[type="text"]::placeholder{color: #aaa; font-size: 1.5rem; font-weight: 400;}
.board_search .select input.search_btn{display: inline-block; width: 6.8rem; height: 4.4rem; padding: 1rem 1.2rem; color: #FFF; font-weight: 500; background-color: #8A949E; border: none; border-radius: 0.6rem; cursor: pointer;}
.board_search .select input.search_btn:hover{background-color: #5e646b;}

@media screen and (max-width:640px){
    .board_search .select select{height: 4rem; padding: 0.8rem 3rem 0.8rem 1.2rem;}
    .board_search .select input[type="text"]{height: 4rem; padding: 0.8rem 1.2rem;}
    .board_search .select input.search_btn{height: 4rem; padding: 0.8rem 1.2rem;}
}
@media screen and (max-width:540px){
    .board_search .count{width: 100%;}
    .board_search .select{width: 100%;}
    .board_search .select form{width: 100%;}
    .board_search .select select{width: 100%;}
    .board_search .select input[type="text"]{width: 100%;}
    .board_search .select input.search_btn{width: 100%;}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////

   page
   페이징

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.page a,
.page a[class*="page_"]:before{transition: all 0.2s linear;}
.page{display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0.8rem; margin-top: 4rem;}
.page a{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 3.8rem; height: 3.8rem; color: #353535; font-weight: 600; background-color: transparent; border-radius: 0.6rem; font-size: 1.6rem;}
.page a:hover,
.page a.on{background-color: #0073B1; color: #fff; border-color: #0073B1;}
.page a[class*="page_"]{position: relative; border: 1px solid #D8D8D8; text-indent: -9999px;}
.page a[class*="left"]{margin-right: 0.4rem;}
.page a[class*="right"]{margin-left: 0.4rem;}
.page a[class*="page_"]:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../../images/site/kor/skin/board_img02.svg) no-repeat center center / 100% auto;}
.page a[class*="page_"]:hover:before{filter: brightness(10000%);}
.page a[class*="first"]:before,
.page a[class*="end"]:before{background-image: url(../../../images/site/kor/skin/board_img03.svg);}
.page a[class*="right"]:before,
.page a[class*="end"]:before{transform: rotate(180deg);}

@media screen and (max-width:640px){
    .page{gap: 0.6rem; margin-top: 3rem;}
    .page a{width: 3.4rem; height: 3.4rem;}
    .page a[class*="left"]{margin-right: 0.3rem;}
    .page a[class*="right"]{margin-left: 0.3rem;}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////

   notice_list
   공지형_게시판

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.notice_list{border-top: 2px solid #101C5C; font-size: 1.6rem;}
.notice_list ul{display: table; table-layout: fixed; width: 100%; border-collapse: collapse; border-spacing: 0;}
.notice_list ul li{display: table-row; position: relative; height: 5.8rem; letter-spacing: -0.017rem; border-bottom: 1px solid #E6EAF0;}
.notice_list ul li p,
.notice_list ul li .subject,
.notice_list ul li.thead strong{display:table-cell; text-align:center; vertical-align:middle;}
.notice_list ul li p{padding: 1.3rem 1rem; font-size: 1.7rem; letter-spacing: -0.02rem;}
.notice_list ul li .no{width: 8rem;}
.notice_list ul li .subject{width:auto;}
.notice_list ul li .writer{width: 13rem; word-break:break-all;}
.notice_list ul li .date{width: 14rem;}
.notice_list ul li .counter{width: 10rem;}
.notice_list ul li .file_atch{width: 8rem;}
.notice_list ul li .divi{width: 16rem;}
.notice_list ul li .divi.t2{width:30rem;}
.notice_list ul li .term{width: 24rem;}
/*헤드 항목*/
.notice_list ul li.thead{background-color: #F1F5FB;}
.notice_list ul li.thead strong{padding: 1.3rem 1rem; color: #151515; font-size: 1.7rem; font-weight: 500; letter-spacing: -0.017rem;}
/*공지글*/
.notice_list ul li.notice{background: #F8F8F8;}
.notice_list ul li.notice{}
.notice_list ul li.notice .no span{display: inline-block; padding: 0.5rem 1.2rem; line-height: 1; color: #0073B1; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.016rem; background-color: #fff; border: 1px solid #0073B1; border-radius: 10rem;}
/*제목부분*/
.notice_list ul li .subject{text-align: left;}
.notice_list ul li .subject a{display: inline-block; position: relative; width: auto; max-width: 100%; color: #151515;  }
.notice_list ul li .subject a.new,
.notice_list ul li .subject a.js_secret{padding-right: 2.2rem;}
.notice_list ul li .subject a.new.js_secret{padding-right: 4.6rem;}
.notice_list ul li .subject a strong{overflow: hidden; display:inline-block; width: auto; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; font-size: 1.8rem; font-weight: 600; vertical-align: middle;}
.notice_list ul li .subject a:hover strong{text-decoration: underline; text-underline-position: under;}
.notice_list ul li p.no{color: #555;}
.notice_list ul li p.divi span{display: block; padding: 0.8rem 1.2rem; color: #fff; font-size: 1.6rem; font-weight: 400; line-height: 1; border-radius: 5rem; background-color: #0073B1;}
.notice_list ul li p.divi span[data-color="2"]{background-color: #8A949E;}
.notice_list ul li p.divi span[data-color="3"]{background-color: #ECF8FF; color: #0073B1; font-weight: 600;}
.notice_list ul li p.divi span[data-color="4"]{background-color: #FDF3EB; color: #E56000; font-weight: 600;}
/*아이콘*/
.notice_list ul li .subject a strong .new,
.notice_list ul li .subject a strong .js_secret{display: none;}
.notice_list ul li .subject a.new strong .new,
.notice_list ul li .subject a.js_secret strong .js_secret{display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.notice_list ul li .subject a strong .new{width: 1.8rem; height: 1.8rem; text-indent: -9999px; background-color: #101C5C; border-radius: 50%; border-radius: 50%;}
.notice_list ul li .subject a strong .new:before{content: "N"; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; color: #fff; text-indent: 0; font-weight: 400; font-size: 1.2rem;}
.notice_list ul li .subject a strong .js_secret{width: 1.8rem; height: 1.8rem; text-indent: -9999px; background: url(../../../images/site/kor/skin/board_img04.svg) no-repeat center center / 100% auto;}
.notice_list ul li .subject a.new.js_secret strong .js_secret{right: 2.3rem;}
.notice_list ul li .file_atch span{display: inline-block; width: 2.4rem; height: 2.4rem; text-indent: -9999px; vertical-align: middle; background: url(../../../images/site/kor/skin/board_img18.svg) no-repeat center center / 100% auto;}
.notice_list ul li .file_atch span img{display: none;}

@media screen and (max-width:1024px){
    .notice_list ul li .divi.t2{width:20rem}
}
@media screen and (max-width:840px){
    .notice_list ul{display: block; }
    .notice_list ul li{display: flex; flex-wrap: wrap; height: auto; gap: 0.4rem 0; padding: 1rem;}
    .notice_list ul li.thead{display: none;}
    .notice_list ul li p{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: 0;}
    .notice_list ul li p:after{content: ""; display: block; width: 1px; height: 1.2rem; margin: 0 1rem; background-color: #E6EAF0; }
    .notice_list ul li .no,
    .notice_list ul li .writer,
    .notice_list ul li .date,
    .notice_list ul li .counter,
    .notice_list ul li .file_atch,
    .notice_list ul li .divi,
    .notice_list ul li .divi.t2{width: auto;}
    .notice_list ul li .subject{width: 100%;}
    /*.notice_list ul li p.divi{margin-top: 0.4rem;}*/
    .notice_list ul li .no:after,
    .notice_list ul li .divi:after,
    .notice_list ul li .subject:after,
    .notice_list ul li p:last-child:after{display: none;}
    .notice_list ul li.notice .no span,
    .notice_list ul li p.divi span{font-size: 1.4rem;}
    .notice_list ul li .file_atch img{width: 2rem; height: 2rem;}
    .notice_list ul li:not(.notice) p.no{margin-right:.8rem;padding: 0.5rem 1.2rem; line-height: 1; font-size: 1.5rem; background-color: #E6EAF0; border-radius: 10rem;}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////

   bodo_list
   보도형_게시판

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.bodo_list{border-top: 2px solid #101C5C;}
.bodo_list ul{}
.bodo_list ul li{font-size: 1.5rem; border-bottom: 1px solid #DDD;}
.bodo_list ul li a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; gap: 1.6rem 0; position: relative; min-height: calc(21rem + 2.4rem + 2.4rem); padding: 2.4rem 0 2.4rem 36.6rem;}
.bodo_list ul li a >*{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.bodo_list ul li a >*:not(:last-child):after{content: ""; display: block; width: 1px; height: 1.2rem; margin: 0 1rem; background-color: #ddd; }
.bodo_list ul li a .photo{overflow: hidden; display: block; position: absolute; top: 2.4rem; left: 0; width: 34.2rem; height: 21rem; border-radius: 1.4rem; background: url(../../../images/site/kor/skin/board_img10.svg) no-repeat center center / cover; border: 1px solid #E4EAEF;}
.bodo_list ul li a .photo:before{content: ""; opacity: 0; visibility: hidden; display: block; position: absolute; position: absolute; top: 50%; left: 50%; z-index: 1; width: 23.394%; height: 0; padding-top: 23.394%; background: rgba(0, 0, 0, 0.50) url(../../../images/site/kor/skin/board_img05.svg) no-repeat center center / 100% auto; backdrop-filter: blur(10px); border-radius: 50%; transform: translate(-50%,-50%); transition: all 0.2s linear;}
.bodo_list ul li a .photo:after{display: none;}
.bodo_list ul li a:hover .photo:before{opacity: 1; visibility: visible;}
.bodo_list ul li a .photo img{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.bodo_list ul li a .subject{overflow: hidden; display: block; position: relative; color: #151515; font-size: 2.1rem; font-weight: 600; letter-spacing: -0.021rem; white-space: nowrap; text-overflow: ellipsis;}
.bodo_list ul li a .subject:after{display: none;}
.bodo_list ul li a:hover .subject{text-decoration: underline; text-underline-position: under;}
.bodo_list ul li a.new .subject{padding-right: 2.4rem;}
.bodo_list ul li a .subject .new{display: none; position: absolute; top: 50%; right: 0; width: 1.8rem; height: 1.8rem; text-indent: -9999px; background-color: #101C5C; border-radius: 50%; transform: translateY(-50%);}
.bodo_list ul li a.new .subject .new{display: block; }
.bodo_list ul li a .subject .new:before{content: "N"; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; color: #fff; text-indent: 0; font-weight: 400; font-size: 1.2rem;}
.bodo_list ul li a .contents{overflow: hidden; display: block; display: -webkit-box; width: 100%; height: auto; font-size: 1.6rem; font-weight: 400; line-height: 1.5; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.bodo_list ul li a .contents:after{display: none;}

@media screen and (max-width:1200px){
    .bodo_list ul li a{padding: 2.4rem 0 2.4rem calc((34.2rem * 0.9) + 2.4rem); min-height: calc((21rem * 0.9) + 2.4rem + 2.4rem)}
    .bodo_list ul li a .photo{width: calc(34.2rem * 0.9); height: calc(21rem * 0.9);}
}
@media screen and (max-width:1024px){
    .bodo_list ul li a{padding: 2.4rem 0 2.4rem calc((34.2rem * 0.8) + 2.4rem); min-height: calc((21rem * 0.8) + 2.4rem + 2.4rem); gap: 1.2rem 0;}
    .bodo_list ul li a .photo{width: calc(34.2rem * 0.8); height: calc(21rem * 0.8);}
}
@media screen and (max-width:840px){
    .bodo_list ul li a{padding: 2rem 0 2rem calc((34.2rem * 0.7) + 2rem); min-height: calc((21rem * 0.7) + 2rem + 2rem);}
    .bodo_list ul li a .photo{width: calc(34.2rem * 0.7); height: calc(21rem * 0.7);}
}
@media screen and (max-width:640px){
    .bodo_list ul li a{padding: 1.6rem 0 1.6rem calc((34.2rem * 0.55) + 1.6rem); min-height: calc((21rem * 0.55) + 1.6rem + 1.6rem);  gap: 0.8rem 0;}
    .bodo_list ul li a .photo{top: 1.6rem; width: calc(34.2rem * 0.55); height: calc(21rem * 0.55);}
}
@media screen and (max-width:480px){
    .bodo_list ul li a{padding: 1.6rem  0; min-height: auto;}
    .bodo_list ul li a .photo{position: relative; top: auto; left: auto;  width: 100%; height: 0; padding-top: 56.25%; margin-bottom: 1rem;}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////

   photo_list
   포토형_게시판

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.photo_list{}
.photo_list ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 2.4rem; padding: 2.4rem 0; border-top: 2px solid #101C5C; border-bottom: 1px solid #DDD;}
.photo_list ul li{width: calc((100% - (2.4rem * 3)) / 4);}
.photo_list ul li a{display: block;}
.photo_list ul li a .photo{overflow: hidden; display: block; position: relative; width: 100%; height: 0; padding-top: 67.26%; border-radius: 1.4rem; background: url(../../../images/site/kor/skin/board_img10.svg) no-repeat center center / cover; border: 1px solid #E4EAEF;}
.photo_list ul li a .photo:before{content: ""; opacity: 0; display: block; position: absolute; position: absolute; top: 50%; left: 50%; z-index: 1; width: 23.394%; height: 0; padding-top: 23.394%; background: rgba(0, 0, 0, 0.50) url(../../../images/site/kor/skin/board_img05.svg) no-repeat center center / 100% auto; border-radius: 50%; backdrop-filter: blur(10px); transform: translate(-50%,-50%); transition: all 0.2s linear;}
.photo_list ul li a:hover .photo:before{opacity: 1;}
.photo_list ul li a .photo img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.photo_list ul li a .subject{overflow: hidden; display: block; display: -webkit-box; height: auto; margin-top: 1.8rem; color: #151515; font-size: 1.7rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.017rem; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.photo_list ul li a.new .subject:after{content: "N"; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 1.8rem; height: 1.8rem; background-color: #101C5C; border-radius: 50%; text-align: center;  font-size: 1.3rem; color: #fff; line-height: 1; vertical-align: text-bottom; font-weight: 400;}
.photo_list ul li a .date{display: block; margin-top: 1.9rem; font-size: 1.5rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.015rem;}

@media screen and (max-width:1200px){
    .photo_list ul li{width: calc((100% - (2.4rem * 2)) / 3);}
}
@media screen and (max-width:1024px){
    .photo_list ul{gap: 2rem;}
    .photo_list ul li{width: calc((100% - (2rem * 2)) / 3);}
}
@media screen and (max-width:740px){
    .photo_list ul li{width: calc((100% - 2rem ) / 2);}
}
@media screen and (max-width:640px){
    .photo_list ul{gap: 2rem 1.6rem;}
    .photo_list ul li{width: calc((100% - 1.6rem ) / 2);}
    .photo_list ul li a .date{margin-top: 1.2rem; font-size: 1.6rem;}
}
@media screen and (max-width:480px){
    .photo_list ul li{width: 100%;}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////

   youtube_list
   유튜브형 게시판

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.youtube_list{}
.youtube_list ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 2.4rem; padding: 2.4rem 0; border-top: 2px solid #101C5C; border-bottom: 1px solid #DDD;}
.youtube_list ul li{width: calc((100% - (2.4rem * 3)) / 4);}
.youtube_list ul li a{display: block;}
.youtube_list ul li a .photo{overflow: hidden; display: block; position: relative; width: 100%; height: 0; padding-top: 67.26%; border-radius: 1.4rem; background: url(../../../images/site/kor/skin/board_img10.svg) no-repeat center center / cover; border: 1px solid #E4EAEF;}
.youtube_list ul li a .photo:before{content: ""; display: block; position: absolute; position: absolute; top: 50%; left: 50%; z-index: 1; width: 23.394%; height: 0; padding-top: 23.394%; background: rgba(0, 0, 0, 0.50) url(../../../images/site/kor/skin/board_img07.svg) no-repeat center center / 100% auto; backdrop-filter: blur(10px); border-radius: 50%; transform: translate(-50%,-50%); transition: all 0.2s linear;}
.youtube_list ul li a:hover .photo:before{background-color: #fff; background-image: url(../../../images/site/kor/skin/board_img08.svg);}
.youtube_list ul li a .photo img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.youtube_list ul li a .subject{overflow: hidden; display: block; display: -webkit-box; height: auto; margin-top: 1.8rem; color: #151515; font-size: 1.7rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.017rem; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.youtube_list ul li a.new .subject:after{content: "N"; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 1.8rem; height: 1.8rem; background-color: #101C5C; border-radius: 50%; text-align: center;  font-size: 1.3rem; color: #fff; line-height: 1; vertical-align: text-bottom; font-weight: 400;}
.youtube_list ul li a .date{display: block; margin-top: 1.9rem; font-size: 1.5rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.015rem;}

@media screen and (max-width:1200px){
    .youtube_list ul li{width: calc((100% - (2.4rem * 2)) / 3);}
}
@media screen and (max-width:1024px){
    .youtube_list ul{gap: 2rem;}
    .youtube_list ul li{width: calc((100% - (2rem * 2)) / 3);}
}
@media screen and (max-width:740px){
    .youtube_list ul li{width: calc((100% - 2rem ) / 2);}
}
@media screen and (max-width:640px){
    .youtube_list ul{gap: 2rem 1.6rem;}
    .youtube_list ul li{width: calc((100% - 1.6rem ) / 2);}
    .youtube_list ul li a .date{margin-top: 1.2rem; font-size: 1.6rem;}
}
@media screen and (max-width:480px){
    .youtube_list ul li{width: 100%;}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////

   board_insert
   게시판 등록

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.board_insert{border-top: 2px solid #101C5C;}
.board_insert .detail{}
.board_insert .detail li{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; border-bottom: 1px solid #D5DAE4;}
.board_insert .detail li .titles{width: 20rem; padding: 1.6rem 2rem; color: #222; font-size: 1.7rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.034rem; background-color: #F1F5FA; border-right: 1px solid #D5DAE4;}
.board_insert .detail li .txts{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.6rem; width: calc(100% - 20rem); min-height: 5.6rem; padding: 0.6rem 2rem; color: #555; font-size: 1.6rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.032rem;}
.board_insert .detail li .txts input[type="text"]{width: 20rem; height: 4.4rem; padding: 0.8rem 1.2rem; color: #555; font-size: 1.5rem; font-weight: 500; border: 1px solid #d8d8d8; border-radius: 0.6rem;}
.board_insert .detail li .txts select{width: 20rem; height: 4.4rem; padding: 0.8rem 3rem 0.8rem 1.2rem; color: #555; font-size: 1.5rem; font-weight: 500; background: url(../../../images/site/kor/skin/board_img01.svg) no-repeat right 1.2rem center / 1rem auto; border: 1px solid #d8d8d8; border-radius: 0.6rem;}
.board_insert .detail li .txts textarea{width: 100%; height: 12rem; padding: 0.8rem 1.2rem; resize: none; color: #555; font-size: 1.5rem; font-weight: 500; border: 1px solid #d8d8d8; border-radius: 0.6rem;}

@media screen and (max-width:1024px){
    .board_insert .detail li .titles{width: 18rem;}
    .board_insert .detail li .txts{width: calc(100% - 18rem);}
}
@media screen and (max-width:640px){
    .board_insert .detail li .titles{width: 15rem; padding: 1.6rem 1.2rem;}
    .board_insert .detail li .txts{width: calc(100% - 15rem); min-height: 4rem; padding: 0.6rem 1.2rem;}
}
@media screen and (max-width:480px){
    .board_insert .detail li .titles{width: 12rem; padding: 1.6rem 1rem;}
    .board_insert .detail li .txts{width: calc(100% - 12rem);}
}
@media screen and (max-width:400px){
    .board_insert .detail li .titles{width: 10rem; padding: 1.6rem 1rem;}
    .board_insert .detail li .txts{width: calc(100% - 10rem);}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////

   board_view
   게시판 상세

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.board_view{overflow: hidden; border-top: 2px solid #101C5C; border-bottom: 1px solid #D8D8D8;}
.board_view .subject{display: block; padding: 2rem 2rem 1rem; color: #1D1D1D; font-size: 2.2rem; }
.board_view .subject .js_secret{display: inline-block; width: 2.2rem; height: 2.2rem; background: url(../../../images/site/kor/skin/board_img04.svg) no-repeat center center / 100% auto; text-indent: -9999px; vertical-align: middle;}
.board_view .detail{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 0; padding: 0 2rem;}
.board_view .detail.ans{padding-top: 2.5rem;}
.board_view .detail li{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; color: #151515; font-size: 1.6rem; font-weight: 500;}
.board_view .detail li:not(:first-child):before{content: ""; display: block; width: 1px; height: 1.2rem; margin: 0 1.6rem; background-color: #D8D8D8;}
.board_view .detail li.no_title{display: block; position: relative; width: 100%; margin-top: 2.4rem; padding: 4rem 2rem;}
.board_view .detail li.no_title:before{content: ""; display: block; position: absolute; top: 0; left: -50%; width: 200vw; height: 1px; margin: 0; background-color: #d8d8d8;}
.board_view .detail li.no_title:after{display: none;}
.board_view .detail li .contents{color: #000; font-size: 1.6rem; font-weight: 400; line-height: 1.6;}
.board_view .detail li .contents .iframe{display: block; position: relative;width:85rem;max-width:100%;aspect-ratio:850 / 478; margin:0 auto 2rem;}
.board_view .detail li .contents .iframe iframe{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.board_view .detail li .contents >img{display: block; width: auto; max-width: 100%; margin-bottom: 2rem;}
.board_view .detail li .slides{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4rem; position: relative; margin-top: 4rem; padding: 2.4rem; background-color: #F1F5FB; border-radius: 0.8rem;}
.board_view .detail li .slides .swiper{position: relative; width: 95.4rem; max-width: 100%; height: 0; margin: 0; padding-top: 41.236%; border-radius: 1rem;}
.board_view .detail li .slides .swiper .swiper-wrapper{position: absolute; top: 0; left: 0;}
.board_view .detail li .slides >a{
    display: block; width: 3.2rem; height: 5.8rem; z-index: 1; background: url(../../../images/site/kor/skin/board_img14.svg) no-repeat center center / 100% auto; text-indent: -9999px;
}
.board_view .detail li .slides >a.prev{}
.board_view .detail li .slides >a.next{
    transform: rotate(180deg);
}
.board_view .detail li .slides .swiper .swiper-wrapper{}
.board_view .detail li .slides .swiper .swiper-wrapper .swiper-slide{background: none; }
.board_view .detail li .slides .swiper .swiper-wrapper .swiper-slide img{display: block; width: 100%; height: 100%; object-fit: contain;}
.board_view .detail li .img_thumb{position: relative; width: 100%; max-width: 1140px; height: 0; margin: 2.4rem auto; padding: 8.33% 6rem 0; }
.board_view .detail li .img_thumb:before{content: ""; display: block; position: absolute; bottom: -2.4rem; left: -50%; width: 200vw; height: 1px; background-color: var(--color-text-white9);}
.board_view .detail li .img_thumb >a{
    display: block; width: 3.6rem; height: 3.6rem; position: absolute; top: 50%; left: 0; background: #fff url(../../../images/site/kor/skin/board_img15.svg) no-repeat center center / 100% auto; border: 1px solid #D8D8D8; border-radius: 50%; text-indent: -9999px;
    transform: translateY(-50%);
    transition: all 0.2s linear;
}
.board_view .detail li .img_thumb >a:hover{background-color: #0073B1; background-image: url(../../../images/site/kor/skin/board_img19.svg);}
.board_view .detail li .img_thumb >a.next{
    left: auto; right: 0;
    transform: translateY(-50%) rotate(180deg);
}
.board_view .detail li .img_thumb .swiper{position: absolute; top: 0; left: 6rem; width: calc(100% - 12rem); height: 100%;}
.board_view .detail li .img_thumb .swiper .swiper-wrapper .swiper-slide{overflow: hidden; background: none; border-radius: 0.8rem; cursor: pointer;}
.board_view .detail li .img_thumb .swiper .swiper-wrapper .swiper-slide:before{
    content: ""; opacity: 1; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);
    transition: all 0.2s linear;
}
.board_view .detail li .img_thumb .swiper .swiper-wrapper .swiper-slide.swiper-slide-thumb-active:before{opacity: 0;}
.board_view .detail li .img_thumb .swiper .swiper-wrapper .swiper-slide:before{}
.board_view .detail li .img_thumb .swiper .swiper-wrapper .swiper-slide img{display: block; width: 100%; height: 100%; object-fit: cover;}
.board_view .detail li .titles strong{display: inline-block; margin-right: 1rem; font-weight: 400; color: #555;}
.board_view .detail li .txts{color: #353535; font-size: 1.6rem; font-weight: 500;}
.board_view .detail li.filebox{flex-wrap: wrap; justify-items: flex-start; align-content: stretch; align-items: stretch; position: relative; width: 100%; padding: 1.6rem 0;}
.board_view .detail li.filebox:before{content: ""; display: block; position: absolute; top: 0; left: -50%; width: 200vw; height: 1px; margin: 0; background-color: #d8d8d8;}
.board_view .detail li.filebox .titles{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 7.8rem; min-height: 3.6rem; border-right: 1px solid #d8d8d8;}
.board_view .detail li.filebox .titles strong{color: #2d2d2d; font-size: 1.6rem; font-weight: 600;}
.board_view .detail li.filebox >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; flex: 1; gap: 0.4rem 0; padding-left: 2rem;}
.board_view .detail li.filebox >ul li{display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; align-content: center; gap: 0.8rem; width: 100%; color: #555; font-size: 1.6rem; font-weight: 500;}
.board_view .detail li.filebox >ul li:before{display: none;}
.board_view .detail li.filebox >ul li a {display: inline-block;font-weight: 500;}
.board_view .detail li.filebox >ul li a:hover{color: #044EB6; text-decoration: underline; text-underline-position: under;}

/* 이전, 다음글 */
.prev_next_link{margin-top: 4rem; border-top: 1px solid #AAA; border-bottom: 1px solid #AAA;}
.prev_next_link ul{}
.prev_next_link ul li{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
.prev_next_link ul li:not(:last-child){border-bottom: 1px solid #d8d8d8;}
.prev_next_link ul li strong{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.8rem; width: 11rem; padding: 1.6rem 1rem; text-align: center; color: #2D2D2D; font-size: 1.6rem; font-weight: 600; background-color: #F8F8F8; }
.prev_next_link ul li strong:before{content: ""; display: block; width: 1rem; height: 1rem; background: url(../../../images/site/kor/skin/board_img09.svg) no-repeat center center / 100% auto; }
.prev_next_link ul li:nth-child(2) strong:before{transform: rotate(180deg);}
.prev_next_link ul li div{display: flex; justify-content: flex-start; align-items: center; position: relative; width: calc(100% - 11rem); padding: 1.2rem;}
.prev_next_link ul li div a{flex: 1; display: inline-block; max-width: 100%; color: #555; font-size: 1.6rem; font-weight: 500;}
.prev_next_link ul li div a:hover{text-decoration: underline; text-underline-position: under;}
.prev_next_link ul li div span{color: #717171; font-size: 1.5rem; font-weight: 400;}

@media screen and (max-width:1480px){
    .board_view .detail li .slides{gap: 0 3rem;}
    .board_view .detail li .slides .swiper{width: calc(95.4rem * 0.9);}
}
@media screen and (max-width:1200px){
    .board_view .detail li .slides{gap: 0 3rem;}
    .board_view .detail li .slides >a{width: calc(3.2rem * 0.8); height: calc(5.8rem * 0.8);}
    .board_view .detail li .slides .swiper{width: calc(95.4rem * 0.7);}
}
@media screen and (max-width:1024px){
    .board_view .subject{padding: 1.8rem 2rem 1rem}
    .board_view .detail.ans{padding-top: 2rem;}
    .board_view .detail li.no_title{margin-top: 2rem; padding: 3rem 0;}
    .board_view .detail li .slides{gap: 0 2rem; padding: 2rem;}
    .board_view .detail li .slides .swiper{width: calc(95.4rem * 0.6);}
    .board_view .detail li .slides >a{width: calc(3.2rem * 0.7); height: calc(5.8rem * 0.7);}
    .board_view .detail li .img_thumb{margin: 2rem auto; padding: 12.5% 5rem 0;}
    .board_view .detail li .img_thumb .swiper{left: 5rem; width: calc(100% - 10rem);}
}
@media screen and (max-width:840px){
    .board_view .detail li .img_thumb{padding: 16% 5rem 0;}
}
@media screen and (max-width:740px){
    .board_view .detail li .slides{gap: 1.5rem;}
    .board_view .detail li .slides .swiper{width: calc(100% - 3rem - ((3.2rem * 0.6) * 2));}
    .board_view .detail li .slides >a{width: calc(3.2rem * 0.6); height: calc(5.8rem * 0.6);}
    .board_view .detail li .slides >a{}
}
@media screen and (max-width:640px){
	.board_view .detail.ans{padding-top: 1.8rem;}
    .board_view .subject{padding: 1.6rem 1rem 0.8rem;}
    .board_view .detail{width: 100%;padding: 0 1rem;}
    .board_view .detail li{width: 100%;}
    .board_view .detail li:not(:first-child):before{display: none;}
    .board_view .detail li.no_title:before,
    .board_view .detail li.filebox:before{display: block;}
    .board_view .detail li.no_title{margin-top: 1.6rem; padding: 2rem 0;}
    .board_view .detail li .contents img{margin-bottom: 1.2rem;}
    .board_view .detail li .img_thumb{margin: 1.5rem auto; padding: 18% 5rem 0;}
    .prev_next_link ul li strong{width: 9rem;}
    .prev_next_link ul li div{width: calc(100% - 9rem);}
}
@media screen and (max-width:540px){
    .board_view .detail li .img_thumb{padding: 22% 5rem 0;}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////

    no_board_data
    데이터 없는 경우

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.no_board_data{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 8rem 0; color: #151515; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.017rem; border-top: 2px solid #101C5C; border-bottom: 1px solid #ddd;}

@media screen and (max-width:640px){
  .no_board_data{padding: 6rem 0;}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
  
   board_reg
   게시판 등록

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.board_reg{display:block; padding:0; border-top:2px solid #000;}
.board_reg .detail{overflow: hidden; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0 2rem;}
.board_reg .detail >li{display: flex;position: relative;flex-wrap: wrap;justify-content: flex-start;align-items: center;gap: 0.4rem 4rem;width: 100%;padding: 1.9rem 2.4rem;background-color: #FAFAFA;}
.board_reg .detail >li.fix{width: calc((100% - 2rem) / 2);}
.board_reg .detail >li.fix:before{content: ""; display: block; position: absolute; top: 0; left: 100%; width: 100vw; height: 100%; background-color: #FAFAFA;}
.board_reg .detail >li.fix:after{content: ""; display: block; position: absolute; top: 50%; left: calc(100% + 1rem); width: 1px; height: 2.4rem; background-color: #DDD; transform: translateY(-50%);}
.board_reg .detail >li.no_title{width: 100%; padding: 0; background-color: transparent;}
.board_reg .detail >li .titles{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;/* flex: 1; */width: auto;}
.board_reg .detail >li.no_title .titles{position: absolute; top: -9999px; left: -9999px;}
.board_reg .detail >li .titles strong{display: flex;flex-wrap: nowrap;justify-content: flex-start;align-items: center; gap: 0 0.4rem;font-size: 1.8rem;font-weight: 600;color: #555;}
.board_reg .detail >li .titles strong sup{color: #DE2E39; font-weight: 600;}
.board_reg .detail >li .txts{width: auto;}
.board_reg .detail >li.no_title .txts{width: 100%;}

.board_reg .detail >li .txts >*{width: 100%;}
/*제목*/
.board_reg .detail >li.tit .txts{position: relative;}
.board_reg .detail >li.tit .txts:before{content:"*"; display: block; position: absolute; top: 2.6rem; left: 2rem; color: #EB003B; font-size: 2.4rem; font-weight: 600; line-height: 1.3;}
.board_reg .detail >li.tit .txts input{padding: 2.4rem 2rem 2.4rem 4rem;border: 0;line-height: 1.5; font-size: 2.4rem; font-weight: 600; outline: none; color: #151515;}
.board_reg .detail >li.tit .txts input::placeholder{color: #aaa;}
/* 내용 */
.board_reg .detail >li.conts{margin-top: 4rem; margin-bottom: 3rem; }
.board_reg .detail >li.conts .txts{position: relative; padding: 3rem 3rem 3rem 4rem; background-color: #fff; border: 1px solid #DDD; border-radius: 1.2rem;}
.board_reg .detail >li.conts .txts:before{content:"*"; display: block; position: absolute; top: 3.2rem; left: 2.7rem; color: #DE2E39; font-size: 1.8rem; font-weight: 600; line-height: 1.5;}
.board_reg .detail >li.conts .txts textarea{display: block; width: 100%; height: 20rem; resize: none; border: 0; padding: 0; outline: none; font-size: 1.8rem; line-height: 1.5;}
.board_reg .detail >li.conts .txts textarea::placeholder{color: #aaa;}
/* 일반 인풋 */
.board_reg .detail >li .txts input{height: auto; padding: 0; border: 0; outline: 0; background-color: transparent; color: #555; font-size: 1.7rem; font-weight: 500; line-height: 1.5;}
.board_reg .detail >li .txts input::placeholder{color: #aaa;}
.board_reg .detail >li .txts .tip{display: block;position: relative;width: 100%;font-size: 1.5rem;padding-left: 2.2rem;}
.board_reg .detail >li .txts .tip:before{content: "!";display: flex;position: absolute;top: 0.3rem;left: 0;width: 1.6rem;height: 1.6rem;border-radius: 50%;background-color: #980000;color: #fff;text-align: center;font-size: 1.2rem;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;}
.board_reg .detail >li .txts .radio-box .radio{gap: 0.4rem 2rem;}
.board_reg .detail >li .txts .radio-box .radio label{color: #555; font-size: 1.7rem; font-weight: 500;}
.board_reg .detail >li .txts .radio-box .radio {display: flex; position: relative; gap: 0.4rem 2rem;}
.board_reg .detail >li .txts .radio-box .radio input {position: absolute; top: -9999px;}
.board_reg .detail >li .txts .radio-box .radio label {display: flex; align-items: center; gap: .8rem; position: relative; color: #555; font-weight: 500; color: #555; font-size: 1.7rem; font-weight: 500; cursor: pointer;}
.board_reg .detail >li .txts .radio-box .radio label::before {content: ""; display: inline-flex; flex-shrink: 0; width: 24px; height: 24px; border-radius: 100%; background-color: #fff; border: 1px solid #D8D8D8;}
.board_reg .detail >li .txts .radio-box .radio input:checked + label::before {border: 1px solid #044EB6;}
.board_reg .detail >li .txts .radio-box .radio input:checked + label::after {content: ""; display: inline-flex; flex-shrink: 0; position: absolute; top: 50%; left: 5px; width: 14px; height: 14px; border-radius: 100%; background-color: #044EB6; transform: translateY(-50%);}
/*첨부파일*/
.board_reg .detail >li.filebox{width: 100%;}
.reg_tips{display: inline-block; padding: 0.6rem 1.4rem; color: #980000; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.016rem; background-color: #FFF1F1; border-radius: 0.6rem;}

@media screen and (max-width:1024px){
	.board_reg .detail >li{gap:0.4rem 2.4rem;padding: 1.4rem 1.5rem;}
	.board_reg .detail >li.tit .txts input{padding: 2rem 1.6rem 2rem 3rem; font-size: 2.2rem;}
	.board_reg .detail >li.tit .txts:before{top: 2.1rem; left: 1.4rem; font-size: 2.2rem;}
	.board_reg .detail >li.conts{margin-top: 2rem; margin-bottom: 2rem;}
	.board_reg .detail >li.conts .txts{padding: 2rem 2rem 2rem 3rem;}
	.board_reg .detail >li.conts .txts:before{top: 2rem; left: 1.7rem; font-size: 1.8rem;}
	.board_reg .detail >li .txts .radio-box .radio{gap: 0.4rem 1.4rem;}
	.board_reg .detail >li .titles strong{font-size: 1.7rem;}
    .board_reg .detail >li .txts .radio-box .radio label::before{width: 22px; height: 22px;}
    .board_reg .detail >li .txts .radio-box .radio input:checked + label::after{width: 12px; height: 12px;}
}
@media screen and (max-width: 768px) {
    .board_reg .detail >li .txts .radio-box .radio label::before{width: 20px; height: 20px;}
    .board_reg .detail >li .txts .radio-box .radio input:checked + label::after{width: 10px; height: 10px;}
}
@media screen and (max-width:640px){
	.board_reg .detail >li{padding: 1rem 2rem;}
	.board_reg .detail >li.fix{width: 100%;}
	.board_reg .detail >li.conts{margin-top: 1.5rem; margin-bottom: 1.5rem;}	
	.board_reg .detail >li.conts .txts{border-radius: 1rem;}
}

/*K-water 물관리 기술*/
[data-content="01_02_01"]{}
[data-content="01_02_01"] .t_box{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 4rem; padding: 2rem 3.6rem; background-color: #F4F6F8; border-radius: 1.4rem;}
[data-content="01_02_01"] .t_box >strong{display: block; font-size: 2.4rem; font-weight: 700; color: #000;}
[data-content="01_02_01"] .t_box ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0.4rem 3.6rem;}
[data-content="01_02_01"] .t_box ul li{}
[data-content="01_02_01"] .t_box ul li [data-skin="check"] label{padding-left: 2.8rem;}
[data-content="01_02_01"] .t_box ul li [data-skin="check"] label:before,
[data-content="01_02_01"] .t_box ul li [data-skin="check"] label:after{top: 0.4rem; width: 2rem; height: 2rem}
[data-content="01_02_01"] .t_box ul li [data-skin="check"] label:before{background-color: #fff;}
[data-content="01_02_01"] .t_box ul li [data-skin="check"] input:checked + label:before{background-color: #101C5C;}
[data-content="01_02_01"] .b_box{margin-top: 4rem;}
[data-content="01_02_01"] .b_box table{}
[data-content="01_02_01"] .b_box table tr{}
[data-content="01_02_01"] .b_box table tr th{padding: 1rem; border-right: 0; border-bottom: 0;}
[data-content="01_02_01"] .b_box table tr td{padding: 1rem;border-right: 0;}
[data-content="01_02_01"] .b_box table tr th:nth-child(1),
[data-content="01_02_01"] .b_box table tr td:nth-child(1),
[data-content="01_02_01"] .b_box table tr th:nth-child(3),
[data-content="01_02_01"] .b_box table tr td:nth-child(3){border-right:1px solid #e8e8e8}
[data-content="01_02_01"] .b_box table tr th:nth-child(2),
[data-content="01_02_01"] .b_box table tr td:nth-child(2){border-right: 1px solid #ddd;}
[data-content="01_02_01"] .b_box table tr td span{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0.6rem; color: #0073B1; font-weight: 500; letter-spacing: -0.036rem; background-color: #F0F7FF; border-radius: 0.6rem;}
[data-content="01_02_01"] .b_box table tr td span[data-color="2"]{color: #1E824C; background-color: rgba(118, 178, 45, 0.10);}

/* 수자원 위성 */
[data-content="03_10_01"] .box3{position: relative; }
[data-content="03_10_01"] .box3 .t{display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; justify-content: flex-start; align-items: center; position: relative; }
[data-content="03_10_01"] .box3 .t:before{content: ""; display: block; position: absolute; bottom: 0; left: 50%; z-index: -1; width: 100vw; height: calc(100% - 10.6rem); background: linear-gradient(180deg, #F4F6F8 0%, #FFF 100%); transform: translateX(-50%);}
[data-content="03_10_01"] .box3 .t .tit{width: 100%; max-width: 1164px; margin: 0 auto; text-align: center;padding: 4rem 4rem 4.5rem; background-color: #fff; border-radius: 100rem; border: 4px solid #0073B1;}
[data-content="03_10_01"] .box3 .t .tit strong{display: block; color: #101C5C; font-size: 2.4rem; font-weight: 700; letter-spacing: 0;}
[data-content="03_10_01"] .box3 .t .tit em{display: inline-block; position: relative; padding: 2.6rem 5.2rem 0; font-size: 3.6rem; font-weight: 700; line-height: 1.5; letter-spacing: 0; background: linear-gradient(90deg, #0073B1 0%, #101C5C 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
[data-content="03_10_01"] .box3 .t .tit em:before,
[data-content="03_10_01"] .box3 .t .tit em:after{content: ""; display: block; position: absolute; top: 0.7rem; left: 0; width: 3.2rem; height: 3.2rem; background: url(../../../images/site/kor/content/s031001_img07.svg) no-repeat center center / 100% auto;}
[data-content="03_10_01"] .box3 .t .tit em:after{left: auto; right: 0; background-image: url(../../../images/site/kor/content/s031001_img08.svg);}
[data-content="03_10_01"] .box3 .t .c{position: relative; width: 100%; max-width: 905px;}
[data-content="03_10_01"] .box3 .t .c >strong{display: block; position: absolute; bottom: 0; left: 50%; z-index: 1; width: calc(100% / 4); transform: translateX(-50%);}
[data-content="03_10_01"] .box3 .t .c >strong:before{content: ""; display: block; width: 100%; padding-top: 100%; background: linear-gradient(180deg,  #0073B1 0%, #101C5C 100%); border-radius: 50%;}
[data-content="03_10_01"] .box3 .t .c >strong span{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; width: calc(100% - 2.8rem); height: calc(100% - 2.8rem); font-size: 2.4rem; color: #fff; font-weight: 600; background: url(../../../images/site/kor/content/s031001_img06.png) no-repeat center center / 100% auto; transform: translate(-50%,-50%);}
[data-content="03_10_01"] .box3 .t .c ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 2.7rem;}
[data-content="03_10_01"] .box3 .t .c ul:before{content: ""; display: block; position: absolute; top: 50%; left: 50%; width: calc(100% - 2.7rem - 2.7rem  - 16rem); height: 50%; border-radius: 100000px 100000px 0 0; border: 1px dashed rgba(16, 28, 92, 0.5); border-bottom: 0; transform: translate(-50%,-50%);}
[data-content="03_10_01"] .box3 .t .c ul:after{content: ""; display: block; position: absolute; bottom: 8%; left: 50%; z-index: -1; width: calc((100% - 2.7rem - 2.7rem  - 16rem) * 0.8); height: 50%; background: linear-gradient(180deg,  rgba(0, 115, 177, 0.2) 0%, #FFF 100%); border-radius: 100000px 100000px 0 0; transform: translate(-50%,0);}
[data-content="03_10_01"] .box3 .t .c ul li{position: relative; width: calc((100% - 2.7rem - 2.7rem) / 3);}
[data-content="03_10_01"] .box3 .t .c ul li:nth-child(2){margin-bottom: 27%;}
[data-content="03_10_01"] .box3 .t .c ul li:before{content: ""; display: block; width: 100%; padding-top: 100%; background-color: #fff; border-radius: 50%; box-shadow: 4px 4px 20px 0 rgba(0, 115, 177, 0.20);}
[data-content="03_10_01"] .box3 .t .c ul li div{display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: 1.6rem; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 4rem; text-align: center;font-size: 2rem;}
[data-content="03_10_01"] .box3 .t .c ul li div img{display: block; width: 5rem;}
[data-content="03_10_01"] .box3 .b{position: relative; padding-top: 12rem;}
[data-content="03_10_01"] .box3 .b:before{content: ""; display: block; position: absolute; top: 0; left: 50%; z-index: -1; width: 100vw; height: 669px; background: url(../../../images/site/kor/content/s031001_img05.svg) no-repeat center center / auto 100%; transform: translateX(-50%);}
[data-content="03_10_01"] .box3 .b .tits{position: relative; }
[data-content="03_10_01"] .box3 .b .tits strong{display: block; text-align: center; color: #101C5C; font-size: 2.4rem; font-weight: 700; letter-spacing: 0;}
[data-content="03_10_01"] .box3 .b .tits .cap{display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: stretch; gap:0.8rem 1.6rem; position: absolute; top: 0; right: 0; max-width: 40%; font-size: 1.6rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.016rem;}
[data-content="03_10_01"] .box3 .b .tits .cap span{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.6rem; color: #0073B1;}
[data-content="03_10_01"] .box3 .b .tits .cap span.c_1{color: #101C5C;}
[data-content="03_10_01"] .box3 .b .tits .cap span:before{content: ""; display: block; width: 1.6rem; height: 1.6rem; border-radius: 50%; background-color: #0073B1;}
[data-content="03_10_01"] .box3 .b .tits .cap span.c_1:before{background-color: #101C5C;}
[data-content="03_10_01"] .box3 .b ul{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 2.4rem; margin-top: 4rem;}
[data-content="03_10_01"] .box3 .b ul >li{display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; width: 100%; }
[data-content="03_10_01"] .box3 .b ul >li strong{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.8rem; width: 100%;min-height:15rem; padding: 1.9rem 2rem; text-align: center; font-size: 1.8rem; font-weight: 500; letter-spacing: 0; color: #fff; background-color: #0073B1; border-radius: 1.4rem 1.4rem 0 0;}
[data-content="03_10_01"] .box3 .b ul >li.c_1 strong{background-color: #101C5C;}
[data-content="03_10_01"] .box3 .b ul >li strong b{display: block; width: 100%; text-align: center; color: #fff; font-weight: 600; letter-spacing: 0;}
[data-content="03_10_01"] .box3 .b ul >li >div{width: 100%; height: 100%; padding: 2.4rem; border: 1px solid #DDD; border-radius: 0 0 1.4rem 1.4rem; background-color: #fff;}
[data-content="03_10_01"] .box3 .b ul >li >div ol{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 1.4rem; font-size: 1.8rem; font-weight: 400;}
[data-content="03_10_01"] .box3 .b ul >li >div ol li{position: relative; width: 100%; padding-left: 5rem;}
[data-content="03_10_01"] .box3 .b ul >li >div ol li em{position: absolute; top: 0.2rem; left: 0; width: 4.3rem; text-align: center; border-radius: 0.4rem; font-size: 1.6rem; font-weight: 400; line-height: 2.4rem; letter-spacing: -0.016rem; background-color: #F4F6F8;}

[data-content="03_10_02"] .box2 .imgs div img{display: block; width: 100%;}
[data-content="03_10_02"] .box2 .imgs div .desc{display: inline-block; position: absolute; width: auto; padding: 1.6rem; border-radius: 0.3rem; border: 1px solid rgba(255, 255, 255, 0.2); background-color: rgba(0, 0, 0, 0.10); backdrop-filter: blur(15px);}
[data-content="03_10_02"] .box2 .imgs .t1 .desc{bottom: 40%; left: -10%; transform: translate(-50%,50%);}
[data-content="03_10_02"] .box2 .imgs .t2 .desc{top: 50%; right: 3.5%; transform: translate(0%,50%);}
[data-content="03_10_02"] .box2 .imgs div .desc strong{display: block; color: #fff; font-size: 1.8rem; font-weight: 500; line-height: 1.5;}
[data-content="03_10_02"] .box2 .imgs div .desc ul{margin-top: 1.2rem;}
[data-content="03_10_02"] .box2 .imgs div .desc ul li{position: relative; padding-left: 14.6rem; width: 100%; margin-top: 0.5rem; font-size: 1.4rem; color: #fff; font-weight: 300;}
[data-content="03_10_02"] .box2 .imgs div .desc ul li:first-child{margin-top: 0;}
[data-content="03_10_02"] .box2 .imgs div .desc ul li em{position: absolute; top: 0; left: 0; font-weight: 600;}
[data-content="03_10_02"] .box3{display: none;}

@media screen and (max-width:1680px){
    [data-content="03_10_02"] .box2 .imgs .t2 .desc{right: auto; left: 0; top: auto; bottom: 20%; transform: translate(0%,50%);}
}
@media screen and (max-width:1480px){
    [data-content="03_10_01"] .box3 .t .tit{padding: 4rem 3rem 4.5rem}
    [data-content="03_10_01"] .box3 .t .tit em{padding: 2.6rem 4.5rem 0;}
    [data-content="03_10_01"] .box3 .b ul{flex-wrap: wrap;}
    [data-content="03_10_01"] .box3 .b ul >li{width: calc((100% - 2.4rem) / 2);}
    [data-content="03_10_01"] .box3 .b ul >li:nth-child(n+3){width: calc((100% - 2.4rem - 2.4rem) / 3);}
}
@media screen and (max-width:1200px){
    /*K-water 물관리 기술*/
    [data-content="01_02_01"] .t_box{padding: 2rem 2.5rem; border-radius: 1rem;}
    [data-content="01_02_01"] .t_box ul{gap: 0.4rem 2rem;}
    [data-content="01_02_01"] .b_box{margin-top: 3.6rem;}
    [data-content="01_02_01"] .b_box table,
    [data-content="01_02_01"] .b_box table thead,
    [data-content="01_02_01"] .b_box table thead tr,
    [data-content="01_02_01"] .b_box table thead tr th,
    [data-content="01_02_01"] .b_box table tbody,
    [data-content="01_02_01"] .b_box table tbody tr,
    [data-content="01_02_01"] .b_box table tbody tr td{display: block; }
    [data-content="01_02_01"] .b_box table thead tr,
    [data-content="01_02_01"] .b_box table tbody tr{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
    [data-content="01_02_01"] .b_box table thead tr th,
    [data-content="01_02_01"] .b_box table tbody tr td{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 20rem; height: auto; min-height: 5.9rem;}
    [data-content="01_02_01"] .b_box table tbody tr td{justify-content: flex-start;}
    [data-content="01_02_01"] .b_box table thead tr th:nth-child(1),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(1),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(3){width: 15rem; justify-content: center;}
    [data-content="01_02_01"] .b_box table thead tr th:nth-child(2),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(2),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(4){width: calc(100% - 15rem);}
    [data-content="01_02_01"] .b_box table thead tr th:nth-child(n+3){display: none;}
    [data-content="01_02_01"] .b_box table tr th:nth-child(2),
    [data-content="01_02_01"] .b_box table tr td:nth-child(2){border-right: 0;}

    [data-content="03_10_02"] .box2 .imgs div .desc strong span{display: none;}
    [data-content="03_10_02"] .box2 .imgs div .desc ul{display: none;}
    [data-content="03_10_02"] .box2 .imgs div .desc{padding: 0.8rem;}
    [data-content="03_10_02"] .box2 .imgs div .desc strong{font-size: 1.4rem;}
    [data-content="03_10_02"] .box2 .imgs .t1 .desc{bottom: 2.5rem; left: -4rem; transform: translate(0);}
    [data-content="03_10_02"] .box2 .imgs .t2 .desc{bottom: 0; transform: translate(0);}
    [data-content="03_10_02"] .box3{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 2rem;}
    [data-content="03_10_02"] .box3 .desc{width: 100%;}
    [data-content="03_10_02"] .box3 .desc ul{}
    [data-content="03_10_02"] .box3 .desc ul li{position: relative; padding-left: 19.2rem;}
    [data-content="03_10_02"] .box3 .desc ul li em{display: inline-block; position: absolute; top: 0; left:1.2rem; min-width: 18rem; font-weight: 700;}
}
@media screen and (max-width:1024px){
    /*K-water 물관리 기술*/
    [data-content="01_02_01"] .t_box{padding: 2rem; border-radius: 1rem;}
    [data-content="01_02_01"] .b_box{margin-top: 3.2rem;}

    [data-content="03_10_01"] .box3 .t:before{height: calc(100% - 7.6rem);}
    [data-content="03_10_01"] .box3 .t .tit{padding: 3rem;}
    [data-content="03_10_01"] .box3 .t .tit strong{font-size: 2.2rem;}
    [data-content="03_10_01"] .box3 .t .tit em{padding: 1.2rem 3.2rem 0; font-size: 3rem;}
    [data-content="03_10_01"] .box3 .t .tit em:before,
    [data-content="03_10_01"] .box3 .t .tit em:after{width: 2.4rem; height: 2.4rem;}
    [data-content="03_10_01"] .box3 .t .c{max-width: 80rem;}
    [data-content="03_10_01"] .box3 .t .c ul li div{gap: 2rem; font-size: 1.6rem;}
    [data-content="03_10_01"] .box3 .t .c ul li div img{width: 4.5rem;}
    [data-content="03_10_01"] .box3 .t .c >strong span{font-size: 2.2rem;}
    [data-content="03_10_01"] .box3 .b{padding-top: 9rem;}
    [data-content="03_10_01"] .box3 .b:before{height: 57rem;}
    [data-content="03_10_01"] .box3 .b .tits .cap{justify-content: flex-end; gap: 1.6rem; position: relative; top: auto; left: auto; width: 100%; max-width: 100%; margin-top: 2.4rem;}
    [data-content="03_10_01"] .box3 .b ul{gap: 2rem; margin-top: 1rem;}
    [data-content="03_10_01"] .box3 .b ul >li{width: calc((100% - 2rem) / 2);}
    [data-content="03_10_01"] .box3 .b ul >li:nth-child(n+3){width: calc((100% - 2rem - 2rem) / 3);}
    [data-content="03_10_01"] .box3 .b ul >li strong{gap: 0.4rem; padding: 1.4rem;}
    [data-content="03_10_01"] .box3 .b ul >li >div{padding: 1.6rem;}
    [data-content="03_10_01"] .box3 .b ul >li >div ol{gap: 1rem;}
}
@media screen and (max-width:840px){
    /*K-water 물관리 기술*/
    [data-content="01_02_01"] .b_box table thead tr th,
    [data-content="01_02_01"] .b_box table tbody tr td{width: 18.5rem;}
    [data-content="01_02_01"] .b_box table thead tr th:nth-child(1),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(1),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(3){width: 12rem;}
    [data-content="01_02_01"] .b_box table thead tr th:nth-child(2),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(2),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(4){width: calc(100% - 12rem);}

    [data-content="03_10_01"] .box3 .t:before{height: calc(100% - 10rem);}
    [data-content="03_10_01"] .box3 .t .c ul li div img{width: 4rem;}
    [data-content="03_10_01"] .box3 .t .c ul li div strong{line-height: 1.4;}
    [data-content="03_10_01"] .box3 .b ul >li:nth-child(n+3){width: calc((100% - 2rem) / 2);}
    [data-content="03_10_01"] .box3 .b ul >li:nth-child(1){width: 100%;}
}
@media screen and (max-width:640px){
    /*K-water 물관리 기술*/
    [data-content="01_02_01"] .b_box table thead tr th,
    [data-content="01_02_01"] .b_box table tbody tr td{width: 14rem;}
    [data-content="01_02_01"] .b_box table thead tr th:nth-child(1),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(1),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(3){width: 10rem;}
    [data-content="01_02_01"] .b_box table thead tr th:nth-child(2),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(2),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(4){width: calc(100% - 10rem);}
    [data-content="01_02_01"] .b_box table tr td span{line-height: 1.2;}

    [data-content="03_10_01"] .box3 .t .tit{padding: 2rem; border-radius: 2rem;}
    [data-content="03_10_01"] .box3 .t .tit em{margin-top: 1rem; font-size: 2.4rem;}
    [data-content="03_10_01"] .box3 .t .c >strong{position: relative; left: auto; bottom: auto; width: 100%; padding: 1rem; transform: translateX(0); background: linear-gradient(180deg, #0073B1 0%, #101C5C 100%); border-radius: 1rem;}
    [data-content="03_10_01"] .box3 .t .c>strong:before{display: none;}
    [data-content="03_10_01"] .box3 .t .c>strong span {position: relative; top: auto; left: auto; width: 100%; height: auto; background: none; transform: translate(0);}
    [data-content="03_10_01"] .box3 .t .c ul{gap: 1.5rem; margin-top: 1.5rem;}
    [data-content="03_10_01"] .box3 .t .c ul:before, [data-content="03_10_01"] .box3 .t .c ul:after{display: none;}

    [data-content="03_10_01"] .box3 .t .c ul li{width: 100%; box-shadow: 4px 4px 20px 0 rgba(0, 115, 177, 0.20); background-color: #fff; border-radius: 1rem;}
    [data-content="03_10_01"] .box3 .t .c ul li:nth-child(2){margin-bottom: 0;}

    [data-content="03_10_01"] .box3 .t .c ul li:before{display: none;}
    [data-content="03_10_01"] .box3 .t .c ul li div{gap: 1.2rem; position: relative; top: auto; left: auto; padding: 2rem 1rem;}
    [data-content="03_10_01"] .box3 .t .c ul li div strong{width: 100%; font-size: 1.8rem;}

    [data-content="03_10_01"] .box3 .b{padding-top: 0;}
    [data-content="03_10_01"] .box3 .b:before{display: none;}
    [data-content="03_10_01"] .box3 .b .tits .cap{margin-top: 1.2rem;}
    [data-content="03_10_01"] .box3 .b ul{margin-top: 0.4rem;}
    [data-content="03_10_01"] .box3 .b ul>li strong{border-radius: 1rem 1rem 0 0;}
    [data-content="03_10_01"] .box3 .b ul>li>div{border-radius: 0 0 1rem 1rem;}

    [data-content="03_10_02"] .box3{flex-wrap: wrap;}

    /* [data-content="03_10_02"] .box2 .imgs .t1 .desc{bottom: -2rem; left: -2rem;}
    [data-content="03_10_02"] .box2 .imgs .t2 .desc{bottom: -1rem;} */
}
@media screen and (max-width:500px){
    [data-content="03_10_01"] .box3 .b ul >li,
    [data-content="03_10_01"] .box3 .b ul >li:nth-child(n+3){width: 100%;}
    [data-content="03_10_01"] .box3 .b ul >li strong{min-height:inherit}
}
@media screen and (max-width:480px){
    /*K-water 물관리 기술*/
    [data-content="01_02_01"] .b_box table thead tr th{word-break: break-all;}
    [data-content="01_02_01"] .b_box table thead tr th,
    [data-content="01_02_01"] .b_box table tbody tr td{width: 11rem;}
    [data-content="01_02_01"] .b_box table thead tr th:nth-child(2),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(2),
    [data-content="01_02_01"] .b_box table tbody tr td:nth-child(4){width: calc(100% - 10rem);}
}


[data-content="02_02_03"] .tit_label_wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.4rem}
[data-content="02_02_03"] .tit_label{display:inline-block;padding:.8rem 1rem;border-radius:.6rem;background-color:#101C5C;color:#fff;text-align:center;font-size:1.8rem;font-weight:600;vertical-align:middle}
[data-content="02_02_03"] .smartdam .w_box,
[data-content="02_02_03"] .smartdam .b_box{padding: 4rem; background-color: #fff; border-radius: 1.4rem;}
[data-content="02_02_03"] .smartdam .b_box{background-color: #E0F0FA;}
[data-content="02_02_03"] .smartdam .t_box{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0;}
[data-content="02_02_03"] .smartdam .t_box >div{width: 100%;}
[data-content="02_02_03"] .smartdam .t_box >div:nth-child(1){border-top-right-radius: 0; border-bottom-right-radius: 0;}
[data-content="02_02_03"] .smartdam .t_box >div:nth-child(2){border-top-left-radius: 0; border-bottom-left-radius: 0;}
[data-content="02_02_03"] .smartdam .t_box .b_box .photo_div2 >li .imgs{overflow: visible; position: relative;}
[data-content="02_02_03"] .smartdam .t_box .b_box .photo_div2 >li .imgs:before{content: ""; display: block; position: absolute; bottom: -1.8rem; right: -3.2rem; z-index: 1; width: 8.4rem; height: 7.3rem; background: url(../../../images/site/kor/content/s020203_img45.png) no-repeat center center / 100% auto;}
[data-content="02_02_03"] .smartdam .t_box .b_box .photo_div2 >li:nth-child(2) .imgs:before{background-image: url(../../../images/site/kor/content/s020203_img46.png);}
[data-content="02_02_03"] .smartdam .t_box .b_box .photo_div2 >li .imgs >*{border-radius: 1.4rem;}
[data-content="02_02_03"] .smartdam .gr .move{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0.8rem;}
[data-content="02_02_03"] .smartdam .gr .gr1{flex: 1;}
[data-content="02_02_03"] .smartdam .gr .gr1 >strong{display: block; width: 100%; margin-top: 0; padding: 1rem; background-color: #0073B1; border-radius: 1rem; color: #fff; font-size: 2rem; text-align: center; box-sizing: border-box;}
[data-content="02_02_03"] .smartdam .gr .gr1 >div{overflow: hidden; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 2.4rem;}
[data-content="02_02_03"] .smartdam .gr .gr1 >div >div{overflow: hidden; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 1px; width: 100%; border-radius: 1.4rem;}
[data-content="02_02_03"] .smartdam .gr .gr1 >div >div span{overflow: hidden; display: block; position: relative; }
[data-content="02_02_03"] .smartdam .gr .gr1 >div >div span b{display: block; position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.624rem 1rem; color: #FFF; font-size: 1.4rem; font-weight: 400; line-height: 1.4; text-align: center; background-color: #101C5C; box-sizing: border-box;}
[data-content="02_02_03"] .smartdam .gr .gr2{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 10rem;}
[data-content="02_02_03"] .smartdam .gr .gr2 strong{display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; min-width: 10rem; height: 10rem; margin-top: 0; color: #FFF; font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.028rem; background: linear-gradient(136deg, var(--blue1, #0073B1) 15.98%, var(--blue2, #101C5C) 86.05%); box-shadow: 0 0 4px rgba(0, 0, 0, 0.20); border-radius: 50%;}
[data-content="02_02_03"] .smartdam .gr .gr2 strong i{display: block; margin-top: -0.3rem; font-size: 3rem; line-height: 0.9; font-weight: 300;}
[data-content="02_02_03"] .smartdam .gr .gr3{flex: 1;}
[data-content="02_02_03"] .smartdam .gr .gr3 >strong{display: block; width: 100%; margin-top: 0; padding: 1rem; background-color: #101C5C; border-radius: 1rem; color: #fff; font-size: 2rem; text-align: center; box-sizing: border-box;}
[data-content="02_02_03"] .smartdam .gr_2 .move img{display: block; width: 100%;}
[data-content="02_02_03"] .smartdam .gr_4{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 3rem;}
[data-content="02_02_03"] .smartdam .gr_4 >div >strong{display: block; width: 100%; margin-top: 0; padding: 1rem; background-color: #101C5C; border-radius: 1rem; color: #fff; font-size: 2rem; text-align: center; box-sizing: border-box;}
[data-content="02_02_03"] .smartdam .gr_4 >div:nth-child(2) >strong{background-color: #0073B1;}
[data-content="02_02_03"] .smartdam .gr_4 .gr2{flex: 1;}
[data-content="02_02_03"] .smartdam .gr_4 .gr2 .in{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 1.2rem;}
[data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.8rem; width: 100%;}
[data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul li{overflow: hidden; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;  width: 100%; background-color: #F4F6F8; border-radius: 1rem;}
[data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul li .imgs{display: block; width: 4.4rem; height: 4.4rem; border-radius: 1rem; background-color: #0073B1; }
[data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul:nth-child(2) li .imgs{background-color: #101C5C;}
[data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul:nth-child(3) li .imgs{background-color: #1F7E34;}
[data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul:nth-child(4) li .imgs{background-color: #7B909F;}
[data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul li .imgs img{display: block; width: 100%;}
[data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul li p{flex: 1; padding: 1rem 2rem; color: #151515; font-size: 1.6rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.032rem;}
[data-content="02_02_03"] .smartdam .gr_5{overflow: hidden; display: flex; border-radius: 1.4rem;}
[data-content="02_02_03"] .smartdam .gr_5 .w_box{border-radius: 0;}
[data-content="02_02_03"] .smartdam .gr_5 .g_box{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background: linear-gradient(180deg, #F0F0F0 -9.88%, #C9C9C9 100%);}
[data-content="02_02_03"] .smartdam .gr_5 .photo_div4{row-gap: 1rem;}
[data-content="02_02_03"] .smartdam .gr_5 .photo_div4 strong{margin-top: 0.6rem;}

@media screen and (max-width:1640px){
    [data-content="02_02_03"] .smartdam{width: 100%;}
    [data-content="02_02_03"] .smartdam >strong{opacity: 1;}
    [data-content="02_02_03"] .smartdam .w_box,
    [data-content="02_02_03"] .smartdam .b_box{padding: 3rem;}
    [data-content="02_02_03"] .smartdam .gr .move{overflow-x: auto; gap: 2rem;}
    [data-content="02_02_03"] .smartdam .gr_2 .move{overflow-x: auto; }
    [data-content="02_02_03"] .smartdam .gr_2 .move img{width: auto;}
    [data-content="02_02_03"] .smartdam .gr_4 .gr1{width: 100%;}
    [data-content="02_02_03"] .smartdam .gr_4 .gr1 .in{background-color: #F4F6F8; border-radius: 1rem;}
    [data-content="02_02_03"] .smartdam .gr_4 .gr1 .in img{display: block; width: auto; max-width: 100%;  margin: 0 auto; }
    [data-content="02_02_03"] .smartdam .gr_5{flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
    [data-content="02_02_03"] .smartdam .gr_5 .w_box{width: calc(100% - 30rem); box-sizing: border-box;}
    [data-content="02_02_03"] .smartdam .gr_5 .g_box{width: 30rem;}
    [data-content="02_02_03"] .smartdam .gr_5 .g_box img{width: 100%;}
    [data-content="02_02_03"] .smartdam .t_box .b_box .photo_div2 >li .imgs:before{right: -2rem;}
}
@media screen and (max-width:1200px){
    [data-content="02_02_03"] .smartdam .w_box,
    [data-content="02_02_03"] .smartdam .b_box{padding: 2.5rem;}
    
    [data-content="02_02_03"] .smartdam .gr_5{flex-direction: column;}
    [data-content="02_02_03"] .smartdam .gr_5 .w_box,
    [data-content="02_02_03"] .smartdam .gr_5 .g_box{width: 100%;}
    [data-content="02_02_03"] .smartdam .gr_5 .g_box img{display: block; width: 30rem; max-width: 100%; margin: 0 auto;}
}
@media screen and (max-width:1024px){
    [data-content="02_02_03"] .smartdam .t_box{flex-wrap: wrap;}
    [data-content="02_02_03"] .smartdam .gr_4{gap: 2.5rem;}
    [data-content="02_02_03"] .smartdam .t_box{overflow: hidden; border-radius: 1.4rem;}
    [data-content="02_02_03"] .smartdam .t_box >div{border-radius: 0;}
    [data-content="02_02_03"] .smartdam .gr_2 .move img{width: auto; max-width: 150rem;}
}
@media screen and (max-width:840px){
    [data-content="02_02_03"] .smartdam .gr .move{overflow-x: hidden; flex-wrap: wrap; gap: 1.8rem;}
    [data-content="02_02_03"] .smartdam .gr .gr1{flex: auto; width: 100%;}
    [data-content="02_02_03"] .smartdam .gr .gr1 >div{gap: 1.5rem;}
    [data-content="02_02_03"] .smartdam .gr .gr1 >div >div span{width: 100%;}
    [data-content="02_02_03"] .smartdam .gr .gr1 >div >div span img{width: 100%;}
    [data-content="02_02_03"] .smartdam .gr .gr2{width: 100%;}
    [data-content="02_02_03"] .smartdam .gr .gr2 strong{flex-direction: row; gap: 0.5rem; height: auto; padding: 1.25rem; font-size: 1.8rem; border-radius: 1rem;}
    [data-content="02_02_03"] .smartdam .gr .gr3{flex: auto; width: 100%;}
    [data-content="02_02_03"] .smartdam .gr .gr3 img{display: block; width: 100%;}
    [data-content="02_02_03"] .smartdam .gr_2 .move img{width: auto; max-width: 140rem;}
    [data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul li p{padding: 1rem 1.5rem;}
}
@media screen and (max-width:740px){
    [data-content="02_02_03"] .smartdam .gr_4 .gr2 .in{flex-direction: column;}
    [data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul{flex-direction: row; flex-wrap: wrap;}
    [data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul li{width: calc((100% - 0.8rem - 0.8rem) / 3);}
}
@media screen and (max-width:640px){
    [data-content="02_02_03"] .smartdam .w_box, [data-content="02_02_03"] .smartdam .b_box{padding: 2rem;}
    [data-content="02_02_03"] .smartdam .gr_4{gap: 2rem;}
}
@media screen and (max-width:540px){
    [data-content="02_02_03"] .smartdam .gr_4 .gr2 .in ul li{width: calc((100% - 0.8rem) / 2);}
    [data-content="02_02_03"] .smartdam  .photo_div4 li{width:100%}
}