body {position: relative; overflow-x: hidden;}
button:focus {outline: none;}

.bg {width: 100%; height: 100%; background: url('../images/bg.jpg') no-repeat center top; background-size: cover; padding-bottom: 160px;}
@media all and (max-width: 1230px) {
    .bg {height: auto; background-size: auto 100%; padding-bottom: 0;}
}

.container {width: 100%; max-width: 1320px; padding: 0 40px; margin: 0 auto;}

/* Header */
.wrap-header {padding: 60px 0;}
.wrap-header .container {overflow: hidden;}
.wrap-header .logo {float: left;}
.wrap-header .goto {float: right;}
.wrap-header .goto ul {overflow: hidden;}
.wrap-header .goto li {float: left; margin: 0 0 0 50px;}
.wrap-header .goto a {display: block; width: 160px; height: 160px; border: 1px solid #fff; border-radius: 100%; font-family: 'Dream Regular'; text-align: center; color: #fff;}
.wrap-header .goto a:hover { box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);}
.wrap-header .goto .ico1 a:hover {background: #d1006a; border-color: rgba(0,0,0,0);}
.wrap-header .goto .ico2 a:hover {background: #00a5e8; border-color: rgba(0,0,0,0);}
.wrap-header .goto p {padding: 85px 0 0 0;}
.wrap-header .goto .ico1 p {background: url('../images/ico-goto1.png') no-repeat center 30px;}
.wrap-header .goto .ico2 p {background: url('../images/ico-goto2.png') no-repeat center 31px;}

@media all and (max-width: 1000px) {
    .wrap-header {padding: 40px 0;}
    .wrap-header .logo {width: 100%; text-align: center;}
    .wrap-header .logo img {width: 60%;}
    .wrap-header .goto {width: 100%; margin: 40px 0 0 0;}
    .wrap-header .goto li {width: 50%; margin: 0;}
    .wrap-header .goto li:nth-child(1) {padding: 0 10px 0 0;}
    .wrap-header .goto li:nth-child(2) {padding: 0 0 0 10px;}
    .wrap-header .goto a {width: 100%; border-radius: 10px;}
}

/* Banner List */
.wrap-banner ul {display: inline-block; width: 102%;}
.wrap-banner li {float: left; width: 25%; padding: 0 27px 35px 0;}
.wrap-banner li a {position: relative; display: block; padding: 53px 0 53px 40px; background: #000; border-radius: 0 25px 25px 25px ; color: #fff; opacity: 0; transition: .9s; transform: translate(0,-50%);}
.wrap-banner li a:hover {box-shadow: 5px 5px 4px -3px #000000;}
.wrap-banner li.is-visible a {opacity: 1; transform: translate(0,0);}
.wrap-banner li strong {display: block; font-size: 22px; line-height: 30px;}
/*.wrap-banner li strong date{display: block; font-size: 18px; line-height: 30px;}*/
.wrap-banner span.date{display: block; font-size: 16px; line-height: 30px;}
.wrap-banner li.long a {padding: 39px 0 39px 40px;}
.wrap-banner li.long a strong {font-size: 20px;}

.wrap-banner .type1.color1 a {background: #d1006a url('../images/deco.png') no-repeat right top;}
.wrap-banner .type1.color2 a {background: #24aae1 url('../images/deco.png') no-repeat right top;}
.wrap-banner .type1.color3 a {background: #f39100 url('../images/deco.png') no-repeat right top;}
.wrap-banner .type1.color4 a {background: #bb9d64 url('../images/deco.png') no-repeat right top;}

.wrap-banner .type2.color1 a,
.wrap-banner .type2.color2 a,
.wrap-banner .type2.color3 a,
.wrap-banner .type2.color4 a {background: #fff; color: #303030;}

.wrap-banner .type3 a {display: table; width: 100%; padding: 0; background: transparent; border: 2px solid #fff; text-align: center;}
.wrap-banner .type3 .cell {display: table-cell; height: 132px; vertical-align: middle;}
.wrap-banner .type3 .ico {display: inline-block; vertical-align: middle; transform: rotateY(0deg); transition:.5s;}
.wrap-banner .type3 a:hover .ico {transform: rotateY(360deg); transition:.5s;}
.wrap-banner .type3 .desc {display: inline-block; vertical-align: middle; font-size: 20px;}

.wrap-banner .flag {position: absolute; left: 0; top: 0; display: block; width: 57px; height: 43px; padding: 7px 0 0 0; font-size: 14px; text-align: center;}
.wrap-banner .type1.color1 .flag {background: url('../images/flag-color1.png') no-repeat center bottom;}
.wrap-banner .type1.color2 .flag {background: url('../images/flag-color2.png') no-repeat center bottom;}
.wrap-banner .type1.color3 .flag {background: url('../images/flag-color3.png') no-repeat center bottom;}
.wrap-banner .type1.color4 .flag {background: url('../images/flag-color4.png') no-repeat center bottom;}
.wrap-banner .type2.color1 .flag {background: url('../images/flag-color1.png') no-repeat center bottom; color: #fff;}
.wrap-banner .type2.color2 .flag {background: url('../images/flag-color2.png') no-repeat center bottom; color: #fff;}
.wrap-banner .type2.color3 .flag {background: url('../images/flag-color3.png') no-repeat center bottom; color: #fff;}
.wrap-banner .type2.color4 .flag {background: url('../images/flag-color4.png') no-repeat center bottom; color: #fff;}

.wrap-banner .arrow {position: absolute; right: 30px; bottom: 25px; z-index: 100; width: 41px; height: 6px;}
.wrap-banner a:hover .arrow {animation-duration: .7s; animation-name: bounceAni; animation-iteration-count: infinite;}
.wrap-banner .type1 .arrow {background: url('../images/arrow1.png') no-repeat center center;}
.wrap-banner .type2 .arrow {background: url('../images/arrow2.png') no-repeat center center;}

@keyframes bounceAni {
    0% {right: 30px;}
    50% {right: 20px;}
    100% {right: 30px;}
}

.wrap-banner .circle {position: absolute; right: 50px; bottom: 12px; width: 30px; height: 30px; border-radius: 100%;}
.wrap-banner .type1.color1 .circle {background: #a10052;}
.wrap-banner .type1.color2 .circle {background: #0092ce;}
.wrap-banner .type1.color3 .circle {background: #d68000;}
.wrap-banner .type1.color4 .circle {background: #a38a5b;}
.wrap-banner .type2.color1 .circle {background: #ecccdc;}
.wrap-banner .type2.color2 .circle {background: #cce9f5;}
.wrap-banner .type2.color3 .circle {background: #f7e6cc;}
.wrap-banner .type2.color4 .circle {background: #ede8de;}

@media all and (max-width: 1230px) {
    .wrap-banner li {width: 33.333%;}
}

@media all and (max-width: 950px) {
    .wrap-banner ul {width: 103%}
    .wrap-banner li {width: 50%;}
}

@media all and (max-width: 600px) {
    .wrap-banner ul {width: 100%}
    .wrap-banner li {width: 100%; padding: 0 0 25px 0;}
}

/* Footer */
.wrap-footer {position: absolute; left:0; bottom: 0; width: 100%; margin: 68px 0 0 0; background: #262626; padding: 20px 0; color: #b1b1b1; font-size: 13px;}
.wrap-footer .campus {overflow: hidden;}
.wrap-footer .campus strong {color: #fff;}
.wrap-footer .campus span {padding: 0 0 0 17px;}
.wrap-footer .campus1,
.wrap-footer .campus2 {float: left; width: 50%;}
.wrap-footer .copyright {padding: 10px 0 0 0; font-size: 12px; text-align: center;}

@media all and (max-width: 1230px) {
    .wrap-footer {position: static;}
    .wrap-footer .campus1, .wrap-footer .campus2 {position: static; width: 100%; text-align: center;}
}

@media all and (max-width: 950px) {
    .wrap-footer {margin: 40px 0 0 0;}
}

/* Popup */
.pop {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
.pop.on {display: table; table-layout: fixed;}
.pop .cell {display: table-cell; vertical-align: middle; text-align: center;}
.pop .close-pop {position: absolute; right: -10px; top: -30px; width: 90px; height: 90px; background: url('../images/ico-pop-close.png') no-repeat center center;}


.con-table {position:relative; display: inline-block; width: 90%; max-width: 1240px; line-height: 1.6;}
.con-table:after {content:''; display: none; position: absolute; right:0px; top:0px; width:1px; height:100%; background:#fff;}
.con-table table {position: relative;}
.con-table table:after {content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 2px; background: #9d0050}
.con-table table:before {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #fff;}
.con-table thead th {padding: 13px 10px; background: #ecf1f6; border-right: 1px solid #aaaaaa; border-bottom: 1px solid #ccc; font-size: 16px; color: #333;}
.con-table thead th.color {background: #eef3f4;}
.con-table tbody {display: table-header-group;}
.con-table tbody::after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #723737;}
.con-table tbody th {padding:12px 20px; background:#fbfbfb; border-right: 1px solid #dddee0; border-bottom: 1px solid #ccd0d7; font-size:16px; color:#000;}
.con-table tbody td {padding:5px 10px; background:#fff; border-right: 1px solid #aaaaaa; border-bottom: 1px solid #dddee0; font-family: 'Dream Regular'; font-size:14px; text-align: left; color:#474747;}
.con-table tbody td a {color: #333;}
.con-table .list > li {position: relative; padding-left: 18px;}
.con-table .list > li:after {content: ''; position: absolute; left: 0; top: 9px; width: 3px; height: 3px; background: #808080;}
.con-table .align-l {text-align: left;}
.con-table .align-c {text-align: center;}
.con-table .align-r {text-align: right;}
.con-table strong {color: #000;}

.con-table-top {background-color: white; padding-left:20px}
.con-table-top .align-l {text-align: left;}
.con-table-top .align-c {text-align: center;}
.con-table-top .align-r {text-align: right;}

.con-table-bottom {background-color: white; padding-left:20px}
.con-table-bottom .align-l {text-align: left;}
.con-table-bottom .align-c {text-align: center;}
.con-table-bottom .align-r {text-align: right;}

.con-table2 {position:relative; display: inline-block; width: 90%; max-width: 1240px; line-height: 1.6;}
.con-table2:after {content:''; display: none; position: absolute; right:0px; top:0px; width:1px; height:100%; background:#fff;}
.con-table2 table {position: relative;}
.con-table2 table:after {content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 2px; background: #9d0050}
.con-table2 table:before {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #fff;}
.con-table2 thead th {padding: 13px 10px; background: #ecf1f6; border-right: 1px solid #aaaaaa; border-bottom: 1px solid #ccc; font-size: 16px; color: #333;}
.con-table2 thead th.color {background: #eef3f4;}
.con-table2 tbody {display: table-header-group;}
.con-table2 tbody::after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #723737;}
.con-table2 tbody th {padding:12px 20px; background:#fbfbfb; border-right: 1px solid #dddee0; border-bottom: 1px solid #ccd0d7; font-size:16px; color:#000;}
.con-table2 tbody td {padding:5px 20px; background:#fff; border-right: 1px solid #aaaaaa; border-bottom: 1px solid #dddee0; font-family: 'Dream Regular'; font-size:14px; text-align: left; color:#474747;}
.con-table2 tbody td a {color: #333;}
.con-table2 .list > li {position: relative; padding-left: 18px;}
.con-table2 .list > li:after {content: ''; position: absolute; left: 0; top: 9px; width: 3px; height: 3px; background: #808080;}
.con-table2 .align-l {text-align: left;}
.con-table2 .align-c {text-align: center;}
.con-table2 .align-r {text-align: right;}
.con-table2 strong {color: #000;}

.con-table2-top {background-color: white; padding-left:20px}
.con-table2-top .align-l {text-align: left;}
.con-table2-top .align-c {text-align: center;}
.con-table2-top .align-r {text-align: right;}

.con-table2-bottom {background-color: white; padding-left:20px}
.con-table2-bottom .align-l {text-align: left;}
.con-table2-bottom .align-c {text-align: center;}
.con-table2-bottom .align-r {text-align: right;}

@media all and (max-width:960px) {
    .con-table {position: static; overflow: auto;}
    .con-table table {width: 1000px;}
    .con-table-top {position: static; overflow: auto;}
    .con-table-top {width: 1000px;}
    .con-table-bottom {position: static; overflow: auto;}
    .con-table-bottom {width: 1000px;}	
    .con-table2 {position: static; overflow: auto;}
    .con-table2 table {width: 1000px;}
    .con-table2-top {position: static; overflow: auto;}
    .con-table2-top {width: 1000px;}
    .con-table2-bottom {position: static; overflow: auto;}
    .con-table2-bottom {width: 1000px;}	
    .pop .close-pop {right: 10px; top: 20px;}
}