@CHARSET "UTF-8"; /** * 친절학원 검색 (지도) 레이아웃 */ /* 공통 */ body{overflow-y:hidden;} .none_line {border: none !important;} /* 공통 */ /*헤더(배경흰색)*/ header {width: 100%; height: 60px; background-color: white;} header .logo {width: 165px; height: 37px; position: absolute; top: 13px; left: 19px;} header .header_right {float:right; display: table; height:100%;} /*header .menu {position: absolute; top: 22px; right: 293px;}*/ header .menu {display:table-cell; padding-left:10px; vertical-align: middle;} header .menu ul li {float: left; list-style: none; margin-left: 30px; font: 600 14px 'Nanum Gothic'; color: #333;} header .menu ul li a {color: #333;} header .menu ul li .select {color: #ff4e00;} /*header .sub_menu {padding: 5px 10px; position: absolute; top: 18px; right: 90px; font: 12px 'Nanum Gothic'; border-radius: 3px; border: 1px solid #ccc;}*/ header .sub_menu {display:table-cell; padding-left:40px; vertical-align: middle;} header .sub_menu ul {display:inline-block; font: 12px 'Nanum Gothic'; border-radius: 3px; border: 1px solid #ccc; padding:5px 10px;} header .sub_menu ul li {float: left; list-style: none;} header .sub_menu ul .sub_btn1 {color: #666;} header .sub_menu ul .sub_btn2 {color: #ff4e00;} header .sub_menu ul .sub_btn2 img {margin-left: 5px;} header .sub_menu ul .bar {margin: 0 5px; color: #ccc} /*header .sns_btn {position: absolute; top: 18px; right: 20px; }*/ header .sns_btn {display:table-cell; padding-left:10px; vertical-align: middle;} header .sns_btn ul li {float: left; margin-right: 3px; list-style: none;} header .sns_btn ul li a {display:inline-block;} /*헤더(배경흰색)*/ header .menu select{display:none;} @media all and (max-width: 1189px) { header .menu ul{display:none;} /*header .menu select{display:block; width:150px; height: 25px; border: 1px solid #ccc; font-family: 'Nanum Gothic'; font-size: 12px; color: #333;} */ header .menu select{display:block; border: 1px solid #ccc; font-family: 'Nanum Gothic'; font-size: 12px; color: #333;} header .menu {position: absolute; top: 19px; right: 240px;} } @media all and (min-width: 1190px) { header .menu ul{display:block;} header .menu select{display:none;} } #footer_tab {font: 12px '돋움', dotum, sans-serif; background-color: #f7f7f7; border-top: 1px solid #d7d7d7; box-sizing: border-box; text-align: right; overflow: hidden; height: 27px;} #footer_tab a {color: #666; font-size: 11px; margin: 7px 10px; display: block;} #footer .close_btn {position: absolute; top: 10px; right: 10px;} #footer{font: 12px '돋움', dotum, sans-serif; position: fixed; bottom: 0; right: 0; z-index: 1000; width: 100%; min-width: 980px; height:175px; padding-top:50px; background:#fff; border-top: #ededed 1px solid; box-sizing: border-box;} #footer .wrap{width:980px;margin:auto;} #footer .left{margin-top:12px; float: left;} #footer .copyright{height:60px;margin-left:244px;} #footer .copyright p {line-height:20px;color:#999;} #footer .copyright p span {margin-right: 10px; font-weight: bold;} /* 푸터 */ /** footer {font: 12px '돋움'; height:175px; background:#fff; border-top: #ededed 1px solid;} footer .content {width: 980px; margin: 0 auto; overflow: hidden; position: relative; text-align:center; margin-top:45px;} footer #footer_tab a {color: #666; font-size: 11px; margin: 7px 10px; display: block;} footer .content .logo {margin-top:12px; margin-right:30px;} footer .content .logo {margin-top:12px; margin-left:244px;} footer .content .copyright p {text-align:left; line-height:20px; color:#999;} */ /* 푸터 */ /*왼쪽메뉴*/ #map_list {width: 437px; overflow-y: scroll; overflow-x: hidden; background-color: #fff; float: left; font: 13px 'Nanum Gothic';} /*검색박스*/ #search_box {width: auto; height: 40px; position: absolute; top: 10px; left: 200px;} #search_box input[type="text"] {border: 2px solid #ff4e00; width: 320px; height: 40px; box-sizing: border-box; padding: 5px;float:left;position:relative;} #search_box input[type="button"] {width: 40px; height: 40px; background-image: url('../images/201606/search/search_btn.png'); border: none; vertical-align: top;float:left;position:absolute;} /*검색조건변경*/ #map_list #check_box #check_top {height: 35px; background-color: #f7f7f7; border-bottom: #ddd 1px solid; box-sizing: border-box;} #map_list #check_box #check_top a img {margin: 5px; float: right;} #map_list #check_box #check_top span {padding: 10px; float: left;} #map_list #check_box #check_list {height: 150px; box-sizing: border-box; width:100%; float:left; height:100%;} #map_list #check_box #check_list table {margin: 5% 0 5% 5%; width: 70%; float: left;} #map_list #check_box #check_list table td{padding-bottom: 5px;} #map_list #check_box #check_list input[type="radio"] {vertical-align: middle; margin-right: 3px; width: 15px; height: 15px;} #map_list #check_box #check_list label {text-decoration: none; color: #666; } #map_list #check_box #check_list label:hover {text-decoration: underline; color: #ff4e00;} #map_list #check_box #check_list .select {font-weight: 600;} #map_list #check_box #check_list .check_btn {width: 18%; float: left; margin: 5% 2% 0 0;} #map_list #check_box #check_list .check_btn li {margin-bottom: 5px; list-style: none; text-align: right;} #map_list #check_box #check_list #check_close a {text-decoration: none; color: #666; padding-top: 5px; display: block;} #map_list #check_box #check_list #check_close a img {vertical-align: middle;} /*학원리스트*/ #map_list #list_box #list_title1 {background-color: #ff4e00; width: 100%; height: 35px; box-sizing: border-box; padding: 10px; font-weight: 600; color: #fff; float:left;} #map_list #list_box #list_title1 span { color: #ffe400; font-weight: normal;} #map_list #list_box #list_title2 {background-color: #e7e7e7; width: 100%; height: 35px; box-sizing: border-box; padding: 10px; font-weight: 600; color: #666;float:left;} #map_list #list_box #list_title2 span { color: #333; font-weight: normal;} #map_list #list_box .list_arrow {position: absolute; right: 20px; top: 55px;} /*친절PLUS학원*/ #map_list #list_box .list_1 {float:left;} #map_list #list_box .list_1 a {width: 500px; height: 125px; border-bottom: #f0d6c9 1px solid; background-color: #fff3ed; position: relative; display: block;} #map_list #list_box .list_1 .list_img{width: 180px; height: 125px; position: relative; float: left; background-image: url('../images/201606/search/img_bg1.png'); border-right: #f0d6c9 1px solid;} /*#map_list #list_box .list_1 .list_img {width: 180px; height: 125px; position: relative; float: left; border-right: #f0d6c9 1px solid;}*/ #map_list #list_box .list_1 .list_img .mark {position: absolute; top: 10px; left: 10px;} #map_list #list_box .list_1 dl {width: 319px; height: 125px; padding: 15px; box-sizing: border-box; float: left;} #map_list #list_box .list_1 dl dt {font: bold 16px '돋움'; color: #333; margin-bottom: 10px;} #map_list #list_box .list_1 dl dd {margin-bottom: 10px; line-height: 17px; color: #888;} #map_list #list_box .list_1 a:hover {background-color: #ffefe8;} #map_list #list_box .list_1 dl .keyword {display: block; width: 260px; height: 25px; background-color: #fff; box-sizing: border-box; border: 1px solid #f0d6c9; padding: 3px 10px;} /*친절학원*/ #map_list #list_box .list_2 a {width: 500px; height: 125px; border-bottom: #ddd 1px solid; position: relative; display: block;} #map_list #list_box .list_2 .list_img{width: 180px; height: 125px; position: relative; float: left; background-image: url('../images/201606/search/img_bg2.png'); border-right: #ddd 1px solid;} /*#map_list #list_box .list_2 .list_img img{width: 180px; height: 125px; position: relative; float: left; border-right: #ddd 1px solid;}*/ /*#map_list #list_box .list_2 .list_img .mark {position: absolute; top: 10px; left: 10px;}*/ #map_list #list_box .list_2 dl {width: 319px; height: 125px; padding: 15px; box-sizing: border-box; float: left;} #map_list #list_box .list_2 dl dt {font: bold 16px '돋움'; color: #333; margin-bottom: 10px;} #map_list #list_box .list_2 dl dd {margin-bottom: 10px; line-height: 17px; color: #888;} #map_list #list_box .list_2 .icon li {list-style: none; float: left; margin-right: 5px;} #map_list #list_box .list_2 a:hover, .list_03 a:hover {background-color: #fafafa;} #map_list #list_box .list_2 dl .keyword {display: block; width: 260px; height: 25px; background-color: #fff; box-sizing: border-box; border: 1px solid #d7d7d7; padding: 3px 10px;} /*친절약속 미등록학원*/ #map_list #list_box .list_3 a {width: 500px; height: 90px; border-bottom: #ddd 1px solid; position: relative; display: block;} #map_list #list_box .list_3 .list_img{width: 180px; height: 90px; position: relative; float: left; background-image: url('../images/201606/search/img_bg3.png'); border-right: #ddd 1px solid;} #map_list #list_box .list_3 dl {width: 319px; height: 90px; padding: 17px; box-sizing: border-box; float: left;} #map_list #list_box .list_3 dl dt {font: bold 14px '돋움'; color: #888; margin-bottom: 8px;} #map_list #list_box .list_3 dl dd {margin-bottom: 10px; line-height: 17px; color: #aaa;} #map_list #list_box .list_3 .icon li {list-style: none; float: left; margin-right: 5px;} /*지도영역*/ #map {width: 100%; height: 100%;} /*지도말풍선영역*/ #map_tooltip {border: 1px solid #666666; background-color: #fff; padding: 15px 20px 25px; position: relative; letter-spacing: -0.5px; min-width: 355px; box-sizing: border-box;} #map_tooltip .close_btn {position: absolute; top: 10px; right: 10px;} #map_tooltip .tooltip_title {border-bottom: 1px solid #dddddd; padding-bottom: 5px; margin-bottom: 15px} #map_tooltip .tooltip_title h1 {color: #333; font: 600 16px 'Nanum Gothic'; margin-right: 25px;} #map_tooltip .tooltip_title h1 img {margin-right: 5px; vertical-align: middle;} #map_tooltip .tooltip_title h1 a {margin-left: 10px;} #map_tooltip .tooltip_profile {width: 60px; height: 60px; border-radius: 50%; background-image: url('../images/201606/search/tooltip_profile.png'); margin-right: 15px; float: left; background-size:cover;} #map_tooltip .tooltip_contents {text-align: left; color: #666; font: 13px 'Nanum Gothic'; line-height: 18px; } #map_tooltip .tooltip_contents th {font: 600 14px 'Nanum Gothic'; color: #222; padding-bottom: 5px; text-align: left;} #map_tooltip .tooltip_contents td {vertical-align: top;} #map_tooltip .tooltip_contents .academy_keyword {height: 20px; margin-top: 5px;} #map_tooltip .tooltip_contents .academy_keyword li {list-style: none; float: left; font: 11px 'Nanum Gothic'; padding: 3px 5px; border: 1px solid #ccc; margin-right: 5px; border-radius: 3px; background-color: #fff} #map_tooltip .tooltip_tail {position: absolute; bottom: -23px; left: 35%;} /*학원상세페이지영역*/ #info_wrap {font: 13px 'Nanum Gothic'; letter-spacing: -0.5px; background-color: rgba(0,0,0,0.2); width: 100%; height: 100%; position: absolute; top: 61px; right: 0; z-index: 999; overflow:scroll;} #info_wrap {background-color: rgba(0,0,0,0.2); width: 100%; height: 100%; position: absolute; top: 61px; right: 0; z-index: 999; overflow:auto;} #info_wrap #info_box {box-sizing: border-box; overflow: hidden; width: 800px; background-color: #fff; margin: 50px auto 0; border-top: 3px solid #ff4e00; padding: 40px 40px 60px; position: relative; box-shadow: 0 0 1px;} #info_wrap #info_box .close_btn {position: absolute; top: 10px; right: 10px;} #info_wrap #info_box .info_header {padding-bottom: 15px; border-bottom: 2px solid #3e3e3e; margin-bottom: 30px;} #info_wrap #info_box .info_header .info_plusmark {float: left; margin-right: 5px;} #info_wrap #info_box .info_header h1 {font: 600 25px 'Nanum Gothic'; color: #222; letter-spacing: -0.7px;} #info_wrap #info_box .info_aside {width: 260px; border: 1px solid #e3e3e3; padding: 30px 10px; background-color: #f7f7f7; text-align: center; float: left; box-sizing: border-box; display: block;} #info_wrap #info_box .info_aside .profile_img {width: 80px; height: 80px; border: 1px solid #ccc; border-radius: 50%; margin: 0 auto; background: url(../images/201606/search/info_profile_img.png) no-repeat; background-color: #fff; background-size: cover;} #info_wrap #info_box .info_aside .profile_name {font: 600 17px 'Nanum Gothic'; color: #222; margin: 10px 0 8px;} #info_wrap #info_box .info_aside .profile_number {width: 210px; height: 45px; background-color: #ff4e00; margin: 20px auto 10px; font: 600 15px 'Nanum Gothic'; color: #fff; border-radius: 3px; padding-top: 13px; box-sizing: border-box;} #info_wrap #info_box .info_aside .profile_number img {margin-right: 5px; vertical-align: bottom;} #info_wrap #info_box .info_aside .gray_text {font: 12px 'Nanum Gothic'; color: #aaa; line-height: 16px;} #info_wrap #info_box .info_contents {width: 430px; float: left; margin-right: 30px; box-sizing: border-box;} #info_wrap #info_box .info_contents .contents_title .contents_btn {margin-top: 5px; display: block;} #info_wrap #info_box .info_contents .contents_01 {position: relative; padding: 0 0 20px 105px;} #info_wrap #info_box .info_contents .contents_01 .contents_title {position: absolute; top: 0; left: 0; font: 600 14px 'Nanum Gothic'; color: #222;} #info_wrap #info_box .info_contents .contents_01 .academy_keyword {height: 20px; margin-top: 5px;} #info_wrap #info_box .info_contents .contents_01 .academy_keyword li {list-style: none; float: left; font: 11px 'Nanum Gothic'; padding: 3px 5px; border: 1px solid #ccc; margin-right: 5px; border-radius: 3px; background-color: #fff} #info_wrap #info_box .info_contents .contents_01 .contents_01_text {font: 13px 'Nanum Gothic'; color: #666;} #info_wrap #info_box .info_contents .contents_01 .contents_01_text .question_icon {vertical-align: bottom; margin-left: 5px; cursor: pointer;} #info_wrap #info_box .info_contents .contents_01 .info_tooltip {position: absolute; top: -10px; left: 215px; z-index: 9; background-color: #fff; width: 290px; height: 80px; border: 1px solid #666; box-sizing: border-box; padding: 13px 18px; line-height: 17px} #info_wrap #info_box .info_contents .contents_01 .info_tooltip .gray_text {font-size: 12px; color: #aaa;} #info_wrap #info_box .info_contents .contents_01 .info_tooltip img {position: absolute; top: 15px; left: -14px} #info_wrap #info_box .info_contents .contents_02 {border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; min-height: 70px; position: relative; padding: 20px 0 20px 105px;} #info_wrap #info_box .info_contents .contents_02 .contents_title {position: absolute; top: 20px; left: 0; font: 600 14px 'Nanum Gothic'; color: #222;} #info_wrap #info_box .info_contents .contents_02 .contents_02_text {font: 13px 'Nanum Gothic'; color: #666;} #info_wrap #info_box .info_contents .contents_02 .contents_02_text .address_number {margin-top: 5px; display: block;} #info_wrap #info_box .info_contents .contents_02 .contents_02_text .address_number img {vertical-align: bottom; margin-right: 3px;} #info_wrap #info_box .info_contents .contents_02 .subway_list {background-color: #f7f7f7; margin-top: 10px;} #info_wrap #info_box .info_contents .contents_02 .subway_list li {list-style: none; padding: 8px 10px; border-bottom: 1px dashed #e1e1e1;} #info_wrap #info_box .info_contents .contents_02 .subway_list li span {font-size: 11px; padding: 2px; margin-right: 5px;} #info_wrap #info_box .info_contents .contents_02 .subway_list .none_line {border-bottom: none;} #info_wrap #info_box .info_contents .contents_03 {position: relative; padding: 20px 0 20px 105px;} #info_wrap #info_box .info_contents .contents_03 .contents_title {position: absolute; top: 20px; left: 0; font: 600 14px 'Nanum Gothic'; color: #222;} #info_wrap #info_box .info_contents .contents_03 .info_tuition {width: 100%} #info_wrap #info_box .info_contents .contents_03 .info_tuition th {font: 13px 'Nanum Gothic'; color: #666; padding-bottom: 10px;} #info_wrap #info_box .info_contents .contents_03 .info_tuition td {text-align: right; color: #222; padding: 0 0 10px 10px;} #info_wrap #info_box .info_contents .contents_03 .info_tuition .bold {font-weight: 600; padding: 0 10px 10px;} #info_wrap #info_box .info_contents .contents_03 .info_tuition .bold span {color: #ff4e00;} #info_wrap #info_box .info_container {clear: both; width: 100%;} #info_wrap #info_box .info_container .contents_title {font: 600 14px 'Nanum Gothic'; color: #222;} #info_wrap #info_box .info_container .board_table {width: 100%; margin-top: 10px; border: 1px solid #acacac; border-left: none; border-right: none;} #info_wrap #info_box .info_container .board_table th {background-color: #f7f7f7; font: normal 13px 'Nanum Gothic'; color: #222; padding: 8px; border-bottom: 1px solid #ededed;} #info_wrap #info_box .info_container .board_table td {text-align: center; padding: 8px; border-bottom: 1px solid #ededed;} #info_wrap #info_box .info_container .board_table .left {text-align: left;} #info_wrap #info_box .info_container .info_tab {width: 720px; height: 60px; clear: both; padding-top: 40px;} #info_wrap #info_box .info_container .info_tab li {width: 180px; height: 60px; list-style: none; float: left; border: 1px solid #d7d7d7; border-right: 0; box-sizing: border-box;} #info_wrap #info_box .info_container .info_tab .tab_btn_1 {background: url('../images/201606/search/info_tab_1.png') 180px 0;} #info_wrap #info_box .info_container .info_tab .tab_btn_2 {background: url('../images/201606/search/info_tab_2.png') 180px 0;} #info_wrap #info_box .info_container .info_tab .tab_btn_3 {background: url('../images/201606/search/info_tab_3.png') 180px 0;} #info_wrap #info_box .info_container .info_tab .tab_btn_4 {background: url('../images/201606/search/info_tab_4.png') 180px 0; border-right: 1px solid #d7d7d7;} #info_wrap #info_box .info_container .info_tab .select {background-position: 0; border-top: 0; border-bottom: 0;} /*면허시험장용 상세페이지 추가*/ #info_wrap #info_box .info_header .info_exammark {float: left; margin-right: 5px;} #info_wrap #info_box .info_contents_exam{width: 720px; float: left; margin-right: 30px; box-sizing: border-box;} #info_wrap #info_box .info_contents_exam .contents_01, #info_wrap #info_box .info_contents_exam .contents_02, #info_wrap #info_box .info_contents_exam .contents_03 {position: relative; padding: 20px 0 20px 105px; border-bottom: 1px solid #cccccc;} #info_wrap #info_box .info_contents_exam .contents_title {position: absolute; top: 20px; left: 0; font: 600 14px 'Nanum Gothic'; color: #222;} #info_wrap #info_box .info_contents_exam .contents_02 .subway_table {background-color: #f7f7f7; margin-top: 10px;} #info_wrap #info_box .info_contents_exam .contents_02 .subway_table td {width: 307px; padding: 8px 10px; border-bottom: 1px dashed #e1e1e1; box-sizing: border-box; line-height: 18px} #info_wrap #info_box .info_contents_exam .contents_02 .subway_table td span {font-size: 11px; padding: 2px; margin-right: 5px;} /*친절PLUS학원*/ #list_box .premium_academy {border-bottom: 1px solid #e3e3e3; width: 100%; height: 100%; box-sizing: border-box; position: relative; padding: 10px 0 10px 10px; float:left;} #list_box .premium_academy .academy_thumb {width: 33%; height:85px; float: left; position: relative;} /*height: 73%; background: url(../images/201606/search/academy_img01.png); */ #list_box .premium_academy .academy_thumb .plus_icon {position: absolute; top: 5px; left: 5px;} #list_box .premium_academy .academy_container {letter-spacing: -0.5px; width: 63%; float: left; margin: 0.5% 0 0 4%;} #list_box .premium_academy .academy_container .plus_title {font: 600 16px 'Nanum Gothic'; color: #222; margin-bottom: 10px;} #list_box .premium_academy .academy_container .academy_contents li {font: 13px 'Nanum Gothic'; color: #888; list-style: none; margin-bottom: 3px; padding-left: 18px;} #list_box .premium_academy .academy_container .academy_contents .distance {background: url(../images/201606/search/distance_icon01.png) no-repeat;} #list_box .premium_academy .academy_container .academy_contents .tel {background: url(../images/201606/search/tel_icon01.png) no-repeat;} #list_box .premium_academy .academy_container .academy_keyword {margin-top: 10px;} #list_box .premium_academy .academy_container .academy_keyword li {list-style: none; float: left; font: 11px 'Nanum Gothic'; padding: 3px 5px; border: 1px solid #ccc; margin-right: 3px; border-radius: 3px; background-color: #fff} #list_box .premium_academy .arrow {width: 10px; height: 10px; background-color: #ff4e00; position: absolute;bottom: 0; right: 0;} #list_box .premium_academy .arrow img {padding: 0px 0px 5px 0px;} /*친절학원*/ #list_box .plus_academy {border-bottom: 1px solid #e3e3e3; width: 100%; height: 100%; box-sizing: border-box; position: relative; padding: 10px 0 10px 10px; float:left;} #list_box .plus_academy .academy_thumb {width: 33%; height:85px; float: left; position: relative;} /*height: 73%; background: url(../images/201606/search/academy_img01.png); */ #list_box .plus_academy .academy_container {letter-spacing: -0.5px; width: 63%; float: left; margin: 0.5% 0 0 4%;} #list_box .plus_academy .academy_container .plus_title {font: 600 16px 'Nanum Gothic'; color: #222; margin-bottom: 10px;} #list_box .plus_academy .academy_container .academy_contents li {font: 13px 'Nanum Gothic'; color: #888; list-style: none; margin-bottom: 3px; padding-left: 18px;} #list_box .plus_academy .academy_container .academy_contents .distance {background: url(../images/201606/search/distance_icon02.png) no-repeat;} #list_box .plus_academy .academy_container .academy_contents .tel {background: url(../images/201606/search/tel_icon02.png) no-repeat;} #list_box .plus_academy .academy_container .academy_keyword {margin-top: 10px;} #list_box .plus_academy .academy_container .academy_keyword li {list-style: none; float: left; font: 11px 'Nanum Gothic'; padding: 3px 5px; border: 1px solid #ccc; margin-right: 3px; border-radius: 3px; background-color: #fff} #list_box .plus_academy .arrow {width: 10px; height: 10px; background-color: #cccccc; position: absolute;bottom: 0; right: 0; } #list_box .plus_academy .arrow img {padding: 0px 0px 5px 0px;} /*미등록학원*/ #list_box .basic_academy {border-bottom: 1px solid #e3e3e3; width: 100%; height: auto; box-sizing: border-box; position: relative; padding: 10px 0 10px 10px; float:left;} #list_box .basic_academy .academy_thumb {width: 33%; height:85px; float: left; position: relative;} /*height: 73%; background: url(../images/201606/search/academy_img02.png); */ #list_box .basic_academy .academy_container {letter-spacing: -0.5px; width: 63%; float: left; margin: 0.5% 0 0 4%;} #list_box .basic_academy .academy_container .plus_title {font: 600 15px 'Nanum Gothic'; color: #666; margin-bottom: 10px;} #list_box .basic_academy .academy_container .academy_contents li {font: 13px 'Nanum Gothic'; color: #aaa; list-style: none; margin-bottom: 3px;} #list_box .basic_academy .arrow {width: 10px; height: 10px; background-color: #cccccc; position: absolute;bottom: 0; right: 0;} #list_box .premium_academy:hover, #list_box .plus_academy:hover, #list_box .basic_academy:hover {background-color: #f7f7f7; cursor: pointer;}