#container { position: relative; width: 100%; margin: 0; padding: 0; } #content { position: relative; display: block; float: none; width: 100%; margin: 0; padding: 0; } #content h3, #content h4, #content h5 { font-weight: 600; margin: 0; padding: 0; } #content .section { position: relative; } #content .section .area { position: relative; width: 1200px; margin: 0 auto; } #content .section .area .division { position: relative; float: left; } #content a.detail-btn { display: inline-block; color: #fff; font-size: 80%; padding: 6px 18px; background-color: #f15173; } #content a.detail-btn:hover, #content a.detail-btn:focus { background-color: #d2032f; } #performance-area { position: relative; width: 100%; height:380px; background: #ffe69e; z-index: 1; } #performance-area div.content { position: relative; width: 1200px; height: 100%; margin: 0 auto; } #performance-area div.content div.title { position: absolute; top: 38px; left: 50%; margin-left: -216px; text-align: center; z-index: 10; } #performance-area div.content div.title h3 { font-size: 360%; font-weight: 600; text-align: center; margin: 15px 0; } #performance-area div.content div.title p { font-weight: 300; letter-spacing: -1px; line-height: 130%; margin-left: 5px; text-align: center; text-shadow: 0 0 5px #fff; } #performance-area div.content div.title p span { display: block; } #performance-area div.content div.title p b { display: inline-block; font-weight: 500; } #performance-area div.content div.title p b.accent01 { color: #e411dc; margin-right: 10px; } #performance-area div.content div.title p b.accent02 { color: #3420d2; } #performance-area div.content div.mayor-links { position: absolute; top: 90px; right: 0; z-index: 10; } #performance-area div.content div.mayor-links ul li { position: relative; display: inline-block; vertical-align: top; width: 150px; height: 150px; } #performance-area div.content div.mayor-links ul li.member{ margin-right: 20px; } #performance-area .mayor-links li{ text-align: center; font-size: 80%; font-weight: 500; color: #274db1; } #performance-area .mayor-links li span.title { width:130px; height:130px; display: inline-block; vertical-align: top; border-radius: 100%; text-align: center; font-size: 90%; color: #333; margin-bottom: 5px; } #performance-area .mayor-links li.member span.title{ background:#fff url(/images/open.content/scholarship/visual-icon1.png) no-repeat center 35%; padding-top: 85px; } #performance-area .mayor-links li.sponsor span.title{ background:#fff url(/images/open.content/scholarship/visual-icon2.png) no-repeat center 35%; padding-top: 85px; } div.mayor-links ul li span.number { display: inline-block; vertical-align: top; color: #fff; font-family: arial; font-weight: 600; margin-top: 3px; padding: 5px 15px; background: #ff7903; border-radius: 25px; } div.mayor-links ul li.member span.number { background: #06bd68; } #performance-area div.content div.mayor-links ul li a { display: block; color: #fff; font-size: 75%; text-align: center; width: 110px; height: 110px; margin: 0 auto; padding: 20px 0 0 0; background-color: rgba(0,0,0,.6); border-radius: 50%; -webkit-border-radius: 50%; transition: .3s ease; -webkit-transition: .3s ease; } #performance-area div.content div.mayor-links ul li a:before { content: ''; display: block; position: relative; width: 45px; height: 44px; margin: 0 auto 5px auto; background-image: url(/images/open.content/health/main/major-links.png); background-position: 0 0; background-repeat: no-repeat; } #performance-area div.content div.mayor-links ul li.info a:before { background-position: 0 0; } #performance-area div.content div.mayor-links ul li.getway a:before { background-position: -45px 0; } #performance-area div.content div.mayor-links ul li.staff a:before { background-position: -90px 0; } #performance-area div.content div.mayor-links ul li.hope a:before { background-position: -135px 0; } #performance-area div.content div.mayor-links ul li a:hover, #performance-area div.content div.mayor-links ul li a:focus { background-color: rgba(0,0,0,.3); } #performance-area div.office-hours { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,.7); z-index: 2; } #performance-area div.office-hours .area { position: relative; width: 1200px; margin: 0 auto; padding: 15px 0; } #performance-area div.office-hours .area dl { text-align: center; } #performance-area div.office-hours .area dl dt, #performance-area div.office-hours .area dl dd { display: inline-block; vertical-align: top; } #performance-area div.office-hours .area dl dt { font-size: 80%; padding: 5px 20px; background-color: #7affe5; border-radius: 25px; -webkit-border-radius: 25px; } #performance-area div.office-hours .area dl dd { color: #fff; font-size: 95%; margin-left: 20px; } #performance-area div.office-hours .area dl dd b { display: inline-block; font-size: 120%; font-weight: 300; margin-right: 5px; } #performance-area div.office-hours .area dl dd i { color: #ffb4d6; font-style: normal; } #performance-area div.office-hours .area dl dd.tel { font-size: 100%; font-weight: 300; line-height: 32px; letter-spacing: 0; padding-left: 25px; background: url(/images/common/tel-w.svg) 0 50% no-repeat; } #performance-area div.office-hours .area dl dd.address { font-size: 100%; font-weight: 300; line-height: 32px; letter-spacing: 0; padding-left: 25px; background: url(/images/common/address-w-icon.svg) 0 50% no-repeat; } #performance-area div.visual-img { position: absolute; top: 0; width: 100%; height: 100%; } #performance-area .bx-viewport { z-index: 1; } #performance-area .bx-wrapper img { display: block; height:100%; width:auto; max-width: none; margin: 0 auto; position: relative; } #performance-area .bx-wrapper .bx-pager { display: inline-block; vertical-align: top; font-size: 80%; font-weight: 300; line-height: 38px; margin-right: 1px; padding: 0 20px; } #performance-area .bx-wrapper .bx-controls { position: absolute; padding: 0; bottom: 10px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 2; } #performance-area .bx-wrapper .bx-controls-direction { position: relative; display: inline-block; vertical-align: top; width: 81px; height: 40px; } #performance-area .bx-wrapper .bx-controls-direction a { position: relative; top: 0; display: inline-block; vertical-align: top; width: 40px; height: 40px; border: 1px solid #d3d3d3; } #performance-area .bx-wrapper .bx-controls-direction .bx-prev { left: 0; background: #fff url(/images/common/prev-g-icon.svg) 50% 50% no-repeat; } #performance-area .bx-wrapper .bx-controls-direction .bx-next { right: -1px; background: #fff url(/images/common/next-g-icon.svg) 50% 50% no-repeat; } #performance-area .bx-wrapper .bx-controls-auto { position: relative; width: 40px; height: 40px; margin: 0 1px 0 0; } #performance-area .bx-wrapper .bx-controls-auto a { width: 100%; height: 100%; border: 1px solid #d3d3d3; } .bx-wrapper .bx-controls-auto .bx-start { background: url(/images/common/play-r-icon.svg) 50% 50% no-repeat; } .bx-wrapper .bx-controls-auto .bx-stop { background: url(/images/common/stop-g-icon.svg) 50% 50% no-repeat; } .bx-wrapper .bx-controls-auto a:hover, .bx-wrapper .bx-controls-auto a:focus, .bx-controls-direction a:hover, .bx-controls-direction a:focus { border-color: #ff6600; z-index: 10; } #issue-area { padding: 40px 0 0 0; background: url(/images/open.content/scholarship/notice-back.png) no-repeat center 0; height: 721px; } #issue-area .issue .notice { overflow: hidden; padding-top: 20px; } #issue-area .issue h4.notice-title{ text-align: center; font-size: 190%; font-weight: 500; margin-bottom: 20px; color: #555; } #issue-area .issue .notice .tab-area .tab h4 { position:absolute; top: -1px; font-weight: normal; margin: 0; padding: 0; border: 0 none; } #issue-area .issue .notice .tab-area .tab1 h4 { left: 0; } #issue-area .issue .notice .tab-area .tab2 h4 { left: 119px; } #issue-area .issue .notice .tab-area .tab h4 a { position: relative; display:block; color: #777; font-size: 90%; min-width: 120px; text-align: center; line-height: 48px; height: 48px; padding: 0 25px; border: 1px solid #d7d7d7; border-bottom: 0 none; background-color: #f0f0f0; z-index: 1; } #issue-area .issue .notice .tab-area .tabon h4 a { position: relative; color: #222; font-weight: 500; height: 49px; border-color: #d7d7d7; background: #fff; z-index: 2; } #issue-area .issue .notice .tab-area .tab1 h4 a { border-left: 0 none; } #issue-area .issue .notice .tab-area .tab .box { display: none; overflow: hidden; height: 100%; margin: 0; padding: 20px; border-top: 1px solid #d7d7d7; z-index: 2; } #issue-area .issue .notice ul.notice-list li{ text-align: center; background: #f9f9f9; border: #f9f9f9; vertical-align: top; margin-top: 40px; height: 420px; display: block; } #issue-area .issue .notice ul li span.title{ padding: 80px 40px; height: 380px; display: block; } #issue-area .issue .notice ul li span.subject{ display: block; text-align: center; font-size: 120%; font-weight: 500; margin-bottom:20px; } #issue-area .issue .notice ul li span.content{ font-size: 85%; color: #595959; line-height: 28px; } #issue-area .issue .notice ul li span.date { display: inline-block; vertical-align: top; color: #ed4910; font-weight: 400; border: 1px solid #e1e1e1; font-size: 90%; line-height: 35px; width: 100px; height: 100px; text-align: center; padding-top: 10px; position: absolute; top: -40px; left: 50%; margin-left: -50px; background: #fff; } #issue-area .issue .notice ul li span.date span{ display: block; font-weight: 500; text-align: center; font-size: 250%; } #issue-area .issue .notice ul li.first { margin-bottom: 15px; padding: 0 0 12px 80px; border-bottom: 1px dotted #d6d6d6; background: url(/images/open.content/ko/main/board-first-icon.png) 5px 10% no-repeat; } #issue-area .issue .notice ul li.first a { padding: 0; } #issue-area .issue .notice ul li.first a:before { display: none; } #issue-area .issue .notice ul li.first a span.content { display: block; font-size: 95%; font-weight: 300; text-align: left; padding: 5px 15px 5px 0; } #issue-area .issue .notice ul li b.new-img { display: inline-block; vertical-align: baseline; text-indent: -9999em; margin: 0 0 0 3px; padding: 0; background: url(/images/bb/new.gif) 0 50% no-repeat; } #issue-area .issue .notice .tab-area .tabon .box { display:block; background-color: #fff; } #issue-area .issue .notice a.more-btn { display: block; position: absolute; bottom: -5px; right: 50%; margin-right: -58px; text-indent: -9999em; width: 26px; height: 26px; background: url(/images/common/plus-r-scholarship-icon.png) 50% 50% no-repeat; } #issue-area .issue .notice a.more-btn:hover { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } #issue-area .issue .popup { width: 430px; height: 274px; margin-right: 19px; } #issue-area .issue .health-business-info { width: 330px; height: 274px; padding: 20px 22px; background: #fff url(/images/open.content/health/main/health-business-info-bg.png) 0 100% no-repeat; } #issue-area .issue .health-business-info p { font-size: 85%; text-align: left; letter-spacing: -.3px; padding: 0 15px 0 0; } #issue-area .issue .health-business-info p b { color: #0cb4b5; font-weight: 400; } #issue-area .issue .health-business-info a.detail-btn { margin-top: 30px; } .bx-wrapper .bx-controls-auto .bx-stop{ display: block; text-indent: -9999em; width: 16px; height: 16px; background: url(/images/common/stop-g-icon.svg) 50% 50% no-repeat; } #various{ background-color: #f7f7f7; width:100%; } #various-area .various .guidance { width: 100%; /* height: 400px;*/ height: 230px; /* display: inline-block;*/ } #various-area .various .title .title-img { position: relative; display: inline-block; vertical-align: top; text-align: left; width: 50%; z-index: 1; } #various-area .various .title .title-img img { max-width: 100%; max-height: 100%; } #various-area .various .guidance .title { width: 36%; height: 100%; display: inline-block; vertical-align: top; color: #fff; text-align: right; -webkit-border-top-right-radius: 250px; -webkit-border-bottom-right-radius: 250px; -moz-border-radius-topright: 250px; -moz-border-radius-bottomright: 250px; border-top-right-radius: 250px; border-bottom-right-radius: 250px; background-color: #41add1; } #various-area .various .guidance .title h5 { color: #fff; font-size: 95%; text-align: center; font-weight: 400; background: #123077; border-radius: 30px; display: inline-block; padding: 0px 30px; margin-bottom: 0px; } #various-area .various .guidance .title p{ text-align: center; font-weight: 500; } #various-area .various .guidance .title p span.number { display: inline-block; text-align: center; font-size: 14px; font-weight: 600; margin-top: 5px; letter-spacing: -1px; } #various-area .various .guidance .title p span.bank-name { font-size: 14px; } #various-area .various .guidance .title p span.to { display: block; text-align: center; font-size: 89%; font-weight: 500; letter-spacing: -1px; /*margin-bottom: 2px;*/ } #various-area .various .guidance .title p span.tel { display: block; text-align: center; font-size: 16px; color: yellow; font-weight: 500; } #various-area .various .guidance .title p span.fax { font-size: 16px; color: yellow; font-weight: 500; } #various-area .various .guidance .contents { position: relative; display: inline-block; vertical-align: top; max-width: 1000px; width: 64%; height: 70%; padding: 30px 0 0 0; } #various-area .various .guidance .contents ul li { position: relative; display: inline-block; vertical-align: top; width: 20%; } #various-area .various .guidance .contents ul li.mt-space { margin-top: 50px; } #various-area .various .guidance .contents ul li a { display: block; font-size: 90%; text-align: center; } #various-area .various .guidance .contents ul li a:before { content: ''; display: block; text-align: center; width: 140px; height: 140px; margin: 0 auto 15px auto; background-color: #fff; border-radius: 50%; -webkit-border-radius: 50%; transition: .3s ease; -webkit-transition: .3s ease; } #various-area .various .guidance .contents ul li a:after { content: ''; width: 100%; height: 164px; top: 0; display: block; position: absolute; transition: .3s ease; -webkit-transition: .3s ease; } #various-area .various .guidance .contents ul li.immunization a:after { background: url(/images/open.content/scholarship/support-icon1.svg) no-repeat center 45%; } #various-area .various .guidance .contents ul li.health-tests a:after { background: url(/images/open.content/scholarship/support-icon2.svg) no-repeat center 45%; } #various-area .various .guidance .contents ul li.hospital a:after { background: url(/images/open.content/scholarship/support-icon3.svg) no-repeat center 45%; } #various-area .various .guidance .contents ul li.infectiousdisease a:after { background: url(/images/open.content/scholarship/support-icon4.svg) no-repeat center 45%; } #various-area .various .guidance .contents ul li.report-violation a:after { background: url(/images/open.content/scholarship/support-icon5.svg) no-repeat 57% 35%; } #various-area .various .guidance .contents ul li a:hover:before { transform: scale(1.1); -webkit-transform: scale(1.1); background-color: #d7ffee; } #various-area .various .guidance .contents ul li a:hover:after { transform: scale(1.2); -webkit-transform: scale(1.2); } #various-area .various .health-sense { width: 331px; height: 426px; } #various-area .various .health-sense .common-sense { position: relative; width: 331px; height: 251px; background: #fff; margin-bottom: 18px; padding: 20px 10px; } #various-area .various .health-sense .common-sense h5 { margin-bottom: 15px; padding-left: 10px; } #various-area .various .health-sense .common-sense ul li { display: inline-block; vertical-align: top; width: 45%; margin: 7px 2.5%; } #various-area .various .health-sense .common-sense ul li.cdc { display: inline-block; vertical-align: top; width:95%; } #various-area .various .health-sense .common-sense ul li a { display: block; font-size: 80%; text-align: center; margin: 0; padding: 10px 0; background-color: #f0f0f0; } #various-area .various .health-sense .common-sense ul li.cdc a span.t-blank { display: inline-block; padding-right: 16px; background: url(/images/common/new-window.svg) 100% 50% no-repeat; } #various-area .various .health-sense .common-sense ul li a:hover, #various-area .various .health-sense .common-sense ul li a:focus { color: #161616; background-color: #7ae2ff; } #various-area .various .health-sense .consultation { width: 331px; height: 158px; padding: 15px 20px; background: url(/images/open.content/health/main/consultation-bg.jpg) 0 0 no-repeat; } #various-area .various .health-sense .consultation p { font-size: 85%; text-align: left; letter-spacing: -1px; } #various-area .various .health-sense .consultation p span { display: block; } #various-area .various .health-sense .consultation a.detail-btn { margin-top: 10px; } #issue-area .area:after, #various-area .area:after, #various-area .various .guidance .contents:after { clear: both; content: ''; display: block; } #various-area .text{ position: relative; display: inline-block; vertical-align: top; max-width: 285px; width: 50%; height: 100%; margin: -11px 0 0 0; padding: 15px 20px 0 0; text-align: center; background: url(/images/open.content/scholarship/call.png) no-repeat right 75px center; background-size: 180px; z-index: 10; } @media screen and (max-width: 1280px){ #various-area .various .title .title-img { padding-top: 5%; } #various-area .text{ padding-right: 12px; } } #performance-area div.bx-viewport { height: 380px !important } div .donation{ text-align:center; z-index:1; }