@charset "utf-8";
@import url("font.css");

body {overflow-y: auto; overflow-x: hidden; position: relative; margin: 0; width:100%; color: #666; font-size: 16px; font-family:'Noto Sans KR', sans-serif; font-weight: 400; line-height: 26px; padding: 0 !important;}

.transparents-layer {display: none;}

button {transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.btn {width: 150px; height: 55px; font-weight: 500;}
.btn2 {width: 100px; height: 45px; font-weight: 500;}
.btn3 {width: 80px; height: 32px; font-size: 14px; border-radius: 3px;}
.btn4 {width: 80px; height: 32px; font-size: 14px; border-radius: 32px;}
.btn5 {width: 110px; height: 48px; border-radius: 48px;}
.btn6 {height: 30px; font-size: 15px; font-weight: 500; border-bottom-width: 1px; border-bottom-style: solid;}
.btn6.color_blue {border-bottom-color: #0387dc;}
.btn7 {width: 160px; height: 80px; font-size: 20px; border-radius: 10px;}
.btn8 {height: 30px; font-size: 13px; font-weight: 500; padding: 0 8px;}
.btn9 {width: 66px; height: 30px; font-size: 13px; font-weight: 500; padding: 0 8px;}
.btn9 .new::after {content: 'N'; margin-left: 5px; display: inline-block; width: 17px; height: 17px; line-height: 17px; text-align: center; font-size:12px; background-color: #000; color:#fff; border-radius: 50%;}
.btn10 {width: 90px; height: 26px; line-height: 24px; font-size: 13px; border-radius: 3px;}
.btn_menu {position: relative;}
.btn_menu span {position: absolute; left: 0; width: 100%; height: 3px; background-color: #fff;}
.btn_menu span.line1 {top: 0;}
.btn_menu span.line2 {top: calc(50% - 1px);}
.btn_menu span.line3 {bottom: 0;}
.btn_search {}
.btn_search .icon {position: relative; display: block; width: 22px; height: 22px;}
.btn_search .icon::after, .btn_search .icon::before {content: ''; position: absolute;}
.btn_search .icon::after {left: 0; top: 0; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; transform-origin: left top;}
.btn_search .icon::before {right: 1px; bottom: 0; width: 10px; height: 2px; background-color: #fff; transform: rotate(45deg); transform-origin: right bottom;}
.btn_close {}
.btn_close .icon {position: relative; display: block; width: 23px; height: 23px;}
.btn_close .icon::after, .btn_close .icon::before {content: ''; position: absolute; left: -3px; top: 10px; width: 30px; height: 2px; background-color: #fff;}
.btn_close .icon::after {transform: rotate(45deg);}
.btn_close .icon::before {transform: rotate(-45deg);}
.btn_more {}
.btn_more .icon {position: relative; display: inline-block; width: 16px; height: 16px;}
.btn_more .icon::after, .btn_more .icon::before {content: ''; position: absolute; left: 0; top: calc(50% - 1px); width: 100%; height: 2px; background-color: #eee;} 
.btn_more .icon::before {transform: rotate(90deg);}
.btn_item {position: relative; width: 35px; height: 35px; border: 1px solid #7b736b; border-radius: 3px;}
.btn_item::after,
.btn_item::before {content: ''; position: absolute; left: calc(50% - 7px); top: calc(50% - 1px); width: 14px; height: 2px; background-color: #7b736b;}
.btn_item.add::before {transform: rotate(90deg);}

.bg_blue {color: #fff; background-color: #333;}
.bg_navy {color: #fff; background-color: #1a2d5a;}
.bg_gray {color: #fff; background-color: #717a83;}
.bg_gray2 {color: #fff; background-color: #444;}
.bg_white {color: #555; background-color: #fff; border: 1px solid #333;}
.bg_white2 {color: #333; background-color: #fff; border: 1px solid #333;}
.bg_white3 {color: #f45221; background-color: #fff; border: 1px solid #f45221;}
.bg_white4 {color: #1a2d5a; background-color: #fff; border: 1px solid #1a2d5a;}

.color_blue {color: #0387dc !important;}
.color_blue2 {color: #2cafe3 !important;}
.color_red {color: #ff0000 !important;}
.color_orange {color: #fb726a !important;}

.f_b {font-weight: 600 !important;}
.f_m {font-weight: 500 !important;}
.f_n {font-weight: 400 !important;}
.p_r {position: relative !important;}
.p_a {position: absolute !important;}

.web_only {display: block !important;}
.web_flex_only {display: flex !important; display:-webkit-flex;}
.mobile_only {display: none !important;}
.mobile_flex_only {display: none !important;}
.web_only2 {display: inline-block !important;}
.mobile_only2 {display: none !important;}

.d_block {display: block !important;}
.d_inblock {display: inline-block !important;}
.d_none {display: none !important;}
.d_table {display: table !important;}
.d_intable {display: inline-table!important;}
.d_cell {display: table-cell !important; text-align: center; vertical-align: middle}
.d_flex {display: flex; display:-webkit-flex;}

u {text-underline-position: under;}

.padding0 {padding: 0 !important;}
.margin0 {margin: 0 !important;}
.mt60 {margin-top:60px !important}
.mt50 {margin-top:50px !important}
.mt40 {margin-top:40px !important}
.mt30 {margin-top:30px !important}
.mt20 {margin-top:20px !important}
.mt15 {margin-top:15px !important}
.mt10 {margin-top:10px !important}
.mt5 {margin-top:5px !important}
.mb2 {margin-bottom:2px !important}
.mb5 {margin-bottom:5px !important}
.mb10 {margin-bottom:10px !important}
.mb15 {margin-bottom:15px !important}
.mb20 {margin-bottom:20px !important}
.mb25 {margin-bottom:25px !important}
.mb30 {margin-bottom:30px !important}
.mb35 {margin-bottom:35px !important}
.mb40 {margin-bottom:40px !important}
.mb50 {margin-bottom:50px !important}
.mb55 {margin-bottom:55px !important}
.mb60 {margin-bottom:60px !important}
.mb65 {margin-bottom:65px !important}
.mb80 {margin-bottom:80px !important}
.mb100 {margin-bottom:100px !important}
.mr5 {margin-right:5px !important}
.mr10 {margin-right:10px !important}
.mr15 {margin-right:15px !important}
.mr20 {margin-right:20px !important}
.mr25 {margin-right:25px !important}
.mr30 {margin-right:30px !important}
.mr35 {margin-right:35px !important}
.mr60 {margin-right:60px !important}
.ml5 {margin-left:5px !important}
.ml10 {margin-left:10px !important}
.ml20 {margin-left:20px !important}
.ml30 {margin-left:30px !important}
.pl10 {padding-left:10px !important}
.pl15 {padding-left:15px !important}
.pl20 {padding-left:20px !important}
.pl30 {padding-left:30px !important}
.pl40 {padding-left:40px !important}
.pl60 {padding-left:60px !important}
.pt10 {padding-top:10px !important}
.pt15 {padding-top:15px !important}
.pt20 {padding-top:20px !important}
.pt30 {padding-top:30px !important}
.pt33 {padding-top:33px !important}
.pt40 {padding-top:40px !important}
.pt50 {padding-top:50px !important}
.pb10 {padding-bottom:10px !important}
.pb40 {padding-bottom:40px !important}
.pr10 {padding-right: 10px !important}
.w50 {width: 50px !important;}
.w60 {width: 60px !important}
.w100 {width: 100px !important}
.w120 {width: 120px !important}
.w200 {width: 200px !important}
.w230 {width: 230px !important}
.w300 {width: 300px !important}
.w400 {width: 400px !important}
.w500 {width: 500px !important}
.w_25 {width: 25% !important}
.w_30 {width: 30% !important}
.w_35 {width: 35% !important}
.w_40 {width: 40% !important}
.w_45 {width: 45% !important}
.w_50 {width: 50% !important}
.w_60 {width: 60% !important}
.w_80 {width: 80% !important}
.w_100 {width: 100% !important}

.f_12 {font-size: 12px !important;} 
.f_13 {font-size: 13px !important;} 
.f_14 {font-size: 14px !important;} 
.f_18 {font-size: 18px !important;} 

.al {text-align: left !important;}
.ac {text-align: center!important;}
.ar {text-align: right!important;}
.vt {vertical-align: top!important;}
.vm {vertical-align: middle!important;}
.vb {vertical-align: bottom!important;}

.cl_bo {clear: both !important;}
.f_left {float: left !important;}
.f_right {float: right !important;}
.over_h {overflow: hidden !important;}
.wb_keep {word-break: keep-all !important;}

dl.skipnavi {position:relative;z-index: 500;}
dl.skipnavi dt {display:none}
dl.skipnavi dd a {position:absolute; left:0; top:-50px; font-size:0}
dl.skipnavi dd a:active, dl.skipnavi dd a:focus {display:block; left:0; top:0; z-index:51; width:400px; height:30px; padding-top:9px; text-align:center; background:#333; line-height:14px; text-decoration:none; color:#fff; font-size:12px; font-weight:bold}

/*서브공통*/
#sub #seoul-common-gnb {display: block;}
#sub #wrap {padding-top: 48px;}
#sub .toparea {top: 48px;}
#sub .toparea .logo {background-image: url('/images/web/logo.png');}
#sub .button_box {padding: 0;}

.midarea {}
.midarea .subtoparea {position: relative; height: 480px;}
.midarea .subtoparea.sub1 {background-image: url('/images/web/sub_visual01.jpg'); background-position: center; background-size: cover;} /*공공디자인진흥위원회*/
.midarea .subtoparea.sub2 {background-image: url('/images/web/sub_visual02.jpg'); background-position: center; background-size: cover;} /*서울우수공공디자인*/
.midarea .subtoparea.sub3 {background-image: url('/images/web/sub_visual03.jpg'); background-position: center; background-size: cover;} /*서울디자인클리닉*/
.midarea .subtoparea.sub4 {background-image: url('/images/web/sub_visual04.jpg'); background-position: center; background-size: cover;} /*전문회사*/
.midarea .subtoparea.sub5 {background-image: url('/images/web/sub_visual05.jpg'); background-position: center; background-size: cover;} /*아카이빙*/
.midarea .subtoparea.sub6 {background-image: url('/images/web/sub_visual06.jpg'); background-position: center; background-size: cover;} /*마이페이지*/
.midarea .subtoparea.sub7 {background-image: url('/images/web/sub_visual06.jpg'); background-position: center; background-size: cover;} /*멤버쉽*/
.midarea .subtoparea.sub8 {background-image: url('/images/web/sub_visual08.jpg'); background-position: center; background-size: cover;} /*통합검색*/
.midarea .subtoparea.sub9 {background-image: url('/images/web/sub_visual09.jpg'); background-position: center; background-size: cover;} /*기타*/
.midarea .subtoparea h2 {width: 1200px; margin: 0 auto; padding-top: 300px; font-size: 50px; line-height: 50px; text-align: left; font-weight:900; margin-bottom: 70px; color: #fefefe;}
.midarea .subtoparea .nav_area_wrap::before {content: ''; position:absolute; bottom: 0; left: 0; width: 400px; height: 70px; background: #555;}
.midarea .subtoparea .nav_area {position: absolute; bottom:0; left: calc(50% - 600px); width: 1200px; display: flex; display:-webkit-flex; justify-content: left;}
.midarea .subtoparea .nav_area > li {position: relative; padding: 20px 0; background: #555;}
.midarea .subtoparea .nav_area > li::after {content: ''; position: absolute; right: 0; top: calc(50% - 8px); width: 1px; height: 16px; background-color: rgba(255, 255, 255, 0.3);}
.midarea .subtoparea .nav_area > li:last-child:after {display: none;}
.midarea .subtoparea .nav_area li a {padding: 0 20px; display: block; color: #fff;}
.midarea .subtoparea .nav_area li:first-child a {padding: 0 35px 0 0;}
.midarea .subtoparea .nav_area li a img {position: relative; top: 5px; display: block;}
.midarea .subtoparea .nav_area li.dropdown {min-width: 220px;}
.midarea .subtoparea .nav_area li.dropdown button {width: 100%; text-align: left; line-height: 28px;}
.midarea .subtoparea .nav_area li.dropdown > button {padding: 0 40px 0 20px; color: #fff;}
.midarea .subtoparea .nav_area li.dropdown > button .dropdown-label {letter-spacing: -1px;}
.midarea .subtoparea .nav_area li.dropdown > button .arrow {z-index: 300; position: absolute; right: 20px; top: calc(50% - 3px); width: 11px; height: 7px;}
.midarea .subtoparea .nav_area li.dropdown.open > button .arrow {transform: rotate(180deg);}
.midarea .subtoparea .nav_area li.dropdown > button .arrow::after {content: ''; position: absolute; left: 1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(135deg);}
.midarea .subtoparea .nav_area li.dropdown .dropdown-menu {position: absolute; left: 0; top: 70px; display: none; z-index: 1;}
.midarea .subtoparea .nav_area li.dropdown.open .dropdown-menu {display: block; min-width: 100%; background-color: #333; border-top: 1px solid #888;}
.midarea .subtoparea .nav_area li.dropdown .dropdown-menu li {}
.midarea .subtoparea .nav_area li.dropdown .dropdown-menu li:last-child {border-bottom: 0;}
.midarea .subtoparea .nav_area li.dropdown .dropdown-menu li button {padding: 0 20px; width: 100%; height: 50px; color: #bbb; white-space: nowrap;}
.midarea .subtoparea .nav_area li.dropdown .dropdown-menu li:hover button {color: #fff;}

.contentsarea {margin: 0 auto; padding: 70px 0 120px;}
.contentsarea .contents_title {margin-bottom: 50px; text-align: center;}
.contentsarea .contents_title h2 {font-size: 40px; line-height: 40px; font-weight: 600; font-family: 'Nanum Square', sans-serif; color: #000;}
.contentsarea h3.table_title {padding: 50px 0 15px; font-size: 20px; font-weight: 600;}
.contentsarea h3.table_title:first-of-type {padding: 0 0 15px}

.box_wrap {margin-bottom: 50px;}
.box_wrap:last-child {margin-bottom: 0;}
.box_wrap .tablebasic {margin-top: 30px;}
.box_wrap h3 {font-size: 24px;}
.box_wrap h4 {margin-bottom: 15px; font-size: 20px; color: #222;}
.title_box {margin-bottom: 25px;}
.title_box.d_flex {align-items: center; justify-content: space-between;}
.text_box p {line-height: 32px;}
.text_box .dot {position: relative; padding-left: 10px;}
.text_box .dot::before {content: '·'; position: absolute; top: 0; left: 0;}
.text_box .dot span.title {display: inline-block; min-width: 90px;}
.text_box .dot span.text {}
.text_box .p_left {padding-left: 12px;}
.text_box .p_left2 {padding-left: 24px;}
.text_box .box {margin-top: 15px; padding: 20px; background: #f9f9f9;}
.text_box .box2 {padding: 40px; background: #f9f9f9;}
.c_red {font-weight: 600; color: #ff0000;}
.c_red a {color: #ff0000;}
.f_bold {font-weight: 600; color: #000;}
.u_line {border-bottom: 1px solid #666;}
a.f_download {display: inline-block; width: 16px; height: 16px; background: url('/images/web/icon_download.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}

.d_area {margin: 0 auto; width: 1200px;}
.list_type {display: flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap;}
.list_type li {position: relative; padding-right: 20px; margin-right: 20px; font-size: 16px;}
.list_type li::after {content: ''; position: absolute; right: 0; top: calc(50% - 6px); width: 1px; height: 15px; background-color: #d1d1d1;}
.list_type li:last-child {padding-right: 0 !important; margin-right: 0 !important;}
.list_type li:last-child::after {display: none;}
.list_type2 {display: flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap;}
.list_type2 li {padding: 3px 13px; margin-right: 10px; font-size: 15px; background: #f2f2f2; border-radius: 30px;}
.list_type2 li:last-child {margin-right: 0 !important;}
.list_type_wrap {padding: 10px 0;}
.list_type_wrap .list_type {margin-bottom: 10px;}
.list_type_wrap .list_type:last-child {margin-bottom: 0;}
.img_box {position: relative; text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.img_box img {max-width: 100%;}

/*위원회안내*/
.summary_box {margin: 40px 0 75px;}
.summary_box h4 {margin: 0 auto; position: relative; width: 130px; height: 130px; background: #0387dc; border-radius: 130px;}
.summary_box h4 p {position:absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 400; line-height: 28px; text-align: center; color: #fff;}
.summary_box ul {margin-top: 50px; padding-top: 30px; position: relative; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;  align-items: center; justify-content: center;}
.summary_box ul li {position: relative; padding: 7px 0; width: 85px; height: 130px; margin-right: 5px; line-height: 22px; text-align: center; letter-spacing: -1px; border: 3px solid #0387dc;}
.summary_box ul li:nth-child(10) {margin-right: 15px;}
.summary_box ul li:nth-child(11), .summary_box ul li:nth-child(12) {border: 3px solid #01be9d;}
.summary_box ul li:last-child {margin-right: 0;}
.summary_box ul li span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 15px; color: #333;}
.summary_box > ul::after, .summary_box > ul::before, 
.summary_box > ul li::after, .summary_box > ul li::before {content: ''; position: absolute; background-color: #c2c2c2;}
.summary_box > ul::before {left: 100px; top: 0; width: 1000px; height: 1px; background-color: #c2c2c2;}
.summary_box > ul::after {left: 50%; top: -50px; width: 1px; height: 50px; background-color: #c2c2c2;}
.summary_box > ul > li::after {left: 50%; top: -33px; width: 1px; height: 30px;}
.step_box2 {display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 40px 0 25px;}
.step_box2 li {position: relative; width: 160px; margin-right: 48px;}
.step_box2 li::after {content: ''; position: absolute; top: 20px; left: -36px; display: block; width: 26px; height: 28px; background: url('/images/web/icon_arrow_step.png');}
.step_box2 li:first-child:after {display: none;}
.step_box2 li:last-child {margin-right: 0;}
.step_box2 li p.tit {padding: 10px 0; width: 100%; height: 65px; font-size: 15px; text-align: center; line-height: 22px; color: #fff; background: #657695;}
.step_box2 li:nth-child(5) p.tit {background: #0387dc; padding: 20px 0;}
.step_box2 li:nth-child(6) p.tit {background: #243e72; padding: 20px 0;}
.step_box2 li p.tit span {padding: 0 10px; position: absolute; top: -13px; left: calc(50% - 23px); line-height: 19px; font-size: 12px; color: #657695; background: #fff; border: 2px solid #657695; border-radius: 22px;}
.step_box2 li p.txt {padding: 12px 0; height: 50px; font-size: 15px; text-align: center; line-height: 22px; color: #333; background: #f7f8f9;}
.step_box2 li:nth-child(5) p.txt {background: #fff;}
.con1_1 .text_box a.f_download {margin-left: 8px;}

/*위원회일정*/
.thumbnaillist_txt {text-align: right; margin: 15px 10px 0;}

/*위원회결과*/
.con1_4 .archive_list .list:hover {border: 2px solid #555; background-color: #fff;}
.con1_4 .archive_list .list:hover a span {color: #222;}
.con1_4 .archive_list .list:hover::after {border-color: #a7a7a7;}
.con1_4 .archive_list .list.on:hover a span {color: #fff;}
.con1_4 .archive_list .list.on::after {top: calc(50% - 10px); border-color: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.archive_list .cont {display: none; overflow: hidden; padding: 20px 25px; margin-bottom: 10px; font-size: 14px; line-height: 36px; border: 1px solid #333;}
.archive_list .cont p {display: flex; justify-content: space-between;}
.archive_list .cont p.title {font-size: 16px; font-weight: 500;}
.archive_list .cont p span.txt1 {font-size: 16px;}
.archive_list .cont p span.txt2 {font-size: 15px;}

/*인증제품상세*/
.detail_box {padding: 0 0 75px; overflow: hidden; width: 100%;}
.detail_box .img_wrap {float: left; width: 50%;}
.detail_box .img_wrap .img_box {width: 100%; height: 330px; border: 1px solid #ddd; cursor: pointer;}
.detail_box .img_wrap .img_box a {display: block; width: 100%; height: 100%;}
.detail_box .img_wrap ul {margin-top: 10px; width: 100%; display: grid; display:-webkit-grid; grid-template-columns: repeat(4, 1fr); row-gap: 10px; column-gap: 10px;}
.detail_box .img_wrap ul li {width: 100%; height: 85px; border: 1px solid #ddd; cursor: pointer;}
.detail_box .img_wrap ul li a {display: block; width: 100%; height: 100%;}
.detail_box .box_wrap {float: left; width: 50%; padding: 20px 0 0 40px;}
.detail_box .box_wrap h4 {margin: 7px 0 30px; font-size: 24px;}
.detail_box .box_wrap > p {font-size: 15px;}
.detail_box .box_wrap .text_box {word-break: keep-all;}
.detail_box .box_wrap .text_box .box {margin-top: 35px; padding: 30px;}
.detail_box .box_wrap .text_box .box span.ring {display: block; padding-left: 18px; line-height: 32px; background: url('/images/web/icon_ring.png'); background-repeat: no-repeat; background-position: 0 12px; color: #222;}
.popup .popup_inner .slide_box.popup_img {width: 100%; padding: 0 70px;}
.popup .popup_inner .slide_box.popup_img .slick-slider {position:relative;}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-slide a {display: block; text-align: center; border: 1px solid #ddd;}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-slide a .img_box {width: 100%; height: 0; padding-top: 60%;}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-arrow {width: 23px; height: 40px;}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-arrow::after, 
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-arrow::before {left: calc(50% - 11px); top: calc(50% - 3px); width: 23px; height: 4px; background-color: #7f7f7f; border-radius: 4px; transform-origin: left;}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-arrow::before {top: calc(50% - 1px);}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-prev.slick-arrow {top: calc(50% - 10px); left: -70px;}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-next.slick-arrow {top: calc(50% - 10px); right: -70px;}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-dots {text-align: center; padding: 20px 0 0;}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-dots li {display: inline-block; width: 10px; height: 10px; margin: 0 5px; font-size:0; text-indent: -9999px; background: #333; border-radius: 50%; opacity: 0.4;}
.popup .popup_inner .slide_box.popup_img .slick-slider .slick-dots li.slick-active {opacity: 1;}



/* 스와이퍼 제품상세 */
.popup .popup_inner .swiper.popup_img {height: 280px;}
.popup .popup_inner .swiper.popup_img .swiper-wrapper {width: 100%;height: calc(100% - 50px);}
.popup .popup_inner .swiper.popup_img .swiper-wrapper .swiper-slide{padding: 0px 50px;}
.popup .popup_inner .swiper.popup_img .swiper-wrapper .swiper-slide .img_box{width: 100%; height: 100%; border: 1px solid #ddd;}

.popup .popup_inner .swiper.popup_img .swiper-pagination{}
.popup .popup_inner .swiper.popup_img .swiper-pagination-bullet{width: 10px; height: 10px;background: #adadad;}
.popup .popup_inner .swiper.popup_img .swiper-pagination-bullet-active{background: #333;}
.popup .popup_inner .swiper.popup_img .swiper-notification{display: none;}
.popup .popup_inner .swiper.popup_img .swiper-button-next,
.popup .popup_inner .swiper.popup_img .swiper-button-prev{margin-top: calc(calc(0px - (var(--swiper-navigation-size)/ 2)) - 25px);}
.popup .popup_inner .swiper.popup_img .swiper-button-next:after,
.popup .popup_inner .swiper.popup_img .swiper-button-prev:after{font-size: 30px;color: #555;}







/*시민의견수렴*/
.con2_4 .boardlist_top .box dt {min-width: 60px;}
.con2_4 > .box_wrap {padding-bottom: 15px; margin-bottom: 30px; border-bottom: 1px solid #e4e4e4;}
.con2_4 .detail_box .img_wrap {position: relative;}
.con2_4 .detail_box .img_wrap .btn_search {width: 30px; height: 30px; background-color: #7f7f7f;}
.con2_4 .detail_box .img_wrap .btn_search {position: absolute; top: 10px; right: 10px;}
.con2_4 .detail_box .img_wrap .btn_search .icon::after {left: 7px !important; top: 3px !important; width: 10px !important; height: 10px !important;}
.con2_4 .detail_box .img_wrap .btn_search .icon::before {width: 8px !important; bottom: 2px; right: -1px;}

/*서울디자인클리닉신청*/
.editor_wrap {padding: 17px; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;}
.editor_wrap textarea {height: 180px;}
.optionbox_product {display: flex; width: 285px; margin: 0 0 10px;}
.optionbox_product:last-child {margin: 0;}
.optionbox_product .button_box {margin-top: 1px; margin-left: 10px;}
.optionbox_product .button_box button {margin-left: 5px;}

/*서울디자인클리닉안내*/
.step_box4 li {display: flex; margin-bottom: 20px; background-color: #f7f8f9;}
.step_box4 li:last-child {margin-bottom: 0;}
.step_box4 li p.tit {padding: 35px 30px; width: 210px; color: #fff;}
.step_box4 li:nth-child(1) p.tit {background-color: #0387dc;}
.step_box4 li:nth-child(2) p.tit {background-color: #657695;}
.step_box4 li:nth-child(3) p.tit {background-color: #243e72;}
.step_box4 li p.txt {position: relative; padding-left: 65px;}
.step_box4 li p.txt * {vertical-align: top;}
.step_box4 li:nth-child(1) p.txt {padding-top: 20px;}
.step_box4 li:nth-child(2) p.txt {padding-top: 8px;}
.step_box4 li:nth-child(3) p.txt {padding-top: 33px;}
.step_box4 li p.txt span.title {display: inline-block; margin-right: 5px;}
.step_box4 li p.txt span.text {display: inline-block;}
.step_box4 li p.txt::before {content: ''; position: absolute; top: calc(50% - 14px); left: 20px; display: block; width: 26px; height: 28px; background: url('/images/web/icon_arrow_step.png');}

/*클리닉신청내역자문상세등록*/
.talk_box {margin-bottom: 50px;}
.talk_box .list_type li {color: #333;}
.talk_box .list_type li.name {font-weight: 500;}
.talk_box .list_type li.date {font-size: 13px;}
.talk_box .type {margin-bottom: 60px; width: 100%; overflow: hidden;}
.talk_box .type:last-child {margin-bottom: 0;}
.talk_box .type .box_type {width: 75%; padding: 23px 18px 27px; line-height: 28px;}
.talk_box .type .box_type a {display: inline-block; margin-top: 5px; font-size: 15px;}
.talk_box .type.question .box_type {background: #f6f6f6; border: 1px solid #ddd; border-radius:  0 10px 10px 10px;}
.talk_box .type.question .box_type a {border-bottom: 1px solid #333; color: #333;}
.talk_box .type.answer .box_type {float: right; clear: both; background: #0387dc; border: 1px solid #0387dc; color: #fff; border-radius:  10px 0 10px 10px;}
.talk_box .type.answer .box_type a {border-bottom: 1px solid #fff; color: #fff;}
.talk_box .type.answer .list_type {float: right; clear: both;}

/*디자인전문회사안내*/
.step_box3 {padding: 40px 0 10px; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; align-items: center; justify-content: center; background: #f9f9f9;}
.step_box3 li {position: relative; width: 240px; margin: 0 35px 30px;}
.step_box3 li::after {content: ''; position: absolute; top: calc(50% - 14px); left: -50px; display: block; width: 26px; height: 28px; background: url('/images/web/icon_arrow_step.png');}
.step_box3 li:first-child:after {display: none;}
.step_box3 li p.tit {padding: 10px 0; height: 65px; font-size: 15px; text-align: center; line-height: 22px; color: #fff; background: #1e9ab8;}
.step_box3 li:nth-child(2) p.tit {background: #0387dc;}
.step_box3 li:nth-child(3) p.tit {background: #0387dc;}
.step_box3 li:nth-child(4) p.tit {background: #243e72; padding: 22px 0;}
.step_box3 li:nth-child(5) p.tit {background: #243e72;}
.step_box3 li p.txt {padding: 30px 20px; height: 105px; font-size: 15px; text-align: center; line-height: 22px; color: #333; background: #fff; border: 1px solid #00b5af;}
.step_box3 li:nth-child(2) p.txt {border: 1px solid #0387dc; padding: 20px 0;}
.step_box3 li:nth-child(3) p.txt {border: 1px solid #0387dc; padding: 7px 0;}
.step_box3 li:nth-child(4) p.txt {border: 1px solid #243e72;}
.step_box3 li:nth-child(5) p.txt {border: 1px solid #243e72; padding: 20px 0;}

/*전문회사*/
.thumbnaillist.type02 > li a .text_box {padding-left: 0;}
.thumbnaillist.type02 > li a .text_box h3 {margin: 0 0 10px; color: #333;}
/* div */
.thumbnaillist.type02 > li .box .text_box {padding-left: 0;}
.thumbnaillist.type02 > li .box .text_box h3 {margin: 0 0 10px; color: #333;}
/* div */
.thumbnaillist.type02 .list_type li {color: #666;}
.thumbnaillist.type02 .list_type2 {margin-top: 20px;}

/*아카이브상세*/
.con5_1 .box_wrap {margin-bottom: 20px;}
.con5_1 .box_wrap h3 {font-size: 26px;}
.archive_box {padding: 50px 30px; margin-bottom: 40px; border: 1px solid #e7e7e9;}
.archive_box p.tit1 {font-size: 22px; color: #0387dc;}
.archive_box p.tit2 {font-size: 20px; color: #333; margin: 10px 0 45px;}
.archive_box p img {max-width: 100%;}
.archive_box ul {display: flex; display:-webkit-flex; justify-content: center; align-items: center;}
.archive_box ul li {padding-top: 30px; margin: 0 15px; width: 180px; height: 180px; text-align: center; border: 1px solid #0387dc; border-radius: 50%;}
.archive_box ul li p span.txt1 {font-size: 20px; color: #333; border-bottom: 3px solid #0387dc;}
.archive_box ul li p span.txt2 {display: block; margin-top: 25px; font-size: 16px; line-height: 26px; color: #666;}
.archive_list .list {position: relative; margin-bottom: 10px; border: 2px solid #e7e7e9; border-radius: 10px;}
.archive_list .list::after {content: ''; position: absolute; width: 12px; height: 12px; top: calc(50% - 7px); right: 30px; border-width: 0 4px 4px 0; border-style: solid; border-color: #e7e7e9; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.archive_list .list:hover::after {border-color: #fff;}
.archive_list .list a {display: flex; display:-webkit-flex; justify-content: space-between; padding: 15px 60px 15px 30px;}
.archive_list .list a span.txt1 {font-size: 18px;}
.archive_list .list a span.txt2 {font-size: 14px;}
.archive_list .list:hover {border: 2px solid #555; background-color: #555; color: #fff;}
.archive_list .list:hover a span {color: #fff;}
.archive_list .list.on {background: #333; border: 2px solid #555;}
.archive_list .list.on span {color: #fff;}
.archive_list .list.on::after {border-color: #fff;}
.archive_list .list.on:hover {background: #333; border: 2px solid #333;}
.archive_list .list.on:hover span {color: #fff;}

/*아카이브읽기*/
.archive_view_box {padding: 30px; text-align: center; border: 1px solid #333;}
.button_box.archive_button_box {margin-top: 20px; margin-bottom: 5px;}
.button_box.archive_button_box button {padding: 0 43px 0 18px; width: 150px; height: 45px; font-size: 15px; color: #0387dc; background-color: #fff; border: 1px solid #0387dc;  background: url('/images/web/icon_article_view.png'); background-position: calc(100% - 18px) center; background-repeat: no-repeat;}

/*멤버쉽*/
.membership_area {padding-top: 50px;}
.membership_area .write_box {margin: 0 auto; width: 470px;}
.membership_area .write_box ul li {position: relative; margin-bottom: 15px; display: flex !important; display:-webkit-flex; justify-content: space-between; align-items: center;}
.membership_area .write_box ul li input.txt {padding: 0 60px 0 20px;}
.membership_area .write_box ul li input.txt:focus {outline: 1px solid #333;}
.membership_area .write_box ul li button.inp_close, .membership_area .write_box ul li button.inp_close {overflow: hidden; position:absolute; top: calc(50% - 10px); right: 20px; width: 20px; height: 20px;}
.membership_area .write_box ul li button.inp_close::after, .membership_area .write_box ul li button.inp_close::before {content: ''; position:absolute; top: 9px; left:0; width: 20px; height: 2px; background-color: #000; z-index: 1;}
.membership_area .write_box ul li button.inp_close::after {transform: rotate(45deg);}
.membership_area .write_box ul li button.inp_close::before {transform: rotate(-45deg);}
.membership_area .write_box ul li.bottom {padding-top: 20px;}
.membership_area .write_box ul li > label {flex: none; width: 100px; font-weight: 500;}
.membership_area .write_box ul li .inpbox {width: 100%; height: 50px; border-color: #dadada;}
.membership_area .write_box ul li .check_box input[type=checkbox] + label {color: #555; font-size: 15px;}
.membership_area .write_box ul li button {color: #555; font-size: 15px;}
.membership_area .write_box .button_box {margin-top: 30px; flex-wrap:wrap; -webkit-flex-wrap:wrap;}
.membership_area .write_box .button_box button {margin-left: 0; margin-top: 10px; width: 100%; height: 60px; font-size: 20px;}
.membership_area .write_box .button_box button.bg_blue {margin-top: 0; font-weight: 500;}
.membership_area .step_box {margin-bottom: 45px; display: flex; display:-webkit-flex; justify-content: center;}
.membership_area .step_box li.step {position: relative; padding: 14px 0 14px 100px;}
.membership_area .step_box li.step::before {content: ''; position: absolute; left: 0; top: 0; width: 80px; height: 80px; background-color: #ccced0; border-radius: 100%; background-repeat: no-repeat; background-position: center center;}
.membership_area .step_box li.step p {width: 100%; color: #888; font-size: 18px;}
.membership_area .step_box li.step p.num {font-weight: 500;}
.membership_area .step_box li.step.active::before {background-color: #18a9de;}
.membership_area .step_box li.step.active p {color: #18a9de;}
.membership_area .step_box li.step1::before {background-image: url('/images/web/icon_step1.png');}
.membership_area .step_box li.step2::before {background-image: url('/images/web/icon_step2.png');}
.membership_area .step_box li.step3::before {background-image: url('/images/web/icon_step3.png');}
.membership_area .step_box li.line {display: flex; display:-webkit-flex; align-items: center; justify-content: center; width: 100px;}
.membership_area .step_box li.line .icon {margin: 0 5px; display: block; width: 7px; height: 7px; background-color: #ccced0; border-radius: 100%;}
.membership_area .agree_top {position: relative; margin-bottom: 20px;}
.membership_area .agree_top h3 {padding-bottom: 15px; font-size: 18px; border-bottom: 1px solid #929bac;}
.membership_area .agree_top .check_box {position: absolute; right: 0; top: 2px;}
.membership_area .agree_area {margin-bottom: 50px;}
.membership_area .check_box input[type=checkbox] + label {color: #333; font-size: 18px; font-weight: 500;}
.membership_area .finish_box {text-align: center;}
.membership_area .finish_box h3 {margin-bottom: 30px; color: #333; font-size: 24px;}
.membership_area .finish_box .text_box p {margin-bottom: 10px;}
.membership_area .finish_box .text_box p u {color: #000; text-underline-position: under;}
.membership_area .finish_box .button_box {display: block; display:-webkit-block;}
.membership_area .finish_box .button_box p {margin-bottom: 15px;}
.membership_area .finish_box .button_box button {width: 150px; height: 40px;}

/*마이페이지*/
.tabmenu_mypage {margin-bottom: 30px;}
.tabmenu_mypage ul {display: flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content: center;}
.tabmenu_mypage ul li {margin-right: 40px;}
.tabmenu_mypage ul li:last-child {margin-right: 0;}
.tabmenu_mypage ul li button {font-size: 22px; color: #999; padding: 0px 3px 5px;}
.tabmenu_mypage ul li button[data-selected="selected"] {font-weight: 500; color: #0387dc; border-bottom: 3px solid #0387dc;}

/*통합검색*/
.totalsearch_area .boardlist_top {margin-bottom: 25px;}
.totalsearch_area .result_txt {margin-bottom: 10px; font-size: 15px; font-weight: 500;}
.totalsearch_area .result_txt span {font-weight: 600;}
.totalsearch_area .search_menu {position: relative; margin: 0 15px 25px; width: calc(100% - 30px); height: 40px; background-color: #0387dc;}
.totalsearch_area .search_menu::after {content: ''; position: absolute; right: 15px; top: calc(50% - 7px); width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);}
.totalsearch_area .search_menu select {z-index: 6; position: relative; padding: 0 15px; width: 100%; height: 100%; color: #fff; font-size: 10px; background-color: transparent;}
.totalsearch_area .search_menu select option {color: #000;}
.totalsearch_area .result_area {position: relative;}
.totalsearch_area .result_area > li > a {position: absolute; top: 0; width: 240px; height: 48px; color: #666; font-size: 15px; line-height: 46px; text-align: center; border: 1px solid #ddd;}
.totalsearch_area .result_area > li.active > a {z-index: 5; color: #fff; background-color: #333; border-color: #333;}
.totalsearch_area .result_area > li:nth-child(1) > a {left: 0;}
.totalsearch_area .result_area > li:nth-child(2) > a {left: 239px;}
.totalsearch_area .result_area > li:nth-child(3) > a {left: 478px;}
.totalsearch_area .result_area > li:nth-child(4) > a {left: 717px;}
.totalsearch_area .result_area > li:nth-child(5) > a {left: 956px;}
.totalsearch_area .result_area > li .tab_pane {padding-top: 90px; display: none;}
.totalsearch_area .result_area > li.active .tab_pane {display: block; margin: 0 15px;}
.totalsearch_area .result_area > li dl {border-bottom: 1px solid #ededed;}
.totalsearch_area .result_area > li dl dt {padding-bottom: 30px; font-size: 26px; font-weight: 500; color: #222;}
.totalsearch_area .result_area > li dl dd {padding: 0 0 20px;}
.totalsearch_area .result_area > li dl dd a {display: block;}
.totalsearch_area .result_area > li dl dd a .title_box {display: flex; display:-webkit-flex; justify-content: flex-start; margin-bottom: 5px;}
.totalsearch_area .result_area > li dl dd a .title_box h4 {font-size: 18px; color: #666;}
.totalsearch_area .result_area > li dl dd a .title_box .date {margin-left: 40px; flex: none; color: #888; font-size: 14px;}
.totalsearch_area .result_area > li dl dd a p {overflow: hidden; margin-bottom: 5px; display: -webkit-box; -webkit-box-orient: vertical; max-height: 84px; -webkit-line-clamp: 3; line-height: 28px;}
.totalsearch_area .result_area > li dl dd .nav_list {display: flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap;}
.totalsearch_area .result_area > li dl dd .nav_list li {color: #888; font-size: 14px;}
.totalsearch_area .result_area > li dl dd .nav_list li::after {content: '>'; padding: 0 5px;}
.totalsearch_area .result_area > li dl dd .nav_list li:last-child::after {display: none;}
.totalsearch_area .result_area > li .tab_pane .button_box {margin: 30px auto 60px;}
.totalsearch_area .result_area > li .tab_pane .btn_more {width: 150px; height: 45px; font-size: 15px;}
.totalsearch_area .result_area > li .tab_pane .btn_more .icon {margin-left: 5px;}
.totalsearch_area .result_area > li .tab_pane .btn_more .icon::after,
.totalsearch_area .result_area > li .tab_pane .btn_more .icon::before {top: calc(50% + 2px); width: 11px; height: 1px; background-color: #015ab8;} 

/*탭메뉴*/
.tabmenu {margin-bottom: 60px;}
.tabmenu .optionbox {padding-left: 10px; width: 100%; height: 40px; display: none; text-align: left; background-color: #1a2d5a; border: 0;}
.tabmenu .optionbox::after {border-color: #fff;}
.tabmenu .optionbox .dropdown-label {color: #fff; font-size: 10px;}
.tabmenu .dropdown-menu {display: flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap;}
.tabmenu .dropdown-menu li {position: relative; width: 16.66666666666667%; height: 48px;}
.tabmenu .dropdown-menu li button {position: absolute; left: 0; top: 0; width: calc(100% + 1px); height: calc(100% + 1px); color: #666; font-size: 15px; text-align: center; border: 1px solid #ddd;}
.tabmenu .dropdown-menu li button[data-selected="selected"] {z-index: 3; color: #fff; font-weight: 500; background-color: #333; border-color: #333;}

/*개인정보처리방침*/
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.privacy .box {padding: 30px; margin-bottom: 50px; line-height: 26px; background-color: #fafafa;}
.privacy-wrap {line-height: 32px;}
.privacy-wrap h4 {font-size: 20px; margin: 40px 0 10px;}
.privacy-wrap p.txtin {padding-left: 15px; text-indent: -15px;}
.privacy-wrap .imgbox {margin: 20px 0; text-align: center;}
.privacy-wrap a {color: #0387dc;}
.privacy-wrap em {font-style: normal;}
.privacybox:after {content:''; display: block; clear: both;}
.privacybox {margin: 40px 0 0;}
.privacybox .right-desc {float: right;}
.listtype-other {margin-left: 20px;}
.listtype-other.ml {margin-left: 0;}
.listtype-other > li > span {margin-left: -20px;}

.table_privacy table {table-layout: fixed; width: 100%; border-top: 2px solid #767676; border-bottom: 1px solid #767676; margin: 20px 0 15px;}
.table_privacy table thead th {padding: 13px 20px; font-weight: 500; line-height: 26px; text-align: center; color: #333; border-bottom: 1px solid #9ba5af;}
.table_privacy table tbody th {padding: 12px 20px; font-weight: 400; line-height: 26px; text-align: center; color: #333; border-left: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;}
.table_privacy table td {padding: 12px 20px; line-height: 26px; text-align:center; color: #333; border-bottom: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5;}
.table_privacy table th:first-child {border-left: 0;}
.table_privacy table td:first-child {border-left: 0;}
.table_privacy.index table thead th {padding: 16px 20px; font-size: 18px; color: #0387dc;}
.table_privacy.index table td {padding: 25px 20px; line-height: 32px;}
.table_privacy.index table td:last-child {padding-left: 30px;}

/*이용약관*/
.rule-index {border-top: 2px solid #222; border-bottom: 1px solid #e5e5e5;}
.rule-index:after {content: ''; display: block; clear: both;}
.rule-index ul {float: left; width: 50%; padding: 25px 20px;}
.rule-index ul + ul {border-left: 1px solid #e5e5e5; padding-left: 30px;}
.rule-index ul li {font-weight: 400; margin-top: 10px;}
.rule-index ul li:first-child {margin-top: 0;}
.rule-index ul li a {color:#666; font-size: 16px;}
.rule-index ul li a:focus,.rule-index ul li a:hover,
.rule-index ul li a:focus span,.rule-index ul li a:hover span {color: #0387dc;}
article.rule h4 {font-size: 26px; margin-top: 50px;}
article.rule h5 {font-size: 20px; margin: 40px 0 10px;}
article.rule p {font-size: 16px; color: #666; line-height: 32px;}
article.rule li {line-height: 32px; color:#666; word-break: keep-all;}
article.rule ol > li {padding-left: 20px; text-indent: -20px}
article.rule ol > li > ol > li {padding-left: 0px; text-indent: 0;}

/*찾아오시는길*/
.location-wrap {}
.loc_box {margin-bottom: 40px; overflow:hidden;}
.loc_box h2 {margin-bottom: 20px; font-size: 20px;}
.loc_box .map {position: relative; overflow: hidden; margin-bottom: 10px;}
.loc_box .map2 {float: left;}
.loc_box .map3 {text-align: center; margin-top: 10px;}
.loc_box .tb_bus {float: right; width: calc(100% - 400px);}
.loc_box .tb_bus.table_privacy table {margin: 0 !important;}
.loc_box .ul_txt {overflow: hidden;}
.loc_box .ul_txt > li {position: relative; padding: 3px 0; color:#666;}
.loc_box .ul_txt > li > em {display: inline-block; font-style: normal; color:#222; font-weight: 500;}
.loc_box .ul_txt_2 {overflow: hidden;}
.loc_box .ul_txt_2 > li {position: relative; padding: 5px 0 5px 10px; color:#666;}
.loc_box .ul_txt_2 > li:before {position: absolute; left: 0; top: 5px; content: "\-";}
.loc_box .ul_txt_2 > li > p {margin-top: 5px;}
.loc_box .ul_txt_2 > li > em {display: inline-block; font-style: normal; color:#0387dc;}
.loc_box .txt_list_s {padding-left: 25px;}
.loc_box .txt_list_s > li {position: relative; padding: 2px 0 1px 10px;}
.loc_box .txt_list_s > li:before {position: absolute; left: 0; top: 0; content:"\-";}
.loc_box .txt_list_s > li.no_icon:before {display: none;}
.loc_box tbody tr:nth-child(1) th {border-right: 1px solid #e5e5e5;}
.loc_box tbody tr:nth-last-child(1) td {border-bottom: 1px solid #e5e5e5;}
.loc_box tbody tr:nth-last-child(1) th {border-bottom: 1px solid #e5e5e5;}


@media screen and (max-width:1366px) {

    .btn10 {width: 130px;}

    .contentsarea.d_area {width: 900px;}
    .midarea .subtoparea h2 {width: 900px;}
    .midarea .subtoparea .nav_area_wrap::before {width: 400px;}
    .midarea .subtoparea .nav_area {left: calc(50% - 450px); width: 90px;}

    /*위원회안내*/
    .summary_box h4 {margin: 0 auto; position: relative; width: 115px; height: 115px; background: #0387dc; border-radius: 115px;}
    .summary_box h4 p {font-size: 18px; line-height: 26px;}
    .summary_box ul {margin-top: 40px; padding-top: 30px;}
    .summary_box ul li {padding: 6px 0; width: 71px; height: 120px; font-size: 13px; line-height: 18px; word-break: keep-all;}
    .summary_box ul li:nth-child(3) {width: 90px;}
    .summary_box ul li:nth-child(7) {width: 55px;}
    .summary_box ul li:nth-child(9) {width: 55px;}
    .summary_box ul li:nth-child(10) {margin-right: 10px;}
    .summary_box > ul::before {left: 37px; top: 0; width: 828px; height: 1px; background-color: #c2c2c2;}
    .summary_box > ul::after {left: 50%; top: -40px; width: 1px; height: 40px; background-color: #c2c2c2;}
    .step_box2 {width:100%; margin: 40px 0 0;}
    .step_box2 li {width: calc(33.33333% - 48px); margin-left: 48px; margin-right: 0;  margin-bottom: 25px;}

    /*통합검색*/
    .totalsearch_area .result_area > li > a {width: 180px;}
    .totalsearch_area .result_area > li:nth-child(1) > a {left: 0;}
    .totalsearch_area .result_area > li:nth-child(2) > a {left: 179px;}
    .totalsearch_area .result_area > li:nth-child(3) > a {left: 358px;}
    .totalsearch_area .result_area > li:nth-child(4) > a {left: 537px;}
    .totalsearch_area .result_area > li:nth-child(5) > a {left: 716px;}

}
@media screen and (max-width:1240px) {
    
}
@media screen and (max-width:1240px) {
    
}
@media screen and (max-width:1024px) {
    body {font-size: 12px; line-height: 18px;}

    .btn {min-width: inherit !important;width: 100%;height: 50px;font-size: 18px;}
    .btn3 {width: 50px; height: 28px; font-size: 10px;}
    .btn4 {width: 50px; height: 20px; font-size: 10px; line-height: 18px;}
    .btn5 {width: 85px; height: 40px; font-size: 14px;}
    .btn6 {height: 20px;}
    .btn7 {width: 100%; height: 50px; font-size: 18px;}
    .btn9 {width: 100%;}
    .btn10 {width: 70px; font-size: 11px;}
    
    .web_only {display: none !important;}
    .mobile_only {display: block !important;}
    .web_only2 {display: none !important;}
    .mobile_only2 {display: inline-block !important;}
    .web_flex_only {display: none !important;}
    .mobile_flex_only {display: flex !important;}

    /*서브공통*/
    #sub #wrap {padding-top: 0;}
    #sub #seoul-common-gnb {position: absolute;}
    #sub .toparea {top: 48px;}
    #sub .toparea .logo.active {background-image: url('/images/web/logo.png') !important;}
    #sub .toparea .button_box .d_flex > a {display: none;}

    .midarea .subtoparea {height: 380px;}
    .midarea .subtoparea h2 {width: 100%; text-align: center; padding-top: 200px; margin-bottom: 0; font-size: 24px; font-weight: 600;}
    .midarea .subtoparea .nav_area_wrap::before {display: none;}
    .midarea .subtoparea .nav_area {width: 100%; left: 0; justify-content: left; background: #555;}
    .midarea .subtoparea .nav_area > li {position: relative; padding: 0; background: #555;}
    .midarea .subtoparea .nav_area li span {font-size: 12px;}
    .midarea .subtoparea .nav_area li:first-child a {padding: 6px 12px;}
    .midarea .subtoparea .nav_area li.dropdown {min-width: calc(50% - 15px);}
    .midarea .subtoparea .nav_area li.dropdown button {line-height: 24px;}
    .midarea .subtoparea .nav_area li.dropdown > button {padding: 0 10px; color: #fff;}
    .midarea .subtoparea .nav_area li.dropdown > button .arrow {right: 10px;}
    .midarea .subtoparea .nav_area li.dropdown .dropdown-menu {top: 30px; padding: 5px 0;}
    .midarea .subtoparea .nav_area li.dropdown .dropdown-menu li button {padding: 0 15px; height: 30px; font-size: 12px;}

    .contentsarea.d_area {width: 100%; padding: 30px 0 80px;}
    .contentsarea .contents_title {margin-bottom: 30px;}
    .contentsarea .contents_title h2 {font-size: 20px; line-height: 20px; padding: 0 15px;}
    .contentsarea h3.table_title {padding: 30px 15px 15px; font-size: 16px;}
    .contentsarea h3.table_title:first-of-type {padding: 0 15px 15px}

    .box_wrap {margin-bottom: 30px;}
    .box_wrap .tablebasic {margin-top: 15px;}
    .box_wrap h3 {font-size: 20px; line-height: 26px;}
    .box_wrap h4 {padding: 0 15px; margin: 25px 0 15px; font-size: 16px;}
    .title_box {padding: 0 15px; margin-bottom: 13px;}
    .text_box {padding: 0 15px;}
    .text_box p {line-height: 22px;}
    .text_box .dot span.title {min-width: 75px;}
    .text_box .p_left {padding-left: 10px;}
    .text_box .p_left2 {padding-left: 20px;}
    .text_box a.f_download {width: 12px; height: 12px;}
    .list_type {justify-content: center;}
    .list_type li {padding-right: 15px; margin-right: 15px; font-size: 12px; line-height: 18px;}
    .list_type li::after {top: calc(50% - 5px); height: 10px;}
    .list_type2 {justify-content: center;}
    .list_type2 li {padding: 3px 13px; margin-right: 10px; font-size: 12px; margin: 5px 10px 5px 0;}
    .list_type_wrap {padding: 0;}
    .list_type_wrap .list_type {justify-content: flex-start; margin-bottom: 5px;}
    .list_type_wrap .list_type li {padding-right: 10px; margin-right: 10px;}
    
    /*위원회안내*/
    .summary_box {margin: 15px 15px 25px;}
    .summary_box h4 {width: calc(100% - 20px); height: 53px; font-size: 15px; margin: 0 0 10px 20px;}
    .summary_box h4 p {font-size: 16px;}
    .summary_box h4 p br {display: none;}
    .summary_box ul {margin-top: 0; padding-top: 0; justify-content: right;}
    .summary_box ul li {padding: 6px 0; width: calc(100% - 35px); height: 35px; margin-right: 0; margin-bottom: 10px; font-size: 11px; border: 2px solid #0387dc;}
    .summary_box ul li:last-child {margin-bottom: 0;}
    .summary_box ul li:nth-child(3) {width: calc(100% - 35px);}
    .summary_box ul li:nth-child(7) {width: calc(100% - 35px);}
    .summary_box ul li:nth-child(9) {width: calc(100% - 35px);}
    .summary_box ul li:nth-child(10) {margin-right: 0;}
    .summary_box ul li:nth-child(11), .summary_box ul li:nth-child(12) {border: 2px solid #01be9d;}
    .summary_box ul li br {display: none;}
    .summary_box > ul::before {left: 5px; top: -40px; width: 1px; height: 554px; background-color: #c2c2c2;}
    .summary_box > ul::after {left: 5px; top: -40px; width: 15px; height: 1px; background-color: #c2c2c2;}
    .summary_box > ul > li::after {left: -32px; top: 50%; width: 30px; height: 1px;}
    .step_box2 {width: 100%;}
    .step_box2 li {width: calc(33.33333% - 40px); margin-left: 30px; margin-right: 0; margin-bottom: 25px;}
    .step_box2 li::after {left: -26px; width: 26px; height: 28px; background-position: center; background-size: 70%; background-repeat: no-repeat;}
    .step_box2 li p.tit {padding: 11px 0; height: 42px; font-size: 12px; line-height: 18px;}
    .step_box2 li:nth-child(5) p.tit, .step_box2 li:nth-child(6) p.tit  {padding: 11px 0;}
    .step_box2 li p.tit br {display: none;}
    .step_box2 li p.txt {padding: 6px 20px; height: 32px; font-size: 12px; line-height: 18px;}
    .step_box2 li p.tit span {top: -14px; font-size: 11px; border: 1px solid #ee7d03;}

    /*위원회일정*/
    .thumbnaillist_txt {width: 100%; padding: 0 15px; text-align: left; margin-top: 10px; word-break: keep-all;}
    
    /*위원회결과*/
    .con1_4 .archive_list .list.on::after {top: calc(50% - 8px);}
    .archive_list .cont {padding: 15px 20px; line-height: 20px;}
    .archive_list .cont p {margin-bottom: 10px;}
    .archive_list .cont p:last-child {margin-bottom: 0;}
    .archive_list .cont p.title {font-size: 13px;}
    .archive_list .cont p span.txt1 {width: calc(100% - 90px); margin-right: 15px; font-size: 13px;}
    .archive_list .cont p span.txt2 {height: 22px; padding: 0 5px; font-size: 12px; border: 1px solid #ccc; border-radius: 5px;}

    /*인증제품*/
    .thumbnaillist.type01 > li {float: left; width: 50%; overflow: hidden;}
    .thumbnaillist.type01 > li a .text_box h3 {float: right; width: calc(50% - 8px);}
    .thumbnaillist.type01 > li a .text_box p.p1 {float: right; width: calc(50% - 8px);}
    .thumbnaillist.type01 > li a .text_box p.p2 {float: right; width: calc(50% - 8px);}
	/* div */    
    .thumbnaillist.type01 > li .box .text_box h3 {float: right; width: calc(50% - 8px);}
    .thumbnaillist.type01 > li .box .text_box p.p1 {float: right; width: calc(50% - 8px);}
    .thumbnaillist.type01 > li .box .text_box p.p2 {float: right; width: calc(50% - 8px);}
	/* div */

    /*인증제품상세*/
    .detail_box {padding: 0 15px 40px;}
    .detail_box .img_wrap {float: none; width: 100%;}
    .detail_box .img_wrap .img_box {height: 0; padding-top: 55%;}
    .detail_box .img_wrap ul li {height: 0; padding-top: 57%;}
    .detail_box .box_wrap {float: none; width: 100%; padding: 20px 0 0;}
    .detail_box .box_wrap h4 {margin: 3px 0 15px; padding: 0; font-size: 15px;}
    .detail_box .box_wrap > p {font-size: 11px;}
    .detail_box .box_wrap .text_box  {padding: 0;}
    .detail_box .box_wrap .text_box .box {margin-top: 15px; padding: 15px;}
    .detail_box .box_wrap .text_box .box span.ring {display: block; padding-left: 10px; line-height: 22px; background-size: 5px 5px; background-position: 0 9px;}
    .popup .popup_inner .slide_box.popup_img {padding: 0 40px;}
    .popup .popup_inner .slide_box.popup_img .slick-slider .slick-arrow::after, 
    .popup .popup_inner .slide_box.popup_img .slick-slider .slick-arrow::before {left: calc(50% - 11px); top: calc(50% - 3px); width: 23px; height: 3px; border-radius: 3px;}
    .popup .popup_inner .slide_box.popup_img .slick-slider .slick-arrow::before {top: calc(50% - 2px);}
    .popup .popup_inner .slide_box.popup_img .slick-slider .slick-prev.slick-arrow {top: calc(50% - 10px); left: -40px;}
    .popup .popup_inner .slide_box.popup_img .slick-slider .slick-next.slick-arrow {top: calc(50% - 10px); right: -40px;}
    .popup .popup_inner .slide_box.popup_img .slick-slider .slick-dots {padding: 20px 0 0;}
    .popup .popup_inner .slide_box.popup_img .slick-slider .slick-dots li {width: 6px; height: 6px; margin: 0 3px;}
    
    /* 스와이퍼 제품상세 */



    /*시민의견수렴*/
    .con2_4 > .box_wrap {border-bottom: 0;}
    .con2_4 .detail_box .img_wrap .btn_search {top: 5px; right: 5px; transform: scale(0.8);}

    /*디자인전문회사안내*/
    .step_box3 {margin: 0 15px; padding: 20px 0;}
    .step_box3 li {width: 100%; margin: 0 15px 35px;}
    .step_box3 li:last-child {margin-bottom: 0;}
    .step_box3 li br {display: none;}
    .step_box3 li::after {top: auto; bottom: -32px; left: calc(50% - 13px); width: 26px; height: 28px; background-position: center; background-size: 60%; background-repeat: no-repeat; transform: rotate(90deg);}
    .step_box3 li:first-child::after {display: block;}
    .step_box3 li:last-child::after {display: none;}
    .step_box3 li p.tit {padding: 6px 0; height: 32px; font-size: 12px; line-height: 18px;}
    .step_box3 li:nth-child(4) p.tit {padding: 6px 0;}
    .step_box3 li p.txt {padding: 9px 15px 12px; height: auto; font-size: 12px; line-height: 20px;}
    .step_box3 li:nth-child(4) p.txt span {position: relative; display: inline-block; padding-right: 5px; margin-left:5px;}
    .step_box3 li:nth-child(4) p.txt span:first-child::after {position:absolute; top: 5px; right: -2px; display:block; content: ''; width: 1px; height: 12px; background: #666;}
    .step_box3 li:nth-child(2) p.txt, .step_box3 li:nth-child(3) p.txt, .step_box3 li:nth-child(5) p.txt {padding: 7px 15px 10px;}

    /*서울디자인클리닉신청*/
    .editor_wrap {padding: 15px;}
    .editor_wrap textarea {height: 180px; font-size: 14px;}
    .optionbox_product {width: 100%;}
    .optionbox_product .optionbox {width: calc(100% - 85px) !important;}

    /*서울디자인클리닉안내*/
    .step_box4 {margin: 0 15px;}
    .step_box4 li {display: block; margin-bottom: 35px; background-color: #fff;}
    .step_box4 li p.tit {padding: 10px 30px; width: 100%; text-align: center;}
    .step_box4 li p.txt {padding: 15px; background-color: #f7f8f9;}
    .step_box4 li:nth-child(1) p.txt, .step_box4 li:nth-child(2) p.txt, .step_box4 li:nth-child(3) p.txt {padding-top: 15px;}
    .step_box4 li p.txt span.title {margin-right: 3px;}
    .step_box4 li p.txt::before {top: auto; bottom: -32px; left: calc(50% - 13px); width: 26px; height: 28px; background-position: center; background-size: 60%; background-repeat: no-repeat; transform: rotate(90deg);}
    .step_box4 li:last-child p.txt::before {display: none;}

    /*클리닉신청내역자문상세등록*/
    .talk_box {margin: 0 15px 25px;}
    .talk_box .list_type {justify-content: flex-start;}
    .talk_box .list_type li.date {font-size: 11px; margin-bottom: 3px;}
    .talk_box .type {margin-bottom: 30px;}
    .talk_box .type .box_type {width: 90%; padding: 10px 15px 15px; line-height: 22px;}
    .talk_box .type .box_type a {font-size: 11px;}
    .talk_box .type.question .box_type {border-radius:  0 5px 5px 5px;}
    .talk_box .type.answer .box_type {border-radius:  5px 0 5px 5px;}

    /*전문회사*/
    .thumbnaillist.type02 .list_type, .thumbnaillist.type02 .list_type2 {justify-content: flex-start;}
    .thumbnaillist.type02 .list_type2 {margin-top: 10px;}

    /*아카이브*/
    .con5_1 .box_wrap h3 {font-size: 22px;}
    .archive_box {padding: 30px 20px; margin: 0 15px 20px;}
    .archive_box p.tit1 {font-size: 18px;}
    .archive_box p.tit2 {font-size: 16px; margin: 5px 0 25px;}
    .archive_box ul {display: block; overflow: hidden;}
    .archive_box ul li {position: relative; float: left; padding-top: 0; margin: 0 0; width: calc(50% - 7.5px); height: auto; border: 0;}
    .archive_box ul li:nth-child(1), .archive_box ul li:nth-child(2) {margin-bottom: 15px;}
    .archive_box ul li:nth-child(odd) {margin-right: 15px;}
    .archive_box ul li::after {content: ""; display: block; padding-bottom: 100%; border: 1px solid #0387dc; border-radius: 50%;}
    .archive_box ul li p {position: absolute; top: calc(50% - 36px); width: 100%; height: 100%;}
    .archive_box ul li p span.txt1 {font-size: 16px; border-bottom: 3px solid #0387dc;}
    .archive_box ul li p span.txt2 {margin-top: 15px; font-size: 12px; line-height: 20px;}
    .archive_list {padding: 0 15px;}
    .archive_list .list a {padding: 10px 35px 10px 20px;}
    .archive_list .list::after {width: 8px; height: 8px; top: calc(50% - 5px); right: 15px; border-width: 0 3px 3px 0;}
    .archive_list .list a span.txt1 {font-size: 14px;}
    .archive_list .list a span.txt2 {font-size: 11px;}

    /*멤버쉽*/
    .membership_area {padding-top: 0;}
    .membership_area .write_box {margin: 0 auto; width: 100%;}
    .membership_area .write_box ul {padding: 0 15px;}
    .membership_area .write_box ul li {margin-bottom: 10px;}
    .membership_area .write_box ul li input.txt {padding: 0 10px; font-size: 13px;}
    .membership_area .write_box ul li button.inp_close, .membership_area .write_box ul li button.inp_close {display: none;}
    .membership_area .write_box ul li > label {width: 80px;}
    .membership_area .write_box ul li .inpbox {height: 35px;}
    .membership_area .write_box ul li .check_box input[type=checkbox] + label {font-size: 12px;}
    .membership_area .write_box ul li button {font-size: 12px;}
    .membership_area .write_box > .button_box {margin: 30px 15px 0;}
    .membership_area .write_box > .button_box button {height: 45px; font-size: 15px;}
    .membership_area .step_box {margin-bottom: 25px;}
    .membership_area .step_box li.step {padding: 0 0 10px; width: 100%; display: none;}
    .membership_area .step_box li.step::before {content: ''; position: absolute; left: 0; top: inherit; bottom: 0; width: 100%; height: 2px; background-color: #e8e9ea !important; border-radius: 0; background: none;}
    .membership_area .step_box li.step p {font-size: 12px; font-weight: 500;}
    .membership_area .step_box li.step p.num {display: none;}
    .membership_area .step_box li.step.active {display: block;}
    .membership_area .step_box li.step.active::after {content: ''; position: absolute; left: 0; bottom: 0; height: 2px; background-color: #18a9de;}
    .membership_area .step_box li.step.active p {color: #333;}
    .membership_area .step_box li.step1::after {width: 33.33%;}
    .membership_area .step_box li.step2::after {width: 66.66%;}
    .membership_area .step_box li.step3::after {width: 100%;}
    .membership_area .step_box li.line {display: none;}
    .membership_area .agree_top {margin-bottom: 10px;}
    .membership_area .agree_top h3 {padding-bottom: 5px; margin-bottom: 10px; font-size: 10px; border-bottom: 1px solid #929bac;}
    .membership_area .agree_top .check_box {position: relative; right: inherit; top: 0;}
    .membership_area .agree_area {margin-bottom: 30px;}
    .membership_area .agree_area > p {font-size: 10px; line-height: 15px;}
    .membership_area .check_box input[type=checkbox] + label {font-size: 12px;}
    .membership_area .finish_box h3 {margin-bottom: 25px; font-size: 15px;}
    .membership_area .finish_box .text_box p {margin-bottom: 10px;}
    .membership_area .finish_box .button_box p {margin-bottom: 10px;}

    /*마이페이지*/
    .tabmenu_mypage {margin-bottom: 30px;}
    .tabmenu_mypage ul li {margin-right: 15px;}
    .tabmenu_mypage ul li button {font-size: 14px;}

    /*통합검색*/
    .totalsearch_area .boardlist_top {margin-bottom: 20px;}
    .totalsearch_area .result_txt {font-size: 11px; margin: 0 15px 20px;}
    .totalsearch_area .search_menu {position: relative; margin: 0 15px; width: calc(100% - 30px); height: 40px; background-color: #0387dc;}
    .totalsearch_area .result_area > li > a {display: none;}
    .totalsearch_area .result_area > li .tab_pane {padding-top: 30px;}
    .totalsearch_area .result_area > li dl dt {padding-bottom: 10px; font-size: 18px; background-position: 10px 5px;}
    .totalsearch_area .result_area > li dl dd {padding: 12px 0;}
    .totalsearch_area .result_area > li dl dd a .title_box {padding: 0; display: block; display:-webkit-block;}
    .totalsearch_area .result_area > li dl dd a .title_box h4 {font-size: 14px;}
    .totalsearch_area .result_area > li dl dd a .title_box .date {margin-left: 0; margin-top: 5px; font-size: 10px;}
    .totalsearch_area .result_area > li dl dd a p {margin-bottom: 10px; max-height: 64px; -webkit-line-clamp: 4; line-height: 16px;}
    .totalsearch_area .result_area > li dl dd .nav_list li {font-size: 10px;}
    .totalsearch_area .result_area > li dl dd .nav_list li::after {padding: 0 3px;}
    .totalsearch_area .result_area > li .tab_pane .button_box {margin: 30px auto;}
    .totalsearch_area .result_area > li .tab_pane .btn_more {width: 180px; height: 50px; font-size: 16px;}
    .totalsearch_area .result_area > li .tab_pane .btn_more .icon {margin-left: 10px; width: 14px; height: 14px;}
    .totalsearch_area .result_area > li .tab_pane .btn_more .icon::after,
    .totalsearch_area .result_area > li .tab_pane .btn_more .icon::before {top: 50%;} 

    /*탭메뉴*/
    .tabmenu {z-index: 130; position: relative; padding: 0 15px;}
    .tabmenu .optionbox {display: block;}
    .tabmenu .optionbox::after {border-color: #fff;}
    .tabmenu .optionbox .dropdown-label {line-height: 40px;}
    .tabmenu .dropdown-menu {display: none; display:-webkit-none;}
    .tabmenu.open .optionbox::after, 
    .tabmenu.open .optionbox::before {z-index: 131; right: 10px; top: calc(50% - 1px); width: 9px; height: 2px; border: 0; background-color: #1a2d5a; border-radius: 4px; transform-origin: center;}
    .tabmenu.open .optionbox::before {content: ''; position: absolute; transform: rotate(-45deg);}
    .tabmenu.open .dropdown-menu {position: absolute; left: 15px; top: 0; width: calc(100% - 30px); display: block; display:-webkit-block; background-color: #fff;}
    .tabmenu.open .dropdown-menu li {width: 100%;}
    .tabmenu.open .dropdown-menu li button {position: relative; padding: 0 10px; justify-content: flex-start; width: 100%; color: #1a2d5a; font-size: 10px; text-align: left; border-color: #abc0d6;}
    .tabmenu.open .dropdown-menu li button[data-selected="selected"] {background-color: #fff;}

    /*개인정보처리방침*/
    .con6_1 {margin: 0 15px;}
    .privacy .box {padding: 20px; margin-bottom: 30px; line-height: 22px;}
    .privacy-wrap {line-height: 22px;}
    .privacy-wrap h4 {font-size: 16px; margin: 30px 0 13px;}
    .privacy-wrap .imgbox {margin: 20px 0; text-align: center;}
    .privacy-wrap .imgbox img {width: 100%;}
    .privacy-wrap .mb20 {margin-bottom: 10px !important;}
    .privacy-wrap .mt20 {margin-top: 10px !important;}
    .privacybox {margin: 10px 0 0;}
    .privacybox .right-desc {float: left;}

    .table_privacy {overflow-x: auto;}
    .table_privacy table {width: 994px; margin: 15px 0 10px;}
    .table_privacy table thead th {padding: 12px 10px; line-height: 22px;}
    .table_privacy table tbody th {padding: 11px 10px; line-height: 22px;}
    .table_privacy table td {padding: 11px 10px; line-height: 22px;}
    .table_privacy.index table {width: 100%;}
    .table_privacy.index table thead th {padding: 12px 10px; font-size: 15px;}
    .table_privacy.index table td {padding: 15px; font-size: 13px;}
    .table_privacy.index table td:last-child {padding-left: 25px;}

    /*이용약관*/
    .con6_2 {margin: 0 15px;}
    .rule-index {padding: 20px; border-top: 2px solid #222; border-bottom: 1px solid #e5e5e5; height: 180px; overflow-y: scroll;}
    .rule-index ul {float: none; width: 100%; padding: 0;}
    .rule-index ul + ul {border-left: 0; padding-left: 0; margin-top: 8px;}
    .rule-index ul li {font-weight: 400; margin-top: 8px;}
    .rule-index ul li a {font-size: 13px;}
    article.rule h4 {font-size: 20px; margin-top: 40px;}
    article.rule h5 {font-size: 14px; margin: 30px 0 10px;}
    article.rule p {font-size: 12px; line-height: 22px;}
    article.rule li {line-height: 22px;}
    article.rule ol > li {padding-left: 15px; text-indent: -15px;}

    /*찾아오시는길*/
    .con6_3 {margin: 0 15px;}
    .loc_box {margin-bottom: 30px;}
    .loc_box h2 {margin-bottom: 10px; font-size: 18px;}
    .loc_box .map {position: relative; overflow: hidden; margin-bottom: 10px;}
    .loc_box .map2 {float: none; text-align: center; margin: 20px 0;}
    .loc_box .map2 img {max-width: 320px; width: 100%;}
    .loc_box .map3 img {max-width: 910px; width: 100%;}
    .loc_box .tb_bus {float: none; width: 100%;}
    .loc_box .ul_txt_2 > li {padding: 3px 0 3px 10px;}
    .loc_box .ul_txt_2 > li:before {top: 3px;}
    .loc_box .txt_list_s {padding-left: 10px;}
    .loc_box .table_privacy {overflow-x: hidden;}
    .loc_box .table_privacy table {width: 100%;}

}
@media screen and (max-width:784px) {
    
}
@media screen and (max-width:640px){
    .midarea .subtoparea {height: 280px;}
    .midarea .subtoparea h2 {padding-top: 150px;}
    .midarea .subtoparea.sub1 {background-image: url('/images/web/sub_visual01_m.jpg');} /*공공디자인진흥위원회*/
    .midarea .subtoparea.sub2 {background-image: url('/images/web/sub_visual02_m.jpg');} /*서울우수공공디자인*/
    .midarea .subtoparea.sub3 {background-image: url('/images/web/sub_visual03_m.jpg');} /*서울디자인클리닉*/
    .midarea .subtoparea.sub4 {background-image: url('/images/web/sub_visual04_m.jpg');} /*전문회사*/
    .midarea .subtoparea.sub5 {background-image: url('/images/web/sub_visual05_m.jpg');} /*아카이빙*/
    .midarea .subtoparea.sub6 {background-image: url('/images/web/sub_visual06_m.jpg');} /*마이페이지*/
    .midarea .subtoparea.sub7 {background-image: url('/images/web/sub_visual06_m.jpg');} /*멤버쉽*/
    .midarea .subtoparea.sub8 {background-image: url('/images/web/sub_visual08_m.jpg');} /*통합검색*/
    .midarea .subtoparea.sub9 {background-image: url('/images/web/sub_visual09_m.jpg');} /*기타*/

    /*일반게시판 검색바*/
    .board_top {margin-bottom: 10px; display: block; display:-webkit-block;}
    .board_top > div {margin-bottom: 5px;}
    .board_top > div:last-child {margin-bottom: 0;}
    .board_top .boardschbox {display: flex; display:-webkit-flex;}
    .board_top .boardschbox .select_box {flex: none;}
    .board_top .boardschbox .search_box {width: 100%;}
    .board_top .boardschbox .search_box .inpbox {width: 100%;}

    /*위원회안내*/
    .step_box2 {margin: 40px 15px 25px;}
    .step_box2 li {width: calc(100% - 30px); margin-left: 0; margin-right: 0; margin-bottom: 40px;}
    .step_box2 li:last-child {margin-bottom: 0;}
    .step_box2 li::after {top: auto; bottom: -34px; left: calc(50% - 13px); display: block; width: 26px; height: 28px; transform: rotate(90deg); background-position: center; background-size: 60%; background-repeat: no-repeat;}
    .step_box2 li:first-child::after {display: block;}
    .step_box2 li:last-child::after {display: none;} 
    .step_box2 li:nth-child(5) p.txt {display: none;}

    /*인증제품*/
    .thumbnaillist.type01 > li {width: 100%;}
    
}
@media screen and (max-width:420px){
    .archive_list .list a {display: block;}
    .archive_list .list a span {display: block;}
    .archive_list .list a span.txt2 {margin-top: 5px;}

    .loc_box .map2 img {max-width: 100%;}
    
}
@media screen and (max-width:360px){
    
}
@media screen and (max-width:320px){
    
}