/*
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Nanum Myeongjo', serif;
font-family: 'Nanum Pen Script', cursive;
font-family: 'Noto Sans KR', sans-serif;
*/

@keyframes downY{
    0%{transform:translateY(-300px)}
    100%{transform:translateY(0px)}
}
@keyframes upY{
    0%{transform:translateY(300px)}
    100%{transform:translateY(0px)}
}
@keyframes iconflip{
    0%{transform: rotateY(0deg)}
    50%{transform:rotateY(-100deg)}
    100%{transform: rotateY(0deg)}
}


/*사용자정의데이터속성 data-aos-duration="1000"*/
div.step-show-up[data-my-duration="200"] {animation: upY 0.2s linear 1 alternate; }
div.step-show-up[data-my-duration="400"] {animation: upY 0.4s linear 1 alternate; }
div.step-show-up[data-my-duration="600"] {animation: upY 0.6s linear 1 alternate; }
div.step-show-up[data-my-duration="800"] {animation: upY 0.8s linear 1 alternate; }
div.step-show-up[data-my-duration="1000"] {animation: upY 1s linear 1 alternate; }
div.step-show-down[data-my-duration="200"] {animation: downY 0.2s linear 1 alternate; }
div.step-show-down[data-my-duration="400"] {animation: downY 0.4s linear 1 alternate; }
div.step-show-down[data-my-duration="600"] {animation: downY 0.6s linear 1 alternate; }
div.step-show-down[data-my-duration="800"] {animation: downY 0.8s linear 1 alternate; }
div.step-show-down[data-my-duration="1000"] {animation: downY 1s linear 1 alternate; }

/*show wrap 공통박스(츠나미)*/
.show-wrap > div { opacity:0; transition:0.5s; }
.show-wrap > div.show  { opacity:1; }


