@charset "utf-8";

#contents article.staffDetail > #staffDetailSlide .swiper-slide > img.pc_hidden {display:none}
/* board Contents START */
.boardHeader > #contents{
    margin-bottom: 0;
}
/* board Contents END */

/* nomal Contents START*/
#contents{
    margin-bottom:80px;
}
/* 마지막 단에 여백이 없는 경우를 위함.. */
#contents.notMargin{
    margin: 0;
}
#contents > .header{
    border-bottom: solid #d1d1d1 0px;
}
/*
#contents > .header > .headerContetnsWrap{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 600px;
    padding-top: 0;
    margin-bottom: 50px;
}
#contents > .header > .headerContetnsWrap .headerBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
*/
/* 단일 이미지 비율 유지 수정*/
#contents > .header > .headerContetnsWrap{
    position: relative;
    left: calc(50% - 955px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 600px;
    padding-top: 0;
    margin-bottom: 50px;
}
#contents > .header > .headerContetnsWrap .headerBg{
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 1;
}
#contents > .header > .headerContetnsWrap .headerContetns{
    text-align: center;
    z-index: 2;
}
#contents > .header > .headerContetnsWrap .headerContetns > h4,
#contents > .header > .headerContetnsWrap .headerContetns > h3,
#contents > .header > .headerContetnsWrap .headerContetns > p{
    color: #ffffff;
}
#contents > .header > .headerContetnsWrap .headerContetns > h4,
#contents > .header > .headerContetnsWrap .headerContetns > p{
    font-size: 20px;
    font-weight: 400;
}
#contents > .header > .headerContetnsWrap .headerContetns > h3{
    font-size: 44px;
    font-weight: 400;
}
#contents > .header > .headerContetnsWrap .headerContetns > h4{
    margin: 15px 0;
}
#contents > .header > .headerContetnsWrap .headerContetns > .circle{
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: white;
    border-radius: 50%;
    margin: 10px 0;
}
#contents > img {
    position: relative;
    left: calc(50% - 955px);
}
#contents img.staffDetailBetweenLine{
     margin-bottom: 100px;   
}
#contents article.staffDetail{
    width: 1200px;
    min-height: 300px;
    margin: 0 auto 100px;
}
#contents article.staffDetail.last{
    position: relative;
    margin: 0 auto 0;
}
#contents article.staffDetail > .line{
    margin: 60px 0 80px;
}
#contents article.staffDetail > .control{
    width: 100%;
    height: 925px;
}
#contents article.staffDetail > .control > ul{
    /*display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;*/
    width: inherit;
    height: inherit;
}
#contents article.staffDetail > .control > ul::after {
    content: "";
    -webkit-box-flex: 0;
    -ms-flex: 0 1 280px;
    flex: 0 1 280px;
}
#contents article.staffDetail > .control > ul > li{
    /*display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;*/
    width: /*280px;*/25%;
    min-height: 425px;
    background-color: none;
    cursor: pointer;
    float:left;
    text-align:center;
}
#contents article.staffDetail > .control > ul > li.null{
    display: none;
}
#contents article.staffDetail > .control > ul > li:focus{
    outline: none;
}
#contents article.staffDetail > .control > ul > li > .wrap{
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 340px;
    flex: 0 0 340px;
    width: 100%;
    height: 340px;
    background-color: none;
    overflow: hidden;
}
#contents article.staffDetail > .control > ul > li > .wrap > .cover{
    position: absolute;
    top: 0;
    left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: /*100%;*/280px;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 0;
}
#contents article.staffDetail > .control > ul > li > .wrap > .cover > img{
    margin-bottom: 30px;
}
#contents article.staffDetail > .control > ul > li > .wrap > .cover > p{
    color: white;
    font-size: 20px;
}
#contents article.staffDetail > .control > ul > li:hover > .wrap > .cover{
    opacity: 1;
}
#contents article.staffDetail > .control > ul > li > h3{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 500;
    padding-top: 20px;
}
/* modal swiper init */
#contents #staffDetailSlideModal{
    display: block;
    padding: 0 !important;
    z-index: 50001;
}

