/** * OLYM Cascading Style Sheets * File Name : contents.css * Description : 컨텐츠 스타일시트 * Author : Web business Team / Choi Hyun Mi * Email : desingtj@olym.co.kr * Date : 2017.08.01 * Update : 2017.08.01 * Copyright(c) 2017 OLYM Communications. All Rights Reserved. */ /* ///////////////////////////포인트컬러 변경/////////////////////////// 포인트 컬러1 - #0020d0 포인트 컬러2 - #3155a4 검색해서 모두 바꾸기 해주세요! /////////////////////////////////////////////////////////////////// */ /************ tab_type ************/ /* 탭메뉴 갯수 */ .colum02 > ul > li { width:50%;} .colum03 > ul > li { width:33.33%;} .colum04 > ul > li { width:25%;} .colum05 > ul > li { width:20%;} .colum06 > ul > li { width:16.66%;} .tab_type1 > ul { margin:30px 0 50px 0; width:350px; display: flex;} .tab_type1 > ul > li {width:100%;} .tab_type1 > ul > li > a { display:block; text-align:center; font-family: "Montserrat"; font-weight: 600; background:#f2f3f7; color:#000; font-size:1.125em; line-height:48px;} .tab_type1 > ul > li > a:hover { background:#0020d0; color:#fff;} .tab_type1.left_box > ul > li > a.on { background:#0020d0; color:#fff;} .tab_type1.right_box > ul > li > a.on { background:#4b4a48; color:#fff;} .tab_type1.right_box > ul > li > a:hover { background:#4b4a48; color:#fff;} .tab_type2 > ul { margin-bottom:30px; display: flex; justify-content: end; gap: 30px;} .tab_type2 > ul > li > a { display:block; font-family: 'SunBatang-Medium'; color: #c3c3c3; font-size: 24px; border-bottom: 2px solid #fff;} .tab_type2 > ul > li > a.on, .tab_type2 > ul > li > a:hover { color: #4b4a48; border-bottom: 2px solid #4b4a48;} .tab_type3 > ul > li { float:left; padding:0 5px 5px 0;} .tab_type3 > ul > li > a { display:block; border:1px solid #d4d4d4; line-height:48px; padding:0 30px; color:#666;} .tab_type3 > ul > li > a.on, .tab_type3 > ul > li > a:hover { border:1px solid #0020d0; background:#0020d0; color:#fff;} /************ h_type ************/ .h_type1 { font-size:24px; color:#1b1b1b; font-weight:800; line-height:1em; margin-bottom:20px;} .h_type2 { font-size:40px; color:#1b1b1b; font-weight:800; line-height:1em; margin-bottom:20px;} /* .h_type2 { background:url("/project/design/template/bg_h2.png") no-repeat 6px 2px; font-size:18px; color:#444; padding-left:30px; line-height:17px; margin-bottom:10px;} .h_type3 { background:url("/project/design/template/bg_h3.png") no-repeat 9px 3px; font-size:16px; color:#555; padding-left:30px; line-height:16px; margin-bottom:10px;}*/ /************ ul_type ************/ .ul_type1 > li { margin-bottom:7px; background:url("/project/design/template/bg_li1.png") no-repeat left 14px; padding-left:15px;} .ul_type1 > li > ul { margin-top:5px;} .ul_type1 > li > ul > li { margin-bottom:5px; padding-left:12px;background:url("/project/design/template/bg_li2.png") no-repeat 2px 14px;} .ul_type1 > li:last-child { margin-bottom:0; } .ul_type2 > li { margin-bottom:8px; padding-left:80px; position:relative;} .ul_type2 > li:last-child { margin-bottom:0; } .ul_type2 > li > .year { color:#1b1b1b; font-weight:500; position:absolute; top:0; left:0; background:url("/project/design/template/bg_li2.png") no-repeat 2px 14px; padding-left:12px;} .ul_type3 > li { margin-bottom:20px;} .ul_type3 > li > ul { margin-top:5px;} .ul_type3 > li > ul > li { margin-bottom:5px; padding-left:12px;} .ul_type3 > li:last-child { margin-bottom:0; } .ul_type4 { text-align: left;} .ul_type4 > li { margin-bottom:5px; padding-left:12px;background:url("/project/design/template/bg_li2.png") no-repeat 2px 14px;} .ul_type4 > li:last-child { margin-bottom:0; } .ol_type1 > li { margin-bottom:7px;} .ol_type1 > li > ul { margin-top:5px; margin-left: 20px;} .ol_type1 > li > ul > li { margin-bottom:5px; padding-left:12px;background:url("/project/design/template/bg_li2.png") no-repeat 2px 14px;} .ol_type1 > li:last-child { margin-bottom:0; } /************ a_type ************/ /* 다운로드링크 */ .a_down { color:#666; display:inline-block; border-bottom:1px dashed #666; padding:0 5px;} .a_down::after { content: '\EC54'; font-family: "remixicon"; font-size: 1.0625em; margin-left: 5px;} .a_down:hover { color:#0020d0; border-bottom:1px dashed #0020d0;} /* 새창링크 */ .a_link { color:#666; display:inline-block; border-bottom:1px dashed #666; padding:0 5px;} .a_link::after { content: '\ECAF'; font-family: "remixicon"; font-size: 1.0625em; margin-left: 5px;} .a_link:hover { color:#0020d0; border-bottom:1px dashed #0020d0;} /************ table_type ************/ /* 공모신청 */ .table_type1 { width:100%;} .table_type1 th { padding:15px 0 0 40px; text-align:left; font-size:20px; color:#1b1b1b; font-weight:600; vertical-align:top; background: url("/project/design/template/bg_th1.gif") no-repeat 20px 30px;} .table_type1 td { padding:10px 0; min-height:58px;} /* 공모요강 */ .table_type2, .table_type2 th, .table_type2 td { border: 0; border-collapse: collapse;} .table_type2 { border-top:2px solid #000; width:100%;} .table_type2 th { padding:11px; color:#1b1b1b; border-bottom:1px solid #000; border-left:1px solid #d1d1d1;font-weight:600;} .table_type2 td { padding:11px; text-align:center; border-bottom:1px solid #d1d1d1; border-left:1px solid #d1d1d1;} .table_type2 th:first-child, .table_type2 td:first-child { border-left:none;} .table_type2 tr.bg2 { background:#efefef;} /* 공모신청 미리보기 */ .table_type3 { width:100%;} .table_type3, .table_type3 th, .table_type3 td { border-collapse:collapse;} .table_type3 th { padding:15px 30px; text-align:left; color:#1b1b1b; border:1px solid #d1d1d1;font-weight:500;} .table_type3 td { padding:15px 30px; text-align:left; border:1px solid #d1d1d1; word-break: break-all;} .table_type3 td.img { padding:30px 0; border:none; text-align:center; } .table_type3 td .no_img { background:#efefef;} .table_type3 td.img img { max-width:1200px; height:auto; max-height:800px;} @media (min-width: 768px) and (max-width: 1024px) { .table_type3 td.img img { width: 100%} } .table_type3 td.img a {display:inline-block; position:relative; transition:all .3s ease;} .table_type3 td.img a .btn_img_zoom{ opacity:0; background:rgba(0,0,0,0.5) url("/project/design/contents/bg_img_zoom.png") no-repeat center; background-size:100%; border-radius:1000%; width:100px; height:100px; display:block; z-index:100; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; transition:all .3s ease;} .table_type3 td.img a:hover .btn_img_zoom { opacity:1;} /* 심사방법 */ .table_type4 { border-top:2px solid #000; width:100%;} .table_type4 th { padding:11px; color:#1b1b1b; border-bottom:1px solid #000; border-left:1px solid #d1d1d1;font-size:22px; font-weight:500;} .table_type4 td { padding:20px 30px; text-align:center; border-bottom:1px solid #d1d1d1; border-left:1px solid #d1d1d1;} .table_type4 th:first-child, .table_type4 td:first-child { border-left:none;} /************ box_type ************/ /* 이미지없는 박스 */ .box_type1 { border:1px dashed #666; padding:20px 30px;} /* 좌측이미지 박스 */ .box_type2 { border:1px solid #d4d4d4; padding:20px; position:relative;} .box_type2 .left_img { float:left; width:15%; max-width:114px; min-height:114px; background:#f6f6f6 url("/project/design/template/bg_box1.png") no-repeat center;} .box_type2 .right_desc { float:left; width:82%; padding:10px 0 0 3%;} /************ btn_type ************/ /* 기본버튼 */ .btn { display:inline-block; border:1px solid #d4d4d4; height:43px; line-height:43px; padding:0 20px; color:#666; border-radius:3px; transition: all .3s ease; background-color:#fff;} .btn:hover { background-color:#f6f6f6; color:#333;} input.btn, button.btn { cursor:pointer; height:45px; background-color:#fff; line-height:auto; vertical-align:top;} /* 라인버튼 */ .btn.line1 { border:1px solid #666; color:#666;} .btn.line1:hover { background-color:#666; color:#fff;} .btn.line2 { border:1px solid #0020d0; color:#0020d0;} .btn.line2:hover { background-color:#0020d0; color:#fff;} .btn.line3 { border:1px solid #3155a4; color:#3155a4;} .btn.line3:hover { background-color:#3155a4; color:#fff;} /* 컬러버튼 */ .btn.bg1 { border:1px solid #666; background-color:#666; color:#fff;} .btn.bg1:hover { text-decoration:underline;} .btn.bg2 { border:1px solid #0020d0; background-color:#0020d0; color:#fff;} .btn.bg2:hover { background-color: #fff; color: #0020d0;} .btn.bg3 { border:1px solid #3155a4; background-color:#3155a4; color:#fff;} .btn.bg3:hover { text-decoration:underline;} /* 다운로드버튼 */ .btn.down1:before { content:url("/project/design/template/bg_down_c1.png"); vertical-align:middle; padding-right:10px;} .btn.down1:hover::before { content:url("/project/design/template/bg_down_c4.png")} .btn.down2:before { content:url("/project/design/template/bg_down_c2.png"); vertical-align:middle; padding-right:10px;} .btn.down2:hover::before { content:url("/project/design/template/bg_down_c4.png")} .btn.down3:before { content:url("/project/design/template/bg_down_c3.png"); vertical-align:middle; padding-right:10px;} .btn.down3:hover::before { content:url("/project/design/template/bg_down_c4.png")} .btn.down4:before { content:url("/project/design/template/bg_down_c4.png"); vertical-align:middle; padding-right:10px;} /* 새창링크버튼 */ .btn.link1:before { content:url("/project/design/template/bg_link_c1.png"); vertical-align:middle; padding-right:10px;} .btn.link1:hover::before { content:url("/project/design/template/bg_link_c4.png")} .btn.link2:before { content:url("/project/design/template/bg_link_c2.png"); vertical-align:middle; padding-right:10px;} .btn.link2:hover::before { content:url("/project/design/template/bg_link_c4.png")} .btn.link3:before { content:url("/project/design/template/bg_link_c3.png"); vertical-align:middle; padding-right:10px;} .btn.link3:hover::before { content:url("/project/design/template/bg_link_c4.png")} .btn.link4:before { content:url("/project/design/template/bg_link_c4.png"); vertical-align:middle; padding-right:10px;} /* 검색버튼 */ .btn.search1:before { content:url("/project/design/template/bg_search_c1.png"); vertical-align:middle; padding-right:10px;} .btn.search1:hover::before { content:url("/project/design/template/bg_search_c4.png")} .btn.search2:before { content:url("/project/design/template/bg_search_c2.png"); vertical-align:middle; padding-right:10px;} .btn.search2:hover::before { content:url("/project/design/template/bg_search_c4.png")} .btn.search3:before { content:url("/project/design/template/bg_search_c3.png"); vertical-align:middle; padding-right:10px;} .btn.search3:hover::before { content:url("/project/design/template/bg_search_c4.png")} .btn.search4:before { content:url("/project/design/template/bg_search_c4.png"); vertical-align:middle; padding-right:10px;} /* 작은버튼 */ .btn.size1 { font-size:0.875em; height:33px; line-height:33px; padding:0 15px;} .btn.size2 { font-size:0.875em; height:28px; line-height:28px; padding:0 15px;} /*.btn.size3 { font-size:0.875em; height:28px; line-height:28px; padding:0 15px; color:#fff; background:#4b4a48; margin-left:10px; border:1px solid rgba(255,255,255,0.5); font-weight: 500; border-radius: 20px; margin-right:10px; transition: all .3s ease; border:2px solid #4b4a48; border-radius: 20px;} .btn.size3:hover{ color:#4b4a48; background:none; border:2px solid #4b4a48 !important; border-radius: 20px;} .btn.size4 { font-size:0.875em; height:28px; line-height:28px; padding:0 15px; background:none; color:#4b4a48; border:2px solid #4b4a48; border-radius: 20px; font-weight: 500; transition: all .3s ease;} .btn.size4:hover{ color:#fff; background:#4b4a48; border:2px solid #4b4a48 !important; border-radius: 20px;}*/ /* 작은다운로드버튼 */ /* .btn.size1.down1:before { content:url("/project/design/template/bg_down2_c1.png"); vertical-align:middle; padding-right:5px;} .btn.size1.down1:hover::before { content:url("/project/design/template/bg_down2_c4.png")} .btn.size1.down2:before { content:url("/project/design/template/bg_down2_c2.png"); vertical-align:middle; padding-right:5px;} .btn.size1.down2:hover::before { content:url("/project/design/template/bg_down2_c4.png")} .btn.size1.down3:before { content:url("/project/design/template/bg_down2_c3.png"); vertical-align:middle; padding-right:5px;} .btn.size1.down3:hover::before { content:url("/project/design/template/bg_down2_c4.png")} .btn.size1.down4:before { content:url("/project/design/template/bg_down2_c4.png"); vertical-align:middle; padding-right:5px;} .btn.size3.down5:hover::after { content:url("/project/design/template/bg_down2_c4.png")} .btn.size3.down5:after { content:url("/project/design/template/bg_down2_c4.png"); vertical-align:middle; padding-left:5px;} */ /* 작은새창링크버튼 */ .btn.size1.link1:before { content:url("/project/design/template/bg_link2_c1.png"); vertical-align:middle; padding-right:5px;} .btn.size1.link1:hover::before { content:url("/project/design/template/bg_link2_c4.png")} .btn.size1.link2:before { content:url("/project/design/template/bg_link2_c2.png"); vertical-align:middle; padding-right:5px;} .btn.size1.link2:hover::before { content:url("/project/design/template/bg_link2_c4.png")} .btn.size1.link3:before { content:url("/project/design/template/bg_link2_c3.png"); vertical-align:middle; padding-right:5px;} .btn.size1.link3:hover::before { content:url("/project/design/template/bg_link2_c4.png")} .btn.size1.link4:before { content:url("/project/design/template/bg_link2_c4.png"); vertical-align:middle; padding-right:5px;} /* 작은검색버튼 */ .btn.size1.search1:before { content:url("/project/design/template/bg_search2_c1.png"); vertical-align:middle; padding-right:5px;} .btn.size1.search1:hover::before { content:url("/project/design/template/bg_search2_c4.png")} .btn.size1.search2:before { content:url("/project/design/template/bg_search2_c2.png"); vertical-align:middle; padding-right:5px;} .btn.size1.search2:hover::before { content:url("/project/design/template/bg_search2_c4.png")} .btn.size1.search3:before { content:url("/project/design/template/bg_search2_c3.png"); vertical-align:middle; padding-right:5px;} .btn.size1.search3:hover::before { content:url("/project/design/template/bg_search2_c4.png")} .btn.size1.search4:before { content:url("/project/design/template/bg_search2_c4.png"); vertical-align:middle; padding-right:5px;} .text_intent{text-indent : -20px; padding-left: 20px;}