@charset "utf-8";
/* ==============================================
article
============================================== */
#course{
transition: 0.2s ease-out;
}
@media screen and (min-width:1000px) {
#course{
margin: -60px 0 0 0;
}
}
#course .inner{
position: relative;
background: #c7e8fb url("../images/course/snsn_course_bg.jpg") top no-repeat;
background-size: 100% auto;
padding: 0 15rem 25rem;
}
#course .inner h1{
font-size: 24rem;
font-weight: 900;
text-align: center;
padding-top: 66rem;
margin-bottom: 20rem;
}
#course .inner h1 span{
font-size: 14rem;
font-weight: 900;
display: block;
margin-bottom: 4rem;
}
#course .inner h2{
font-size: 24rem;
font-weight: 900;
color: #004b98;
text-align: center;
padding-bottom: 210rem;

}
#course .inner h2 span{
font-size: 14rem;
font-weight: 900;
color: #004b98;
display: block;
margin-top: 4rem;
}
#course .inner table{
width: 100%;
}
#course .inner table th{
font-size: 14rem;
width: 60rem;
}
#course .inner table td{
font-size: 12rem;
}
#course .inner table th,
#course .inner table td{
font-weight: 700;
line-height: 20rem;
text-align: center;
border: 1px solid #c7e8fb;
}
#course .inner table .no{
background: #000;
color: #fff;
}
#course .inner table .yd{
background: #aacf45;
}
#course .inner table .par{
background: #fff;
}
#course .inner table.out{
    margin-bottom: 5rem;
}
#course .inner table.out th{
background: #004b98;
color: #fff;
}
#course .inner table.in{
    margin-bottom: 15rem;
}
#course .inner table.in th{
background: #ffdb3f;
color: #004b98;
}
#course .swiper{
margin: 0 -15rem;
}
#course .swiper .swiper-slide{
padding: 5rem 15rem;
}
#course .swiper .swiper-slide .box{
background: #fff;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
padding: 15rem;
display: flex;
align-items: center;
}
#course .swiper .swiper-slide .box .img img{
    width: 120rem;
}
#course .swiper .swiper-slide .box .detail .data{
    display: flex;
    align-items: stretch;
    width: 100%;
}
#course .swiper .swiper-slide .box .detail .data p:first-of-type{
    background: #004b98;
    font-size: 20rem;
    font-weight: 900;
    color: #fff;
    border-radius: 8rem 0 0 8rem;
    padding: 5rem 8rem 3rem;
}
#course .swiper .swiper-slide .box .detail .data p:first-of-type span{
    font-size: 15rem;
    font-weight: 900;
    color: #fff;
    display: inline-block;
    position: relative;
    top: -1.4px;
}
#course .swiper .swiper-slide .box .detail .data p:last-of-type{
    background: #000;
    font-size: 16rem;
    font-weight: 900;
    color: #fff;
    border-radius: 0 8rem 8rem 0;
    flex-grow: 1;
    padding: 6rem 10rem 0;
}
#course .swiper .swiper-slide .box .detail > p{
    line-height: 20rem;
    padding: 10rem 0 0 5rem;
}
#course .swiper .swiper-button-prev ,#course .swiper .swiper-button-next{
width: 30rem !important;
top: calc(50% - 40rem);
}
#course .swiper .swiper-button-prev{
left: 0 !important;
}
#course .swiper .swiper-button-next{
right: 0 !important;
}
#course .swiper .swiper-button-next::after, #course .swiper .swiper-button-prev::after{
font-size: 0 !important;
width: 30rem;
height: 60rem;
}
#course .swiper .swiper-button-prev:after{
background: url(../images/course/snsn_arrow_l.png) left top no-repeat;
background-size: 100%;
}
#course .swiper .swiper-button-next:after{
background: url(../images/course/snsn_arrow_r.png) left top no-repeat;
background-size: 100%;
}
#course .swiper .swiper-pagination{ 
position: static;
margin-top: 10rem;  
}
#course .swiper .swiper-pagination-bullet {
background-color: #004b98;
font-size: 16rem;
line-height: 1.9;
color: #fff;
height: 30rem;
width: 30rem;
opacity: 1;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#course .swiper .swiper-pagination-bullet-active {
background-color: #fff;
color: #004b98;
box-shadow: none;
}
#course .swiper .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
#course .swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 5rem 4rem;
}



#profile{
background: #f1f5f9;
}
#profile .inner{
padding: 20rem 30rem 60rem;
}
#profile .name{
background: url(../images/course/snsn_pro_img.png) left center no-repeat;
background-size: 80rem;
padding: 20rem 0rem 20rem 95rem;
}
#profile .name h2{
font-size: 14rem;
font-weight: 900;
}
#profile .name h3{
font-size: 20rem;
font-weight: 900;
color: #004b98;
}
#profile .name h3 span{
font-size: 12rem;
font-weight: 900;
color: #004b98;
}
#profile .inner p{
padding: 15rem 0 0 0;
}
#profile .inner .button{
padding-top: 20rem;
}
#profile .inner .button a{
font-size: 16rem;
line-height: 20rem;
letter-spacing: 1rem;
font-weight: 500;
color: #fff;
text-align: center;
display: block;
height: 60rem;
border-radius: 30rem;
background: linear-gradient(90deg, rgba(66,188,227,1) 0%, rgba(54,125,210,1) 100%);
padding: 19rem 0 0 0;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.2));
}
#profile .inner .button a::after{
content: "";
display: inline-block;
background: url("../images/snsn_cmn_arw_white.svg") no-repeat;
background-size: auto 14rem;
width: 11rem;
height: 14rem;
vertical-align: middle;
margin: -4rem 0 0 8rem;
}