#contents #staffDetailSlideModal.show article.staffDetail > #staffDetailSlide > button > span {
    -webkit-animation: staffClose .3s .3s linear forwards;
    animation:staffClose .3s .3s linear forwards;
    outline:none;
    opacity:0
}

@-webkit-keyframes staffClose {
    0% {
        opacity:0;
        transform:rotate(0)
    }  
    100% {
        opacity:1;
        transform:rotate(180deg)
    }
}
@keyframes staffClose {
    0% {
        opacity:0;
        transform:rotate(0)
    }  
    100% {
        opacity:1;
        transform:rotate(180deg)
    }
}


#contents #staffDetailSlideModal .modal-dialog{
    max-width: 100%;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
#contents #staffDetailSlideModal .modal-dialog > .modal-content{
    min-height: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
}
#contents #staffDetailSlideModal .modal-dialog > .modal-content > .modal-body{
    padding:0 0 100px;
}
#contents article.staffDetail > #staffDetailSlide{
    position: relative;
    min-height:700px;
    padding-top:100px
}
#contents article.staffDetail > #staffDetailSlide .swiper-slide .null{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    color: black;
    font-size: 18px;
}
#contents article.staffDetail > #staffDetailSlide > button{
    position: absolute;
    top:58px;
    right:0;
    z-index: 2;
    opacity: 1;
    text-shadow: none;
    background: none;
}
#contents article.staffDetail > #staffDetailSlide > button:focus{
    outline: none;
}
#contents article.staffDetail > #staffDetailSlide > button > span{
    position: relative;
    display: block;
    width:42px;
    height:42px;
}
/*#contents article.staffDetail > #staffDetailSlide > button > span::before,
#contents article.staffDetail > #staffDetailSlide > button > span::after{
    content: ' ';
    position: absolute;
    left: 15px;
    height: 25px;
    width: 2px;
    background-color: #222222;
}
#contents article.staffDetail > #staffDetailSlide > button > span::before{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#contents article.staffDetail > #staffDetailSlide > button > span::after{
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}*/
#contents article.staffDetail .nav{
    position: absolute;
    top: 621px;
    left: 280px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    z-index: 500;
}
#contents article.staffDetail .nav > .prev,
#contents article.staffDetail .nav > .next{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width:60px;
    height:60px;
    font-size: 22px;
    border: solid #888888 1px;
    color: #888888;
}
#contents article.staffDetail .nav > .prev:focus,
#contents article.staffDetail .nav > .next:focus{
    outline: none;
}
#contents article.staffDetail .nav > .next{
    border-left: 0;
}


#contents > article.detailBeforeAfter{
    /* contents 풀사이즈 이미지들과 맞추기 위해 수정*/
    position: relative;
    left: 5px;
    width: 1920px;
    background-color: #f6ebff;
    margin: 0 auto;
}
#contents > article.detailBeforeAfter div.innerWrap{
    width: 1180px;
    margin: 0 auto;
}
#contents > article.detailBeforeAfter div.innerWrap ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
#contents > article.detailBeforeAfter div.innerWrap ul > li{
    width: 567px;
    height: 464px;
}
#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail{position:relative;overflow:hidden}
#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail img{width:100%;display:block;max-width:none}
#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail .resize{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}
#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail .handle{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:rgba(0,0,0,.5);cursor:ew-resize}
#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail .handle:after{position:absolute;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;content:'\21d4';color:#fff;font-weight:700;font-size:36px;text-align:center;line-height:64px;background:#ffb800;border:1px solid #e6a600;border-radius:50%;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.5),inset 0 60px 50px -30px #ffd466;box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.5),inset 0 60px 50px -30px #ffd466}

