/* main visual area */

/* .visual{position:relative; left:50%; width: 2000px; height: 300px; margin-left:-1000px; background:#0a1f2d; overflow: hidden;}
#content{width: 1200px; padding: 0 30px; margin: 0 auto 150px;}
#content h2{font-size: 3em; margin: 100px 0 50px;}
#content .summary{font-size: 1.5em; margin-bottom: 100px;} */


/* 각각의 페이지의 내용 컨텐츠 영역 - 고객지원 > 공지사항 */

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;}


/* form 요소 기본설정 */
.photo_bbs_wrap input,
.photo_bbs_wrap textarea,
.photo_bbs_wrap button,
.photo_bbs_wrap select{font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 1.125rem; color:#333; vertical-align: middle; outline: 0;}

.photo_bbs_wrap input,
.photo_bbs_wrap textarea,
.photo_bbs_wrap select{box-sizing:border-box; border:1px solid #ccc;}

.photo_bbs_wrap input,
.photo_bbs_wrap select{height: 44px; padding-left:10px;}

.photo_bbs_wrap textarea{padding:10px;}

.photo_bbs_wrap button{border:0 none; padding:0; margin: 0; cursor: pointer;}

.photo_bbs_wrap input[type='file']{padding:5px; cursor: pointer;}

.photo_bbs_wrap input::placeholder,
.photo_bbs_wrap textarea::placeholder{color:rgba(0,0,0,0.4);}


.photo_bbs_wrap{font-size:1.125rem; margin-bottom: 100px;}

/* 게시판 리스트 상단 */
.photo_bbs_wrap .bbs_sort{margin:0 0 20px;}
.photo_bbs_wrap .bbs_sort::after{content:''; display: block; clear: both;}
.photo_bbs_wrap .bbs_sort .total{float:left; line-height: 44px; padding-left: 30px;}
.photo_bbs_wrap .bbs_sort .total b{font-weight:700;}
.photo_bbs_wrap .bbs_sort .scale{float:right; width:120px;}
.photo_bbs_wrap .bbs_sort .lst_style{float:right; margin-right:5px; border:1px solid #ccc; box-sizing:border-box;}
.photo_bbs_wrap .bbs_sort .lst_style::after{content:''; display: block; clear: both;}
.photo_bbs_wrap .bbs_sort .lst_style li{float:left; box-sizing:border-box; text-indent:-9999%; overflow: hidden; transition:all .3s;}
.photo_bbs_wrap .bbs_sort .lst_style li:hover{background:#f2f2f2;}
.photo_bbs_wrap .bbs_sort .lst_style li + li{border-left:1px solid #eee;}
.photo_bbs_wrap .bbs_sort .lst_style li a{display:block; width:44px; height: 42px; opacity: .3;}
.photo_bbs_wrap .bbs_sort .lst_style li:nth-child(1) a{background:url(../images/lst_style1.png) 50% 50% no-repeat;}
.photo_bbs_wrap .bbs_sort .lst_style li:nth-child(2) a{background:url(../images/lst_style2.png) 50% 50% no-repeat;}
.photo_bbs_wrap .bbs_sort .lst_style li.active a{opacity:1;}
.photo_bbs_wrap .bbs_sort .lst_style li:nth-child(1).active a{background-image:url(../images/lst_style1_on.png);}
.photo_bbs_wrap .bbs_sort .lst_style li:nth-child(2).active a{background-image:url(../images/lst_style2_on.png);}


/******************************************** 게시판 리스트 ********************************************/
.photo_bbs_wrap .bbs_lst{border-top:1px solid #999;}
.photo_bbs_wrap .bbs_lst .lst_cont li{border-bottom:1px solid #ddd; padding:30px 0; transition:all .3s;}
.photo_bbs_wrap .bbs_lst .lst_cont li a{display:block; overflow: hidden;}
.photo_bbs_wrap .bbs_lst .lst_cont li .img{float:left; position:relative; width: 430px; padding-bottom:18%; box-shadow:inset 0 0 1px rgba(0,0,0,0.15); overflow: hidden;}
.photo_bbs_wrap .bbs_lst .lst_cont li .img img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:100%; min-width:100%; min-height:100%; transition:all .3s;}
.photo_bbs_wrap .bbs_lst .lst_cont li:hover .img img{transform:translate(-50%, -50%) scale(1.1);}
.photo_bbs_wrap .bbs_lst .lst_cont li .cont{margin-left:470px; padding:.5rem 0 0;}
.photo_bbs_wrap .bbs_lst .lst_cont li .cont > i{display:inline-block; font-style: normal; font-size:1rem; color:#999;}
.photo_bbs_wrap .bbs_lst .lst_cont li .cont > i + i{margin-left:10px;}
.photo_bbs_wrap .bbs_lst .lst_cont li .cont > i::before{content:'#';}
.photo_bbs_wrap .bbs_lst .lst_cont li .cont strong{display:block; font-size:1.5rem; white-space:nowrap; text-overflow: ellipsis; overflow: hidden; margin:0.3rem 0 0;}

.photo_bbs_wrap .bbs_lst .lst_cont li .cont p{height:50px; font-size:1rem; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin:1.25rem 0 2rem;}
.photo_bbs_wrap .bbs_lst .lst_cont li .cont span{color:#999; font-size:1rem;}
.photo_bbs_wrap .bbs_lst .lst_cont li .cont span + span::before{content:'/'; display:inline-block; padding:0 10px; color:#ddd;}
.photo_bbs_wrap .bbs_lst .lst_cont li .cont span i{font-size:.75rem; padding-right:2px;}
.photo_bbs_wrap .bbs_lst .lst_cont li .cont span i i{font-size:0; text-indent:-9999%;}
    /* hover */
.photo_bbs_wrap .bbs_lst .lst_cont li:hover{background:#f7f7f7;}
.photo_bbs_wrap .bbs_lst .lst_cont li:hover .cont strong{color:#005793;}



/******************************************** 게시판 리스트 box ********************************************/
.photo_bbs_wrap .bbs_lst.box{border-top:0 none;}
.photo_bbs_wrap .bbs_lst.box .lst_cont{}
.photo_bbs_wrap .bbs_lst.box .lst_cont::after{content:''; display: block; clear: both;}
.photo_bbs_wrap .bbs_lst.box .lst_cont li{float:left; width:calc(50% - 40px); margin:80px 0 0 80px; padding:0; border:0 none; box-sizing:border-box;}
.photo_bbs_wrap .bbs_lst.box .lst_cont li:nth-child(-n+2){margin-top:0;}
.photo_bbs_wrap .bbs_lst.box .lst_cont li:nth-child(2n+1){margin-left:0}
.photo_bbs_wrap .bbs_lst.box .lst_cont li .img{width:100%; float:none; padding-bottom:48%;}
.photo_bbs_wrap .bbs_lst.box .lst_cont li .cont{margin:0; padding:25px; border-width:0 1px 1px; border-style:solid; border-color:#ddd;}
.photo_bbs_wrap .bbs_lst.box .lst_cont li .cont strong{margin:0;}








/* 페이지 */
.photo_bbs_wrap .page_num{text-align:center; margin:50px 0 0;}
.photo_bbs_wrap .page_num span{display:inline-block; width: 34px; height: 34px; line-height:34px; color:#888; text-align:center; box-sizing:border-box; vertical-align: top; font-size:1rem;}
.photo_bbs_wrap .page_num span a{display:block; transition:all .3s;}
.photo_bbs_wrap .page_num span a:hover{color:#005793;}
.photo_bbs_wrap .page_num span.active{background:#005793; color:#fff;}
.photo_bbs_wrap .page_num span.prev,
.photo_bbs_wrap .page_num span.next{font-size: 0; text-indent:-9999%; overflow: hidden; margin:0 5px;}
.photo_bbs_wrap .page_num span.prev{background:url(../images/page_prev.png) 50% 50% no-repeat;}
.photo_bbs_wrap .page_num span.next{background:url(../images/page_next.png) 50% 50% no-repeat;}

/* 버튼 */
.photo_bbs_wrap .btn_wrap{text-align:right; margin:0 -2px}
.photo_bbs_wrap .btn_wrap a,
.photo_bbs_wrap .btn_wrap button{display: inline-block; height:44px; line-height:42px; margin:0 2px; vertical-align:top; padding:0 25px; background:transparent; color:#888; border:1px solid #ddd; box-sizing:border-box; cursor:pointer; transition:all .3s; font-size:1rem;}
.photo_bbs_wrap .btn_wrap a:hover,
.photo_bbs_wrap .btn_wrap button:hover{border-color:#333; color:#333;}
.photo_bbs_wrap .btn_wrap .active{border-color:#005793; color:#005793;}
.photo_bbs_wrap .btn_wrap .active:hover{background:#005793; color:#fff;}


/* 검색 */
.photo_bbs_wrap .bbs_search{margin:50px 0 0; text-align:center; background:#f7f7f7; padding:25px 0;}

.photo_bbs_wrap .bbs_search select{width: 120px;}
.photo_bbs_wrap .bbs_search input{width: 250px;}
.photo_bbs_wrap .bbs_search button{width:80px; height:44px; background:#005793; color:#fff; transition:all .3s;}
.photo_bbs_wrap .bbs_search button:hover{background:#00a5e5;}












/******************************** view **********************************/
.photo_bbs_wrap .bbs_view_ttl{border-top:1px solid #999;}
.photo_bbs_wrap .bbs_view_ttl li{border-bottom:1px solid #ddd; padding:20px; text-align:center;}
.photo_bbs_wrap .bbs_view_ttl li:first-child{background:#f2f2f2;}
.photo_bbs_wrap .bbs_view_ttl li:first-child i{display:inline-block; font-style: normal; font-size:1rem; color:#999;}
.photo_bbs_wrap .bbs_view_ttl li:first-child i + i{margin-left:10px;}
.photo_bbs_wrap .bbs_view_ttl li:first-child i::before{content:'#';}
.photo_bbs_wrap .bbs_view_ttl li strong{display: block; font-weight:700; font-size:2rem;}

.photo_bbs_wrap .bbs_view_ttl li span{display:inline-block; color:#888;}
.photo_bbs_wrap .bbs_view_ttl li span + span::before{content:'/'; display:inline-block; padding:0 10px; color:#ddd;}
.photo_bbs_wrap .bbs_view_ttl li span i{font-size:.75rem; padding-right:2px;}
.photo_bbs_wrap .bbs_view_ttl li span i i{font-size:0; text-indent:-9999%;}

.photo_bbs_wrap .bbs_view_cont{min-height:200px; padding:20px; text-align:justify; overflow: hidden;}
.photo_bbs_wrap .bbs_view_cont .img{text-align:center; margin:0 0 20px;}
.photo_bbs_wrap .bbs_view_cont img{max-width: 100%;}
.photo_bbs_wrap .bbs_view_cont::after{content:''; display: block; clear: both;}

.photo_bbs_wrap .bbs_view_cont + .btn_wrap{border-top:1px solid #ddd; padding:20px 0 0;}












/******************************** write **********************************/
.photo_bbs_wrap .bbs_write_top{border-top:1px solid #999;}
.photo_bbs_wrap .bbs_write_top li{border-bottom:1px solid #ddd;}
.photo_bbs_wrap .bbs_write_top li dl{background:#f2f2f2;}
.photo_bbs_wrap .bbs_write_top li dl::after{content:''; display: block; clear: both;}
.photo_bbs_wrap .bbs_write_top li dl dt,
.photo_bbs_wrap .bbs_write_top li dl dd{padding:20px;}
.photo_bbs_wrap .bbs_write_top li dl dt{float:left;}
.photo_bbs_wrap .bbs_write_top li dl dt label{line-height:44px;}
.photo_bbs_wrap .bbs_write_top li dl dd{margin-left:15%; background:#fff; overflow: hidden;}
.photo_bbs_wrap .bbs_write_top li dl dd input[type='file']{float:left;}
.photo_bbs_wrap .bbs_write_top li dl dd select{width:200px}
.photo_bbs_wrap .bbs_write_top li dl dd select + label + input{width:250px}
.photo_bbs_wrap .bbs_write_top li dl dd .delete_ok{float:left; margin-left:15px; line-height:44px;}
.photo_bbs_wrap .bbs_write_top li dl dd .delete_ok .check{display:inline-block; margin:0 0 0 15px;}

.photo_bbs_wrap .bbs_write_top #subject{width:100%;}
.photo_bbs_wrap .bbs_write_top textarea{width: 100%; height: 300px;}
.photo_bbs_wrap .bbs_write_top #content{width:100%;}

.photo_bbs_wrap .bbs_write_top + .btn_wrap{padding:20px 0 0;}

/* checkbox */
.photo_bbs_wrap .bbs_write_top .check{position:relative; padding-left:35px; line-height:25px; margin:0 0 10px;}
.photo_bbs_wrap .bbs_write_top .check input[type=checkbox] + label::before {
    position:absolute; left:0; top: 0;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: transparent;
    border: 2px solid #ccc;
    box-sizing:border-box;
    content: '';
}
.photo_bbs_wrap .bbs_write_top .check input[type=checkbox] {display: none;}
.photo_bbs_wrap .bbs_write_top .check input[type=checkbox] + label {cursor: pointer; line-height:25px;}
.photo_bbs_wrap .bbs_write_top .check input[type=checkbox]:checked + label::before {
    background:url(../images/checked.png) 50% 50% no-repeat #005793; border-color: #005793;
}




/* 헤더 영역 */
#headerArea{width: 100%; height: 107px;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, .7); transition: background-color .5s ease-out; backdrop-filter: blur(5px);}
  #headerArea .header_inner{width: 1400px; margin: 0 auto; display: flex; justify-content: space-between;}
  #headerArea .logo{margin-top: 25px;}
  #headerArea .logo a{width: 197px; height: 75px;
      overflow: hidden;}
  
   
  #gnb{clear:both;width:1000px; height: 100px;} 
  
  #gnb ul.dropdownmenu{float:left; width: 100%; justify-content: space-between;}
  #gnb ul.dropdownmenu li.menu{position:relative; float:left; width:20%; height: 100px;}
  #gnb ul.dropdownmenu li.menu::after{content: ''; display: block; width: 100%; height: 2px;
      background: #6bb0f0; position: absolute; left:0; bottom: 0; transform: scaleX(0); transition: all .5s ease-out;}
  #gnb ul.dropdownmenu li.menu:hover::after{content: ''; transform: scaleX(1);} 
  #gnb ul.dropdownmenu li a.depth1{display:block; padding: 45px 0;
        text-align: center; transition: all .5s; }
        
  
  
    /* 2depth */
  #gnb ul.dropdownmenu li ul{width:100%; position:absolute; top: 100px; left:0; padding: 10px 0; 
      line-height:2em; height: 140px; display: none;}
  
  #gnb ul.dropdownmenu li ul li{ text-align:center; font-weight:bold;}
  #gnb ul li ul li a{display:block;  color:#333; font-weight: 500; transition: all .5s;}
  #gnb ul li ul li a:hover{color:#fff; background: #6bb0f0; border-radius: 15px;}
  
  
       
        
  #headerArea .top_menu{width: 150px; display: flex;}
  #headerArea .top_menu li{width: 50%; text-align: center;}
  #headerArea .top_menu li a{margin: 50px 0;}
/* #headerArea .top_menu li:hover a{background: #004e97; color: #fff; border-radius: 10px; transition: all .5s ease-out;} */

  
  
  /* 푸터 영역 */
  #footerArea{width: 100%; color: #fff; background: #004e97;}
  
  #footerArea .footer_inner{width: 1400px; margin: 0 auto; display: flex;  padding: 50px 0; }
  #footerArea img{margin-right:50px ;}
  #footerArea .bottom_menu{display: flex; gap: 50px; margin:10px 0 20px;}
  #footerArea .bottom_menu li a, .sns li a{color: #fff;}
  #footerArea address{font-size: .95rem; line-height: 1.5rem; margin-bottom: 10px; }
  #footerArea .footer_right{margin-left: 480px;}
  
  
  #footerArea .sns{width:150px ;display: flex; justify-content: space-between;}
  #footerArea .sns i{font-size: 2.5rem;}
  #footerArea .sns li:hover i{ color: #ccc;}
  
  #footerArea .go_to_top{width: 80px; height: 80px; background: url(../images/Top.png); box-shadow: 0 0 15px 1px rgba(0, 0, 0, .3);
    position: fixed; left: 50%; margin-left: 750px; bottom: 150px; 
    border-radius: 50%; z-index: 50; display: none;}
  
  #footerArea .go_to_top span{display: none; text-align: center; color: #fff; font-size: 1.2rem;
    font-weight: bold; margin-top: 25px;}
  #footerArea .go_to_top:hover {background:steelblue; transition: all .4s ease-out; }
  
  
  /* Family site */
  
  #footerArea .select{width: 150px; background: #fff; border-radius: 20px; margin: 10px 0 15px;}
  #footerArea .select a{padding: 10px 0; text-align: center; }
  .select{width:150px;  background:#fff;
    position:relative;  margin:200px 0 0 50px; z-index: 20;}
  .select .arrow{ display:block; font-size:1em; padding: 10px 0;overflow: hidden; border-radius: 20px; border:1px solid #fff;
    text-align: center; transition: all 1s; }
  .select .arrow i{font-size:.8em ; color: red;}
  .select .arrow:hover{background: #000;color: #fff;  border:1px solid #ccc;}
  /* .select .arrow:hover span{color: #fff;} */
  
  
  .select .aList{ position:absolute; top:-185px; left:-1px; width:150px; border-radius: 20px; overflow: hidden;
    border:1px solid #ccc; display:none}
  .select .aList li{ line-height:1.5em; border-bottom:1px solid #ccc;}
  .select .aList li a{display:block;text-align: center; padding: 5px 0; transition: all .3s; background: #fff;}
  .select .aList li a:hover{ background: #333; color: #fff;}
  

/* 비쥬얼 공통 */
.visual{width: 2000px; height: 350px; background: red; position: relative; left: 50%; top: 0;
    transform: translateX(-50%); background-image: url(../../sub5/common/images/1.jpg);}
.visual strong{font-size: 30px; color: #fff; position: absolute; width: 100%;
    text-align: center; top: 200px; left: 0;}



/* 서브 네비 공통 */
.sub_nav{width: 100%; border-bottom: 1px solid #ccc;}
.sub_nav ul{width: 1200px; margin: 0 auto;  display: flex; }
.sub_nav ul li{width: 25%; text-align: center; box-sizing: border-box; margin: 0 auto;}
.sub_nav ul li a{font-size: 1.2rem; font-weight: bold; padding: 18px 0;}

/* .sub_nav ul li a:hover{color: #037AFE; border-bottom: 3px solid #037AFE;}
.sub_nav ul li a.current{color: #037AFE; border-bottom: 3px solid #037AFE;} */

.sub_nav ul li a:hover{color: #333; border-bottom: 3px solid #00a484;}
.sub_nav ul li a.current{color: #004e97; border-bottom: 3px solid #00a484;}

/* .sub_nav ul li a.current{background-color: skyblue;} */

/* title_area */
#content{width: 1400px; margin: 0 auto; border: 10px solid #FFF7F7;
    border-top: none;
    border-bottom: none;}
#content .title_area{width: 1400px; margin: 0 auto;  position: relative; overflow: hidden; padding-bottom: 100px;}
#content .title_area .line_map{position: absolute; color: #666; right: 15px; top: 20px;}
#content .title_area h2{font-size: 50px; font-weight: bold; text-align: center; margin: 150px 0 120px;}
#content .title_area h2::after{content: ''; height: 100px; width: 1px; background: #ccc; position: absolute;
  left: 50%; transform: translate(-50%); top: 250px; transition: all 1s ease-out; transform: scaleX(2); transition-delay: 1s;
  }
#content .title_area p{font-size: 1.2rem; text-align: center;}
#content .logo_text{position: relative; margin-bottom: 50px;}
#content .logo_text img{position: absolute; width: 100px; left: 50%; transform: translate(-50%);
    bottom: 5px; z-index: -1;}
#content .logo_text h4{font-size: 42px; text-align: center;}


/* 다크모드 */
.dark-mode .sub_nav ul li a.current{color: yellowgreen;}
.dark-mode .sub_nav ul li a{color: #fff;}
.dark-mode #content .title_area .line_map{color: #fff;}