@charset "UTF-8"; /* common */ .swiper-pagination{display:inline-block; position:relative; text-align:center;} .swiper-pagination-bullet{display:inline-block; position:relative; width:40px; height:6px; margin:3px 2px; background:transparent; border:1px solid #fff; border-radius:0; opacity:.5; vertical-align:top; transition:.2s;} .swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{background:#fff;} .swiper-pagination-bullet-active{background:#fff; opacity:1;} .swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{} .swiper-button-play, .swiper-button-pause{display:none; position:relative; width:10px; height:12px; margin-left:6px; font-size:0; vertical-align:top; opacity:1; cursor:pointer; z-index:10;} .swiper-button-play:focus, .swiper-button-pause:focus, .swiper-button-play:hover, .swiper-button-pause:hover{opacity:1;} .swiper-button-play{background:url('../images/ico_play.png') no-repeat center;} .swiper-button-pause{background:url('../images/ico_pause.png') no-repeat center;} .swiper-button-play.active, .swiper-button-pause.active{display:inline-block;} .swiper-button-prev, .swiper-button-next{display:block; position:absolute; width:32px; height:29px; top:auto; left:auto; right:auto; margin-top:auto; background:transparent; background-size:auto; opacity:.5; transition:.2s;} .swiper-button-prev:after, .swiper-button-next:after{content:''; display:inline-block; position:absolute; width:32px; height:9px; top:50%; right:50%; margin-top:-4.5px; margin-right:-16px; opacity:1; z-index:5;} .swiper-button-prev:after{background:url('../images/ico_prev.png') no-repeat center / cover;} .swiper-button-next:after{background:url('../images/ico_next.png') no-repeat center / cover;} .swiper-button-prev:focus, .swiper-button-prev:hover, .swiper-button-next:focus, .swiper-button-next:hover{opacity:1;} .moreBtn{display:inline-block; position:relative; width:13px; height:13px; text-indent:-999999px; transition:transform .2s;} .moreBtn:before, .moreBtn:after{content:''; position:absolute; background:#88b2df;} .moreBtn.white:before, .moreBtn.white:after{background:#fff;} .moreBtn:before{top:0; left:50%; width:1px; height:100%; margin-left:-0.5px;} .moreBtn:after{top:50%; left:0; width:100%; height:1px; margin-top:-0.5px;} .moreBtn:focus, .moreBtn:hover, a:focus .moreBtn, a:hover .moreBtn{transform:rotate(90deg);} /* visual */ #mainVisual{position:relative; width:100%; height:594px; margin:0 auto; background:#fff; overflow:hidden;} #mainVisual:after{content:''; clear:both; display:block;} #mainVisual .inner{height:100%; padding:0;} #mainVisual .swiper-container{width:100%;/* max-width:1920px;*/ height:100%;} #mainVisual .swiper-container .bg01{background:url('../images/main/main_visual_01.jpg') no-repeat right 50% top 50%; background-size:cover;} #mainVisual .swiper-container .bg02{background:url('../images/main/main_visual_02.jpg') no-repeat right 50% top 50%; background-size:cover;} #mainVisual .swiper-container .bg03{background:url('../images/main/main_visual_03.jpg') no-repeat right 50% top 50%; background-size:cover;} #mainVisual .txtBox{position:absolute; width:100%; top:50%; left:10px; margin-top:-40px; transform:translateY(-50%); text-align:left; z-index:2;} #mainVisual .txtBox p{display:block; line-height:1.4; margin:0 auto; color:#fff; font-size:2.5rem; font-weight:700; word-break:keep-all; text-shadow:1px 1px 3px rgba(0,0,0,.2); cursor:default;} #mainVisual .txtBox p strong{display:inline-block; margin-top:12px; font-size:3.25rem; font-weight:700;} #mainVisual .swiper-slide-active .fade-in-bottom p{-webkit-animation:fade-in-bottom .8s ease-in-out .2s both; animation:fade-in-bottom .8s ease-in-out .2s both; -webkit-animation-delay:0s; animation-delay:0s;} #mainVisual .swiper-slide-active .fade-in-bottom p strong{-webkit-animation:fade-in-bottom .8s ease-in-out .2s both; animation:fade-in-bottom .8s ease-in-out .2s both; -webkit-animation-delay:.2s; animation-delay:.2s;} #mainVisual .bgBox{position:absolute; width:100%; height:100%; top:0;} #mainVisual .bgBox .control{position:absolute; width:100%; top:50%; margin-top:-14.5px;} #mainVisual .bgBox .control .swiper-button-prev{left:32px;} #mainVisual .bgBox .control .swiper-button-next{right:32px;} #mainVisual .bgBox .inner{height:auto;} #mainVisual .bgBox .pager{position:absolute; top:40px; right:10px; text-align:right;} /* contents */ #mainContents{clear:both; position:relative; width:100%; min-width:1200px; margin:0 auto; padding:0; background:transparent; z-index:1;} #mainContents .boardTitle{margin:0 0 20px; color:#333; font-size:1.5rem; font-weight:700;} #mainContents .area01, #mainContents .area02, #mainContents .area03, #mainContents .area04{clear:both; width:100%; padding:60px 0;} #mainContents .area01{margin-top:-80px; padding:0;} #mainContents .area01 .quick{background:#fff; border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,.1);} #mainContents .area01 .quick ul{display:inline-block; width:100%;} #mainContents .area01 .quick ul li{float:left; width:25%; padding:40px 48px;} #mainContents .area01 .quick ul li a{display:block;} #mainContents .area01 .quick ul li a img{margin-right:20px; transition:.2s;} #mainContents .area01 .quick ul li a span{font-size:1.125rem; vertical-align:middle; transition:.2s;} #mainContents .area01 .quick ul li a:focus, #mainContents .area01 .quick ul li a:hover{} #mainContents .area01 .quick ul li a:focus img, #mainContents .area01 .quick ul li a:hover img{transform:translateY(-8px);} #mainContents .area01 .quick ul li a:focus span, #mainContents .area01 .quick ul li a:hover span{color:#0066b3;} #mainContents .area02{position:relative;} #mainContents .area02:before{content:''; display:block; position:absolute; width:100%; height:calc(100% + 85px); right:0; bottom:0; background:transparent url('../images/main/bg_symbol_big.png') no-repeat right center; z-index:-1;} /*#mainContents .area02 .inner{display:flex; flex-wrap:wrap;}*/ #mainContents .area02 .board.notice{display:inline-block; display:flex; flex-wrap:wrap; position:relative; float:left; width:64.41%; margin:0 auto 48px; background:#fff; border:1px solid #eee; border-radius:12px;} #mainContents .area02 .board.notice .tab{clear:both; display:block; position:relative; float:left; width:21%; margin:0 auto; padding:28px; border-right:1px solid #ddd;} #mainContents .area02 .board.notice .tab .boardTitle{margin:0 auto 16px;} #mainContents .area02 .board.notice .tab > ul{display:inline-block; width:100%; margin:0 auto 68px; padding:0; text-align:center;} #mainContents .area02 .board.notice .tab > ul li{display:block;} #mainContents .area02 .board.notice .tab > ul li:last-child:after{content:''; clear:both; display:block;} #mainContents .area02 .board.notice .tab > ul li .tabLink{display:block; position:relative; width:100%; line-height:0.8; /* 자료실 제외될 경우 line-height:1; */ padding:8px 0; /* 자료실 제외될 경우 padding:10px 0; */ background:none; color:#959b9d; font-size:1rem; text-align:left; cursor:pointer; outline:none; transition:transform 0s;} #mainContents .area02 .board.notice .tab > ul li .tabLink:focus, #mainContents .tab > ul li .tabLink:hover{color:#333;} #mainContents .area02 .board.notice .tab > ul li .tabLink:after{content:''; display:block; position:absolute; width:0; height:1px; top:50%; right:-28px; background:#0d4fa0; transition:.2s;} #mainContents .area02 .board.notice .tab > ul li .tabLink.active{color:#0d4fa0; font-weight:500;} #mainContents .area02 .board.notice .tab > ul li .tabLink.active:after{width:58px;} #mainContents .area02 .board.notice .tabCon{display:block; float:right; width:79%; margin:0 auto; padding:28px;} #mainContents .area02 .board.notice .tabCon .tabItem{display:none;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list{} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li{border-bottom:1px solid #ddd;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li:last-child{border-bottom:none;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a{display:block; padding:24px 0;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li:first-child a{padding-top:0;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li:last-child a{padding-bottom:0;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a p{} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a p.listTitle{margin:0 auto 12px; font-size:1.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a p.listInfo{} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a p.listInfo span{display:inline-block; color:#959b9d; font-size:1rem; font-weight:400;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a p.listInfo span.listCategory{} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a p.listInfo span.listDate{letter-spacing:-0.035em;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a p.listInfo span.listCategory + span.listDate:before{content:'·'; display:inline-block; margin:0 6px 0 4px;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a:focus, #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a:hover{color:#0066b3; font-weight:500;} #mainContents .area02 .board.notice .tabCon .tabItem.active{display:block;} #mainContents .area02 .board.notice .tabCon .tabItem.active ul.list li{-webkit-animation:fade-in-bottom .8s ease-in-out .2s both; animation:fade-in-bottom .8s ease-in-out .2s both; -webkit-animation-delay:0s; animation-delay:0s;} #mainContents .area02 .board.notice .tabCon .tabItem.active ul.list li:nth-child(2){-webkit-animation-delay:.1s; animation-delay:.1s;} #mainContents .area02 .board.notice .tabCon .tabItem.active ul.list li:nth-child(3){-webkit-animation-delay:.2s; animation-delay:.2s;} #mainContents .area02 .board.notice .more{position:absolute; bottom:28px; left:28px; color:#88b2df;} #mainContents .area02 .board.notice .more span.moreBtn{margin-left:8px;} #mainContents .area02 .gallery{position:relative; float:right; width:30.51%; margin:0 auto 48px; padding:28px; background:#959b9d; border-radius:12px;} #mainContents .area02 .gallery .boardTitle{color:#fff;} #mainContents .area02 .gallery .swiper-container{width:100%; max-width:304px;} #mainContents .area02 .gallery .swiper-slide a{display:block;} #mainContents .area02 .gallery .imgBox{position:relative; margin:0 auto 12px;} #mainContents .area02 .gallery .imgBox:after{content:''; display:block; position:absolute; width:100%; height:56px; bottom:0; background:linear-gradient(0deg, #959b9d 12%, #959b9d00 100%);} #mainContents .area02 .gallery .imgBox img{width:100%; min-height:177px;} #mainContents .area02 .gallery .txtBox{position:relative; margin-top:-4.25em;} #mainContents .area02 .gallery .txtBox p{display:block; line-height:1.4; margin:0 auto; color:#fff; font-size:1.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:1px 1px 3px rgba(0,0,0,.2);} #mainContents .area02 .gallery .txtBox p.listTitle{} #mainContents .area02 .gallery .txtBox p.listInfo{} #mainContents .area02 .gallery .txtBox p.listInfo span.listDate{color:#ccc; font-size:.813rem; font-weight:400; letter-spacing:-.035em;} #mainContents .area02 .gallery .swiper-slide a:focus, #mainContents .area02 .gallery .swiper-slide a:hover{font-weight:500;} #mainContents .area02 .gallery .bgBox{width:100%; top:0; left:0; z-index:2;} #mainContents .area02 .gallery .bgBox .control{position:absolute; width:100%; top:50%; left:0;} #mainContents .area02 .gallery .bgBox .control .swiper-button-prev{left:12px;} #mainContents .area02 .gallery .bgBox .control .swiper-button-next{right:12px;} #mainContents .area02 .gallery .bgBox .pager{position:absolute; top:36px; left:104px; text-align:left;} #mainContents .area02 .gallery .bgBox .pager .swiper-pagination{width:auto; top:auto; bottom:auto; left:auto;} #mainContents .area02 .gallery .bgBox .pager .swiper-pagination-bullet{width:6px;} #mainContents .area02 .gallery .bgBox .more{position:absolute; top:34px; right:28px; color:#fff;} #mainContents .area02 .gallery .bgBox .more span.moreBtn{margin-left:8px;} #mainContents .area02 .news{clear:both; position:relative; margin:0 auto; padding:28px; background:#fff; border-radius:12px;} #mainContents .area02 .news .boardTitle{} #mainContents .area02 .news ul.list{display:inline-block; margin:0 -16px;} #mainContents .area02 .news ul.list li{float:left; width:25%; padding:0 16px; -webkit-animation:fade-in-bottom .8s ease-in-out .2s both; animation:fade-in-bottom .8s ease-in-out .2s both; -webkit-animation-delay:0s; animation-delay:0s;} #mainContents .area02 .news ul.list li:nth-child(2){-webkit-animation-delay:.1s; animation-delay:.1s;} #mainContents .area02 .news ul.list li:nth-child(3){-webkit-animation-delay:.2s; animation-delay:.2s;} #mainContents .area02 .news ul.list li:nth-child(4){-webkit-animation-delay:.3s; animation-delay:.3s;} #mainContents .area02 .news ul.list li a{} #mainContents .area02 .news ul.list li a .imgBox{margin:0 auto 12px;} #mainContents .area02 .news ul.list li a .imgBox img{width:100%;} #mainContents .area02 .news ul.list li a .txtBox{} #mainContents .area02 .news ul.list li a .txtBox p{} #mainContents .area02 .news ul.list li a .txtBox p{margin:0 auto 4px; font-size:1.125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #mainContents .area02 .news ul.list li a .txtBox p.listTitle{} #mainContents .area02 .news ul.list li a .txtBox p.listInfo{} #mainContents .area02 .news ul.list li a .txtBox p.listInfo span.listDate{color:#959b9d; font-size:.813rem; font-weight:400; letter-spacing:-.035em;} #mainContents .area02 .news ul.list li a:focus, #mainContents .area02 .news ul.list li a:hover{color:#0066b3; font-weight:500;} #mainContents .area02 .news .more{position:absolute; top:28px; right:28px; color:#88b2df;} #mainContents .area02 .news .more span.moreBtn{margin-left:8px;} #mainContents .area03{background:#fff url('../images/main/bg_university.jpg') no-repeat center; background-size:cover;} #mainContents .area03 .university{text-align:center;} #mainContents .area03 .university img{width:100%; max-width:848px;} #mainContents .area03 .university p{position:absolute; width:100%; bottom:32px; left:0; color:#0f66ae; font-size:0.938rem; letter-spacing:-0.035em; text-transform:uppercase; opacity:.4;} #mainContents .area03 .university p br{display:none;} #mainContents .area03 .university p.info{bottom:16px; color:#0f66ae; font-size:0.75rem; letter-spacing:-0.055em; opacity:.35;} /*#mainContents .area04{background:#003372 url('../images/main/bg_sites.jpg') no-repeat center; background-size:cover;} #mainContents .area04 .familysite{} #mainContents .area04 .familysite p.boardTitle{float:left; width:20%; line-height:1.6; color:#fff;} #mainContents .area04 .familysite p.boardTitle br{} #mainContents .area04 .familysite .sitesW{display:inline-block; position:relative; float:right; width:80%; padding:0 44px;} #mainContents .area04 .familysite ul{} #mainContents .area04 .familysite ul li{display:inline-block; float:left; width:32%; margin:10px 0;} #mainContents .area04 .familysite ul li a{display:block; padding:13px 21px; background:#fff; border:3px solid transparent; border-radius:12px;} #mainContents .area04 .familysite ul li a img{width:40px; margin-right:16px;} #mainContents .area04 .familysite ul li a span{font-size:1.125rem; vertical-align:middle;} #mainContents .area04 .familysite ul li a:focus, #mainContents .area04 .familysite ul li a:hover{border:3px solid #b4d5f8; box-shadow:0 4px 8px rgba(0,0,0,.1); color:#0f66ae; font-weight:700;} #mainContents .area04 .familysite .bgBox{width:100%; top:0; left:0; z-index:2;} #mainContents .area04 .familysite .bgBox .control{position:absolute; width:100%; top:50%; left:0; margin-top:-14.5px;} #mainContents .area04 .familysite .bgBox .control .swiper-button-prev{left:0;} #mainContents .area04 .familysite .bgBox .control .swiper-button-next{right:0;}*/ #mainContents .area04{padding:2.5em 0; background:#fff;} #mainContents .area04 .familysite{} #mainContents .area04 .familysite p.boardTitle{position:absolute; margin:-1px;} #mainContents .area04 .familysite p.boardTitle br{} #mainContents .area04 .familysite .sitesW{display:inline-block; position:relative; width:100%; padding:0 1.75em;} #mainContents .area04 .familysite .sitesW .swiper-container{overflow:visible;} #mainContents .area04 .familysite ul{display:flex; flex-wrap:wrap; justify-content:center; gap:.5em;} #mainContents .area04 .familysite ul li{flex:1; display:inline-block;} #mainContents .area04 .familysite ul li a{display:block; padding:0; background:#fff; border-radius:12px; transition:.3s; overflow:hidden;} #mainContents .area04 .familysite ul li a img{position:relative; width:100%; max-width:fit-content; border-radius:12px;} #mainContents .area04 .familysite ul li a span{} #mainContents .area04 .familysite ul li a:focus, #mainContents .area04 .familysite ul li a:hover{opacity:.6;} #mainContents .area04 .familysite .bgBox{display:none; width:100%; top:0; left:0; z-index:2;} #mainContents .area04 .familysite .bgBox .control{position:absolute; width:100%; top:50%; left:0; margin-top:-14.5px;} #mainContents .area04 .familysite .bgBox .control .swiper-button-prev{left:0;} #mainContents .area04 .familysite .bgBox .control .swiper-button-next{right:0;} @media only screen and (max-width:1279px){ #mainVisual{height:500px;} #mainVisual .txtBox{left:100px;} #mainContents{min-width:960px;} #mainContents .area01 .quick ul li{padding:36px 38px;} #mainContents .area01 .quick ul li a img{margin-right:12px;} #mainContents .area02 .board.notice .tab{width:26%;} #mainContents .area02 .board.notice .tabCon{width:74%;} #mainContents .area02 .gallery{width:32%;} /*#mainContents .area04 .familysite p.boardTitle{width:14%;} #mainContents .area04 .familysite .sitesW{width:86%;} #mainContents .area04 .familysite ul li a{padding:13px 18px;} #mainContents .area04 .familysite ul li a img{width:36px; margin-right:12px;} #mainContents .area04 .familysite ul li a span{font-size:1.063rem;}*/ #mainContents .area04 .familysite ul li{flex:1 1 100%; max-width:calc(25% - .5em);} } @media only screen and (max-width:1023px){ #mainVisual{height:440px;} #mainVisual .txtBox{margin-top:-25px;} #mainVisual .txtBox p{font-size:2rem;} #mainVisual .txtBox p strong{font-size:2.75rem;} #mainVisual .bgBox .pager{right:28px;} #mainVisual .bgBox .control .swiper-button-prev{left:28px;} #mainVisual .bgBox .control .swiper-button-next{right:28px;} #mainContents{min-width:100%;} #mainContents .area01, #mainContents .area02, #mainContents .area03, #mainContents .area04{padding:40px 0;} #mainContents .area01{margin-top:-50px; padding:0;} #mainContents .area01 .quick ul li{padding:28px 32px;} #mainContents .area01 .quick ul li a img{width:42px; margin-right:4px;} #mainContents .area01 .quick ul li a:focus img, #mainContents .area01 .quick ul li a:hover img{transform:translateY(-4px);} #mainContents .area02 .board.notice{float:none; width:100%; margin:0 auto 20px;} #mainContents .area02 .board.notice .tab > ul{margin:0 auto 60px;} #mainContents .area02 .gallery{float:none; width:100%; margin:0 auto 20px;} #mainContents .area02 .gallery .swiper-container{max-width:100%;} #mainContents .area02 .gallery .imgBox img{min-height:auto;} #mainContents .area02 .news ul.list{margin:-16px;} #mainContents .area02 .news ul.list li{width:50%; padding:16px;} #mainContents .area03 .university img{width:96%;} /*#mainContents .area04 .familysite p.boardTitle{float:none; width:100%; margin:0 auto 12px; text-align:center;} #mainContents .area04 .familysite p.boardTitle br{display:none;} #mainContents .area04 .familysite .sitesW{float:none; width:100%;} #mainContents .area04 .familysite ul li{width:32.5%; margin:4px auto;} #mainContents .area04 .familysite ul li a{padding:12px 16px;} #mainContents .area04 .familysite ul li a img{width:32px;} #mainContents .area04 .familysite ul li a span{font-size:.938rem;}*/ #mainContents .area04 .familysite .sitesW{padding:0;} } @media only screen and (max-width:768px){ #mainVisual{height:360px;} #mainVisual .txtBox{left:20%; margin-top:-30px;} #mainVisual .txtBox p{font-size:1.25rem;} #mainVisual .txtBox p strong{font-size:1.75rem;} #mainVisual .bgBox .pager{top:24px; right:24px;} #mainVisual .bgBox .control .swiper-button-prev{left:24px;} #mainVisual .bgBox .control .swiper-button-next{right:24px;} #mainContents .boardTitle{font-size:1.25rem;} #mainContents .area01, #mainContents .area02, #mainContents .area03, #mainContents .area04{padding:30px 0;} #mainContents .area01{margin-top:-60px; padding:0;} #mainContents .area01 .quick ul li{padding:28px; text-align:center;} #mainContents .area01 .quick ul li a img{display:block; margin:0 auto;} #mainContents .area01 .quick ul li a span{font-size:1rem;} #mainContents .area02 .board.notice .tab > ul{margin:0 auto 48px;} #mainContents .area02 .board.notice .tab > ul li .tabLink.active:after{width:32px;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a p.listTitle{font-size:1.063rem;} #mainContents .area02 .board.notice .tabCon .tabItem ul.list li a p.listInfo span{font-size:0.938rem;} #mainContents .area02 .gallery{padding:20px;} #mainContents .area02 .gallery .txtBox p.listTitle{font-size:1.063rem;} #mainContents .area02 .gallery .bgBox .pager{top:24px; left:92px;} #mainContents .area02 .gallery .bgBox .more{top:24px;} #mainContents .area02 .news{padding:20px;} #mainContents .area02 .news ul.list{margin:-12px;} #mainContents .area02 .news ul.list li{padding:12px;} #mainContents .area02 .news ul.list li a .txtBox p.listTitle{font-size:1.063rem;} #mainContents .area03 .university p{bottom:8px; font-size:0.813rem;} #mainContents .area03 .university p br{display:inline;} /*#mainContents .area04 .familysite p.boardTitle{margin:0 auto 8px;} #mainContents .area04 .familysite ul li{width:48%; margin:5px auto;}*/ #mainContents .area04 .familysite ul li a img{width:120%; left:50%; transform:translateX(-50%);} } @media only screen and (max-width:540px){ #mainVisual{height:280px;} #mainVisual .txtBox{left:24px; margin-top:-45px;} #mainVisual .txtBox p{font-size:1.063rem;} #mainVisual .txtBox p strong{margin-top:4px; font-size:1.5rem;} #mainVisual .bgBox .control{display:none;} #mainContents .area01{margin-top:-90px;} #mainContents .area01 .quick ul{padding:12px 0;} #mainContents .area01 .quick ul li{width:50%; padding:10px 20px;} #mainContents .area02 .board.notice .tab{float:none; width:100%; padding:20px 20px 12px; border-right:none; border-bottom:1px solid #eee;} #mainContents .area02 .board.notice .tab .boardTitle{margin:0 auto 8px;} #mainContents .area02 .board.notice .tab > ul{display:flex; justify-content:space-evenly; margin:0 auto;} #mainContents .area02 .board.notice .tab > ul li{display:inline-block;} #mainContents .area02 .board.notice .tab > ul li .tabLink{padding:8px 0; text-align:center;} #mainContents .area02 .board.notice .tab > ul li .tabLink:after{height:2px; top:100%; right:auto; left:-1px;} #mainContents .area02 .board.notice .tab > ul li .tabLink.active:after{width:100%;} #mainContents .area02 .board.notice .tabCon{float:none; width:100%; padding:20px;} #mainContents .area02 .board.notice .more{top:20px; right:20px; bottom:auto; left:auto;} #mainContents .area02 .gallery .bgBox .more{top:20px; right:20px; bottom:auto; left:auto;} #mainContents .area02 .news ul.list{width:calc(100% + 16px); margin:-8px;} #mainContents .area02 .news ul.list li{padding:8px;} #mainContents .area02 .news .more{top:20px; right:20px;} #mainContents .area03{padding:30px 0 60px;} #mainContents .area03 .university p{bottom:-32px;} /*#mainContents .area04 .familysite ul li{width:100%; margin:2px auto;} #mainContents .area04 .familysite ul li a{text-align:center;} #mainContents .area04 .familysite ul li a img{width:28px;}*/ #mainContents .area04 .familysite ul li{max-width:calc(50% - .5em);} #mainContents .area04 .familysite ul li a img{width:110%;} } /* ie hack */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){ }