/****************** 메인 ******************/
input[type=text],
input[type=password] {width:100%; height: 36px; border:1px solid var(--color-6); border-radius:6px; padding:0 12px; font-size:13px; font-weight:500;}
input[type=text]::placeholder,
input[type=password]::placeholder{ color:var(--color-3);}
input[type=checkbox]{border:1px solid var(--color-6); border-radius:var(--round-xs); width:14px; height:14px; margin:0;}


/****** 게시판 + 로그인 섹션 ******/
.utility_section,
.partner_viewer_section { max-width: var(--site-con-w); display: flex; margin:0 auto;}

.utility_section , .partner_viewer_section, .service_section{
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/*** 게시판 ***/
.board_wrap {background-color: var(--color-wht); padding:var(--pd-base-mo);}
.tab_wrap .tab_content[aria-hidden=true]{display:none;}
.board_wrap .tab_btn_wrap{display: flex; box-sizing: border-box; margin:0 auto 20px; border:1px solid var(--color-6); border-radius: var(--round-md); overflow: hidden;}
.board_wrap .tab_btn_wrap .tab_btn{flex:1; transition: all ease-in .2s; cursor: pointer; color: #737373; font-weight: 600; box-sizing: border-box; border-right:1px solid var(--color-6);}
.board_wrap .tab_btn_wrap .tab_btn.on,
.board_wrap .tab_btn_wrap .tab_btn:hover{background-color: var(--color-point); color: var(--color-wht); border-color:var(--color-point);}
.board_wrap .tab_btn_wrap .more:hover img{transform: rotate(90deg); transition: all ease-in .3s;}

.board_wrap .board_list li:not(:last-child){border-bottom:1px solid var(--color-6);}
.board_wrap .board_list li a{display: flex; align-items: center; font-size: 15px; justify-content: space-between; padding:1.7rem 0; gap: 16px; color:var(--color-1); font-weight: 500;}
.board_wrap .board_list li a:hover span{text-decoration: underline;}
.board_wrap .board_list li a span{text-overflow: ellipsis; overflow: hidden; flex:1; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 1;}
.board_wrap .board_list li a time{color: #5B5B5B; font-size:14px; font-weight: 400; width:98px;}

/*** 로그인 ***/
.login_links_section .login_wrap {flex:1; box-sizing: border-box;}
.login_links_section .login_wrap .login_box{justify-content: space-around;}
.login_links_section .login_wrap .inner{height:calc(100% - 40px);}
.login_wrap .inner form{flex:1;}
.login_wrap{background-color: var(--color-wht); }
.login_wrap .inner{padding:20px; display: flex; gap:20px; }
.login_wrap h1{color: var(--color-2); font-size: 20px; font-weight: 700;margin-bottom: 15px;}
.login_wrap .login_box{display: flex; flex-direction: column; gap:var(--round-sm);}
.login_wrap .login_box .login_form{width:100%; display:flex; flex-direction:column; gap:var(--round-xs);}
.login_wrap .login_box .login_form input{width:100%;}
.login_wrap .login_box .login_form .toggle-password {cursor: pointer; position: relative; right: 33px; top: 0px;}
.login_wrap .id_pw_chk_label{font-size:14px; font-weight:500; color:var(--color-2); display:flex; align-items:center; gap:var(--round-sm);}
.login_btn{background-color: var(--color-point); color:var(--color-wht); cursor: pointer; font-size:15px; font-weight: 600; border:1px solid var(--color-point); box-sizing: border-box; border-radius: var(--round-sm); height:48px; display:flex; align-items: center; justify-content: center;}
.login_btn:hover{background-color:transparent; color:var(--color-point);}
.login_wrap .others_btn{display: flex; align-items: center; justify-content: center; gap:8px;}
.login_wrap .others_btn a{font-size:14px; letter-spacing: -0.14px;}
.login_wrap .others_btn a:hover{opacity: .7;}
.login_wrap .others_btn .grey{color:var(--color-3); font-weight: 500;}
.login_wrap .others_btn .accent{color:var(--color-2); font-weight: 700;}
.login_wrap .others_btn .bar{width: 1px; height: 10px; background-color: var(--color-6);}

.login_wrap .login_box.after{gap:20px;}
.login_wrap .login_box .profile_box{display:flex; align-items:center; justify-content:center; gap:20px;}
.login_wrap .login_box .profile_box .profile{width:40px; height:40px; display:block; border:1px solid var(--color-6); border-radius:100%; overflow:hidden; box-sizing:border-box;}
.login_wrap .login_box .profile_box div{font-size: 18px; font-weight: 700; line-height: 140%;}
.login_wrap .info_box{border-radius: 6px; border: 1px solid var(--color-6); background-color: #F7F7F7; height:80px; display:flex; align-items:center; justify-content:center; font-size: 16px; font-weight: 500; color:var(--color-2);}

.quick_links_seoul{background: url('../images/main/seoul_bg.png?v2') center no-repeat; height:201px;  background-size: cover; position: relative; z-index:0;}
.quick_links_seoul .btn_bt{display: flex; font-size: 19px; font-weight: 600; gap:10px; height: 48px; color:var(--color-wht); align-items: center; justify-content: center; position:absolute; bottom:0; left:0; right:0; background-color: #30576C;}
.quick_links_seoul .btn_bt:hover span{text-decoration: underline;}
.quick_links_seoul .btn_box{display: flex; gap:8px; flex-direction: column; padding:0 20px; align-items: start; justify-content: center; height: calc(100% - 48px);}
.quick_links_seoul .btn_box .btn{display: flex; padding: 6px 0 ; width:135px; color: var(--color-4); height:23px; font-size: 15px; font-weight: 500; gap: 12px; align-items: center; justify-content: flex-start; border-radius: 100px; border: 1px solid var(--color-6); background-color: var(--color-wht);}
.quick_links_seoul .btn_box .btn span{padding-left:20px; width:100px;}
.quick_links_seoul .btn_box .btn img{width:5px;}
.quick_links_seoul .btn_box .btn:hover {background-color: rgb(249, 249, 249);}

/****** 서비스 / 배너 ******/
.service_section{ max-width: var(--site-con-w); display: flex; margin:0 auto; }

/*** 서비스 ***/
.service_section .service_box .box,
.service_section .event_banner{border:1px solid var(--color-6); box-sizing: border-box; overflow: hidden; z-index:0;}
.service_section .service_box{display: flex; align-items: center; justify-content: space-between;}
.service_section .service_box .box{background-color: var(--color-wht);  transition: all ease-in .2s;}
.service_section .service_box .box:hover{border-color:var(--color-point);}
.service_section .service_box .box a{display: flex; gap:10px; justify-content: center; align-items: center; color:var(--color-bk-10)}
.service_section .service_box .box:hover a{color: var(--color-point);}
.service_section .service_box .box img{object-fit: contain;}

.service_section .event_banner{border-radius: var(--round-base);}


/****** 파트너/뷰어 ******/

/*** 파트너 ***/
.partner_viewer_section{padding-bottom:40px;}
.partner_viewer_section .partenr_section{background-color: var(--color-wht); border-radius: var(--round-base); overflow: hidden; border:1px solid var(--color-6);}
.partenr_section .tab_btn_wrap{display: flex; max-width: 328px; box-sizing: border-box; margin-bottom:20px; border:1px solid var(--color-6); border-radius: var(--round-md); overflow: hidden;}
.partenr_section .tab_btn_wrap .tab_btn{flex:1; transition: all ease-in .2s; cursor: pointer; font-size: 20px; color: #737373; font-weight: 600; box-sizing: border-box; height: 60px;}
.partenr_section .tab_btn_wrap .tab_btn.on,
.partenr_section .tab_btn_wrap .tab_btn:hover{background-color: var(--color-point); color: var(--color-wht); border-color:var(--color-point); border-radius: var(--round-md);}
.partenr_section .tab_btn_wrap .more:hover img{transform: rotate(90deg); transition: all ease-in .3s;}

.partner_viewer_section .partenr_section{height: 337px; overflow-y:auto;}
.partner_viewer_section .partenr_section .box_wrap {display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;}
.partner_viewer_section .partenr_section .box_wrap a{background-color: #F7F7F7; border-radius: var(--round-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; height:55px;}
.partner_viewer_section .partenr_section .box_wrap a img{max-width: 95%; }
.partner_viewer_section .partenr_section .tab_content{padding-bottom:20px;}

.partner_viewer_section .viewer_section .title{margin-bottom:20px; font-size: 22px; font-weight: 700; color: var(--color-2);}
.partner_viewer_section .viewer_section .list{display: grid; grid-template-columns: repeat(2, 1fr); gap:12px; height: calc(100% - 44px);}
.partner_viewer_section .viewer_section .list li{padding:16px 20px; background-color: var(--color-wht); border-radius: var(--round-md); border:1px solid var(--color-6); transition: all ease-in .2s;}
.partner_viewer_section .viewer_section .list a{display: flex; align-items: center; justify-content: space-between; height: 100%; font-size: 16px; font-weight: 600; color: var(--color-2); }
.partner_viewer_section .viewer_section .list li:hover{background-color: rgb(249, 249, 249);}
.partner_viewer_section .viewer_section .list a span{align-items: center; gap:12px;}

/****** 폼 체크 ******/
.remind, .error { color: red; }
form[novalidate] input.error { border-color:red !important; }
form[novalidate] input.error::placeholder { color: red; }
form[novalidate] .error { display:inline-block; }

.remind { font-weight: bold; }

@media screen and (min-width: 1201px){
  /****** 메인 공통 ******/
  .utility_section,
  .service_section,
  .partner_viewer_section {gap:32px; padding-left: 40px; padding-right: 40px;}

  .board_wrap,
  .service_section .service_box,
  .partner_viewer_section .partenr_section {flex:1; }

  .login_links_section,
  .service_section .event_banner,
  .partner_viewer_section .partenr_section,
  .partner_viewer_section .viewer_section {width: 31.7%;}


  /****** 게시판 + 로그인 섹션 ******/
  .utility_section{ padding:40px 40px 20px; justify-content: space-between; align-items: stretch;}

  .board_wrap,
  .login_wrap,
  .quick_links_seoul{border-radius: var(--round-base); overflow: hidden; border:1px solid var(--color-6);}

  .board_wrap .tab_btn_wrap .tab_btn{height:60px; font-size: 17px;}
  .board_wrap .tab_btn_wrap .tab_btn{flex:1; transition: all ease-in .2s; cursor: pointer; color: #737373; font-weight: 600; box-sizing: border-box; border-right:1px solid var(--color-6);}
  .board_wrap .tab_btn_wrap .tab_btn.on,
  .board_wrap .tab_btn_wrap .tab_btn:hover{border-radius: var(--round-md);}
  .board_wrap .tab_btn_wrap .more{display: flex; align-items: center; justify-content: center; width:50px; padding:0 10px; height:60px; }
  .board_wrap .board_list li a{height:43px; }

  .board_wrap .tab_content .more{display:none;}

  .login_links_section{display: flex; flex-direction: column; justify-content: space-between; gap: 12px;}
  .login_wrap h1{width: 100px;}
  .login_wrap .login_box{ flex:1; }
  .login_links_section .login_wrap{min-height:242px;}
  .login_links_section .login_wrap .login_box.after .others_btn{gap:20px}
  .login_links_section .login_wrap .login_box.after .others_btn a{font-size:16px;}

  /****** 서비스 섹션 ******/
  .service_section {padding-bottom:40px; align-items: stretch;}
  .service_section .service_box{gap:12px;}
  .service_section .service_box .box {aspect-ratio:1/1; flex:1; border-radius: var(--round-base);cursor: pointer;}
  .service_section .service_box .box a{flex-direction: column; height: 100%; font-size: 16px; font-weight: 600;}
  .service_section .service_box .box img{height:47px; padding:3px 0;}

  /****** 파트너/뷰어 ******/
  .partner_viewer_section .partenr_section{padding:32px 32px 0;}

}

@media screen and (max-width: 1200px){
  /****** 게시판 + 로그인 섹션 ******/
  .utility_section{ padding:0 0 10px; flex-direction: column; width:100%; }
/*   .board_wrap{width: calc(100% - 40px);} */
  .board_wrap{width:100%;}
  .board_wrap .tab_btn_wrap .tab_btn{height:42px; font-size: 15px;}
  .board_wrap .tab_btn_wrap .more{display: none;}
  .board_wrap .tab_btn_wrap .tab_btn:last-of-type{border-right:none;}

  .board_wrap .tab_content .more{display:flex; font-size:14px; font-weight: 500; height: 48px; margin:20px auto 0; align-items: center; justify-content: center; gap:8px; color:#737373; border:1px solid var(--color-6); border-radius: var(--round-sm);}
  .board_wrap .tab_content .more:hover{background-color: var(--color-point); color:var(--color-wht); border-color: var(--color-point);}
  .board_wrap .tab_content .more:hover img{filter: invert(1) brightness(2);}

  .login_links_section .login_wrap,
  .quick_links_seoul{display: none; overflow: hidden;}
  .login_wrap .inner{flex-direction: column; justify-content: center; margin: 0 auto; max-width: 558px;}
  .side_menu_wrap .login_wrap .inner h1{text-align: center;}

  /****** 서비스 섹션 ******/
  .service_section {background-color: var(--color-wht); padding:20px;}
  .service_section .service_box{flex-flow:wrap; gap:6px; width: 100%;}
  .service_section .service_box .box {border-radius: 100px; flex: 1 1 calc(50% - 6px); display: flex; justify-content: center; align-items: center;}
  .service_section .service_box .box:first-child { flex-basis: 100%; }
  .service_section .service_box .box a{font-size: 15px; font-weight: 500; height:60px;}
  .service_section .service_box .box img{ height:27px; padding:2px;}

  .service_section .event_banner{display: none;}


  /****** 파트너/뷰어 ******/
  .partner_viewer_section{display: none;}
}