/* font */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css"); @font-face { font-family: 'Cafe24Dangdanghae'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.2/Cafe24Dangdanghae.woff') format('woff'); font-weight: normal; font-style: normal; } /* common */ body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button { margin: 0; padding: 0; -webkit-text-size-adjust: none; } body,ul,li,p,div,input,textarea,select,table,button { font-size: 18px; line-height: 160%; font-family: 'Pretendard Variable',굴림,Gulim,Helvetica,AppleGothic,Sans-serif; } @media (max-width: 1200px) { body,ul,li,p,div,input,textarea,select,table,button { font-size: 16px; } } img,fieldset,button { border: 0; } html { min-height: 100%; } body { position: relative; width: 100%; height: 100%; background-color: #ffffff; color: #232a2f; word-wrap: break-word; word-break: break-all; overflow-x: hidden; } img { max-width: 100%; border: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; } ul,ol { list-style: none; } a { color: #232a2f; text-decoration: none; cursor: pointer; } table { border-collapse: collapse; } div,li,span,input,textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } iframe { border: none; } b { font-weight: 600; } .cleardiv { clear: both; font-size: 0; line-height: 0; } .blankdiv { float: left; height: 10px; } .lowheight { font-size: 0; line-height: 0; } .hiddendiv { display: none; } .pc_inline { display: inline; } .mobile_inline { display: none; } .pc_block { display: block; } .mobile_block { display: none; } #zonePageContent .mobile_block { display: block; } .maxwidth1600 { max-width: 1600px; margin: 0 auto; } .maxwidth1200 { max-width: 1200px; margin: 0 auto; } .maxwidth1150 { max-width: 1150px; margin: 0 auto; } .maxwidth1000 { max-width: 1000px; margin: 0 auto; } .minwidth800 { min-width: 800px; } .minwidth600 { min-width: 600px; } .minwidth400 { min-width: 400px; } .ofx_auto { overflow-x: auto; } .new_scroll::-webkit-scrollbar { width: 10px; height: 10px; } .new_scroll::-webkit-scrollbar-thumb { background-color: #212121; border-radius: 3px; } .new_scroll::-webkit-scrollbar-track { background-color: #f9f9f9; border-radius: 3px; } /* 상단 메뉴 영역 */ .header { position: relative; width: 100%; height: 135px; z-index: 100; } .header .menudiv { position: relative; } .header .menudiv .logo { float: left; width: 250px; margin-top: 32px; } .header .menudiv .menu { float: left; width: calc( 100% - 250px ); /*margin-top: 48px;*/ text-align: right; z-index: 300; } .header .menudiv .menu > ul { display: inline-block; } .header .menudiv .menu > ul .pc { display: block; } .header .menudiv .menu > ul .mobile { display: none; } .header .menudiv .menu > ul > li { float: left; position: relative; padding-top: 48px; text-align: center; } .header .menudiv .menu > ul > li.on { background: #f3ebccaa; } .header .menudiv .menu > ul > li.active { } .header .menudiv .menu > ul > li > a { display: inline-block; padding: 0 40px; color: #575757; line-height: 42px; font-size: 18px; } .header .menudiv .menu > ul > li:last-child > a { /*padding-right: 12px;*/ } .header .menudiv .menu > ul:after { clear: both; display: block; content: ''; } .header .menudiv .menu > ul > li > ul { display: none; width: 100%; height: 285px; padding: 60px 0 0 0; } .header .menudiv .menu > ul > li.pc > ul { height: 284px; } .header .menudiv .menu > ul > li > ul.on { display: block; } .header .menudiv .menu > ul > li > ul > li { text-align: center; } .header .menudiv .menu > ul > li > ul > li > a { color: #4d535f; line-height: 30px; font-size: 15px; } .header .menudiv .menu_btn { display: none; z-index: 200; } .header .menudiv:after { clear: both; display: block; content: ''; } .menu_bg { display: none; position: absolute; width: 100%; height: 363px; background: #d5d5d1; /*border-top: 1px solid #d0d0d0;*/ z-index: 99; } .menu_bg.on { display: block; } .menu_bg .menu_sub_bg { position: relative; height: 363px; background: url('../img/menu_sub_bg.png') left bottom no-repeat; z-index: 100; } .menu_bg .menu_bg_bottom { position: absolute; bottom: 0; width: 100%; height: 63px; background: #b4bcc9; z-index: 10; } .menu_bg_mobile { display: none; z-index: 99; } /* 상단 이미지 영역 */ .mid_image_bg { position: relative; background: #163758; } .mid_image { width: 100%; height: 532px; } .mid_image.pc { display: block; position: relative; } .mid_image.pc .mid_image_in { position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; } .mid_image.pc .mid_image_in.mid_image_in1 { } .mid_image.pc .mid_image_in.mid_image_in2 { left: 20px; } .mid_image.pc .mid_image_in.mid_image_in3 { top: -20px; } .mid_image.pc .mid_image_in.mid_image_in4 { } .mid_image.pc .mid_image_in.mid_image_in5 { } .mid_image.mobile { display: none; position: relative; } .mid_image.mobile .mid_image_in { position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; } #mid_image_sub.mid_image { height: 300px; opacity: 0; } /* 서브 페이지 서브 메뉴 */ .submenu { position: relative; width: 100%; height: 63px; background: #698081; /*overflow: hidden;*/ z-index: 50; } .submenu .submenu_in { height: 100%; } .submenu .submenu_in .submenu_list { text-align: center; overflow-y: auto; white-space: nowrap; } .submenu .submenu_in .submenu_list li { display: inline-block; } .submenu .submenu_in .submenu_list li a { display: inline-block; padding: 0 15px; color: #ffffff; font-size: 17px; line-height: 63px; } .submenu .submenu_in .submenu_list li:after { display: inline-block; content: '|'; font-size: 17px; color: #dddddd; line-height: 63px; opacity: 0.5; } .submenu .submenu_in .submenu_list li:last-child:after { display: none; } .submenu .submenu_in:after { clear: both; display: block; content: ''; } /* 메인페이지 */ .main_div { position: relative; width: 100%; } .main_div.pc { display: block; } .main_div.mobile { display: none; } .main_div.main_icon { background: #476770; line-height: 0; text-align: center; } .main_div.main_icon ul { display: inline-block; } .main_div.main_icon ul li { float: left; position: relative; } .main_div.main_icon ul:after { clear: both; display: block; content: ''; } .main_div.main_icon_bottom_bar { height: 19px; background: #bcbbb6; } .main_div.bbs_new { } .main_div.bbs_new > ul.last_bbs > li { float: left; width: 33.33333333333333%; padding: 20px 3% 30px; } .main_div.bbs_new > ul.last_bbs > li .bbs_title { position: relative; color: #446e6a; font-size: 24px; font-weight: bold; text-align: center; margin: 10px 0; } .main_div.bbs_new > ul.last_bbs > li .bbs_title span.circle { color: #bcbbb6; } .main_div.bbs_new > ul.last_bbs > li .bbs_title span.more { position: absolute; right: 15px; top: 0; color: #707070; font-size: 14px; font-weight: normal; } .main_div.bbs_new > ul.last_bbs:after { clear: both; display: block; content: ''; } .main_div.bbs_new .last_photo { background: #bcbbb6; padding: 40px 0; } .main_div.bbs_new.mobile .last_bbs { padding: 10px 5%; } .main_div.bbs_new.mobile .last_bbs .bbs_title { position: relative; font-family: 'Cafe24Dangdanghae'; color: #446e6a; font-size: 18px; font-weight: bold; text-align: center; margin: 0 0 10px 0; padding: 0 7% 0 0; } .main_div.bbs_new.mobile .last_bbs .bbs_title .main_bbs_icon { width: 18px; } .main_div.bbs_new.mobile .last_bbs .bbs_title span.more { position: absolute; right: 3%; top: 0; font-family: 'Pretendard-Regular'; color: #707070; font-size: 12px; font-weight: normal; } .main_div.bbs_new.mobile .last_photo { position: relative; padding: 15px 0; } .main_div.bbs_new.mobile .last_photo .xe-widget-wrapper { position: relative; z-index: 50; } .main_div.bbs_new.mobile .last_photo .last_photo_bg { position: absolute; width: 100%; height: 60px; top: 0px; background: #bcbbb6; z-index: 49; } /* 본문영역 */ .content_div { position: relative; width: 100%; padding: 60px 0 40px; } .content_div .page_title { text-align: center; } .content_div .page_title span { display: inline-block; font-family: 'Cafe24Dangdanghae'; font-size: 32px; color: #163758; padding: 0 65px 10px 65px; border-bottom: 8px solid #d0d0d0; margin-bottom: 50px; } .content_div .page_img { text-align: center; margin-bottom: 50px; } .content_div .s_title { font-size: 24px; line-height: 100%; color: #000000; padding: 10px 0; text-align: center; background: #f0e9e2; margin-bottom: 50px; } .content_div .s_title.t2 { background: #dce3dc; } .content_div .fl_box { } .content_div .fl_box .left { float: left; } .content_div .fl_box .left.w25p { width: 25%; } .content_div .fl_box .left.w30p { width: 30%; } .content_div .fl_box .left.w49p { width: 49%; } .content_div .fl_box .left.w70p { width: 70%; } .content_div .fl_box .left.w75p { width: 75%; } .content_div .fl_box .left.mgr2p { margin-right: 2%; } .content_div .fl_box .right { float: right; } .content_div .fl_box:after {clear: both; display: block; content: ''; } .content_div .tbl { border-collapse: collapse; } .content_div .tbl tr th, .content_div .tbl tr td { font-weight: normal; padding: 15px 0; border-bottom: 1px solid #aaaaaa; text-align: center; } .content_div .tbl tr th { background: #f5f5f5; } .content_div .tbl tr:first-child th, .content_div .tbl tr:first-child td { border-top: 7px solid #e3e3e3; } .content_div .tbl tr:last-child th, .content_div .tbl tr:last-child td { border-bottom: 1px solid #000000; } .content_div .tbl tr .bb1px_black { border-bottom: 1px solid #000000; } .content_div .pdlr5p { padding-left: 5%; padding-right: 5%; } .content_div .pdt30px { padding-top: 30px; } .content_div .mgb30px { margin-bottom: 30px; } .content_div .mgb50px { margin-bottom: 50px; } .content_div .aligncenter { text-align: center; } .content_div .con_title { padding: 10px 5%; background: #f0e4d3; } .content_div .con_title.t2 { background: #f0d4d3; } .content_div .highlightbox { display: inline-block; font-size: 24px; line-height: 100%; padding: 30px 80px; background: #f4f4f4; border: 1px solid #f0e4d3; } .content_div .highlightbox.t2 { font-size: 18px; line-height: 100%; padding: 20px 60px; } .content_div ul.disc { padding-inline-start: 20px; } .content_div ul.disc li { list-style: disc; } .content_div ul.decimal { padding-inline-start: 20px; } .content_div ul.decimal li { list-style: decimal; } /* 성직자 */ .content_div .priest_div { } .content_div .priest_div .priest_item { float: left; width: 47.5%; margin-bottom: 34px; display: table; border: 1px solid #e6e6e6; background: #f8f8f8; } .content_div .priest_div .priest_item:nth-child(2n+1) { margin-right: 5%; } .content_div .priest_div .priest_item .photo { display: table-cell; width: 34%; padding: 27px 0; text-align: right; vertical-align: middle; } .content_div .priest_div .priest_item .photo img { border: 1px solid #000000; border-radius: 12px; } .content_div .priest_div .priest_item .text { display: table-cell; width: 66%; text-align: center; vertical-align: middle; line-height: 280%; } .content_div .priest_div .priest_item .text .gen { font-family: 나눔스퀘어,'Nanum Square'; font-size: 20px; color: #992400; } .content_div .priest_div .priest_item .text .name { font-family: 나눔스퀘어,'Nanum Square'; font-size: 24px; color: #000000; } .content_div .priest_div .priest_item .text .name2 { font-family: 나눔스퀘어,'Nanum Square'; font-size: 18px; color: #000000; } .content_div .priest_div .priest_item .text .period { font-family: 나눔스퀘어,'Nanum Square'; font-size: 18px; color: #000000; font-weight: 200; } .content_div .priest_div.nun .priest_item .text .text1 { float: left; width: 50%; text-align: right; padding: 55px 10px 50px 0; } .content_div .priest_div.nun .priest_item .text .text2 { float: left; width: 50%; text-align: left; padding: 55px 0 50px 10px; } .content_div .priest_div.nun .priest_item .text:after { clear: both; display: block; content: ''; } .content_div .priest_div:after { clear: both; display: block; content: ''; } @media (max-width: 1200px) { } @media (max-width: 1024px) { .content_div .priest_div { } .content_div .priest_div .priest_item { width: 100%; margin-bottom: 27px; } .content_div .priest_div .priest_item:nth-child(2n+1) { margin-right: 0; } .content_div .priest_div .priest_item .photo { width: 25%; padding: 15px 0; } .content_div .priest_div .priest_item .text { width: 75%; } } @media (max-width: 768px) { .content_div .priest_div .priest_item { margin-bottom: 20px; } .content_div .priest_div .priest_item .photo { width: 30%; padding: 15px 15px; } .content_div .priest_div .priest_item .text { width: 70%; padding: 15px 15px 15px 0; } .content_div .priest_div .priest_item .text { line-height: 250%; } .content_div .priest_div .priest_item .text .gen { font-size: 18px; } .content_div .priest_div .priest_item .text .name { font-size: 22px; } .content_div .priest_div .priest_item .text .name2 { font-size: 16px; } .content_div .priest_div .priest_item .text .period { font-size: 16px; } .content_div .priest_div.nun .priest_item .text .text1 { float: unset; width: 100%; text-align: center; padding: 0; } .content_div .priest_div.nun .priest_item .text .text2 { float: unset; width: 100%; text-align: center; padding: 0; } } @media (max-width: 450px) { .content_div .priest_div { } .content_div .priest_div .priest_item .photo { width: 30%; padding: 10px 10px; } .content_div .priest_div .priest_item .text { width: 70%; padding: 10px 10px 10px 0; line-height: 200%; } .content_div .priest_div .priest_item .text .gen { font-size: 15px; } .content_div .priest_div .priest_item .text .name { font-size: 17px; } .content_div .priest_div .priest_item .text .name2 { font-size: 13px; } .content_div .priest_div .priest_item .text .period { font-size: 13px; } } /* 성직자 새로 */ .content_div .priest_div2 { } .content_div .priest_div2 .priest_item { float: left; width: 100%; margin-bottom: 34px; display: table; border: 1px solid #e6e6e6; background: #f8f8f8; } .content_div .priest_div2 .priest_item .photo { display: table-cell; width: 15%; padding: 27px 0; text-align: right; vertical-align: middle; } .content_div .priest_div2 .priest_item .photo img { border: 1px solid #000000; border-radius: 12px; } .content_div .priest_div2 .priest_item .text { display: table-cell; width: 85%; /*text-align: center;*/ vertical-align: middle; line-height: 280%; } .content_div .priest_div2 .priest_item .text br { display: none; } .content_div .priest_div2 .priest_item .text .gen { display: inline-block; width: 20%; text-align: center; font-family: 나눔스퀘어,'Nanum Square'; font-size: 20px; color: #992400; } .content_div .priest_div2 .priest_item .text .name { display: inline-block; width: 30%; text-align: center; font-family: 나눔스퀘어,'Nanum Square'; font-size: 24px; color: #000000; } .content_div .priest_div2 .priest_item .text .name2 { display: inline-block; width: 20%; font-family: 나눔스퀘어,'Nanum Square'; font-size: 18px; color: #000000; } .content_div .priest_div2 .priest_item .text .period { display: inline-block; width: 28%; font-family: 나눔스퀘어,'Nanum Square'; font-size: 18px; color: #000000; font-weight: 200; } .content_div .priest_div2.nun .priest_item .text .text1 { float: left; width: 50%; text-align: right; padding: 55px 10px 50px 0; } .content_div .priest_div2.nun .priest_item .text .text2 { float: left; width: 50%; text-align: left; padding: 55px 0 50px 10px; } .content_div .priest_div2.nun .priest_item .text:after { clear: both; display: block; content: ''; } .content_div .priest_div2:after { clear: both; display: block; content: ''; } @media (max-width: 1200px) { } @media (max-width: 1024px) { .content_div .priest_div2 { } .content_div .priest_div2 .priest_item { margin-bottom: 27px; } .content_div .priest_div2 .priest_item:nth-child(2n+1) { margin-right: 0; } .content_div .priest_div2 .priest_item .photo { width: 25%; padding: 15px 0; } .content_div .priest_div2 .priest_item .text { width: 75%; text-align: center; } .content_div .priest_div2 .priest_item .text br { display: inline-block; } .content_div .priest_div2 .priest_item .text .gen { width: auto; text-align: center; } .content_div .priest_div2 .priest_item .text .name { width: auto; text-align: center; } .content_div .priest_div2 .priest_item .text .name2 { width: auto; text-align: center; } .content_div .priest_div2 .priest_item .text .period { width: auto; text-align: center; } } @media (max-width: 768px) { .content_div .priest_div2 .priest_item { margin-bottom: 20px; } .content_div .priest_div2 .priest_item .photo { width: 30%; padding: 15px 15px; } .content_div .priest_div2 .priest_item .text { width: 70%; padding: 15px 15px 15px 0; } .content_div .priest_div2 .priest_item .text { line-height: 250%; } .content_div .priest_div2 .priest_item .text .gen { font-size: 18px; } .content_div .priest_div2 .priest_item .text .name { font-size: 22px; } .content_div .priest_div2 .priest_item .text .name2 { font-size: 16px; } .content_div .priest_div2 .priest_item .text .period { font-size: 16px; } .content_div .priest_div2.nun .priest_item .text .text1 { float: unset; width: 100%; text-align: center; padding: 0; } .content_div .priest_div2.nun .priest_item .text .text2 { float: unset; width: 100%; text-align: center; padding: 0; } } @media (max-width: 450px) { .content_div .priest_div2 { } .content_div .priest_div2 .priest_item .photo { width: 30%; padding: 10px 10px; } .content_div .priest_div2 .priest_item .text { width: 70%; padding: 10px 10px 10px 0; line-height: 200%; } .content_div .priest_div2 .priest_item .text .gen { font-size: 15px; } .content_div .priest_div2 .priest_item .text .name { font-size: 17px; } .content_div .priest_div2 .priest_item .text .name2 { font-size: 13px; } .content_div .priest_div2 .priest_item .text .period { font-size: 13px; } } /* 총회장 */ .content_div .head_chief_div { } .content_div .head_chief_div .head_chief_item { float: left; width: 47.5%; margin-left: 26.25%; display: table; border: 1px solid #e6e6e6; background: #f8f8f8; } .content_div .head_chief_div .head_chief_item .photo { display: table-cell; width: 34%; padding: 27px 0; text-align: right; vertical-align: middle; } .content_div .head_chief_div .head_chief_item .photo img { border: 1px solid #000000; border-radius: 12px; } .content_div .head_chief_div .head_chief_item .text { display: table-cell; width: 66%; text-align: center; vertical-align: middle; line-height: 280%; } .content_div .head_chief_div .head_chief_item .text .gen { font-family: 나눔스퀘어,'Nanum Square'; font-size: 20px; color: #992400; } .content_div .head_chief_div .head_chief_item .text .name { font-family: 나눔스퀘어,'Nanum Square'; font-size: 24px; color: #000000; } .content_div .head_chief_div .head_chief_item .text .name2 { font-family: 나눔스퀘어,'Nanum Square'; font-size: 18px; color: #000000; } .content_div .head_chief_div .head_chief_item .text .period { font-family: 나눔스퀘어,'Nanum Square'; font-size: 18px; color: #000000; font-weight: 200; } .content_div .head_chief_div.nun .head_chief_item .text .text1 { float: left; width: 50%; text-align: right; padding: 55px 10px 50px 0; } .content_div .head_chief_div.nun .head_chief_item .text .text2 { float: left; width: 50%; text-align: left; padding: 55px 0 50px 10px; } .content_div .head_chief_div.nun .head_chief_item .text:after { clear: both; display: block; content: ''; } .content_div .head_chief_div:after { clear: both; display: block; content: ''; } @media (max-width: 1200px) { } @media (max-width: 1024px) { .content_div .head_chief_div { } .content_div .head_chief_div .head_chief_item { width: 100%; margin-left: 0; } .content_div .head_chief_div .head_chief_item .photo { width: 25%; padding: 15px 0; } .content_div .head_chief_div .head_chief_item .text { width: 75%; } } @media (max-width: 768px) { .content_div .head_chief_div .head_chief_item { } .content_div .head_chief_div .head_chief_item .photo { width: 30%; padding: 15px 15px; } .content_div .head_chief_div .head_chief_item .text { width: 70%; padding: 15px 15px 15px 0; } .content_div .head_chief_div .head_chief_item .text { line-height: 250%; } .content_div .head_chief_div .head_chief_item .text .gen { font-size: 18px; } .content_div .head_chief_div .head_chief_item .text .name { font-size: 22px; } .content_div .head_chief_div .head_chief_item .text .name2 { font-size: 16px; } .content_div .head_chief_div .head_chief_item .text .period { font-size: 16px; } .content_div .head_chief_div.nun .head_chief_item .text .text1 { float: unset; width: 100%; text-align: center; padding: 0; } .content_div .head_chief_div.nun .head_chief_item .text .text2 { float: unset; width: 100%; text-align: center; padding: 0; } } @media (max-width: 450px) { .content_div .head_chief_div { } .content_div .head_chief_div .head_chief_item .photo { width: 30%; padding: 10px 10px; } .content_div .head_chief_div .head_chief_item .text { width: 70%; padding: 10px 10px 10px 0; line-height: 200%; } .content_div .head_chief_div .head_chief_item .text .gen { font-size: 15px; } .content_div .head_chief_div .head_chief_item .text .name { font-size: 17px; } .content_div .head_chief_div .head_chief_item .text .name2 { font-size: 13px; } .content_div .head_chief_div .head_chief_item .text .period { font-size: 13px; } } /* 모듈설정 관련 */ .content_div .x * { font-size: initial; } .content_div .x input { box-sizing: initial; } /* 게시판 스킨 */ .fdb_lst_wrp { display: none; }/*코멘트 입력창 안보이게*/ @media (min-width: 1201px) { .bd_tb_lst th, .bd_tb_lst td { font-size: 14px !important; } .bd_tb_lst td.title { font-size: 15px !important; } .bd_tb_lst th, .bd_tb_lst td { padding: 10px 12px !important; } .bd_tb_lst .title { padding-right: 6px !important; } .bd_tmb_lst p b { font-size: 15px !important; } .rd_hd .board h1 { font-size: 15px !important; } .rd_hd .board .nick { font-size: 14px !important; } .rd_hd .btm_area span, .rd_hd .board .cate { font-size: 14px !important; } .cnb3 a { font-size: 13px !important; } } @media (max-width: 1200px) { .cnb3 a { font-size: 12px !important; } } @media (max-width: 533px) { .cnb3>li { width: 33% !important; } } /* 기타 */ /* 회원가입, 로그인 */ .xm input, .xm textarea { max-width: calc(100% - 14px); } .xm input[type=text], .xm input[type=email], .xm input[type=password] { box-sizing: initial; } .xm h1 { font-size: 30px !important; line-height: 180%; text-align: center; font-weight: normal !important; } .xm .agreement>.title { font-weight: normal !important; } .form-horizontal input { box-sizing: initial; } .xm .nav-tabs>li>a { font-size: 13px; } .xm .nav-tabs>.active>a, .xm .nav-tabs>.active>a:hover, .xm .nav-tabs>.active>a:focus { font-size: 13px; } .bd_wrt input[type="email"] { display: inline-block; margin: 0; height: 28px; padding: 3px 6px; background: #FAFAFA; border-radius: 3px; border: 1px solid; border-color: #BBB #DDD #DDD #BBB; outline: none; box-sizing: border-box; transition: border .4s, background .4s; cursor: default; } /* 모달창 설정 */ .x_modal input { box-sizing: initial; } /* 하단 */ .footer_div { position: relative; width: 100%; } .footer_div .related_site { position: relative; width: 100%; padding: 36px 0 37px; text-align: center; } .footer_div .related_site ul { display: inline-block; } .footer_div .related_site ul li { float: left; position: relative; } .footer_div .related_site ul:after { clear: both; display: block; content: ''; } .footer_div .footer { position: relative; width: 100%; background: #42474d; } .footer_div .footer .footer_con { position: relative; width: 100%; padding: 50px 0 50px; text-align: center; color: #ffffff; font-size: 15px; line-height: 28px; opacity: 0.5; } .footer_div .footer .footer_con a { color: #ffffff; } .footer_div .footer .footer_con .fs13 { font-size: 13px; } @media (max-width: 1200px) { .pc_inline { display: none; } .mobile_inline { display: inline; } .header .menudiv { padding: 0 0 0 20px; } .header .menudiv .menu > ul > li > a { padding: 0 20px; font-size: 17px; } .header .menudiv .menu > ul > li > ul { } .header .menudiv .menu > ul > li > ul > li > a { font-size: 14px; } .mid_image { height: 30vw; } #mid_image_sub.mid_image { height: 25vw; } .submenu { height: 7vw; } .submenu .submenu_in .submenu_list { } .submenu .submenu_in .submenu_list li a { line-height: 7vw; } .submenu .submenu_in .submenu_list li:after { line-height: 7vw; } .footer_div .footer .footer_con { padding: 30px 0 30px; font-size: 14px; line-height: 26px; } } @media (max-width: 1024px) { .header { height: 100px; } .header .menudiv .logo { /*width: 200px;*/ margin-top: 20px; } .header .menudiv .menu { /*width: calc( 100% - 200px );*/ /*margin-top: 27px;*/ } .header .menudiv .menu > ul > li { padding-top: 27px; } .header .menudiv .menu > ul > li > a { padding: 0 8px; font-size: 14px; } .header .menudiv .menu > ul > li > ul { padding: 60px 0 0 0; height: 271px; } .header .menudiv .menu > ul > li > ul > li > a { font-size: 12px; } .main_div.bbs_new > ul.last_bbs > li .bbs_title { font-size: 20px; } .footer_div .related_site { padding: 20px 0 20px; } .footer_div .related_site ul li:nth-child(1) { max-width: 19.85058697972252%; } .footer_div .related_site ul li:nth-child(2) { max-width: 26.89434364994664%; } .footer_div .related_site ul li:nth-child(3) { max-width: 25.82710779082177%; } .footer_div .related_site ul li:nth-child(4) { max-width: 27.42796157950907%; } } @media (max-width: 768px) { .header { height: 60px; } .header .menudiv { height: 100%; } .header .menudiv .logo { width: 80%; height: calc(100%-15px); margin-top: 10px; } .header .menudiv .logo img { height: 40px; } .header .menudiv .menu { display: none; float: none; position: absolute; right: 0; width: 85%; height: auto; margin-top: 0; background: #1b2632; text-align: left; } .header .menudiv .menu > ul { display: block; } .header .menudiv .menu > ul .pc { display: none; } .header .menudiv .menu > ul .mobile { display: block; } .header .menudiv .menu > ul > li { float: none; position: relative; padding-top: 0; text-align: left; } .header .menudiv .menu > ul > li.on { background: none; } .header .menudiv .menu > ul > li > a { width: 100%; font-size: 17px; font-weight: normal; color: #ffffff; line-height: 55px; padding: 0 0 0 7%; box-sizing: border-box; border-bottom: 1px solid #4d8a81; } .header .menudiv .menu > ul > li > .menu_arrow { position: absolute; top: 0; right: 0; width: 17%; height: 100%; text-align: center; padding-top: 18px; } .header .menudiv .menu > ul > li > .menu_arrow img { width: 15px; } .header .menudiv .menu > ul > li > ul { display: none; position: relative; background: #151d26; width: 100%; height: auto; padding: 20px 0 20px 0; } .header .menudiv .menu > ul > li > ul > li { float: left; width: 50%; text-align: left; padding: 0 0 0 7%; } .header .menudiv .menu > ul > li > ul > li:nth-child(2n) { padding: 0 0 0 5%; } .header .menudiv .menu > ul > li > ul > li:last-child { border-bottom: none; } .header .menudiv .menu > ul > li > ul > li > a { display: inline-block; max-width: 100%; font-size: 15px; color: #4d8a81; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .menudiv .menu > ul > li > ul > li > a:before { display: inline-block; content: '·'; letter-spacing: 5px; } .header .menudiv .menu > ul > li.menu_title { padding: 17px 0 18px 7%; } .header .menudiv .menu > ul > li.menu_title .menu_title_img { width: 82px; } .header .menudiv .menu > ul > li.menu_title > .menu_arrow { padding-top: 16px; } .header .menudiv .menu > ul > li.menu_login { font-size: 15px; line-height: 10.6vw; text-align: center; background: #4d8a81; color: #ffffff; } .header .menudiv .menu > ul > li.menu_login a { color: #ffffff; } .header .menudiv .menu > ul > li.menu_login .menu_login_img { width: 82px; } .header .menudiv .menu > ul > li.menu_logo { padding: 35px 60px; text-align: center; } .header .menudiv .menu > ul > li.menu_logo img { width: 120px; } .header .menudiv .menu > ul > li > ul:after { clear: both; display: block; content: ''; } .header .menudiv .menu_btn { float: left; display: block; width: 20%; margin-top: calc((60px - 21px)/2); text-align: center; } .header .menudiv .menu_btn img { width: 21px; } .menu_bg_mobile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; opacity: 0.5; } .submenu .submenu_in .submenu_list li a { padding: 0 10px; font-size: 14px; } .submenu .submenu_in .submenu_list li:after { font-size: 14px; } .main_div.pc { display: none; } .main_div.mobile { display: block; } .main_div.main_icon { background: #4d8a81; line-height: 100%; text-align: center; } .main_div.main_icon ul { display: inline-block; width: 90%; } .main_div.main_icon ul li { float: left; position: relative; width: 25%; } .main_div.main_icon ul li a { display: inline-block; width: 100%; padding: 10px 0; color: #ffffff; font-size: 16px; } .main_div.main_icon ul li a:after { content: "|"; position: absolute; right: 0; color: #ffffff; } .main_div.main_icon ul li:last-child a:after { display: none; } .main_div.main_icon ul:after { clear: both; display: block; content: ''; } .content_div { padding: 30px 5% 20px; } .content_div .page_title span { font-size: 24px; padding: 0 45px 10px 45px; border-bottom: 5px solid #d0d0d0; margin-bottom: 25px; } .content_div .page_img { margin-bottom: 25px; } .content_div .s_title { font-size: 18px; line-height: 100%; padding: 8px 0; margin-bottom: 25px; } .content_div .fl_box .left.w25p { width: 100%; } .content_div .fl_box .left.w30p { width: 100%; } .content_div .fl_box .left.w49p { width: 100%; } .content_div .fl_box .left.w70p { width: 100%; } .content_div .fl_box .left.w75p { width: 100%; } .content_div .fl_box .left.mgr2p { margin-right: 0%; margin-bottom: 25px; } .content_div .tbl tr th, .content_div .tbl tr td { font-weight: normal; padding: 10px 0; border-bottom: 1px solid #aaaaaa; text-align: center; } .content_div .tbl tr th { } .content_div .tbl tr:first-child th, .content_div .tbl tr:first-child td { border-top: 5px solid #e3e3e3; } .content_div .tbl tr:last-child th, .content_div .tbl tr:last-child td { border-bottom: 1px solid #000000; } .content_div .pdt30px { padding-top: 15px; } .content_div .mgb30px { margin-bottom: 15px; } .content_div .mgb50px { margin-bottom: 25px; } .footer_div .footer .footer_con { padding: 15px 0 15px; font-size: 12px; line-height: 16px; } } @media (max-width: 450px) { .pc_block { display: none; } .mobile_block { display: block; } #zonePageContent .pc_block { display: block; } .mid_image { height: 70.27777777777778vw; } .mid_image.pc { display: none; } .mid_image.mobile { display: block; } #mid_image_sub.mid_image { height: 41.66666666666667vw; } .submenu { height: 12vw; } .submenu .submenu_in .submenu_home_div { display: none; } .submenu .submenu_in .submenu_list { width: 100%; } .submenu .submenu_in .submenu_list li { position: relative; } .submenu .submenu_in .submenu_list li a { display: inline-block; padding: 0 8px; color: #ffffff; font-size: 14px; line-height: 12vw; } .submenu .submenu_in .submenu_list li a:after { content: "|"; position: absolute; right: -2px; color: #ffffff; } .submenu .submenu_in .submenu_list li:last-child a:after { display: none; } .submenu .submenu_in .submenu_list li:after { display: none; } .content_div { padding: 30px 5% 30px; } /* #main.content_div .xm { padding: 30px 5% 30px; } */ .footer_div .related_site { padding: 10px 0 10px; } .footer_div .footer .footer_con { opacity: 1; } .footer_div .footer .footer_con .fs13 { font-size: 12px; } } /* modalWindow */ .loginWindow{ display:none; position:fixed; left:0; top:0; _position:absolute; width:100%; height:100%; z-index:100;} .loginWindow.open{ display:block;} .loginWindow .modalWindow{ display:block; position:fixed; border:0; left:0; top:0; _position:absolute; width:100%; height:100%; background:#000; opacity:.3; filter:alpha(opacity:30);} .loginWindow .loginLayer{ position:absolute; width:333px; top:120px; left:50%; padding:30px; border:2px solid #737373; margin:0 0 0 -175px; background:#fff;} .loginWindow .loginLayer form{ display:none; *zoom:1; margin:0 0 29px 0;} .loginWindow .loginLayer form:after{ content:""; display:block; clear:both;} .loginWindow .loginLayer form legend{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden;} .loginWindow .loginLayer fieldset{ border:0; margin:0; padding:0;} .loginWindow .loginLayer.loginTypeA form.typeA, .loginWindow .loginLayer.loginTypeB form.typeB{ display:block;} .loginWindow .loginLayer dl{ margin:0; padding:0 0 1px 0;} .loginWindow .loginLayer dt{ font-size:12px; font-weight:bold; color:#868d95; margin:0 0 2px 0;} .loginWindow .loginLayer dd{ margin:0 0 21px 0;} .loginWindow .loginLayer .inputText{ width:269px; height:31px; padding:6px 9px 0 9px; border:1px solid #ddd; font:20px Tahoma; color:#333;} .loginWindow .loginLayer .inputText:focus{ background-color:#fbfbfb;} .loginWindow .loginLayer .inputCheck{ margin:0 3px 0 0; width:13px; height:13px; vertical-align:middle;} .loginWindow .loginLayer.loginTypeA .inputText{ background-image:url(../img/account/bgLoginText.gif); background-repeat:no-repeat; background-position:right top;} .loginWindow .loginLayer.loginTypeB .inputText{ background-image:url(../img/account/bgOpenidText.gif); background-repeat:no-repeat; background-position:right top; padding:6px 9px 0 35px; width:243px;} .loginWindow .loginLayer .keep{ margin:0; float:left; font-size:11px; line-height:normal; white-space:nowrap;} .loginWindow .loginLayer .keep label{ color:#555;} .loginWindow .loginLayer .loginButton, .loginWindow .loginLayer .loginButton input{ position:relative; border:0; color:#fff; font-size:12px; font-weight:bold; display:inline-block; height:36px; line-height:36px; background-color:transparent; background-image:url(../img/account/buttonLoginAction.gif); background-repeat:no-repeat; overflow:visible; vertical-align: top; } .loginWindow .loginLayer .loginButton{ float:right; background-position:0 0; right:11px;} .loginWindow .loginLayer .loginButton input{ left:11px; background-position:right 0; padding:0 30px 0 45px; cursor:pointer;} .loginWindow .loginLayer .help{ margin:0 -30px -30px -30px; padding:14px 0; list-style:none; text-align:center; background:#fafafa; border-top:1px solid #f2f2f2;} .loginWindow .loginLayer .help li{ display:inline; font-size:11px; line-height:11px; padding:0 0 0 5px;} .loginWindow .loginLayer .help li.join{ font-weight:bold;} .loginWindow .loginLayer .help li.find{ border-left:1px solid #b3b3b3;} .loginWindow .loginLayer .help li.typeA, .loginWindow .loginLayer .help li.typeB{ display:none; border-left:1px solid #b3b3b3;} .loginWindow .loginLayer.loginTypeA .help li.typeA, .loginWindow .loginLayer.loginTypeB .help li.typeB{ display:inline;} .loginWindow .loginLayer .help li a{ text-decoration:none; color:#555;} .loginWindow .loginLayer .help li a:hover, .loginWindow .loginLayer .help li a:active, .loginWindow .loginLayer .help li a:focus{ text-decoration:underline;} .loginWindow .loginLayer .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:27px; height:27px; background:transparent url(../img/account/buttonCloseX.gif) no-repeat center center;} .loginWindow .loginLayer .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;}