@charset "utf-8";

@font-face {font-family: 'Noto Sans KR';font-weight: 300;src: url(./font/NotoSansKR-Light.woff2) format('woff2'),url("./font/NotoSansKR-Light.woff") format('woff');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(./font/NotoSansKR-Regular.woff2) format('woff2'),url(./font/NotoSansKR-Regular.woff) format('woff');}
@font-face {font-family: 'Noto Sans KR';font-weight: 500;src: url(./font/NotoSansKR-Medium.woff2) format('woff2'),url(./font/NotoSansKR-Medium.woff) format('woff');} 
@font-face {font-family: 'Noto Sans KR';font-weight: 700;src: url(./font/NotoSansKR-Bold.woff2) format('woff2'),url(./font/NotoSansKR-Bold.woff) format('woff');} 
@font-face {font-family: 'cafe24ss'; src: url(./font/Cafe24Ssurround.woff) format('woff');}

body {
    letter-spacing: -0.05em;
}

.enhi_body_box {
    /* 공통 박스 */
    box-sizing: border-box;
    margin: auto;
    max-width: 1280px;
}
 

/* gnb영역 */

header.enhi_header {
    /* newsub 오버라이드.. */
    background: none;
    border-bottom: 2px solid #5d9eee;
    box-sizing: border-box;
    height: auto;
    display: block;
    top: auto;
    min-width: 1024px;
    z-index: auto;
}

.__fixed {
    padding-top: 122px;
}

.enhi_new_main.__fixed {
    padding-top: 0;
}

.__fixed header.enhi_header {
    background: rgba(255,255,255,0.95);
    border-bottom: 2px solid #5d9eee;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.__fixed .enhi_body {
    margin-top: 122px;
}

.enhi_new_main .enhi_header {
    border-bottom: none;
}

.enhi_header .enhi_header_box {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    height: 122px;
    justify-content: space-between;
    margin: auto;
    max-width: 1280px;
    position: relative;
}

.enhi_header .enhi_home {
    margin: 0 0 22px 26px;
}

.enhi_header .enhi_home .enhi_home_link {
    display: block;
    width: 160px;
}

.enhi_header .enhi_home .enhi_home_link img {
    width: 100%;
}

.enhi_header .enhi_gnb_top {
    align-items: center;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
    top: 20px;
}

.enhi_header .enhi_gnb_top .enhi_gnb_top_login {
    color: #383838;
    display: block;
    font-size: 16px;
    font-weight: 400;
}

.enhi_header .enhi_gnb_top a.enhi_gnb_top_login:hover {
    color: #000;
    font-weight: 600;
}

.enhi_header .enhi_gnb_top .enhi_gnb_top_login .enhi_mobile_login_txt {
    display: none;
}

.enhi_header .enhi_gnb_top .enhi_gnb_top_links {
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-left: 30px;
}


.enhi_header .enhi_gnb_top .enhi_gnb_top_links > li + li {
    margin-left: 30px;
}

.enhi_header .enhi_gnb_top .enhi_gnb_top_links .enhi_top_links_item {
    color: #383838;
    display: block;
    font-size: 16px;
    font-weight: 400;
}

.enhi_header .enhi_gnb_top .enhi_gnb_top_links .enhi_top_links_item.login {
    display: none;
}

.enhi_header .enhi_gnb_top .enhi_gnb_top_links .enhi_top_links_item:not(.type_eng):hover {
    color: #000;
    font-weight: 600;
}

.enhi_header .enhi_gnb_top .enhi_gnb_top_links .enhi_top_links_item.type_eng {
    align-items: center;
    border: 1px solid #383838;
    color: #383838;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    height: 26px;
    justify-content: center;
    margin-left: 15px;
    width: 54px;
}

.enhi_header .enhi_gnb_top .enhi_gnb_top_links .enhi_top_links_item.type_eng:hover, .enhi_header .enhi_gnb_top .enhi_gnb_top_links .enhi_top_links_item.type_eng:focus {
    background: #efefef;
}


.enhi_header .enhi_common_gnb .enhi_menu_toggle, .enhi_header .enhi_common_gnb .enhi_menu_toggle_close {
    display: none;
}


.enhi_header .enhi_common_nav {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 57px;
    padding-right: 76px;
}

.enhi_header .enhi_common_nav > li {
    height: 100%;
    padding: 0 10px;
    position: relative;
}

.enhi_header .enhi_common_nav > li + li {
    margin-left: 86px;
}

.enhi_header .enhi_common_nav > li:last-child {
    display: none;
}

.enhi_header .enhi_common_nav .enhi_nav_dep1 {
    color: #000;
    display: block;
    font-family: 'Noto Sans KR';
    font-size: 20px;
    font-weight: 600;
    margin-top: 6px;
}

.enhi_header .enhi_common_nav .enhi_nav_dep1_2 {
    color: white;
    display: block;
    font-family: 'Noto Sans KR';
    font-size: 20px;
    font-weight: 600;
    margin-top: 6px;
}
.enhi_header .enhi_common_nav .enhi_nav_dep1_3 {
width:130px;height:50px;padding:5px;text-align:center;border-radius:5px;margin-top:-10px;background:black;
}

.enhi_header .enhi_common_nav > li .enhi_nav_dep2 {
    background: #fff;
    /* border: 2px solid #6f9ddb; */
    display: none;
    left: 50%;
    margin-top: 20px;
    padding: 20px 15px 20px 15px;
    position: absolute;
    transform: translateX(-50%);
    width: 172px;
    z-index: 5;
    text-align:center;
    opacity:100%;
    height:430px;
}

.enhi_header .enhi_common_nav > li .enhi_nav_dep2_2 {
    background: #fff;
    /* border: 2px solid #6f9ddb; */
    display: none;
    left: 50%;
    margin-top: 20px;
    padding: 20px 15px 20px 15px;
    position: absolute;
    transform: translateX(-50%);
    width: 175px;
    z-index: 5;
    text-align:center;
    opacity:95%;
    height:430px;
}

.enhi_header .enhi_common_nav > li .enhi_nav_dep2 > li + li {
    margin-top: 18px;
}

.enhi_header .enhi_common_nav > li .enhi_nav_dep2_2 > li + li {
    margin-top: 18px;
}

.enhi_header .enhi_common_nav > li:hover .enhi_nav_dep1 {
    color: #5d9eee;
}  

.enhi_header .enhi_common_nav > li:hover .enhi_nav_dep1_2 {
    color: #ffc000 !important;
}  

.enhi_header .enhi_common_nav > li:hover .enhi_nav_dep1_3 {
    background:black;
} 

.enhi_header .enhi_common_nav > li .enhi_nav_dep2.__on {
    display: block;
    z-index:999;
}

.enhi_header .enhi_common_nav > li .enhi_nav_dep2_2.__on {
    display: block;
    z-index:999;
}

@media (min-width:1064px) {
    .enhi_header .enhi_common_nav > li .enhi_nav_dep2 {
        display: none !important;
    }

    .enhi_header .enhi_common_nav > li .enhi_nav_dep2.__on {
        display: block !important;
    z-index:999;
    }
}
@media (min-width:1064px) {
    .enhi_header .enhi_common_nav > li .enhi_nav_dep2_2 {
        display: none !important;
    }

    .enhi_header .enhi_common_nav > li .enhi_nav_dep2_2.__on {
        display: block !important;
    z-index:999;
    }
}

.enhi_header .enhi_common_nav > li .enhi_nav_dep2 a {
    color: #3f3f3f;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height:0.1;
    padding: 2px 0;
    word-break: keep-all;
}

.enhi_header .enhi_common_nav > li .enhi_nav_dep2_2 a {
    color: #3f3f3f;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height:0.1;
    padding: 2px 0;
    word-break: keep-all;
}

.enhi_header .enhi_common_nav > li .enhi_nav_dep2 a:hover {
    color: #5d9eee;
    font-weight: 600;
}

.enhi_header .enhi_common_nav > li .enhi_nav_dep2_2 a:hover {
    color: #ffc000 !important;
    font-weight: 600;
}

.enhi_header .enhi_header_search  {
    bottom: 0;
    position: absolute;
    right: 0;
}

.enhi_header .enhi_header_search .enhi_search_on_btn {
    background: #000 url(../images/newmain23/ico_main_search.png) center no-repeat;
    border: none;
    bottom: 22px;
    height: 38px;
    position: absolute;
    right: 0;
    text-indent: -99999999px;
    width: 38px;
}

.enhi_header .enhi_header_search .enhi_header_search_wrap {
    background: rgba(255,255,255,0.94);
    border: 5px solid #4d8dd2;
    display: none;
    padding: 50px 20px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 1280px;
       z-index:140;
    
}

.enhi_header .enhi_header_search .enhi_header_search_wrap.__show {
    display: block;
}