#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail{
    width: 100%;
    height: 100%;
}
#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail .resize::after{
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0,0.7);
    z-index: 10;
}
#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail img{
    height: 100%;
}
#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail .handle{
    background: #ffffff;
    z-index: 12;
}
#contents > article.detailBeforeAfter div.innerWrap .ba-sliderDetail .handle::after{
    content: '◀  ▶\A좌우 드래그';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    white-space: pre;
    line-height: 25px;
    background: #4e2a84;
    border: 4px solid #ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: -64px 0 0 -52px;
}

#contents > section.imgCover {
    position: relative;
    width: 776px;
    height: auto;
    margin: 0 auto;
}
#contents > section.imgCover > img.bg {
    position: relative;
    left: calc(50% - 955px);
}
#contents > section.imgCover > img.cover {
    position: absolute;
    top: 97px;
    left: 43px;
}
/*#contents > section.imgCover > img.cover.on{
     -webkit-animation: imgCoverOpacity 2.5s linear .1s infinite alternate both;
             animation: imgCoverOpacity 2.5s linear .1s infinite alternate both;
}*/
#contents > section.imgCover > img.text {
    position: absolute;
    top: 248px;
    left: -197px;
}
@-webkit-keyframes imgCoverOpacity {
    0% {
        opacity: 0;
    }  
    100% {
        opacity: 1;
    }
}
@keyframes imgCoverOpacity {
    0% {
        opacity: 0;
    }  
    100% {
        opacity: 1;
    }
}

/* 
    해당 상품에서는 체계적인 시스템이 common으로 변경 되기전 독립 개체 였습니다.
    common 변경 스펙은 추 후에 발생한 이슈이니, 일관성이 부족할 수 있습니다.
*/
#contents > .togleGrayBg{
    width: 100%;
    height: auto;
    background-color: #f8f8f8;
    padding-bottom: 100px;
}
#contents .contents-all-0101Togle{
    width: 1200px;
    height: 592px;
    margin: 0 auto 100px;
}
#contents .contents-all-0101Togle.gray{
    margin: 0 auto 0;
}
#contents section.toggleMenuWrap.contents-all-0101Togle > ul.toggleMenu{
    margin-bottom: 0;
}
#contents section.toggleMenuWrap.contents-all-0101Togle > ul.toggleMenu > li{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 33.333%;
    flex: 1 1 33.333%;
    width: 33.333%;
    color: #3d3d3d;
    font-size: 18px;
    letter-spacing: 3px;
    border: solid #222222 1px;
    border-right: 0;
    margin-right: 0;
}
#contents section.toggleMenuWrap.contents-all-0101Togle.gray > ul.toggleMenu > li{
    background-color: #f8f8f8;
}
#contents section.toggleMenuWrap.contents-all-0101Togle > ul.toggleMenu > li:last-child{
    border-right: solid #222222 1px;
}
#contents section.toggleMenuWrap.contents-all-0101Togle > ul.toggleMenu > li.on, 
#contents section.toggleMenuWrap.contents-all-0101Togle > ul.toggleMenu > li:hover {
    color: white;
    background-color: #222222;
}
#contents section.toggleMenuWrap.contents-all-0101Togle > .content > article {
    border: solid #222222 1px;
    border-top: 0;
}
#contents section.toggleMenuWrap.contents-all-0101Togle > .content > article > img{
    width: 100%;
}

#contents .contents-1-0301Togle{
    width: 1200px;
    min-height: 300px;
    margin: 0 auto 100px;
}
#contents section.toggleMenuWrap.contents-1-0301Togle > ul.toggleMenu{
    margin-bottom: 70px;
}
#contents section.toggleMenuWrap.contents-1-0301Togle > ul.toggleMenu > li{
    -webkit-box-flex: 0;
    -ms-flex: 0 1 250px;
    flex: 0 1 250px;
    width: 250px;
    color: #222222;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0px;
    border: solid #d1d1d1 1px;
    border-right: 0;
    margin-right: 0;
}
#contents section.toggleMenuWrap.contents-1-0301Togle > ul.toggleMenu > li:last-child{
    border-right: solid #d1d1d1 1px;
}
#contents section.toggleMenuWrap.contents-1-0301Togle > ul.toggleMenu > li.on, 
#contents section.toggleMenuWrap.contents-1-0301Togle > ul.toggleMenu > li:hover {
    color: white;
    background-color: #52429a;
}

