@charset "utf-8"; header { position:fixed; z-index:999; width:100%; background:#ffffff; border-bottom:0px solid #dddddd; } #container #scene01 { background:url('/culture/images/main/scene01_bg.jpg') center top 210px; } #container #scene02 { background:#f2f2f2; } #container #scene03 { background:url('/culture/images/main/scene03_bg.jpg') left top; } #container #scene04 { background:#ffffff;; } #container .scene { height:980px; } #container .scene>div:first-child { padding-top:216px; margin-bottom:30px; } #container .scene>div>p { text-align:center; } #container .scene>div>p.tit { padding-top:70px; font-size:40px; font-weight:300; line-height:40px; } #container .scene>div>h3 { padding-top:70px; font-size:40px; font-weight:300; line-height:40px; text-align:center; } #container .scene>div>p.sub { margin-top:10px; font-size:17px; font-weight:300; } #container #scene01>div>h3, #container #scene03>div>p.tit { color:#ffffff; } #container #scene01>div>p.sub, #container #scene03>div>p.sub { color:rgba(255,255,255,0.8); } #container #scene02>div>h3, #container #scene04>div>p.tit { color:#000000; } #container #scene02>div>p.sub, #container #scene04>div>p.sub { color:#666666; } /* 스크롤 네비, 버튼 */ .main_nav { position:fixed; z-index:5; top:50%; right:5%; margin-top:25px; width:120px; transition:all 1s ease; } .main_nav li { position:relative; display:inline-block; border-radius:30px; margin-bottom:12px; padding:2px 20px 2px 15px; box-sizing:border-box; } .main_nav li:hover { background:rgba(0,0,0,0.1); } .main_nav li:after { display:block; content:''; position:absolute; z-index:10; left:19px; top:17px; height:36px; width:1px; background:#ffffff; } .main_nav li.select:after { left:18px; } .main_nav li:last-child:after { width:0px; } .main_nav li.select { border:1px solid #ffffff; background:#25447e; } .main_nav li a { display:block; padding-left:17px; background:url('/culture/images/main/nav_white.png') no-repeat left 1px center; color:#ffffff; font-size:13px; } .main_nav li.select a { background:url('/culture/images/main/nav_white.png') no-repeat left center; } .main_nav.black li:after { display:block; content:''; position:absolute; z-index:10; left:19px; top:17px; height:36px; width:1px; background:#606060; } .main_nav.black li.select { border:1px solid #ffffff; background:#222222; } .main_nav.black li a { color:#444444; background-image:url('/culture/images/main/nav_black.png'); } .main_nav.black li.select a { color:#ffffff; background:url('/culture/images/main/nav_white.png') no-repeat left center; } .main_nav.black li:last-child:after { width:0px; } .main_nav.orange li.select { border:1px solid #ffffff; background:#cf3600; } .main_nav.last_nav { top:56%; } .scroll_btn a { position:fixed; z-index:10; bottom:2%; left:50%; display:block; margin-left:-28.5px; width:57px; height:57px; text-indent:-999px; transition:all 1s ease; } /* 2번,4번째 슬라이드에는 블랙 화살표 파일명 각각 - down_btn2 / up_btn2 */ .scroll_btn a.scroll_down { background:url('/culture/images/main/down_btn.png') no-repeat; } .scroll_btn a.scroll_down.black { display:none; background:url('/culture/images/main/down_btn2.png') no-repeat; } .scroll_btn a.scroll_top { display:none; background:url('/culture/images/main/up_btn.png') no-repeat; } .scroll_btn a.scroll_top.last_top { bottom:26%; } .scroll_btn a.scroll_top.black { display:none; background:url('/culture/images/main/up_btn2.png') no-repeat; } /* 공연안내 */ #container #scene01 { position:relative; overflow:hidden; } #performance { overflow:hidden; } #performance>ul { position:relative; overflow:hidden; left:50%; margin-left:-600px; transition:all 0.5s ease; } #performance>ul>li { position:relative; float:left; overflow:hidden; margin-right:10px; width:595px; height:383px; background:#030e23; } /* #performance>ul>li:last-child { position:absolute; left:50%; z-index:2; margin-left:-1205px; } 마지막 포스터 위치영역 */ #performance>ul>li>div { position:absolute; -webkit-transition: all 1s; /* box-shadow:0px 0px 80px 5px #244580; */ } #performance>ul>li .poster { opacity:0.2; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out; transition:all 0.35s ease-in-out; -webkit-transform:translateZ(0) rotateY(0); -moz-transform:translateZ(0) rotateY(0); -ms-transform:translateZ(0) rotateY(0); -o-transform:translateZ(0) rotateY(0); transform:translateZ(0) rotateY(0); } #performance>ul>li .poster img { display:block; } #performance>ul>li .poster .label { position:absolute; z-index:3; padding:15px 7px; width:59px; height:43px; color:#ffffff; text-align:center; font-size:14px; font-weight:500; } #performance>ul>li .poster .label.la01 { background:url('/culture/images/main/label01.jpg') no-repeat left top; } #performance>ul>li .poster .label.la02 { /* padding-top:25px; height:33px; */ background:url('/culture/images/main/label02.jpg') no-repeat left top; } #performance>ul>li .info { padding:40px; width:515px; height:303px; background:#2b3851; opacity:0; visibility:hidden; -webkit-transition:all 0.35s ease 0.35s; -moz-transition:all 0.35s ease 0.35s; transition:all 0.35s ease 0.35s; -webkit-transform:translateZ(-1000px) rotateY(-90deg); -moz-transform:translateZ(-1000px) rotateY(-90deg); -ms-transform:translateZ(-1000px) rotateY(-90deg); -o-transform:translateZ(-1000px) rotateY(-90deg); transform:translateZ(-1000px) rotateY(-90deg); } #performance>ul>li .info .info_top>p { color:#abafb6; font-size:17px; line-height:17px;} #performance>ul>li .info .info_top>div { overflow:hidden; margin-top:16px; padding-bottom:30px; border-bottom:1px solid #465268; } #performance>ul>li .info .info_top>div .tit { overflow:hidden; float:left; width:75%; color:#ffffff; font-size:26px; font-weight:500; line-height:26px; text-overflow:ellipsis; white-space:nowrap; } #performance>ul>li .info .info_top>div .p_btn { float:right; width:23%; } #performance>ul>li .info .info_top>div .p_btn a { display:block; padding:5px 0; background:#20293b; color:#dfe0e1; font-size:13px; text-align:center; } #performance>ul>li .info .info_top>div .p_btn a:hover { background:#000000; } #performance>ul>li .info .info_detail { overflow:hidden; margin-top:20px; } #performance>ul>li .info .info_detail dt, #performance>ul>li .info .info_detail dd { overflow:hidden; float:left; font-size:14px; line-height:27px; text-overflow:ellipsis; white-space:nowrap; } #performance>ul>li .info .info_detail dt { width:20%; color:#ffffff; font-weight:400; } #performance>ul>li .info .info_detail dd { width:80%; color:#e0e1e3; font-weight:300; } /* 포스터 hover effect */ #performance>ul>li.on .poster { opacity:1; } #performance>ul>li.on:hover .poster { opacity:0; -webkit-transform:translateZ(-1000px) rotateY(90deg); -moz-transform:translateZ(-1000px) rotateY(90deg); -ms-transform:translateZ(-1000px) rotateY(90deg); -o-transform:translateZ(-1000px) rotateY(90deg); transform:translateZ(-1000px) rotateY(90deg); } #performance>ul>li.on:hover .info { visibility:visible; opacity:1; -webkit-transform:rotateY(0deg); -webkit-transform:translateZ(0) rotateY(0); -moz-transform:translateZ(0) rotateY(0); -ms-transform:translateZ(0) rotateY(0); -o-transform:translateZ(0) rotateY(0); transform:translateZ(0) rotateY(0); } #posterControl a { position:absolute; z-index:4; top:570px; display:block; padding-top:17px; width:80px; height:80px; border-radius:80px; box-sizing:border-box; text-align:center; transition:all 1s ease; } #posterControl a:hover { background:rgba(0,0,0,0.3); } #posterControl .prev a { display:none; left:50%; margin-left:-700px; } #posterControl .next a { display:none; right:50%; margin-right:-700px; } /* 공연안내 2024 */ .poster .poster-wrap {position:relative; display:block; max-width:1160px; white-space:nowrap; margin:0 auto;} .poster ul{position:relative; display:flex; gap:10px; width:100%; height:100%; line-height:0;} .poster ul li a{display:block; height:100%;} .poster ul li img{max-width:380px;} .poster .poster-wrap .list {overflow: hidden;} .poster .poster-wrap>a {position:absolute; border-radius:60px; background: url('/culture/images/main/poster_arr.svg') no-repeat center; background-color: rgb(0, 0, 0, 0.3); top:calc(50% - 30px); width:60px; height:60px;} .poster .poster-wrap>a.prev {right:-80px;} .poster .poster-wrap>a.next {left:-80px; transform: rotate(180deg);} .favorite-list ul {display:flex; gap: 20px; justify-content: center; margin:0 auto;} .favorite-list ul>li>a {display:block; max-width:380px;} .favorite-list ul>li img {width: 100%; object-fit: cover;} .favorite-control {display: flex; justify-content: space-between; position: absolute; top: calc(50% - 22px); left: 160px; right: 0; z-index: 1;} .favorite-control a {position: relative; width: 52px; height: 52px; border-radius: 50%; background: #fff;} .favorite-control a::after {content: ''; position: absolute; top: calc(50% - 7px); left: calc(50% - 4px); width: 8px; height: 14px; background:url(/main/img/main/m2023/favorite-arr.svg) no-repeat center;} .favorite-control a.next::after {transform: rotate(180deg);} /* 교육예약 */ #reservation { overflow:hidden; margin-top:60px; box-shadow:0px 0px 70px 5px #dddddd; background:#e5e5e5; } #reservation .tab { float:left; padding:23px; width:23.3%; height:430px; background:#ffffff; box-sizing:border-box; } #reservation .field { overflow:hidden; } #reservation .field>p { float:left; width:50%; text-align:center; } #reservation .field>p a { display:block; padding:20px 0 10px 0; color:#555555; background:url('/culture/images/main/field_off.jpg') no-repeat center top; border-bottom:1px solid #c9c9c9; font-size:15px; } #reservation .field>p.select a { color:#f0531b; background:url('/culture/images/main/field_on.jpg') no-repeat center top; border-bottom:1px solid #f0531b; } #reservation .institution_list ul { overflow-y:auto; margin-top:18px; height:310px; } #reservation .institution_list ul li { width:96%; } #reservation .institution_list ul li a { display:block; padding:5px 20px; color:#555555; font-size:15px; } #reservation .institution_list ul li.select a { color:#ffffff; background:#f0531b; } #reservation .institution_list ul li.select:hover a { color:#ffffff; background:#f0531b; } #reservation .institution_list ul li:hover a { background:#f5f5f5; } #reservation .list { float:right; padding:23px; width:76.3%; height:430px; background:#ffffff; box-sizing:border-box; } #reservation .list>div { overflow-y:auto; height:380px; } table.m_edu_list { width:98%; border-spacing:0; text-align:center; } table.m_edu_list th { padding-bottom:15px; color:#222222; border-bottom:1px solid #8b8b8b; font-weight:400; } table.m_edu_list td { padding:15px; color:#555555; font-size:14px; border-bottom:1px solid #dddddd; } /* 일정 및 소식 */ #news { overflow:hidden; margin-top:60px; box-shadow:0px 0px 70px 5px #cf3802; } #news h3 { padding:23px 33px; color:#f15118; border-bottom:2px solid #efefef; font-weight:400; font-size:22px; line-height:22px; } #news>div { background:#ffffff; margin-right:10px; } #news #schedule { position:relative; float:left; width:520px; } #news #schedule ul { background:#f7f7f7; } #news #schedule ul li { border-bottom:1px solid #dddddd; } #news #schedule ul li a { display:block; padding:20px 33px; } #news #schedule ul li a:hover { background:#e9e9e9; } #news #schedule ul li a span { overflow:hidden; display:block; width:100%; text-overflow:ellipsis; white-space:nowrap; line-height:15px; } #news #schedule ul li a span.subject { color:#333333; font-size:15px; font-weight:400; } #news #schedule ul li a span.date { margin-top:10px; color:#666666; font-size:13px; font-weight:300; } #news #schedule .more_btn { position:absolute; z-index:1; top:22px; right:33px; } #news #popupzone { position:relative; float:left; width:385px; } #news #popupzone .popup { width:385px; height:321px; } #news #popupzone .popup li a { display:block; } #news #popupzone .popup li a img { display:block; width:100%; height:324px; } #news #popupzone .popup_btn { position:absolute; z-index:1; top:22px; right:33px; overflow:hidden; } #news #popupzone .popup_btn li { float:left; margin-left:3px; font-size:13px; color:#333333; line-height:26px; } #news #popupzone .popup_btn li:first-child { margin-right:10px; margin-left:0px; } #news #popupzone .popup_btn li span.wfont { color:#f15118; font-weight:500; } #news #quick { float:right; margin-right:0px; width:275px; } #news #quick ul { overflow:hidden; } #news #quick ul li { float:left; width:50%; background:#f7f7f7; text-align:center; } #news #quick ul li:nth-child(even) { border-right:0px; } #news #quick ul li:nth-child(1), #news #quick ul li:nth-child(2) { height:161px; border-bottom:1px solid #dddddd; } #news #quick ul li a { display:block; padding-top:106px; height:160px; color:#333333; border-right:1px solid #dddddd; box-sizing:border-box; font-weight:500; letter-spacing:-1px; } #news #quick ul li:nth-child(even) a { border-right:0px; } #news #quick ul li.quick01 a { background:url('/culture/images/main/quick01.png') no-repeat center 38px; } #news #quick ul li.quick02 a { background:url('/culture/images/main/quick02.png') no-repeat center 38px; } #news #quick ul li.quick03 a { background:url('/culture/images/main/quick03.png') no-repeat center 38px; } #news #quick ul li.quick04 a { background:url('/culture/images/main/quick04.png') no-repeat center 38px; } #news #quick ul li:hover a { color:#f15118; background-color:#e9e9e9; } /* 시설예약 */ #facility { overflow:hidden; margin-top:70px; } #facility #facility_ban { overflow:hidden; float:left; width:838px; height:334px; border:1px solid #dddddd; background:#ffffff; } #facility .reveal>div { box-sizing:border-box; } #facility #facility_ban h3 { padding-top:35px; margin-bottom:20px; color:#333333; font-size:18px; font-weight:400; } #facility #facility_ban .hall { float:left; width:20%; height:100%; border-right:1px solid #dddddd; background:#ffffff url('/culture/images/main/sisul01.jpg') no-repeat center bottom 36px; text-align:center; } #facility #facility_ban .hall:hover { background:#f9f9f9; transition:all 0.3s ease; } #facility #facility_ban .info p { color:#555555; font-size:14px; font-weight:300; } #facility #facility_ban .info.long { padding-top:20px; background:url('/culture/images/main/long_bar.jpg') no-repeat center top; } #facility #facility_ban .info.back { opacity:0; } #facility .more_btn { opacity:0; margin:0 auto; margin-top:70px; width:60%; } #facility .more_btn a { display:block; padding:3px 0; color:#ffffff; background:#555555; font-size:13px; } #facility #facility_ban>div:hover .more_btn { opacity:1; transition:all 0.8s ease; } #facility #facility_ban>div:hover .more_btn a:hover { background:#f15118; } #facility #facility_ban .music { float:left; width:30%; height:167px; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; background:#e15a29 url('/culture/images/main/sisul02.jpg') no-repeat center 42px; text-align:center; } #facility #facility_ban .music:hover, #facility #facility_ban .gym:hover { background-image:none; } #facility #facility_ban .music h3, #facility #facility_ban .gym h3 { margin-bottom:10px; padding-top:120px; color:#ffffff; transition:all 0.3s ease; } #facility #facility_ban .music:hover h3 { padding-top:25px; } #facility #facility_ban .music .info p { line-height:18px; color:#f9e4e0; font-weight:300; } #facility #facility_ban .music:hover .info.back, #facility #facility_ban .gym:hover .info.back { opacity:1; } #facility #facility_ban .music .more_btn, #facility #facility_ban .gym .more_btn { margin-top:15px; } #facility #facility_ban .music .more_btn a { background:#bc3b0d; } #facility #facility_ban .music:hover .more_btn a:hover, #facility #facility_ban .gym:hover .more_btn a:hover { background:#333333; } #facility #facility_ban .meeting { float:left; padding-left:37px; width:50%; height:167px; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; background:#ffffff url('/culture/images/main/sisul03.jpg') no-repeat right 40px top 45px; } #facility #facility_ban .meeting h3 { padding-top:32px; } #facility #facility_ban .meeting:hover, #facility #facility_ban .soccer:hover { padding-left:0; width:50%; background:#f9f9f9; text-align:center; transition:all 0.3s ease; } #facility #facility_ban .meeting:hover h3 { padding-top:25px; margin-bottom:10px; } #facility #facility_ban .meeting .more_btn, #facility #facility_ban .soccer .more_btn { margin-top:10px; width:50%; text-align:center; } #facility #facility_ban .soccer { float:left; padding-left:37px; width:50%; height:167px; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; background:#ffffff url('/culture/images/main/sisul04.jpg') no-repeat right 35px top 37px; } #facility #facility_ban .soccer h3 { padding-top:32px; margin-bottom:10px; } #facility #facility_ban .soccer:hover h3 { padding-top:13px; } #facility #facility_ban .gym { float:left; width:30%; height:167px; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; background:#486db0 url('/culture/images/main/sisul05.jpg') no-repeat center 35px; text-align:center; } #facility #facility_ban .gym:hover h3 { padding-top:17px; } #facility #facility_ban .gym .info p { line-height:18px; color:#e2e7f1; font-weight:300; } #facility #facility_ban .gym .more_btn a { background:#24498c; } #facility #facility_ban .safety { margin-top:-168px; float:left; width:20%; height:334px; background:#fafafa url('/culture/images/main/sisul06.jpg') no-repeat center bottom 36px; text-align:center; } #facility #facility_ban .safety:hover { background:#f9f9f9; } #facility #plug { float:right; width:349px; height:260px; border:1px solid #dddddd; } #facility #plug>p { text-align:center; } #facility #plug .sub { margin-top:35px; color:#555555; } #facility #plug .tit { color:#000000; font-size:30px; font-weight:300; line-height:32px; } #facility #plug .tit span { font-weight:500; } #facility #plug ul { overflow:hidden; margin-top:30px; padding:0 30px; } #facility #plug ul li { float:left; width:50%; margin-bottom:18px; } #facility #plug ul li a { display:block; padding-left:55px; transition:all 0.3s ease; } #facility #plug ul li a span { display:block; color:#000000; font-weight:400; line-height:45px; } #facility #plug ul li a span.size { color:#666666; font-size:13px; } #facility #plug ul li.plug01 a { background:url('/culture/images/main/plug01_2021.jpg') no-repeat; } #facility #plug ul li.plug01 a:hover { background:url('/culture/images/main/plug01_ov_2021.jpg') no-repeat; } #facility #plug ul li.plug02 a { background:url('/culture/images/main/plug02_2021.jpg') no-repeat; } #facility #plug ul li.plug02 a:hover { background:url('/culture/images/main/plug02_ov_2021.jpg') no-repeat; } #facility #plug ul li.plug03 a { background:url('/culture/images/main/plug03_2021.jpg') no-repeat; } #facility #plug ul li.plug03 a:hover { background:url('/culture/images/main/plug03_ov_2021.jpg') no-repeat; } #facility #plug ul li.plug04 a { background:url('/culture/images/main/plug04_2021.jpg') no-repeat; } #facility #plug ul li.plug04 a:hover { background:url('/culture/images/main/plug04_ov_2021.jpg') no-repeat; } #facility #plug ul li.plug05 a { background:url('/culture/images/main/plug05_2021.jpg') no-repeat; } #facility #plug ul li.plug05 a:hover { background:url('/culture/images/main/plug05_ov_2021.jpg') no-repeat; } #facility #jin { float:right; width:349px; height:73px; background:#ffa73e; border:1px solid #dddddd; border-top:none; text-align:center; } #facility #jin a { display:inline-block; background:url('/culture/images/main/jindalrea.png') no-repeat left 50%; padding-left:50px; font-size:18px; color:#fff; line-height:73px; } /*****************************************************************************************************************************************************************************************/ @media all and (max-width:1750px) { .main_nav { top:25%; right:2%; } } @media all and (max-width:1350px) { #posterControl .prev a { margin-left:0px; left:0%; background:rgba(29,48,84,0.8); } #posterControl .next a { margin-right:0px; right:0%; background:rgba(29,48,84,0.8); } #posterControl a:hover { background:#121212; } } @media all and (min-width:1200px) { body.scroll_lock { overflow:hidden; } #news #schedule ul { height:321px; } } @media all and (max-width:1199px) { #posterControl .prev a, #posterControl .next a { display:block; } #performance>ul { margin-left:-297.5px; } #container #scene01 { padding:0 0 80px 0; } #container .scene { padding:0 20px 80px 20px; height:auto; } #container #scene02>div:first-child, #container #scene03>div:first-child, #container #scene04>div:first-child { margin-bottom:0; padding-top:0; } #news>div { margin-right:1% } #news #schedule { width:45%; } #news #popupzone { width:30%; } #news #popupzone .popup { width:100%; } #news #quick { width:23% } #facility #facility_ban, #facility #plug, #facility #jin { float:none; margin-bottom:10px; width:100%; box-sizing:border-box; } #facility #plug { height:auto; } #facility #plug ul li { width:20%; } .scroll_btn, .main_nav { display:none; } } @media all and (max-width:950px) { #reservation .tab { width:30%; } #reservation .list { width:69% } table.m_edu_list th:nth-child(2), table.m_edu_list td:nth-child(2), table.m_edu_list th:nth-child(3), table.m_edu_list td:nth-child(3), table.m_edu_list th:nth-child(4), table.m_edu_list td:nth-child(4) { display:none; } #news>div { margin-right:0% } #news h3 { padding:15px 20px; font-size:18px; } #news #schedule { width:100%; margin-bottom:1%; } #news #schedule ul li { position:relative; } #news #schedule ul li a { padding:15px 20px; } #news #schedule ul li a span { width:80%; } #news #schedule ul li a span.date { position:absolute; z-index:4; top:2px; right:20px; width:auto; } #news #schedule .more_btn { top:13px; right:20px; } #news #popupzone { width:49.5%; } #news #popupzone .popup_btn { top:13px; right:20px; } #news #quick { width:49.5% } #facility #plug ul li a span { font-size:14px; } #facility #facility_ban .info p { font-size:13px; } #performance_new ul {gap: 10px;} } @media all and (min-width:769px) { } @media all and (max-width:768px) { .main_nav { display:none; } #container #scene01 { background-position:center top; } #container #scene01>div:first-child { margin-bottom:40px; padding-top:80px; } #container .scene>div>h3, #container .scene>div>p.tit { padding-top:40px; font-size:30px; } #container #scene01>div>h3 { padding-top:70px; } #container .scene>div>p.sub { margin-top:5px; font-size:15px; } #performance>ul { margin-left:-150px; } #performance>ul>li { overflow:hidden; width:300px; height:193px; } #performance>ul>li .poster img { width:100%; height:auto; } #performance>ul>li .info { padding:25px; width:300px; height:193px; box-sizing:border-box; text-align:center; } #performance>ul>li .info .info_detail { display:none; } #performance>ul>li .info .info_top>p { font-size:15px; } #performance>ul>li .info .info_top>div { margin-top:10px; border-bottom:0px; } #performance>ul>li .info .info_top>div .tit { float:none; width:100%; font-size:22px; line-height:150%; } #performance>ul>li .info .info_top>div .p_btn { float:none; margin:0 auto; margin-top:20px; width:60%; } #posterControl a { top:58%; } #posterControl .prev a { left:8%; } #posterControl .next a { right:8%; } #reservation, #news, #facility { margin-top:40px; } #reservation .tab { width:35%; } #reservation .list { width:64% } #news #popupzone .popup, #news #popupzone .popup li a img { height:280px; } #news #schedule ul li a span.subject { font-size:14px; } #news #quick ul li { height:auto !important; } #news #quick ul li a { padding-top:55%; height:140px !important; box-sizing:border-box; background-position:center 27px !important; } #facility #facility_ban { height:auto; } #facility .reveal>div { width:50% !important; } #facility #facility_ban .hall { padding-left:37px; width:50%; height:167px; background-position:right 30px top 25px; text-align:left; } #facility #facility_ban .hall h3 { padding-top:30px; } #facility #facility_ban .info.long { padding:0; background:none; } #facility #facility_ban .hall .more_btn, #facility #facility_ban .safety .more_btn { margin-top:10px; } #facility #facility_ban .music { border-right:0px; border-bottom:0px; } #facility #facility_ban .meeting { border-top:1px solid #dddddd;} #facility #facility_ban .soccer { border-right:0px; } #facility #facility_ban .safety { margin-top:0px; padding-left:37px; width:50%; height:167px; background-position:right 30px top 37px; text-align:left; } #facility #facility_ban .hall:hover, #facility #facility_ban .safety:hover { padding-left:0; width:40%; background:#f9f9f9; text-align:center; transition:all 0.3s ease; } #facility #facility_ban .hall:hover h3, #facility #facility_ban .safety:hover h3 { padding-top:15px; margin-bottom:8px; } #facility #plug ul li a { background-position:center top !important; padding:55px 0 0 0; text-align:center; } } @media all and (max-width:640px) { #posterControl a { top:61%; transition:all 0.1s ease; } #posterControl .prev a { left:0%; } #posterControl .next a { right:0%; } /* #reservation .tab { float:none; margin-bottom:5px; padding:16px; width:100%; height:auto; } #reservation .list { float:none; padding:16px; width:100% } #reservation .field>p { border:1px solid #eeeeee; background:#f8f8f8; box-sizing:border-box; } #reservation .field>p.select { border:1px solid #f0531b; background:#ffffff; } #reservation .field>p a { padding:3px 0; background:none !important; font-size:16px; line-height:150%; border-bottom:0px !important; } #reservation .institution_list ul { margin-top:10px; height:150px; background:#fff; border-top:0px solid #eeeeee; border-bottom:1px solid #eeeeee; } #reservation .institution_list ul li { width:100%; border-bottom:1px dotted #dddddd; } #reservation .institution_list ul li a { font-size:13px; } #container .scene { height:auto; min-height:955px; } #reservation .list { height:auto; } #reservation .list>div { height:250px; } table.m_edu_list th { padding-bottom:10px; border-bottom:1px solid #f0531b; color:#f0531b; } table.m_edu_list td { padding:10px; font-size:13px; } table.m_edu_list td:first-child { width:65%; } table.m_edu_list td:last-child { width:35%; } */ #container #scene01 { padding:0 0 50px 0; } #container .scene { padding: 0 20px 50px 20px; } #container #scene01>div:first-child { margin-bottom:30px; } #container #scene01>div>h3 { padding-top:60px; } #container .scene>div>h3, #container .scene>div>p.tit { padding-top:30px; font-size:24px; font-weight:500; } #container .scene>div>p.sub { margin-top:3px; font-size:13px; } #reservation, #news, #facility { margin-top:30px; } #reservation .tab { float:none; margin-bottom:10px; padding:0px; width:100%; height:auto; background:#e7e7e7; } #reservation .list { float:none; padding:0px; width:100% } #reservation .field>p { border:1px solid #eeeeee; background:#f8f8f8; box-sizing:border-box; } #reservation .field>p.select { border:1px solid #f0531b; background:#ffffff; } #reservation .field>p a { padding:5px 0; background:none !important; line-height:150%; border-bottom:0px !important; } #reservation .institution_list ul { margin-top:10px; padding:2% 0; height:150px; background:#fff; border-top:0px solid #eeeeee; border-bottom:1px solid #eeeeee; } #reservation .institution_list ul li { margin:0 auto; width:96%; border-bottom:1px dotted #dddddd; } #reservation .institution_list ul li a { font-size:13px; } #reservation .institution_list ul li.select a { background:#f0531b; } #container .scene { height:auto; } #reservation .list { height:auto; } #reservation .list>div { height:250px; } table.m_edu_list { margin:0 auto; width:96%; } table.m_edu_list th { padding:10px 0; border-bottom:1px solid #f0531b; color:#f0531b; } table.m_edu_list td { padding:10px; font-size:13px; } table.m_edu_list td:first-child { width:65%; } table.m_edu_list td:last-child { width:35%; } #news #schedule { margin-bottom:10px; } #news #schedule ul li a span { width:76%; } #news #schedule ul li a span.subject { font-size:14px; } #news #popupzone { margin-bottom:10px; width:100%; } #news #popupzone .popup { height:auto; } #news #popupzone .popup li a img { height:auto; } #news #quick { width:100%; } #news #quick ul li { width:25%; } #news #quick ul li a { padding-top:90px; height:130px; } #news #quick ul li.quick02 a { border-right:1px solid #dddddd; } #facility .hall, #facility .meeting, #facility .soccer, #facility .safety { padding:0 !important; background-position:center 20px !important; } #facility #facility_ban .info { display:none; } #facility #facility_ban h3 { margin-bottom:10px !important; padding-top:120px !important; transition:all 0.3s ease; text-align:center; font-size:16px; } #facility #facility_ban>div:hover h3 { padding-top:45px !important; } #facility #facility_ban .meeting .more_btn, #facility #facility_ban .soccer .more_btn { width:60%; } #facility #plug ul { padding:0 10px; } } @media all and (max-width:480px) { #posterControl a { top:65%; padding-top:10px; width:40px; height:40px; transition:all 0.1s ease; } #posterControl a img { width:30%; } #news #quick ul li { width:50%; } #news #quick ul li a { padding-top:75px; height:110px !important; box-sizing:border-box; background-size:50px !important; background-position:center 13px !important; font-size:13px; } #news #quick ul li.quick01 a { background-size:60px !important; background-position:center 21px !important; } #news #quick ul li.quick02 a { border-right:0px solid #dddddd; } #facility #plug ul li { width:33%; } #facility #plug ul li.plug04 { padding-left:16%; } #performance_new ul {gap: 5px;} }