.enhi_header_search_wrap .enhi_search_close_btn {
    background: url(../images/newmain23/ico_search_close.png) center no-repeat;
    border: none;
    font-size: 0;
    height: 36px;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 36px;
}

.enhi_header_search_wrap .enhi_search_box {
    display: inline-flex;
    flex-direction: column;
}

.enhi_header_search_wrap .enhi_search_box .enhi_search_block + .enhi_search_block {
    margin-top: 30px;
}

.enhi_header_search_wrap .enhi_search_block {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.enhi_search_block .enhi_search_input {
    background: #ebf1f8;
    border: 1px solid #b4c3d4;
    border-radius: 6px;
    color: #3f6187;
    font-size: 18px;
    height: 40px;
    padding: 0 15px;
    width: calc(100% - 95px);
    min-width: 370px;
}

.enhi_search_block .enhi_go_search_btn {
    background: #4b84d2;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    height: 40px;
    margin-left: 5px;
    width: 90px;
}

.enhi_search_block .enhi_search_select_tit {
    color: #4b84d2;
    font-size: 18px;
    font-weight: 600;
    margin-right: 18px;
}

.enhi_search_block .enhi_search_select {
    border: 1px solid #b4c3d4;
    background: #ebf1f8;
    border-radius: 6px;
    color: #3f6187;
    font-size: 18px;
    height: 40px;
    padding: 0 15px;
}

.enhi_search_block .enhi_search_select + .enhi_search_select {
    margin-left: 5px;
}

/* footer */
.enhi_footer {
    border-top: 2px solid #c6c6c6;
}

.enhi_new_main .enhi_inquiry + .enhi_footer {
    border-top: none;
}

.enhi_footer .enhi_footer_top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 108px;
}

.enhi_footer .enhi_footer_top .enhi_footer_links {
    display: flex;
    flex-direction: row;
}

.enhi_footer .enhi_footer_top .enhi_footer_links > li + li {
    margin-left: 60px;
}

.enhi_footer .enhi_footer_top .enhi_footer_links .enhi_footer_links_item {
    color: #383838;
    font-size: 18px;
    font-weight: 600;
}

.enhi_footer .enhi_footer_top .enhi_footer_links > li:nth-child(2) .enhi_footer_links_item {
    color: #0674bb;
}

.enhi_footer .enhi_footer_top .enhi_footer_links .enhi_footer_links_item:hover {
    text-decoration: underline;
}



.enhi_footer .enhi_footer_top .enhi_footer_sns {
    display: flex;
    flex-direction: row;
}

.enhi_footer .enhi_footer_top .enhi_footer_sns > li + li {
    margin-left: 6px;
}

.enhi_footer .enhi_footer_top .enhi_footer_sns .enhi_footer_sns_item {
    display: block;
    font-size: 0;
    height: 46px;
    width: 46px;
}

.enhi_footer .enhi_footer_sns_item._fb {
    background: url(../images/newmain23/ico_facebook.png) no-repeat;
    background-size: cover;
}

.enhi_footer .enhi_footer_sns_item._tw {
    background: url(../images/newmain23/ico_twitter.png) no-repeat;
    background-size: cover;
}

.enhi_footer .enhi_footer_sns_item._yb {
    background: url(../images/newmain23/ico_youtube.png) no-repeat;
    background-size: cover;
}

.enhi_footer .enhi_footer_top + .enhi_footer_bottom {
    margin-top: 26px;
}

.enhi_footer .enhi_footer_bottom {
    background: url(../images/newmain23/img_ft_logo.png) left top no-repeat;
    background-size: 160px;
    padding: 0 380px 40px 230px;
    position: relative;
}

.enhi_footer .enhi_footer_bottom .enhi_footer_shortcut {
    position: absolute;
    right: 0;
    top: 0;
}

.enhi_footer .enhi_footer_bottom .enhi_footer_shortcut > li {
    display: flex;
    flex-direction: row;
}

.enhi_footer .enhi_footer_bottom .enhi_footer_shortcut > li + li {
    margin-top: 5px;
}