/* *************************** 메인페이지 *************************** */
/*공통타이틀*/
.main-tit { font-size:48px; text-align:center; }
.main-sub-tit { font-size:18px; text-align:center; font-weight:400; margin-top:30px; }
/*section01 슬라이딩(미닫이)박스(츠나미)*/
.section01 { margin:150px 0 250px 0; }
.section01 .main-sub-tit { margin:30px 0 170px 0; }
.sliding-door-wrap { width:100%; position:relative; overflow:hidden; }
.section01.sliding-door-wrap > div { height:345px; opacity:0; transition:0.5s; position:relative; }
.sliding-left-box { width:64%; height:100%; float:left; margin-left:-500px; }
.sliding-right-box { width:36%; height:100%; float:right; margin-right:-500px; }
.section01 .sliding-right-box { padding-left:80px; }
.sliding-door-wrap div.show { opacity:1 !important; margin:0 !important; }
/*left*/
.set1-boxL { width:100%; max-width:945px; height:100%; border-radius:10px; float:right; overflow:hidden; }
.set1-boxL > div { width:50%; height:100%; float:left; }
.set1-imgBox {  background:url('../img/set1_imgBG.jpg') center center/ cover no-repeat; }
.set1-strBox { border:1px solid #ccc; border-radius:0 10px 10px 0; padding:100px 60px; font-size:18px; line-height:1.3; }
.set1-strBox > a { display:block; position:relative; color:#111; font-size:14px; font-weight:600; margin-top:30px; transition:0.3s; }
.set1-strBox > a > i { width:25px; height:25px; line-height:25px; border-radius:15px; background:#222; color:#ddd; text-align:center; margin-left:40px; transition:0.3s; }
.set1-strBox > a:after { content:""; width:40px; height:1px; background:#ddd; display:block; position:absolute; top:12px; left:96px; }
.set1-strBox > a:hover { color:#cb1a1a; }
.set1-strBox > a:hover > i { background:#cb1a1a; }
/*right*/
.set1-boxR { width:100%; max-width:330px; height:100%; background:linear-gradient(135deg, #048bc5 0%,#68c3c8 100%); border-radius:10px; padding: 50px 40px; color:#fff; }
.telNumber { font-size:35px; text-align:center; }
.time-notice { padding:30px 0; }
.time-notice.counsel { border-bottom:1px solid #82cbd8; }
.time-notice > h2, .time-notice > h3 { font-weight:300; }
.time-notice > h2 { font-size:22px; }
.time-notice > h3 { display:flex; align-items:center; font-size:18px; margin-top:10px; }
.time-notice > h3 > i { font-size:25px; margin-right:5px; }

/*section02 DIFFERENT(츠나미)*/
.section02 { width:100%; height:510px; background:url('../img/set2_imgBG.jpg') center center/ cover no-repeat; overflow:hidden; padding:120px 0; }
.section02 .main-tit, .section02 .main-sub-tit { color:#fff; }
.different-wrap { width:100%; max-width:1400px; display:flex; justify-content:space-between; flex-wrap:wrap; margin:80px auto 0 auto; color:#fff; }
.different-box { width:25%; text-align:center; }
.different-box > h3 { font-weight:400; font-size:20px; }
.countLimiter { font-size:58px; }


/*section03 계단형 아이콘 박스(츠나미)*/
.section03 { width:100%; padding:120px 0; background:#f2f4f8;  }
.step-list-wrap { max-width: 1200px; margin:0 auto; display:flex; justify-content: space-between; flex-wrap: wrap; }
.section03 h2.main-sub-tit { margin-bottom:50px; }
.step-list-wrap > div { width:22%; height:264px; background:#fff; opacity:0; transition: opacity ease-in-out 0.5s; border-radius:10px; text-align:center; padding:50px 30px; transition:0.5s; }
div.step-show-up, div.step-show-down { opacity:1; }
.step-list-box .icon-radius { max-width:90px; margin:0 auto; transition:0.5s; }
.step-list-box .icon-radius > img { width:100%; }
.step-list-box p { font-size:17px; text-align:center; font-weight:500; padding:25px 0; }
.step-list-box:hover {  margin-top:-10px; }
.step-list-box:hover .icon-radius { animation: iconflip 0.4s linear 1 alternate;  }


/*section04 (츠나미)*/
.section04 { max-width:1400px; margin:160px auto; }
.section04 > div  { margin-top:300px; }
.section04 > div.show  { margin-top:0; }
.sec4_tit > h1 { font-family: 'Nanum Myeongjo', serif; font-size:48px; }
.sec4_tit > p { font-size:18px; margin:20px 0 100px 0; }
.section04 .aticle_img_box { max-width:1080px; margin:0 auto; overflow:hidden; position:relative; }
.section04 .aticle_img_box img { width:100%; border-radius:20px; }
.section04 .aticle_box { position:absolute; bottom:-40px; right:0; padding:50px 60px; background:#fff; }

/*section05 (츠나미)*/
.section05 { padding:100px 0 200px 0; }
.section05.sliding-door-wrap > div { width:48%; height:100%; opacity:0; transition:0.5s; position:relative; }
.section05 .sliding-left-box { float:left; margin-left:-500px; }
.section05 .sliding-right-box { float:right; margin-right:-500px; }
.section05 .sec5-boxL { max-width:610px; float:right; }
.section05 .sec5-boxL .aticle_box p { float:left; margin-bottom:50px; }
.section05 .sec5-boxL .aticle_box p:nth-child(2) { width:31%; margin-right:50px; }
.section05 .sec5-boxL .aticle_box p:nth-child(3) { width:40%; }
.section05 .sec5-boxR { max-width:610px; margin-top:50px; }
.section05 .sec5-boxR .aticle_box { max-width:330px; background:#fff; position:absolute; bottom:0; left:0; padding:60px 60px 70px 20px; }
.section05 .sec5-boxR .aticle_box p { max-width:250px; }
.section05 .sec5-boxL img, .section05 .sec5-boxR img { width:100%; border-radius:20px; }

/*공통article*/
.aticle_box h3 { font-size:32px; }
.aticle_box p { font-size:17px; margin-top:20px; }


/*section06 이미지게시판 echo (츠나미)*/
.section06 { background:#222; }
.section06.show-wrap { padding:150px 0; }
.section06.show-wrap > div { margin-top:300px;}
.section06.show-wrap > div.show  { margin-top:0; }
.bord-gallery-call { max-width:1400px; margin:0 auto; }
.bord-gallery-call > h2 { font-size:30px; text-align:center; color:#fff; }
.bord-gallery-call > p { font-size:17px; text-align:center; margin:30px 0 0 0; color:#fff; }
.bord-gallery-call > p::after { width:50px; height:4px; display:block; margin:40px auto 100px auto; background:#555; content:""; }
.section06 .gallery-call .sm-pic-lt { margin-bottom:50px; }
.section06 .gallery-call .sm-pic-lt a { color:#fff; }
.section06 .gallery-call .lt_content { display:none; }
.gallery-call .lt_img > img { border-radius:10px; }


/* ========== 메인페이지 반응형(츠나미) ========== */
@media screen and (max-width: 1024px) {

/*공통타이틀*/
.main-tit { font-size:28px; }
.main-sub-tit { margin-top:20px; }


/*section01*/
.section01 { margin:100px 0; }
.section01 .main-sub-tit  { margin:20px 0 100px 0; }
.section01.sliding-door-wrap > div { width:100%; height:auto; float:inherit; }
.set1-boxL { padding:0 20px; overflow:inherit; float:inherit; border-radius:inherit; }
.set1-boxL > div { width:100%; float:inherit; }
.set1-boxL .set1-imgBox { height:300px; border-radius:10px 10px 0 0; }
.set1-strBox { border-radius: 0 0 10px 10px; padding:40px 30px; font-size:15px; }
.section01 .sliding-right-box { padding:20px 20px; }
.set1-boxR { max-width:100%; padding:30px 20px 0 20px; }

/*section02*/
.section02 { height:auto; padding:100px 20px; }
.different-wrap { margin-top:50px;  }
.different-box { width:50%; margin-top:20px; }
.different-box > h3 { font-size:18px; }
.countLimiter { font-size:35px; }


/*section03*/
.section03 { padding:100px 20px; }
.step-list-wrap > div { width:100%; margin-bottom:20px; }

/*section04*/
.section04 { margin:100px 0 50px 0; padding:0 20px; }
.sec4_tit > h1 { font-size:30px; }
.sec4_tit > p { margin-bottom:50px; }
.section04 .aticle_img_box { overflow:inherit; }
.section04 .aticle_img_box img { border-radius:20px 20px 0 0; }
.section04 .aticle_box { position:relative; padding:40px 30px; bottom:inherit; border:1px solid #ccc; border-radius:0 0 20px 20px; }

/*section05*/
.section05 { padding:0 20px; margin-bottom:100px; }
.section05.sliding-door-wrap div { width:100%; float:inherit !important; }
.sec5-boxL .aticle_box { border:1px solid #ccc; border-radius:20px 20px 0 0 ; padding:40px 30px; }
.section05 .sec5-boxL .aticle_box p { float:inherit; width:100% !important; margin:20px 0 0 0; }
.section05 .sec5-boxL img { border-radius:0 0 20px 20px; }
.section05 .sec5-boxR img { border-radius:20px 20px 0 0; }
.section05 .sec5-boxR .aticle_box { max-width:100%; position:relative; padding:40px 30px; border:1px solid #ccc; border-radius:0 0 20px 20px; }
.section05 .sec5-boxR .aticle_box p { max-width:100%; }

.aticle_box h3 { font-size:22px; text-align:center; }
.aticle_box p { font-size:15px; text-align:center; }

/*section06*/
.section06.show-wrap { padding:100px 20px; }
.bord-gallery-call > p::after { margin:40px auto 60px auto; }
.section06 .gallery-call .sm-pic-lt { margin-bottom:0; }
.section06 .sm-pic-lt div.gallery_li { margin:0 0 20px 0; border:0; }
.gallery-call > div:last-child { display:none; } 


}


/* *************************** 서브페이지 *************************** */
/*서브공통(츠나미)*/
h1#container_title { margin-top:100px; font-size:40px; text-align:center; font-weight:600; }
h2.container-sub-title { text-align:center; font-weight:400; font-size:16px; margin-top:10px; }
.sub-content { max-width:1400px; margin:80px auto; font-size:17px; }

/*인사말(츠나미)*/
.greet_top_img { width:100%; height:550px; background:url('../img/greet_img_top.jpg') top center / cover no-repeat; margin:50px 0 100px 0; }
.greet_article_box { max-width:1240px; padding:0 20px; margin:0 auto 100px auto; }
.article_center { text-align:center; } 
.con_article_box.article_center p { color:#777; }
.con_article_box.article_center h2 { font-size:30px; margin-top:10px; }
.greet_article_box img { width:100%; }

/*연혁(츠나미)*/
.history_wrap { max-width:1200px; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; margin:0 auto; }
.history_wrap:before { content:''; width:10px; height:100%; background:#eee; position:absolute; top:0; left:50%; margin-left:-5px; }
.history_box { width:42%; position:relative; }
.history_box:before { content:''; width:50px; height:1px; background:#999; position:absolute; top:22px; right:-70px; }
.history_box:nth-child(2n) { margin:150px 0  0 0; }
.history_box:nth-child(2n):before { left:-70px; right:0; }
.history_box h1 { margin-bottom:20px; font-size:40px; color:#999; }
.history_box p { line-height:1.5; }
.history_box:nth-child(2n+1) h1, .history_box:nth-child(2n+1) p { text-align:right; }
.history_box img { width:100%; margin-top:40px; }

/*조직도(츠나미)*/
.organization_top_img { width:100%; height:450px; background:url('../img/organization_img_top.jpg') top center / cover no-repeat; margin:50px 0 100px 0;  }
.organization_aticle { margin-bottom:100px; }
.organization_img_box img { width:100%; }
.organization_img_box img.or_m { display:none; }

/*주요사업분야(츠나미)*/
.img_box_b, .business_sec01, .business_sec03 { max-width:1200px; margin:100px auto 150px; overflow:hidden; clear:both; }
.img_box_b img { width:100%; }
.img_box_b img.busi_m { display:none; }


.business_sec01 > div { width:50%; float:left; }
.business_sec01 > div:last-child h3 { margin:120px 0 10px; }
.business_sec01 > div:last-child p { line-height:1.5; }
.business_sec01 > div:last-child ul { margin:50px 0; line-height:2; list-style:disc; padding-left:20px; font-weight:500; }

.business_sec02 h2, .business_sec02 p { text-align:center; margin-bottom:50px; }


.business_sec03 { border-top:1px solid #ccc; padding-top:100px; overflow:inherit; }
.business_sec03 > h2 { max-width:250px; line-height:60px; text-align:center; margin:-130px auto 0; background:#4dc4a4; color:#fff; border-radius:100px; }
.business_sec03 > h3 { margin:50px 0 10px; }


.business_sec03 ul { list-style:disc; padding-left:20px; }
.business_sec03 ul li { line-height:1.6; }
.business_sec03 li ol { padding-left:20px; }
.business_sec03 img { width:100%; max-width:330px; display:block; margin:50px auto 0; }

.coral { color:#e5004f; }


/* 오시는길(츠나미)*/
#daumRoughmapContainer1697087553221 { width:100% !important; max-width:1400px !important; }
.map_info_wrap { display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:50px; }
.map_info_wrap > div { width:49%; line-height:70px; border:1px solid #bfbfbf; border-radius:10px; background:#f4f4f4; text-align:center; margin-bottom:20px; }
.map_info_wrap > div.map_address { width:100%; background:#fff; }

/*지능형영상분석시스템(츠나미)*/
.solution_wrap { max-width:1200px; margin:0 auto; line-height:1.6; }
.solution_wrap img { width:100%; }
.solution_top_img { width:100%; margin:70px 0; }
.solution_common_box { clear:both; padding:60px 0 0 0; overflow:hidden; }
.align_L > div { float:left; }
.align_R > div { float:right; }
.img_box_s img { max-width:400px; }
.article_box_s { max-width:800px; padding-left:60px; }
.article_box_s > h2 { font-size:20px; color:#aaa; font-weight:400; margin-top:60px; }
.article_box_s > h1 { font-size:25px; margin-bottom:20px; }
.align_R .article_box_s { padding:0 60px 0 0; }
.align_R .article_box_s h1, .align_R .article_box_s h2 { text-align:right; }
.storage_box { padding:50px; border:1px solid #ccc; margin:60px 0 0 0; }
.storage_box ul { display:flex; flex-wrap:wrap; justify-content:space-evenly; }
.storage_box ul li { width:23%; margin:1%; padding:30px; border:1px solid #ccc; border-radius:10px; text-align:center; }
.commom_iconbox { display:flex; flex-wrap:wrap; justify-content:center; margin:60px -0.5% 60px; }
.commom_iconbox li { width:19%; min-height:230px; margin:0 0.5%; border:2px solid #ccc; border-radius:10px; padding:35px; text-align:center; }
.commom_iconbox li i { width:70px; height:70px; background:#3da89e; border-radius:100px; line-height:70px; font-size:30px; color:#fff; }
.commom_iconbox li p { line-height:1.2; margin-top:30px; font-size:16px; }
.commom_img_last { display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 -10px 50px; }
.commom_img_last div { width:33.33%; padding:10px; }
.commom_img_last p { width:80%; margin:20px auto 0; text-align:center; }

.line_top { border-top:1px solid #ccc; margin:60px 0; }
.margin-bottom { margin-bottom:30px; }

/*영상감시시스템(츠나미)*/
.commom_img_last.add_watch div { width:20%; } 
.commom_img_last.add_watch p { font-weight:500; }
.commom_img_last.add_watch ul { list-style:disc; font-size:14px; padding-left:15px; line-height:1.3; }


/*게시판-HS전용 카메라탭(츠나미) */
ul.board_tab, .board_list_wrap { margin:0 auto; display:flex; justify-content:space-between; }
ul.board_tab { max-width:1400px; margin:100px auto 50px auto; }
ul.board_tab li { width:32%; line-height:80px; background:#eee; font-size:25px; font-weight:500; text-align:center; }
ul.board_tab li a { display:block; color:#999; }
ul.board_tab li.board_tab_active, ul.board_tab li a:hover { background:#dc000c; color:#fff; }
.board_list_wrap { max-width:600px; display:none; }
.board_list_wrap a { width:32%; line-height:45px; font-size:20px; border:2px solid #b5b5b5; border-radius:50px; color:#999; text-align:center; font-weight:500; }
.board_list_wrap a.board_list_active, .board_list_wrap a:hover { border-color:#dc000c; color:#222; }
li.empty_list, div.empty_li { display:none; }/*빈게시물출력메세지*/


/* ========== 서브페이지 반응형(츠나미) ========== */
@media screen and (max-width: 1024px) {
/*서브wrap(츠나미)*/
h1#container_title { font-size:30px; }

/*인사말(츠나미)*/
.greet_top_img { height:300px; margin:50px 0 70px 0; }
.greet_article_box { padding:0; margin:0 auto 80px auto; }

/*연혁(츠나미)*/
.history_wrap:before { display:none; }
.history_box, .history_box:nth-child(2n) { width:100%; margin:50px 0; }
.history_box:before { top:-20px; right:0; }
.history_box:nth-child(2n):before { left:0; }

/*조직도(츠나미)*/
.organization_top_img { height:300px; margin:50px 0 80px 0; }
.organization_aticle { margin-bottom:60px; }
.organization_img_box img.or_m { display:block; }
.organization_img_box img.or_o { display:none; }

/*주요사업분야(츠나미)*/
.img_box_b, .business_sec01, .business_sec03 { margin:70px 0 120px; }
.img_box_b img.busi_o { display:none; }
.img_box_b img.busi_m { display:block; margin-bottom:20px; }


.business_sec01 > div { width:100%; float:inherit; }
.business_sec01 img { width:100%; }


/* 오시는길(츠나미)*/
.map_info_wrap > div { width:100%; line-height:60px; margin-bottom:10px; }

/*지능형영상분석시스템(츠나미)*/
.solution_top_img { display:none; }
.storage_box { padding:40px 20px 20px 20px; }
.storage_box ul li { width:48%; font-size:15px; line-height:1; padding:10px 15px; }
.commom_iconbox { margin:50px -1% 50px; }
.commom_iconbox li { width:48%; min-height:100%; padding:30px 20px; margin:0 1% 10px; }
.commom_img_last { margin:0 -10px 50px; }
.commom_img_last div { width:100%; padding:10px; }
.commom_img_last p { width:90%; margin:10px auto 20px; }

/*영상감시시스템(츠나미)*/
.commom_img_last.add_watch div { width:50%; }

/*게시판-HS전용 카메라탭(츠나미) */
ul.board_tab, .board_list_wrap { padding:0 20px; }
ul.board_tab { margin:60px 0 30px 0; }
ul.board_tab li { line-height:50px; font-size:20px; }
.board_list_wrap a { line-height:30px; font-size:15px; }

}

@media screen and (max-width: 1200px) {
.sub-content { padding:0 20px; }
}