/** * OLYM Cascading Style Sheets * File Name : board.css * Description : 게시판 스타일시트 * Author : Web business Team / Choi Hyun Mi * Email : designtj@olymcompnay.com * Date : 2017.06.01 * Update : 2018.10.11 * Copyright(c) 2018 OLYM Communications. All Rights Reserved. */ /* ///////////////////////////포인트컬러 변경/////////////////////////// #00a53c - 현 사이트의 포인트 컬러입니다. 검색해서 모두 바꾸기 해주세요! /////////////////////////////////////////////////////////////////// */ /***********************************************************/ /******************** 게시판 공통사항 시작 *******************/ /***********************************************************/ /* 반응형 게시판 필드 숨기기 */ .pc_x { display:none;} .mobile_o { display:none;} .ext_wrapper .table_board_write th{text-align: center; ;} .ext_form_wrapper{display: none; } .ext_form_wrapper.active{display: block; } .ext_close{position: absolute; top: 10px; right: 10px; font-size: 24px; line-height: 24px; padding: 4px; border: 1px #ddd solid; width: 28px; height: 28px; text-align: center; ;} #board .ext_close a{display: block; width: 100%; height: 100%; ;} #board .ext_close a:hover{text-decoration: none !important; } .ext_form_wrapper .ext_blocker{position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 2000; top: 0; left: 0; } .ext_form_wrapper.active .ext_form{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 950px; height: 415px; background-color: white; z-index: 2100; box-shadow: 0 4px 8px rgba(32, 33, 36, 0.28); transition: 0.3s; border-radius: 5px; padding: 14px 14px 0 14px; overflow-y: auto; } .ext_form_wrapper.active2 .ext_form{ height: 800px; ;} .ext_form_wrapper .ext_title{font-size: 24px; margin-bottom: 12px; ;} .ext_form_wrapper .ext_title.ext_title_margin{margin-top: 14px; } .ext_form_wrapper .input_form{width: 100%; } .ext_form_wrapper label.explain{ color: red; display: block; margin-top: 4px; } .ext_form_wrapper .input_form[type=date]{width: 138px; } .ext_form_wrapper .input_form[type=file]{width: 290px; } .ext_form_wrapper label{margin: 0 8px 0 2px; } .ext_form_wrapper .btn_wrapper{padding: 12px 0; text-align: center; ;} .ext_form_wrapper .btn_wrapper .btn{margin: 0 auto; } .ext_title_wrapper{position: relative; } .ext_title_wrapper .btn{position: absolute; right: 0; top: 10px; } .ext_title_wrapper .btn2{position: absolute; right: 70px; top: 10px; } .ext_form_wrapper .refund_wrapper dt{ display: inline-block; width: 70px; } .ext_form_wrapper .refund_wrapper dd{ display: inline-block; width: calc(100% - 80px); position: relative; } .ext_form_wrapper .refund_wrapper dd::before{content: " : "; position: absolute; left: -7px; top: 5px; } .ext_selector{position: absolute; right: 0; top: 11px; } .ext_search{display: none; } .ext_search.active{display: inline-block; } #place_list li { float:left; width:33.33%; } #place_list li .con_box {margin:0 auto 30px auto; width:360px;} #place_list li .img { background:#f1f1f1; width:360px; height:240px; overflow:hidden; text-align:center; position:relative;} #place_list li a { transition: all 1.5s ease; } #place_list li a img { position:absolute; min-width:100%; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0; transition: all 1.5s ease;} #place_list li a:hover img { transform: scale(1.1, 1.1);} #place_list li a .over_desc {color: #000; position: absolute; bottom: 0; left: 0; right: 0; background:rgba(255,255,255,0.9); overflow: hidden; width: 100%; height: 0; transition: .3s ease;} #place_list li a .img .over_desc .text .p_desc1 {font-weight:400;font-family: 'Jal_Onuel';letter-spacing:0.05em;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-word; } #place_list li a .img .over_desc .text .p_desc2 {font-size:14px; color:#d4be58; padding-top:5px;} #place_list li a .img .over_desc .text { text-align:center; position: absolute; overflow: hidden; top: 50%; left: 50%; width:70%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);} #place_list li a:hover .img .over_desc {height:50%;} #place_list li a .desc { padding:20px;} #place_list li a .p_title { text-align:center; font-size:21px; font-weight:500; color:#000; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;font-family: 'Jal_Onuel';letter-spacing:0.05em; } #place_list li a .p_title2 { font-size:16px; color:#666; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #place_list li a .p_title3 { font-size:14px; color:#3974bd; padding-top:30px;} #place_list li .p_btn { padding:10px 20px;} @media all and (max-width:1260px) { #place_list li { width:50%; margin-right:0;} #place_list li .con_box {width:90%; max-width:370px;} #place_list li a .desc { width:100%; box-sizing:border-box;} } @media all and (max-width:1000px) { #place_list li { width:50%;} } @media all and (max-width:767px) { #place_list li { width:100%;} #place_list li .con_box {max-width:300px;} #place_list li .img { width:300px; height:203px;} #place_list li a .img .over_desc .text .p_desc1 {font-size:17px;} #place_list li a .img .over_desc .text .p_desc2 {font-size:13px;} #place_list li a .p_title { font-size:17px;} #place_list li a .p_title2 { font-size:13px;} } @media all and (max-width:440px) { #place_list { border-top:0; padding:10px 0 0 0; } #place_list li a .desc { height:auto;} } @media all and (max-width:340px) { #place_list li .con_box {max-width:260px;} #place_list li .img { width:260px; height:173px;} } #people_read { border-top:1px solid #000; /* border-bottom:1px solid #ddd; padding:50px 0; */ padding: 50px 0 0 0; display:table; width: 100%; } .img_bottom_box{padding-top: 30px; padding: 50px 0 0 0; text-align: center; } .img_bottom_border{ border-bottom:1px solid #ddd; padding-top: 50px; margin-bottom: 30px;} #people_read .clearfix{display: table-row; width: 100%; } #people_read .img_box {display:table-cell; vertical-align:middle; width:50%; text-align:center;} #people_read .img_box img { width:auto; max-height:600px; max-width:600px;} #people_read .img_box .box_in { background:#efefef; height:400px;} #people_read .img_box .tab > ul { width:212px; margin:0 auto;} #people_read .img_box .tab > ul > li { float:left; width:100px; height:50px; padding:0 3px;} #people_read .img_box .tab > ul > li a { position:relative; display:block; text-align: center; border-radius: 6px; padding: 5px 0 7px 0; background:#e2e8f2; color:#666;} #people_read .img_box .tab > ul > li a.on, #people_read .img_box .tab > ul > li a:hover { background: #000; color: #fff; } #people_read .img_box .tab > ul > li a.on::after { content: ""; position: absolute; top: 99%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;} #people_read .p_sm { font-size:13px; padding-top:25px; color:#afafaf; text-align:center;} #people_read .desc_box { display:table-cell; vertical-align:middle; width:50%; box-sizing:border-box; position:relative; padding:30px; background:#f9f9f9} #people_read .desc_box .right_cate { position:absolute; top:25px; right:0;} #people_read .desc_box .right_cate .title { color:#2a2a2a; font-family: 'GmarketSansBold'; font-size:20px; z-index:110; position:relative;} #people_read .desc_box .right_cate .nu { display:inline-block; font-family: 'GmarketSansBold'; font-size:50px; background:#d4be58; width:100px; height:100px; border-radius:100%; text-align:center; color:#fff; box-sizing:border-box; padding-top:45px; margin-left:-20px; z-index:100;} #people_read .desc_box .p_desc2 { color:#d4be58; font-weight:600; padding:40px 0 0 10px;} #people_read .desc_box h4 { font-size:34px; color:#000; font-family: 'Jal_Onuel'; font-weight:600; letter-spacing:0.05em; padding:0 0 20px 8px;} #people_read .desc_box .p_desc1 { font-size:20px; color:#666; font-family: 'Jal_Onuel'; letter-spacing:0.05em; line-height:1.6em; padding:0 0 20px 8px;} #people_read .desc_box table th { padding:5px 0; width:20%; font-size:16px; color:#333; font-weight:normal; vertical-align:top; text-align:left;font-family: 'Jal_Onuel';letter-spacing:0.05em; } #people_read .desc_box table th:before { content:"ㆍ";} #people_read .desc_box table td { padding:5px 0; font-size:16px; color:#666;font-family: 'Jal_Onuel';letter-spacing:0.05em; } #people_read .sns_box .sns { display:inline-block; width:40px; height:40px; text-indent:-9999px; margin-right:10px;} #people_read .sns_box .sns1 {background:url(/admode/module/board/images/kor/bg_website.png) no-repeat center; background-size:100%; } #people_read .sns_box .sns2 {background:url(/admode/module/board/images/kor/bg_facebook.png) no-repeat center; background-size:100%; } #people_read .sns_box .sns3 {background:url(/admode/module/board/images/kor/bg_naverblog.png) no-repeat center; background-size:100%; } #people_read .sns_box .sns4 {background:url(/admode/module/board/images/kor/bg_instagram.png) no-repeat center; background-size:100%; } #people_read .sns_box .sns5 {background:url(/admode/module/board/images/kor/bg_sns_share.png) no-repeat center; background-size:100%; } h5.read_title { font-size:30px; font-weight:600; color:#000; position:relative; display:inline-block;} h5.read_title:after { content:""; position:absolute; top:-3px; right:-13px; background:#d4be58; border-radius:100%; width:8px; height:8px; } #people_read .box_con { border-top:3px solid #000;padding:80px 0; margin-top:80px;} #people_read .box_intro { font-size:16px; padding:10px 0;} #people_read .box_intro iframe {display: block;margin: 0 auto;min-height:700px} #people_read .box_intro * { line-height:1.8em !important;} @media all and (max-width:1260px) { #people_read .desc_box .p_desc1 { font-size:19px;} h5.read_title { font-size:24px; margin:60px 0 20px 0;} } @media all and (max-width:1000px) { #people_read {display:block; padding:30px 0;} #people_read .img_box { display:block; width:100%;} #people_read .img_box .box_in { height:300px;} #people_read .img_box img { max-height:500px; max-width:100%;} #people_read .p_sm { font-size:11px; padding:15px 20px 0 15px;} #people_read .desc_box { display:block; width:100%; margin-top:30px; padding:20px;} #people_read .desc_box .right_cate { right:20px;} #people_read .desc_box .p_desc1 { font-size:17px;} #people_read .desc_box .p_desc2 { padding:25px 0 0 10px;} #people_read .desc_box .right_cate .nu { font-size:30px; width:60px; height:60px; padding-top:20px; margin-left:-20px;} #people_read .desc_box h4 { font-size:30px; text-align:center;} #people_read .desc_box table { padding:10px 0;} #people_read .desc_box table th { font-size:13px; width:80px;} #people_read .desc_box table td { font-size:13px;} h5.read_title { font-size:18px; margin:20px 0 10px 0;} #people_read .box_con {padding:40px 0; margin-top:40px;} #people_read .box_intro { font-size:14px; } #people_read .box_intro iframe {min-height:300px} } #board_top .box_sort { float:right;} #board_top .box_sort ul li { float:left; padding:0 20px; background:#fff url('/project/design/contents/bg_sort.gif') no-repeat left center;} #board_top .box_sort ul li.dream{padding:0 19px;} #board_top .box_sort ul li:first-child { background:none;} #board_top .box_sort ul li a { color:#000;} #board_top .box_sort ul li a.on, #board_top .box_sort ul li a:hover { color:#3155a4; } #board_top .box_sort ul li a.on { background:#fff url('/project/design/contents/icon_sort_on.gif') no-repeat left center; background-size:16px; padding-left:20px;} .club_search { width:50%; float:right; font-size:20px; border-bottom:3px solid #000; color:#c1c1c1; margin-bottom:40px;} .club_search select { border:none; height:60px; width:25%; padding-left:20px; color:#000; box-sizing:border-box; font-weight:600; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('/project/design/com/bg_ar1.png') no-repeat 90% center;} .club_search select::-ms-expand{ display:none /* 화살표 없애기 for IE10, 11*/ } .club_search input[type="text"] { border:none; height:60px; width:63%; font-weight:600;} .club_search input[type="submit"] {border:none; height:60px; width:10%; background:url("/project/design/com/btn_search1.png") no-repeat center; text-indent:-9999px; cursor:pointer;} .club_search.bg { padding:30px;} .club_tab#board_tab > ul { display:table; width:100%;border-left:1px solid #e1e1e1;} .club_tab#board_tab > ul > li { display:table-cell; min-width:9%;} .club_tab#board_tab > ul > li > a { display:block; text-align:center; padding:15px; color:#888; font-weight:500; border-bottom:1px solid #e1e1e1; border-right:1px solid #e1e1e1; height: auto; } .club_tab#board_tab > ul > li > a .num { background:#b5b5b5; padding:5px 0; border-radius:20px; color:#fff; width:66px; margin:5px auto 0 auto;} .club_tab#board_tab > ul > li > a:hover, #board_tab > ul > li.on > a { background:#f4f4f4; color:#000;} .club_tab#board_tab > ul > li > a:hover .num, #board_tab > ul > li.on > a .num { background:#000;} @media all and (max-width:767px) { .mobile_x { display:none !important;} .mobile_o { display:inline-block; float:right; font-size:13px; padding-right:30px;} .pc_x { display:table-cell;} } /* 반응형 게시판 필드 숨기기 END */ /* 게시판 기본 */ #board { position:relative; word-break:break-all !important; color:inherit; } /* 글짜기준으로 줄바꿈, 글자에 공백이 없을때 넓이가 늘어나는 현상을 막기 위함 */ #board img { max-width:100%;} /* 이미지가 게시판영역을 벗어나지 않게 최대 넓이 지정 */ #board b { font-weight:400;} #board a { color:inherit; } #board a:hover { text-decoration:underline !important; } .box_type1 { border:1px dashed #666; padding:20px 30px; color:#666} /* 게시판 상단태그 */ @media all and (max-width:440px) { #board { font-size:0.875em;} } /* 등록된 글이 없습니다 */ td.no_post { text-align:center; height:140px; box-sizing:border-box;} li.no_post { width:100% !important; text-align:center; padding:30px 0 60px 0 !important; height:auto !important;} #faq_list td.no_post { border-top:1px solid #d7d7d7;} #news_list li.no_post { width:100% !important; text-align:center; padding:60px 0 !important; height:auto !important;} /* 게시판 기본 END */ /* 버튼 */ #board .btn { display:inline-block; border:1px solid #ccc; background:#fff; color:#555; padding:5px 15px; border-radius:3px; line-height:1.2em !important; height:auto;} #board .btn:hover { background-color:#f7f7f7; text-decoration:none !important;} #board input.btn { cursor:pointer; _cursor:hand;} #board .btn_em1 { border:1px solid #00a53c; color:#00a53c; font-weight:400;} #board .btn_em1:hover { background:#00a53c; color:#fff;} #board .btn_em2 { border:1px solid #333; color:#333; font-weight:400;} #board .btn_em2:hover { background:#333; color:#fff;} #board .btn_s1 { font-size:12px; padding:2px 7px;} #board .btn_co1 { border:1px solid #888; color:#666;} #board .btn_calendar { display:inline-block; border:1px solid; border-color:#d6d8dc #888c93 #888c93 #d6d8dc; width:28px; height:28px; text-indent:-9999px; background:#fff url(/admode/module/board/images/kor/calender.gif) 7px 7px no-repeat; vertical-align:top; } /* 달력선택 아이콘 */ /* 버튼 END */ /* SNS 공유하기 */ #board .sns_share { margin-bottom:10px; text-align:right;} #board .sns_share .title_sns {display:inline-block; font-weight:400; color:#333; margin-right:10px;} #board .sns_share .btn { background-size:auto 70%; padding:5px 15px 5px 30px;} #board .btn_naverblog {background:url(/admode/module/board/images/kor/bg_naverblog.png) no-repeat 5px center;} #board .btn_facebook {background:url(/admode/module/board/images/kor/bg_facebook.png) no-repeat 5px center;} #board .btn_twitter {background:url(/admode/module/board/images/kor/bg_twitter.png) no-repeat 5px center;} #board .btn_kakaostory {background:url(/admode/module/board/images/kor/bg_kakaostory.png) no-repeat 5px center;} @media all and (max-width:767px) { #board .sns_share .title_sns { vertical-align:top; margin-right:5px; font-size:0; text-indent:-9999px !important; background:url(/admode/module/board/images/kor/bg_sns_share.png) no-repeat center; background-size:cover; width:30px; height:30px;} #board .sns_share .btn { vertical-align:top; margin-right:5px; border:none; font-size:0; text-indent:-9999px !important; background-size:cover; padding:0; width:30px; height:30px;} #board .btn_naverblog { background:url(/admode/module/board/images/kor/bg_naverblog.png) no-repeat center; } #board .btn_facebook { background:url(/admode/module/board/images/kor/bg_facebook.png) no-repeat center;} #board .btn_twitter { background:url(/admode/module/board/images/kor/bg_twitter.png) no-repeat center; } #board .btn_kakaostory { background:url(/admode/module/board/images/kor/bg_kakaostory.png) no-repeat center;} } /* SNS 공유하기 END */ /* 게시판 카테고리 탭형식 */ #board_tab { margin-bottom:20px;} #board_tab > ul { display:table; table-layout:fixed; width:100%;} #board_tab > ul > li { display:table-cell;} #board_tab > ul > li > a { display:block; text-align:center; border:1px solid #ddd; border-left:none; padding:15px 0; height:20px; color:#666;} #board_tab > ul > li:first-child > a { border-left:1px solid #ddd;} #board_tab > ul > li:hover > a, #board_tab > ul > li.on > a { background:#fff; border:2px solid #003668; color:#003668; padding:14px 0;} @media all and (max-width:1000px) { #board_tab { border:1px solid #ddd; padding:10px;} #board_tab > ul { display:block; table-layout:auto;} #board_tab > ul > li { display:inline-block; float:left;} #board_tab > ul > li > a { padding:3px 10px; font-size:0.95em; border:none;} #board_tab > ul > li:first-child > a { border-left:none;} #board_tab > ul > li:hover > a, #board_tab > ul > li.on > a { padding:3px 10px; background:none; color:#333; text-decoration:underline !important; border:none;} } /* 게시판 카테고리 탭형식 END */ /* 게시판 카테고리 셀렉트형식 */ #board_category_select { position:absolute; right:300px; z-index:1000;} #board_category_select select { padding:3px 3px 3px 10px; min-width:70px; height:30px; border:1px solid #ddd; color:#666; font-weight:400; border-radius:3px;} @media all and (max-width:1000px) { #board_category_select { position:relative; left:auto; margin-bottom:10px;} } /* 게시판 카테고리 셀렉트형식 END */ /* 게시판 상단 */ #board_top { position:relative; height:30px; margin-bottom:20px; vertical-align:middle;} #board_top .post_info { background:url(/admode/module/board/images/kor/bg_total.gif) no-repeat left 9px; float:left; padding:5px 0 0 5px; color:#505050; font-size:0.95em; font-weight:400; } #board_top .font_post { font-weight:normal; color:#858585; padding-left:10px; } #board_top .search_info { float:right;} #board_top .select_search { padding:3px 3px 3px 10px; min-width:70px; height:30px; border:1px solid #ddd; color:#666; font-weight:400; border-radius:3px;} #board_top .input_search { height:28px; min-width:120px; line-height:28px; padding:0 3px; border:1px solid #ddd; color:#666; border-radius:3px;} #board_top .btn_search input { background:#666; border-radius:3px; width:66px; height:30px; color:#fff; font-weight:400; border:0; cursor:pointer; _cursor:hand; } @media all and (max-width:1000px) { #board_top { height:auto;} #board_top .post_info { display:none;} #board_top .search_info { float:none; text-align:center; border-top:solid 1px #ddd; border-bottom:solid 1px #ddd; padding:20px 0; background:#f9f9f9; } } @media all and (max-width:440px) { #board_top .input_search { width:100px;} } /* 게시판 상단 END */ /* 게시판 하단 */ /* page_navigation */ .list_page { padding:15px 0; text-align:center; clear:both;} .list_page .num { margin:0 3px; vertical-align:top; display:inline-block; width:34px; line-height:34px; color:#404040; text-align:center;} .list_page .num:hover { color:#00a53c; font-weight:400;} .list_page strong { margin:0 3px; vertical-align:top; display:inline-block; border:1px solid #00a53c; border-radius:3px; width:32px; line-height:32px; color:#00a53c; text-align:center;} .list_page span { margin:0 3px; vertical-align:top; display:inline-block; border:1px solid #ddd; border-radius:3px; width:32px; line-height:32px; text-indent:-9999px;} .list_page .btn_first { background:url(/admode/module/board/images/kor/btn_first.png) no-repeat center; background-size:80%;} .list_page .btn_prev { background:url(/admode/module/board/images/kor/btn_prev.png) no-repeat center; background-size:80%;} .list_page .btn_next { background:url(/admode/module/board/images/kor/btn_next.png) no-repeat center; background-size:80%;} .list_page .btn_last { background:url(/admode/module/board/images/kor/btn_last.png) no-repeat center; background-size:80%;} /* 하단 버튼 */ #board_bottom .btn_board_bottom { padding-top:10px; height:50px; } #board_bottom .btn_board_bottom li { float:left; padding-right:5px; } #board_bottom .btn_board_bottom .li_right { float:right; padding-right:0; } #board_bottom .btn_board_bottom_right { padding-top:10px; float:right; height:50px; } #board_bottom .btn_board_bottom_right li { float:left; padding-left:5px; } /* 게시판 하단 END */ /* 기본 게시판 뷰 */ .table_board_read, .table_board_read th, .table_board_read td { border:0; font-size:inherit;} .table_board_read { border-top:1px solid #303030;} .table_board_read .th { text-align:center; color:#2a2a2a; background:#f5f5f5; border-bottom:1px solid #d7d7d7; padding:9px 0; } .table_board_read .title { font-weight:400; color:#2a2a2a; } .table_board_read .td { padding:15px 20px; border-bottom:1px solid #d7d7d7; } .table_board_read .td_con { padding:20px;} .table_board_read .td_con img { max-width:1160px !important;} /* 편집기에서 넣은 이미지 최대사이즈 */ .table_board_read .youtube_box { height:450px;} @media all and (max-width:1300px) { .table_board_read .td_con img { max-width:1000px !important;} } @media all and (max-width:1000px) { .table_board_read .td_con img { max-width:800px !important;} } @media all and (max-width:800px) { .table_board_read .th { padding:9px 10px; font-size:0.875em;} .table_board_read .td_con img { width:100%;} /* 모바일 이미지 사이즈 */ } @media all and (max-width:440px) { .table_board_read .youtube_box { height:250px;} } /* 기본 게시판 뷰 END */ /* 뷰 - 댓글달기 */ .reply_box { position:relative;} .reply_box h2 a { display:block; background:url(/admode/module/board/images/kor/icon_reply_read.gif) no-repeat 15px 13px; padding:10px 0 10px 40px; height:22px; border-bottom:1px solid #d7d7d7; font-weight:400; color:#2a2a2a !important;} .reply_box h2 a:hover { color:#666; text-decoration:underline;} .reply_box .btn_open_right { position:absolute; top:10px; right:10px;} .commentList li { border-bottom:1px solid #d7d7d7; padding:20px;} .commentList li:after {display:block; clear:both; content:""; } .commentList li:hover { background-color:#f7f7f7;} .commentList li .btn_reply { float:right; margin-top:10px; } .commentList li .name { font-weight:400; color:#333;} .commentList li .date { font-weight:normal; font-family:verdana; font-size:0.875em; color:#858585;} .commentList .li_reply { padding-left:50px; background:url(/admode/module/board/images/kor/icon_reply_line.gif) no-repeat 25px 13px;} #write_comment ul { padding:20px 20px 0 20px;} #write_comment li { float:left; padding-right:20px;} #write_comment li label { color:#333; font-weight:400; padding-right:10px;} #write_comment .comment_box { padding:20px; border-bottom:1px solid #d7d7d7;} #write_comment .reply_textarea { padding-left:3px; border:1px solid #e7e7e7; color:#565656; background:#f5f5f5; width:100%; box-sizing:border-box;} #write_comment .btn_bottom { text-align:right; padding-top:10px;} @media all and (max-width:767px) { #write_comment li { width:100%; padding-bottom:5px;} #write_comment li label { width:30%; line-height:30px; padding-left:10px; float:left; box-sizing:border-box;} #write_comment li input { width:70%; height:30px; float:left; box-sizing:border-box;} } /* 뷰 - 하단 이전, 다음글 링크 */ .table_board_read_bottom, .table_board_read_bottom th, .table_board_read_bottom td { border:0; } .table_board_read_bottom { border-top:1px solid #303030; table-layout:fixed; } .table_board_read_bottom th { text-align:left; color:#2a2a2a; border-bottom:1px solid #d7d7d7; padding:9px 0 8px 20px; } .table_board_read_bottom td { padding:9px 20px; border-bottom:1px solid #d7d7d7; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } /* 뷰 - 댓글달기 END */ /* 기본 게시판 쓰기 */ .table_board_write, .table_board_write th, .table_board_write td { border:0; font-size:inherit;} .table_board_write { border-top:1px solid #303030; } .table_board_write th { text-align:left; color:#2a2a2a; background:#f5f5f5; border-bottom:1px solid #d7d7d7; border-right:1px solid #d7d7d7; padding:7px 20px; } .table_board_write .th_div { border-left:1px solid #d7d7d7; } .table_board_write td { text-align:left; padding:7px 20px; border-bottom:1px solid #d7d7d7; } .table_board_write .notice { font-size:0.95em; font-weight:400; } .table_board_write .textarea_form { height:100px;} /* 링크게시판 내용 */ #board_write .box_policy { width:100%; border-bottom:1px solid #d7d7d7; padding-bottom:20px; letter-spacing:-0.05em;} #board_write .box_policy .privacy { margin:20px; border:1px solid #d7d7d7; height:120px; padding:10px; overflow-y:scroll; } #board_write .box_policy .privacy { padding:15px; color:#767676; } #board_write .box_policy .privacy h1 { color:#2a2a2a; font-weight:400; text-align:center; padding-bottom:15px; } #board_write .box_policy .privacy h2 { padding:15px 0 10px 0; font-weight:400; color:#666; } #board_write .box_policy .p_privacy { text-align:center; color:#767676; } @media all and (max-width:440px) { .table_board_write { display:block;} .table_board_write th { display:block; border-right:none; background:none; border-bottom:none; padding:7px 20px 0 20px;} .table_board_write .th_div { border-left:none; } .table_board_write td { display:block;} .table_board_write td input[type="text"] { width:100% !important;} .table_board_write .m_block { display:block;} } /* 기본 게시판 쓰기 END */ /* 게시물 삭제 */ #board_password { min-height:250px;} #board_password .password_text { border-top:1px solid #303030; border-bottom:1px solid #d7d7d7; padding:50px 20px; text-align:center;} #board_password .btn_bottom { padding:10px 0; text-align:right;} #board_password .title .em { color:#2a2a2a; font-weight:400;} #board_password .pw_input { padding:20px 0; border:1px dashed #d7d7d7; width:60%; margin:20px auto 0 auto} #board_password .pw_input span { margin-right:20px; color:#2a2a2a; font-weight:400;} @media all and (max-width:767px) { #board_password .pw_input { width:100%; } } /* 게시물 삭제 END */ /**********************************************************/ /******************** 게시판 공통사항 끝 ********************/ /**********************************************************/ /* 일반게시판 olym_basic */ .table_board_basic, .table_board_basic th, .table_board_basic td { border:0; font-size:inherit;} .table_board_basic { table-layout:fixed; border-top:1px solid #303030;} .table_board_basic th { padding:15px 10px; color:#2a2a2a; background:#fafafa; border-bottom:1px solid #a2a2a2; font-weight:400;} .table_board_basic tbody tr:hover { background:#f7f7f7; transition: all .3s ease;} .table_board_basic tbody td { background:none; } .table_board_basic td { text-align:center; padding:15px 0 14px 0; border-bottom:1px solid #d7d7d7; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .table_board_basic td .font_co1 { color:#00a53c; font-size:0.95em; font-weight:400;} .table_board_basic .td_left { text-align:left; padding-left:15px; } /* 일반게시판 olym_basic END */ /* 갤러리 게시판 olym_gallery */ #gallery_list { border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; padding:40px 10px 20px 10px; } #gallery_list ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px;} #gallery_list li { width: 100%;} #gallery_list li .con_box { width:90%; max-width:300px; margin:0 auto 30px auto;} #gallery_list li .img { background:#f1f1f1; height:240px; overflow:hidden; text-align:center; position:relative;} #gallery_list li a img { transition: transform .3s; position:absolute; min-width:100%; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0;} #gallery_list li a:hover img {transform:scale(1.1);} #gallery_list li a .p_title { padding:20px 10px; color:#666; text-align:center; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #gallery_list li .p_btn { text-align:center;} @media all and (max-width:1000px) { #gallery_list ul { grid-template-columns: 1fr 1fr; gap: 30px;} /* #gallery_list li { width:50%;} */ } @media all and (max-width:440px) { #gallery_list { border-top:0; padding:10px 0 0 0; } #gallery_list ul { grid-template-columns: 1fr;} } /* 갤러리 게시판 olym_gallery END */ /* 프로그램 게시판 olym_program */ #program_list { border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; padding:30px 10px 0 10px; } #program_list li { float:left; width:50%;} #program_list li .con_box { width:90%; max-width:500px; margin:0 auto 30px auto;border:1px solid #d7d7d7; } #program_list li .img { background:#f1f1f1; height:204px; overflow:hidden; text-align:center; position:relative;} #program_list li .desc { position:relative; padding:30px;} #program_list li .desc i { position:absolute; bottom:30px; right:30px; color:#fff; display:inline-block; padding:15px 40px; font-style:normal; font-weight:700; font-size:1.2em;} #program_list li .desc i.active { background:#ff3f3f;} #program_list li .desc i.operate { background:#ffb23f;} #program_list li .desc i.expect { background:#4393ed;} #program_list li .desc i.close { background:#3f3f3f;} #program_list li a:hover { text-decoration:none !important;} #program_list li a .img img { transition: transform .3s; position:absolute; min-width:100%; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0;} #program_list li a:hover .img img {transform:scale(1.1);} #program_list li a .p_title { font-size:1.25em; font-weight:700; color:#000; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #program_list li a .p_icon { padding:20px 0 10px 0; height: 52px; box-sizing: border-box;} #program_list li a .p_icon img { max-width:auto !important;} #program_list li a .p_date { line-height: 1.6em; font-size: 0.95em; margin-bottom: 10px;} @media all and (max-width:1000px) { #program_list li { width:50%;} #program_list li .img { height:138px; } #program_list li .desc i { bottom:-1px; right:-1px; padding:10px 15px;font-size:1em;} } @media all and (max-width:440px) { #program_list { border-top:0; padding:10px 0 0 0; } #program_list li { width:100%; } } /* 프로그램 게시판 olym_program END */ /* 웹진 게시판 olym_webzine */ #photos { -webkit-column-count: 3; -webkit-column-gap: 0px; -moz-column-count: 3; -moz-column-gap: 0px; column-count: 3; column-gap: 0px; margin-bottom: 50px; } #photos img { box-sizing: border-box; width: 100% !important; height: auto !important; } .photo{display: inline-block;margin: 5px;width: calc(100% - 10px);border: 1px solid #dbdbdb;overflow: hidden; clear: both;} .photo .info{padding:20px;} .photo .info h2{font-weight: 500;font-size: 16px; margin-bottom:10px;} @media (max-width: 1200px) { #photos { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media (max-width: 1000px) { #photos { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media (max-width: 800px) { #photos { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media (max-width: 400px) { #photos { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } } @media all and (max-width:440px) { #photos { border-top:0; padding:10px 0 0 0; } } /* 웹진 게시판 olym_webzine END */ /* 포토뉴스게시판 (이미지 + 내용) olym_photonews */ #news_list .news_post { border-top:1px solid #d7d7d7;} #news_list .news_post > li { border-bottom:1px solid #d7d7d7; padding:20px; } #news_list .img { float:left; width:20%; max-width:180px; margin-right:3%;} #news_list .img a { background:#f1f1f1; display:block; border:1px solid #d7d7d7; position:relative; height:130px; overflow:hidden;} #news_list .img a img { position:absolute; width:auto; margin:auto; top:0; bottom:0; left:0; right:0;} #news_list .desc { overflow:hidden;} /* 첨부이미지가 없을때 이미지가 보이지 않게 */ #news_list .desc .title { padding:10px 0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #news_list .desc .title a { color:#2a2a2a; font-size:1.125em; font-weight:400;} #news_list .desc .check_box { padding-right:5px; vertical-align:top;} #news_list .desc_info { padding-top:7px; color:#505050;} #news_list .desc_info li { float:left; padding-right:10px; } #news_list .font_post { font-weight:normal; color:#858585; } @media all and (max-width:767px) { #news_list .img a { height:100px;} } @media all and (max-width:440px) { #news_list .news_post { border-top:0;} #news_list .img { width:100%; max-width:100%; margin:0; padding-bottom:20px;} #news_list .img a { height:auto;} #news_list .img a img { position:relative;} #news_list .desc { width:100%;} } /* 포토뉴스게시판 (이미지 + 내용) olym_photonews END */ /* 인증서 게시판 olym_certificate */ #cert_list { border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; padding-top:30px; } #cert_list li { float:left; width:25%; padding-bottom:30px; height:250px; } #cert_list li .img_box { background:#f1f1f1; border:1px solid #d7d7d7; padding:10px; height:200px; width:140px; position:relative; overflow:hidden; margin:0 auto; } #cert_list li .img_box img { position:absolute; width:auto; max-width:100%; max-height:100%; margin:auto; top:0; bottom:0; left:0; right:0;} #cert_list li .p_title { padding:10px; text-align:center; color:#666;} @media all and (max-width:767px) { #cert_list li { width:50%;} #cert_list li .p_title { font-size:0.95em;} } @media all and (max-width:440px) { #cert_list li .img_box { padding:5px; height:170px; width:120px; } } /* 인증서 게시판 olym_certificate END */ /* FAQ 게시판 olym_faq */ #faq_list .table_faq, .table_faq th, .table_faq td { border:0; font-size:inherit;} #faq_list .table_faq { border-bottom:1px solid #d7d7d7; } #faq_list .table_faq .th { text-align:left; border-top:1px solid #d7d7d7; border-bottom:1px solid #fff; padding:15px 10px 15px 50px; position:relative; font-weight:400;} #faq_list .table_faq .th .title { color:#2a2a2a;} #faq_list .table_faq .h_q { position:absolute; top:15px; left:15px; color:#2a2a2a; font-weight:400; font-family:"verdana"; font-size:1.05em;} #faq_list .table_faq .h_q .num { font-size:0.75em;} #faq_list .table_faq .td { background:#f7f7f7; padding:15px 10px 15px 50px; border-top:1px solid #d7d7d7; position:relative;} #faq_list .table_faq .h_a { position:absolute; top:15px; left:15px; display:inline-block; color:#00a53c; font-weight:400; font-family:"verdana"; font-size:1.05em;} #faq_list .table_faq .h_a .num { font-size:0.75em;} #faq_list .btn_faq { position:absolute; right:10px; } /* FAQ 게시판 olym_faq END */ /* 관련사이트 게시판 olym_link */ #link_list { border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; padding-top:30px; } #link_list li { float:left; width:25%; padding:0 10px 30px 10px; box-sizing:border-box; text-align:center;} #link_list li .img { height:40px; padding:10px 0; overflow:hidden; border:1px solid #d7d7d7; max-width:200px; margin:0 auto;} #link_list li a img { max-width:100%; height:100%; max-height:40px;} #link_list li a .p_title { padding:10px; color:#666;} #link_list li .p_con { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #efefef;} @media all and (max-width:1260px) { #link_list li { width:33.33%;} } @media all and (max-width:767px) { #link_list li { width:50%;} #link_list li a .p_title { font-size:0.95em;} } @media all and (max-width:440px) { #link_list { border-top:0; padding-top:10px; } #link_list li { padding:0 5px 20px 5px;} #link_list li .img { padding:5px 0;} } /* 관련사이트 게시판 olym_link END */ /* 동영상 게시판 olym_movie */ #movie_list { border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; padding-top:30px; } #movie_list li { float:left; width:50%; padding:0 20px 30px 20px; box-sizing:border-box; text-align:center;} #movie_list li .img_box { background:#f1f1f1; display:block; border:1px solid #d7d7d7; position:relative; height:240px; max-width:420px; margin:0 auto; overflow:hidden;} #movie_list li .img_box img { position:absolute; width:auto; margin:auto; top:0; bottom:0; left:0; right:0;} #movie_list li .p_title { padding:10px; color:#555; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} @media all and (max-width:767px) { #movie_list li { padding:0 10px 30px 10px;} #movie_list li .img_box { height:180px;} } @media all and (max-width:440px) { #movie_list { border-top:0; padding-top:10px; } #movie_list li { width:100%;} } /* 동영상 게시판 olym_movie END */ /* 유튜브 게시판 olym_youtube 1,2 리스트 공통 */ #youtube_list { border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; padding-top:30px; } #youtube_list li { float:left; width:50%; padding:0 20px 30px 20px; box-sizing:border-box; text-align:center;} #youtube_list li .img_box { height:240px; position:relative; max-width:420px; margin:0 auto; } #youtube_list li .img_box:hover {cursor:pointer;} #youtube_list li .p_title { padding:10px;} /* 유튜브1 플레이버튼 */ #youtube_list li .img_box .btn_play { position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background:url(/admode/module/board/images/kor/btn_play_off.png) no-repeat center; background-size:100%; width:64px; height:64px; } #youtube_list li .img_box:hover .btn_play {background:url(/admode/module/board/images/kor/btn_play_on.png) no-repeat center; background-size:100%; } @media all and (max-width:767px) { #youtube_list li { padding:0 10px 30px 10px;} #youtube_list li .img_box { height:180px;} #youtube_list li .img_box .btn_play { width:44px; height:44px; } } @media all and (max-width:440px) { #youtube_list { border-top:0; padding-top:10px; } #youtube_list li { width:100%; } } /* Modal */ .modal { display: none; position: fixed; z-index: 10000; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.6);} .modal-content { position: relative; background: #fefefe; margin: auto; width: 800px; box-sizing: border-box; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s; } .modal-content iframe { width: 800px; height: 500px; } .modal-content video { width: 100%; height: 100%; } @-webkit-keyframes animatetop { from { top:-300px; opacity:0} to { top: 0; opacity: 1 } } @keyframes animatetop { from { top:-300px; opacity:0} to { top: 0; opacity: 1 } } .modal-header { padding: 15px 20px; background: #00a53c; } .modal-header h2 { color: #fff; font-weight: bold; } .modal-header .close { color: #fff; float: right; font-size: 28px; line-height:15px !important; font-weight: bold; } .modal-header .close:hover, .modal-header .close:focus { color: #000; cursor: pointer; } @media all and (max-width:767px) { .modal-content { width: 90%; height: auto; } .modal-content iframe { width: 100%; height: 250px; } } /* 유튜브 게시판 olym_youtube 1,2 리스트 공통 END */ /* 예술교육 프로그램 art_edu_list */ #art_edu_list { border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; padding:40px 0; } #art_edu_list ul { display:grid; grid-template-columns:1fr 1fr; gap:40px;} #art_edu_list li .con_box {border:1px solid #d7d7d7; display:flex; width: 100%; height: 100%; margin: 0 auto; box-sizing: border-box; flex-direction: column;} #art_edu_list li .con_box .img { background:#f1f1f1; height:290px; overflow:hidden; text-align:center; position:relative;} #art_edu_list li .con_box .img img { transition: transform .3s; position:absolute; min-width:100%; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0;} #art_edu_list li .con_box:hover { text-decoration:none !important;} #art_edu_list li .con_box:hover .img img {transform:scale(1.1);} #art_edu_list li .desc_box { display: flex; justify-content: space-between; align-items: center; padding:30px; gap:30px;} #art_edu_list li .desc_box .desc { flex: 6;} #art_edu_list li .desc_box i { flex: 1; color:#fff; display:inline-block; padding:15px; font-style:normal; font-weight:700; font-size:1.2em; text-align: center;} #art_edu_list li .desc_box i.expect { background:#4393ed;} #art_edu_list li .desc_box i.active { background:#ff3f3f;} #art_edu_list li .desc_box i.close { background:#3f3f3f;} #art_edu_list li .desc_box .p_title { font-size:1.25em; font-weight:700; color:#000; } #art_edu_list li .desc_box .p_icon { margin-top:5px;} #art_edu_list li .desc_box .p_date { line-height: 1.6em; font-size: 0.95em; margin-top:15px; color: #666;} #art_edu_list li .desc_box .p_date span { color:#000;} /* 세부프로그램 리스트 */ #art_edu_list ul.ul_detail { grid-template-columns:1fr 1fr 1fr; gap:20px;} @media all and (max-width:1024px) { #art_edu_list { padding:30px 0; } #art_edu_list ul {gap:30px;} #art_edu_list li .con_box .img { height:220px; } #art_edu_list li .desc_box { padding:20px; gap:20px;} #art_edu_list li .desc_box i { padding:10px; font-size:0.95em; text-align: center;} #art_edu_list li .desc_box .p_title { font-size:1.05em; min-height: 44px; } #art_edu_list li .desc_box .p_date { margin-top:10px} #art_edu_list ul.ul_detail { grid-template-columns:1fr 1fr; gap:20px;} } @media all and (max-width:600px) { #art_edu_list ul { grid-template-columns:1fr;} #art_edu_list li .con_box .img { height:165px; } #art_edu_list li .desc_box .p_title { text-overflow:unset; overflow: auto; min-height: auto; display: block; -webkit-line-clamp: auto; -webkit-box-orient:auto; } #art_edu_list ul.ul_detail { grid-template-columns:1fr;} } /* 예술교육 프로그램 art_edu_list END */