.enhi_footer_shortcut .enhi_footer_select {
    border: 1px solid #e0e0e0;
    border-right: none;
    color: #383838;
    font-size: 16px;
    font-weight: 400;
    height: 42px;
    overflow: hidden;
    padding: 0 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 240px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.enhi_footer_shortcut .enhi_footer_select::-ms-expand{
    display: none;
}

.enhi_footer_shortcut .enhi_footer_shortcut_btn {
    background: #555;
    color: #fff;
    font-family: 'Noto Sans KR';
    font-size: 14px;
    font-weight: 700;
    height: 42px;
    width: 42px;
}

.enhi_footer .enhi_footer_bottom .enhi_footer_info .enhi_footer_txt {
    color: #383838;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.enhi_footer .enhi_footer_bottom .enhi_footer_info .enhi_footer_txt + .enhi_footer_txt {
    margin-top: 8px;
}

.enhi_footer .enhi_footer_bottom .enhi_footer_info .enhi_footer_cpr {
    color: #383838;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    position: absolute;
    right: 0;
    bottom: 40px;
}

body.__scrov {
    height: 100vh;
    overflow: hidden; 
    width: 100%;   
}

/* 20230825 */
header.enhi_header.renewal{
	border-bottom:1px solid #777373;
}
.enhi_header.renewal .enhi_common_nav{
	padding-right:50px;
}
.enhi_header.renewal .enhi_common_nav > li{
	width:160px;
}
.enhi_header.renewal .enhi_common_nav .enhi_nav_dep1{
	line-height:22px;
	font-size:18px;
	height: 57px;
    display: flex;
    align-items: center;
	justify-content:center;
	margin-top: -10px;
}
.enhi_header.renewal .enhi_common_nav > li .enhi_nav_dep2{
	margin:0;
	width:160px;
    padding:20px 5px;
}
.enhi_header.renewal .enhi_common_nav > li .enhi_nav_dep2 a{
	font-size:15px;
}
.enhi_header.renewal .enhi_common_nav > li + li{
	margin:0;
}
.polygon-con-wrap{
	position:relative;
	height:456px;
	margin-top: -15px;
}
.polygon-con-wrap:after{
	content:"";
	position:absolute;
	top:760px;left:0;
	background:url(/images/newmain23/polygon-bg03.png) no-repeat 0 0;
	width:262px;height:354px;
}
.polygon-con-wrap:before{
	content:"";
	position:absolute;
	top:416px;right:0;
	background:url(/images/newmain23/polygon-bg04.png) no-repeat 0 0;
	width:283px;height:354px;
}
.polygon-con-wrap .visual-area{
	background:url(/images/newmain23/polygon-visual01.png) no-repeat 50% 50%;
	background-size:cover;
	height:374px;
}
.polygon-con-wrap .visual-area.bg01{
	background-image:url(/images/newmain23/polygon-visual01.png);
}
.polygon-con-wrap .visual-area.bg02{
	background-image:url(/images/newmain23/polygon-visual02.png);
}
.polygon-con-wrap .visual-area.bg03{
	background-image:url(/images/newmain23/polygon-visual03.png);
}
.polygon-con-wrap .polygon-con{
	 display: flex;
    align-items: center;
	position:relative;
	margin: 0 auto;
    max-width: 1280px;
    height: 100%;
}
.polygon-con-wrap .polygon-con .m-name{
	color: #fff;
	font-size: 48px;
	font-weight: 700;
}
.polygon-con-wrap .polygon-con .tab-area{
	position:absolute;
	right:161px;
	bottom:-79px;
	width: 490px;
}
.polygon-con-wrap .polygon-con .tab-area ul li{
	background:url(/images/newmain23/tab-polygon-off.png) no-repeat 50% 50%;
	background-size:cover;
	width:193px;
	height:174px;
}
.polygon-con-wrap .polygon-con .tab-area ul li.on{
	background-image:url(/images/newmain23/tab-polygon-on.png);
}
.polygon-con-wrap .polygon-con .tab-area ul li.on  a.inner{
	font-size:30px;
	background:url(/images/newmain23/polygon-check.png) no-repeat 50% 46px;
	padding-top:82px;
}
.polygon-con-wrap .polygon-con .tab-area ul li a.inner{
	display: block;
	padding-top: 72px;
	color: #fff;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	width: 100%;
	height:100%;
	-webkit-clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
	clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.polygon-con-wrap .polygon-con .tab-area ul li.tab03.on  a.inner{
	background-position:50% 30px;
	padding-top:66px;
}
.polygon-con-wrap .polygon-con .tab-area ul li.tab01{
	position:absolute;
	bottom:0;left:-29px;
}
.polygon-con-wrap .polygon-con .tab-area ul li.tab02{
	position:absolute;
	bottom: 91px;
	left: 134px;
}
.polygon-con-wrap .polygon-con .tab-area ul li.tab03{
	position:absolute;
	bottom:0;right:0;
}
.polygon-con-wrap .polygon-con .tab-area ul li.tab03 span.write {
    position: absolute;
    bottom: 26px;
    left: 50%;
    display: inline-block;
    margin: 23px 0 0 -38px;
    padding: 5px 5px 5px 28px;
    font-size: 16px;
    color: #fff;
    background: url(/images/newmain23/polygon-write.png) no-repeat 0 50%;
    width: 76px;
}
.polygon-con-wrap + .mcon{
	width:1280px;
}
.polygon-con-wrap + .mcon .attention {
    margin-left:0;
    width:1280px;
    min-height: 800px;
}
.polygon-con-wrap + .mcon .attention .tbl-type1{
	border-top:none;
}
.polygon-con-wrap + .mcon .attention .tbl-type1 table th{
	background:#fff;
	border-top:none;
	border-bottom:1px solid #333;
}
.att-tit .att-sub-tit{
	position:relative;
	display: inline-block;
	color: #555;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	vertical-align:middle;
	margin: 0 0 0 15px;
    padding: 0 0 0 15px;
}
.att-tit .att-sub-tit:after{
	content:"";
	position:absolute;
	top:0;left:0;
	width:1px;height:22px;
	background:#cdcdcd;
}
.card-con-wrap{
	overflow:hidden;
}
.card-con-wrap .card-con{
	float:left;
	display: block;
    height: 100%;
    position: relative;
	width: 300px;
	margin: 0 10px 45px;
	text-align: center;
}
.card-con .card-con-img {
    display: block;
    margin-bottom: 14px;
    overflow: hidden;
    padding-top: 55%;
    position: relative;
	border-radius:10px;
}

.card-con .card-con-img img {
    left: 0;
    height: auto;
    position: absolute;
    transition: all 0.3s;
    top: 0;
    width: 100%;
}

.card-con:hover .card-con-img img {
    transform: scale(1.1);
}

.card-con .card-con-title {
    color: #383838;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 16px;
    min-height: 2.6em; 
    word-break: keep-all;
	text-align:left;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-con .card-con-text {
    color: #383838;
    font-size: 16px;
    line-height: 1.2;
}

.card-con .card-con-text + .card-con-text {
    margin-top: 5px;
}

.card-con .card-con-text-wrap{
	display: flex;
	justify-content: space-between;
}
.card-con .card-con-text-wrap .card-con-text:nth-child(1){
	color:#666;
}
.card-con .card-con-text-wrap .card-con-text:nth-child(2){
	padding-left:28px;
	background:url(/images/newmain23/icon-eye.png) no-repeat 0 50%; 
	margin: 0;
}

@media (max-width:1320px) {
    .enhi_header {
        padding: 0 20px;
    }

    .enhi_header .enhi_header_search .enhi_header_search_wrap {
        right: -20px;
        max-width: 100vw;
    }

    .enhi_footer {
        min-width: 1280px;
    }
    
    .enhi_footer .enhi_body_box {
        min-width: 1280px;
        padding: 0 20px;
    }
}
@media (max-width:1280px) {
	.enhi_header.renewal .enhi_common_nav > li{
		width:132px;
	}
	.enhi_header.renewal .enhi_common_nav > li .enhi_nav_dep2{
		width:132px;
	}
	.enhi_header.renewal .enhi_common_nav > li .enhi_nav_dep2 > li + li{
		margin-top:8px;
	}
	.enhi_header.renewal .enhi_common_nav > li .enhi_nav_dep2 a {
		line-height: 20px;
	}
}

@font-face {font-family: 'Noto Sans KR';font-weight: 300;src: url(/font/NotoSansKR-Light.woff2) format('woff2'),url("/font/NotoSansKR-Light.woff") format('woff');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(/font/NotoSansKR-Regular.woff2) format('woff2'),url(/font/NotoSansKR-Regular.woff) format('woff');}
@font-face {font-family: 'Noto Sans KR';font-weight: 500;src: url(/font/NotoSansKR-Medium.woff2) format('woff2'),url(/font/NotoSansKR-Medium.woff) format('woff');} 
@font-face {font-family: 'Noto Sans KR';font-weight: 700;src: url(/font/NotoSansKR-Bold.woff2) format('woff2'),url(/font/NotoSansKR-Bold.woff) format('woff');} 
@font-face {font-family: 'NanumSquare'; src: url(/font/NanumSquareL.woff) format('woff');}
h1, h2, h3, h4, h5, h6, input, textarea, select, main {font-family: 'Noto Sans KR', sans-serif;}

html {scroll-behavior: smooth;}
/* 사업명:나라배움터 공공기관 공동활용 기반강화 사업  /*
// MODIFY BEFORE (1)

/* * {max-height: 1000000px; margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline: none}
-------------------------------------------------- 
 */
/* --------------------------------------------------
// MODIFY START (1)
// -------------------------------------------------- */
* {max-height: 1000000px; margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline: hidden} 
/* // --------------------------------------------------
// MODIFY END (1)
// -------------------------------------------------- */
main {font-size:14px;}
ul {list-style: none;}
a {text-decoration: none; cursor: pointer;}
/* 사업명:나라배움터 공공기관 공동활용 기반강화 사업  /*
// MODIFY BEFORE (1)

/* a:focus {outline: auto;} 
-------------------------------------------------- 
 */
/* --------------------------------------------------
// MODIFY START (1)
// -------------------------------------------------- */
 a:focus {outline: hidden;} 
/* // --------------------------------------------------
// MODIFY END (1)
// -------------------------------------------------- */

button {cursor: pointer;}
.hidden {display: none;}
.active {display: block;}

/* 퀵 사이드바 */
.quick_right {position: fixed; top: 85%; transform:translateY(-20%); right: 50px; z-index: 10; background: #fff; border: 1px #dee3eb solid; padding: 5px; border-radius: 20px; box-shadow: 0 0 5px 5px rgba(185,185,185,0.2);}
.quick_right button {display:block; position:relative; width:30px; height:30px; border-radius:50%; margin-bottom:10px; border: none;}
.quick_right button:last-child {margin-bottom: 0;}
.quick_right button.btn_up {background: #0674bb url("/images/arrow.png") no-repeat center; background-size: 16px auto;}
.quick_right button.btn_down {background: #053863 url("/images/arrow.png") no-repeat center; background-size: 16px auto; transform: rotate(180deg); transition: linear;}
.quick_right button.btn_top {background: #000 url("/images/top.png") no-repeat center; background-size: 12px auto;}
.quick_right button.btn_up.disabled {background: #ccc url("/images/arrow.png") no-repeat center; background-size: 16px auto;}
.quick_right button.btn_down.disabled {background: #ccc url("/images/arrow.png") no-repeat center; background-size: 16px auto; transform: rotate(180deg);}

/* 상단 */
.micro_top {width: 100%; background: #053863; height: 200px; padding: 65px 0 0;}
.micro_top h2 {width: 1200px; margin: 0 auto 15px; color: #fff; font-size: 34px;}
.micro_top p {width: 1200px; margin: 0 auto; color: #fff; font-size: 18px;}
.micro_top .ani {position:absolute; width: 600px; height: 200px; left: 50%; transform: translate(-30px, -55px); margin: 0 auto; overflow: hidden;}
.micro_top .ani:before {content: ''; display: inline-block; background: url("/images/ani_01.png") 0 0 no-repeat; width: 282px; height: 179px; animation: slidein 3s; margin-left:250px;}
.micro_top .ani_2 {position:absolute; width: 600px; height: 200px; left: 50%; transform: translate(-30px, -55px); margin: 0 auto; overflow: hidden;}
.micro_top .ani_2:before {content: ''; display: inline-block; background: url("/images/ani_02.png") 0 0 no-repeat; width: 282px; height: 179px; margin-left: 250px; animation: fadein 5s;}

@keyframes slidein {
  from {margin-left: 0%; width: 100%;}
  to {margin-left: 250px; width: 200%}
}
@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* 메뉴 */
nav.in_micro_nav {width: 1200px; height: 46px; margin: 0 auto;}
nav.in_micro_nav li {float: left; margin-right: 20px; padding: 15px 0; text-align: center;}
nav.in_micro_nav li:last-child {margin-right: 0;}
nav.in_micro_nav li a {position: relative; font-size: 16px; text-align: center; font-weight: bold; transition:all 0.4s;}
nav.in_micro_nav li:hover > a, nav.in_micro_nav li.active > a {color:#0674bb;}
nav.in_micro_nav > ul > li > a:after {content: ''; height: 2px; width: 90px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.4s; background: #0674bb; position: absolute; bottom: -10px;}
nav.in_micro_nav li:hover > a:after, nav.in_micro_nav li.active > a:after {opacity: 1;}
nav.in_micro_nav li:hover .dep_2 {height: 230px; box-shadow: 2px 2px 5px #888;}
nav.in_micro_nav li:hover .dep_2.two_line {height: 95px;}
nav.in_micro_nav li:hover .dep_2.four_line {height: 190px;}
nav.in_micro_nav li:hover .dep_2.seven_line {height: 320px;}
nav.in_micro_nav li ul.dep_2 {position: absolute; z-index: 10; background: #fff; margin-top: 11px;  transition:all 0.4s; height: 0; overflow:hidden;}
nav.in_micro_nav li ul.dep_2 li {float: none; margin-right: 0;}
nav.in_micro_nav li ul.dep_2 li a {font-size: 15px;}

/* 위치표시 */
.location_area {margin: auto; width: 100%; max-width: 1200px; padding-top: 15px;}
.location_area .location_mark {float: right;}
.location_area .location_mark li {float: left; margin-left: 6px; font-family: 나눔고딕, NanumGothic, "Nanum Gothic", 돋움, dotum;}
.location_area h3.tit {font: bold 2rem '나눔스퀘어'; margin: 40px 0; color: #000;display:inline-block;}
.location_area h3.view_tit {font: bold 2rem '나눔스퀘어'; margin: 40px 0 0; color: #000; padding-bottom: 40px; border-bottom: 1px #555 solid;}

/* 추천콘텐츠 */
#bg_control section:nth-child(2n+2) {background: #f5f5f5;}
.gray {background: #f5f5f5;}
.black {background: #000; color: #fff;}
.blue {background: #0272ba; display: flex; justify-content: center;}
section article.contents {padding: 50px 0; margin: auto; width: 100%; max-width: 1200px;}

.area_mark {width: 20%; height: 206px; float: left; border: 1px #888 solid; margin-right: 2%;}
.area_mark.gray_5 {background: #555 url("/images/icon_m01.png") right bottom no-repeat; color: #fff;}
.area_mark.greenblue {background: #2F5F77 url("/images/icon_m02.png") right bottom no-repeat; color: #fff;}
.area_mark.glo {background: #594072 url("/images/icon_m03.png") right bottom no-repeat; color: #fff;}
.area_mark.human {background:#537F6A url("/images/icon_m04.png") right bottom no-repeat; color: #fff;}
.area_mark.it {background:#333 url("/images/icon_m05.png") right bottom no-repeat; color: #fff;}
.area_mark.work {background:#523E30 url("/images/icon_m06.png") right bottom no-repeat; color: #fff;}
.area_mark.work2 {background:#432425 url("/images/icon_m06.png") right bottom no-repeat; color: #fff;}
.area_mark.gray_l {background: #555 url("/images/icon_m08.png") right bottom no-repeat; color: #fff;}
.area_mark.heal {background:#326763 url("/images/icon_m07.png") right bottom no-repeat; color: #fff;}
.area_mark.share {background:#432425 url("/images/icon_m08.png") right bottom no-repeat; color: #fff;}
.area_mark h4 {font-size: 22px; font-weight: 500; margin: 30px;}


.area_mark {width: 20%; height: 206px; float: left; border: 1px #888 solid; margin-right: 2%;}
.area_mark.gray_5 {background: #555 url("/images/icon_m01.png") right bottom no-repeat; color: #fff;}
.area_mark.greenblue {background: #2F5F77 url("/images/icon_m02.png") right bottom no-repeat; color: #fff;}
.area_mark.glo {background: #594072 url("/images/icon_m03.png") right bottom no-repeat; color: #fff;}
.area_mark.human {background:#537F6A url("/images/icon_m04.png") right bottom no-repeat; color: #fff;}
.area_mark.it {background:#333 url("/images/icon_m05.png") right bottom no-repeat; color: #fff;}
.area_mark.work {background:#523E30 url("/images/icon_m06.png") right bottom no-repeat; color: #fff;}
.area_mark.heal {background:#326763 url("/images/icon_m07.png") right bottom no-repeat; color: #fff;}
.area_mark.share {background:#432425 url("/images/icon_m08.png") right bottom no-repeat; color: #fff;}
.area_mark h4 {font-size: 22px; font-weight: 500; margin: 30px;}

.con_list {width: 100%;}
.con_list .thumb {max-width: 270px; max-height: 150px; overflow: hidden; border: 1px #dee3eb solid;}
.con_list .thumb img {width: 100%; height: 100%; max-width: 270px; max-height: 150px; top: 0; transition: all 0.4s; object-fit: cover;}
.thumb img:hover {transform: scale(1.1);}
.con_list p.con_cls {display: inline-block; padding: 2px 15px; font: bold 12px 'Noto Sans KR'; color: #fff; background: #0674bb; border-radius: 3px; margin: 5px 0;}
.con_list p.con_cls.series {background: #053863;}
.con_list .info_tit {max-width: 85%; font: bold 1rem 'Noto Sans KR'; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient:vertical; text-overflow: ellipsis;}
.con_list .info_tit span {margin-left: 10px;}
.con_list .info_tit span:before {content: ''; position: absolute; transform: translate(-6px, 6px); width: 2px; height: 14px; background: #999;}
.con_list button.slick-next::before {content: ''; border-radius: 1000px; min-width: 48px; min-height: 48px; border: 2px solid #555; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .3s ease-in-out 0s;}
.con_list button.slick-next::after {content: ''; width: 30px; height: 30px; border-radius: 100%; border: 2px solid #555; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ring 1.5s infinite;}

@keyframes ring {
  0% {width: 30px; height: 30px; opacity: 1;}
  100% {width: 50px; height: 50px; opacity: 0;}
}

/* 페이지 */
nav.sub_nav {margin: auto; width: 100%; max-width: 1200px; border-top: 1px #555 solid; border-bottom: 1px #555 solid; padding: 20px 0;}
nav.sub_nav li {display: inline-block; margin-right: 30px;}
nav.sub_nav li a {font-size: 15px; font-weight: 500; transition:all 0.4s;}
nav.sub_nav li a:hover, nav.sub_nav li.active a {color:#0674bb;}

/* SEARCH */
.sch_input {float: right; margin-top: -22px;}
.sch_input select {font: 400 12px 'Noto Sans KR'; border: 1px #ccc solid; height: 30px; padding-left: 10px; }
.sch_input input {width: 170px; padding-left: 10px; font: 400 12px 'Noto Sans KR'; border: 1px #ccc solid; line-height: 28px;}
.sch_input button {font: 400 14px 'Noto Sans KR'; color: #fff;transition: all 0.4s;text-align: center; padding: 4px 20px; background: #012b56; border: 1px #012b56 solid;}
.sch_input button:focus,.sch_input button:hover {background: #757575; border: 1px #757575 solid;}

/* 선택 바 */
article.choice {padding: 10px 0; margin: 0 auto; width: 100%; max-width: 1200px;}
.choice_first select {padding-left: 10px; border: 1px #ccc solid; height: 30px;}
.choice_first input {width: 170px; padding-left: 10px; font: 400 12px 'Noto Sans KR'; border: 1px #ccc solid; line-height: 28px;}
.choice_first button {font: 400 14px 'Noto Sans KR'; color: #fff;transition: all 0.4s;text-align: center; padding: 4px 20px; background: #012b56; border: 1px #012b56 solid;}
.choice_first button:focus,.sch_input button:hover {background: #757575; border: 1px #757575 solid;}

/* 1028 */
.choice_first input {width: 170px; padding-left: 10px; font: 400 12px 'Noto Sans KR'; border: 1px #ccc solid; line-height: 28px;}
.choice_first button {font: 400 14px 'Noto Sans KR'; color: #fff;transition: all 0.4s;text-align: center; padding: 4px 20px; background: #012b56; border: 1px #012b56 solid;}
.choice_first button:focus,.sch_input button:hover {background: #757575; border: 1px #757575 solid;}

.choice_second {float: right; margin-top: -30px;}
.choice_second a{display:inline-block;  width: 24px; height: 24px; overflow: hidden; vertical-align:middle; border: 1px #ccc solid;}
.choice_second a.view_img {background: url("/images/icon_list.png") no-repeat 2px 3px;}
.choice_second a.view_img:hover, .choice_second a.view_img.active {background: url("/images/icon_list.png") no-repeat 2px -16px;}
.choice_second a.view_list {background: url("/images/icon_list.png") no-repeat -20px 3px;}
.choice_second a.view_list:hover, .choice_second a.view_list.active {background: url("/images/icon_list.png") no-repeat -20px -16px;}
.choice_second label{font-size:14px; vertical-align:middle;margin-right:8px; margin-left:3px;}
.choice_second .pagingLabel {position: absolute; left: -200em;}
.choice_second input{vertical-align:middle;}
.choice_second select{font-size:14px; padding-left: 10px; border: 1px #ccc solid; vertical-align:middle; height:30px; margin-left:8px;}

/* 리스트 - 갤러리 */
article.img_list {padding: 20px; margin: 0 auto; width: 100%; max-width: 1200px;}
article.img_list:nth-child(2n+1) {background: #f5f5f5;}
article.img_list .item {display: flex;}
.img_list .thumb {max-width: 270px; max-height: 150px; overflow: hidden; border: 1px #dee3eb solid;}
.img_list .thumb img {width: 100%; height: 100%; max-width: 270px; max-height: 150px; min-width: 260px; min-height: 145px; top: 0; transition: all 0.4s; object-fit: cover;}
.img_list .thumb img:hover {transform: scale(1.1);}

.img_list .info {margin-left: 20px; width: 530px;}
.img_list .info .con_cls {display: inline-block; padding: 2px 15px; font: bold 0.9rem 'Noto Sans KR'; color: #fff; background: #0674bb; border-radius: 3px;}
.img_list .info .con_cls.series {background: #053863;}
.img_list .info .info_tit {width: 100%; font: bold 1.1rem 'Noto Sans KR'; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient:vertical; text-overflow: ellipsis; margin: 0; margin-top: 10px;}
.img_list .info .info_tit span {margin-left: 10px;}
.img_list .info .info_tit span:before {content: ''; position: absolute; transform: translate(-5px, 6px); width: 2px; height: 14px; background: #999;}
.img_list .info .textarea {width: 100%; font-family: 'Noto Sans KR'; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient:vertical; text-overflow: ellipsis; margin: 0; margin-top: 10px;}

.img_list .data_selec {margin-left: 20px;}
.img_list .data {margin-top: 50px; margin-bottom: 30px;}
.img_list .data li {float: left; font: 500 14px 'Noto Sans KR'; margin-right: 30px;}
.img_list .data li + li:before {content: ''; position: absolute; transform: translate(-15px, 3px); width: 2px; height: 9px; background: #999;}
.img_list .data li span {margin-right: 5px;}
.img_list .data .heart {width: 20px;}
.img_list .data .heart img {width: 16px;}
.img_list .selec {position: absolute; margin-top: 0px;}
.img_list .selec button {font: 400 14px 'Noto Sans KR'; color: #898989;transition: all 0.4s;text-align: center; padding: 4px 20px 4px 44px; border: 1px #ccc solid;}
.img_list .selec button.file {background: #fff url("/images/icon_folder.png") no-repeat 10px center;}
.img_list .selec button.file:hover {background: #ccc url("/images/icon_folder.png") no-repeat 10px center;}
.img_list .selec button.repeat {background: #fff url("/images/icon_repeat.png") no-repeat 10px center;}
.img_list .selec button.repeat:hover {background: #ccc url("/images/icon_repeat.png") no-repeat 10px center;}

/* 리스트 - 글 */
article.txt_list {padding: 20px; margin: 0 auto; width: 100%; max-width: 1200px;}
article.txt_list:nth-child(2n+1) {background: #f5f5f5;}
article.txt_list .item {display: flex;}

.txt_list .info {width: 650px; display: inline-block;}
.txt_list .info .con_cls {display: inline-block; padding: 2px 15px; font: bold 0.9rem 'Noto Sans KR'; color: #fff; background: #0674bb; border-radius: 3px; margin-right: 10px;}
.txt_list .info .con_cls.series {background: #053863;}
.txt_list .info .info_tit {width: 100%; font: bold 1.1rem 'Noto Sans KR'; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient:vertical; text-overflow: ellipsis; margin: 0;}
.txt_list .info .info_tit span {margin-left: 10px;}
.txt_list .info .info_tit span:before {content: ''; position: absolute; transform: translate(-5px, 6px); width: 2px; height: 14px; background: #999;}

.txt_list .data_selec {display: flex; margin-left: 20px;}
.txt_list .data li {float: left; font: 500 14px 'Noto Sans KR';  margin-top: 6px; margin-right: 30px;}
.txt_list .data li + li:before {content: ''; position: absolute; transform: translate(-15px, 3px); width: 2px; height: 9px; background: #999;}
.txt_list .data li span {margin-right: 5px;}
.txt_list .data .heart {width: 20px;}
.txt_list .data .heart img {width: 16px;}

.txt_list .selec {margin-left: -5px;}
.txt_list .selec button {font: 400 14px 'Noto Sans KR'; color: #898989;transition: all 0.4s;text-align: center; padding: 4px 20px 4px 44px; border: 1px #ccc solid;}
.txt_list .selec button.file {background: #fff url("/images/icon_folder.png") no-repeat 10px center;}
.txt_list .selec button.file:hover {background: #ccc url("/images/icon_folder.png") no-repeat 10px center;}
.txt_list .selec button.repeat {background: #fff url("/images/icon_repeat.png") no-repeat 10px center;}
.txt_list .selec button.repeat:hover {background: #ccc url("/images/icon_repeat.png") no-repeat 10px center;}

.list_paging {margin: 40px auto; width: 100%; max-width: 1200px; text-align: center;}
.list_paging a {display: inline-block; vertical-align: middle;}
.list_paging a.num {width: 32px; height: 32px; font: 400 14px 'Noto Sans KR'; line-height: 28px; transition: all 0.4s; border: 1px #dedede solid;}
.list_paging a.num:focus, .list_paging a.num:hover, .list_paging a.num.active {color: #fff; background: #0674bb; border: 1px #dedede solid;}


/* 시리즈 */
article.series_info {margin: 0 auto; width: 100%; max-width: 1200px; border-top: 1px #555 solid; border-bottom: 1px #555 solid; padding: 0 0 20px;}
h4.dep_3 {font-size: 22px; font-weight: 500; margin-top: 20px;}
.substance {display: flex; margin-top: 10px;}
.substance .thumb img {border: 1px rgba(255,255,255,0.0) solid; width: 145px; height: 145px; border-radius: 50%; overflow: hidden; object-fit: cover;}
.substance .thumb img:hover {transform: scale(1);}
.substance .textarea {margin-left: 30px; margin-top: 10px; height: 135px; overflow: hidden;}
.substance .textarea .txt_sub { width: 1000px; height: 120px; line-height: 20px; display: table-cell; vertical-align: middle;}

article.choice_three {padding: 10px 0 15px; margin: 0 auto; width: 100%; max-width: 1200px; border-bottom: 1px #ccc solid;}
.three_first {margin-left: 10px;}
.three_first .ch_wrap {vertical-align: middle;}
.three_first .ch_wrap input[type="checkbox"] {display: none;}
.three_first .ch_wrap input[type="checkbox"] + label {display: inline-block; background: url("/images/icon_check.png") 0 0 no-repeat; background-size: cover; width: 100px; height: 22px; cursor:pointer; padding: 5px 0 0 30px;}
.three_first .ch_wrap input[type="checkbox"]:checked + label {background: url("/images/icon_check.png") 0 -22px no-repeat; color: #0674bb; font-weight: bold;}
.three_second {float: right; margin-top: -24px;}
.three_second button {font: 400 14px 'Noto Sans KR'; color: #898989;transition: all 0.4s;text-align: center; padding: 4px 20px 4px 44px; border: 1px #ccc solid;}
.three_second button.file {background: #fff url("/images/icon_folder.png") no-repeat 10px center;}
.three_second button.file:hover {background: #ccc url("/images/icon_folder.png") no-repeat 10px center;}
.three_second button.repeat {background: #fff url("/images/icon_repeat.png") no-repeat 10px center;}
.three_second button.repeat:hover {background: #ccc url("/images/icon_repeat.png") no-repeat 10px center;}

article.series_list {padding: 20px 0; margin: 0 auto; width: 100%; max-width: 1200px;}
article.series_list:nth-child(2n+1) {background: #f5f5f5;}
article.series_list .item {display: flex;}
.series_list .ch_area {width: 50px;}
.series_list .ch_area input[type="checkbox"] {display: inline-block; width: 14px;height: 14px; border: 1px #ccc solid; cursor: pointer; margin-left: 15px;}
.series_list .thumb {position: relative;  max-width: 270px; max-height: 150px; overflow: hidden; border: 1px #dee3eb solid;}
.series_list .thumb img {width: 100%; height: 100%; max-width: 270px; max-height: 150px; top: 0; transition: all 0.4s; object-fit: cover;}
.series_list .thumb img:hover {transform: scale(1);}
.runtime {position: absolute; display: block; padding: 2px 10px; background-color: rgba(0,0,0,.35); color: #fff; font-size: 12px; margin-top: -20px; margin-left: 5px;}

.series_list .info {margin-left: 40px; width: 600px;}
.series_list .info .info_tit {width: 100%; font: bold 1.1rem 'Noto Sans KR'; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient:vertical; text-overflow: ellipsis; margin: 0;}
.series_list .info .textarea {width: 100%; line-height: 17px; font-family: 'Noto Sans KR'; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient:vertical; text-overflow: ellipsis; margin: 0; margin-top: 10px;}

.series_list .data_selec {margin-left: 40px;}
.series_list .data {height: 147px; display: table-cell; vertical-align: middle;}
.series_list .data li {float: left; font: 500 14px 'Noto Sans KR'; margin-right: 30px;}
.series_list .data li + li:before {content: ''; position: absolute; transform: translate(-15px, 3px); width: 2px; height: 9px; background: #999;}
.series_list .data li span {margin-right: 5px;}
.series_list .data .heart {width: 20px;}
.series_list .data .heart img {width: 16px;}

/* 뷰 */
.con_body {margin: 0 auto; width: 100%; max-width: 1200px; display: flex; padding-top: 20px;}
.con_body .site-contents {width: calc(100% - 370px); border-right: 1px solid #ececec;}
#vdoBox {display:inline-block; width:830px; padding-right: 20px; margin-bottom: -8px; padding-bottom: 8px;}
#vdoBox .vdo-area-player {width: 100%; height:480px; margin: 0px 0px; padding: 0px 0px;}
#p_div_item {display:inline-block; width:830px; padding-right: 20px; margin-bottom: -8px; padding-bottom: 8px;}
.vdo_area {display: flex;}
.vdo_info {width: calc(100% - 120px);}
.vdo_info .data {height: 55px; float: left; margin-top: 4px;}
.vdo_info .data li {float: left; font: 500 14px 'Noto Sans KR'; margin-right: 30px;}
.vdo_info .data li + li:before {content: ''; position: absolute; transform: translate(-15px, 3px); width: 2px; height: 9px; background: #999;}
.vdo_info .data li span {margin-right: 5px;}
.vdo_info .data .heart {width: 20px;}
.vdo_info .data .heart img {width: 16px;}
.vdo_info .star_point {float: left; margin-right: 20px;}
.vdo_info .learn_step {display: inline-block; border: 1px #ddd solid; padding: 4px 10px; border-radius: 15px; background: #ddd;}
.vdo_info .learn_steping {display: inline-block; border: 1px #0674bb solid; padding: 4px 10px; border-radius: 15px; background: #0674bb; color: #fff;}
.vdo_info .learn_end {display: inline-block; border: 1px #053863 solid; padding: 4px 10px; border-radius: 15px; background: #053863; color: #fff;}
.vdo_info .textarea {width: 100%; line-height: 17px; font-family: 'Noto Sans KR'; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient:vertical; text-overflow: ellipsis; margin: 0; margin-top: 10px;}
.vdo_menu {float: right; width: 105px;}
.vdo_menu button {float: left; width: 45px; font-size: 10px; height: 40px; border: 1px #ccc solid; margin-right: 5px; transition: all 0.4s;}
.vdo_menu button:before {content: ""; display: block; height: 45px;}
.vdo_menu button:last-child {float: none; margin-right: 0;}
.vdo_menu button.menu_heart {background: url("/images/icon_heart_2.png") no-repeat center center;}
.vdo_menu button.menu_heart:hover {background: #ccc url("/images/icon_heart_2.png") no-repeat center center;}
.vdo_menu button.menu_star {background: url("/images/icon_star.png") no-repeat center center;}
.vdo_menu button.menu_star:hover  {background: #ccc url("/images/icon_star.png") no-repeat center center;}
.vdo_menu button.menu_file {background: url("/images/icon_folder.png") no-repeat center center;}
.vdo_menu button.menu_file:hover  {background: #ccc url("/images/icon_folder.png") no-repeat center center;}
.vdo_menu button.menu_repeat {background: url("/images/icon_repeat.png") no-repeat center center;}
.vdo_menu button.menu_repeat:hover  {background: #ccc url("/images/icon_repeat.png") no-repeat center center;}

.vdo_menu .star_point_check {position: absolute; border: 1px #ccc solid; background: #fff; margin: 45px 0 0 7px; padding: 4px; cursor: pointer; z-index: 5; display: none;}
.vdo_menu .star_point_check:before {bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;border-bottom-color: #ccc; border-width: 11px; left: 50%; margin-left: -11px;}
.vdo_menu .star_point_check:after {bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #fff; border-width: 10px; left: 50%; margin-left: -10px;}
.vdo_menu .star_point_check .star_base {background: url(/images/star.png) repeat-x; height: 22px; width: 120px; outline: none;}
.vdo_menu .star_point_check .star_base .one {background: url(/images/star.png) repeat-x left bottom; height: 22px;}

/* 1001 */
.star_base>.input>label:hover, .star_base>.input>input:focus+label, .star_base>.input>input:checked+label{display: inline-block; background: url(/images/star.png) repeat-x left bottom; height: 22px;}
.star_base>.input{display:inline-block; width: 120px; background-size: 120px; height: 22px; white-space: nowrap; overflow: hidden; position: relative;}
.star_base>.input>input{position: absolute; width: 1px; height: 1px; opacity: 0;}
.star_base>.input.focus{outline: 1px dotted #ddd;}
.star_base>.input>label{width: 24px; height: 0; padding: 22px 0 0; overflow: hidden; float: left; cursor: pointer; position: absolute; top: 0; left: 0;}
.star_base>.input>label:hover~label{background-image: none;}
.star_base>.input>label[for="p1"]{width: 24px; z-index: 10;}
.star_base>.input>label[for="p2"]{width: 48px; z-index: 9;}
.star_base>.input>label[for="p3"]{width: 72px; z-index: 8;}
.star_base>.input>label[for="p4"]{width: 96px; z-index: 7;}
.star_base>.input>label[for="p5"]{width: 120px; z-index: 6;}
.star_base>output{opacity: 0;} 

.vdo_tag {margin-top: 10px;}
.vdo_tag a {font-size: 12px; margin-right: 10px;}
button.binding {float: right; margin: -22px 20px 0 0; font: 400 14px 'Noto Sans KR'; color: #898989; background: #fff; transition: all 0.4s; text-align: center; padding: 4px 20px; border: 1px #ccc solid;}
button.binding:hover {background: #ccc;}
.opinion {position: revert; margin-top: 50px;}
.opinion h5 {border-bottom: 1px solid #000; padding-bottom: 15px; margin-right: 20px; margin-bottom: 20px;}
button.btn_opinion_toggle {font-size: 18px; font-weight: 500; background: #fff; padding-right: 50px;}
button .opinion_count:before {content: ""; position: absolute; width: 2px; height: 15px; margin-top: 3px; margin-left: 30px; background: #000; transition: all 0.5s; transform: rotate(45deg);}
button .opinion_count:after {content: ""; position: absolute;  width: 2px; height: 15px; margin-top: 3px; margin-left: 20px;background: #000; transition: all 0.5s; transform: rotate(-45deg);}
button.btn_opinion_toggle.active .opinion_count:before {transform: rotate(-45deg);}
button.btn_opinion_toggle.active .opinion_count:after {transform: rotate(45deg);}

.opinion_write {position: relative; background: #fff; border: 1px solid #cfcfcf; padding: 12px 20px; height: 90px; box-sizing: border-box; margin-right: 20px;}
.opinion_write textarea {display: block; width: 100%; padding: 0; padding-right: 100px; border: 0; overflow: hidden; resize: none; box-sizing: border-box; line-height: 16px;}
.opinion_write span {font-size: 13px; color: #555;}
.opinion_write button {position: absolute; right: -1px; top: -1px; width: 90px; height: 90px; line-height: 90px; background: #ccc; transition: all 0.4s; font-weight: 500; font-size: 15px; padding: 0;}
.opinion_write button:hover {background: #555; color: #fff;}

.opinion_list {margin-top:35px; margin-right: 20px;}
.opinion_list li {border-bottom:1px dashed #d7d7d7;position:relative; padding-bottom:25px;margin-bottom:25px;}
.opinion_list li span {position:relative; margin-right:10px; padding-right:15px; color:#333;font-weight:400;}
.opinion_list li span:after {content:""; position:absolute; top:5px; right:0; width:1px; height:13px; background:#ccc;}
.opinion_list li time {color:#777;}
.opinion_list li p {margin-top:10px; width: 98%;}

.con_body aside {width: 350px; margin-left: 20px;}
.learn_menu {margin-bottom: 20px;}
.learn_menu li {width: 100%;  border:1px solid #ccc; border-top : none; text-align: center; padding: 10px; transition: all 0.4s;}
.learn_menu li:first-child {border-top:1px solid #ccc;}
.learn_menu li a {font: 500 16px 'Noto Sans KR'; display: block;}
.learn_menu li:hover, .learn_menu li.active {background: #555;}
.learn_menu li:hover a, .learn_menu li.active a {color:#fff}
.learn_menu li.active a:after {content: ""; position: absolute; margin: 6px 0 0 50px; display: inline-block; border-left: 8px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;}

.play_option {height: 25px;}
.play_option button {display: inline-block; width: 25px; height: 25px; border: 1px #ccc solid; background: url("/images/ico_move.png") no-repeat 0 0; font-size: 0;}
.onoff {float: right;}
.onoff span {margin-right: 10px;vertical-align: middle;}
.onoff a {display: inline-block; margin-left: -5px; font-size: 12px; color: #555; border: 1px #ccc solid;  width: 44px; height: 25px; line-height: 22px; text-align: center;}
.onoff a.active {background: #555; color: #fff;}

.play_list_con {position: relative; margin-bottom: 5px; margin-top: 20px;}
.play_paging {position: absolute; top: 0; right: 0;}
.play_paging li {float: left; margin: 0 6px;}
.play_paging li a {display: block; color: #555;}
.play_paging li.active a {color: #000; border-bottom: 1px #555 solid;}

.play_list {margin-top: 10px;}
.play_list li {position: relative; margin-bottom: 5px; font-size: 12px; border: 1px #ccc solid; display: flex;}
.play_list li.active {border: 1px #000 solid;}
.play_list li.stu_ing .thumb:after {content: "학습 중"; position: absolute; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); color: #fff; line-height: 79px; text-align: center; font-size: 14px;}
.play_list li.stu_end .thumb:after {content: "학습 완료"; position: absolute; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); color: #fff; line-height: 79px; text-align: center; font-size: 14px;}
.play_list .thumb {position: relative; margin: 10px;  display: block; width: 140px; height: 82px; background: #ccc;}
.play_list .thumb a {display: block; transition: all 0.5s ease-in-out;}
.play_list .thumb img {display: block; width: 100%; height: 100%;}
.play_list .thumb img:hover {transform: scale(1);}
.play_list .thumb .state_bar {height: 4px; background-color: #fe1b26;}
.play_list .info {position: relative; margin: 10px 25px 10px 10px; width: calc(100% - 180px);}
.play_list .info h4 {overflow: hidden; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; text-overflow: ellipsis;}
.play_list .info .data li {float: left; font: 500 12px 'Noto Sans KR'; border: none; display: block; margin-top: 25px;}
.play_list .info .data li p {color: #888;}
.play_list .info .data li span {margin-right: 5px;}
button.btn_del {position: absolute; top: 5px; right: 10px; background: transparent; width: 12px; height: 24px; text-indent: -9999px; opacity: .6; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; border: none;}
button.btn_del:hover {transform: scale(1.1);}
button.btn_del:before {content: ""; position: absolute; top: 50%; display: block; width: 14px; height: 2px; background:  #0674bb; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
button.btn_del:after {content: ""; position: absolute; top: 50%; display: block; width: 14px; height: 2px; background:  #0674bb; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
.rank_num {width: 30px; height: 30px; background: rgba(0,0,0,0.8); color: #fff; position: absolute; text-align: center; line-height: 30px; z-index: 5;}

/* 별점 */
.star_point {display: -moz-inline-box; display: inline-block; position: relative; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; margin-bottom: 16px;}
.star_point .star_base {background: url(/images/star.png) repeat-x; height: 22px; width: 120px; outline: none;}
.star_point .star_base .one {background: url(/images/star.png) repeat-x left bottom; height: 22px;}


/* 팝업 */
.popup {border: 1px solid #383c3f; background-color: #ffffff;}
.popup h1 {line-height: 1.6em; color: #FFF; font-size: 24px; padding: 0; padding: 40px; font-weight: 500; border-bottom: 1px #000 solid; background: #000;}
.pop_close {position: absolute; right: 40px; top: 45px; width: 34px; height: 30px; text-indent: -9999px; overflow: hidden;}
.pop_close:before {content: ""; position: absolute; height: 2px; width: 140%; background: #fff; top: 50%; left: -20%; margin-top: -1px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.pop_close:after {content: ""; position: absolute; height: 2px; width: 140%; background: #fff; top: 50%; left: -20%; margin-top: -1px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
.pop_body {padding: 40px;}
table {width: 100%; border-collapse: collapse; table-layout: fixed;}
table caption {height: 0; font-size: 0.1em; color: #fff; opacity: 0;}
table td {line-height: 24px;}

/* mobile */
@media screen and (max-width:900px) {
    /* menu 통합검색과 동일화 */    
    .category {padding: 0 !important;}
    .category {border-bottom: none;}    
    .category li a {display: inline-block; font-weight: bold; font-size: 15px; height: auto; padding: 15px 24px !important; box-sizing: border-box; text-align: center; border: none;}
    .category li a span {display: block; margin-top: 5px;}
    .category li.active a {background: #097fc4; color: #fff;}
    .lSAction > .lSNext {top: 28%;}
    
    .category .slide_nav {border-top: 1px #fff solid;}
    
    /* 퀵 사이드바 */
    .quick_right {transform:translateY(6vh); right: 5%;}
    .quick_right button {display:block; position:relative; width:30px; height:30px; border-radius:50%; border: none;}
    .quick_right button.btn_top {background: #000 url("/images/top.png") no-repeat center; background-size: 12px auto;}
    
    /* 메인 */
    .bg_control section:nth-child(2n+2) {background: #f5f5f5;}
    .location_area {width: 95%;}
    .location_area h3.tit {font: bold 24px '나눔스퀘어'; margin: 10px 0; color: #000;}
    
    section article.contents {widows: 95%; margin: 0 auto; padding: 0 0 20px;}    
    .area_mark {width: 100%; height: 40px; float: none; border: 1px #888 solid; margin-right: 0; text-align: center;}
    .area_mark h4 {font-size: 16px; font-weight: 500; margin: 10px;}
    .area_mark.gray_5 {background: #555;}
    .area_mark.gray_l {background: #555;}
    .area_mark.greenblue {background: #2F5F77;}
    .area_mark.glo {background: #594072;}
    .area_mark.human {background:#537F6A;}
    .area_mark.it {background:#333;}
    .area_mark.work {background:#523E30;}
    .area_mark.work2 {background:#432425;}
    .area_mark.heal {background:#326763;}
    .area_mark.share {background:#432425;}

    .con_list {width: 100%; padding: 2.5%}
    
        /* 1028 */
    .sch_input {float: none; margin-top: 0; width: 100%; background: #DFDFDF; text-align: center; padding: 10px 0;}
    .sch_input select {width: 95%; margin-bottom: 5px;}
    .sch_input input {width: 95%;  margin-bottom: 5px;}
    .sch_input button {width: 95%;  margin-bottom: 5px;}
    
    .sch_input .choice_first select {padding-left: 10px; border: 1px #ccc solid; height: 30px;}
    .sch_input .choice_first input {width: 170px; padding-left: 10px; font: 400 12px 'Noto Sans KR'; border: 1px #ccc solid; line-height: 28px;}
    .sch_input .choice_first button {font: 400 14px 'Noto Sans KR'; color: #fff;transition: all 0.4s;text-align: center; padding: 4px 20px; background: #012b56; border: 1px #012b56 solid;}
    .sch_input .choice_first button:focus,.sch_input button:hover {background: #757575; border: 1px #757575 solid;}

    .sch_input .choice_second {float: none; margin-top: 0px;}
    .sch_input .choice_second a{display:inline-block;  width: 24px; height: 24px; overflow: hidden; vertical-align:middle; border: 1px #ccc solid;}
    .sch_input .choice_second a.view_img {background: url("/images/icon_list.png") no-repeat 2px 3px;}
    .sch_input .choice_second a.view_img:hover, .choice_second a.view_img.active {background: url("/images/icon_list.png") no-repeat 2px -16px;}
    .sch_input .choice_second a.view_list {background: url("/images/icon_list.png") no-repeat -20px 3px;}
    .sch_input .choice_second a.view_list:hover, .choice_second a.view_list.active {background: url("/images/icon_list.png") no-repeat -20px -16px;}
    .sch_input .choice_second label{font-size:14px; vertical-align:baseline;margin-right:8px; margin-left:3px;}
    .sch_input .choice_second .pagingLabel {position: absolute; left: -200em;}
    .sch_input .choice_second input[type="radio"] {width: 7%; vertical-align:middle;}
    .sch_input .choice_second select{font-size:14px; width: 20%; padding-left: 10px; border: 1px #ccc solid; vertical-align:middle; height:30px; margin-left:8px;}
    /*
    .sch_input select {width: 95%; margin-bottom: 5px;}
    .sch_input input {width: 95%;  margin-bottom: 5px;}
    .sch_input button {width: 95%;  margin-bottom: 5px;}
	*/
    .choice_second {float: none; width: 100%; padding: 10px 0; background: #C8C8C8; text-align: center;}
    .choice_first {width: 100%;  margin: 0 auto; padding: 10px 0; background: #C8C8C8; text-align: center;}
    .choice_first select {width: 95%;}
    
    /* 리스트 - 갤러리 */
    article.img_list {padding: 15px 2.5%; margin: 0 auto; width: 100%; max-width: 1200px;}
    .img_list .thumb {max-width: 270px; max-height: 150px; width: 45%; overflow: hidden; border: 1px #dee3eb solid;}
    .img_list .thumb img {min-width: 158px; min-height: 95px;}
    .img_list .info {margin-left: 10px; width: calc(55% - 20px);}
    .img_list .info .con_cls {display: inline-block; padding: 2px 15px; font: 500 12px 'Noto Sans KR'; color: #fff; background: #0674bb; border-radius: 3px; float: left;}
    .img_list .info .con_cls.series {background: #053863;}
    .img_list .info .info_tit {width: 100%; font: bold 14px 'Noto Sans KR'; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient:vertical; text-overflow: ellipsis; margin: 0; margin-top: 10px;}
    .img_list .info .info_tit span:before {content: ''; position: absolute; transform: translate(-5px, 5px); width: 2px; height: 12px; background: #999;}

    .img_list .data {margin: 5px 0;}
    .img_list .data li {float: left; font: 500 12px 'Noto Sans KR'; margin-right: 30px;}
    .img_list .data li + li:before {content: ''; position: absolute; transform: translate(-15px, 2px); width: 2px; height: 9px; background: #999;}
    .img_list .data .heart img {width: 16px; margin-top: -2px;}
    .img_list .selec {position:relative; margin-top: 25px;}
    .img_list .selec button {font: 400 14px 'Noto Sans KR'; color: #898989;transition: all 0.4s;text-align: center; padding: 4px 10px 4px 34px; border: 1px #ccc solid;}
    .img_list .selec button.file {background: #fff url("/images/icon_folder.png") no-repeat 5px center;}
    .img_list .selec button.file:hover {background: #ccc url("/images/icon_folder.png") no-repeat 5px center;}
    .img_list .selec button.repeat {background: #fff url("/images/icon_repeat.png") no-repeat 5px center;}
    .img_list .selec button.repeat:hover {background: #ccc url("/images/icon_repeat.png") no-repeat 5px center;}
    
    /* 시리즈 */
    article.series_info {padding: 0 2.5% 20px;}
    article.choice_three {padding: 10px 2.5% 15px;}
    .three_first {margin-left: 0;}
    article.series_list {padding: 20px 2.5%;}
    
    .series_list .ch_area {width: auto;}
    .series_list .ch_area input[type="checkbox"] {margin: 0 5px; float: left;}
    .series_list.check {background: #bbb !important;}
    .series_list.check .item .thumb:after {content: "선택"; position: absolute; display: inline-block; width: 100%; height: 100%; color: #fff; text-align: center; font-size: 14px; left: 0; line-height: 77px; background: rgba(0,0,0,0.3); text-shadow: 0 0 3px #000;}
    .runtime {margin-top: -20px; margin-left: 4px;}
    .series_list .info {margin-left: 20px; width: 90%;}
    .series_list .info .info_tit {font: bold 14px 'Noto Sans KR'; -webkit-line-clamp: 2;}
    .series_list .data {height: auto; display: block; margin-top: 20px;}
    
    /* 뷰 */
    .location_area h3.view_tit {font: bold 18px '나눔스퀘어'; margin: 20px 0 0; color: #000; padding-bottom: 20px; border-bottom: 1px #555 solid;}
    
    .con_body {margin: 0 auto; width: 95%; max-width: 1200px; display: block; padding-top: 20px;}
    .con_body .site-contents {width: 100%; border-right: none;}
    #vdoBox {display:inline-block; width:100%; padding-right: 0; margin-bottom: -8px; padding-bottom: 8px;}
    #vdoBox .vdo-area-player {width: 100%; height:auto; margin: 0px 0px; padding: 0px 0px;}
    .vdo_area {display: block;}
    .vdo_menu {float: none; width: 100%; margin-bottom: 30px;}
    .vdo_menu button {float: left; width: 50%; font-size: 10px; height: 40px; border: 1px #ccc solid; margin-right: 0; margin-left: -1px; transition: all 0.4s;}
    .vdo_menu button:first-child {margin-left: 0;}
    .vdo_menu .star_point_check {margin-left: calc(75% - 82px);}
    
    .vdo_info {width: 100%; display:inline-block; margin-top:30px;}
    .vdo_info .data {height: 20px; float: left; margin-top: 4px;}
    .vdo_info .data li {margin-right: 10px;}
    .vdo_info .data li + li:before {content: ''; position: absolute; transform: translate(-15px, 2px); width: 0; height: 0; background: #999;}
    .vdo_info .star_point {float: left; margin-right: 10px;}
        
    button.btn_tag {width: 25px; height: 25px; border: none; background: transparent; margin-left: 10px;}
    button.btn_tag:before {content: ""; position: absolute; width: 2px; height: 15px; margin-top: -8px; margin-left: -6px; background: #000; transition: all 0.5s; transform: rotate(-45deg);}
    button.btn_tag:after {content: ""; position: absolute;  width: 2px; height: 15px; margin-top: -8px; margin-left: 3px;background: #000; transition: all 0.5s; transform: rotate(45deg);}
    button.btn_tag.active {display: inline-block;}
    button.btn_tag.active:before {transform: rotate(45deg);}
    button.btn_tag.active:after {transform: rotate(-45deg);}
    
    .vdo_menu .star_point_check:before {bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;border-bottom-color: #ccc; border-width: 11px; left: 50%; margin-left: -11px;}
    .vdo_menu .star_point_check:after {bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #fff; border-width: 10px; left: 50%; margin-left: -10px;}
    .vdo_menu .star_point_check .star_base {background: url(/images/star.png) repeat-x; height: 22px; width: 120px; outline: none;}
    .vdo_menu .star_point_check .star_base .one {background: url(/images/star.png) repeat-x left bottom; height: 22px;}

    .vdo_tag {margin-top: 10px; display: none;}
    .vdo_tag .textarea {font-size: 14px; width: 100%; line-height: 17px; font-family: 'Noto Sans KR'; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; text-overflow: ellipsis; margin: 0; margin-bottom: 10px;}
    .vdo_tag a {font-size: 12px; margin-right: 10px;}

/* 1001 */
    ul.view_tab {width: 100%; display:inline-block;}
    .view_tab li {width: 50%; border-bottom: 2px #ccc solid; float: left; text-align: center; padding: 10px 0;margin-bottom: 10px; background: #e5e5e5;}
    .view_tab li.active {color: #fff; background: #097fc4;}
    .view_tab li:first-child {border-top-left-radius: 5px;}
    .view_tab li:last-child {border-top-right-radius: 5px;}
    .tab_vdo_info {font-size: 14px; width: 100%; line-height: 17px; font-family: 'Noto Sans KR'; color: #000; margin: 0 0 10px ;}
    .tab_vdo_info .textarea {width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; text-overflow: ellipsis; margin-bottom: 10px;}
    .tab_vdo_info a {font-size: 12px; margin-right: 10px;}
    
    .con_body aside {width: 100%; margin: 20px auto 0;}
    
    .btn_h4:after {content: ""; display: block; position: absolute; margin-top: -50px; right: 20px; width: 10px; height: 10px; border-right: 2px #000 solid; border-bottom: 2px #000 solid; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
    
    h4.view_tit {font-size: 16px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 15px 0; margin-bottom: 20px;}

    .play_option button {display: inline-block; width: 25px; height: 25px; border: 1px #ccc solid; background: url("/images/ico_move.png") no-repeat 0 0; font-size: 0;}
    .onoff {float: right;}
    .onoff span {margin-right: 10px;vertical-align: middle;}
    .onoff a {display: inline-block; margin-left: -6px; font-size: 12px; color: #555; border: 1px #ccc solid;  width: 44px; height: 25px; line-height: 22px; text-align: center;}
    .onoff a.active {background: #555; color: #fff;}

    .play_list_con {font-size: 14px;}
    
    .play_list li {position: relative; width: calc(50% - 5px); margin-bottom: 5px; font-size: 12px; border: 1px #ccc solid; display: inline-block; vertical-align: top;}
    .play_list .thumb {width: calc(100% - 20px); height: 100%;}
    .play_list .thumb a {display: block; transition: all 0.5s ease-in-out;}
    .play_list .thumb img {display: block; width: 100%; height: 100%;}
    .play_list .thumb img:hover {transform: scale(1);}
    .play_list .thumb .state_bar {height: 4px; background-color: #fe1b26;}
    .play_list .info {position: relative; margin: 10px; width: 90%;}
    .play_list .info h4 { overflow: hidden; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; text-overflow: ellipsis;}
    .play_list .info .data li {float: left; font: 500 12px 'Noto Sans KR'; border: none; display: block; margin-top: 10px;}
    .play_list .info .data li p {color: #888;}
    .play_list .info .data li span {margin-right: 5px;}
    button.btn_del {top: auto; bottom: 0; z-index: 10;}
    
    .opinion h5 {margin-right: 0;}
    button.btn_opinion_toggle {border: none;}
    .opinion_write {margin-right: 0;}
    .opinion_write button {border: none;}
    .opinion_list {margin-top:35px; margin-right: 0;}
    
}