#contents article.route{
    width: 1200px;
    min-height: 300px;
    margin: 0 auto 100px;
}
#contents article.route .routeMap{
    position: relative;
    width: 100%;
    height: 730px;
    margin-bottom: 80px;
    overflow: hidden;
}
#contents article.route .routeMap > .root_daum_roughmap{
    width: 100% !important;
}
#contents article.route .routeMap > .rootMap > img {
    width: 100%;
    height: 500px;
}
#contents article.route .routeMap > .header {
    position: absolute;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height:230px;
    background-color: #f8f8f8;
    z-index: 90;
}
#contents article.route .routeMap > .header .address{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 733px;
    flex: 0 0 733px;
    width: 733px;
    height: inherit;
}
#contents article.route .routeMap > .header .address > ul{
    padding:85px 0 0 50px;
}
#contents article.route .routeMap > .header .address > ul > li{
    position: relative;
    width: 100%;
    min-height: 80px;
    margin-bottom: 25px;
}
#contents article.route .routeMap > .header .address > ul > li:last-child{
    margin-bottom: 0;
}
#contents article.route .routeMap > .header .address > ul > li > i{
    position: absolute;
    top: -9px;
    left: 0;
    font-size: 36px;
    font-weight: 500;
    color: #52429a;
    font-style: normal;
}
#contents article.route .routeMap > .header .address > ul > li > h3{
    font-size: 27px;
    font-weight: 600;
    color: #222222;
}
#contents article.route .routeMap > .header .address > ul > li > p{
    font-size: 27px;
    font-weight: 400;
    color: #222222;
}
#contents article.route .routeMap > .header .tel{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
    height: inherit;
    background-color: #52429a;
    padding: 50px 0 0 50px;
}
#contents article.route .routeMap > .header .tel > h3{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 36px;
    font-weight: 500;
    color: #ffffff;
}
#contents article.route .routeMap > .header .tel > h3 > img{
    margin-right: 10px;
}
#contents article.route .routeMap > .header .tel > h4{
    margin: 20px 0 20px;
}
#contents article.route .routeMap > .header .tel > p{
    font-size: 25px;
    font-weight: 400;
    color: #ffffff;
}
#contents article.route section > ul.link{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
    height: 67px;
    margin-bottom: 50px;
}
#contents article.route section > ul.link > li{
    width: 396px;
    height: inherit;
    background-color: gray;
    margin-right: 11px;
}
#contents article.route section > ul.link > li.naver{
    background-color: #1fcc00;
}
#contents article.route section > ul.link > li.self{
    background-color: #187e06;
}
#contents article.route section > ul.link > li.kakao{
    background-color: #ffd307;
}
#contents article.route section > ul.link > li:last-child{
    margin-right: 0;
}
#contents article.route section > ul.link > li > a{
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color:white;
    font-size: 24px;
}
#contents article.route section > ul.link > li.kakao > a{
    color: #222222; 
}
#contents article.route section > ul.link > li > a > span{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#contents article.route section > ul.link > li > a > span > .ico{
    margin-right: 20px;
}
#contents article.route section > ul.link > li > a > i{
    font-size: 34px;
    color: white
}
#contents article.route section > ul.link > li > a > i.topline{
    color: #533219;
}

