@charset "utf-8";

.wrap-sub-visual {position:relative; background:url('/images/knou/common/sub-visual.jpg') no-repeat center top; display:table; width:100%;}
.wrap-sub-visual:after {content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:url('/images/knou/common/pattern.png');}
.wrap-sub-visual .wrap-sub-cell {display:table-cell; height:260px; text-align:center; vertical-align: middle; color:#fff;}
.wrap-sub-visual .container {position:relative; z-index:1;}
.wrap-sub-visual .slogan {margin: -53px 0 0 0;}
.wrap-sub-visual .slogan-big {font-family:'Noto Bold'; margin-bottom: 4px; position:relative; display:inline-block; font-size:40px; line-height:1.2; text-shadow: 0px 0px 5px rgba(0,0,0,.2);}
.wrap-sub-visual .slogan-small {font-size:18px; font-family:'Mont Regular'; text-shadow: 0px 0px 5px rgba(0,0,0,.2);}
.wrap-sub-visual .page-move {position:absolute; left:0px; top:1px; width:100%; height:0px;}
.wrap-sub-visual .page-move a {position:relative; display:block; width:70px; height:70px; border:4px solid rgba(255,255,255,1); border-radius:100%;}
.wrap-sub-visual .page-move a.prev {left: -200px; opacity: 55%; float:left; background:url('/images/knou/common/ico-prev-menu.png') no-repeat left center; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a:hover.prev {opacity: 100%; background-position:right center; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.wrap-sub-visual .page-move a.next {right: -200px;opacity: 55%; float:right; background:url('/images/knou/common/ico-next-menu.png') no-repeat right center; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a:hover.next {opacity: 100%; background-position:left center; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.wrap-sub-visual .page-move a span {position:absolute;}
.wrap-sub-visual .page-move a.prev span {position:absolute; left:90%; top:50%; opacity:0; margin:0 0 0 20px; white-space:nowrap; color:rgba(255,255,255,1); transform: translate(0,-50%); transition:all 0.5s cubic-bezier(0.7, 0, 0.3, 1); font-family: 'Noto DemiLight'; font-size: 24px;}
.wrap-sub-visual .page-move a:hover.prev span {opacity:1; left:100%; transition:all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.wrap-sub-visual .page-move a.next span {position:absolute; right:90%; top:50%; opacity:0; margin:0 20px 0 0; white-space:nowrap; color:rgba(255,255,255,1); transform: translate(0,-50%); transition:all 0.5s cubic-bezier(0.7, 0, 0.3, 1); font-family: 'Noto DemiLight'; font-size: 24px; }
.wrap-sub-visual .page-move a:hover.next span {opacity:1; right:100%; transition:all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }

@media all and (min-width:2001px) {
	.wrap-sub-visual{background-size:cover;}
 }

@media all and (max-width:1800px) {
    .wrap-sub-visual .page-move {display: none;}
}

@media all and (max-width:760px) {
	.wrap-sub-visual{background-size:1000px;}
    .wrap-sub-visual .wrap-sub-cell {height: 180px;}
    .wrap-sub-visual .slogan {margin: -43px 0 0 0;}
    .wrap-sub-visual .slogan-big {font-size: 30px;}
    .wrap-sub-visual .slogan-small {display: none;}
}

@media all and (max-width:500px) {
	.wrap-sub-visual {background-size:500px;}
    .wrap-sub-visual .slogan {margin: -34px 0 0 0;}
    .wrap-sub-visual .slogan-big {font-size: 24px;}
    .wrap-sub-visual .wrap-sub-cell {height: 125px;}
}

.wrap-sub-navi {position:relative; z-index:20; margin:-60px 0 0 0; background:rgba(0,0,0,.50)}
.wrap-sub-navi .container {position:relative; height:60px; }
.wrap-sub-navi .sub-navi > ul > li {position:relative; float:left; background:url('/images/knou/common/arrow-page-nav.png') no-repeat left center; padding: 0 0 0 20px;}
.wrap-sub-navi .sub-navi > ul > li > a, .wrap-sub-navi .sub-navi > ul > li > .inner > button {display:block; color:#e0dfdf; font-size:18px; height:60px; line-height:60px;}
.wrap-sub-navi .sub-navi > ul > li > .inner > button {font-family:'Noto Light'; width:100%; text-align:left; padding:0 62px 0 0 ; background:url('/images/knou/common/arrow-page-nav2.png') no-repeat top right; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .sub-navi > ul > li > .inner > button:hover {color:#fff; background-position: bottom right; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .sub-navi > ul > li#pagetitle1 {background: none;}
.wrap-sub-navi .sub-navi .home {background-image:none; padding:0px; min-width:auto;}
.wrap-sub-navi .sub-navi .home a {width:20px; text-indent:-9999px; background:url('/images/knou/common/icon-home.png') no-repeat left center;}
.wrap-sub-navi .sub-navi .navUl {overflow:hidden; max-height:0px; opacity:0; position:absolute; right:0px; top:100%; border:1px solid #fff; width: 100%;}
.wrap-sub-navi .sub-navi .navUl.on {overflow:hidden; max-height:10000px; opacity:1; background:#fff; border:1px solid #cacaca; transition: max-height 1s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .sub-navi .navUl a {display:block; padding:8px 15px; padding-left: 20px; color:#333; font-size: 16px; word-break: keep-all;}
.wrap-sub-navi .sub-navi .navUl a[target=_blank] {background: url('/images/knou/common/subnavi-link-blank.png') no-repeat right center;}
.wrap-sub-navi .sub-navi .navUl a._active[target=_blank],
.wrap-sub-navi .sub-navi .navUl a:hover[target=_blank] {background: #d9e0e8 url('/images/knou/common/subnavi-link-blank-ov.png') no-repeat right center;}
.wrap-sub-navi .sub-navi .navUl a._active,
.wrap-sub-navi .sub-navi .navUl a:hover {background:#d9e0e8; color: #333; }
.wrap-sub-navi .sub-navi .navUl a.top_k2wiz_GNB_36,
.wrap-sub-navi .sub-navi .navUl a.top_k2wiz_GNB_37 {display: none;}

.wrap-sub-navi .sub-util {position:absolute; right:0px; top:108px;}
.wrap-sub-navi .sub-util > ul > li {position: relative; float:left; position:relative; padding: 0 20px;}
.wrap-sub-navi .sub-util > ul > li:after {content: ''; position: absolute; right: 0; top: 6px; width: 1px; height: 13px; background: #a3a3a3;}
.wrap-sub-navi .sub-util > ul > li:last-child {padding-right: 0;}
.wrap-sub-navi .sub-util > ul > li:last-child:after {display: none;}
.wrap-sub-navi .sub-util > ul > li > button {font-family: 'Noto Regular'; font-size: 15px; color: #2b2b2b;}
.wrap-sub-navi .sub-print {padding-left: 30px; background: url('/images/knou/common/ico-print.png') no-repeat left center;}
.wrap-sub-navi .sub-share {padding-left: 25px;background: url('/images/knou/common/ico-share.png') no-repeat left center;}
.wrap-sub-navi .sub-favo {padding-left: 30px;background: url('/images/knou/common/ico-favo.png') no-repeat left center;}

.wrap-sub-navi .box-sub-favo {opacity:0; overflow:hidden; max-height:0px; position:absolute;  border:1px solid #cacaca; right:0; top:45px; width:260px; background:#fff; transition:all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .box-sub-favo.on {opacity:1; max-height:1000px; transition:all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .box-sub-favo > strong {display:block; font-family:'Noto Light'; font-size:18px; padding:11px 20px; border-bottom:1px solid #d6d6d6; color: #2a2a2a;}
.wrap-sub-navi .box-sub-favo ul li {padding:8px 20px;}
.wrap-sub-navi .box-sub-favo ul li:hover {background:#d9e0e8;}
.wrap-sub-navi .box-sub-favo ul li a {position: relative; color: #000; font-size: 16px;}
.wrap-sub-navi .box-sub-favo ul li a span {display:none;}
.wrap-sub-navi .box-sub-favo .close {text-indent:-9999px; position:absolute; right:0px; top:0px; width:40px; height:50px; background:url('/images/knou/common/btn-favo-close.png') no-repeat center center;}
.wrap-sub-navi .box-sub-favo .close:hover {transform: rotate( 180deg ); transition: all 0.75s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .box-sub-favo .del {width:17px; height:17px; margin:0 0 0 10px; background:url('/images/knou/common/btn-favo-del.png') no-repeat center center; text-indent:-9999px;}
.wrap-sub-navi .box-sub-favo .control {text-align:center;}
.wrap-sub-navi .box-sub-favo .control button {display:inline-block;}
.wrap-sub-navi .box-sub-favo .control button.add {background: #242527 url('/images/knou/common/btn-favo-add.png') no-repeat 83% center; margin-top: 11px; padding: 5px 35px 5px 15px; font-size: 14px; color: #FFF;}
.wrap-sub-navi .box-sub-favo .control button.reset {background: #fff; padding: 9px 20px; border-radius: 5px; border: 1px solid #50555d; font-family: 'Noto Regular'; font-size: 14px; color: #50555d;}
.wrap-sub-navi .box-sub-favo .control.list.on {padding: 15px 0; border-top: 1px solid #d6d6d6;}
.wrap-sub-navi .box-sub-favo #favoriteList {border-top: 1px solid #cdcdcd;}
.wrap-sub-navi .box-sub-favo .guide {padding: 15px 0 20px 0; background: #f0f0f0; text-align: center;}
.wrap-sub-navi .box-sub-favo .guide #favoriteTitle {font-size: 14px; color: #565656;}
.wrap-sub-navi .box-sub-share {opacity:0; overflow:hidden; max-height:0px; position:absolute; right:2000%; padding: 20px;  top:45px; background: #fff; width:340px; border: 1px solid #cecece; transition:opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1), max-height 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .box-sub-share.on {opacity:1; max-height:1000px; right:0px; transition:opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1), max-height 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .box-sub-share .close {text-indent: -9999px; position: absolute; right: 0px; top: 0px; width: 40px; height: 50px; background: url(/images/knou/common/btn-favo-close.png) no-repeat center center;}
.wrap-sub-navi .box-sub-share .close:hover {transform: rotate( 180deg ); transition: all 0.75s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .box-sub-share .send {margin-bottom: 15px;}
.wrap-sub-navi .box-sub-share .send strong {display: inline-block; width: 60px; vertical-align: middle; font-size: 16px; color: #2a2a2a;}
.wrap-sub-navi .box-sub-share .send ul {display: inline-block; vertical-align: middle;}
.wrap-sub-navi .box-sub-share .send li {float: left; margin-right: 5px;}
.wrap-sub-navi .box-sub-share .send li button {width: 25px; height: 25px; background: url('/images/knou/common/ico-sub-share.png') no-repeat; text-indent: -9999px;}
.wrap-sub-navi .box-sub-share .send li .fb {background-position: 0 0;}
.wrap-sub-navi .box-sub-share .send li .tw {background-position: -25px 0;}
.wrap-sub-navi .box-sub-share .send li .ks {background-position: -50px 0;}
.wrap-sub-navi .box-sub-share .send li .pn {background-position: -75px 0;}
.wrap-sub-navi .box-sub-share .send li .na {background-position: -100px 0;}
.wrap-sub-navi .box-sub-share .send li .is {background-position: -125px 0;}
.wrap-sub-navi .box-sub-share .copy strong {display: inline-block; width: 60px; vertical-align: middle; font-size: 16px; color: #2a2a2a;}
.wrap-sub-navi .box-sub-share .copy input {width: 170px; height: 35px; border: 1px solid #cecece; line-height: 35px; text-indent: 10px; font-size: 14px; color: #666;}
.wrap-sub-navi .box-sub-share .copy button {width: 60px; height: 35px; line-height: 35px; text-align: center; background: #5d5d5d; font-size: 14px; color: #fff;}

@media all and (max-width: 1400px) {
    .wrap-sub-navi .sub-util {right: 40px;}
}

@media all and (max-width: 760px) {
    .wrap-sub-navi {margin: -50px 0 0 0;}
    .wrap-sub-navi .container {height: 50px;}
    .wrap-sub-navi .sub-util {top: 76px;}
    .wrap-sub-navi .sub-util > ul > li:first-child {display: none;}
    .wrap-sub-navi .sub-navi > ul > li {padding-left: 10px;}
    .wrap-sub-navi .sub-navi > ul > li > a,
    .wrap-sub-navi .sub-navi > ul > li > .inner > button {font-size: 16px; height: 50px; line-height: 50px;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button {padding: 0 30px 0 0; background: url('/images/knou/common/arrow-page-nav2-resize.png') no-repeat top right;}
}