@charset "UTF-8"; /* common */ @media all and (min-width:769px){ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide, .swiper-wrapper{height:100% !important;} } .swiper-pagination{display:inline-block; position:relative; text-align:center;} .swiper-pagination-bullet{display:inline-block; position:relative; width:12px; height:12px; margin:0 4px; background:#d4d4d4; border:none; border-radius:2px; opacity:1; vertical-align:middle; transition:0.3s;} .swiper-button-prev:after, .swiper-button-next:after{font-family:inherit; font-size:0;} .swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{opacity:.8;} .swiper-pagination-bullet-active{background:#ec9c1f; opacity:1;} .swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{} .swiper-button-prev, .swiper-button-next{display:inline-block; position:absolute; width:48px; height:48px; top:50%; left:auto; right:auto; margin:0; margin-top:-24px; padding:0; border:2px solid #fff; border-radius:50%; transition:.2s;} .swiper-button-prev{background:transparent url('../images/ico_arrow_left.png') no-repeat left 48% center / 25%;} .swiper-button-next{background:transparent url('../images/ico_arrow_right.png') no-repeat right 48% center / 25%;} .swiper-button-prev:focus, .swiper-button-prev:hover{background-color:rgba(255,255,255,.2);} .swiper-button-next:focus, .swiper-button-next:hover{background-color:rgba(255,255,255,.2);} .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{background-position:center bottom !important; opacity:1;} .autoplay-progress{position:absolute; width:64%; height:2px; top:.75em; left:18%; background-color:rgba(255,255,255,.4); z-index:10;} .autoplay-progress svg{--progress:0; position:absolute; width:100%; top:0; left:0; z-index:10; stroke-width:4px; stroke:#fff; fill:none; stroke-dashoffset:calc(100 * (1 - var(--progress))); stroke-dasharray:100;} /* visual */ #mainVisual{position:relative; width:100%; width:calc(100% - 2.5em); min-width:1200px; height:600px; max-height:calc(100vh - 140px); margin:0 auto; background:#000; border-radius:4px; overflow:hidden;} #mainVisual:after{content:''; clear:both; display:block;} #mainVisual .inner{width:100%; height:100%; padding:0;} #mainVisual .swiper-container{width:100%; height:100%; border-radius:4px; overflow:hidden;} #mainVisual .swiper-container .imgW{position:absolute; width:100%; height:100%; top:0; left:0;} #mainVisual .swiper-container .imgW img{position:absolute; min-width:100%; height:auto; min-height:100%; top:50%; left:50%; object-fit:cover; transform:translate(-50%, -50%) scale(1.1); transition:3s ease;} #mainVisual .swiper-container .txtW{display:inline-block; position:absolute; width:50%; top:50%; left:50%; text-shadow:0 0 4px rgba(0,0,0,.4); transform:translate(-50%,-50%); z-index:2;} #mainVisual .swiper-container .txtW p{line-height:1.5; color:#fff; font-size:2.875em; font-weight:800; text-align:center;} #mainVisual .swiper-container .txtW p strong{font-size:1.25em;} #mainVisual .swiper-slide-active .imgW.scale-down-center img{transform:translate(-50%,-50%) scale(1.0);} #mainVisual .swiper-slide-active .txtW.fade-in-right-visual{-webkit-animation:fade-in-right-visual .8s ease-in-out .2s both; animation:fade-in-right-visual .8s ease-in-out .2s both; -webkit-animation-delay:0s; animation-delay:0s;} #mainVisual .bgBox {z-index:2;} #mainVisual .bgBox .control{position:absolute; width:100%; top:50%; margin-top:-14.5px;} #mainVisual .bgBox .control .swiper-button-prev{left:2.5em;} #mainVisual .bgBox .control .swiper-button-next{right:2.5em;} #mainVisual .bgBox .pager{position:absolute; width:150px; top:2.5em; right:2.5em; text-align:center; z-index:11;} #mainVisual .bgBox .pager .swiper-pagination span{position:absolute; color:#fff;} #mainVisual .bgBox .pager .swiper-pagination span.current{left:0; font-weight:700;} #mainVisual .bgBox .pager .swiper-pagination span.total{right:0; opacity:.4;} /* contents */ #mainContents{clear:both; position:relative; width:100%; min-width:1224px; margin:0 auto; padding:0; background:transparent; z-index:1;} #mainContents .conTitle{} #mainContents .conTitle h4{color:#22336e; font-size:2.25em; font-weight:900; text-align:center;} #mainContents .layoutLeft{width:49.19%;} #mainContents .layoutRight{width:40.81%;} #mainContents .area01, #mainContents .area02, #mainContents .area03{clear:both; position:relative; width:100%; width:calc(100% - 2.5em); margin:1.25em auto; padding:6.25em 0; border-radius:4px; overflow:hidden;} #mainContents .btnBox{clear:both; text-align:center;} #mainContents .btnBox a.more{display:inline-block; margin:0 auto; padding:.875em 1.25em; border:2px solid #4562c5; border-radius:3em; color:#4562c5; text-align:center;} #mainContents .btnBox a.more span.moreBtn{display:inline-block; width:11px; height:10px; margin-left:1.125em; background:url('../images/ico_arrow_right_blue.png'); transition:.3s;} #mainContents .btnBox a.more.white{color:#fff; border-color:#fff;} #mainContents .btnBox a.more.white span.moreBtn{background:url('../images/ico_arrow_right.png');} #mainContents .btnBox a.more:focus, #mainContents .btnBox a.more:hover{background:#4562c5; color:#fff;} #mainContents .btnBox a.more:focus span.moreBtn, #mainContents .btnBox a.more:hover span.moreBtn{margin-left:2em; background:url('../images/ico_arrow_right.png');} #mainContents .btnBox a.more.white:focus, #mainContents .btnBox a.more.white:hover{background:#fff; color:#4562c5;} #mainContents .btnBox a.more.white:focus span.moreBtn, #mainContents .btnBox a.more.white:hover span.moreBtn{background:url('../images/ico_arrow_right_blue.png');} #mainContents .area01{background:#4562c5;} #mainContents .board.notice{} #mainContents .board.notice .tab{clear:both; display:block; position:relative; margin:0 auto 3.75em;} #mainContents .board.notice .tab ul{display:inline-block; width:100%; margin:0 auto; padding:0; text-align:center;} #mainContents .board.notice .tab ul li{display:inline-block; position:relative; margin:0 1.25em;} #mainContents .board.notice .tab ul li:after{content:''; display:inline-block; position:absolute; width:5px; height:5px; top:50%; right:-1.5em; background:#3550ac; border-radius:50%; vertical-align:middle;} #mainContents .board.notice .tab ul li:last-child:after{display:none;} #mainContents .board.notice .tab ul li button.tabLink{position:relative; padding:0; background:transparent; outline:none; color:#a2b1e2; font-size:2.25em; font-weight:700; cursor:pointer;} #mainContents .board.notice .tab ul li button.tabLink:focus, #mainContents .board.notice .tab ul li button.tabLink:hover{color:#c2cbec;} #mainContents .board.notice .tab ul li button.tabLink.active{color:#fff; font-weight:900;} #mainContents .board.notice .tab ul li button.tabLink.active:before{content:''; display:block; position:absolute; width:calc(100% + 2px); height:1rem; left:-1px; bottom:6px; background:#22336e; z-index:-1;} #mainContents .board.notice .tabCon{} #mainContents .board.notice .tabCon .tabItem{display:none;} #mainContents .board.notice .tabCon .tabItem .conTitle{} #mainContents .board.notice .tabCon .tabItem ul.list{display:flex; flex-wrap:wrap; gap:1.125em;} #mainContents .board.notice .tabCon .tabItem ul.list li{flex:1 1 calc(25% - 1.125em); max-width:calc(25% - 1.125em);} #mainContents .board.notice .tabCon .tabItem ul.list li a{display:block; position:relative; min-height:170px; padding:1.75em; background:#fff; border:1px solid #d3daf6; border-radius:2px; transition:.3s;} #mainContents .board.notice .tabCon .tabItem ul.list li a:after, #mainContents .board.notice .tabCon .tabItem ul.list li a:after{content:''; display:block; position:absolute; width:calc(100% + 2px); height:calc(100% + 2px); top:-1px; left:-1px; border:0 solid #5ff878; border-radius:2px; box-sizing:border-box; transition:border .15s;} #mainContents .board.notice .tabCon .tabItem ul.list li a p{display:block; position:relative; font-size:1.125em;} #mainContents .board.notice .tabCon .tabItem ul.list li a p.listTitle{display:-webkit-box; line-height:1.5; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical; transition:.3s;} #mainContents .board.notice .tabCon .tabItem ul.list li a p.listDate{position:absolute; right:1.75em; bottom:1.75em; color:#647ccf; text-align:right; transition:.3s;} #mainContents .board.notice .tabCon .tabItem ul.list li a:focus, #mainContents .board.notice .tabCon .tabItem ul.list li a:hover{transform:translateY(-.75em);} #mainContents .board.notice .tabCon .tabItem ul.list li a:focus p.listTitle, #mainContents .board.notice .tabCon .tabItem ul.list li a:hover p.listTitle{color:#22336e; font-weight:600;} #mainContents .board.notice .tabCon .tabItem ul.list li a:focus p.listDate, #mainContents .board.notice .tabCon .tabItem ul.list li a:hover p.listDate{color:#3550ac;} #mainContents .board.notice .tabCon .tabItem ul.list li a:focus:after, #mainContents .board.notice .tabCon .tabItem ul.list li a:hover:after{border:3px solid #5ff878;} #mainContents .board.notice .tabCon .tabItem .btnBox{margin:3.75em auto 0;} #mainContents .board.notice .tabCon .tabItem .btnBox a.more{} #mainContents .board.notice .tabCon .tabItem .btnBox a.more span.moreBtn{} #mainContents .board.notice .tabCon .tabItem.news{} #mainContents .board.notice .tabCon .tabItem.education{} #mainContents .board.notice .tabCon .tabItem.active{display:block;} #mainContents .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 .board.notice .tabCon .tabItem.active ul.list li:nth-child(2){-webkit-animation-delay:.1s; animation-delay:.1s;} #mainContents .board.notice .tabCon .tabItem.active ul.list li:nth-child(3){-webkit-animation-delay:.2s; animation-delay:.2s;} #mainContents .board.notice .tabCon .tabItem.active ul.list li:nth-child(4){-webkit-animation-delay:.3s; animation-delay:.3s;} #mainContents .area02{background:transparent;} #mainContents .board.conference{} #mainContents .board.conference .conTitle{margin:0 auto 3.75em;} #mainContents .board.conference ul.list.thumb{display:flex; flex-wrap:wrap; gap:2.25em;} #mainContents .board.conference ul.list.thumb li{flex:1 1 calc(33% - 2.25em); max-width:calc(33% - 2.25em);} #mainContents .board.conference ul.list.thumb li a{display:block; position:relative; border-top:1px solid #bbb; transition:.3s;} #mainContents .board.conference ul.list.thumb li a:after, #mainContents .board.conference ul.list.thumb li a:after{content:''; display:block; position:absolute; width:100%; height:5px; top:-5px; left:0; background:transparent; box-sizing:border-box; transform:scaleY(0); transform-origin:bottom; transition:.3s;} #mainContents .board.conference ul.list.thumb li a .imgW{display:block; overflow:hidden;} #mainContents .board.conference ul.list.thumb li a .imgW img{width:100%; /*max-width:fit-content;*/ transform:scale(1); transition:.6s;} #mainContents .board.conference ul.list.thumb li a .txtW{display:block; padding:1.25em .5em;} #mainContents .board.conference ul.list.thumb li a .txtW p{display:block; position:relative; font-size:1.125em;} #mainContents .board.conference ul.list.thumb li a .txtW p.listTitle{display:-webkit-box; line-height:1.5; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition:.3s;} #mainContents .board.conference ul.list.thumb li a .txtW p.listDate{margin:0 auto .5em; color:#647ccf; transition:.3s;} #mainContents .board.conference ul.list.thumb li a:focus, #mainContents .board.conference ul.list.thumb li a:hover{} #mainContents .board.conference ul.list.thumb li a:focus .imgW img, #mainContents .board.conference ul.list.thumb li a:hover .imgW img{transform:scale(1.1);} #mainContents .board.conference ul.list.thumb li a:focus p.listTitle, #mainContents .board.conference ul.list.thumb li a:hover p.listTitle{color:#22336e; font-weight:600;} #mainContents .board.conference ul.list.thumb li a:focus p.listDate, #mainContents .board.conference ul.list.thumb li a:hover p.listDate{color:#3550ac;} #mainContents .board.conference ul.list.thumb li a:focus:after, #mainContents .board.conference ul.list.thumb li a:hover:after{background:#5ff878; transform:scaleY(1);} #mainContents .board.conference .btnBox{margin:3.75em auto 0;} #mainContents .board.conference .btnBox a.more{} #mainContents .board.conference .btnBox a.more span.moreBtn{} @media all and (min-width:1400px){ } @media all and (max-width:1279px){ #mainVisual{min-width:auto; height:480px;} #mainContents{min-width:960px;} #mainContents .area01, #mainContents .area02, #mainContents .area03{padding:4em 0;} #mainContents .board.notice .tab{margin:0 auto 2.25em;} #mainContents .board.notice .tabCon .tabItem ul.list li a{min-height:152px; padding:1.25em;} #mainContents .board.notice .tabCon .tabItem ul.list li a p{font-size:1em;} #mainContents .board.notice .tabCon .tabItem ul.list li a p.listDate{right:1.25em; bottom:1.25em;} #mainContents .board.notice .tabCon .tabItem .btnBox{margin:2.5em auto 0;} #mainContents .board.conference .conTitle{margin:0 auto 2.25em;} #mainContents .board.conference ul.list.thumb li a .txtW p{font-size:1em;} #mainContents .board.conference .btnBox{margin:2.5em auto 0;} } @media all and (max-width:1023px){ #mainVisual{width:calc(100% - 1.5em); height:360px;} #mainVisual .swiper-container .imgW img{width:100%;} #mainVisual .swiper-container .txtW{width:100%;} #mainVisual .swiper-container .txtW p{font-size:2.25em;} #mainVisual .bgBox .control .swiper-button-prev{left:1.5em;} #mainVisual .bgBox .control .swiper-button-next{right:1.5em;} #mainVisual .bgBox .pager{top:1.5em; right:1.5em;} #mainContents{min-width:100%;} #mainContents .conTitle h4{font-size:2em;} #mainContents .layoutLeft, #mainContents .layoutRight{width:100%;} #mainContents .area01, #mainContents .area02, #mainContents .area03{width:calc(100% - 1.5em); margin:.75em auto; padding:3.5em 0;} #mainContents .board.notice .tab ul li button.tabLink{font-size:2em;} #mainContents .board.notice .tabCon .tabItem ul.list{gap:.75em;} #mainContents .board.notice .tabCon .tabItem ul.list li{flex:1 1 calc(50% - .75em); max-width:calc(50% - .75em);} #mainContents .board.notice .tabCon .tabItem ul.list li a{min-height:132px;} #mainContents .board.conference ul.list.thumb{gap:1.25em;} #mainContents .board.conference ul.list.thumb li{flex:1 1 calc(33% - 1.25em); max-width:calc(33% - 1.25em);} } @media all and (max-width:768px){ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{height:auto;} .swiper-button-next, .swiper-button-prev{width:36px; height:36px; background-size:28%;} .swiper-button-prev{background-position:left 50.5% center} .swiper-button-next{background-position:right 50.5% center} #mainVisual .swiper-container .txtW p{font-size:1.75em;} #mainVisual .bgBox .control{margin-top:0;} #mainVisual .bgBox .control .swiper-button-prev{left:1em;} #mainVisual .bgBox .control .swiper-button-next{right:1em;} #mainVisual .bgBox .pager{width:80px; top:.5em; right:.5em; font-size:.75em;} #mainVisual .bgBox .pager .autoplay-progress{width:58%; top:.5em; left:21%;} #mainContents .conTitle h4{font-size:1.75em;} #mainContents .board.notice .tab ul li{margin:0 .75em} #mainContents .board.notice .tab ul li:after{right:-1em;} #mainContents .board.notice .tab ul li button.tabLink{font-size:1.75em;} #mainContents .board.notice .tabCon .tabItem ul.list li a p.listDate{font-size:.875em;} #mainContents .board.conference ul.list.thumb{gap:.75em;} #mainContents .board.conference ul.list.thumb li{flex:1 1 calc(50% - .75em); max-width:calc(50% - .75em);} #mainContents .board.conference ul.list.thumb li:first-child{flex:1 1 100%; max-width:100%;} #mainContents .board.conference ul.list.thumb li a .imgW img{max-width:100%;} #mainContents .board.conference ul.list.thumb li a .txtW p.listDate{font-size:.875em;} } @media all and (max-width:480px){ #mainVisual{height:260px;} #mainVisual .swiper-container .txtW{width:80%;} #mainVisual .swiper-container .txtW p{font-size:1.313em;} #mainVisual .swiper-container .txtW p strong{display:block;} #mainVisual .swiper-container .txtW p br{display:none;} #mainVisual .bgBox .control{display:none;} #mainContents .conTitle h4{font-size:1.313em;} #mainContents .board.notice .tab{margin:0 auto 1.5em;} #mainContents .board.notice .tab ul li button.tabLink{font-size:1.313em;} #mainContents .board.notice .tabCon .tabItem ul.list{gap:.5em;} #mainContents .board.notice .tabCon .tabItem ul.list li{flex:1 1 100%; max-width:100%;} #mainContents .board.notice .tabCon .tabItem ul.list li a:focus, #mainContents .board.notice .tabCon .tabItem ul.list li a:hover{transform:translateY(-.25em);} #mainContents .board.notice .tabCon .tabItem .btnBox{margin:2.25em auto 0;} #mainContents .board.conference .conTitle{margin:0 auto 1.5em;} #mainContents .board.conference ul.list.thumb{gap:.25em;} #mainContents .board.conference ul.list.thumb li{flex:1 1 100%; max-width:100%;} #mainContents .board.conference .btnBox{margin:1.25em auto 0;} } @media all and (max-width:374px){ } /* 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){ }