/*****about스타펀*****/ #svisual{ background:url(../img/sub/svisual.jpg) no-repeat center -150px; width:100%; height:550px; position:relative;} #stxt{ color:#fff; text-align:center; padding-top:100px;} #stxt h1{ font-size:1.8em; letter-spacing:-1px;} #stxt h2{ font-size:2.8em; font-weight:500; margin:10px 0 40px 0;} #stxt h2 strong{ font-size:1.5em; font-weight:500;} #stxt p{ font-size:1.15em; font-weight:300; color:rgba(250,250,250,0.8); line-height:1.8em;} #about{} #about dl{ padding:0 100px 80px 100px; margin-bottom:70px; border-bottom:1px dotted #bbb; position:relative;} #about dl:after{ display:block; content:""; clear:both;} #about dl:last-child{ border:0; padding:0 100px; margin-bottom:0;} #about dt{ font-size:1.2em; color:#0760a1; margin-bottom:30px;} #about dd{ font-size:1.3em; color:#444; position:absolute; top:30px; left:450px; line-height:1.8em} #about h1{ font-size:2.3em; font-weight:bold; color:#222;} #about ul{ margin-top:70px;} #about li{ display:inline-block; width:calc(25% - 21px); padding-left:20px; padding-top:10px; margin-right:10px; margin-bottom:50px; box-sizing:border-box; border-left:1px solid #ddd; vertical-align:top; height:155px; position:relative; font-size:1.25em; color:#333; font-weight:500; line-height:1.8em;} #about li span.num{ display:block; font-weight:bold; color:#0760a1; font-size:1.3em;} .about2{ width:1000px; margin:0 auto;} .about2 dl{ padding:0 50px 80px 50px !important;} #about .dd_right{ height:480px;} #about .slogo_box{ position:relative; width:342px; height:230px; margin-top:40px; margin-left:10px;} #about .slogo{ border:1px solid #ccc; background:#fff; padding:60px 50px 80px 50px; display:inline-block; position:absolute; top:-9px; left:-8px;} #about .slogo img{ width:230px;} #about .slogo_bg{ width:332px; height:220px; background:#f4f4f4; border:1px solid #ddd;} #about dd.dd{ top:107px; left:560px;} #about .dd_right a.download_bi{ display:block; width:180px; line-height:40px; border:1px solid #ddd; text-align:center; margin-top:50px; color:#666; transition: all 0.3s;} #about .dd_right p{ font-size:13px; color:#888; letter-spacing:0; margin-top:5px;} #about .dd_right a.download_bi:hover{ background:#0760a1; color:#fff; transition: all 0.3s;} #map{ position:relative; padding-bottom:100px;} #map .map_info{ position:absolute; top:380px; left:50%; width:800px; margin-left:-400px; z-index:10; color:#fff; padding:50px 50px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#32a4a7+0,03509d+68 */ background: #32a4a7; /* Old browsers */ background: -moz-linear-gradient(left, #32a4a7 0%, #03509d 68%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #32a4a7 0%,#03509d 68%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #32a4a7 0%,#03509d 68%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32a4a7', endColorstr='#03509d',GradientType=1 ); /* IE6-9 */} #map .map_info:after{ display:block; content:""; clear:both;} #map .map_info h1{ float:left; font-size:1.5em; font-weight:400; margin:15px 60px 0 0;} #map .map_info ul{ float:left; border-left:1px solid rgba(250,250,250,0.2); padding-left:40px;} #map .map_info li{ font-size:1.2em; line-height:1.8em;} #map .root_daum_roughmap{ padding:0 !important; border:0 !important; border-radius:0 !important;} /*****펀딩요청*****/ #fun_re_wrap{ width:750px; margin:0 auto;} .fun_re_top{ text-align:center; margin-bottom:80px; font-size:17px; color:#333;} .fun_re_top span{ font-size:3em; color:#0760a1; margin-bottom:10px; display:block;} .fun_re_top h1{ font-size:1.5em; font-weight:500; color:#0760a1; margin-bottom:20px; letter-spacing:-1px;} .fun_re_top p{ font-size:15px; color:#777; line-height:1.6em; margin-bottom:10px;} .fun_re_top strong{ color:#2083a3;} .fun_put{ text-align:center; font-size:1.3em; width:80%; margin:0 auto 70px auto;} .fun_put input[type=text]{ border:1px solid #ccc; background:#f5f5f5; width:calc(70% - 3px); margin-right:3px; height:45px; padding:0 20px; font-size:14px;} .fun_put input::placeholder {color:#999;} .fun_put input::-webkit-input-placeholder {color:#999;} .fun_put input:-ms-input-placeholder {color:#999;} .fun_put .fun_put_btn{ border:0; height:45px; color:#fff; width:30%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#32a4a7+0,03509d+68 */ background: #32a4a7; /* Old browsers */ background: -moz-linear-gradient(left, #32a4a7 0%, #03509d 68%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #32a4a7 0%,#03509d 68%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #32a4a7 0%,#03509d 68%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32a4a7', endColorstr='#03509d',GradientType=1 ); /* IE6-9 */ } .fun_put button:hover{ font-weight:600;} /*탭*/ .fun_tab{ text-align:center; margin:0 auto 30px auto; width:305px; height:42px; border-radius:50px; background:#fff; border:1px solid #ccc; } .fun_tab:after{ display:block; content:""; clear:both;} .fun_tab li{ display:inline-block;} .fun_tab li a{ display:block; width:150px; color:#666; line-height:40px; font-size:1.2em; border-radius:50px; outline:none;} .fun_tab a.selected{ background:#32a4a7; border:1px solid #32a4a7; color:#fff; box-shadow:2px 2px 2px rgba(0,0,0,0.2); margin-top:-1px;} .fun_tab li:last-child a.selected{ box-shadow:-2px 2px 2px rgba(0,0,0,0.2); margin-right:-1px;} .chart_tbl table{ border-top:1px solid #333;} .chart_tbl thead tr th{ font-weight:normal; padding:10px 10px;text-align:center; border-bottom:1px solid #ddd;} .chart_tbl thead tr th:first-child{ width:15%;} .chart_tbl thead tr th:nth-child(2){ width:50%;} .chart_tbl thead tr th:last-child{ width:20%;} .chart_tbl tbody tr td{ padding:13px 10px; font-size:1.1em; border-bottom:1px dotted #ddd;} .chart_tbl tbody tr td:first-child{ text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:1.2em; color:#333;} .chart_tbl tbody tr td:last-child{ text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#888;} .chart_tbl tbody tr:first-child td{ color:#32a4a7; font-weight:bold; font-size:1.1em;} .chart_tbl tbody tr:nth-child(odd) td{ background:#f7f7f7;} /*****이용약관*****/ #yak_box{ font-size:1.1em; line-height:1.8em;} #yak_box ul{ padding-left:10px; font-size:13.5px;} #yak_box li{ position:relative; padding-left:10px;} #yak_box li:before{ display:block; content:""; width:5px; height:5px; border-radius:50%; background:#555; position:absolute; top:10px; left:0px;} #yak_box h4{ font-weight:bold;} .tbl_yak{ margin:10px 0;} .tbl_yak table{ width:100%; border:1px solid #ddd; border-bottom:0; border-right:0; font-size:13px;} .tbl_yak thead tr th{ background:#f4f4f4; border-bottom:1px solid #444; border-right:1px solid #ddd; text-align:center; padding:5px 10px;} .tbl_yak tbody tr th{ background:#f4f4f4; border-bottom:1px solid #ddd; border-right:1px solid #ddd; text-align:center; padding:5px 20px;} .tbl_yak tbody tr td{ border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:7px 10px; line-height:1.3em;} .tbl_yak tbody tr td.t{ background:#f4f4f4; font-weight:bold; width:20%;} @media (max-width:1000px) { /*****about스타펀*****/ #svisual{ background-size:cover; background-position:50%; height:auto;} #stxt{ padding:70px 20px 50px 20px; text-align:left;} #stxt h1{ font-size:1.4em;} #stxt h2{ font-size:2.3em; margin:5px 0 10px 0;} #stxt p{ font-size:1em; line-height:1.5em;} #about dl{ padding:0 20px 50px 20px; margin-bottom:50px;} #about dl:last-child{ padding:0 20px;} #about dt{ margin-bottom:20px;} #about dd{ position:relative; top:auto; left:auto; font-size:1.2em;} #about h1{ font-size:2em; margin-bottom:20px;} #about ul{ margin-top:40px;} #about li{ width:100%; padding-left:0px; padding-bottom:20px; margin-right:0px; margin-bottom:10px; height:auto; border-left:0; border-bottom:1px solid #ddd;} #about .dd_right{ height:auto;} #about .slogo_box{ width:auto; height:auto; margin-top:0px; margin-left:0px;} #about .slogo{ top:-4px; left:-15px; padding:45px 40px 65px 40px; margin:0 0 0 11px;} #about .slogo img{ width:200px;} #about .slogo_bg{ width:283px; height:182px;} #about dd.dd{ position:relative; top:auto; left:auto; margin-top:30px;} #about .dd_right a.download_bi{ margin-top:30px;} #map{ position:relative; padding-bottom:50px;} #map .map_info{ position:relative; top:auto; left:auto; width:100%; margin-left:0; padding:40px 40px;} #map .map_info h1{ float:none; margin:0px 0px 20px 0;} #map .map_info ul{ float:none; border-left:0; padding-left:0;} /*****펀딩요청*****/ #fun_re_wrap{ width:100%;} .fun_re_top{ font-size:15px; width:90%; margin:0 auto 40px auto;} .fun_re_top span{ font-size:2em;} .fun_re_top h1{ font-size:1.5em;} .fun_re_top p{ font-size:13px;} .fun_put{ font-size:1em; width:95%; margin:0 auto 40px auto;} .fun_put input[type=text]{ padding:0 10px; font-size:13px;} .fun_put button:hover{ font-weight:600;} /*탭*/ .fun_tab{ margin:0 auto 10px auto; width:245px; height:37px;} .fun_tab li a{ width:120px; color:#666; line-height:35px; font-size:1em;} .chart_tbl thead tr th{ padding:7px 5px;} .chart_tbl tbody tr td{ padding:10px 5px; font-size:1em;} .chart_tbl tbody tr:first-child td{ font-size:1em;} /*****이용약관*****/ #yak_box{ font-size:1.1em; padding:0 10px;} } /*음원제작신청 css*/ #music_wrap{ width:550px; margin:0 auto;} #music_wrap2{ width:100%;} #mu_t02{ font-size:2em; font-weight:400; color:#333; letter-spacing:-1.5px; margin-bottom:20px; position:relative; padding-left:28px;} #mu_t02:before{ display:block; content:""; width:22px; height:22px; border-radius:50%; border:6px solid #03509d; border-left-color:#32a4a7; border-top-color:#1a83a8;position:absolute; top:8px; left:0px;} .mu_info{ text-align:center; font-size:1.3em; color:#333; font-weight:300; line-height:1.6em; margin-bottom:40px; letter-spacing:-1px;} .mu_info p{ font-size:1.7em; font-weight:500; color:#0760a1; margin-bottom:20px; letter-spacing:-2px;} .mu_info h5{ font-size:1em; color:#333; margin-bottom:10px; line-height:1.5em;} .mu_info h6{ font-size:1em; color:#333; margin:10px 0;line-height:1.5em;} .mu_info strong{ font-weight:500; color:#0760a1;} .mu_info span{ display:block; margin-bottom:30px; font-size:2.8em; font-weight:500; color:#0760a1;} #mu_myinfo{ border:1px solid #ccc; padding:50px 50px; margin-bottom:40px;} #mu_myinfo .mu_t01{ text-align:center; font-size:2em; font-weight:500; color:#222; margin-bottom:30px;} #mu_myinfo .mu_t01 p{ color:#888; font-size:15px; font-weight:400; margin-bottom:10px;} #mu_myinfo .mu_t01 i{ font-size:2.5em; color:#1a83a8; margin-bottom:20px;} #mu_myinfo dl{ margin:10px 0; font-size:1.1em;} #mu_myinfo dt{ font-weight:500; margin-bottom:5px;} #mu_myinfo dd{} #mu_myinfo input[type=text]{ width:100%; height:50px; border:1px solid #ccc; border-radius:5px; padding:0 10px;} /*버튼*/ #mu_btn01{ width:100%; text-align:center;} #mu_btn01 input[type=submit]{ width:100%; border:0; line-height:60px; color:#fff; font-size:1.4em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03509d+0,32a4a7+100 */ background: #03509d; /* Old browsers */ background: -moz-linear-gradient(left, #03509d 0%, #32a4a7 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #03509d 0%,#32a4a7 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #03509d 0%,#32a4a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03509d', endColorstr='#32a4a7',GradientType=1 ); /* IE6-9 */} #mu_btn02{} #mu_btn02 button[type=submit]{ border:0; padding:0 40px; line-height:50px; color:#fff; font-size:1.2em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03509d+0,32a4a7+100 */ background: #03509d; /* Old browsers */ background: -moz-linear-gradient(left, #03509d 0%, #32a4a7 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #03509d 0%,#32a4a7 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #03509d 0%,#32a4a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03509d', endColorstr='#32a4a7',GradientType=1 ); /* IE6-9 */ } /*버튼*/ #mu_btn01{ width:100%; text-align:center;} #mu_btn01 input[type=button]{ width:100%; border:0; line-height:60px; color:#fff; font-size:1.4em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03509d+0,32a4a7+100 */ background: #03509d; /* Old browsers */ background: -moz-linear-gradient(left, #03509d 0%, #32a4a7 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #03509d 0%,#32a4a7 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #03509d 0%,#32a4a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03509d', endColorstr='#32a4a7',GradientType=1 ); /* IE6-9 */} /*옵션선택*/ #main_option{ border:1px solid #ddd; padding:30px 40px; position:relative;} #main_option:after{ display:block; content:""; clear:both;} .moption{ margin-bottom:30px;} .moption dl{ font-size:1.3em; margin-bottom:20px; border-bottom:1px dotted #ccc; padding:0 0 20px 0;} .moption dl:after{ display:block; content:""; clear:both;} .moption dt{ float:left; margin-right:40px; font-weight:500; width:95px;} .moption dd{ float:left; font-weight:300; width:120px;} .moption dl:first-child{} .moption dl:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0;} #main_option .item_reset{ position:absolute; bottom:30px; right:40px;} .moption dl:last-child dt{ width:226px;} #main_option .item_reset button[type=reset]{ background:none; border:0;} /*지역선택*/ .moption:after{ display:block; content:""; clear:both;} .moption .op_txt{ font-size:1.3em; margin-bottom:20px; border-bottom:1px dotted #ddd; padding-bottom:20px;} .moption .op_txt i{ color:#0760a1;} .moption dl.op_dl01{ float:left; width:calc(33% - 20px); margin-right:20px; border-bottom:0 !important; margin-bottom:0 !important; padding-bottom:0 !important;} .moption dl.op_dl01 dt{ width:30px; margin-right:00px; line-height:40px;} .moption dl.op_dl01 dd{ width:85%; font-size:14px;} .moption .op_select{} .moption .op_select select{ border-radius:3px; border:1px solid #ccc; height:40px; width:100%; padding:0 10px; /* 네이티브 외형 감추기 */ -webkit-appearance:none; -moz-appearance :none; appearance :none; /* 화살표이미지 넣어주기 */ background:url(../img/sub/select_arrow.gif) no-repeat 95% center/12px auto;} /* IE 10, 11의 네이티브 화살표 숨기기 */ .moption .op_select select::-ms-expand{ display:none;} /*옵션선택 검색 결과 리스트*/ #sea_slist_wrap{ margin-top:40px;} #sea_slist_wrap .sea_result{ text-align:center; font-size:2em; margin-bottom:20px;} #sea_slist_wrap .sea_result i{ color:#999;} #sea_slist_wrap .sea_total{ font-size:15px; color:#777; margin-top:10px;} #sea_slist_wrap .sea_total span{ color:#ea2b2b;} #sea_slist_wrap .sea_txt{ font-size:1.2em; color:#444; border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:20px;} #sea_slist{ margin-bottom:40px;} #sea_slist ul{} #sea_slist li{ float:left; width:50%; height:220px; margin:35px 0;} #sea_slist .sea_img{ float:left; width:200px; height:180px; background:#f5f5f5; max-height:180px; overflow:hidden; margin-right:30px;} #sea_slist .sea_img img{ width:100%; height:100%;} #sea_slist .sea_info{ float:left; width:46%; position:relative; padding-top:0px;} #sea_slist .sea_info .art_cate{ display:inline-block; border:1px solid #32a4a7; border-radius:20px; line-height:22px; padding:0 15px;text-align:center; margin-bottom:10px; color:#32a4a7;} #sea_slist .sea_info dl{ font-size:1.1em; margin:5px 0;} #sea_slist .sea_info dl:after{ display:block; content:""; clear:both;} #sea_slist .sea_info dt{ float:left; font-weight:400; color:#888; width:60px;} #sea_slist .sea_info dd{ float:left; color:#222; width:170px;} /*#sea_slist .sea_info .sea_more{ text-align:center; margin-top:15px;} #sea_slist .sea_info .sea_more a{ display:block; background:#fff; border:1px solid #ddd; line-height:30px; font-size:12px; color:#999; border-radius:50px;} #sea_slist .sea_info .sea_more i{ padding-left:10px;} #sea_slist .sea_info .sea_more a:hover{ background:#f2f2f2; color:#333;}*/ #sea_slist .sea_info .sea_more{ position:absolute; top:-10px; right:0px;} #sea_slist .sea_info .sea_more a{ display:block; font-size:12px; color:#999;} #sea_slist .sea_info .sea_more i{ padding-left:5px;} #sea_slist .sea_info .sea_more a:hover{ color:#333;} #sea_slist .sea_info #sea_select{ margin-top:20px;} #sea_next_wrap{ border-top:1px dashed #ccc; padding-top:40px; text-align:center;} #sea_next{ width:40%; margin:0 auto; text-align:center;} #sea_next p{ font-size:1.2em; color:#444; line-height:1.8em; margin-bottom:30px;} #sea_next p strong{ color:#03509d;} /*제작신청 전 검토사항*/ #sea_next_wrap .btn_terms{ border:0; background:0; text-align:center; font-weight:500; font-size:1.3em; color:#333; margin-bottom:30px;} #sea_next_wrap .modal-dialog{ text-align:left;} #sea_next_wrap .modal-content{ border:1px solid #0760a1; border-radius:0;} #sea_next_wrap .modal-header{} #sea_next_wrap .modal-header .modal-title{ font-size:1.4em;} #sea_next_wrap .modal-header .modal-title i{ color:#0760a1; font-size:1.2em;} #sea_next_wrap .modal-body{ position:relative; padding:50px 15px 15px 15px;} #sea_next_wrap .modal-body:after{ display:block; content:""; clear:both;} #sea_next_wrap .modal-body .btn_terms_down{ position:absolute; top:10px; right:10px; border:1px solid #0760a1; background:#fff; border-radius:3px; line-height:35px; padding:0 20px; color:#0760a1;} #sea_next_wrap .modal-body .btn_terms_down:hover{ background:#f4f4f4; font-weight:bold;} #sea_next_wrap .modal-footer{} #sea_next_wrap .modal-footer .btn_terms_ok{ border:0; background:0; font-weight:500; color:#333; font-size:1.1em;} #sea_next_wrap .modal-footer .btn_terms_ok i{ font-size:1.3em;} #sea_next_wrap .modal-footer .btn_terms_ok:hover{ color:#0760a1;} /*신청완료*/ #mu_result{ text-align:center; margin-top:80px; font-size:1.2em;} #mu_result a.mu_main{ display:inline-block; width:40%; border:1px solid #ccc; background:#f5f5f5; color:#777; line-height:50px; margin:0 3px;} #mu_result a.mu_main:hover{ color:#333;} #mu_result #mu_btn{ display:inline-block; width:40%; margin:0 3px;} #mu_btn input[type=submit]{ width:100%; border:0; color:#fff; line-height:52px; margin-bottom:4px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03509d+0,32a4a7+100 */ background: #03509d; /* Old browsers */ background: -moz-linear-gradient(left, #03509d 0%, #32a4a7 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #03509d 0%,#32a4a7 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #03509d 0%,#32a4a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03509d', endColorstr='#32a4a7',GradientType=1 ); /* IE6-9 */} @media (max-width:1000px) { #music_wrap{ width:90%;} #music_wrap2{ width:95%; margin:0 auto;} #mu_t02{ font-size:1.6em; padding-left:24px;} #mu_t02:before{ width:18px; height:18px; top:6px; border-width:4px;} .mu_info{ font-size:1.3em; line-height:1.5em; margin-bottom:30px;} .mu_info p{ font-size:1.5em; line-height:1.5em;} .mu_info span{ display:block; margin-bottom:20px; font-size:2.5em; font-weight:500; color:#0760a1;} #mu_myinfo{ padding:40px 20px; margin-bottom:20px;} #mu_myinfo .mu_t01{ margin-bottom:20px;} #mu_myinfo .mu_t01 i{ font-size:2em;} #mu_myinfo dt{ display:none;} /*버튼*/ #mu_btn01 input[type=submit]{ width:100%; border:0; line-height:60px; color:#fff; font-size:1.4em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03509d+0,32a4a7+100 */ background: #03509d; /* Old browsers */ background: -moz-linear-gradient(left, #03509d 0%, #32a4a7 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #03509d 0%,#32a4a7 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #03509d 0%,#32a4a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03509d', endColorstr='#32a4a7',GradientType=1 ); /* IE6-9 */} #mu_btn02 button[type=button]{ width:100%;} /*옵션선택*/ #main_option{ padding:30px 20px;} .moption{ margin-bottom:20px;} .moption dt{ float:none; margin-right:0px; width:100%; margin-bottom:5px;} .moption dd{ width:50%; margin-top:5px;} #main_option .item_reset{bottom:0; top:20px; right:20px;} /*스튜디오 지역선택*/ .moption .op_txt{ font-size:1.1em;} .moption dl.op_dl01{ float:none; width:100%; margin-right:0; margin-bottom:5px;} .moption dl.op_dl01 dt{ float:left; width:calc(10% - 5px); margin-right:5px;} .moption dl.op_dl01 dd{ float:left; width:90%; font-size:14px;} .moption .op_select{} .moption .op_select select{ border-radius:3px; border:1px solid #ccc; height:40px; width:100%; padding:0 10px;} /*옵션선택 검색 결과 리스트*/ #sea_slist_wrap{ margin-top:20px;} #sea_slist_wrap .sea_result{ font-size:1.6em; margin-bottom:20px;} #sea_slist_wrap .sea_result .sea_total{ font-size:13px;} #sea_slist_wrap .sea_txt{ font-size:1em;} #sea_slist{ margin-bottom:20px;} #sea_slist li{ width:calc(50% - 16px); height:315px; margin:10px 8px;} #sea_slist .sea_img{ float:none; width:100%; height:100px; min-height:100px; max-height:100px; margin-right:0px;} #sea_slist .sea_info{ float:none; width:100%; padding-top:40px;} #sea_slist .sea_info dl{ font-size:1em; margin:5px 0;} #sea_slist .sea_info dt{ width:37%;} #sea_slist .sea_info dd { width:63%;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;} #sea_slist .sea_info .sea_more{ top:10px;} #sea_next_wrap{ padding-top:40px;} #sea_next{ width:100%;} #sea_next p{ margin-bottom:20px;} #sea_next_wrap .modal-body .btn_terms_down{ line-height:30px; padding:0 15px;} /*신청완료*/ #mu_result{ margin-top:40px; font-size:1.1em;} #mu_result a.mu_main{ width:calc(50% - 8px); margin:0 3px;} #mu_result #mu_btn{ width:calc(50% - 8px); margin:0 3px;} } /*펀딩신청리스트 완료1- funding_order_2.php*/ #funding_order{ width:800px; margin:0 auto;} #fund_order{/* border:1px solid #ddd; padding:30px 40px; border-radius:7px;*/} .btn_pf{ text-align:center;} .btn_pf .btn_pf_ok{ border:0; width:350px; height:60px; color:#fff; font-size:1.5em; border-radius:50px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03509d+0,32a4a7+100 */ background: #03509d; /* Old browsers */ background: -moz-linear-gradient(left, #03509d 0%, #32a4a7 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #03509d 0%,#32a4a7 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #03509d 0%,#32a4a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03509d', endColorstr='#32a4a7',GradientType=1 ); /* IE6-9 */} #fund_result{ margin:50px auto;} #fund_result .fund_t{ font-size:1.8em; color:#333; margin-bottom:10px;} #fund_result .fund_rcont{/* width:600px;*/ border:2px solid #278fa5; margin:20px auto; padding:30px 40px;} #fund_result .fund_rcont li{ line-height:1.8em; font-size:1.2em; position:relative; padding-left:90px;} #fund_result .fund_rcont li span{ color:#278fa5; font-weight:500; width:80px; display:inline-block; position:absolute; top:0; left:0;} #fund_result .fund_rtxt{ background:#f4f4f4; padding:30px 30px; margin-bottom:40px; line-height:1.8em; font-size:1.1em;} #fund_result .fund_rtxt strong{ font-size:1.3em; display:inline-block; margin-bottom:10px;} #fund_result .fund_rtxt i{ color:#278fa5;} @media (max-width:1000px) { #funding_order{ width:100%;} .btn_pf .btn_pf_ok{ width:100%;font-size:1.3em; border-radius:0px;} #fund_result{ margin:50px auto; width:95%;} #fund_result .fund_t{ font-size:1.5em;} #fund_result .fund_rcont{ margin:10px auto; padding:20px 20px;} #fund_result .fund_rcont li{ font-size:1em; padding-left:80px;} #fund_result .fund_rcont li span{ width:70px;} #fund_result .fund_rtxt{ padding:20px 20px; font-size:1em; margin-bottom:10px;} } /*마이페이지*/ #mypage{ margin:0 auto;} #my_binfo{ padding:55px 50px 55px 500px; position:relative; margin-bottom:30px; box-shadow:0 0 7px rgba(0,0,0,0.1);background: #fff; border:1px solid #ccc;} #mypage #my_title{ font-size:2.6em; font-weight:500; letter-spacing:-2px; background:url(../img/common/big_star.png) no-repeat 0 5px/60px auto; padding-left:70px; position:absolute; top:55px; left:40px;} #mypage #my_title span{ display:block; font-size:15px; color:#777; font-weight:normal; letter-spacing:-0.5px;} #my_binfo .my_info{ position:relative;} #my_binfo .my_img{ width:80px; height:80px; border-radius:50%; overflow:hidden; border:1px solid #ccc;} #my_binfo .my_img img{ width:100%;} #my_binfo .my_sinfo{ position:absolute; top:10px; left:100px; font-size:1.8em; font-weight:500; color:#333;} #my_binfo .my_sinfo strong{ display:inline-block; font-size:16px; margin-left:3px; font-weight:normal;} #my_binfo .my_sinfo span{ display:block; font-size:14px; color:#999; margin-top:3px;} #my_binfo .my_modify{ position:absolute; top:0px; right:0px;} #my_binfo .my_modify a{ display:block; border:1px solid #0760a1; background:#0760a1; line-height:30px; padding:0 40px 0 20px; margin:7px 0; color:#fff; border-radius:2px; position:relative;} #my_binfo .my_modify a i{ color:#eee; position:absolute; top:9px; right:15px;} #my_binfo .my_modify a.logout{ background:#fff; border-color:#ddd; color:#333;} #my_binfo .my_modify a.logout i{ color:#999;} #my_list{} #blist{ border-bottom:1px dotted #ccc; margin-bottom:50px; padding-bottom:50px;} .no_blist{ border-bottom:0 !important; margin-bottom:0 !important; padding-bottom:0 !important;} #blist .bl_title{ font-size:1.6em; font-weight:500; margin-bottom:15px; letter-spacing:-2px; position:relative; padding-left:22px;} #blist .bl_title:before{ display:block; content:""; width:18px; height:18px; border-radius:50%; border:4px solid #0760a1; border-right-color:#ccc; position:absolute; top:6px; left:0px;} #blist .bl_title2{ font-size:1.6em; font-weight:500; margin-bottom:10px; letter-spacing:-1px;} #blist .bl_title2 i{ color:#0760a1; font-size:1.2em; margin-left:5px;} #blist .bl_box{/* border:2px solid #0760a1; padding:25px 30px; border-radius:40px; margin-bottom:50px;*/} #blist .bl_box_no{ text-align:center; font-size:1.2em; color:#999; padding:40px 0;} #blist .bl_box_no i{ font-size:2.2em;} #blist .bl_box ul:after{ display:block; content:""; clear:both;} #blist .bl_box li{ float:left;margin:20px 15px; width:calc(50% - 30px);} #blist .bl_box .ul2 li{ width:calc(33% - 30px);} #blist .fl_box{ position:relative;} #blist .fl_box:after{ display:block; content:""; clear:both;} #blist .fl_box .fl_img{ float:left; width:100px; height:100px; background:#eee; border:1px solid #ddd; border-radius:7px; overflow:hidden;} #blist .ul2 .fl_box .fl_img{ width:90px; height:90px; border-radius:50%;} #blist .fl_box .fl_img img{ width:100%; height:100%;} #blist .fl_box .fl_info{ float:left; width:calc(100% - 122px); margin-left:20px; margin-top:5px; padding-bottom:25px; position:relative;} #blist .ul2 .fl_box .fl_info{ width:calc(100% - 112px); margin-top:3px;} #blist .fl_box .fl_info .fl_t{ font-size:1.15em; color:#333; font-weight:500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;} #blist .fl_box .fl_info .fl_t span{ display:inline-block; font-size:11.5px; color:#1a83a8; line-height:16px; padding:0 7px; border:1px solid #1a83a8; border-radius:20px;} #blist .fl_box .fl_info .fl_gift{ font-size:12px; color:#999; margin-top:2px;} #blist .fl_box .fl_info .fl_date{ font-size:13px; color:#555; margin-top:3px;} #blist .fl_box .fl_info .fl_name{ font-size:12px; color:#666; margin-top:5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; height:35px; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;} #blist .fl_box .fl_info a.fl_btn{ display:inline-block; margin-top:12px; color:#0760a1; font-size:12.5px; position:absolute; bottom:0px; left:0; transition:all 0.3s;} #blist .fl_box .fl_info a.fl_btn:hover{ color:#333; transition:all 0.3s;} #blist .fl_box .fl_btn2{ position:absolute; bottom:0; right:0;} #blist .fl_box .fl_btn2 a{ display:block; color:#555; font-size:12.5px; border:1px solid #ccc; line-height:25px; padding:0 10px; border-radius:2px; transition:all 0.3s;} #blist .fl_box .fl_btn2:hover a{ color:#333; background:#f2f2f2; transition:all 0.3s;} #blist .bl_box2:after{ display:block; content:""; clear:both;} #blist .ul3 li{ float:left; margin:10px 10px; width:calc(20% - 20px); border:1px solid #ccc; padding:10px 15px; box-sizing: border-box; border-radius:15px; box-shadow:0 0 7px rgba(0,0,0,0.1); transition:all 0.3s;} /*#blist .ul3 li:hover{ border:1px solid #0760a1; transition:all 0.3s;}*/ #blist .ul3 .fl_box .fl_img{ width:50px; height:50px; border-radius:50%;} #blist .ul3 .fl_box .fl_info{ width:calc(100% - 62px); margin-left:10px; margin-top:12px; padding-bottom:0;} #blist .ul3 .fl_info .fl_t{ font-size:1.25em;} @media (max-width:1000px) { #mypage{ width:95%; margin:0 auto;} #my_binfo{ padding:30px 20px 30px 20px; margin-bottom:20px;} #mypage #my_title{ font-size:1.8em; letter-spacing:-1px;position:relative; top:auto; left:auto; margin-bottom:30px;} #mypage #my_title span{ font-size:13px;} #my_binfo .my_img{ width:65px; height:65px;} #my_binfo .my_sinfo{ top:0px; left:85px;} #my_binfo .my_modify{position:relative; top:auto; left:auto;} #my_binfo .my_modify a{ display:inline-block; width:calc(50% - 8px); margin:10px 3px 0 3px;} #blist{ margin-bottom:30px; padding-bottom:30px;} #blist .bl_title{ font-size:1.5em; letter-spacing:-1px; padding-left:20px; margin-bottom:20px;} #blist .bl_title:before{ border-width:3px; width:15px; height:15px; top:6px;} #blist .bl_title2{ font-size:1.4em;} #blist .bl_box{} #blist .bl_box_no{ font-size:1em; padding:30px 0;} #blist .bl_box_no i{ font-size:2.2em;} #blist .bl_box li{ float:none; margin:10px 0px; width:100%;} #blist .bl_box .ul2 li{ width:100%;} #blist .fl_box{ padding-bottom:0px;} #blist .fl_box .fl_img{ width:80px; height:80px;} #blist .ul1 .fl_box{ padding-bottom:0;} #blist .ul2 .fl_box{ padding-bottom:0;} #blist .ul2 .fl_box .fl_img{ width:70px; height:70px;} #blist .fl_box .fl_info{ width:calc(100% - 92px); margin-left:10px; margin-top:0px; padding-bottom:20px;} #blist .ul2 .fl_box .fl_info{ width:calc(100% - 82px); margin-top:0px;} #blist .fl_box .fl_info a.fl_btn{ display:inline-block; margin-top:12px; color:#0760a1; font-size:12.5px; position:absolute; bottom:0px; left:0; transition:all 0.3s;} #blist .fl_box .fl_btn2{ right:auto; bottom:auto; top:85px; left:0;} #blist .fl_box .fl_btn2 a{} #blist .ul3 li{ margin:5px 5px; width:calc(50% - 12px); padding:10px 10px; box-shadow:none;} #blist .ul3 .fl_box { padding-bottom:0;} #blist .ul3 .fl_box .fl_info{ height:auto;} } /*마이페이지 - 나의음원제작신청 현황*/ #my_music{ border:1px solid #0760a1; padding:50px 50px; margin-bottom:60px;} #my_music .bl_title{ font-size:1.6em; font-weight:500; margin-bottom:30px; letter-spacing:-2px; position:relative; padding-left:22px;} #my_music .bl_title:before{ display:block; content:""; width:18px; height:18px; border-radius:50%; border:4px solid #0760a1; border-right-color:#ccc; position:absolute; top:6px; left:0px;} #my_music .mu_my{ margin-bottom:30px; padding:25px 30px; background:#f5f5f5; position:relative;} #my_music .mu_my li{ font-size:1.2em; letter-spacing:0; margin:5px 0; position:relative; padding-left:10px;} #my_music .mu_my li strong{ display:inline-block; width:60px; font-weight:500;} #my_music .mu_my li:before{ display:block; content:""; width:5px; height:5px; border-radius:50%; background:#0760a1; position:absolute; top:8px; left:0px;} .mu_box_btn{ position:absolute; top:50%; margin-top:-17px; right:40px; text-align:center;} .mu_box_btn span{ display:inline-block; line-height:35px; padding:0 20px; border-radius:3px;} .mu_box_btn .mu_btn1{ background:#fff; border:1px solid #0760a1; color:#0760a1;} .mu_box_btn .mu_btn2{ background:#0760a1; border:1px solid #0760a1;color:#fff;} .mu_box_btn .mu_btn3{ background:#444; border:1px solid #333; color:#fff;} #my_music .bl_title2{ font-size:1.3em; font-weight:500; color:#0760a1; margin-bottom:10px;} .mu_box_wrap{ margin-bottom:20px; padding-bottom:15px; border-bottom:1px dotted #ccc;} #my_music .mu_box_wrap:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:0;} .mu_box_wrap:after{ display:block; content:""; clear:both;} .mu_box{ float:left; width:calc( 25% - 20px); margin:10px 10px;} .mu_box:after{ display:block; content:""; clear:both;} .mu_box .mub_img{ float:left; width:50px; height:50px; border-radius:50%; border:1px solid #ddd; text-align:center; background:#fff; overflow:hidden; margin-right:15px;} .mu_box .mub_img img{ width:100%; height:100%; border:0;} .mu_box .mub_info{ float:left; width:calc( 100% - 65px); line-height:1.3em; font-size:1.1em; font-weight:500; padding-top:10px;} .mu_box .mub_info2{ line-height:1.3em; padding-top:8px;} .mu_box .mub_info2 span{ color:#1a83a8; display:block; font-size:12.5px;} @media (max-width:1000px) { #my_music{ padding:20px 20px; margin-bottom:30px;} #my_music .bl_title{ font-size:1.5em; letter-spacing:-1px; padding-left:20px; margin-bottom:20px;} #my_music .bl_title:before{ border-width:3px; width:15px; height:15px; top:6px;} #my_music .mu_my{ padding:10px 20px;} #my_music .mu_my li{ font-size:1.05em; padding-left:7px; line-height:1.3em;} #my_music .mu_my li strong{ width:45px;} #my_music .mu_my li:before{ width:4px; height:4px; top:7px;} .mu_box_btn{ position:relative; top:auto; margin-top:0; right:auto; margin-top:20px;} .mu_box_btn span{ display:block;} #my_music .bl_title2{ font-size:1.2em;} .mu_box_wrap{ margin-bottom:15px; padding-bottom:10px;} .mu_box{ float:none; width:100%; margin:10px 0px;} .mu_box .mub_img{ float:left; width:50px; height:50px; border-radius:50%; border:1px solid #ddd; text-align:center; background:#fff; overflow:hidden; margin-right:15px;} .mu_box .mub_img img{ width:100%; height:100%; border:0;} .mu_box .mub_info{ float:left; width:calc( 100% - 65px); line-height:50px; font-size:1.1em; font-weight:500;} .mu_box .mub_info span{ color:#1a83a8;} } /*결제화면 거래약관동의*/ #wrapper #PGIOscreen form{border:1px solid #E3E3E3; padding:30px 30px; margin-bottom:40px; font-family:'Noto Sans KR', sans-serif;} #wrapper #opa_form_title, #wrapper #opa_form_content, #wrapper #opa_form_command{ background:none; padding:0; font-size:13px; letter-spacing:-0.5px; line-height:1.8em;} /**타이틀**/ #wrapper #opa_form_title{font-size:1.4em; display:inline-block; margin-bottom:10px; color:#03509d; margin:10px 0;} #wrapper #opa_form_title:before{content:""; display:inline-block; width:10px; height:10px; border:3px solid #03509d; margin:0 3px 2px 0;} /***/ #wrapper #opa_form_content{margin-bottom:20px;} #wrapper #opa_form_content p{ display:inline-block; font-size:1.1em;} #wrapper #PGIOscreen a{display:inline-block; margin:0 5px; border:0; padding:0 20px; width:auto; height:60px; line-height:60px; text-align:center; color:#fff; font-size:1.3em; border-radius:50px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03509d+0,32a4a7+100 */ background: #03509d; /* Old browsers */ background: -moz-linear-gradient(left, #03509d 0%, #32a4a7 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #03509d 0%,#32a4a7 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #03509d 0%,#32a4a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03509d', endColorstr='#32a4a7',GradientType=1 ); /* IE6-9 */} #wrapper #PGIOscreen select{ width:100%; font-size:15px; padding:5px;} #wrapper #opa_form_content2{ font-size:1.2em; background:#f4f4f4; padding:20px; margin-bottom:20px; font-weight:600;} #wrapper #opa_form_content2 label{ font-size:1.2em; font-weight:normal;} /**버튼**/ #wrapper #opa_form_command{text-align:center;} #wrapper #opa_form_command input{ text-align:center; font-family:'Noto Sans KR', sans-serif; font-size:1.3em; border-radius:50px; height:auto; line-height:40px; padding:0 20px;}