@charset "utf-8"; /* CSS Document */ /* 서브 컨텐츠 */ /*회원 로그인*/ #cnt_mem_login{} #cnt_mem_login .info_box{} #cnt_mem_login .info_box > .inner{ max-width: 450px; margin: 0 auto; } #cnt_mem_login .info_box .list{} #cnt_mem_login .info_box .list li{} #cnt_mem_login .info_box .list li+li{ margin-top: 10px;} #cnt_mem_login .info_box .list li input{ width: 100%; height: 50px; line-height: 50px; padding-left: 25px; font-size: 16px;} #cnt_mem_login .info_box .list li input#pw{ } #cnt_mem_login .info_box .btn.bt_login{ width: 100%; height: 50px; color: #fff; font-size: 23px; font-weight: 500; margin: 0; margin-top: 15px; background: #3271d0; color: #fff; border: none; } #cnt_mem_login .info_box .btn.bt_login:hover{ background: #0c55c4; } #cnt_mem_login .info_box .one_pass_box{ margin-top: 20px; padding: 20px; background: #fff; border: 1px solid #d9d9d9;} #cnt_mem_login .info_box .one_pass_box .txt{ line-height: 1.4em; margin-bottom: 15px; word-break: keep-all;} #cnt_mem_login .info_box .one_pass_box .one_btn{ display: block; height: 50px; padding: 15px 10px; font-size: 20px; line-height: 1em; background: #284d9e; text-align: center; font-weight: 400; color: #fff; text-decoration: none;} #cnt_mem_login .info_box .case{ margin-left: -10px; margin-top: 20px;} #cnt_mem_login .info_box .case li{ position: relative; float: left; width: 50%; padding-left: 10px; margin-top: 10px;} #cnt_mem_login .info_box .case li > a{ position: relative; display: inline-block; width: 100%; height: 40px; border: 1px solid #ddd; background-color: #fff; letter-spacing: -0.05em; text-align: center;} #cnt_mem_login .info_box .case li > a:before{ content: ""; /*position: absolute; left: 10px; top: 5px;*/ position: relative; display: inline-block; width: 20px; height: 20px; margin-right: 10px; background:url(/images/common/sns_ico_x2.png) no-repeat 0 center; background-size:160px auto; vertical-align: middle;} #cnt_mem_login .info_box .case li.link1 > a{ background: #284d9e; padding-left: 0px; border: 1px solid #284d9e; text-align: center; color: #fff;} #cnt_mem_login .info_box .case li.link1 > a:before{ display: none;} #cnt_mem_login .info_box .case li.link2 > a:before{ background-position: -47px 0px;} #cnt_mem_login .info_box .case li.link3 > a:before{ background-position: -94px 0px;} #cnt_mem_login .info_box .case li.link4 > a:before{ background-position: -141px 0px;} #cnt_mem_login .info_box .case li > a:after{ content: ""; position: relative; display: inline-block; width: 0px; height: 100%; vertical-align: middle;} #cnt_mem_login .info_box .case li > a > span{ display: inline-block; line-height: 1em; vertical-align: middle; word-break: keep-all;} #cnt_mem_login .bo_btn { max-width: 450px; margin: 0 auto;} #cnt_mem_login .bo_btn > li .ttxt { font-size: 18px; font-weight: 400; color: #333;} #cnt_mem_login .bo_btn > li.b1{ float: left; width: 65%;} #cnt_mem_login .bo_btn > li.b2{ float: left; width: 35%; } @media screen and (max-width:768px){ #cnt_mem_login .info_box > .inner{ max-width: 240px; margin: 0 auto; } #cnt_mem_login .info_box .list li+li{ margin-top: 5px;} #cnt_mem_login .info_box .list li input{ height: 40px; line-height: 40px; padding-left: 15px; } #cnt_mem_login .info_box .btn.bt_login{ height: 40px; padding-top: 10px; font-size: 18px; margin: 0 !important; margin-top: 10px !important; } #cnt_mem_login .info_box .one_pass_box{ margin-top: 10px; } #cnt_mem_login .info_box .one_pass_box .txt{ font-size: 13px;} #cnt_mem_login .info_box .one_pass_box .one_btn{ height: 38px; padding: 10px 10px; font-size: 16px; } #cnt_mem_login .info_box .case{ margin-left: -10px; margin-top: 0px;} #cnt_mem_login .info_box .case li{ width: 100%;} #cnt_mem_login .info_box .case li > a{ font-size: 13px;} #cnt_mem_login .bo_btn { } #cnt_mem_login .bo_btn > li{ text-align: center} #cnt_mem_login .bo_btn > li .ttxt { font-size: 13px; line-height: 1.2em; display: block; height: 25px; word-break: keep-all;} #cnt_mem_login .bo_btn > li.b1{ float: left; width: 50%; padding-left: 0% } #cnt_mem_login .bo_btn > li.b1 .btn{ margin-bottom: 5px !important; } #cnt_mem_login .bo_btn > li.b2{ float: left; width: 50%; } } /*비회원 로그인*/ #cnt_mem_login2{} #cnt_mem_login2 .info_box{} #cnt_mem_login2 .info_box > .inner.in_1{ max-width: 700px; margin: 0 auto; } #cnt_mem_login2 .info_box.con1 .ti{ display: block; text-align: center; font-size: 23px; line-height: 1.4em; margin-bottom: 15px;} #cnt_mem_login2 .info_box.con1 .ti .bold{ font-weight: 500;} #cnt_mem_login2 .info_box.con1 .txt{ display: block; text-align: center; font-size: 18px; line-height: 1.4em; margin-bottom: 30px;} #cnt_mem_login2 .info_box.con1 .txt strong{ font-weight: 500;} #cnt_mem_login2 .info_box > .inner.in_2{ max-width: 450px; margin: 0 auto; } #cnt_mem_login2 .info_box .c_btn{ margin-left: -10px; margin-top: 20px;} #cnt_mem_login2 .info_box .c_btn li{ float: left; width: 50%; padding-left: 10px; margin-top: 10px;} #cnt_mem_login2 .info_box .c_btn li > a{ position: relative; display: inline-block; width: 100%; height: 60px; border: 1px solid #d9d9d9; background-color: #fff; text-align: center; font-size: 17px; color: #000;} #cnt_mem_login2 .info_box .c_btn li > a span{ display: inline-block; vertical-align: middle; word-break: keep-all;} #cnt_mem_login2 .info_box .c_btn li > a:hover{ border: 1px solid #333;} #cnt_mem_login2 .info_box .c_btn li > a:hover span{ text-decoration: underline;} #cnt_mem_login2 .info_box .c_btn li > a:before{ content: ""; position: relative; display: inline-block; width: 30px; height: 30px; background: url(/images/common/certi_ico.png) no-repeat; vertical-align: middle; margin-right: 10px;} #cnt_mem_login2 .info_box .c_btn li > a:after{ content: ""; position: relative; display: inline-block; width: 0px; height: 100%; vertical-align: middle;} #cnt_mem_login2 .info_box .c_btn li.link1 > a:before{ background-size: 84px auto; background-position: 5px 0;} #cnt_mem_login2 .info_box .c_btn li.link2 > a:before{ background-size: 84px auto; background-position: -54px 0;} @media screen and (max-width:768px){ #cnt_mem_login2 .info_box.con1 .ti{ font-size: 20px; margin-bottom: 15px; word-break: keep-all;} #cnt_mem_login2 .info_box.con1 .txt{ font-size: 14px; margin-bottom: 15px;} #cnt_mem_login2 .info_box .c_btn li > a{ height: 90px; } #cnt_mem_login2 .info_box .c_btn li > a span{ display: inline-block; margin-top: 10px;} #cnt_mem_login2 .info_box .c_btn li > a:before{ display: block; width: 30px; height: 30px; margin: 0 auto; margin-top: 15px; } #cnt_mem_login2 .info_box .c_btn li > a:after{ display: none;} } @media screen and (max-width:400px){ #cnt_mem_login2 .info_box.con1 .txt br{ display: none;} } /*아이디, 비밀번호 찾기*/ #cnt_f_idpw .info_box > .inner{ max-width: 750px; margin: 0 auto; } #cnt_f_idpw .info_box > .inner .top_txt{ text-align: center; font-size: 18px; word-break: keep-all; line-height: 1.4em; margin-bottom: 30px;} @media screen and (max-width:768px){ #cnt_f_idpw .info_box > .inner .top_txt{ text-align: center; font-size: 15px; margin-bottom: 15px;} } @media screen and (max-width:400px){ #cnt_f_idpw .info_box > .inner .top_txt br{ display: none;} } /*아이디, 비밀번호 찾기 - 결과화면*/ #cnt_f_idpw_result .info_box .inner { max-width: 70%; margin: 0 auto; } #cnt_f_idpw_result .info_box .result_txt{ font-size: 18px; text-align: center; line-height: 1.6em; word-break: keep-all; margin-bottom: 20px;} #cnt_f_idpw_result .info_box .form_table{ background: #fff;} @media screen and (max-width:768px){ #cnt_f_idpw_result .info_box .result_txt{ font-size: 15px; } } /*회원가입 - 약관동의 */ #cnt_join_01 .agree_box{} #cnt_join_01 .agree_box .item .txt_box .inner{ /*height: 280px; overflow-y:scroll; padding-bottom: 40px;*/} #cnt_join_01 .agree_box .rule_txt_wrap .info_box{ padding: 5px; margin: 0; } #cnt_join_01 .agree_box .rule_txt_wrap .info_box .taC{ text-align: left;} #cnt_join_01 .agree_box .rule_txt_wrap .info_box .headding1{ font-size: 18px; color: #425e9c;} #cnt_join_01 .agree_box .rule_txt_wrap .info_box .ptxt{ margin: 0 !important;} #cnt_join_01 .agree_box .rule_txt_wrap .paragraph{ margin: 10px 0;} #cnt_join_01 .agree_box .rule_txt_wrap .paragraph .headding1{ font-size: 17px; margin-bottom: 2px;} #cnt_join_01 .agree_box .rule_txt_wrap .paragraph .headding2{ font-size: 15px; margin-bottom: 2px;} #cnt_join_01 .agree_box .rule_txt_wrap .paragraph .ptxt{ font-size: 14px; } #cnt_join_01 .agree_box .rule_txt_wrap .paragraph .ul_list > li{ font-size: 14px; line-height: 1.4em; } #cnt_join_01 .agree_box .rule_txt_wrap .paragraph .normal_table table thead th { padding: 8px 8px; font-size: 14px; word-break: keep-all; } #cnt_join_01 .agree_box .rule_txt_wrap .paragraph .normal_table table td { padding: 8px 8px; font-size: 14px; word-break: keep-all; } #cnt_join_01 .agree_box .item.ag2 .txt_box .inner{ height: auto; padding-bottom: 0;} #cnt_join_01 .agree_box .item.ag3 .txt_box .inner{ height: auto; padding-bottom: 0;} #cnt_join_01 .agree_box .item.ag4 .txt_box .inner{ height: auto; padding-bottom: 0;} #cnt_join_01 .agree_box .item.ag5 .txt_box .inner{ height: auto; padding-bottom: 0;} #cnt_join_01 .agree_box .ag1 .rule_txt_wrap{} #cnt_join_01 .agree_box .ag2 .rule_txt_wrap{} #cnt_join_01 .agree_box .ag3 .rule_txt_wrap{} #cnt_join_01 .agree_box .ag4 .rule_txt_wrap{} #cnt_join_01 .agree_box .ag5 .rule_txt_wrap{} /*회원가입 - 가입완료 */ #cnt_join_04 .f_ti{ position: relative; max-width: 500px; margin: 0 auto; padding-left: 140px; padding-top: 17px;} #cnt_join_04 .f_ti:before{ content: ""; position: absolute; display:block; top: 0; left:0; width: 104px; height: 104px; background: url(/images/common/ico_check_circle.png) no-repeat center center;} #cnt_join_04 .f_ti .ti { font-size: 32px; color: #333; font-weight: 500; line-height: 1em; letter-spacing: -0.05em;} #cnt_join_04 .f_ti .txt { line-height: 1.4em; margin-top: 17px; letter-spacing: -0.05em;} #cnt_join_04 .info_box > .inner.in_1{ max-width: 500px; margin: 0 auto; } @media screen and (max-width:768px){ #cnt_join_04 .f_ti{ max-width: 320px; padding-left: 0px; padding-top: 0px; text-align: center;} #cnt_join_04 .f_ti:before{ position: static; width: 70px; height: 70px; margin: 0 auto; margin-bottom: 20px; background-size: contain;} #cnt_join_04 .f_ti .ti { font-size: 20px; text-align: center; } #cnt_join_04 .f_ti .txt { margin-top: 5px; text-align: center;} } /*회원가입 - 본인인증 */ #cnt_join_02{} #cnt_join_02 .info_box > .inner{ max-width: 750px; margin: 0 auto; } /*추첨제 안내 - 목록 - 결과가 없는경우*/ #cnt_lottery_list .lottery_wrap .lottery_list_none{} #cnt_lottery_list .lottery_wrap .lottery_list_none{} #cnt_lottery_list .lottery_wrap .lottery_list_none{} #cnt_lottery_list .lottery_wrap .lottery_list_none{ margin-bottom: 40px; background: url(/images/common/bg_gnb_img_infi.png) no-repeat center 20px; background-size: 400px auto; min-height: 250px; padding-top: 200px; font-size: 17px; text-align: center; background-color: #fff;} @media screen and ( max-width:768px){ #cnt_lottery_list .lottery_wrap .lottery_list_none{ margin-bottom: 40px; background-size: 80% auto; min-height: 270px; padding-top: 20%; font-size: 15px;} } @media screen and ( max-width:400px){ #cnt_lottery_list .lottery_wrap .lottery_list_none{ min-height: 180px; } } /*추첨제 안내 - 목록*/ #cnt_lottery_list .lottery_wrap{ border: 1px solid #d9d9d9;} #cnt_lottery_list .lottery_wrap > dl{ border-bottom: 1px solid #d9d9d9; overflow: hidden;} #cnt_lottery_list .lottery_wrap > dl > dt{ position: relative; padding: 20px 170px 20px 120px; } #cnt_lottery_list .lottery_wrap > dl > dt.on{ box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.3); } /*#cnt_lottery_list .lottery_wrap > dl > dt:after { content: ''; display: block; position: absolute; top: 30px; right: 30px; transform: rotate(180deg); background: url(/images/common/faq_arrow.png) no-repeat center center; transition: 0.3s; width: 30px; height: 30px;} #cnt_lottery_list .lottery_wrap > dl > dt.on:after {transform: rotate(0deg);}*/ #cnt_lottery_list .lottery_wrap > dl > dt .tt_name{ position: absolute; top: 25px; left: 20px;} #cnt_lottery_list .lottery_wrap > dl > dt .tt_title{ display: block; font-size: 18px; line-height: 1.4em; font-weight: 500;} #cnt_lottery_list .lottery_wrap > dl > dt .info_list{} #cnt_lottery_list .lottery_wrap > dl > dt .info_list > li{ display: inline-block; margin-top: 10px; margin-right: 20px; font-size: 14px;} #cnt_lottery_list .lottery_wrap > dl > dt .info_list > li > .s_ti{ display: inline-block; padding: 2px 6px; margin-right: 5px; background: #666; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 400; } #cnt_lottery_list .lottery_wrap > dl > dt .btn{ position: absolute; top: 25px; right: 20px;} #cnt_lottery_list .lottery_wrap > dl > dd { padding: 30px; background: #fafafa;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list { margin-left: -20px;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li { float: left; width: 33.33%; padding-left: 20px; margin-bottom: 20px;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner { position: relative; min-height: 290px; padding: 30px; background: #fff; border: 1px solid #d9d9d9; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner > .state_label { position: absolute; top: 0; right: 0; display: inline-block; width: 70px; height: 35px; padding: 10px; text-align: center; background: #df2e4b; color: #fff; font-size: 14px;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner > .item_cate { display: block; font-size: 13px;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner > .item_ti { display: block; font-weight: 500; font-size: 18px; margin-top: 15px; color: #000;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner > .ul_list { margin-top: 20px;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner > .ul_list > li { padding-top: 0px; padding-bottom: 0px; font-size: 14px;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner > .ul_list > li strong { color: #333; font-weight: 400;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner > .btn_list{ position: absolute; bottom: 20px; left: 50%; width: 86%; margin-left: -43%;} @media screen and ( max-width:1070px ){ #cnt_lottery_list .lottery_wrap > dl > dt{ position: relative; padding: 20px 150px 20px 20px; } #cnt_lottery_list .lottery_wrap > dl > dt .tt_name{ position: static; margin-bottom: 5px;} #cnt_lottery_list .lottery_wrap > dl > dt .info_list > li > .s_ti{ font-size: 12px;} } @media screen and ( max-width:950px ){ #cnt_lottery_list .lottery_wrap > dl > dt{ position: relative; padding: 20px 20px 20px 20px; } #cnt_lottery_list .lottery_wrap > dl > dt .btn{ position: static; margin-top: 10px !important; width: 100% !important; } #cnt_lottery_list .lottery_wrap > dl > dd { padding: 20px;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li { width: 50%; } #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner { padding: 15px; min-height: 260px; } #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner > .ul_list { margin-top: 10px;} #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li .inner > .btn_list{ position: absolute; bottom: 20px; left: 50%; width: 90%; margin-left: -45%;} } @media screen and ( max-width:540px ){ #cnt_lottery_list .lottery_wrap > dl > dd .item_list > li { width: 100%; } } /*추첨제 결과 조회 - 상세보기*/ #cnt_lottery_result_detail .list_top .list_search .in_ti{ font-size: 17px; font-weight: 500; margin-right: 10px; color: #333; font-size: 15px; } #cnt_lottery_result_detail .info_1 .ptxt{ word-break: keep-all;} @media screen and ( max-width:768px ){ #cnt_lottery_result_detail .list_top .list_search .in_ti{ display: none; } /*#cnt_lottery_result_detail .list_top .list_search .in_ti{ display: block; margin-bottom: 10px; text-align: left;}*/ #cnt_lottery_result_detail .board_list .writer, #cnt_lottery_result_detail .board_list .email, #cnt_lottery_result_detail .board_list .tit{ font-size: 13px; letter-spacing: -0.05em;} } @media screen and ( max-width:540px ){ #cnt_lottery_result_detail .info_1 .ptxt br{ display: none;} } /*마이페이지 - 예약내역 - 승인불가 사유 툴팁*/ .reason_tooltip{ position: relative; display: inline-block;} .reason_tooltip .view_btn{ position: relative; display: inline-block; width: 22px; height: 22px; padding: 3px; border-radius: 16px; background: #ff3c78; vertical-align: middle; text-align: center !important; text-decoration: none;} .reason_tooltip .view_btn:hover{ background: #e30247; } .reason_tooltip .view_btn:before{ content: "?"; position: relative; top: -4px; font-size: 16px; font-weight: 500; color: #fff; } .reason_tooltip .view_btn.on + .reason_txt{ display: block;} .reason_tooltip .reason_txt{ display: none; position: absolute; z-index: 100; top: 20px; left: -110px; width: 240px; background: #fff; padding: 15px; border: 1px solid #b6b6b6; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); } .reason_tooltip .reason_txt .tit{ display: inline-block; margin-bottom: 5px; font-weight: 500; color: #333; letter-spacing: -0.05em;} .reason_tooltip .reason_txt .txt{ letter-spacing: -0.05em;} .reason_tooltip .reason_txt .info_txt{ margin-top: 15px; color: #797979;} /*공유자원 - 목록 1.조건 상세검색*/ #cnt_share_item_list .detail_search_box{ position: relative; /*padding-right: 200px;*/} #cnt_share_item_list .detail_search_box > ul{} #cnt_share_item_list .detail_search_box > ul > li{ float: left; position: relative; width: 33.33%; padding-left: 100px; padding-right: 20px; margin-bottom: 10px; } #cnt_share_item_list .detail_search_box > ul > li > .ti{ position: absolute; top: 10px; left: 30px; width: 60px; letter-spacing: -0.05em; line-height: 1em; color: #333; font-weight: 400;} #cnt_share_item_list .detail_search_box .search_btn{ position: absolute; right: 20px; bottom: -10px; } #cnt_share_item_list .detail_search_box .search_btn .btn{ position: relative; width: 200px; background: #344769; border: 1px solid #344769; } #cnt_share_item_list .detail_search_box .search_btn .btn:hover{ background: #475b80;} #cnt_share_item_list .detail_search_box .search_btn .btn:before{ content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: middle; background: url(/images/common/ico_search.png) no-repeat 0 0;} @media screen and ( max-width:1070px){ #cnt_share_item_list .detail_search_box > ul > li{ width: 50%; margin-bottom: 8px; } #cnt_share_item_list .detail_search_box .search_btn{ position: static; margin-top: 15px; text-align: center;} } @media screen and ( max-width:768px){ #cnt_share_item_list .detail_search_box > ul > li{ width: 100%; } #cnt_share_item_list .detail_search_box .search_btn .btn{ width: 100%; } } /*결과가 없는경우*/ #cnt_share_item_list .share_list_none{} #cnt_share_item_list .share_list_none{ margin-bottom: 40px; background: url(/images/common/bg_gnb_img_infi.png) no-repeat center 20px; background-size: 400px auto; min-height: 250px; padding-top: 200px; font-size: 17px; text-align: center; background-color: #fff; font-weight: bold; font-size: 30px; } @media screen and ( max-width:768px){ #cnt_share_item_list .share_list_none{ margin-bottom: 40px; background-size: 80% auto; min-height: 270px; padding-top: 20%; font-size: 15px; font-weight: bold; font-size: 30px; } } @media screen and ( max-width:400px){ #cnt_share_item_list .share_list_none{ min-height: 180px; font-weight: bold; font-size: 30px; } } /*공유자원 - 목록 2.자원 list*/ #cnt_share_item_list .share_list ul.list{ } #cnt_share_item_list .share_list ul.list > li{ float: left; position: relative; width: 23.87%; margin-right: 1.5%; margin-bottom: 20px; overflow: hidden;} #cnt_share_item_list .share_list ul.list > li:nth-child(4n){ margin-right: 0; } #cnt_share_item_list .share_list ul.list > li > a.link_btn{ display: block; width: 100%; height: auto; text-decoration: none; } #cnt_share_item_list .share_list ul.list > li > a.link_btn:focus:after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #a6c8ff;} #cnt_share_item_list .share_list ul.list > li > a.link_btn:focus .thumb, #cnt_share_item_list .share_list ul.list > li > a.link_btn:hover .thumb { transform: scale(1.1); } #cnt_share_item_list .share_list ul.list > li > a.link_btn:focus .ti_txt, #cnt_share_item_list .share_list ul.list > li > a.link_btn:hover .ti_txt { text-decoration: underline;} #cnt_share_item_list .share_list .itemWrap { position: relative; overflow: hidden; display: block; width: 100%; } #cnt_share_item_list .share_list .itemWrap .thumb { width: 100%; height: 190px; background-size: cover; transition: transform 0.2s ease-in-out; } #cnt_share_item_list .share_list .itemWrap .thumb > img{ height: 0px; width: 0px;} #cnt_share_item_list .share_list .itemWrap .locate{ position: absolute; top: 0; left: 0; display: inline-block; font-size: 0px; } #cnt_share_item_list .share_list .itemWrap .locate span{ display: inline-block; padding: 7px 13px; min-height: 28px; color: #fff; background: #344769; font-size: 14px;} #cnt_share_item_list .share_list .itemWrap .locate span.ca_2{ background: #e30070; } #cnt_share_item_list .share_list .itemWrap .info{ position: relative; height: 160px; padding: 15px 20px 20px; background: #fff;} #cnt_share_item_list .share_list .itemWrap .info .ti_txt{ display: block; width: 100%; font-size: 20px; color: #333; font-weight: 500; line-height: 1.4em; /*멀티라인인 경우 height의 기준이 됨*/ height: 1.4em; /*ie대응 한줄-line-height 의 1배 1.4, 두줄-line-height 의 2배 2.8 em*/ overflow: hidden; text-overflow: ellipsis; white-space:nowrap; /*한줄 대응 white-space:nowrap, 멀티라인 대응 white-space:normal */ /*word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;*/ /*멀티라인 대응 - ie firefox 에선 적용안됨*/ } #cnt_share_item_list .share_list .itemWrap .info .etc{ margin-top: 15px;} #cnt_share_item_list .share_list .itemWrap .info .etc > li{ position: relative; padding-left: 60px; font-size: 14px;} #cnt_share_item_list .share_list .itemWrap .info .etc > li+li{ margin-top: 10px;} #cnt_share_item_list .share_list .itemWrap .info .etc > li > strong{ position: absolute; top: 0; left: 0; display: inline-block; margin-right: 10px; color: #333;} #cnt_share_item_list .share_list .itemWrap .info .etc > li > strong > i{ display: inline-block; } #cnt_share_item_list .share_list .itemWrap .info .etc > li > span{ display: inline-block; } #cnt_share_item_list .share_list .itemWrap .info .etc > li.cate > span{ display: inline-block; } #cnt_share_item_list .share_list .itemWrap .info .etc > li.cate > span > .gap{ margin: 0 5px; vertical-align: baseline;} /*#cnt_share_item_list .share_list .itemWrap .info .etc > li.cate span { position: relative; display: inline-block; padding-right: 4px; } #cnt_share_item_list .share_list .itemWrap .info .etc > li.cate span + span:before { content: ""; display: inline-block; margin-right: 3px; position: relative; width: 6px; height: 11px; background: url("/images/common/ico_gap_arrow.png") no-repeat center center; }*/ /*---- 실시간 예약가능시간*/ #cnt_share_item_list .share_list ul.list > li > a.reg_time_btn { position: relative; display: block; width: 100%; height: 42px; margin: 0 !important; padding: 12px 10px 10px; text-align: center; letter-spacing: -0.05em; border: 1px solid #425e9c; color: #425e9c;} #cnt_share_item_list .share_list ul.list > li > a.reg_time_btn:focus {text-decoration: underline !important;} #cnt_share_item_list .share_list ul.list > li > a.reg_time_btn:before { content: ""; position: relative; top: -2px; display: inline-block; width: 20px; height: 20px; margin-right: 5px; background: url(/images/common/ico_time.png) no-repeat 0 0; vertical-align: middle; } #cnt_share_item_list .share_list ul.list > li > .reg_time_info { display: none; position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; background: #234c8c; background: rgba(11, 57, 127, 0.9);} /*#cnt_share_item_list .share_list ul.list > li > .reg_time_info.on {display: block; bottom: 0px;}*/ #cnt_share_item_list .share_list ul.list > li > .reg_time_info { color: #fff;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info > .ti { display: block; font-size: 18px; text-align: center; font-weight: 500; margin-top: 25px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list_wrap { width: 210px; height: 250px; padding: 10px 0; margin: 0 auto; margin-top: 20px; background: #153367; background: rgba(0, 13, 47, 0.4); border-radius: 6px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list {width: 100%;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li { text-align: center;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li + li { margin-top: 6px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li span { display:inline-block; color: #99c2ff; text-decoration: line-through;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li .txt_a { margin-right: 14px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li.able span { text-decoration: none;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li.able .txt_a { color: #fff;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li.able .txt_b { color: #fff600; } #cnt_share_item_list .share_list ul.list > li > .reg_time_info .detail_btn { position: absolute; bottom: 30px; left: 50%; margin-left: -70px; border: 1px solid #6d8dd6; border-radius: 50px; } #cnt_share_item_list .share_list ul.list > li > .reg_time_info .close_btn { display: none; position: absolute; bottom: 30px; right: 10px; width: 50px; min-width: auto; padding-left: 0px; padding-right: 0px; border: 1px solid #6d8dd6; border-radius: 50px; } #cnt_share_item_list .share_list ul.list > li > .reg_time_info .close_btn > .ico{ margin: 0px;} /*mCustomScrollbar css 커스텀 - 목록과 스크롤 사이간격 수정*/ #cnt_share_item_list .share_list ul.list > li > .reg_time_info .mCSB_inside>.mCSB_container { margin-right: 20px; } @media screen and ( max-width:1070px){ #cnt_share_item_list .share_list ul.list > li{ width: 32.13%; margin-right: 1.6%; margin-bottom: 20px;} #cnt_share_item_list .share_list ul.list > li:nth-child(4n){ margin-right: 1.5%; } #cnt_share_item_list .share_list ul.list > li:nth-child(3n){ margin-right: 0; } /*---- 실시간 예약가능시간*/ #cnt_share_item_list .share_list ul.list > li > .reg_time_info .detail_btn { position: absolute; bottom: 10px; left: 10px; margin-left: 0px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .close_btn { display: inline-block; bottom: 10px; } } @media screen and ( max-width:768px){ #cnt_share_item_list .share_list ul.list > li{ width: 49%; margin-right: 2%; margin-bottom: 20px;} #cnt_share_item_list .share_list ul.list > li:nth-child(4n){ margin-right: 2%; } #cnt_share_item_list .share_list ul.list > li:nth-child(3n){ margin-right: 2%; } #cnt_share_item_list .share_list ul.list > li:nth-child(2n){ margin-right: 0; } #cnt_share_item_list .share_list .itemWrap .thumb { width: 100%; height: 130px; } #cnt_share_item_list .share_list .itemWrap .locate span{ padding: 4px 6px; min-height: 20px; font-size: 13px;} #cnt_share_item_list .share_list .itemWrap .info{ height: 120px; padding: 10px 10px 10px;} #cnt_share_item_list .share_list .itemWrap .info .ti_txt{ font-size: 15px; } #cnt_share_item_list .share_list .itemWrap .info .etc{ margin-top: 8px;} #cnt_share_item_list .share_list .itemWrap .info .etc > li{ font-size: 12px; padding-left: 30px;} #cnt_share_item_list .share_list .itemWrap .info .etc > li+li{ margin-top: 4px; } #cnt_share_item_list .share_list .itemWrap .info .etc > li > strong{ display: inline-block; margin-right: 10px; color: #333;} #cnt_share_item_list .share_list .itemWrap .info .etc > li > strong > i{ display: none; } /*----- 실시간 예약가능시간*/ #cnt_share_item_list .share_list ul.list > li > a.reg_time_btn { font-size: 14px; letter-spacing: -0.08em;} #cnt_share_item_list .share_list ul.list > li > a.reg_time_btn:before { width: 13px; height: 13px; background-size: contain;} #cnt_share_item_list .share_list ul.list > li > a.reg_time_btn .t1 { display: none;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info > .ti { font-size: 15px; margin-top: 25px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list_wrap { margin-top: 10px; width: 90%; height: 185px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list {} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li{ font-size: 12px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li + li { margin-top: 3px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li .txt_a { margin-right: 8px;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .time_list > li .txt_b > .ss1 { display: none;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .detail_btn { padding: 6px 10px; height: 28px; } #cnt_share_item_list .share_list ul.list > li > .reg_time_info .detail_btn > .ss1{ display: none;} #cnt_share_item_list .share_list ul.list > li > .reg_time_info .close_btn{ padding: 4px; height: 28px; width: 32px;} } /*공유자원 - 상세*/ #cnt_share_item_detail{} #cnt_share_item_detail article + article{ margin-top: 20px; margin-bottom: 20px;} /*---- SNS 링크공유 */ #cnt_share_item_detail .sns_link_box{ float:right; display:inline; z-index: 1; right: 20px; text-align: right;} #cnt_share_item_detail .sns_link_box .sns_btn{ float:left; display: inline-block; width:42px; height: 42px; background-size: contain;} #cnt_share_item_detail .sns_link_box .sns_btn + .sns_btn{ margin-left: 8px;} #cnt_share_item_detail .sns_link_box .sns_btn.facebook{ background-image: url(/images/common/ico_sns_facebook.png);} #cnt_share_item_detail .sns_link_box .sns_btn.naver{ background-image: url(/images/common/ico_sns_naver.png);} #cnt_share_item_detail .sns_link_box .sns_btn.kakao{ background-image: url(/images/common/ico_sns_kakao.png);} @media screen and ( max-width:768px){ #cnt_share_item_detail .sns_link_box{ bottom: -70px; } #cnt_share_item_detail .sns_link_box .sns_btn{ width:32px; height: 32px;} #cnt_share_item_detail .sns_link_box .sns_btn + .sns_btn{ margin-left: 5px;} } /*공유자원 - 상세 1.자원정보 및 예약가능정보*/ #detail_head{} #detail_head .head_title{ position: relative; margin-bottom: 20px; /*background: #032268;*/ text-align: center; } #detail_head .head_title .ti{ display: block; max-width: 70%; margin: 0 auto; color: #000; font-size: 34px; font-weight: 500; line-height: 1.4em; letter-spacing: -0.05em;} #detail_head .head_title .btn{ position: absolute; top:8px; right: 15px; margin: 0; border-radius: 20px;} #detail_head > .info_box{ position: relative; padding: 20px;} #detail_head > .info_box:before{ content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #dfe3ec;} #detail_head > .info_box > .con1{ float: left; width: 50%; padding-right: 20px;} #detail_head > .info_box > .con2{ float: left; width: 50%; padding-left: 20px; } #detail_head > .info_box > .con1 > .inner{ } #detail_head > .info_box > .con2 > .inner{ min-height: 500px; padding-bottom: 1px;} @media screen and ( max-width:1070px){ #detail_head > .info_box{ } #detail_head > .info_box:before{ display: none;} #detail_head > .info_box > .con1{ float: none; width: auto; max-width: 596px; margin: 0 auto; margin-bottom: 30px; padding-right: 0px;} #detail_head > .info_box > .con2{ float: none; width: 100%; padding-left: 0px;} #detail_head > .info_box > .con2 > .inner{ min-height: 0; padding-bottom: 1px;} } @media screen and ( max-width:768px){ #detail_head .head_title{ } #detail_head .head_title .ti{max-width: 100%; margin: 0; font-size: 26px;} #detail_head .head_title .btn{ position: absolute; top:-30px; right: 0px; margin: 0 !important; padding: 5px 10px; height: 26px; } } /*----공유자원 상세보기 상단 - 포토슬라이드 - */ /*포토 뷰*/ #detail_head .photo_group .photo_view{ width: 100%; height: 360px; overflow: hidden; margin-bottom: 10px;} #detail_head .photo_group .photo_view .thumb{ height: 360px; background-position: center center; background-size: cover; background-repeat: no-repeat;} #detail_head .photo_group .photo_view .thumb img{ position: absolute; left: -5000px; width: 0; height: 0;} /*owl - nav 수정*/ #detail_head .photo_group .photo_view .owl-theme{ position: relative;} #detail_head .photo_group .photo_view .owl-theme .owl-nav { text-align: center; -webkit-tap-highlight-color: transparent; margin-top: 0px; } #detail_head .photo_group .photo_view .owl-theme .owl-nav [class*=owl-] { position: absolute; top: 50%; margin-top: -50px; left: 0; padding: 0; width: 35px; height: 100px; background: rgba(0, 0, 0, 0.3); display: inline-block; cursor: pointer; color: #FFF; font-size: 0; } #detail_head .photo_group .photo_view .owl-theme .owl-nav [class*=owl-]:hover { background: rgba(0, 0, 0, 1); color: #FFF; text-decoration: none } #detail_head .photo_group .photo_view .owl-theme .owl-nav [class*=owl-] span { position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -20px; width: 30px; height: 40px; overflow: hidden; font-size: 70px;} #detail_head .photo_group .photo_view .owl-theme .owl-nav .owl-prev { left: 0px;} #detail_head .photo_group .photo_view .owl-theme .owl-nav .owl-next { left: auto; right: 0px;} /*포토 썸네일*/ #detail_head .photo_group .photo_page { width: 100%; height: 140px;} #detail_head .photo_group .photo_page .item{ } #detail_head .photo_group .photo_page .thumb{ height: 100px; background-position: center center; background-size: cover; background-repeat: no-repeat;} #detail_head .photo_group .photo_page .thumb img{ position: absolute; z-index: 2; left: -5000px; width: 0; height: 0;} /*owl-수정*/ #detail_head .photo_group .photo_page .owl-item .item{ position: relative; cursor: pointer;} #detail_head .photo_group .photo_page .owl-item .item:before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255, 255, 255, 0.6);} #detail_head .photo_group .photo_page .owl-item.current .item:before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255, 255, 255, 0); border:2px solid #3367d6;} @media screen and ( max-width:768px){ #detail_head .photo_group .photo_view{ height: 240px;} #detail_head .photo_group .photo_view .thumb{ height: 240px;} #detail_head .photo_group .photo_page { height: 120px;} #detail_head .photo_group .photo_page .thumb{ height: 90px;} } @media screen and ( max-width:400px){ #detail_head .photo_group .photo_view{ height: 180px;} #detail_head .photo_group .photo_view .thumb{ height: 180px;} #detail_head .photo_group .photo_page { height: 80px;} #detail_head .photo_group .photo_page .thumb{ height: 50px;} } /*----접수기간,사용기간으로 안내*/ #detail_head .range_type_date{} #detail_head .range_type_date .form_table{ border-color: #d9d9d9;} /*----예약 버튼*/ #detail_head .reg_btn_group{ width: 100%; margin-top: 30px; } #detail_head .reg_btn_group > .btn{ float: left; width: 50%; margin: 0px !important;} /*공유자원 - 상세 2.기본정보*/ /*공유자원 - 상세 3.상세정보*/ #detail_descript{} #detail_descript .info_box{} #detail_descript .info_box > .inner{ line-height: 1.6em;} #detail_descript .info_box > .inner p, #detail_descript .info_box > .inner span, #detail_descript .info_box > .inner i, #detail_descript .info_box > .inner em, #detail_descript .info_box > .inner strong, #detail_descript .info_box > .inner div, #detail_descript .info_box > .inner h1, #detail_descript .info_box > .inner h2, #detail_descript .info_box > .inner h3, #detail_descript .info_box > .inner h4, #detail_descript .info_box > .inner h5, #detail_descript .info_box > .inner h6, #detail_descript .info_box > .inner td, #detail_descript .info_box > .inner th{ font-family: "Noto Sans KR","Malgun Gothic","맑은 고딕",Dotum,"돋움",Helvetica,AppleSDGothicNeo,sans-serif !important;} /*공유자원 - 상세 4.주의사항*/ #detail_attention{} #detail_attention .info_box{} #detail_attention .info_box > .inner{ line-height: 1.6em;} #detail_attention .info_box{} #detail_attention .info_box > .inner{ line-height: 1.6em;} #detail_attention .info_box > .inner p, #detail_attention .info_box > .inner span, #detail_attention .info_box > .inner i, #detail_attention .info_box > .inner em, #detail_attention .info_box > .inner strong, #detail_attention .info_box > .inner div, #detail_attention .info_box > .inner h1, #detail_attention .info_box > .inner h2, #detail_attention .info_box > .inner h3, #detail_attention .info_box > .inner h4, #detail_attention .info_box > .inner h5, #detail_attention .info_box > .inner h6, #detail_attention .info_box > .inner td, #detail_attention .info_box > .inner th{ font-family: "Noto Sans KR","Malgun Gothic","맑은 고딕",Dotum,"돋움",Helvetica,AppleSDGothicNeo,sans-serif !important;} /*공유자원 - 상세 5.이용후기*/ #detail_post{} #detail_post .top_link{ position: relative; background: #0b397f; min-height: 68px; padding:20px 0; margin-bottom: 15px; text-align: center; } #detail_post .top_link:before{ content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -450px; display: inline-block; width: 80px; height: 70px; vertical-align: middle; background: url(/images/main/img_share.png) no-repeat center 0; background-size: cover;} #detail_post .top_link .txt{ display: inline-block; margin-right: 15px; color: #fff; line-height: 1.4em;} #detail_post .top_link .btn{ border-radius: 50px;} /*---- 후기목록*/ #detail_post .info_box{} #detail_post .info_box > .inner > .post_list{} #detail_post .post_list{width: 100%; position:relative; border-top:1px solid #d9d9d9;} #detail_post .post_list .list_none{ text-align: center; padding: 60px 0; border-bottom: 1px solid #d9d9d9;} #detail_post .post_list dl{border-bottom: 1px solid #d9d9d9;} #detail_post .post_list dt{position:relative; width:100%; cursor: pointer;} #detail_post .post_list dt:after{content:''; display:block; position:absolute; top:15px; right:3%; transform:rotate(180deg); background:url(/images/common/faq_arrow.png) no-repeat center center; transition:0.3s; width: 30px; height: 30px;} #detail_post .post_list dt.on:after{transform:rotate(0deg);} #detail_post .post_list dt a{display: block; padding:15px 100px 15px 20px; text-decoration: none;} #detail_post .post_list dt .p_ti{ display: inline-block; margin-right: 10px; line-height: 1.4em; color: #333; font-size: 18px; font-weight: 400;} #detail_post .post_list dt a:hover .p_ti{text-decoration: underline;} #detail_post .post_list dt.on .p_ti{ color: #425e9c; text-decoration: underline;} #detail_post .post_list dt .p_writer{ display: inline-block; margin-right: 10px; font-size: 13px;} #detail_post .post_list dt .p_date{ display: inline-block; font-size: 13px; } #detail_post .post_list dd{position:relative; padding:20px 35px 40px; background:#f9f9f9;} #detail_post .post_list dd .in_info{ display: block; font-size: 13px; margin-bottom: 20px;} #detail_post .post_list dd .in_info .p_cate{ display: inline-block; margin-right: 20px;} #detail_post .post_list dd .in_info .p_cate_ti{ display: inline-block; color: #000; font-weight: 400;} #detail_post .post_list dd .inner_txt{ line-height: 1.6em;} /*후기속 사진*/ #detail_post .post_list dd .photo_list{ margin-bottom: 20px;} #detail_post .post_list dd .photo_list:after{ content: ""; display: block; clear: both;} #detail_post .post_list dd .photo_list > li{ float: left; margin-right: 1px; margin-bottom: 1px;} #detail_post .post_list dd .photo_list > li .item{ position: relative; width: 180px; height:115px; background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #e8e8e8; } #detail_post .post_list dd .photo_list > li .item > img{ width: 0; height: 0; position: absolute; } #detail_post .post_list dd .photo_list > li .item > a.img_view{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0);} #detail_post .post_list dd .photo_list > li .item > a.img_view:focus, #detail_post .post_list dd .photo_list > li .item > a.img_view:hover{ background: rgba(0, 0, 0, 0.4);} #detail_post .post_list dd .photo_list > li .item > a.img_view:focus:after, #detail_post .post_list dd .photo_list > li .item > a.img_view:hover:after{ content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin-left: -13px; margin-top: -13px; background: url(/images/common/ico_view_plus.png) no-repeat center center;} #detail_post .other_post{} #detail_post .other_post > .ti { display: block; text-align: center; font-size: 23px; line-height: 1.4em; font-weight: 500; color: #333;} #detail_post .other_post .btn { min-width: 30%; border-radius: 30px;} @media screen and ( max-width:1070px){ #detail_post .top_link{ padding-left: 150px; text-align: left;} #detail_post .top_link:before{ position: absolute; bottom: 0; left: 60px; width: 80px; height: 90px; margin-left: 0px; } #detail_post .top_link .txt{ display: block; margin-right: 0px; margin-bottom: 10px;} } @media screen and ( max-width:768px){ #detail_post .top_link{ padding: 10px 20px 10px 84px;} #detail_post .top_link:before{ position: absolute; bottom: 0; left: 10px; width: 60px; height: 80px;} #detail_post .top_link .txt{ font-size: 12px;} #detail_post .post_list dt a{padding:10px 30px 10px 3px;} #detail_post .post_list dt .p_ti{ display: block; margin-bottom: 5px; font-size: 14px;} #detail_post .post_list dt .p_writer{ font-size: 12px;} #detail_post .post_list dt .p_date{ font-size: 12px; } #detail_post .post_list dd{ padding:10px 10px 30px;} #detail_post .post_list dd .in_info{ font-size: 12px; margin-bottom: 15px;} #detail_post .post_list dd .in_info .p_cate{ margin-right: 15px;} /*후기속 사진*/ #detail_post .post_list dd .photo_list > li .item{ width: 130px; height:90px; background-size: cover; } #detail_post .post_list dd .photo_list > li .item > img{ width: 0; height: 0; position: absolute; text-indent: -9999px;} #detail_post .other_post{ margin-bottom: 20px;} #detail_post .other_post > .ti { font-size: 17px; letter-spacing: -0.05em;} #detail_post .other_post .btn { min-width:auto; width: 80%;} #detail_post .other_post .btn { margin-bottom: 10px !important;} } /*공유자원 - 상세 6.연관자원 목록*/ #detail_relation{} #detail_relation .info_box{} #detail_relation .info_box > .relation_share_list{} #detail_relation .relation_share_list{ position: relative; } #detail_relation .relation_share_list .item > a.link_btn{ display: block; width: 100%; height: auto; text-decoration: none; } #detail_relation .relation_share_list .item > a.link_btn:focus .ti_txt, #detail_relation .relation_share_list .item > a.link_btn:hover .ti_txt { text-decoration: underline;} #detail_relation .relation_share_list .item > a.link_btn:focus:after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #a6c8ff;} #detail_relation .relation_share_list .item > a > .itemWrap{} #detail_relation .relation_share_list .itemWrap { position: relative; overflow: hidden; display: block; width: 100%; } #detail_relation .relation_share_list .itemWrap .thumb { width: 100%; height: 140px; background-size: cover;} #detail_relation .relation_share_list .itemWrap .thumb > img{ height: 0px; width: 0px;} #detail_relation .relation_share_list .itemWrap .locate{ position: absolute; top: 0; left: 0; display: inline-block; } #detail_relation .relation_share_list .itemWrap .locate span{ display: inline-block; padding: 7px 13px; min-height: 28px; color: #fff; background: #344769; font-size: 14px;} #detail_relation .relation_share_list .itemWrap .locate span.ca_2{ background: #e30070; } #detail_relation .relation_share_list .itemWrap .info{ position: relative; height: 120px; padding: 15px 15px; background: #fff; border: 1px solid #d9d9d9; border-top:none;} #detail_relation .relation_share_list .itemWrap .info .ti_txt{ display: block; width: 100%; font-size: 16px; color: #333; font-weight: 500; line-height: 1.4em; /*멀티라인인 경우 height의 기준이 됨*/ height: 1.4em; /*ie대응 한줄-line-height 의 1배 1.4, 두줄-line-height 의 2배 2.8 em*/ overflow: hidden; text-overflow: ellipsis; white-space:nowrap; /*한줄 대응 white-space:nowrap, 멀티라인 대응 white-space:normal */ /*word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;*/ /*멀티라인 대응 - ie firefox 에선 적용안됨*/ } #detail_relation .relation_share_list .itemWrap .info .etc{ margin-top: 10px;} #detail_relation .relation_share_list .itemWrap .info .etc > li{ position: relative; font-size: 13px; padding-left: 60px;} #detail_relation .relation_share_list .itemWrap .info .etc > li+li{ margin-top: 5px;} #detail_relation .relation_share_list .itemWrap .info .etc > li > strong{ position: absolute; top: 0px; left: 0; display: inline-block; margin-right: 10px; color: #333;} #detail_relation .relation_share_list .itemWrap .info .etc > li > strong > i{ display: inline-block; } #detail_relation .relation_share_list .itemWrap .info .etc > li > span{ display: inline-block;} #detail_relation .relation_share_list .itemWrap .info .etc > li.cate span { position: relative; display: inline-block; padding-right: 4px; word-break: break-all; } #detail_relation .relation_share_list .itemWrap .info .etc > li.cate span.c1 .gap { display: inline !important; width: auto; margin: 0 4px; vertical-align: baseline;} /*#detail_relation .relation_share_list .itemWrap .info .etc > li.cate span + span:before { content: ""; display: inline-block; margin-right: 3px; position: relative; width: 6px; height: 11px; background: url("/images/common/ico_gap_arrow.png") no-repeat center center; }*/ #detail_relation .relation_share_list .control_btn{ position: absolute; top: -90px; right: 0;} #detail_relation .relation_share_list .control_btn > a{ display: inline-block; width: 40px; height: 40px; border: 1px solid #c6c6c6; } #detail_relation .relation_share_list .control_btn > a:hover{ border: 2px solid #000;} #detail_relation .relation_share_list .control_btn > a.prev{ background: url(/images/common/ico_nav_left.png) no-repeat center center; background-color: #fff;} #detail_relation .relation_share_list .control_btn > a.next{ background: url(/images/common/ico_nav_right.png) no-repeat center center; background-color: #fff; } @media screen and ( max-width:1070px){ } @media screen and ( max-width:768px){ #detail_relation .relation_share_list .item{ } #detail_relation .relation_share_list .itemWrap .thumb { width: 100%; height: 130px; } #detail_relation .relation_share_list .itemWrap .locate span{ padding: 4px 6px; min-height: 20px; font-size: 13px;} #detail_relation .relation_share_list .itemWrap .info{ height: 90px; padding: 5px 10px 10px;} #detail_relation .relation_share_list .itemWrap .info .ti_txt{ font-size: 15px; } #detail_relation .relation_share_list .itemWrap .info .etc{ margin-top: 4px;} #detail_relation .relation_share_list .itemWrap .info .etc > li{ font-size: 12px; padding-left: 35px;} #detail_relation .relation_share_list .itemWrap .info .etc > li+li{ margin-top: 4px; } #detail_relation .relation_share_list .itemWrap .info .etc > li > strong{ display: inline-block; margin-right: 10px; color: #333;} #detail_relation .relation_share_list .itemWrap .info .etc > li > strong > i{ display: none; } #detail_relation .relation_share_list .control_btn{ position: absolute; top: -60px; right: 0;} } /*예약 1단계 - 정보입력*/ #cnt_reg_step1{} #cnt_reg_step1 article + article{ margin-top: 30px; margin-bottom: 30px;} /*예약 1단계 - 1.자원정보 및 예약가능정보*/ #cnt_reg_step1 #reg_head{} #cnt_reg_step1 #reg_head > .info_box{ position: relative; padding: 20px;} #cnt_reg_step1 #reg_head > .info_box:before{ content: ""; position: absolute; top: 0; left: 40.25%; width: 1px; height: 100%; background: #dfe3ec;} #cnt_reg_step1 #reg_head > .info_box > .con1{ float: left; width: 40%; padding-right: 20px;} #cnt_reg_step1 #reg_head > .info_box > .con2{ float: left; width: 60%; padding-left: 20px; min-height: 500px; padding-bottom: 1px;} /*----달력*/ #cnt_reg_step1 #reg_head .con2 .add_option_list{ } #cnt_reg_step1 #reg_head .con2 .add_option_list >li{width: 100%; padding: 5px 10px; /*background: #f5f6f7;*/ line-height: 1em;} #cnt_reg_step1 #reg_head .con2 .add_option_list >li+li{ margin-top: 2px; border-top: 1px dashed #d9d9d9;} #cnt_reg_step1 #reg_head .con2 .add_option_list >li > .txt, #cnt_reg_step1 #reg_head .con2 .add_option_list >li > .price{ display: inline-block;} #cnt_reg_step1 #reg_head .con2 .add_option_list >li > .txt{ width: 30%; padding-right: 10px;} #cnt_reg_step1 #reg_head .con2 .add_option_list >li > .price{ width: 30%; text-align: right; padding-right: 20px;} /*이용대상 확인*/ #cnt_reg_step1 #reg_user_confirm{} /*동의*/ #cnt_reg_step1 .agree_box .chek_box{ padding: 18px 20px; text-align: center; background: #6e6e76; color: #fff; font-size: 18px; } #cnt_reg_step1 .agree_box .chek_box > label{ margin-left: 6px; word-break: keep-all;} @media screen and ( max-width:1070px){ #cnt_reg_step1 #reg_head > .info_box{ } #cnt_reg_step1 #reg_head > .info_box:before{ display: none;} #cnt_reg_step1 #reg_head > .info_box > .con1{ float: none; width: auto; max-width: 596px; margin: 0 auto; margin-bottom: 30px; padding-right: 0px;} #cnt_reg_step1 #reg_head > .info_box > .con2{ float: none; width: 100%; padding-left: 0px;} } @media screen and ( max-width:768px){ #cnt_reg_step1 #reg_head .con2 .add_option_list >li > .txt{ width: 100%; margin-bottom: 5px;} #cnt_reg_step1 #reg_head .con2 .add_option_list >li > .price{ width: 90px; text-align: left;} #cnt_reg_step1 .agree_box .chek_box{ padding: 10px 20px; font-size: 15px; } #cnt_reg_step1 .agree_box .chek_box > label{ margin-left: 3px;} } /*예약 2단계 - 정보확인*/ /*최종결제금액*/ #cnt_reg_step2{} #cnt_reg_step2 .pay_price{} #cnt_reg_step2 .pay_price > .conLeft{ float: left; width: 50%;} #cnt_reg_step2 .pay_price > .conRight{ float: left; width: 50%; padding-left: 40px;} #cnt_reg_step2 .pay_price > .conRight > dl{ border-top: 1px solid #333; border-bottom: 1px solid #d9d9d9; width: 100%; height: 96px;} #cnt_reg_step2 .pay_price > .conRight > dl > dt{ float: left; width: 30%; height: 100%; padding-top: 20px; background: #f5f6f7; text-align: center; word-break: keep-all; color: #000; font-size: 16px; font-weight: 500; line-height: 1.4em;} #cnt_reg_step2 .pay_price > .conRight > dl > dd{ float: left; width: 70%; text-align: center; padding: 20px;} #cnt_reg_step2 .pay_price > .conRight > dl > dd .price_txt{ display:inline-block; width: 100%; margin-bottom: 10px; font-size: 24px; font-weight: 500;} @media screen and ( max-width:1070px){ #cnt_reg_step2 .pay_price > .conLeft{ float: none; width: 100%;} #cnt_reg_step2 .pay_price > .conRight{ float: none; width: 100%; padding-left: 0; margin-top: 40px;} #cnt_reg_step2 .pay_price > .conRight > dl > dt{ width: 25%; font-size: 14px;} #cnt_reg_step2 .pay_price > .conRight > dl > dd{ width: 75%; text-align: left; padding: 10px;} #cnt_reg_step2 .pay_price > .conRight > dl > dd .price_txt{ font-size: 18px;} } /*예약 3단계 - 예약완료*/ #cnt_reg_step3 .f_ti{ position: relative; max-width: 740px; margin: 0 auto; padding-left: 140px; padding-top: 17px;} #cnt_reg_step3 .f_ti:before{ content: ""; position: absolute; display: block; top: 0; left:0; width: 104px; height: 104px; background: url(/images/common/ico_check_circle.png) no-repeat center center;} #cnt_reg_step3 .f_ti .ti { font-size: 32px; color: #333; font-weight: 500; line-height: 1em; letter-spacing: -0.05em;} #cnt_reg_step3 .f_ti .txt { line-height: 1.6em; margin-top: 17px; } #cnt_reg_step3 .info_box .inner { max-width: 640px; margin: 0 auto; } @media screen and (max-width:768px){ #cnt_reg_step3 .f_ti{ padding-left: 0px; padding-top: 0px; text-align: center; } #cnt_reg_step3 .f_ti:before{ position: static; width: 70px; height: 70px; margin: 0 auto; margin-bottom: 20px; background-size: contain;} #cnt_reg_step3 .f_ti .ti { font-size: 20px; word-break: keep-all;} #cnt_reg_step3 .f_ti .txt { margin-top: 5px; text-align: center; word-break: keep-all;} } /*마이페이지 예약내역 - 상세보기*/ #cnt_mypage_reg_detail{} #cnt_mypage_reg_detail article + article{ margin-top: 40px; margin-bottom: 40px;} /*sitemap*/ #cnt_sitemap .depth1{ font-size: 0px;} #cnt_sitemap .depth1:after{ content: ""; display: block; clear: both;} #cnt_sitemap .depth1 > li{ display: inline-block; width: 25%; vertical-align: top; margin-bottom: 50px; padding-right: 20px; } #cnt_sitemap .depth1 a{display:block; padding:16px 20px 14px 20px; font-weight:500; font-size:17px; background:url(/images/common/ico_m_menu.png) no-repeat 97% 18px; color: #333; text-decoration: none;} #cnt_sitemap .depth1 > li > a{ border: 2px solid #425e9c; } #cnt_sitemap .depth1 > li > a:hover{ border: 2px solid #425e9c; background-color: #425e9c; color: #fff; } /*#cnt_sitemap .depth2{ background:#f6f6f6;}*/ #cnt_sitemap .depth2 > li {border-bottom:1px solid #d9d9d9;} #cnt_sitemap .depth2 a{ position: relative; padding:12px 0 12px 30px; margin:0; font-size:15px; color:#666; background: none;} #cnt_sitemap .depth2 a:before{content:''; display:block; position:absolute; top:50%; left:22px; width:3px; height:3px; margin-top: -1px; background:#8c8c8c;} #cnt_sitemap .depth2 a:hover, #cnt_sitemap .depth2 a:focus{color:#333; background:#e4edfa;} #cnt_sitemap .depth3{display:block; padding:0;} #cnt_sitemap .depth3 a{position:relative; padding:8px 0 8px 50px; border-bottom: none; font-size:15px; font-weight:300; color:#666;} #cnt_sitemap .depth3 a:before{content:''; display:block; position:absolute; top:50%; left:40px; width:4px; height:1px; margin-top: -1px; background:#525252;} #cnt_sitemap .depth2 .on a[target="_blank"]:after, #cnt_sitemap .depth2 a[target="_blank"]:hover:after, #cnt_sitemap .depth2 a[target="_blank"]:focus:after{background-position:0 -75px;} #cnt_sitemap .depth1 > li > a > .new_win, #cnt_sitemap .depth2 > li > a > .new_win, #cnt_sitemap .depth3 > li > a > .new_win{ display: inline-block; width: 13px; height: 13px; margin-left: 5px; background: url(/images/common/ico_newwin.png) no-repeat 0 0;} @media screen and ( max-width:1070px){ #cnt_sitemap .depth1 > li{ width: 33.33%; padding: 0 10px; } } @media screen and ( max-width:768px){ #cnt_sitemap .depth1 > li{ width: 50%; } #cnt_sitemap .depth1 a{padding:10px 20px 10px 20px; font-size:16px; background-position: 95% 14px;} #cnt_sitemap .depth2 a{padding:8px 0 8px 30px; font-size:14px;} #cnt_sitemap .depth3 a{padding:8px 0 8px 50px; font-size:14px;} } /*공유포털 소개*/ #cnt_54 .info_1{ padding-left: 280px;} #cnt_54 .info_1 .pic{ position: absolute; top: 30px; left: 30px;} #cnt_54 .info_1 .ptxt{ word-break: keep-all;} #cnt_54 .info_2 { background: #f7f5f6; text-align: center; padding: 20px;} #cnt_54 .info_2 .ti { display: inline-block; background: #fff; padding:25px 50px; margin-bottom: 30px; border-radius: 50px; font-size: 32px; color: #032268; letter-spacing: -0.05em; line-height: 1.4em; box-shadow: 0px 0px 10px rgba(150, 150, 150, 0.15); } #cnt_54 .info_2 .ti > span{ display: inline-block; margin-left: 10px;} #cnt_54 .info_2 .ti > span:before{ content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: url(/images/cnt/cnt_54_dot.png) no-repeat center center;} #cnt_54 .info_2 .ti > span:first-child:before{ display: none;} #cnt_54 .info_2 .pic{} #cnt_54 .info_2 .pic img{ max-width: 100%;} #cnt_54 .ptxt.txt1{ word-break: keep-all;} #cnt_54 .atc_2{ } #cnt_54 .atc_2 .list{ } #cnt_54 .atc_2 .list > li{ float: left; width: 33.33%; padding-right: 20px; padding-bottom: 20px;} #cnt_54 .atc_2 .list > li:nth-child(3n){ padding-right: 0px;} #cnt_54 .atc_2 .list > li > dl{ position: relative; height: 350px; padding: 210px 40px 20px; border: 1px solid #d7d7d7; } #cnt_54 .atc_2 .list > li > dl:before{ content: ""; position: absolute; top: 20px; left: 50%; margin-left: -80px; width:161px; height: 160px; background-repeat: no-repeat; background-position: center 0px; } #cnt_54 .atc_2 .list > li.item1 > dl:before{ background-image: url(/images/cnt/cnt_54_3.png);} #cnt_54 .atc_2 .list > li.item2 > dl:before{ background-image: url(/images/cnt/cnt_54_4.png);} #cnt_54 .atc_2 .list > li.item3 > dl:before{ background-image: url(/images/cnt/cnt_54_5.png);} #cnt_54 .atc_2 .list > li.item4 > dl:before{ background-image: url(/images/cnt/cnt_54_6.png);} #cnt_54 .atc_2 .list > li.item5 > dl:before{ background-image: url(/images/cnt/cnt_54_7.png);} #cnt_54 .atc_2 .list > li.item6 > dl:before{ background-image: url(/images/cnt/cnt_54_8.png);} #cnt_54 .atc_2 .list > li > dl > dt{ font-size: 22px; font-weight: 500; text-align: center;} #cnt_54 .atc_2 .list > li > dl > dd{ line-height: 1.4em; margin-top: 20px; word-break: keep-all; text-align: center;} @media screen and ( max-width:1000px){ #cnt_54 .atc_2 .list > li > dl{ height: 320px; padding: 160px 15px 20px; } #cnt_54 .atc_2 .list > li > dl:before{ margin-left: -50px; width:100px; height: 100px; background-size: contain;} } @media screen and ( max-width:768px){ #cnt_54 .info_1{ padding-left: 0px;} #cnt_54 .info_1 .pic{ position: static; display: block; margin-bottom: 15px; text-align: center;} #cnt_54 .info_1 .pic img{ width: 150px;} #cnt_54 .info_2 .ti { width: 100%; margin: 0 auto; margin-bottom: 30px; font-size: 22px; border-radius: 20px; } } @media screen and ( max-width:580px){ #cnt_54 .info_2 { padding: 10px;} #cnt_54 .info_2 .ti { font-size: 17px; padding: 10px; } #cnt_54 .info_2 .ti span{ display: block;} #cnt_54 .info_2 .ti > span:before{ position: relative; top: -2px; width: 8px; height: 8px; margin-right: 5px; vertical-align: middle; background-size: contain;} #cnt_54 .info_2 .ti > span:first-child:before{ display: inline-block;} #cnt_54 .atc_2 .list > li{ float: none; width: 100%; padding: 10px !important; } #cnt_54 .atc_2 .list > li > dl{ position: relative; height: auto; padding: 10px; padding-left: 100px;} #cnt_54 .atc_2 .list > li > dl:before{ left: 10px; top: 10px; margin: 0; width: 70px; height: 60px; } #cnt_54 .atc_2 .list > li > dl > dt{ text-align: left; font-size: 17px;} #cnt_54 .atc_2 .list > li > dl > dd{ text-align: left; margin-top: 10px;} } /*공유포털 소개-eng 영문*/ #cnt_54_eng .info_1{ } #cnt_54_eng .info_1 .logo{ position: relative; display: block; padding-left: 80px; height: 60px; margin-bottom: 10px;} #cnt_54_eng .info_1 .logo img{ position: absolute; top: 0; left: 0;} #cnt_54_eng .info_1 .logo .txt{ display:inline-block; vertical-align: middle; font-size: 24px; font-weight: 700; line-height: 1.2em; } #cnt_54_eng .info_1 .logo:before{ content: ""; display: inline-block; width: 0px; height: 100%; vertical-align: middle; } #cnt_54_eng .info_1 .ptxt{ word-break: keep-all;} #cnt_54_eng .info_2 { background: #f7f5f6; text-align: center; padding: 20px;} #cnt_54_eng .info_2 .ti { display: inline-block; background: #fff; padding:25px 50px; margin-bottom: 30px; border-radius: 50px; font-size: 32px; color: #032268; letter-spacing: -0.05em; line-height: 1.4em; box-shadow: 0px 0px 10px rgba(150, 150, 150, 0.15); } #cnt_54_eng .info_2 .ti > span{ display: inline-block; margin-left: 10px;} #cnt_54_eng .info_2 .ti > span:before{ content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: url(/images/cnt/cnt_54_dot.png) no-repeat center center;} #cnt_54_eng .info_2 .ti > span:first-child:before{ display: none;} #cnt_54_eng .info_2 .pic{} #cnt_54_eng .info_2 .pic img{ max-width: 100%;} #cnt_54_eng .ptxt.txt1{ word-break: keep-all;} #cnt_54_eng .atc_2{ } #cnt_54_eng .atc_2 .list{ } #cnt_54_eng .atc_2 .list > li{ float: left; width: 33.33%; padding-right: 20px; padding-bottom: 20px;} #cnt_54_eng .atc_2 .list > li:nth-child(3n){ padding-right: 0px;} #cnt_54_eng .atc_2 .list > li > dl{ position: relative; height: 370px; padding: 210px 40px 20px; border: 1px solid #d7d7d7; } #cnt_54_eng .atc_2 .list > li > dl:before{ content: ""; position: absolute; top: 20px; left: 50%; margin-left: -80px; width:161px; height: 160px; background-repeat: no-repeat; background-position: center 0px; } #cnt_54_eng .atc_2 .list > li.item1 > dl:before{ background-image: url(/images/cnt/cnt_54_3.png);} #cnt_54_eng .atc_2 .list > li.item2 > dl:before{ background-image: url(/images/cnt/cnt_54_4.png);} #cnt_54_eng .atc_2 .list > li.item3 > dl:before{ background-image: url(/images/cnt/cnt_54_5.png);} #cnt_54_eng .atc_2 .list > li.item4 > dl:before{ background-image: url(/images/cnt/cnt_54_6.png);} #cnt_54_eng .atc_2 .list > li.item5 > dl:before{ background-image: url(/images/cnt/cnt_54_7.png);} #cnt_54_eng .atc_2 .list > li.item6 > dl:before{ background-image: url(/images/cnt/cnt_54_8.png);} #cnt_54_eng .atc_2 .list > li > dl > dt{ font-size: 22px; font-weight: 500; text-align: center; line-height: 1.2em;} #cnt_54_eng .atc_2 .list > li > dl > dd{ line-height: 1.4em; margin-top: 20px; word-break: keep-all; text-align: center;} @media screen and ( max-width:1000px){ #cnt_54_eng .atc_2 .list > li > dl{ height: 400px; padding: 160px 15px 20px; } #cnt_54_eng .atc_2 .list > li > dl:before{ margin-left: -50px; width:100px; height: 100px; background-size: contain;} } @media screen and ( max-width:768px){ #cnt_54_eng .atc_2 .list > li > dl{ position: relative; height: 450px; padding: 130px 40px 20px; border: 1px solid #d7d7d7; } } @media screen and ( max-width:680px){ #cnt_54_eng .info_1 .logo .txt{ display:inline-block; vertical-align: middle; font-size: 18px; font-weight: 700; line-height: 1.2em; } #cnt_54_eng .info_2 { padding: 10px;} #cnt_54_eng .info_2 .ti { font-size: 17px; padding: 10px; } #cnt_54_eng .info_2 .ti span{ display: block;} #cnt_54_eng .info_2 .ti > span:before{ position: relative; top: -2px; width: 8px; height: 8px; margin-right: 5px; vertical-align: middle; background-size: contain;} #cnt_54_eng .info_2 .ti > span:first-child:before{ display: inline-block;} #cnt_54_eng .atc_2 .list > li{ float: none; width: 100%; padding: 10px !important; } #cnt_54_eng .atc_2 .list > li > dl{ position: relative; height: auto; padding: 10px; padding-left: 100px;} #cnt_54_eng .atc_2 .list > li > dl:before{ left: 10px; top: 10px; margin: 0; width: 70px; height: 60px; } #cnt_54_eng .atc_2 .list > li > dl > dt{ text-align: left; font-size: 17px;} #cnt_54_eng .atc_2 .list > li > dl > dd{ text-align: left; margin-top: 10px;} } /*활용가이드*/ #cnt_56 .info_1{ padding-right: 400px;} #cnt_56 .info_1 .ptxt{ word-break: keep-all;} #cnt_56 .pic_inner{ text-align: center;} #cnt_56 .pic_inner img{ max-width:100%; } #cnt_56 .num_list > li > img{ position: relative; top: -1px; margin-right: 6px;} #cnt_56 .atc_5 .mov_list {} #cnt_56 .atc_5 .mov_list > li { float: left; width: 50%; padding: 0 20px 40px; } #cnt_56 .atc_5 .mov_list > li .m_box{} #cnt_56 .atc_5 .mov_list > li .m_box video{width: 100%;} @media screen and ( max-width:1100px){ #cnt_56 .info_1{ padding-right: 300px;} #cnt_56 .info_1 .ptxt{ word-break: keep-all;} #cnt_56 .info_1 .downloadBtn{ position: absolute; top: 40px; right: 30px; } } @media screen and ( max-width:768px){ #cnt_56 .info_1{ padding-right: 0px;} #cnt_56 .info_1 .ptxt{ word-break: keep-all;} #cnt_56 .info_1 .downloadBtn{ position: static; margin-top: 30px; } #cnt_56 .atc_5 .mov_list {} #cnt_56 .atc_5 .mov_list > li { float: none; width: 100%; padding: 0 0px 40px; } }