#contents article.route section > ul.traffic{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
}
#contents article.route section > ul.traffic > li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 33.33%;
    flex: 1 1 33.33%;
    width: 33.33%;
    height: 270px;
    border-right: solid #666666 1px;
    margin-bottom: 0;
}
#contents article.route section > ul.traffic > li:last-child{
    border-right: solid #666666 0px;
}
#contents article.route section > ul.traffic > li > .trafficHeader{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 120px;
    flex: 0 0 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    min-height: 120px;
    font-size: 27px;
    border-right: solid #222222 0px;
    margin-bottom: 30px;
}
#contents article.route section > ul.traffic > li > .trafficHeader > span{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 74px;
    height: 74px;
    background-color: #52429a;
    border-radius: 50px;
}
#contents article.route section > ul.traffic > li > .trafficHeader > h3{
    font-weight: 500;
    color: #52429a;
}
#contents article.route section > ul.traffic > li > .trafficContents{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 70px;
    flex: 1 1 70px;
    width: 100%;
    min-height: 70px;
    padding: 0;
}
#contents article.route section > ul.traffic > li.bus > .trafficContents{
    width: auto;
}
#contents article.route section > ul.traffic > li.self > .trafficContents{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul{
    width: 100%;
    height: auto;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: auto;
    color: #222222;
    margin-bottom: 30px;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li:last-child{
    margin-bottom: 0;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberSubway{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 45px;
    height: 44px;
    color: white;
    font-size: 20px;
    border-radius: 50px;
    background-color: red;
    margin-right: 10px;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberSubway.type01{
    background-color: #00469c;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberSubway.type02{
    background-color: #63a9ff;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberSubway.type03{
    background-color: #ffba16;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberSubway.type04{
    background-color: #ff8939;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberBus{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 56px;
    height: 28px;
    color: white;
    font-size: 20px;
    font-weight: 400;
    border-radius: 15px;
    background-color: red;
    margin-right: 10px;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberBus.type01{
    background-color: #0687ff;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberBus.type02{
    background-color: #5fb73c;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberBus.type03{
    background-color: #f86e55;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberBus.type04{
    background-color: #7182f5;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberBus.type05{
    background-color: #aa8874;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberBus.type06{
    background-color: #00aeab;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberBus.type07{
    background-color: #66b5f4;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li span.lineNumberBus.type08{
    background-color: #ba83f2;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li > h4{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    margin-right: 0;
}
#contents article.route section > ul.traffic > li.subway > .trafficContents > ul > li > h4{
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #ff8939;
}
#contents article.route section > ul.traffic > li.bus > .trafficContents > ul > li > h4{
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#contents article.route section > ul.traffic > li > .trafficContents > ul > li p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 500;
}
#contents article.route section > ul.traffic > li.bus > .trafficContents > ul > li p{
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li > ul > li{
    margin-bottom: 15px;
}
#contents article.route section > ul.traffic > li > .trafficContents > ul > li > ul > li:last-child{
    margin-bottom: 0;
}

/* nomal Contents END */

/* 완료 페이지 */

#contents.complete{
    display: flex;
    justify-content: center;
    margin: 0;
}
#contents.complete > article{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1200px;
    background-color: #f3f3f3;
    padding: 50px 0;
    margin: 80px 0;
}
#contents.complete > article > h3{
    font-size: 34px;
    font-width: 600;
    color: #52429a;
}
#contents.complete > article > span{
    font-size: 24px;
    color: #555555;
}
#contents.complete > article > p{
    font-size: 20px;
    color: #333333;
}
#contents.complete > article > a.back{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 40px;
    color: #ffffff;
    font-size: 20px;
    background-color: #454545;
    margin: 30px 0 50px;
}
#contents.complete > article > ul.link{
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 748px;
    height: 70px;
}

#contents.complete > article > .jpComImg {
	margin-top:30px;
	animation:balloonAni 1.5s .3s infinite ease;
}
@-webkit-keyframes balloonAni {
    0%,100% {transform: translateY(0px)}
    50% {transform: translateY(-5px)}
}
@keyframes balloonAni {
    0%,100% {transform: translateY(0px)}
    50% {transform: translateY(-5px)}
}

#contents.complete > article > .jpComImg +  a.back {
	margin: 20px 0 50px;
}