/* body { padding-top : 82px } */ .container { max-width : 1480px; padding : 50px 20px } .page_paging { text-align : right; font-size : 16px; color : #666; margin-bottom : 10px } .page_paging * { display : inline-block; font-size : 16px; color : #666 } .page_paging a.active { color : #111; font-weight: 600; } .page_paging a.home { position : relative; margin : 0} .page_paging a.home img { margin : 0 !important } .page_paging img { margin : 0 5px; } .title { position : relative; font-size : 30px; padding-bottom : 10px; background : url('/resource/templete/manpa/img/common/ic_title_dashed.png') repeat-x bottom left; margin-bottom : 30px } .title:nth-child(2) { font-size : 36px } .title p span { background-color : #e5e5e5; color : #666 } .title a { position : absolute; bottom : 10px; right : 0; width : 45px; height : 45px; border : 1px solid #eee; border-radius : 100%; background : url('/resource/templete/manpa/img/common/ic_bookmartk.png') no-repeat center center } .title a.active { border : 1px solid #7a563c; background : url('/resource/templete/manpa/img/common/ic_bookmartk_on.png') no-repeat center center } .title > span { display : block; font-size : 18px; color : #666666 } .bbs_detail_date { display : table; table-layout: fixed; } .bbs_detail_date dt, .bbs_detail_date dd { display : table-cell; vertical-align: middle; font-size : 16px } .bbs_detail_date dt { padding-right : 15px; color : #888888 } .bbs_detail_date i { display : inline-block; position : relative; width : 4px; height : 4px; background : #d7b69d; border-radius : 100%; top : -3px; margin : 0 5px } .bbs_detail_date dd { padding-right : 50px } .filterMatch { background-color : #fffb8c; font-size : inherit; font-weight: bold; } .sub_title { position : relative; font-size : 26px; color : #7a563c; padding-left : 15px; margin : 0 0 30px 0 } /* .sub_title:before { content : ''; width : 3px; height :16px; background-color : #7a563c; position : absolute; top : 11px; left : 0 } */ .sub_title a { position : absolute; top : 0; right : 0; background-color : #efe4da; color : #7a563c; padding : 5px 20px; font-size : 16px; border-radius : 20px } .sub_title a img { position : relative; top : 2px; left : 5px } .sub_title_line { position :relative } .sub_title_line:after { content : ''; width : 100%; height : 1px; background-color : #c29d75; position : absolute; top : 0; left : 5px; } .sub_title_line p { display : inline-block; padding : 5px 15px; border-radius : 10px 0; background : #c29d75; color : #fff2e5; } .sub_title_line p span { position : Relative; display : inline-block; color : #fff; margin-left : 16px } .sub_title_line p span:before { content : ''; position : absolute; top : 8px; left : -8px; width : 1px; height : 10px; background-color: #fff; } .other_detail_view .top { border-radius : 60px 0; overflow : hidden } .other_detail_view .top:after { content : ''; display : block; clear : both } .other_detail_view .top > div { float : left; } .other_detail_view .top:before { content : url('/resource/templete/manpa/img/sub/resource/templete/manpa/img_other_detail_02.png'); position : absolute; top : 450px; left : -100px; z-index : -2 } .other_slide .swiper-button-prev:after, .other_slide .swiper-button-next:after { display : none } .other_slide .swiper-button-prev, .other_slide .swiper-button-next { width : 40px; height : 40px; transition: all .3s ease; } .other_slide .swiper-button-next { right : 40px } .other_slide .swiper-button-prev { background : url('/resource/templete/manpa/img/common/ic_slide_prev_w.png') no-repeat center center } .other_slide .swiper-button-next { background : url('/resource/templete/manpa/img/common/ic_slide_next_w.png') no-repeat center center } .other_slide .swiper-button-prev:hover { background : url('/resource/templete/manpa/img/common/ic_slide_prev_b.png') no-repeat center center } .other_slide .swiper-button-next:hover { background : url('/resource/templete/manpa/img/common/ic_slide_next_b.png') no-repeat center center } .other_slide .swiper-pagination-bullet { width : 12px; height : 12px; background-color : rgba(255, 255, 255, 0.5) } .other_slide .swiper-pagination-bullet-active { width : 30px; border-radius : 5px; background-color : rgba(255, 255, 255, 1) } .seach_option_wrap { position : relative; background : #f9f7f6; padding : 25px 25px 25px 100px; text-align : right } .seach_option_wrap > span { top : calc(50% - 15px); left : 25px; font-size : 16px } .seach_option_wrap > span b { display : inline-block; padding : 0 5px; font-weight : 800; font-size : 16px; color : #BB1D11 } .seach_option { display : inline-block; line-height : 50px } .seach_option:after { content : ''; display : block; clear : both } .seach_option * { float : left; line-height : 50px; border : 1px solid #dbdbdb; margin : 0 5px } .seach_option form { border : none } .seach_option select { width : 120px } .seach_option input[type="text"] { width : 250px } .seach_option .seach_input_wrap, .seach_option .seach_input_wrap img { border : none } .seach_option input.datepicker { background : #fff url('/resource/templete/manpa/img/common/ic_cal.png') no-repeat left 10px center; width : 150px; padding-left : 30px } .seach_option span { width : 10px; border : none; margin : 0 5px } .seach_option button { width : 100px; background-color: #111; color : #fff; } .seach_option button img { float : none; position : relative; top : 4px; margin-right : 10px } .author_list_wrap:after { content : ''; display : block; clear : both } .author_list_wrap > .wrap { margin : 40px -20px } .author_list_wrap > .wrap:after { content : ''; display : block; clear : both } .author_list_wrap .wrap > div { float : left; width : calc(33% - 40px); margin : 20px } .author_list_wrap a { position : relative; border-radius : 20px; box-shadow: -6px 0 20px 1px #ddd; overflow : hidden; padding-bottom : 285px; background : #f7f2ef url('/resource/templete/manpa/img/common/ic_more_b.png') no-repeat right -80px top -80px } .author_list_wrap .top { padding : 30px; color : #666666; height : 185px } .author_list_wrap .top span { display : inline-block; padding : 2px 12px; border-radius : 50px; color : #fff; background-color : #c29d75; font-size : 16px; background : linear-gradient(to right, #c29d75 50%, #7a563c 50%); background-size: 200% 100%; background-position:left bottom; transition : all .5s ease } .author_list_wrap .top p { margin : 30px 0 0 0 } .author_list_wrap .top p b { display : inline-block; position : relative; font-size : 26px; font-weight: 800; color : #111 } .author_list_wrap .top p b:before { content : ''; position : absolute; bottom : 5px; left : 0; width : 0; height : 12px; background-color : rgba(194, 157, 117, 0.2); transition : width .3s ease } .author_list_wrap a > p { position : absolute; bottom : 0; width : 100%; height : 285px; overflow : hidden; } .author_list_wrap a > p span { position : absolute; top : 0; left : 0; width : 100%; height : 100%; filter : sepia(0.2); transition : all .3s ease } .author_list_wrap a > p span.noImg { display : block; } .author_list_wrap a > p span.noImg:before { content : url('/resource/templete/manpa/img/common/ic_thumb.png'); position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%) } .author_list_wrap a:hover { background-color : #fff; background-position : top 40px right 30px } .author_list_wrap a:hover .top span { background-position:right bottom; } .author_list_wrap a:hover .top p b:before { width : 100% } .author_list_wrap a:hover > p span { filter : sepia(0); transform: scale(1.2); } .author_detail_view .top { border-radius : 60px 0; overflow : hidden } .author_detail_view .top:after { content : ''; display : block; clear : both } .author_detail_view .top > div { float : left; width : 45%; height : 500px } .author_detail_view .top > div:first-child { width : 55% } .author_slide { height : 500px } .author_detail_view .top:before { content : url('/resource/templete/manpa/img/sub/resource/templete/manpa/img_author_detail_02.png'); position : absolute; top : 450px; left : -100px; z-index : -2 } .author_slide .swiper-button-prev:after, .author_slide .swiper-button-next:after { display : none } .author_slide .swiper-button-prev, .author_slide .swiper-button-next { width : 40px; height : 40px; transition: all .3s ease; } .author_slide .swiper-button-prev { background : url('/resource/templete/manpa/img/common/ic_slide_prev_w.png') no-repeat center center } .author_slide .swiper-button-next { background : url('/resource/templete/manpa/img/common/ic_slide_next_w.png') no-repeat center center } .author_slide .swiper-button-prev:hover { background : url('/resource/templete/manpa/img/common/ic_slide_prev_b.png') no-repeat center center } .author_slide .swiper-button-next:hover { background : url('/resource/templete/manpa/img/common/ic_slide_next_b.png') no-repeat center center } .author_slide .swiper-pagination-bullet { width : 12px; height : 12px; background-color : rgba(255, 255, 255, 0.5) } .author_slide .swiper-pagination-bullet-active { width : 30px; border-radius : 5px; background-color : rgba(255, 255, 255, 1) } .author_detail_view .info_area { position : relative; background-color : #583a24; padding : 60px; color : #fff } .author_detail_view .info_area:before { content : url('/resource/templete/manpa/img/sub/resource/templete/manpa/img_author_detail_01.png'); position : absolute; top : -50px; right : -30px } .author_detail_view .info_area h2 { font-size : 52px } .author_detail_view .info_area h2 span { display : block; font-size : 32px } .author_detail_view .info_area h2 sub { position : relative; display : inline-block; padding-left : 40px; color : #927a6a; font-size : 24px; font-weight: 600; } .author_detail_view .info_area h2 sub:before { content : ''; width : 2px; height : 15px; background-color : #796150; position : absolute; top : 10px; left : 15px } .author_detail_view .info_area > p { display : inline-block; padding : 2px 15px; background-color : #352316; border-radius : 10px; color : #fff; margin : 15px 0 } .author_detail_view .info_area > p img { margin-right : 5px; filter : brightness(0) invert(1) } .author_detail_view .txt { border-radius : 10px; background-color : #462e1d; padding : 25px; color : #b19a8a; } .author_detail_view .txt p { font-size : 20px; margin-bottom : 10px; color : #fff } .author_detail_view a { border : 1px solid #fff; background-color : rgba(255, 255, 255, 0.1); text-align : center; color : #fff; border-radius : 30px; padding : 10px; margin : 30px 0 0 0 } .author_detail_view a img { position : relative; top : 2px; left : 5px } .author_detail_view .intro_box { padding : 50px 0; color : #333333; line-height: 180%; } #authorPaging { position : fixed; bottom : 50px; left : 0; width : 100%; text-align : center; z-index : 2; padding : 0 15px } #authorPaging .inner { display : inline-block; border : 1px solid #cdc8c4; box-shadow: 3px 3px 15px 13px #ece7e3; background-color : #fff; border-radius : 50px; padding : 10px } #authorPaging .inner a { display : inline-block; padding : 10px 20px; background : #fff; color : #978d85 } #authorPaging .inner a.active, #authorPaging .inner a:hover { background-color : #7a563c; color : #fff; border-radius :50px } .author_history_wrap h4 { font-size : 24px; margin : 100px 0 30px 0 } .author_history_wrap h4:first-child { margin-top : 50px } .author_history_wrap ul li { position : relative; margin : 10px 0; padding-left : 140px } .author_history_wrap ul li span { position : absolute; top : 0; left : 0; } .author_history_wrap p { color : #898989; margin : 20px 0 } .author_history_wrap .top { padding : 20px 0 135px 0; overflow : hidden } .author_history_wrap .top > div { float : left; width : 50% } .author_history_wrap .top > div.top_txt { float : right } .author_history_wrap .slide_area { font-size : 16px; color : #666; text-align : center; max-width : 540px } .author_history_wrap .author_slide { border-radius : 50px; overflow : hidden; margin-bottom : 10px } .author_history_wrap .has_year { position : relative } .author_history_wrap .has_year > p { position : absolute; top : 0; right : 0; color : #fff; text-shadow: -1px 0 #7a563c, 0 1px #7a563c, 1px 0 #7a563c, 0 -1px #7a563c; font-size : 140px; text-align : right; margin-top : -50px; font-weight : 700 } .author_history_wrap .has_year .top_txt { padding-top : 150px } .history_list .top.has_year { padding-top : 80px } .history_list .has_year > p { top : 80px } .author_history_wrap .top_txt span { background-color : #e5e5e5; color : #666; } .author_history_wrap .top_txt span img { position : relative; top : 2px; margin-right : 5px } .author_history_wrap .top_txt h3 { font-size : 44px; color : #0033a5; margin : 0 0 20px } .author_history_wrap .hide_txt { height : 205px; overflow : hidden; line-height : 170% } .author_history_wrap .hide_txt_wrap { padding-bottom : 60px } .author_history_wrap .hide_txt_wrap.active .hide_txt { height : auto } .author_history_wrap .hide_txt_wrap a { position : absolute; width : 100%; text-align : center; padding : 80px 0 10px 0; bottom : 0; left : 0; background: rgb(255,255,255); background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5830707282913166) 49%, rgba(255,255,255,0.4) 100%); } .author_history_wrap .hide_txt_wrap a.active { padding : 10px; bottom : -30px; color : #7a563c } .author_history_wrap .hide_txt_wrap a:hover { color : #7a563c } .author_history_wrap .hide_txt_wrap a i { position : relative; top : -4px; padding : 3px; border-color : solid #4f4f4f; left : 5px } .author_history_wrap .hide_txt_wrap a:hover i, .author_history_wrap .hide_txt_wrap a.active i { border-color : #7a563c } .author_history_wrap .hide_txt_wrap a.active i { top : -1px; transform : rotate(-135deg) } .plusminus { position: absolute; display : block; top : 20px; right : 20px; width: 25px; height: 25px; cursor: pointer; } .history_title { position : relative; border-top : 1px solid #111; border-bottom : 1px solid #111; font-size : 20px; padding : 20px } .history_title.active .plusminus:before { transform: translatey(-50%) rotate(-90deg); opacity: 0; } .history_title.active .plusminus:after { transform: translatey(-50%) rotate(0); } .plusminus:before, .plusminus:after { content: ""; display: block; background-color: #333; position: absolute; top: 50%; left: 0; transition: 0.35s; width: 100%; height: 2px; } .plusminus:before { transform: translatey(-50%); } .plusminus:after { transform: translatey(-50%) rotate(90deg); } .history_list { margin : 10px 0 -11px 0 } .history_list .top, .history_list .content { display : none; } .history_list.active .top, .history_list.active .content { display : block; } .history_list dl { display : table; table-layout: fixed; width : 100%; margin : 70px 0 } .history_list dl dt, .history_list dl dd { display: table-cell; vertical-align: top; } .history_list dl dt { width : 360px; font-size : 16px; color : #666666; text-align : center } .history_list dl dt p { border-radius : 20px; height : 250px; overflow : hidden; margin : 0 } .history_list dl dd { padding : 0 0 0 60px } .history_list dl dt .author_slide { height : 250px; border-radius : 20px } #historySideMenu { position : fixed; top : 310px; left : calc(50% - 720px); transition : all .3s ease } #historySideMenu.active { top : 100px } #historySideMenu a { color : #afafaf; margin : 30px 0; border : 2px solid transparent } #historySideMenu a:hover, #historySideMenu a.active { color : #0033a5; border-bottom :2px solid #0033a5; font-weight: bold; } .author_body { position : relative; background : url('/resource/templete/manpa/img/sub/bg_author_top.png') no-repeat center right } .author_body:before { content : url('/resource/templete/manpa/img/sub/bg_author_left.png'); position : absolute; top : 100px; left : 0 } .author_wrap { background : url('/resource/templete/manpa/img/sub/bg_author_right.png') no-repeat bottom 0 right 0 } .author_review_wrap .review_title { text-align : center; font-size : 36px; font-weight: 800; } .author_review_wrap .review_title sub { display : block; margin-bottom : 10px } .author_review_wrap .review_title span { display : block; color : #666; margin-top : 10px; font-size : 16px } .author_review_wrap h4 { font-size : 20px; margin : 50px 0 20px 0 } .author_body .author_txt { margin-top : 20px; line-height : 180%; color :#333 } .author_explain_wrap .explain_title { font-size : 36px; margin : 60px 0 20px 0; font-weight: 800; } .author_explain_wrap p { font-size : 24px; color : #666; margin : 30px 0 -10px 0; font-weight: 600; } .movie_slide_wrap { background : url('/resource/templete/manpa/img/sub/resource/templete/manpa/img_author_detail_02.png') no-repeat top 100px left; padding : 60px 170px } .movie_slider { overflow : hidden } .movie_slider .swiper-slide { position : relative; padding : 60px 170px; overflow : hidden } .movie_slider .swiper-slide .play_btn { position : absolute; top : 0; left : 0; width : 100%; height : 100%; background-color : rgba(0, 0, 0, 0.5) } .movie_slider .swiper-slide .play_btn a { position : absolute; top: 50%; right: 50%; transform: translate(50%,-50%); } .movie_thumb_wrap { position : relative; padding : 0 50px; max-width : 1440px } .movie_thumb { position : relative; margin : 0 auto; overflow : hidden } .movie_thumb .swiper-slide { position : relative; width: 20%; height: 100px; text-align: center; overflow: hidden; } .movie_thumb .swiper-slide a { height : 100%; margin : 0 10px } .movie_thumb .swiper-slide-active a { border : 1px solid #000; border-radius : 10px; box-shadow: -6px 0 20px 1px #ddd; } .movie_thumb .swiper-slide-active:after { content: url('/resource/templete/manpa/img/common/ic_play_w.png'); position : absolute; bottom : 10px; right : 20px; z-index : 1 } .movie_thumb .swiper-slide img { width: 100%; height: auto !important; } .author_movie_wrap .swiper_btn { position : absolute; top : calc(50% - 40px); opacity : 0.3 } .author_movie_wrap .swiper_btn:hover { opacity: 1; } .author_movie_wrap .swiper_btn_prev { left : 0 } .author_movie_wrap .swiper_btn_next { right : 0 } .movie_txt_wrap { height : 200px; line-height : 160%; border : 1px solid #f1eee8; max-width : 1100px; margin : 30px auto; padding : 30px; background : #fff } .author_side_nav { position : fixed; top : 350px; right : 50px } .author_side_nav a { border-radius : 50px; border : 1px solid #d5d7df; color : #62626A; padding : 0 25px; line-height : 40px; margin : 10px 0; font-size : 16px; background-color : #fff } .author_side_nav a:hover, .author_side_nav a.active { background-color: #0033a5; color : #fff } .author_list_wrap_bg { position : relative; height : auto !important; } .author_list_wrap_bg:after { content : url('/resource/templete/manpa/img/sub/bg_author_btm.png'); position : absolute; bottom : 352px; right : 0; z-index : -1 } .author_list_wrap_bg header + div.container:before { content : url('/resource/templete/manpa/img/sub/img_author_detail_02.png'); position : absolute; left : -150px; top : 200px; z-index : -1 } .author_list_wrap2 { position : relative } .author_list_wrap2:after { content : ''; display : block; clear : both } .author_list_wrap2 .wrap { margin : 40px -20px } .author_list_wrap2 .wrap > div { float : left; width : calc(25% - 40px); margin : 20px } .author_list_wrap2 a { position : relative; overflow : hidden; } .author_list_wrap2 a:hover { border-radius : 40px; box-shadow: -6px 0 20px 1px #ddd; } .author_list_wrap2 a > p { height : 330px } .author_list_wrap2 div.over { position : absolute; background-color : rgba(0, 0, 0, 0.5); padding : 30px 35px; bottom : -100%; left : 0; width : 100%; height : 100%; display : flex; align-items: flex-end; color : #fff; transition : all .3s ease } .author_list_wrap2 div.over .wrap > div { position : relative; padding-left : 100px; margin : 10px 0 } .author_list_wrap2 div.over .wrap > div span { position : absolute; top : 0; left : 0; } .author_list_wrap2 div.over span { display : inline-block; background-color : #7a563c; color : #fff; font-size : 16px; padding : 2px 13px; border-radius : 30px; width : 80px; text-align : center; margin-right : 5px } .author_list_wrap2 div.over h2 { font-size : 20px; margin : 7px 0 15px 0 } .author_list_wrap2 div.over p { font-size : 16px } .author_list_wrap2 a:after { content : url('/resource/templete/manpa/img/common/ic_plus.png'); position : absolute; top : 30px; right : 30px; opacity : 0 } .author_list_wrap2 a:hover:after { opacity : 1 } .author_list_wrap2 a:hover div.over { bottom : 0 } .author_list_wrap2 a:hover div.over li { margin : 5px 0 } .author_list_wrap2.author_list_wrap4 div.over span { font-size : 16px; color : #888; background : none; padding : 0 } .author_list_wrap2.author_list_wrap4 div.over h2 { font-size : 18px; font-weight : bold } .author_list_wrap2.author_list_wrap4 div.over li , .author_list_wrap2.author_list_wrap4 div.over li span { color : #fff; font-size : 15px } .author_list_wrap2.author_list_wrap4 div.over li span { display : inline-block; width : 60px } .author_history_wrap { position : relative; padding-left : 240px } .author_history_wrap .left { position : absolute; top : 100px; left : 0 } .thumbnail_list_wrap .wrap { margin : 0 -20px } .thumbnail_list_wrap .wrap:after { content : ''; display : block; clear : both } .thumbnail_list_wrap .wrap > div { float : left; width : 50%; padding : 20px } .thumbnail_list_wrap .wrap > div a { border-radius : 20px; overflow : hidden; box-shadow: -6px 0 20px 1px #ddd; border : 1px solid #dbdbdb } .thumbnail_list_wrap .wrap > div a:hover { color : #7a563c } .thumbnail_list_wrap a { overflow : hidden } .thumbnail_list_wrap dl { display : table; table-layout: fixed; width : 100% } .thumbnail_list_wrap dl dt, .thumbnail_list_wrap dl dd { display : table-cell; vertical-align: middle; } .thumbnail_list_wrap dl dt { width : 240px } .thumbnail_list_wrap dl dt p { height : 240px } .thumbnail_list_wrap dd { padding : 25px } .thumbnail_list_wrap dd span { background-color : #e5e5e5; padding : 2px 20px; text-align : center; color : #666; transition : all .3s ease } .thumbnail_list_wrap span img { position : relative; top : 1px; right : 5px } .thumbnail_list_wrap p.noimg { position : relative; background : linear-gradient(132deg, rgba(247,242,225,0.9220063025210083) 0%, rgba(255,255,255,0.4766281512605042) 50%, rgba(249,248,247,0.9051995798319328) 100%); } .thumbnail_list_wrap p.noimg:before { content : url('/resource/templete/manpa/img/common/ic_thumb.png'); position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%) } .thumbnail_list_wrap h2 { position : relative; font-size : 22px; } .thumbnail_list_wrap h3 { font-size : 18px; color : #696969; text-overflow : ellipsis; margin : 5px 0; font-weight: normal; white-space: nowrap; overflow : hidden } .thumbnail_list_wrap p { color : #666666; font-size : 16px } .thumbnail_list_wrap p img { display : inline-block; margin-right : 5px } .thumbnail_list_wrap a:hover span { background-color : #7a563c; color : #fff } .thumbnail_list_wrap a:hover span img { filter : brightness(0) invert(1) } .thumbnail_list_wrap h2 b { font-size : 22px; font-weight: 700; } .thumbnail_list_wrap a:hover h2 b { color : #7a563c; background-repeat: no-repeat; background-position: bottom left; background-image: linear-gradient(#efe4da, #efe4da); background-size: 100% 30%; animation-name: textHighlight; animation-duration: 1s; animation-direction: alternate; } @keyframes textHighlight { from { background-size: 0% 30%; } to { background-size: 100% 30%; } } .search_filter_wrap .top { position : relative; border-radius : 5px; overflow : hidden; background-color : #f9f7f6; padding : 15px 100px 15px 200px; margin : 20px 0; min-height : 80px } .search_filter_wrap .top > a { position : absolute; top : 15px; right : 25px; border : 1px solid #dbdbdb; width : 50px; line-height : 50px; background-color : #fff; border-radius: 100%; text-align: center; } .search_filter_wrap .top > span img, .search_filter_wrap .top > a img { position : relative; top : 4px } .search_filter_wrap .top > span { position : absolute; top : calc(50% - 16px); left : 25px } .search_filter_wrap .top div a { position : relative; display : inline-block; padding : 7px 55px 7px 25px; background-color : #fff; border-radius : 50px; margin : 10px } .search_filter_wrap .top div a img { position : absolute; top : 15px; right : 20px } .seach_filter_select_wrap { padding : 0; border-radius : 20px; overflow : hidden; height : 0; transition : all .4s ease } .seach_filter_select_wrap.active { border : 1px solid #dbdbdb; padding : 40px; height : auto } .search_filter_wrap h2 { color : #7a563c; font-size : 20px; margin-bottom : 20px } .search_filter_wrap dl { position : relative; padding-left : 140px; overflow : hidden; margin : 15px 0 } .seach_filter_select_wrap.no_head_filter dl { padding-left : 0 !important } .seach_filter_select_wrap.no_head_filter dl dd { float : none; width : inherit; display : inline-block; margin-right : 50px } .search_filter_wrap dl dd { float : left; width : 14.2% } .search_filter_wrap dl dt { position : absolute; top : 0; left: 0; padding-left : 10px; color : #0033a5; } .search_filter_wrap dl dt label { font-weight : 700 } .search_filter_wrap dl dt:before { content : ''; width : 2px; height : 10px; background-color : #0033a5; position : absolute; top : 8px; left : 0; } .search_filter_wrap input { position : relative; top : -2px; width : 17px; height : 17px } .search_filter_wrap dl dd label { font-size : 16px } .exhibition_view_wrap .top { overflow : hidden; margin-bottom : 40px } .exhibition_view_wrap .left { float : left; width : 940px; position : relative } .exhibition_view_wrap .left img { display : block; width : 100% } .exhibition_view_wrap .top > .right { float : right; width : calc(100% - 1000px); } .exhibition_view_wrap .right dl { display : table; width : 100%; table-layout: fixed; } .exhibition_view_wrap .right dl dt, .exhibition_view_wrap .right dl dd { display : table-cell; vertical-align: middle; position : relative } .exhibition_view_wrap .right dl dt { width : 55px; height : 55px; border-radius : 10px; overflow : hidden } .exhibition_view_wrap .right dl dt img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50% ) } .exhibition_view_wrap .right dl dd { padding-left : 15px } .exhibition_view_wrap .right dd h2 a { font-size : 20px; font-weight: 700; } .exhibition_view_wrap .right dd h2 a i { position : relative; top : -2px; padding : 4px; margin-left : 5px } .exhibition_view_wrap .right dd p { color : #666666; } .exhibition_view_wrap .right dd > a { position : absolute; top : 0; right : 0; padding : 10px 20px; font-size : 16px } .exhibition_view_wrap .right dd > a img { position : relative; top : 1px; margin : 0 0 0 5px } .exhibition_view_wrap .top_info { padding : 20px 35px; font-size : 16px; color : #5E5E5E } .exhibition_view_wrap .top_info p { font-size : 20px; margin : 0 0 15px 0; color : #111; font-weight: bold; } .exhibition_view_wrap .top_btm_info { border-radius : 30px 0; overflow : hidden; background-color : #f5f5f5; padding : 20px 50px } .exhibition_view_wrap .top_btm_info li { position : relative; padding-left : 100px; margin : 7px 0; font-size : 16px; min-height : 24px } .exhibition_view_wrap .top_btm_info li span { position : absolute; top : 0; left : 0; color : #5C5C5C; font-size : 16px } .exhibition_view_wrap .top_btm_info li span img { display: inline-block; margin-right: 8px; position : relative; top : 2px; filter : brightness(0) } #exDetail01 .author_list_wrap > ul { margin : 0 } .exhibition_slide_wrap { position : relative; margin : 30px 0 } .exhibition_slide_wrap .author_list_wrap, .exhibition_slide_wrap .author_list_wrap2 { overflow : hidden } .exhibition_slide_wrap .author_list_wrap .wrap, .exhibition_slide_wrap .author_list_wrap2 .wrap { margin : 0 } .exhibition_slide_wrap .author_list_wrap .wrap > div, .exhibition_slide_wrap .author_list_wrap2 .wrap > div { float : none; margin : 0 } .exhibition_slide_wrap .author_list_wrap.active .wrap { margin : 0 -20px } .exhibition_slide_wrap .author_list_wrap.active .wrap > div { margin : 0 20px } .exhibition_slide_wrap .author_list_wrap2.active .wrap > div { margin : 0 10px } .exhibition_slide_wrap .swiper-pagination { position : absolute; top : -40px; right : 0; font-size : 16px; text-align : right; height : 30px; } .exhibition_slide_wrap .swiper-pagination .swiper-pagination-current { color : #ea2819 } .exhibition_slide_wrap .swiper-pagination span { font-size : 16px } .exhibition_slide_wrap .swiper-button-next:after, .exhibition_slide_wrap .swiper-button-prev:after { display : none } .exhibition_slide_wrap .swiper-button-disabled { display : none } .exhibition_slide_wrap .swiper-button-next { right : -15px } .exhibition_slide_wrap .swiper-button-prev { left : -15px } #editionSlide .swiper-slide div.edition_thumb { width : 265px; height : 265px; border-radius : 20px; margin : 0 auto; overflow : hidden } .swiper-btn span { position : relative; z-index : 13 } .quotation_wrap { border : 1px solid #eee; padding : 35px; color : #888888; border-radius : 20px; overflow : hidden } .quotation_wrap span { background-color : #e5e5e5; color : #666 } .quotation_wrap h2 { font-size :22px; color : #111111 } .quotation_wrap i { display : inline-block; width : 4px; height : 4px; background-color : #d3ae92; border-radius : 100%; margin : 0 8px; position : relative; top : -5px } .quotation_wrap p { color : #888888; margin-top : 5px } .quotation_wrap p img { position : relative; top : 2px; margin-right : 5px } .author_list_wrap3 a:hover { border-radius : 0 !important; box-shadow: none !important; } .tabcontent .author_list_wrap2:before { display : none } .tabcontent .author_list_wrap2 span { background-color : #e5e5e5; color : #666; margin-top : 20px } .tabcontent .author_list_wrap2 h2 { font-size : 20px; font-weight : normal } /*.tabcontent .author_list_wrap2 a:hover span { background-color : #7a563c; color : #fff; margin-top : 0 } */ .tabcontent .author_list_wrap2 a:hover h2 { color : #7a563c !important } .tabcontent .author_list_wrap2 a p { transition : all .3s ease } .tabcontent .author_list_wrap2 a:hover p { border-radius : 20px; box-shadow : -6px 0 20px 1px #ddd } .tabcontent .author_list_wrap2 a:hover .multiline { box-shadow : none; border-radius : 0; color : #fff } .tabcontent .author_list_noslide > ul > li { float : left !important; width : calc(25% - 40px) !important } .exhibition_tab_wrap { margin : 20px 0 } .exhibition_tab_wrap a { border : 1px solid #dbdbdb; color : #696969; padding : 10px 25px; } .exhibition_tab_wrap a + a { margin : 0 10px 0 } .exhibition_tab_wrap a.active, .exhibition_tab_wrap a:hover { background-color : #7a563c; color : #fff } .tabcontent .author_list_wrap a { box-shadow : none; border : 1px solid transparent } .tabcontent .author_list_wrap a:hover { border : 1px solid #7a563c } .bgline { position : relative; } .bgline:before, .bgline:after { content : ''; width : 200%; height : 1px; background : #dbdbdb; position : absolute; top : 50%; left : 0; } .bgline:before { left : -100% } .bgline:after { right : -100% } .keyword_wrap { overflow : hidden } .keyword_wrap ul { margin : -10px } .keyword_wrap ul li { float : left; width : 25%; padding : 10px } .keyword_wrap dl { display : table; table-layout: fixed; width : 100%; background-color: #f7f2ef; background-position : right center; border : 1px solid transparent; border-radius : 60px; overflow : hidden; padding : 0 40px; transition : all .3s ease } .keyword_wrap dl dt, .keyword_wrap dl dd { display : table-cell; vertical-align: middle; padding : 25px 0 } .keyword_wrap dl dt { width : 55px } .keyword_wrap dl dt p { width : 55px; height : 55px; border-radius : 8px } .keyword_wrap dl dd, .keyword_wrap li div { font-size : 16px; color : #888888; padding : 20px } .keyword_wrap dl dd h2, .keyword_wrap li div h2 { font-size : 20px; color : #111 } .keyword_wrap dl dd i { display : inline-block; width : 3px; height : 3px; background : #d3ae92; position : relative; top : -4px; margin : 0 5px; border-radius : 100% } .keyword_wrap dl dd p, .keyword_wrap li div p { font-size : 16px; margin-top : 3px; color : #888888 } .keyword_wrap dl dd p img, .keyword_wrap li div p img { position : relative; top : 2px; margin-right : 5px } .keyword_wrap li div { background-color: #f7f2ef; border-radius : 60px; overflow : hidden; padding : 20px 40px; } .keyword_wrap a:hover dl { background : #fff url('/resource/templete/manpa/img/common/ic_more_b.png') no-repeat right 40px center; box-shadow : 0px 0px 15px #e8d5c6 } .keyword_wrap a:hover dl h2 { color : #7a563c } .txt_box_wrap { position : relative } .txt_box_wrap h2 { font-size : 20px; margin : 20px 0 } .txt_box_wrap .txt_box { height : 310px; line-height : 180%; color : #333333; overflow : hidden; transition : all .3s ease } .txt_box_wrap.active .txt_box { height : auto } .txt_box_wrap .sub_box { padding : 25px 35px; background-color : #f2f2f2; font-size : 16px; margin : 20px 0 } .txt_box_wrap2 .sub_box { padding : 0; background : transparent; } .txt_box_wrap2 ul li { position : relative; padding-left : 110px; margin : 10px 0 } .txt_box_wrap2 ul li span { position : absolute; top : 0; left : 15px } .txt_box_wrap2 ul li span:before { content : ''; position : absolute; top : 13px; left : -15px; width : 5px; height : 5px; background : #000; border-radius : 100% } .txt_box_wrap > a, .bbs_more_btn { position : absolute; bottom : 0; left : 0; width : 100%; text-align : center; background : url('/resource/templete/manpa/img/common/ic_more_bg.png') repeat-x bottom left; line-height : 63px; } .bbs_more_btn.relative { position : relative !important } .txt_box_wrap > a.active i, .bbs_more_btn.active i { transform : rotate(-135deg) } .modal_wrap { display : none; position : fixed; top : 0; left : 0; width : 100%; height : 100%; background-color : rgba(0, 0, 0, 0.5); z-index: 99 } .modal_wrap.active { display : block } .modal_wrap .modal_inner { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); background-color : #fff; border-radius : 50px; overflow : hidden; min-width : 500px; max-width : 90%; min-height : 300px; height : 70%; max-width : 1200px; max-height : 780px; padding : 40px; } .modal_wrap .modal_inner .modal_close { position : absolute; top : 30px; right : 50px; opacity : 0.3; z-index : 2 } .modal_wrap .modal_inner .modal_close:hover { opacity : 1 } .modal_wrap .modal_inner > .inner { height : calc(100% - 80px); padding-right : 10px } .modal_wrap .modal_title { position : relative; font-size : 30px; margin-bottom : 30px } .modal_wrap .modal_title span { position : absolute; bottom : 0; right : 0; font-weight: bold; } .modal_wrap .modal_txt { line-height : 180%; } .modal_wrap .modal_txt h4 { font-size : 600 } .modal_wrap .modal_txt ul { margin : 0 0 10px 0 } .modal_wrap .modal_txt ul li { position : relative; padding-left : 10px; } .modal_wrap .modal_txt ul li:before { content : ''; position : absolute; top : 14px; left: 0; width : 5px; height : 5px; background-color : #000; border-radius : 100% } .modal_wrap .modal_txt a { color : #608cba; text-decoration: underline; } .more_thumb_list_wrap > div { overflow : hidden } .more_thumb_list_wrap > div:after { content : ''; display : block; clear : both } .more_thumb_list_wrap.active > div { height : auto !important } .collection_list_wrap ul { display : flex; flex-direction: row; flex-wrap : wrap; margin : 0 -20px } .collection_list_wrap ul li { flex-basis: 25%; } .collection_list_wrap ul li a { margin : 40px 20px; border : 1px solid #dbdbdb } .collection_list_wrap p { height : 330px; border-bottom : 1px solid #dbdbdb } .collection_list_wrap a div { padding : 25px; font-size : 16px; color : #666 } .collection_list_wrap h2 { font-size : 20px; margin : 10px 0; line-height : 130%; color : #000; height : 52px } .collection_list_wrap a span { background-color : #e5e5e5; color : #666 } .collection_list_wrap ul li a:hover { border-radius : 50px; overflow : hidden; box-shadow : 0px 0px 15px #ccc } .collection_list_wrap ul li a:hover span { background-color : #7a563c; color : #fff } .collection_list_wrap ul li a:hover h2 { color : #7a563c } .web_magazine_body { overflow : hidden } .web_magazine_body header { background-color: #fff; } .web_magazine_body section { position : relative; min-height: 100vh; background-size : cover !important; background-position : center center !important; padding-top : 92px; } .web_magazine_body section .scroll { max-height : 200px; transition : all .3s ease } .web_magazine_body .first .inner { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%) } .web_magazine_body .first * { text-align: center; } .web_magazine_body .first a { width : 45px; height : 45px; line-height : 45px; border : 1px solid #d5d7df; border-radius: 100%; margin : 0 auto 40px } .web_magazine_body .first p span { background : #e5e5e5; font-size : 16px } .web_magazine_body .first h2 { font-size : 62px; margin : 50px 0 70px; line-height : 100% } .web_magazine_body .first .txt_box { max-width : 600px } .web_magazine_body .second .txt_box2 { position : absolute; bottom : 50px; left : 50%; transform : translateX(-50%); width : 100%; max-width : 780px; height : 200px } .web_magazine_body .scroll h2 { margin : 50px 0 0 0; font-size : 24px } .web_magazine_body .scroll h2:first-child { margin-top : 0 } .web_magazine_body .third .container { display : flex; flex-direction: row; justify-content: space-between; color : #fff } .web_magazine_body .third .container > div { height : 100%; max-height : 680px; flex-basis : 48%; border-radius : 40px; overflow : hidden } .web_magazine_body .third .container > div:last-child { background-color : rgba(0, 0, 0, 0.5); padding : 45px; height : 680px } .web_magazine_body .third .container .scroll { height : 100%; max-height : 100% } .web_magazine_body .third .container p { height : 680px; } .web_magazine_body .fourth { padding : 0 } .web_magazine_body .fourth .container { max-width : 1000px; padding-top : 0 } .web_magazine_body .fourth p { height : 60%; } .web_magazine_body .fourth p img { display : block; margin : 0 auto; height : auto !important; width : 100% !important; } .web_magazine_body .fourth .inner { padding : 70px 0; height : 30vh } .web_magazine_body .fourth .scroll { height : 100% } .web_magazine_body .fifth .top { display : flex; flex-direction: row; height : calc(70vh - 92px); margin : 0 -20px } .web_magazine_body .fifth .top div { flex-basis: 33.33%; margin : 0 20px; height : 100%; border : 1px solid #dcdcdc } .web_magazine_body .fifth .container { padding : 0; height : 100vh } .web_magazine_body .fifth .inner { height : 30vh; padding : 50px 90px } .web_magazine_body .fifth .scroll { height : 100% } .web_magazine_body .video { padding-top : 92px } .web_magazine_body .video img { height : 100% !important; width : 100% !important } .web_magazine_body section.footerSection { padding : 0; height : auto; min-height : auto } .connection_info { position : fixed; top : 100px; right : 0; z-index : 100; background-color : #0033a5; width : 40px; word-wrap: break-word; padding : 10px 10px 10px 20px; color : #fff; font-size : 14px; line-height : 110%; border-radius : 20px 0 0 20px } .connection_info_Wrap { position : fixed; top : 0; right : -100%; width : 80%; height : 100%; background-color : #fff; z-index : 99; overflow : auto; transition : right .3s ease } .web_magazine_body.active .connection_info_Wrap { right : 0 } .web_magazine_body .connection_info:before { content : url('/resource/templete/manpa/img/common/ic_connec.png'); position : absolute; left : 7px; top : 50px; transform : rotate(180deg); transition : transform .3s ease } .web_magazine_body.active .connection_info:before { transform : rotate(0deg) } .swipder_3d_slide_wrap { margin : 100px 0; overflow : hidden } .swipder_3d_slide_wrap .swiper-3d-slide { position : relative } .swipder_3d_slide_wrap .swiper-slide { width: 600px; height: 640px } .swipder_3d_slide_wrap .swiper-slide div { width: 100%; height: 600px; } .swipder_3d_slide_wrap .swiper-slide a { color : #7a563c; text-align : right; font-weight: bold; padding-top : 5px; opacity : 0 } .swipder_3d_slide_wrap .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left,rgba(0,0,0,.8),rgba(0,0,0,0.5)) } .swipder_3d_slide_wrap .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right,rgba(0,0,0,.8),rgba(0,0,0,0.5)); } .swipder_3d_slide_wrap .swiper-3d { perspective: 1000px; } .swipder_3d_slide_wrap .swiper-3d-prev, .swipder_3d_slide_wrap .swiper-3d-next { position : absolute; top : 50%; z-index : 2 } .swipder_3d_slide_wrap .swiper-3d-prev { left : 25% } .swipder_3d_slide_wrap .swiper-3d-next { right : 25% } .swipder_3d_slide_wrap .swiper-slide.swiper-slide-active a { opacity : 1 } .bbs_detail_post { max-width : 760px; margin : 0 auto } .post_title { font-size : 46px; text-align : center; line-height : 120% } .post_title span { display : block; font-size : 16px; color : #7a563c; } .post_title img { display : block; margin : 40px auto } .post_flex { margin : 80px 0 } .post_flex .post_flex_img { flex-basis: 320px; padding : 0 } .post_flex div { padding : 0 50px } .post_flex div h2 { font-size : 32px; margin-bottom : 20px; line-height : 120% } .post_flex div h2.color_brown { padding-bottom : 20px; border-bottom : 1px solid #7a563c } .post_flex div p { font-size : 20px; color : #9c9c9c; margin : 20px 0 } .post_flex .post_flex_img p { font-size : 16px; text-align : center; margin : 0 } .post_txt { margin : 180px 0 } .post_txt p { position : relative; display : inline-block; background-color : #7a563c; padding : 40px; color : #fff; font-size : 34px; font-weight: bold; letter-spacing: -1px; line-height : 120%; margin : 0 0 20px 0 } .post_txt p span { display : block; font-size : 14px; margin : 0 0 10px 0 } .post_txt p:before, .post_txt p:after { content : ''; position : absolute; background-color : #7a563c } .post_txt p:before { width : 1px; height : 99%; top : 0; right : -5px } .post_txt p:after { width : 99%; height : 1px; bottom : -5px; left : 0 } .post_list_img { margin : 20px -10px } .post_list_img li { flex-basis: 33.33%; padding : 0 10px; font-size : 16px; color : #9c9c9c; text-align : center } .post_list_img li p { width : 100%; height : 180px; } .bbs_detail_post { margin-top : 100px } .bbs_detail_post > h3 { font-size : 32px; color : #7a563c } .bbs_detail_post > h3 span { display : inline-block; color : #9c9c9c; font-size : 20px; margin-left : 10px } .bbs_detail_post .normal_title { font-size : 24px; margin : 100px 0 20px 0 } .light_black { color : #333; margin : 10px 0 } .post_big_img { margin : 100px 0 } .post_big_img img { display : block; width : 100%; height : auto !important } .post_big_img p { font-size : 16px; color : #9c9c9c; text-align : center } .bbs_detail_post dl { display : table; width : 100%; table-layout: fixed; } .bbs_detail_post dt, .bbs_detail_post dd { display : table-cell; vertical-align: top; line-height : 170% } .bbs_detail_post dt { font-size : 60px; color : #7a563c; width : 80px; line-height : 100% } .bbs_detail_post div.color_brown { margin : 100px 0; } .post_quote { text-align : center; font-size : 22px; font-style :italic } .post_quote img { display : block; margin : 25px auto } .bbs_detail_post div.color_brown p { font-size : 16px; color : #9c9c9c; margin : 20px 0 0 0; text-align : right } .post_btm_wrap { background : url('/resource/templete/manpa/img/common/ic_title_dashed.png') repeat-x top left; padding-top : 30px; margin : 100px 0 150px 0 } .post_btm_wrap dt { font-size : 20px; color : #111; width : 150px; font-weight: bold; } .post_btm_wrap p { margin-top : 20px } .post_btm_wrap p:first-child { margin-top : 0 } .post_btm_wrap span { color : #666; background-color : #e5e5e5 } .post_btm_wrap dd { color : #666666; font-size : 16px; } .bbs_series_list ul { display : flex; flex-direction: row; flex-wrap: wrap; margin : 20px -20px } .bbs_series_list ul li { flex-basis: 25%; padding : 20px } .bbs_series_list a { border : 1px solid #dbdbdb } .bbs_series_list p { height : 330px; } .bbs_series_list .btm { padding : 20px; font-size : 16px; color : #888888 } .bbs_series_list .btm h2 { font-size : 20px; color : #111; margin : 0 0 10px 0 } .bbs_series_list .btm img { position : relative; top : 1px } .video_list p { position : relative } .video_list p:before { content : url('/resource/templete/manpa/img/common/ic_video.png'); position : absolute; top : 50%; left : 50%; transform: translate(-50%, -50%); } .video_detail_wrap { position : relative; max-width : 1100px; margin : 50px auto } .video_detail_wrap p { position : relative; height : 620px; margin : 0 0 30px 0 } .video_detail_wrap p:before { content : url('/resource/templete/manpa/img/common/ic_video.png'); position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%) } .video_detail_wrap .scroll { max-height : 250px } .bbs_has_side_wrap { display : flex; flex-direction: row; justify-content: space-between; } .bbs_has_side_inner { width : calc(100% - 240px); padding-left : 50px } .bbs_has_side_wrap .bbs_side_nav { flex-basis: 240px; } .bbs_has_side_wrap .bbs_side_nav a { position : relative; line-height : 45px; padding : 0 15px; font-size : 16px; border : 1px solid #dbdbdb; margin-top : -1px } .bbs_has_side_wrap .bbs_side_nav a i { padding : 4px; position : absolute; top : 15px; right : 15px; border-color : #adadad; transition : all .3s ease } .bbs_has_side_wrap .bbs_side_nav ul ul { height: 0; overflow : hidden; transition : all .3s ease } .bbs_has_side_wrap .bbs_side_nav > ul > li.active ul { height : auto } .bbs_has_side_wrap .active i { top : 19px; transform : rotate(224deg) } .bbs_has_side_wrap .bbs_side_nav > ul > li > a.active { background-color : transparent; color : #111 } .bbs_has_side_wrap .bbs_side_nav > a.active, .bbs_side_nav ul ul a.active { background : #0033a5; color : #fff } .bbs_has_side_wrap .exhibition_view_wrap .left { width : 700px } .bbs_has_side_wrap .exhibition_view_wrap .top > .right { width : calc(100% - 750px) } .bbs_has_side_wrap #editionSlide .swiper-slide div.edition_thumb { width : 100% } .bbs_has_side_wrap .tabcontent { padding-top : 50px } .bbs_has_side_wrap #exDetail01 .author_list_wrap > ul { margin : -20px } .bbs_has_side_wrap .keyword_wrap ul li { width : 33.33% } .gusul_title { font-size : 20px } .gusul_detail_wrap dl { display : table; width : 100%; table-layout: fixed; margin : 20px 0 } .gusul_detail_wrap dl dt, .gusul_detail_wrap dl dd { display : table-cell; font-size : 20px } .gusul_detail_wrap dl dt { width : 240px } .gusul_detail_wrap dl dt img { position : relative; top : 8px; margin-right: 7px; } .gusul_scroll { border : 1px solid #f1eee8; padding : 25px; max-height : 320px } .gusul_scroll p { font-weight: bold; font-size : 20px; margin-bottom : 25px } .gusul_author { margin-top : 60px } .gusul_author h3 { margin-bottom : 20px; font-size : 22px } .gusul_author > div { flex-basis: 50%; padding: 0 10px } .gusul_author > div > p { display : inline-block; padding : 15px 35px; font-size : 20px; background : #f7f2ef; border-radius : 50px; overflow : hidden; margin : 5px 10px 0 0 } .gusul_file_title p { position : absolute; top : 0; right : 0 } .gusul_file_title p a { position : relative; display : inline-block; padding : 0 30px; color : #afafaf } .gusul_file_title p a.active { color : #7a563c; font-weight: bold; } .gusul_file_title p a:before { content : ''; width : 1px; height : 12px; background : #dbdbdb; position : absolute; top : 9px; left : 0 } .gusul_file_title p a:first-child:before { display : none } .gusul_file_wrap { margin : 80px 0 } .gusul_file_wrap ul { display : flex; flex-direction: row; justify-content: space-between; flex-wrap :wrap; margin : 0 -20px 20px -20px } .gusul_file_wrap ul li { flex-basis: 50%; padding : 20px } .gusul_file_wrap ul a { position : relative; box-shadow : -6px 0 20px 1px #eee9e7; border-radius : 30px; overflow : hidden; padding : 50px 50px 50px 175px; font-size : 16px; color : #888888 } .gusul_file_wrap ul a > img { position : relative; top : 2px; margin :0 5px 0 0 } .gusul_file_wrap ul p { position : absolute; top : 50%; left : 50px; margin-top : -50px; width : 100px; height : 100px; background-color : #f7f2ef; border-radius : 100%; } .gusul_file_wrap ul p img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%) } .gusul_file_wrap ul h2 { font-size : 20px; margin : 0 0 10px 0; color : #111; -webkit-line-clamp: 1; } .gusul_file_wrap .bbs_more_btn { position : relative } .gusul_file_wrap .bbs_more_btn i { position : relative; top : -3px; padding : 3px } .gusul_file_wrap .bbs_more_btn.active i { top : 0 } .api_wrap .scroll { border-top : 1px solid #161616; border-bottom : 1px solid #161616; padding : 15px; max-height : 375px; } .checkbox { text-align : center; padding : 10px } .checkbox label { position : relative; top : 2px } .checkbox input { display : inline-block; width : 26px; height : 26px; margin-left : 10px; border : 1px solid #7a563c } .checkbox input[type=checkbox]:checked { accent-color: #7a563c; } .api_wrap dl { display : table; width : 100%; table-layout: fixed; margin : 40px 0 } .api_wrap dl dt, .api_wrap dl dd { display : table-cell; } .api_wrap dl dt { font-size : 24px; font-weight: bold; width : 370px } .api_wrap dl dd span { display : inline-block; max-width : 320px } .api_wrap span input[type="checkbox"] { width : 26px; height: 26px } .api_wrap span input[type=checkbox]:checked { accent-color: #7a563c; } .api_wrap span label { position : relative; top : 2px } .api_wrap span { display : inline-block; margin : 0 20px 0 0 } .api_wrap select { width : 150px; line-height : 30px; border : 1px solid #dbdbdb } .api_wrap .email_wrap span { margin : 0 } .api_wrap .email_wrap span:nth-child(2) { margin : 0 5px } .api_wrap textarea { display : block; width : 100%; height : 300px } .bbs_btn { display : inline-block; background-color: #7a563c; color : #fff; font-size : 16px; padding : 12px 18px; border-radius : 10px; margin : 50px 0 } .faq_wrap { border-top : 1px solid #7a563c } .faq_wrap .list a { position : relative; padding : 20px 50px 20px 120px; font-size : 20px; background : #f6f6f6 url('/resource/templete/manpa/img/common/ic_faq_q.png') no-repeat left 50px center; font-weight: bold; border-bottom : 1px solid #dbdbdb } .faq_wrap .list .faq_reply { display : none; padding : 50px 80px 50px 120px; background : #fff url('/resource/templete/manpa/img/common/ic_faq_a.png') no-repeat left 50px top 50px; } .faq_wrap .list.active .faq_reply { display : block; border-bottom : 1px solid #dbdbdb } .faq_wrap .list.active a { background-color : #f1efe8; color : #7a563c } .faq_wrap .list.active .plusminus:before { transform: translatey(-50%) rotate(-90deg); opacity: 0; } .faq_wrap .list.active .plusminus:after { transform: translatey(-50%) rotate(0); } .info_detail_wrap { max-width : 1060px; margin : 130px auto } .info_detail_wrap div { height : 315px; display: flex; justify-content: center; flex-direction: column; text-align: center; font-size : 20px; color : #666666; border-radius : 10px; overflow : hidden } .info_detail_wrap div:nth-child(even) { flex-basis: 65px; } .info_detail_wrap div:nth-child(even) img { width : 41px; margin : 0 auto } .info_detail_wrap div:nth-child(odd) { background-color: #f7f2ef; width : 33.33%; } .info_detail_wrap div p { height : 95px } .info_detail_wrap div h2 { font-size : 26px; color : #333 } .info_detail_list p { position : relative; margin : 20px 0; padding-left : 20px } .info_detail_list p:before { content : ''; width : 7px; height : 7px; background : #d3ae92; position : absolute; top : 9px; left : 0; border-radius: 100%; } .mypage_top_wrap { position : relative; text-align : right; background : #f9f7f6; border-radius : 10px; overflow : hidden } .mypage_top_wrap .default { float: right; padding : 40px; display : flex; flex-direction: row; align-items: center; } .mypage_top_wrap .default p { text-align : center } .mypage_top_wrap .default p a { border : 1px solid #205adb; color : #205adb; padding : 3px 15px; border-radius : 7px } .mypage_top_wrap .default p a.screening { border : 1px solid #15347b; color : #15347b } .mypage_top_wrap .default p a.screening_reject { border : 1px solid #ea2819; color : #ea2819 } .mypage_top_wrap .default p a.screening_add { border : none; box-shadow: -6px 0 20px 1px #ddd; color : #666666; font-size : 16px; border-radius : 20px; padding : 5px 25px } .mypage_top_wrap .default p a.screening_add img { position : relative; top : 3px; margin-right : 5px; } .mypage_top_wrap .default p a i { display : inline-block; background : #205adb; width : 8px; height : 8px; border-radius : 100%; position : relative; top : -2px; margin : 0 5px 0 0 } .mypage_top_wrap .default p a.screening i { background-color : #15347b } .mypage_top_wrap .default p a.screening_reject i { background-color : #ea2819 } .mypage_top_wrap .default p span { display : block; font-size : 15px; color : #666666 } .mypage_top_wrap .default > a { border : 1px solid #dbdbdb; color : #666666; font-size : 16px; padding : 5px 25px; border-radius : 20px; margin : 0 0 0 20px } .mypage_top_wrap .default > a img { position : relative; top : 4px; margin : 0 5px 0 0 } .mypage_top_wrap .default div { margin-right : 50px } .mypage_top_wrap .default div a { border-radius : 5px; width : 100px; line-height : 40px; text-align: center; border : 1px solid #6a5a4f; color : #6a5a4f } .mypage_top_wrap .default div a + a { background-color: #6a5a4f; color : #fff; margin-top : 10px } .mypage_tab_link { position : relative; margin : 70px 0; } .mypage_tab_link:before, .mypage_tab_link:after { content : ''; width : 100%; height : 1px; background-color : #dbdbdb; position : absolute; bottom : 0 } .mypage_tab_link:before { left : -50% } .mypage_tab_link:after { right : -50% } .mypage_tab_link a { display : inline-block; font-size : 24px; border-bottom : 3px solid transparent; font-weight: bold; color : #222 } .mypage_tab_link a + a { margin-left : 40px } .mypage_tab_link a.active { color : #7a563c; border-bottom : 3px solid #7a563c } .myinfo_wrap { position : absolute; top : 0; left : 0; height : 100%; background : url('/resource/templete/manpa/img/common/bg_mypage_top.png') no-repeat center center / cover; width : 850px; text-align: left; padding : 50px; display : flex; align-items: center; border-radius : 10px; transition : width .3s ease } .myinfo_wrap > span { width : 40px; line-height : 40px; background-color: #0033a5; color : #fff; text-align: center; border-radius: 10px; } .myinfo_wrap h2 { position : relative; font-size : 30px; color : #fff; padding : 0 20px; line-height : 120% } .myinfo_wrap h2:after { content : ''; width : 2px; height : 15px; background-color : #fff; position : absolute; top : 12px; right : 0 } .myinfo_wrap h2 span { font-size : 20px; color : #c8b5a7; margin-left : 10px } .myinfo_wrap p.mypage_email { color : #c8b5a7; margin-left : 20px; position : relative; top : 5px; } .myinfo_wrap p.mypage_email img { position : relative; top : 2px; margin-right : 8px } .myinfo_wrap p.membership_rank { position : relative; top : 2px } .myinfo_wrap p.membership_rank a { color : #fff; border : 1px solid #fff; padding : 3px 18px; border-radius : 5px; margin-left : 40px } .mypage_nav_wrap a { display : inline-block; color : #7b7b7b; font-size : 22px; margin : 0 22px; font-weight : bold } .mypage_nav_wrap a:first-child { margin-left : 0 } .mypage_nav_wrap a.active { color : #7a563c } .mypage_nav_wrap a span { position : relative; top : -3px; display : inline-block; border : 5px; border-radius: 20px; background-color: #dadada; font-size : 14px; padding : 1px 8px; margin : 0 0 0 5px } .mypage_nav_wrap a.active span { background-color : #7a563c; color : #fff } .mypage_author { margin-top : 0 !important } .sub_title.has_line { padding-bottom : 10px; background : url('/resource/templete/manpa/img/common/ic_title_dashed.png') repeat-x bottom left; } .modal_wrap .sub_title span { position : absolute; bottom : 10px; right : 0; font-size : 16px; color : #888888 } #membershipAddModal .modal_inner { max-width : 800px } #membershipAddModal dl { display : table; width : 100%; table-layout: fixed; margin : 0 0 20px 0 } #membershipAddModal dl dt, #membershipAddModal dl dd { display : table-cell; vertical-align: middle; } #membershipAddModal dl dt { width : 160px } .mypage_modal_ul { display : flex; width : 100% } .mypage_modal_ul li:first-child { padding-right : 10px; flex-basis: 180px; } .mypage_modal_ul li:last-child { width : 100% } #membershipAddModal dl input, #membershipAddModal dl select { min-width : 160px; line-height : 50px; border : 1px solid #dbdbdb; display : block; width : 100% } #membershipAddModal dd > p { display : flex } #membershipAddModal dd > p select { width : 140px } #membershipAddModal dd > p button { width : 100px; background-color : #7a7a7a; color : #fff; margin : 0 5px } #membershipAddModal dd > p span { position :relative; display : block; padding-right : 20px; white-space : nowrap; text-overflow : ellipsis; overflow : hidden; line-height : 50px; font-size : 16px; } #membershipAddModal dd > p span a { position : absolute; top : 0; right : 0 } #membershipAddModal .bbs_btn_center a { width : 130px; line-height : 50px } .thema_type .seach_top { position : relative; background : #f9f7f6; padding : 25px 140px 25px 25px } .thema_type input { line-height : 50px; border : 1px solid #dbdbdb } .thema_type .seach_top button { position : absolute; top : 25px; right : 25px; width : 100px; line-height : 50px; background-color: #111; color : #fff; } .thema_type .seach_top button img { position : Relative; top : 4px; margin-right : 10px } .thema_type01 .seach_top_option { border : 1px solid #dbdbdb; padding : 10px 30px; border-radius : 10px; margin-top : 30px } .thema_type01 .seach_top_option ul { overflow : hidden; margin : 20px 0; } .thema_type01 .seach_top_option li { float : left; width : 48%; line-height : 50px } .thema_type01 .seach_top_option li:nth-child(2) { width : 4%; text-align : center } .thema_type01 .seach_top_option li input.datepicker { background : url('/resource/templete/manpa/img/common/ic_cal.png') no-repeat right 15px center } .seach_filter_nav { margin : 20px 0; overflow : hidden; border-radius : 10px } .seach_filter_nav li { float : left; width : 14.28% } .seach_filter_nav li a { text-align : center; line-height : 50px; background-color : #f3f3f3; color : #666 } .seach_filter_nav li.active a { background-color : #0033a5; color : #fff; border-radius : 10px } .seach_filter_nav li a i { position : relative; top : -4px; padding : 3px; margin-left : 10px; border-color : #b7b7b7 } .seach_filter_nav li.active a i { transform : rotate(-135deg); border-color : #fff; top : 0 } .reset_filter_btn { text-align : center; margin : 40px 0 } .reset_filter_btn button { display : inline-block; width : 240px; line-height : 60px; font-size : 16px; color : #7a563c; font-weight: 500; border : 1px solid #7a563c } .reset_filter_btn button + button { background-color: #7a563c; color : #fff; margin-left : 20px } .reset_filter_btn button img { position : relative; top : 4px; margin-right : 8px } .search_page_tab_link { display : flex; flex-direction: row; justify-content: space-between; margin : 70px -20px } .search_page_tab_link a { width : 33.33%; margin : 0 20px; text-align : center; font-size : 25px; color : #888; border : 1px solid #dbdbdb; border-radius : 30px; padding : 10px 0; font-weight: 500; } .search_page_tab_link a span { position : relative; display : inline-block; color : #454545; background-color: #ececec; border-radius : 20px; padding : 1px 12px; font-weight: 600; top : -2px } .search_page_tab_link a.active { background-color: #0033a5; color : #fff; } .search_page_tab_link a.active span { background-color: #fff; color : #0033a5 } .thema_type02 { border : 1px solid #dbdbdb; border-radius : 20px; padding : 40px } .thema_type02 .seach_top { background : transparent; padding : 5px 140px 10px 0 } .thema_type02 .seach_top button { top : 6px } .thema_title { font-size : 28px } .thema_title span { font-size : 28px; text-transform : uppercase; color : #0033a5; font-weight: 500; } .type_select { padding : 10px 0 0 0 } .type_select a { display : inline-block; border-radius : 20px; border : 1px solid #dbdbdb; padding : 5px 15px; font-size : 16px; color : #666666; margin : 5px 6px } .type_select a:first-child { margin-left : 0 } .type_select a.active, .type_select a:hover { background-color : #0033a5; color : #fff; border-color : #0033a5 } .type_select2 span { color : #0033a5; font-weight: 600; } .type_select2 a { display : inline-block; color : #666666; margin : 0 10px; font-weight: 500; } .thema_search_opt { display : flex; flex-direction: row; justify-content: space-between; flex-wrap : wrap; margin : 0 -5px; margin-top : 30px } .thema_search_opt .inner { flex-basis: calc(16.66% - 10px); margin : 0 5px; } .thema_search_opt h2 { border-radius : 10px; background-color : #7a563c; color : #fff; text-align : center; padding : 10px } .thema_search_opt .input_wrap { position : relative; padding-right : 50px; border-bottom : 1px solid #dbdbdb } .thema_search_opt .input_wrap button { position : absolute; top : 0; right : 0; width : 50px; height : 50px; padding-top : 12px } .thema_search_opt .input_wrap input { top : 0; width : 100%; height : 52px; border : none; } .thema_search_opt .wrap { border : 1px solid #dbdbdb; border-radius : 10px; overflow : hidden } .thema_search_opt .scroll { padding : 15px 25px; height : 250px } .thema_search_opt .scroll p { margin : 10px 0 } .thema_search_opt .scroll p:first-child { margin-top : 0 } .thema_search_opt .scroll label { font-size : 16px; padding-left : 5px } .thema_search_opt.active { display : flex } .thema_type04 { display : flex; flex-direction: row; justify-content: space-between; align-items: center; margin : 0 0 20px 0 } .thema_type04 .reset_filter_btn { width : 290px; margin : 0 } .thema_type04 .reset_filter_btn button { width : 130px; line-height : 50px } .thema_type04 p { flex-basis: calc( (100% - 300px) /2 ); } .thema_type04 select { width : 100%; line-height : 50px; border : 1px solid #dbdbdb } .thema_type04_map_wrap { position : relative; padding : 50px; border : 1px solid #dbdbdb; border-radius : 30px; padding-left : 200px } #mapLeft { position : absolute; top : 50px; left : 50px; border-radius : 20px; background-color : #f9f7f6; width: 360px; min-height: 360px; overflow : hidden } .background { fill : #f9f7f6; border-radius : 20px; overflow : hidden } #states path { fill: #fff; stroke: #000000; stroke-width: 1px; } #states path:hover { fill: #d1c0b4; } #states .active { fill: #7a563c; } #states path { cursor: pointer; } #mapInner { text-align : center; padding-left : 300px } .mapFilter { cursor: pointer; stroke: #000; } .rightMap { display : none } .rightMap.active { display : block } .rightMap path { stroke-width: 1; fill: #f1f1f1; } .rightMap path:hover, .rightMap path.active { fill: #7a563c; } .rightMap g text { fill: #000 !important; text-anchor: middle !important; } .rightMap path.active { fill: #7a563c; } .tooltipDiv { position : fixed; background-color: #7a563c; color : #fff; border-radius: 5px; max-width : 200px; padding : 5px 10px; overflow : hidden; font-size : 15px; cursor: pointer; } /* SVG */ #svgchart { position :relative; background-color: white; border : 1px solid #dbdbdb; border-radius : 20px; overflow : hidden; width : 100% !important } .links { stroke: #d7d7d7; } .node { fill: transparent; } div.tooltip { position: absolute; text-align: center; padding: 5px; background: honeydew; font: 16px sans-serif; font-weight: bold; border: 1px solid black; border-radius: 8px; pointer-events: none; } .top_info_count { position : relative; font-size : 16px } .top_info_count span { color : #ea2819; font-weight: bold; } .top_info_count p { position : absolute; top : 0; right : 0 } .top_info_count p a { position : relative; display : inline-block; color : #9d9d9d; padding : 0 10px } .top_info_count p a:last-child { padding-right : 0 } .top_info_count p a.active { color : #111111 } .top_info_count p a:before { position : absolute; content : ''; width : 1px; height : 8px; top : 10px; right : -2px; background-color: #dbdbdb; } .top_info_count p a:last-child:before { display : none } #gallery { position: relative; overflow : hidden; } #gallery .wrap { position: relative; display: block; margin: 5px; float: left; padding-bottom : 100px; overflow : hidden; } #gallery .wrap .img { border-radius : 10px; } #gallery .wrap .inner { height : 70px; position : absolute; bottom : 20px; left : 0; width : 100% } .ellipsis { text-overflow : ellipsis; overflow : hidden; white-space : nowrap } #gallery .wrap p { font-size : 14px; color : #666; } #gallery .wrap p i { position : relative; border-color : #bdbdbd; margin : 0 5px; top : -2px } #gallery .wrap h2 { font-weight: 500; } .gridImage { overflow : hidden } .item { float: left; margin-bottom: 15px; } .item .img_wrap { border-radius : 10px; border : 1px solid #f3f3f3; overflow : hidden } .item img { width : 100%; max-width: 100%; vertical-align: bottom; height : 250px !important } .first-item { clear: both; } .last-row, .last-row ~ .item { margin-bottom: 0; } .item .inner p { font-size : 16px; padding : 10px 0 5px 0; } #gallery p { font-size : 14px; color : #666; } #gallery p i { position : relative; border-color : #bdbdbd; margin : 0 5px; top : -2px } #gallery h2 { font-weight: 500; } .main_search_area { position : relative; background-color : #f4f4f4; padding : 50px; text-align : center; } .main_search_area:before, .main_search_area:after { content : ''; position : absolute; top : 0; left : -100%; background-color : #f4f4f4; width : 200%; height : 100%; z-index : -1 } .main_search_area:after { left : 100%; } .main_search_area > p { font-size : 24px; font-weight: bold; } .main_search_area > p span { font-size : 24px; font-weight: bold; } .main_search_area .inner { position : relative; display : inline-flex; margin-bottom : 30px; flex-direction: row; border-bottom : 4px solid #000; } .main_search_area .input_wrap input, .main_search_area .input_wrap button, .main_search_area .input_wrap a { display : flex; width : inherit; border : none; background-color : transparent; line-height : 60px; align-items: center; height : 100%; } .main_search_area input { width : 685px; padding-right : 110px; font-size : 40px; color : #0033a5; padding-left : 20px; font-weight: bold; } .main_search_area input::placeholder { font-size : 18px; color : #666 } .main_search_area .input_wrap a { position : absolute; top : 0; right : 60px } .main_search_area .input_wrap button { position : absolute; top : 0; right : 0 } .search_auto_wrap { display : none; position : absolute; top : 64px; left : 0; width : 100%; background : #fff; padding-top : 5px; border-radius : 0 5px 5px 0 ;z-index:1} .search_auto_wrap.active { display : block; } .search_auto_wrap a { text-align : left; padding : 5px 20px; font-size : 16px; font-weight: bold; } .search_auto_wrap > a span { font-weight: bold; } .search_auto_wrap > a:hover { background-color : #f7f2ef; text-decoration: underline; } .search_auto_wrap p a { border-top : 1px solid #dbdbdb; padding : 15px; text-align : right; color : #666666 } .main_search_area .input_wrap a { display : flex; width : inherit; border : none; background-color : transparent; line-height : 60px; align-items: center; height : 100%; } .main_search_area input { width : 685px; padding-right : 110px; font-size : 40px; color : #0033a5; padding-left : 20px; font-weight: bold; } .main_search_area input::placeholder { font-size : 18px; color : #666 } .main_search_area .input_wrap a { position : absolute; top : 0; right : 60px } .main_search_area .input_wrap button { position : absolute; top : 0; right : 0 } .search_auto_wrap { display : none; position : absolute; top : 64px; left : 0; width : 100%; background : #fff; padding-top : 5px; border-radius : 0 5px 5px 0 } .search_auto_wrap.active { display : block; } .search_auto_wrap a { text-align : left; padding : 5px 20px; font-size : 16px; font-weight: bold; } .search_auto_wrap > a span { font-weight: bold; } .search_auto_wrap > a:hover { background-color : #f7f2ef; text-decoration: underline; } .search_auto_wrap p a { border-top : 1px solid #dbdbdb; padding : 15px; text-align : right; color : #666666 } .selectBox2 { position: relative; width: 115px; cursor: pointer; } .selectBox2:after { content : ''; width : 2px; height : 10px; background-color : #dbdbdb; position : absolute; top : calc(50% - 5px); right : -10px } .selectBox2 .label { position: relative; display: block; width : 115px; background: transparent; cursor: pointer; font-size : 16px; line-height : 60px; text-align : left; } .selectBox2 .label i { position : absolute; top : calc(50% - 4px); right : 5px; } .selectBox2 .optionList { position: absolute; top: 64px; left: 0; width: 100%; background-color : #fff; overflow: hidden; max-height: 0; transition: .3s ease-in; } .selectBox2.active .optionList { max-height: 500px; } .selectBox2.active .label i { transform : rotate(-135deg); top : 50% } .selectBox2 .optionItem { padding: 5px 10px; transition: .1s; font-size : 16px; text-align : left } .selectBox2 .optionItem:hover { background: #f7f2ef } .selectBox2 .optionItem:last-child { border-bottom: 0 none; } .has_search_filter { padding : 0 300px 50px 20px; } .has_search_filter .author_list_wrap > ul { overflow : hidden; margin : 0 -20px } .has_search_filter .search_page_tab_link { margin : 60px -20px 30px -20px } .has_search_filter .author_list_wrap li a { box-shadow : none } .has_search_filter .author_list_wrap li a:hover { box-shadow: 3px 3px 15px 13px #ece7e3; } .has_search_filter .author_list_wrap .top { height : 155px } .has_search_filter .author_list_wrap .top p { font-size : 20px; color : #666666 } .has_search_filter .author_list_wrap li a { padding-bottom : 215px; } .has_search_filter .author_list_wrap a > p { height : 215px } .search_filter_panel_wrap { position : absolute; top : 0; right : 0; width : 250px; padding : 10px 20px; box-shadow : 0 0 20px #ccc; border-radius : 10px } .search_filter_panel_wrap .inner > a { position : relative; padding-bottom : 5px; border-bottom : 1px solid #dbdbdb; line-height : 45px; border-top : 1px solid #dbdbdb; font-weight: bold; } .search_filter_panel_wrap button { display : none } .search_filter_panel_wrap .inner.active > a { color : #0033a5 } .search_filter_panel_wrap i { position : absolute; top : 20px; right : 5px; border-color : #888; padding : 3px } .search_filter_panel_wrap .inner.active i { transform : rotate(-135deg); top : 22px } .search_filter_panel_wrap .inner ul { display : none; border-bottom : 1px solid #dbdbdb } .search_filter_panel_wrap .inner.active ul { display : block } .search_filter_panel_wrap li a { position : relative; font-size : 16px; padding : 5px 5px 5px 10px } .search_filter_panel_wrap li a:before { content : ''; width : 3px; height : 3px; background : #111; position : absolute; top : calc(50% - 1.5px); left : 0; } .search_filter_panel_wrap li a span { color : #888; font-size : 16px } .search_filter_panel_wrap li a img { display : none } .search_filter_panel_wrap li.active span { display : none } .search_filter_panel_wrap li.active img { display : inline-block; position : relative; top : 3px; margin-left : 5px } .filter_select_wrap { position : relative; border-top : 1px solid #dbdbdb; border-bottom : 1px solid #dbdbdb; padding : 15px 40px 15px 160px; background-color : #f9f7f6; font-size : 16px } .filter_select_wrap .reset_btn { position : absolute; top : 10px; left : 40px; } .filter_select_wrap .reset_btn img { top : 0; margin : 0 } .filter_select_wrap a { font-size : 16px; display : inline-block } .filter_select_wrap a img { position : relative; top : 2px; margin : 0 0 0 5px } .filter_select_wrap i { border-color : #adadad; position : relative; top : -2px; margin : 0 5px; border-width : 0 1px 1px 0; } .has_search_filter .sub_title { margin : 50px 0 15px 0 } .has_search_filter .sub_title span { border-radius : 20px; background-color : #0033a5; color : #fff; padding : 5px 10px; font-size : 14px; position : relative; top : -4px; margin : 0 0 0 5px } .has_search_filter .sub_title a { background-color : #fff; border : 1px solid #dbdbdb; line-height : 40px; padding : 0 20px; color : #111 } .has_search_filter .sub_title a:hover { background-color : #f7f7f7 } .has_search_filter .collection_list_wrap ul li { flex-basis : 33.33%; } .has_search_filter .collection_list_wrap a { margin : 0 20px } .has_search_filter .collection_list_wrap a:hover { border-radius : 0 } .has_search_filter .thumbnail_list_wrap .wrap > div { padding : 0 20px } .has_search_filter .quotation_bbs_wrap { display : flex; flex-direction: row; margin : 0 -20px } .has_search_filter .quotation_bbs_wrap > .quotation_wrap { flex-basis: 50%; margin : 0 20px } #siteMapMenuDiv { display : flex; flex-direction : row; flex-wrap : wrap; } #siteMapMenuDiv > li { flex-basis : calc(25% - 20px); border-top : 2px solid #7a563c; margin : 20px 10px } #siteMapMenuDiv .sitemap_1depth_title { position : relative; text-align : left; font-size : 30px; font-weight: 500; padding : 10px 25px; border-radius: 0; border-bottom : 1px solid #dbdbdb; } #siteMapMenuDiv .sitemap_1depth_title span { display : none; position : absolute; top : 0; right : 0; z-index : 3; color : transparent; width : 100px; height: 100%; background : url('/resource/templete/manpa/img/main/ic_minus.png') no-repeat right 20px center / 20px 20px } #siteMapMenuDiv .sitemap_1depth_title span.open { display : block; background : url('/resource/templete/manpa/img/main/ic_plus.png') no-repeat right 20px center / 20px 20px } #siteMapMenuDiv .sitemap_1depth_item:nth-child(6) span, #siteMapMenuDiv .sitemap_1depth_item:nth-child(7) span, #siteMapMenuDiv .sitemap_1depth_item:nth-child(6) ul, #siteMapMenuDiv .sitemap_1depth_item:nth-child(7) ul { display : none !important } #siteMapMenuDiv > li.active span.open { display : none } #siteMapMenuDiv > li.active span.close { display : block } #siteMapMenuDiv .sitemap_2depth { display : none; margin-top : -1px; padding : 10px 0; overflow : hidden } #siteMapMenuDiv > li.active .sitemap_2depth { display : block } #siteMapMenuDiv .sitemap_2depth a { padding : 10px 20px; font-size : 20px } .mission_wrap { padding : 50px 0 } .mission_wrap dl { display : table; table-layout: fixed; width : 100%; } .mission_wrap dl dt, .mission_wrap dl dd { display : table-cell; vertical-align: middle; } .mission_wrap dt { font-size : 36px; color : #7a563c; font-weight: bold; width : 240px; background : url('/resource/templete/manpa/img/sub/ic_mission_01.png') no-repeat right 40px center } .mission_wrap dl:nth-child(2) dt { background : url('/resource/templete/manpa/img/sub/ic_mission_02.png') no-repeat right 40px center } .mission_wrap dd div { background : #726659; max-width : 640px; border-radius : 100px; color : #fff; font-size : 32px; font-weight: 600; text-align : center; padding : 30px 0; letter-spacing : -2px; line-height : 120% } .mission_wrap dl:last-child dd div { background-color : #7a563c } .mission_wrap dd:nth-child(2) { max-width : 680px; padding-right : 10px } .mission_wrap dd:last-child { color : #666666; font-size : 20px; padding-left : 90px; background : url('/resource/templete/manpa/img/sub/ic_mission_01.png') no-repeat left 10px center } .mission_wrap ul { position : relative; overflow : hidden } .mission_wrap ul:after { content : ''; position : absolute; width : 430px; height : 430px; background-color : #e6e6e6; top : 50%; left : 50%; transform : translate(-50%, -50%); border-radius : 100%; z-index : -1 } .mission_wrap ul li { float : left; width : 240px; margin : 50px 0; overflow : hidden } .mission_wrap ul li:nth-child(2n) { float : right } .mission_wrap ul li p { position : relative; border : 1px solid #805f46; border-radius : 100%; text-align : center; width : 240px; padding : 75px 0; margin : 0 auto; vertical-align: middle; font-size : 32px; color : #7a563c; font-weight: bold; letter-spacing : -2px; background : #fff } .mission_wrap ul span { display : block; font-size : 23px; margin-top : 5px } .rule_wrap { display : flex; flex-wrap : wrap; justify-content: space-between; margin : 30px -20px } .rule_wrap .wrap { flex-basis: calc(25% - 40px); margin : 20px; border : 1px solid #f7f3f0; border-radius : 20px; overflow : hidden } .rule_wrap .top { padding : 35px; } .rule_wrap .top h2 { font-size : 26px; height: 80px; line-height : 120% } .rule_wrap .top span { color : #666666; font-size : 20px } .rule_wrap .inner { position : relative; height : 280px } .rule_wrap .inner * { position : static } .rule_wrap .inner .uploaded-item-cell { display : inline-block !important } .rule_wrap .inner p { position : absolute; bottom : 0; left : 0; width : 100%; padding-bottom : 30px; text-align : center } .rule_wrap .inner p a { display : inline-block; background-color : #eadace; color : #7a563c; font-size : 16px; width : 120px; line-height : 40px; border-radius : 50px; font-weight: bold; } .rule_wrap .inner p a + a { margin-left : 20px } .rule_wrap .inner p a img { position : relative; top : 3px; margin-left : 10px } .rule_wrap .noImg { position : relative; background: rgb(255,251,247); background: linear-gradient(307deg, rgba(255,251,247,1) 0%, rgba(251,243,233,1) 50%, rgba(241,228,215,1) 100%); } .rule_wrap .noImg:before { content : url('/resource/templete/manpa/img/common/ic_thumb_01.png'); position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%) } .rule_wrap .inner > p { width : 50% } .rule_wrap .uploaded-item-holder { position : absolute !important; bottom : 0; width : 100% } .rule_wrap .uploaded-item-cell { position : absolute !important; bottom : 0; width : 50% } .rule_wrap .uploaded-item-holder .uploaded-item-cell:nth-child(6) { left : 0 } .rule_wrap .uploaded-item-holder .uploaded-item-cell:nth-child(7) { left : 50% } .thumbnail_list_wrap2 dl { overflow : hidden; border-radius : 20px; border : 1px solid #dbdbdb } .thumbnail_list_wrap2 dd { padding : 20px 30px } .thumbnail_list_wrap2 a { display : inline-block; background-color : #efe4da; color : #7a563c; font-size : 16px; width : 165px; line-height : 40px; border-radius : 50px; font-weight: bold; box-shadow : none !important; text-align : center; border : none !important } .thumbnail_list_wrap2 dl:hover h2 b { color : #7a563c; background-repeat: no-repeat; background-position: bottom left; background-image: linear-gradient(#efe4da, #efe4da); background-size: 100% 30%; animation-name: textHighlight; animation-duration: 1s; animation-direction: alternate; } .thumbnail_list_wrap2 a + a { margin-left : 20px } .thumbnail_list_wrap2 a img { position : relative; top : 3px; margin-left : 10px } .thumbnail_list_wrap2 dd div { text-align : right; margin-top : 20px } #ruleDetailModal .modal_title, #authorTeamModal .modal_title { margin-top : 20px; font-size : 40px; margin-bottom : 10px } #ruleDetailModal .modal_inner, #authorTeamModal .modal_inner { width : 1200px } #ruleDetailModal .inner, #authorTeamModal .inner { border : 1px solid #dbdbdb; border-radius : 20px; padding : 20px; font-size : 16px; color : #a7a7a7 } #authorTeamModal ul { margin-top : 10px; margin-bottom : 40px } #authorTeamModal li { position : relative; padding-left : 15px } #authorTeamModal li:before { content : ''; width : 6px; height : 6px; background : #222; position : absolute; top : 10px; left : 0; border-radius : 100% } #authorTeamModal h4 { position : relative } #authorTeamModal h4 a { position : absolute; bottom : 0; right : 0; background-color : #efe4da; color : #7a563c; font-size : 16px; width : 125px; line-height : 40px; border-radius : 50px; font-weight: bold; text-align : center } #authorTeamModal h4 a img { position : relative; top : 3px; margin-left : 10px } #authorTeamModal .scroll { margin-top : 20px; border : 1px solid #dbdbdb; padding : 20px; height: calc(100% - 350px); border-radius : 10px } .doc_txt p { margin : 40px 0 20px 0 } .doc_txt b { font-weight: bold; } .doc_txt a { display : inline-block } .doc_txt a:hover { text-decoration: underline; } .doc_txt .doc_box { border : 1px solid #111; padding : 25px 50px } .doc_txt .doc_box ul { overflow : hidden } .doc_txt .doc_box ul li { float : left; width : 50%; margin : 5px 0 } .doc_txt h4 { margin : 40px 0 0 0; font-size : 20px } .doc_txt h4 + p { margin-top : 10px } .doc_txt table thead { background-color : #f1efe8; border-top : 1px solid #7a563c } .doc_txt table thead th { color : #7a563c } .doc_txt table th, .doc_txt table td { text-align : center; border : 1px solid #dbdbdb; font-weight: 500; padding : 10px 0; } .doc_txt table th:first-child, .doc_txt table td:first-child { border-left : none } .doc_txt table th:last-child, .doc_txt table td:last-child { border-right : none } .doc_txt table + table { margin-top : 20px } .doc_txt > ul { padding-left : 100px } .api_step_wrap { display : flex; flex-direction: row; align-items: center; } .api_step_wrap li { width : 25%; border-radius: 10px; background-color : #f7f2ef; text-align : center; font-size : 20px; color : #666666; height : 315px; padding : 50px 0 0 0 } .api_step_wrap li p { display : flex; height : 100px; align-items: center } .api_step_wrap li h3 { font-size : 26px; color : #111; margin-bottom : 10px } .api_step_wrap li p img { margin : 0 auto } .api_step_wrap li:nth-child(2n) { width : 80px; background : none; height : inherit } .no_data_txt { text-align : center; padding : 50px 20px } .subtxt { display : inline-block; position : relative; top : -12px; font-size : 14px; color : blue; font-weight: bold;} @media ( max-width : 1600px ) { .author_history_wrap { padding-left : 150px } #historySideMenu { left : 50px } } @media ( max-width : 1500px ) { .mission_wrap dd div, .mission_wrap ul li p { font-size : 28px } .mission_wrap dt { font-size : 30px } .mission_wrap dd:last-child { background-position : left 20px center } .mission_wrap dd:last-child { font-size : 18px } } @media ( max-width : 1450px ) { .author_history_wrap { padding-left : 150px } #historySideMenu { left : 50px } .author_history_wrap .top > div { width : 60% } .author_history_wrap .slide_area { width : 40%; max-width : 430px } .author_history_wrap dt .slide_area { width : 100% } .thumbnail_list_wrap h2 { font-size : 20px } .exhibition_view_wrap .left { width : 800px } .exhibition_view_wrap .top > .right { width : calc(100% - 850px) } .myinfo_wrap { width : 670px } #siteMapMenuDiv .sitemap_1depth_title { font-size : 25px } #siteMapMenuDiv .sitemap_2depth a { font-size : 18px } .api_step_wrap li { font-size : 18px; } .api_step_wrap li h3 { font-size : 24px } } @media ( max-width : 1300px ) { .container { padding : 35px 20px } .title { font-size : 30px !important } .author_history_wrap .slide_area { max-width : 380px } .seach_filter_select_wrap.active { padding : 35px } .search_filter_wrap dl dd { width : 20% } .keyword_wrap ul li { width : 33.33% } .myinfo_wrap { padding : 35px } .mypage_top_wrap .default div { margin-right : 30px } .mypage_top_wrap .default { padding : 40px 20px } .mission_wrap dt { font-size : 25px; width : 200px } .mission_wrap dd div, .mission_wrap ul li p { font-size : 24px } .mission_wrap ul li { width : 200px } .mission_wrap ul li p { width : 200px } .mission_wrap ul:after { width : 400px; height : 400px } #ruleDetailModal .modal_inner { width : 1000px } .doc_txt table th, .doc_txt table td { font-size : 16px } } @media ( max-width : 1200px ) { .author_side_nav { display : none } .seach_option > * { font-size : 14px } .seach_option select { width : 100px } .seach_option input { width : 200px } .seach_option input.datepicker { width : 120px } .author_list_wrap .wrap > div { width : calc(50% - 40px) } .movie_thumb .swiper-slide { width : 33.33% } .movie_slide_wrap { padding : 35px } .author_list_wrap2 .wrap > div { width : calc(33.33% - 40px ) } #historySideMenu { display : none } .author_history_wrap { padding-left : 0 } .author_history_wrap .top > div { float : none; width : 100% } .author_history_wrap .has_year > p { position : relative; text-align: left; font-size : 80px } .author_history_wrap .top { padding : 50px 0 } .history_list .has_year > p { top : 0 } .author_history_wrap .slide_area { width : 100%; max-width : 100% } .author_history_wrap .has_year .top_txt { padding-top : 30px } .author_history_wrap .hide_txt_wrap { padding-bottom : 30px } .author_history_wrap .top_txt h3 { font-size : 34px } .history_list dl, .history_list dl dt, .history_list dl dd { display : block; width: 100% } .history_list dl { margin : 50px 0 } .history_list dl dt p { background-color : #eee !important; background-size: contain !important; border : 1px solid #ccc } .history_list dl dd { padding-left : 0; padding-top : 30px } .author_explain_wrap .explain_title { font-size : 30px } .thumbnail_list_wrap dl dt { width : 200px; height : 200px } .thumbnail_list_wrap dl dt p { height : 100% } .search_filter_wrap .top div a { margin : 5px; font-size : 16px } .exhibition_view_wrap .left, .exhibition_view_wrap .top > .right { width : 48% !important } .keyword_wrap ul li { width : 50% } .collection_list_wrap ul li { flex-basis : 33.33% } .web_magazine_body .first h2 { font-size : 50px } .post_title { font-size : 35px } .post_flex div h2 { font-size : 26px } .bbs_detail_post dt { font-size : 50px } .post_btm_wrap dt { font-size : 18px } .bbs_series_list ul li { flex-basis: 33.33%; } .gusul_detail_wrap dl dt, .gusul_detail_wrap dl dd { font-size : 18px } .gusul_detail_wrap dl dt { width : 200px } .gusul_scroll p { font-size : 18px } .gusul_scroll { font-size: 16px } .gusul_author h3 { font-size : 20px } .gusul_file_title p a { padding : 0 15px; font-size : 15px } .gusul_file_title p a:before { top : 4px; left : -1px } .gusul_file_wrap ul a { padding : 40px 30px 40px 155px } .gusul_file_wrap ul p { left : 30px } .gusul_file_wrap ul h2 { font-size : 18px } .api_wrap .scroll { font-size : 16px } .checkbox input { width : 18px; height : 18px } .api_wrap dl dt { font-size : 17px; width : 250px } .api_wrap dl label, .api_wrap dl select { font-size : 16px } .faq_wrap .list a, .faq_wrap .list.active .faq_reply { font-size : 16px } .info_detail_wrap div h2 { font-size : 22px } .myinfo_wrap { position : relative } .mypage_top_wrap .default { float : none; justify-content: center; } .myinfo_wrap { width : 100% } .myinfo_wrap h2 { font-size : 26px } .myinfo_wrap p.mypage_email { top : 0 } .mypage_top_wrap .default div a { display : inline-block } .mypage_tab_link { margin : 40px 0 } .mypage_nav_wrap a { font-size : 18px; margin : 0 10px } #membershipAddModal dl dt { width : 120px; font-size : 15px } #membershipAddModal dl dt label { font-size : 15px } #membershipAddModal dd > p { flex-wrap : wrap } #membershipAddModal dd > p span { flex-basis: 100%; } .reset_filter_btn button { width : 180px } .seach_filter_nav li a { font-size : 16px } .search_page_tab_link { margin : 30px -10px -20px -10px } .search_page_tab_link a { font-size : 20px; margin : 0 10px } .thema_title, .thema_title span { font-size : 20px } .thema_type02 .type_select a { font-size : 14px } .thema_search_opt .inner { flex-basis: calc(33.33% - 10px); margin : 5px } .thema_search_opt h2 { margin-bottom : 10px; font-size : 16px } .thema_search_opt .input_wrap input { font-size : 15px } #siteMapMenuDiv > li { flex-basis: calc(33.33% - 20px); } #siteMapMenuDiv .sitemap_1depth_title { font-size : 22px } .mission_wrap dl, .mission_wrap dl dt, .mission_wrap dl dd { background : none !important } .mission_wrap dt { width : 130px } .mission_wrap dd:last-child { padding : 0 0 0 20px } .mission_wrap dd div, .mission_wrap ul li p { font-size : 22px; padding : 60px 0 } #ruleDetailModal .modal_title { font-size : 30px } .has_search_filter { padding : 0 30px } .has_search_filter .search_page_tab_link { margin : 60px -10px 20px -10px } .has_search_filter .search_page_tab_link a { font-size : 20px; margin : 0 10px } .search_filter_panel_wrap { position : fixed; top : 100px; right : -200px; width : 200px; height : calc(100% - 120px); } .search_filter_panel_wrap.active { right : 0; background-color: #fff; } .search_filter_panel_wrap > div { box-shadow: none; height : 100%; overflow : auto; } .search_filter_panel_wrap button { display : block; width : 30px; padding : 10px 5px; background-color : #205adb; color : #fff; position : absolute; top : 0; left : -30px; border-radius : 5px 0 0 5px; transition : none; line-height : 110%; word-break: break-all; } .search_filter_panel_wrap .inner > a { font-size : 16px } .has_search_filter .collection_list_wrap ul li { flex-basis : 50%; margin : 20px 0 } } @media ( max-width : 1050px ) { .seach_input_wrap { position : relative; margin : 0; padding-right : 130px } .seach_input_wrap button { position : absolute; top : 0; right : 0 } .seach_option #seacInput { width : 100% } .author_detail_view .top > div { float : none; width : 100%; height : 400px } .author_detail_view .top > div:first-child { width : 100% } .author_detail_view .top .author_slide { height : 400px } .author_detail_view .info_area { padding : 35px } .author_detail_view .info_area h2 { font-size : 30px } .author_detail_view .info_area h2 span { font-size : 24px } .author_detail_view .txt p { font-size : 18px } .author_detail_view .txt, .author_detail_view a { font-size : 16px } .author_detail_view .info_area { height: auto; padding-bottom : 30px } .author_detail_view a { margin-top : 10px } .movie_txt_wrap { padding : 15px; font-size : 15px } .author_list_wrap2 .wrap > div { width : calc(50% - 40px ) } .author_list_wrap2 div.over h2 { font-size : 18px } .author_list_wrap2 a > p { height : 280px } .thumbnail_list_wrap .wrap > div { float : none; width : 100%; padding : 0; margin : 20px 0 } .exhibition_view_wrap .left, .exhibition_view_wrap .top > .right { float : none; width : 100% !important } .exhibition_view_wrap .top > .right { margin-top : 20px } .sub_title { font-size : 22px; margin-bottom : 15px } .sub_title_line p { font-size : 16px } .exhibition_tab_wrap a { padding : 7px 18px; font-size : 16px } .exhibition_tab_wrap a + a { margin : 0 0 0 5px } .web_magazine_body { overflow : auto } .web_magazine_body section { padding : 20px } .web_magazine_body .first { padding-top : 100px } .web_magazine_body .first .inner { top : 0; left : 0; transform : none; width : 100%; height : 100%; padding : 120px 20px 20px 20px; overflow: auto; } .web_magazine_body .first h2 { font-size : 40px; margin : 30px 0 } .web_magazine_body .first a { margin : 0 auto 20px } .web_magazine_body .first .txt_box { max-width : 100% } .web_magazine_body section .scroll { font-size : 16px } .web_magazine_body .second .txt_box2 { padding : 20px } .web_magazine_body .third .container { display : block } .web_magazine_body .third .container p { height : 250px } .web_magazine_body .third .container > div { border-radius : 0 } .web_magazine_body .third .container > div:last-child, .web_magazine_body .fourth .inner { height : 350px } .web_magazine_body .third .container .scroll { height : auto; } .web_magazine_body .fifth .top { flex-direction: column; margin : 0 } .web_magazine_body .fifth .top div { flex-basis: 100%; margin : 10px 0; height : 100px; width : 100% } .web_magazine_body .fifth .inner { padding : 30px; height : auto } .web_magazine_body .fifth .container { height : auto } .web_magazine_body .video { padding-top : 20px; min-height : inherit } .swipder_3d_slide_wrap .swiper-slide { width : 500px; height : 530px } .swipder_3d_slide_wrap .swiper-slide div { height : 500px } .swipder_3d_slide_wrap .swiper-3d-prev { left : 20px } .swipder_3d_slide_wrap .swiper-3d-next { right : 20px } .gusul_author > div > p { padding : 10px 25px; font-size : 17px } .gusul_file_wrap ul { margin : 10px -10px } .gusul_file_wrap ul li { flex-basis: 100%; padding : 10px } .faq_wrap .list a { padding-left : 80px; background-position : left 30px center } .faq_wrap .list .faq_reply { padding-left : 80px; background-position : left 30px top 50px } .reset_filter_btn button { width : 150px; line-height : 40px } .thema_type04_map_wrap { display : none } .mission_wrap { padding : 0 } .mission_wrap dl, .mission_wrap dl dt, .mission_wrap dl dd { display : block; width : 100% !important; max-width : 100% !important } .mission_wrap dl { margin : 50px 0 } .mission_wrap dl dd { text-align : center } .mission_wrap dd div { margin : 20px auto } .mission_wrap dd:last-child br { display : none } .mission_wrap ul:after { display : none } .mission_wrap ul { display : flex; flex-direction: row; justify-content: space-between; } .mission_wrap ul li { float : none !important } #ruleDetailModal .modal_inner { width : 80% } .thumbnail_list_wrap .wrap { margin : 0 } .doc_txt table th, .doc_txt table td { font-size : 14px } } @media ( max-width : 1100px ) { .api_step_wrap li { font-size : 16px; } .api_step_wrap li h3 { font-size : 20px } } @media ( max-width : 965px ) { .api_step_wrap { display : block } .api_step_wrap li { margin : 0 auto; font-size : 16px; } .api_step_wrap li h3 { font-size : 20px } .api_step_wrap li:nth-child(2n) { width : 100%; padding : 10px 0 } .api_step_wrap li:nth-child(2n) img { transform : rotate(90deg) } } @media ( max-width : 900px ) { .myinfo_wrap { flex-wrap : wrap } .myinfo_wrap p.membership_rank { flex-basis: 100%; } .myinfo_wrap p.membership_rank a { display : inline-block; margin-left : 60px; font-size : 15px } #membershipAddModal .modal_inner { max-width : 90%; width : 85% } .mission_wrap ul { flex-wrap : wrap } .mission_wrap ul li { flex-basis: 50%; margin : 10px 0 } .title { font-size : 22px !important } .page_paging { text-align : left } .page_mobile { display : none } } @media ( max-width : 850px ) { .search_filter_wrap .top { padding : 35px 15px 15px 15px } .search_filter_wrap .top > span { position : relative; top : -15px; left : 15px; display : block; } .search_filter_wrap dl { padding : 0 } .search_filter_wrap dl dt { position : relative; padding : 0 } .search_filter_wrap dl dt:before { display : none } .search_filter_wrap .top > a { width : 40px; height : 40px; line-height : 40px } .keyword_wrap ul { margin : 0 } .keyword_wrap ul li { float : none; width : 100% } .collection_list_wrap ul li { flex-basis : 50% } .post_flex { display : block } .post_flex { margin : 30px 0 } .post_flex img { display : block; margin : 0 auto } .post_flex div { padding : 0 } .post_flex .post_flex_img { margin-bottom : 30px } .post_txt { margin : 100px 0 } .post_flex + .post_flex { margin-top : 100px } .post_flex div + .post_flex_img { margin-top : 30px } .post_list_img.flex { flex-direction: column; } .post_list_img li { flex-basis: 100%; } .bbs_detail_post dt { font-size : 40px; width : 60px } .post_btm_wrap dl, .post_btm_wrap dt, .post_btm_wrap dd { display : block; width : 100% } .post_btm_wrap dt { padding : 0 0 20px 0; font-size : 20px } .bbs_series_list ul li { flex-basis: 50%; } .api_wrap dl dt { width : 200px } .info_detail_wrap { flex-direction: column; margin : 60px 0 } .info_detail_wrap div:nth-child(odd) { width : 315px; margin : 0 auto } .info_detail_wrap div:nth-child(even) img { transform : rotate(90deg); } .seach_filter_nav li { width : 33.33% } .search_page_tab_link a { font-size : 16px } .search_page_tab_link a span { font-size : 14px } .thema_type01 input { font-size : 14px } .thema_type04 { flex-wrap : wrap } .thema_type04 p { flex-basis: 49%; } .thema_type04 .reset_filter_btn { flex-basis: 100%; margin : 20px 0 0 0 } #siteMapMenuDiv > li { flex-basis: calc(50% - 20px); } .has_search_filter .search_page_tab_link a { font-size : 18px; } .search_page_tab_link a span { top : -1px; padding : 1px 8px; font-size : 14px } .has_search_filter .quotation_bbs_wrap { flex-wrap : wrap } .has_search_filter .collection_list_wrap ul li, .has_search_filter .quotation_bbs_wrap > .quotation_wrap { flex-basis: 100%; margin : 10px } } @media ( max-width : 700px ) { .seach_option_wrap { padding : 15px } .seach_option_wrap > span { display : none } .seach_option { display : block; position : relative; padding-left : 90px } .seach_input_wrap { padding-right : 110px; width : 100% } .seach_input_wrap button { width : 90px } .seach_option select { position : absolute; top : 0; left : 0; width : 80px } .movie_thumb .swiper-slide { width : 50% } .author_list_wrap2 .wrap > div { float : none; width : 100%; margin : 20px 0 } .author_list_wrap2 .wrap { margin : 0 } .web_magazine_body .first h2 { font-size : 30px; margin : 30px 0 } .gusul_detail_wrap dl, .gusul_detail_wrap dl dt, .gusul_detail_wrap dl dd { display : block; width : 100% } .gusul_detail_wrap dl dd { margin : 10px 0 } .gusul_author { flex-direction: column; } .gusul_author > div { flex-basis: 100%; margin : 20px 0 } .author_list_wrap .wrap > div { float : none; width :calc(100% - 40px) } .myinfo_wrap { padding : 25px } .myinfo_wrap > span { display : none } .myinfo_wrap h2 { padding-left : 0 } .myinfo_wrap p.membership_rank a { margin-left : 0 } .mypage_top_wrap .default { display : block; padding : 20px; text-align : center } .mypage_top_wrap .default div { margin : 0 0 20px 0; } .mypage_top_wrap .default p a, .mypage_top_wrap .default > a { display : inline-block } .mypage_top_wrap .default > a { margin-top : 10px } .thema_search_opt .inner { flex-basis: calc(50% - 10px); } .thema_search_opt .scroll { height : 150px } } @media ( max-width : 600px ) { .collection_list_wrap ul li { flex-basis : 100% } .collection_list_wrap ul li a { margin : 10px 20px } .bbs_series_list ul { margin : 20px 0 } .bbs_series_list ul li { flex-basis: 100%; padding : 10px } .bbs_detail_date dt { width : 50px } .bbs_detail_date dd { padding : 0 10px } .api_wrap dl, .api_wrap dl dt, .api_wrap dl dd { display : block } }