html {font-size: 20px;}
body {font-size: 0.8rem;}
/* {outline: 1px solid #ed1846;} */

.header {position: relative; z-index: 999;}
.header .container {display: flex ; padding: 0 0 0 3.5rem; line-height: 5rem;}
.header h1>a {display: block; width: 10rem; margin:0 auto 0 1.5rem; background: url(../img/main_logo_img01.png) no-repeat center center/100%; text-indent: -9999px;}
.header .gnb {margin: 0 auto}
.header .gnb>ul {display: flex;}
.header .gnb>ul>li {position: relative;}
.header .gnb>ul>li>a {display: block; padding: 0 1.5rem; font-size: 1rem;}
.header .gnb>ul>li~li>a:after {content: ""; display: block; width: 1px; height: 0.65rem; background: #ccc; position: absolute; top: 50%; left: 0; transform:translateY(-50%)}
.header .gnb>ul>li .sub {display: none; line-height: 3; width: 10rem; background: #fff; position: absolute; top: 4rem; left: 50%; transform: translateX(-50%); border: 1px solid #ddd;}
.header .gnb>ul>li:hover .sub {display: block;}
.header .gnb>ul>li .sub>li a {display: block; text-align: center;}
.header .gnb>ul>li .sub>li a:hover {display: block; background: #ed1846; color:#fff}
.header .sub_gnb>a {margin: 0 0.75rem; position: relative;}
.header .mobile_open {display: none;}

.section01 {padding: 0 0 0 5rem;}
.section01 .container {width: 100%; height: calc(100vh - 5rem); overflow: hidden;}
.section01 .container video {width: 100%;}




.section02 {padding: 0 0 0 5rem;}
.section02 .container {margin: 0 auto}
.section02 .container .link .icon {display: flex;border: 1px solid #ccc;}
.section02 .container .link .icon a {display: inline-block; width: 100%; height: 4rem; background: #fff; padding: 0.25rem 0.5rem 0.25rem 2rem; position: relative;}
.section02 .container .link .icon a~a::before {content: ""; display: block; width: 1px; height: 4rem; background: #ccc; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.section02 .container .link .icon .last { margin: 0}
.section02 .container .link .icon a:after {content: ""; display: inline-block; height: 100%; line-height: 0; vertical-align: middle; font-size: 0; margin: 0; padding: 0; border: 0;}
.section02 .container .link .icon a strong {display: inline-block; vertical-align: middle; width: 1.6rem; height: 1.6rem; text-indent: -9999px;}
.section02 .container .link .icon a .icon01 {background: url(../img/icon_01.png) no-repeat 0 -1.6rem;}
.section02 .container .link .icon a .icon02 {background: url(../img/icon_02.png) no-repeat 0 -1.6rem;}
.section02 .container .link .icon a .icon03 {background: url(../img/icon_03.png) no-repeat 0 -1.6rem;}
.section02 .container .link .icon a .icon04 {background: url(../img/icon_04.png) no-repeat 0 -1.6rem;}
.section02 .container .link .icon a .icon05 {background: url(../img/icon_05.png) no-repeat 0 -1.6rem;}
.section02 .container .link .icon a .icon06 {background: url(../img/icon_06.png) no-repeat 0 -1.6rem;}
.section02 .container .link .icon a span {font-size: 0.8rem; font-weight: 700; line-height: 1.2; margin: 0 0 0 1rem; vertical-align: middle;}
.section02 .container .link .icon a em {content: ""; display: block; width: 51px; height: 12px; background-image: url(../img/arrows_img01.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; right: 2rem; transform: translate(0, -50%); text-indent: -9999px}

.section02 .container .link .icon a:hover {background: #ed1846;}
.section02 .container .link .icon a:hover .icon01 {background: url(../img/icon_01.png) no-repeat 0 0;}
.section02 .container .link .icon a:hover .icon02 {background: url(../img/icon_02.png) no-repeat 0 0;}
.section02 .container .link .icon a:hover .icon03 {background: url(../img/icon_03.png) no-repeat 0 0;}
.section02 .container .link .icon a:hover .icon04 {background: url(../img/icon_04.png) no-repeat 0 0;}
.section02 .container .link .icon a:hover .icon05 {background: url(../img/icon_05.png) no-repeat 0 0;}
.section02 .container .link .icon a:hover .icon06 {background: url(../img/icon_06.png) no-repeat 0 0;}
.section02 .container .link .icon a:hover span {color: #fff}
.section02 .container .link .icon a:hover em {background-image: url(../img/hover_arrows_img02.png); background-repeat: no-repeat; background-size: contain;}



.section03 {padding: 5rem 1rem 2.5rem 5rem;}
.section03 .container {display: flex; margin: 0 auto;}
.section03 .con02_left {flex: 1; position: relative; border: 1px solid #ccc;}
.section03 .con02_left .title {position: absolute; top: 10%; left: 2rem; transform: translateY(-10%);}
.section03 .con02_left .title p {font-size: 1rem; font-weight: 400; margin-bottom: 1rem; color: #ed1846}
.section03 .con02_left .title h3 {font-size: 2rem; font-weight: 700; margin-bottom: 0.8rem;}
.section03 .con02_left .title span {display: block; font-size: 1.2rem; font-weight: 400; margin-bottom: 1.5rem;} 
.section03 .con02_left .title a {display: inline-block; font-size: 0.8rem; font-weight: 400;} 

.section03 .con02_right {flex: 3; overflow: hidden;}
.section03 .con02_right .tab_menu {display: flex; width: 100%; border-right: 1px solid #ccc;}
.section03 .con02_right .tab_menu>li {position: relative; flex: 1; text-align: center; height: 7rem; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.section03 .con02_right .tab_menu>li .img01 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_01.png) no-repeat center center/cover;}
.section03 .con02_right .tab_menu>li .img02 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_02.png) no-repeat center center/cover;}
.section03 .con02_right .tab_menu>li .img03 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_03.png) no-repeat center center/cover;}
.section03 .con02_right .tab_menu>li .img04 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_04.png) no-repeat center center/cover;}
.section03 .con02_right .tab_menu>li .img05 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_05.png) no-repeat center center/cover;}
.section03 .con02_right .tab_menu>li .img06 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_06.png) no-repeat center center/cover;}
.section03 .con02_right .tab_menu>li h4 {display: none;}
.section03 .con02_right .tab_menu>li~li {border-left: 1px solid #ccc;}
.section03 .con02_right .tab_menu>li.on {height: 7rem;}
.section03 .con02_right .tab_menu>li.on a {background: #fff;}
.section03 .con02_right .tab_menu>li.on h4 {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; font-weight: 700;}

.section03 .con02_right .tab_content {position: relative; height: 100%; border-right: 1px solid #ccc; overflow: hidden;}
.section03 .con02_right .tab_content>div {opacity: 0; visibility: hidden; width: 100%; height: 100%; position: absolute; top:0; left:0; transform:translateY(200px); transition: 0.5s;}
.section03 .con02_right .tab_content>div.on {opacity: 1; transform:translateY(0); visibility: visible;}
.section03 .con02_right .tab_content figure {height: inherit;}
.section03 .con02_right .tab_content figure img {width: 100%; height: 100%;}

.section03 .con02_right .tab_content .more {display: block; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center;}
.section03 .con02_right .tab_content .more span {display: block;font-size: 1rem; font-weight: 400; margin-bottom: 0.8rem; letter-spacing: 0.25em;}
.section03 .con02_right .tab_content .more em {display: block;font-size: 1.5rem; font-weight: 700; margin-bottom: 2rem; letter-spacing: 0.15em}
.section03 .con02_right .tab_content .more a {font-size: 0.8rem; font-weight: 400;}


.section04 {padding: 2.5rem 1rem 5rem 5rem;}
.section04 .newsroom {display: flex;}
.section04 .con03_left {flex: 3; display: flex; flex-flow: row wrap;margin: 0 auto;}
.section04 .con03_left .news {border: 1px solid #ccc; width: 45%;}
.section04 .con03_left .news01 {margin: 0 0.5rem 0.5rem 0}
.section04 .con03_left .news02 {margin: 0 0 0.5rem 0.5rem}
.section04 .con03_left .news03 {margin: 0.5rem 0.5rem 0 0}
.section04 .con03_left .news04 {margin: 0.5rem 0 0 0.5rem}

.section04 .con03_left .news span {display: block;font-size: 1.2rem; font-weight: 700; line-height: 1.5; text-align: left; padding: 0 5rem; margin: 5rem 0 2.5rem 0}
.section04 .con03_left .news em {display: inline-block; font-size: 0.75rem; font-weight: 300;padding: 0 5rem; position: relative;}
.section04 .con03_left .news em:after {content: ""; display: block; width: 50px; height: 12px; background-image: url(../img/arrows_img01.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 0; left: 50%; transform: translateX(100%);}
.section04 .con03_left .news:hover em:after {background-image: url(../img/hover_arrows_img01.png); background-repeat: no-repeat; background-size: contain;}

.section04 .con03_right {flex: 1; position: relative; border: 1px solid #ccc; margin-left: 1rem;}
.section04 .con03_right .title {position: absolute; top: 10%; left: 2rem; transform: translateY(-10%);}
.section04 .con03_right .title p {font-size: 1rem; font-weight: 400; margin-bottom: 1rem; color: #ed1846}
.section04 .con03_right .title h3 {font-size: 2rem; font-weight: 700; margin-bottom: 0.8rem;}
.section04 .con03_right .title span {display: block; font-size: 1.2rem; font-weight: 400; margin-bottom: 1.5rem;} 
.section04 .con03_right .title a {display: inline-block; font-size: 0.8rem; font-weight: 400;}


.section05 {padding: 5rem 1rem 5rem 5rem;}
.section05 .container {width: 100%; height: 100%; position: relative;}
.section05 figure {background: url(../img/main_img01.jpg) no-repeat center center/cover; background-attachment: fixed; text-indent: -999px; height: 20rem;}
.section05 .txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff}
.section05 .txt p {font-size: 1rem; font-weight: 300; letter-spacing: 0.25em; margin-bottom: 1rem;}
.section05 .txt h2 {font-size: 2rem; font-weight: 700;}



.section06 {padding: 5rem 1rem 5rem 5rem;}
.section06 .container {display: flex; margin: 0 auto;}
.section06 .con04_left {display: block; flex: 1; position: relative;}
.section06 .con04_left .title {position: absolute; top: 10%; left: 2rem; transform: translateY(-10%);}
.section06 .con04_left .title p {font-size: 1rem; font-weight: 400; margin-bottom: 1rem; color: #ed1846}
.section06 .con04_left .title h3 {font-size: 2rem; font-weight: 700; margin-bottom: 0.8rem;}
.section06 .con04_left .title span {display: block; font-size: 1.2rem; font-weight: 400; margin-bottom: 1.5rem;} 
.section06 .con04_left .title a {display: inline-block; font-size: 0.8rem; font-weight: 400;} 

.section06 .con04_right {flex: 3; position: relative}
.section06 .con04_right .event_slider {display: block; width: 66.8rem; text-align: center; margin: 0 auto;}
.section06 .con04_right .event_slider figure {padding: 0 0.75rem; opacity: 0.3; transform: scale(0.7);transition: 0.2s;}
.section06 .con04_right .event_slider figure.on {opacity: 1; transform: scale(1)}
.section06 .con04_right .event_slider figure img {width: 100%;}

.section06 .con04_right .event_slider span {display: block; font-size: 1.2rem; font-weight: 700; margin: 1rem 0; opacity: 0; transition: 0.2s;}
.section06 .con04_right .event_slider em {display: block; font-size: 0.8rem; font-weight: 300; margin: 1rem 0; opacity: 0; transition: 0.2s;}
.section06 .con04_right .event_slider figure.on span {opacity: 1;}
.section06 .con04_right .event_slider figure.on em {opacity: 1;}

.section07 {padding: 5rem 1rem 5rem 5rem; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.section07 .title {text-align: center;}
.section07 .title p {font-size: 1rem; font-weight: 400; margin-bottom: 1rem; color: #ed1846}
.section07 .title h3 {font-size: 2rem; font-weight: 700; margin-bottom: 0.8rem;}
.section07 .title span {display: block; font-size: 1.2rem; font-weight: 400; margin-bottom: 1.5rem;}

.section07 .container {display: flex; margin: 0 auto;}
.section07 .container .banner {flex: 2; margin: 0 1rem 0 0;}
.section07 .container .banner a {display: block; width: 100%; height: 100%; background: url(../img/banner_img01.png) no-repeat center center/cover; text-indent: -9999px;}
.section07 .container .list {flex: 3;}
.section07 .container .list ul>li {border-bottom: 1px solid #ccc;}
.section07 .container .list ul>li a {display: block; line-height: 2; margin: 0.5rem 0;}
.section07 .container .list ul>li a span {display: inline-block; width: 5rem; height: 2rem; border: 1px solid #ed1846; color: #ed1846; text-align: center; vertical-align: middle;}
.section07 .container .list ul>li a em {display: inline-block; margin-left: 1rem; width: 40rem; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.section07 .container .list ul>li a data {float: right;}
.section07 .container .list ul .important em {font-weight: 700;}

.section07 .container .list ul .more {border-bottom: none; text-align: center;}

.footer {padding: 0 0 0 5rem; background: #333;}
.footer .top {display: flex; justify-content: space-between; margin:0 auto; padding: 1rem 0 1rem 2rem; position: relative; background: #fff; border-bottom: 1px solid #ccc;}
.footer .top .left {flex: 1;}
.footer .top .left>ul {display: flex; font-size: 0;}
.footer .top .left>ul>li {display: block; margin-right: 2rem; font-size: 0.9rem;}
.footer .top .left>ul>li:before {content:""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #ccc; font-size: 0; margin: 0.1rem 0.5rem 0.1rem 0;}
.footer .top .left ul .important {color: #ed1846}
.footer .top .right {position: absolute; bottom: 0; right: 1rem; width: 10rem; text-align: center; font-size: 0.9rem; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background: #fff; line-height: 2.9rem;}
.footer .top .right ul {display: none; border-top: 1px solid #ccc}
.footer .top .right ul li {border-bottom: 1px solid #ccc}
.footer .top .right ul li:hover {background: #ed1846; color: #fff}


.footer .bottom {display: flex; justify-content: space-between; margin-top: 3rem;}
.footer .bottom .left {flex: 1; display: flex; text-align: left;}
.footer .bottom .left .logo {width: 10rem; margin: 0 0 1rem 2rem;}
.footer .bottom .left .school {margin-left: 1rem; }
.footer .bottom .left .school strong {display: block; font-size: 0.9rem; margin-bottom: 0.75rem; color: #fff}
.footer .bottom .left .school span {display: block; font-size: 0.75rem; margin-bottom: 1.5rem; color: #aaa}

.footer .bottom .right {margin-right: 1rem; flex: 2;}
.footer .bottom .right .list {display: flex; justify-content: space-between; text-align: center;}
.footer .bottom .right .list>dl {position: relative; width: 100%;}
.footer .bottom .right .list dl~dl:after {content: ""; display: block; position: absolute; width: 1px; height: 14.4rem; background: #555; top: 0; left: 0;}
.footer .bottom .right .list>dl dt {margin-bottom: 1.5rem; font-size: 0.9rem; color: #fff;}
.footer .bottom .right .list>dl dd {margin-bottom: 0.75rem; font-size: 0.75rem; color: #aaa}


.footer .copy {text-align: center; margin: 3rem 0 0 0; border-top: 1px solid #555; padding: 3rem 0;color: #aaa;}
.footer .copy p {margin-bottom: 1rem; font-size: 0.75rem}
.footer .copy address {font-size: 0.75rem;}

.left_bar {display: block; position: fixed; top: 0; left: 0; line-height: 5rem;}
.left_bar h2 {display: block; position: relative; width: 5rem; height: 100vh; background: #fff; padding: 0 1rem}
.left_bar h2 img {width: 100%;}
.left_bar h2:after {content: ""; display: block; width: 0.65rem; height: 100vh; background: #000; position: absolute; top: 2.5rem; right: 1rem;}

.wheel {display: block; position: fixed; top: 50%; left: 2rem; transform: translateX(-50%); color: #333; animation: wheel 1s infinite;}
.wheel p {display: block; font-size: 0.8rem; font-weight: 100; writing-mode: vertical-rl; text-orientation: mixed;}
.wheel p>span {display: inline-block; font-size: 0.6rem; vertical-align: bottom;}
@keyframes wheel {
    to {top: 55%;}
}


.toTop {display: none; position: fixed; bottom: 5rem; right: 5rem}
.toTop img {font-size: 2rem;}


/* Mobile버전 */

@media screen and (max-width: 768px) {
    html {font-size: 20px;}
    body {font-size: 0.8rem;}

    /* * {outline: 1px solid #ed1846;} */

    .wrap {min-width: auto;}
    .header {position: relative; z-index: 999;}
    .header .container {display: flex; position: fixed; justify-content: space-between; width: 100%; padding: 0; line-height: 5rem; background: #fff; border-bottom: 1px solid #ccc;z-index: 999;}
    .header h1>a {display: block; position: fixed; width: 5rem; margin: 0 0.75rem; background: url(../img/sub_logo_img01.png) no-repeat center center/100%; text-indent: -9999px; z-index: 999;}

    
    .header .gnb {position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; margin: 0 auto; background: #fff;z-index: 997;}
    .header .gnb.on {left: 0;}
    .header .gnb>ul {display: flex; flex-direction: column; margin-top: 5rem; height: 25rem; overflow-y: auto;}
    .header .gnb>ul>li {position: relative; line-height: 4;}
    .header .gnb>ul>li>a {display: block; padding: 0 1.5rem; font-size: 1rem; text-align: center;}
    .header .gnb>ul>li~li>a:after {content: ""; display: none; width: 1px; height: 0.65rem; background: #ccc; position: absolute; top: 50%; left: 0; transform:translateY(-50%)}
    .header .gnb>ul>li .sub {display: none; line-height: 3; width: auto; background: #fff; position: static; top: 4rem; left: 50%; transform: translateX(0); border: 1px solid #ddd;}
    .header .gnb>ul>li:hover .sub {display: none;}
    .header .gnb>ul>li .sub>li a {display: block; text-align: center;}
    .header .gnb>ul>li .sub>li a:hover {display: block; background: #ed1846; color:#fff}
    
    .header .sub_gnb {margin: 0 2.25rem 0 0; position: relative;}
    .header .sub_gnb>a {margin: 0 0 0 0.75rem; position: relative;}
    .header .mobile_open {display: block; position: fixed; top: 0; right: 0; margin: 0 0.75rem 0 0.375rem; z-index: 999;}
    .header .mobile_open.on:after {content: "\e921"; font-family: xeicon!important;}
    .header .mobile_open.on i {display: none;}
    
    .section01 {padding: 0}
    .section01 .container {width: 100%; height: 100%; overflow: hidden; padding: 5rem 0 0 0}
    .section01 .container figure video {max-width: 100%;}
 
 

    
    .section02 {padding: 0 0 2.5rem 0;}
    .section02 .container {margin: 0}
    .section02 .container .link .icon {display: flex; flex-flow: row wrap; border:none; border-bottom: 1px solid #ccc}
    .section02 .container .link .icon a {display: inline-block; width: 50%; height: 2rem; background: #fff; border-right: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0; position: relative; font-size: 0;}
    .section02 .container .link .icon a~a::before {content: ""; display: none; width: 1px; height: 4rem; background: #ccc; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
    .section02 .container .link .icon .last { margin: 0}
    .section02 .container .link .icon a:after {content: ""; display: inline-block; height: 100%; line-height: 0; vertical-align: middle; font-size: 0; margin: 0; padding: 0; border: 0;}
    .section02 .container .link .icon a strong {display: inline-block; vertical-align: middle; width: 1.6rem; height: 1.6rem; text-indent: -9999px; margin: 0 0 0 0.75rem;}
    .section02 .container .link .icon a .icon01 {background: url(../img/icon_01.png) no-repeat 0 -1.6rem;}
    .section02 .container .link .icon a .icon02 {background: url(../img/icon_02.png) no-repeat 0 -1.6rem;}
    .section02 .container .link .icon a .icon03 {background: url(../img/icon_03.png) no-repeat 0 -1.6rem;}
    .section02 .container .link .icon a .icon04 {background: url(../img/icon_04.png) no-repeat 0 -1.6rem;}
    .section02 .container .link .icon a .icon05 {background: url(../img/icon_05.png) no-repeat 0 -1.6rem;}
    .section02 .container .link .icon a .icon06 {background: url(../img/icon_06.png) no-repeat 0 -1.6rem;}
    .section02 .container .link .icon a span {font-size: 0.8rem; font-weight: 400; line-height: 1.2; margin: 0 0 0 0.75rem; vertical-align: middle;}
    .section02 .container .link .icon a em {content: ""; display: none; width: 51px; height: 12px; background-image: url(../img/arrows_img01.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; right: 2rem; transform: translate(0, -50%); text-indent: -9999px}
    
    .section02 .container .link .icon a:hover {background: #ed1846;}
    .section02 .container .link .icon a:hover .icon01 {background: url(../img/icon_01.png) no-repeat 0 0;}
    .section02 .container .link .icon a:hover .icon02 {background: url(../img/icon_02.png) no-repeat 0 0;}
    .section02 .container .link .icon a:hover .icon03 {background: url(../img/icon_03.png) no-repeat 0 0;}
    .section02 .container .link .icon a:hover .icon04 {background: url(../img/icon_04.png) no-repeat 0 0;}
    .section02 .container .link .icon a:hover .icon05 {background: url(../img/icon_05.png) no-repeat 0 0;}
    .section02 .container .link .icon a:hover .icon06 {background: url(../img/icon_06.png) no-repeat 0 0;}
    .section02 .container .link .icon a:hover span {color: #fff}
    .section02 .container .link .icon a:hover em {background-image: url(../img/hover_arrows_img02.png); background-repeat: no-repeat; background-size: contain;}
    
    
    
    .section03 {padding: 2.5rem 0 2.5rem 0;}
    .section03 .container {display: flex; flex-direction: column; margin: 0 auto;position: relative;}
    .section03 .con02_left {flex: 1; position: relative; border: none; margin: 0}
    .section03 .con02_left figure {width: auto}
    .section03 .con02_left figure img {display: none;}
    .section03 .con02_left .title {position: static; top: 0; left: 0; transform: translateY(0); text-align: center;}
    .section03 .con02_left .title p {font-size: 0.8rem; font-weight: 400; margin-bottom: 1rem; color: #ed1846}
    .section03 .con02_left .title h3 {font-size: 1.7rem; font-weight: 700; margin-bottom: 0.8rem;}
    .section03 .con02_left .title span {display: block; font-size: 1rem; font-weight: 400; margin-bottom: 1.5rem;} 
    .section03 .con02_left .title a {display: inline-block; font-size: 0.7rem; font-weight: 300; margin-bottom: 1.5rem;} 
    
    .section03 .con02_right {flex: 1;}
    .section03 .con02_right .tab_menu {display: flex; flex-flow:row wrap; position: static; top:0; left: 0; transform: translateY(0);width: 100%; border-right: 1px solid #ccc;}
    .section03 .con02_right .tab_menu>li {position: relative; flex: 1; text-align: center; height: 7rem; background: #fff; border-top: 1px solid #ccc; border-bottom: none;border-left: 1px solid #ccc;}
    .section03 .con02_right .tab_menu>li .img01 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_01.png) no-repeat center center/cover;}
    .section03 .con02_right .tab_menu>li .img02 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_02.png) no-repeat center center/cover;}
    .section03 .con02_right .tab_menu>li .img03 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_03.png) no-repeat center center/cover;}
    .section03 .con02_right .tab_menu>li .img04 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_04.png) no-repeat center center/cover;}
    .section03 .con02_right .tab_menu>li .img05 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_05.png) no-repeat center center/cover;}
    .section03 .con02_right .tab_menu>li .img06 {display: block; width: 5rem; height: 5rem; margin: 1rem auto; background: url(../img/school_icon_06.png) no-repeat center center/cover;}
    .section03 .con02_right .tab_menu>li h4 {display: none;}
    .section03 .con02_right .tab_menu>li~li {border-left: 1px solid #ccc;}
    .section03 .con02_right .tab_menu>li.on {height: 7rem;}
    .section03 .con02_right .tab_menu>li.on a {background: #fff;}
    .section03 .con02_right .tab_menu>li.on h4 {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1rem; font-weight: 700; width: 100%;}
    
    .section03 .con02_right .tab_content {position: relative; height: 10rem; border-bottom: none; border-right: none; z-index: 998;}
    .section03 .con02_right .tab_content>div {opacity: 0; visibility: hidden; width: 100%; height: 100%; position: absolute; top:0; left:0; transform:translateY(0); transition: 0.5s;}
    .section03 .con02_right .tab_content>div.on {opacity: 1; transform:translateY(0); visibility: visible;}
    .section03 .con02_right .tab_content figure img {width: none; height: none; min-width: 200%;}
    
    .section03 .con02_right .tab_content .more {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 100%;}
    .section03 .con02_right .tab_content .more span {display: block; font-size: 0.8rem; font-weight: 400; margin-bottom: 0.8rem; letter-spacing: 0.25em;}
    .section03 .con02_right .tab_content .more em {display: block; font-size: 1rem; font-weight: 700; margin-bottom: 1.5rem; letter-spacing: 0.15em;}
    .section03 .con02_right .tab_content .more a {font-size: 0.7rem; font-weight: 400;}
    
    
    .section04 {padding: 2.5rem 0 2.5rem 0;}
    .section04 .newsroom {display: flex; flex-direction: column;}
    .section04 .con03_left {flex: 3; display: flex; flex-direction: column; flex-flow: row wrap; margin: 0 auto;}
    .section04 .con03_left .news {border: 1px solid #ccc; width: auto;}
    .section04 .con03_left .news01 {margin: 0.5rem 0}
    .section04 .con03_left .news02 {margin: 0.5rem 0}
    .section04 .con03_left .news03 {margin: 0.5rem 0}
    .section04 .con03_left .news04 {margin: 0.5rem 0}
    
    .section04 .con03_left .news span {display: block;font-size: 1.2rem; font-weight: 700; line-height: 1.5; text-align: left; padding: 1rem 1rem; margin: 0;}
    .section04 .con03_left .news em {display: inline-block; font-size: 0.7rem; font-weight: 300;padding: 1rem 1rem; position: relative;}
    .section04 .con03_left .news em:after {content: ""; display: block; width: 51px; height: 12px; background-image: url(../img/arrows_img01.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; left: 17rem; transform: translate(-100%, -50%);}
    .section04 .con03_left .news:hover em:after {background-image: url(../img/hover_arrows_img01.png); background-repeat: no-repeat; background-size: contain;}
    
    .section04 .con03_right {flex: 1; position: relative; border: none;margin: 0; order: -1;}
    .section04 .con03_right figure {width: auto}
    .section04 .con03_right figure img {display: none;}
    .section04 .con03_right .title {position: static; top: 0; left: 0; transform: translateY(0);text-align: center;}
    .section04 .con03_right .title p {font-size: 0.8rem; font-weight: 400; margin-bottom: 1rem; color: #ed1846}
    .section04 .con03_right .title h3 {font-size: 1.7rem; font-weight: 700; margin-bottom: 0.8rem;}
    .section04 .con03_right .title span {display: block; font-size: 1rem; font-weight: 400; margin-bottom: 1.5rem;} 
    .section04 .con03_right .title a {display: inline-block; font-size: 0.7rem; font-weight: 300; margin-bottom: 1rem;}
    
    
    .section05 {padding: 2.5rem 0;}
    .section05 .container {width: 100%; height: 100%; position: relative;}
    .section05 figure {background: url(../img/main_img01.jpg) no-repeat center center/cover; background-attachment: scroll; width: 100vw; height: 10rem; text-indent: -9999px;}
    .section05 .txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 100%;}
    .section05 .txt p {font-size: 0.8rem; font-weight: 400; letter-spacing: 0.25em; margin-bottom: 1rem;}
    .section05 .txt h2 {font-size: 1.2rem; font-weight: 700;}
    
    .section06 {padding: 2.5rem 0 2.5rem 0}
    .section06 .container {display: flex; flex-direction: column; margin: 0}
    .section06 .con04_left {display: block; flex: 1; position: relative;text-align: center;}
    .section06 .con04_left figure {width: auto}
    .section06 .con04_left figure img {display: none;}
    .section06 .con04_left .title {position: static; top: 0; left: 0; transform: translateY(0);}
    .section06 .con04_left .title p {font-size: 0.8rem; font-weight: 400; margin-bottom: 1rem; color: #ed1846}
    .section06 .con04_left .title h3 {font-size: 1.7rem; font-weight: 700; margin-bottom: 0.8rem;}
    .section06 .con04_left .title span {display: block; font-size: 1rem; font-weight: 400; margin-bottom: 1.5rem;} 
    .section06 .con04_left .title a {display: inline-block; font-size: 0.7rem; font-weight: 300; margin-bottom: 1.5rem;} 
    
    .section06 .con04_right {flex: 3; position: relative}
    .section06 .con04_right .event_slider {display: block; width: auto; text-align: center;}
    .section06 .con04_right .event_slider figure {padding: 0 0.75rem; opacity: 0; transform: scale(0.7);transition: 0.2s;}
    .section06 .con04_right .event_slider figure.on {opacity: 1; transform: scale(1)}
    .section06 .con04_right .event_slider figure img {width: 50%;margin: 0 auto}
    
    .section06 .con04_right .event_slider span {display: block; font-size: 1rem; font-weight: 700; margin: 1rem 0; width: 100%; opacity: 0; transition: 0.2s;}
    .section06 .con04_right .event_slider em {display: block; font-size: 0.8rem; font-weight: 300; width: 100%; opacity: 1; transition: 0.2s;}
    .section06 .con04_right .event_slider figure.on span {opacity: 1;}
    .section06 .con04_right .event_slider figure.on em {opacity: 1;}
    
    .section07 {padding: 2.5rem 0 2.5rem 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
    .section07 .title {text-align: center;}
    .section07 .title p {font-size: 0.8rem; font-weight: 400; margin-bottom: 1rem; color: #ed1846}
    .section07 .title h3 {font-size: 1.7rem; font-weight: 700; margin-bottom: 0.8rem;}
    .section07 .title span {display: block; font-size: 1rem; font-weight: 400; margin-bottom: 1.5rem;}
    
    .section07 .container {display: flex; flex-direction: column; margin: 0 auto;}
    .section07 .container .banner {display: none;flex: 2; margin: 0 0 0 0;}
    .section07 .container .banner a {display: block; width: 100%; height: 100%; background: url(../img/banner_img01.png) no-repeat center center/cover; text-indent: -9999px;}
    .section07 .container .list {flex: 3;}
    .section07 .container .list ul>li {border-bottom: 1px solid #ccc; margin: 0 1rem;}
    .section07 .container .list ul>li a {display: block; line-height: 2; margin: 0.5rem 0;}
    .section07 .container .list ul>li a span {display: block; width: 5rem; height: 1.5rem; border: 1px solid #ed1846; color: #ed1846; font-size: 0.75rem; text-align: center; line-height: 2;}
    .section07 .container .list ul>li a em {display: inline-block; margin-left: 0; width: 75%; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .section07 .container .list ul>li a data {float: right; font-size: 0.65rem; line-height: 3;}
    .section07 .container .list ul .important em {font-weight: 700;}
    
    .section07 .container .list ul .more {border-bottom: none; text-align: center; font-size: 0.7rem; font-weight: 300;}
    
    .footer {padding: 0; background: #333;}
    .footer .top {display: flex; flex-direction: column; margin:0 auto; padding: 1rem 0; position: relative; background: transparent; border-bottom:none; color: #fff;}
    .footer .top .left {flex: 1;}
    .footer .top .left>ul {display: flex; flex-flow: row wrap; margin:0 auto 3rem auto; font-size: 0; justify-content: center;}
    .footer .top .left>ul>li {display: block; margin: 0.5rem; font-size: 0.65rem;}
    .footer .top .left>ul>li:before {content:""; display: none; width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #ccc; font-size: 0; margin: 0.1rem 0.5rem;}
    .footer .top .left ul .important {color: #ed1846}
    .footer .top .right {position:absolute; bottom: 0; right: 0; width: 100%; text-align: center; font-size: 0.7rem;border-top: 1px solid #555; border-left: none; border-right: none; background: #333; line-height: 2rem;}
    .footer .top .right ul {display: none; border-top: 1px solid #555;}
    .footer .top .right ul li {border-bottom: 1px solid #555}
    .footer .top .right ul li:hover {background: #ed1846; color: #fff}

    
    .footer .bottom {display: none; flex-direction: column; margin-top: 3rem;}
    .footer .bottom .left {flex: 1; display: flex; flex-direction: column; text-align: left;}
    .footer .bottom .left .logo {display: block;width: 10rem; margin: 0 0 1rem 1rem;}
    .footer .bottom .left .school {margin-left: 0; text-align: center;}
    .footer .bottom .left .school strong {display: block; font-size: 0.9rem; margin-bottom: 0.75rem; color: #fff}
    .footer .bottom .left .school span {display: block; font-size: 0.75rem; margin-bottom: 1.5rem; color: #aaa}
    
    .footer .bottom .right {display: none;margin-right: 1rem; flex: 2;}
    .footer .bottom .right .list {display: flex; flex-direction: column; justify-content: space-between; text-align: center;}
    .footer .bottom .right .list>dl {position: relative; width: 100%;}
    .footer .bottom .right .list dl~dl:after {content: ""; display: block; position: absolute; width: 1px; height: 14.4rem; background: #555; top: 0; left: 0;}
    .footer .bottom .right .list>dl dt {margin-bottom: 1.5rem; font-size: 0.9rem; color: #fff;}
    .footer .bottom .right .list>dl dd {margin-bottom: 0.75rem; font-size: 0.75rem; color: #aaa}
    
    
    .footer .copy {text-align: center; margin: 0; border-top: 1px solid #555; padding: 1rem 0;color: #aaa;}
    .footer .copy p {margin-bottom: 1rem; font-size: 0.6rem}
    .footer .copy address {font-size: 0.55rem;}
    
    .left_bar {display: none; position: fixed; top: 0; left: 0; line-height: 5rem;}
    .left_bar h2 {display: block; position: relative; width: 5rem; height: 100vh; background: #fff; padding: 0 1rem}
    .left_bar h2 img {width: 100%;}
    .left_bar h2:after {content: ""; display: block; width: 0.65rem; height: 100vh; background: #000; position: absolute; top: 2.5rem; right: 1rem;}
    

    .wheel {display: none; position: fixed; top: 50%; left: 2rem; transform: translateX(-50%); color: #333; animation: wheel 1s infinite;}
    .wheel p {display: block; font-size: 0.8rem; font-weight: 100; writing-mode: vertical-rl; text-orientation: mixed;}
    .wheel p>span {display: inline-block; font-size: 0.6rem; vertical-align: bottom;}
    @keyframes wheel {
        to {top: 55%;}
    }
    
    .toTop {display: none; position: fixed; bottom: 4.8rem; right: 1rem; z-index: 998;}
    .toTop img {width: 2rem;}

}