/**********************************************
note : design custom style page
**********************************************/



/**********************************************
note : SSM(Report) - tech
name : 김지수
date : 2024-04-08
**********************************************/

/****************** list ******************/
/* titles */
#tech-list .user-page-titles {display:block;width:100%;text-align:center}
#tech-list .user-page-titles > strong {display:block;margin-bottom:.625rem;font-size:3.125rem;line-height:1;}
#tech-list .user-page-titles > .user-page-summary {margin:0;padding:0;font-size:1.125rem;border:none}

/* content */
#tech-list .tech-list {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:2.5rem -.938rem}
#tech-list .tech-list .list-item {-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%;padding:0 .938rem}
#tech-list .tech-list .list-item:not(:nth-child(-n + 5)) {margin-top:1.875rem}
#tech-list .tech-list .list-item > a {position:relative}
#tech-list .tech-list .list-item .t-img {position:relative;width:100%;min-height:300px}
#tech-list .tech-list .list-item .t-img::before {content:'';position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.35)}
#tech-list .tech-list .list-item .t-img > img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
#tech-list .tech-list .list-item .t-cont {position:absolute;z-index:2;top:0;left:0;width:100%;padding:3.125rem 1.25rem 1.25rem}
#tech-list .tech-list .list-item .t-cont .t-title {font-size:1.25rem;color:#fff}

@media screen and (max-width: 63.9375em) {
	#tech-list .tech-list .list-item {-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}
	#tech-list .tech-list .list-item:not(:nth-child(-n + 3)) {margin-top:1.875rem}
}
@media screen and (max-width: 39.9375em) {
	#tech-list .tech-list {margin-left:-.625rem;margin-right:-.625rem}
	#tech-list .tech-list .list-item {-ms-flex:1 0 50%;flex:0 0 50%;max-width:50%;padding:0 .625rem}
	#tech-list .tech-list .list-item:not(:nth-child(-n + 2)) {margin-top:1.875rem}
	#tech-list .tech-list .list-item .t-img {min-height:250px}
}

/****************** view ******************/
/* titles */
#tech-view .tech-view-titles {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-align-items:baseline;align-items:baseline;width:100%;margin-bottom:2.5rem}
#tech-view .tech-view-titles > strong {font-size:3.125rem;line-height:1;}
#tech-view .tech-view-titles > span {margin-left:.625rem;font-size:1rem;color:rgba(0,0,0,.65)}

/* container */
#tech-view .tech-view-container {padding:2.5rem;border:1px solid rgba(0,0,0,.12)}

/* header */
#tech-view .tech-view-header {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-align-items:flex-start;align-items:flex-start;margin-bottom:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(0,0,0,.12)}
#tech-view .tech-view-header .header-group {flex-basis:0;flex-grow:1;max-width:100%;min-width:0}
#tech-view .tech-view-header .header-group .tech-view-intro {display:block;margin-bottom:.938rem;font-size:.938rem;color:rgba(0,0,0,.75)}
#tech-view .tech-view-header .header-group .heading {display:block;margin-bottom:1.25rem;font-size:2.125rem;line-height:1.25;letter-spacing:-.075em}
#tech-view .tech-view-header .header-group .infomation {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-align-items:center;align-items:center;margin:0}
#tech-view .tech-view-header .header-group .infomation > li {font-size:.813rem;color:rgba(0,0,0,.65)}
#tech-view .tech-view-header .header-group .infomation > li:not(:first-child) {margin-left:.625rem}

/* sns */
#tech-view .tech-view-header .tech-sns {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-align-items:center;align-items:center}
#tech-view .tech-view-header .tech-sns > a {display:inline-block;width:34px;height:34px;font-size:1.125rem;line-height:34px;border:1px solid rgba(0,0,0,.12);text-align:center;transition:all .3s ease-in-out}
#tech-view .tech-view-header .tech-sns > a:not(:first-child) {margin-left:4px}
#tech-view .tech-view-header .tech-sns > a:hover {color:#fff;background-color:#333}
#tech-view .tech-view-header .tech-sns > a.sns-facebook:hover {background-color:#425EA2}
#tech-view .tech-view-header .tech-sns > a.sns-twitter:hover {background-color:#0F141A}
#tech-view .tech-view-header .tech-sns > a.sns-kakao:hover {color:#442E2A;background-color:#FAE208}

/* content */
#tech-view .tech-view-content .tech-view-body.view-page {font-size:.938rem;color:rgba(0,0,0,.65);line-height:1.5;text-align:center}

/* footer */
#tech-view .tech-view-footer {margin-top:2.5rem}
#tech-view .tech-view-footer .button-group {margin:0}



/**********************************************
note : 읽뉴 (읽어주는 뉴스 - 오디오 기능)
name : 김지수
date : 2024-04-09
**********************************************/

/* 기사뷰페이지 플레이버튼  */
.view-control-wrap {margin:.938rem 0 2.5rem 0;text-align:center}
.view-control-wrap .control-inner {display:inline-block;width:auto;padding:8px 30px;border:1px solid #000;border-radius:30px}
.view-control-box {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:auto;}
.view-control-box .audio-link {display:none;width:24px;height:24px;margin:0 !important;font-size:1rem;color:#fff;line-height:24px;background-color:#000;border-radius:50%;text-align:center;cursor:pointer}
.view-control-box .audio-link.view-control-play {display:block}
.view-control-box .audio-link.view-control-stop {background-color:#2096fb}
.view-control-box .view-play-time {margin-left:.625rem;font-size:.875rem;color:rgba(0,0,0,.65)}

/* audio player */
#audio-player {display:none;position:fixed;z-index:1005;left:50%;bottom:1.25rem;width:100%;transform:translateX(-50%)}
#audio-player.on {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-align-items:center;align-items:center}
#audio-player .audio-close {-ms-flex:0 0 40px;flex:0 0 40px;width:40px;height:40px;margin-left:1.25rem;font-size:1.25rem;color:rgba(0,0,0,.5);background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:50%;cursor:pointer;transition:all .3s ease-in-out}
#audio-player .audio-close:hover {background-color:rgba(0,0,0,.08)}
#audio-player .ndPcast {-ms-flex-preffered-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%;min-width:0}

/**********************************************
note : 과거 스타일 소스 (어디에 쓰이는지 모르겠음..)
**********************************************/

/* 신경훈 / 978073 / 20200908 */
.negative-player-wrap{width:100%; min-width:320px; position:fixed; left:0; bottom:0; color:#fff; background:#222; z-index:9999}
.negative-player-wrap .player-controller{position:relative; margin:0 auto .5rem; padding:0 3rem 0 1rem}

/* 진행슬라이더 */
.player-progress-slider{margin-top:1.5rem; margin-bottom:1rem; height:.2rem; background:#fff; border-radius:1rem}
.player-progress-slider .player-slider-fill{height:.2rem; background:#2096fb; border-radius:1rem}
.player-progress-slider .player-handle{width:.7rem; height:.7rem; background:#2096fb; border-radius:100%}
.player-progress-slider .player-handle:hover{background:#047add}

/* 플레이버튼 */
.player-control-box{margin:auto; width:140px; overflow:hidden}
.player-control-box .pcb-div{float:left; display:block; width:40px; height:40px; cursor:pointer}
.player-control-box .player-control-play,
.player-control-box .player-control-stop{margin:0 10px; padding:5px}
.player-control-box .player-control-play .playing,
.player-control-box .player-control-stop .stop{position:relative; width:100%; height:100%;  border-radius:100%; transition:all .3s ease}
.player-control-box .player-control-play .playing{background:rgba(255,255,255,.3)}
.player-control-box .player-control-stop .stop{background:#2096fb}
.player-control-box .player-control-play .playing::after{content:''; position:absolute; top:.49rem; left:.7rem; width:0;height:0; border-width:.4rem .4rem .4rem .6rem; border-color:transparent transparent transparent rgba(255,255,255,1); border-style:solid}
.player-control-box .player-control-stop .stop::before,
.player-control-box .player-control-stop .stop::after{content:''; position:absolute; top:.49rem; width:2px;height:14px; background:rgb(255,255,255,1)}
.player-control-box .player-control-stop .stop::before{left:.7rem}
.player-control-box .player-control-stop .stop::after{left:1rem}

.player-control-box .player-control-sec{padding:10px}
.player-control-box .player-control-sec .circle{position:relative; width:100%; height:100%; border:1px solid rgba(255,255,255,.5); background:transparent; border-radius:100%}
.player-control-box .player-control-sec .circle::before{content:''; position:absolute; width:12px; height:12px; background:#222}
.player-control-box .player-control-sec .circle::after{content:''; position:absolute; border-style:solid}
.player-control-box .player-control-sec .circle .sec{display:block; position:absolute; top:.2rem; left:.17rem; font-size:.5rem; color:rgba(255,255,255,.5); letter-spacing:-.1rem}
.player-control-box .player-control-sec.sec-prev .circle::before{top:-2px; left:-2px}
.player-control-box .player-control-sec.sec-prev .circle::after{top:-5px; left:-3px; border-width:.3rem .5rem .3rem .3rem; border-color:transparent rgba(255,255,255,.5) transparent transparent}
.player-control-box .player-control-sec.sec-next .circle::before{top:-2px; right:-2px}
.player-control-box .player-control-sec.sec-next .circle::after{top:-5px; right:-3px; border-width:.3rem .3rem .3rem .5rem; border-color:transparent  transparent transparent rgba(255,255,255,.5)}

/* 오버컬러 */
.player-control-box .player-control-play:hover .playing,
.player-control-box .player-control-stop:hover .stop{background:#fff; transition:all .3s ease}
.player-control-box .player-control-play:hover .playing::after{border-color:transparent transparent transparent rgba(0,0,0,.7)}
.player-control-box .player-control-stop:hover .stop::before,
.player-control-box .player-control-stop:hover .stop::after{background:rgba(0,0,0,.7)}
.player-control-box .player-control-sec:hover .circle{border-color:#fff}
.player-control-box .player-control-sec:hover .circle .sec{color:#fff}
.player-control-box .player-control-sec.sec-prev:hover .circle::after{border-color:transparent rgba(255,255,255,1) transparent transparent}
.player-control-box .player-control-sec.sec-next:hover .circle::after{border-color:transparent  transparent transparent rgba(255,255,255,1)}

/* 시간 */
.player-time{position:absolute; right:3rem; bottom:.45rem}
.player-time span{font-size:.75rem; color:rgba(255,255,255,.5)}
.player-time span.start-time{color:rgba(255,255,255,.8)}
.player-time span.bar{font-family:'Gothic'}

/* 닫기 */
.player-close{position:absolute; right:.5rem; bottom:.55rem; width:20px; height:20px; cursor:pointer}
.player-close::before,
.player-close::after{content:''; position:absolute; top:0; left:50%; width:1px; height:100%; background:rgba(255,255,255,.4)}
.player-close::before{transform:rotate(45deg)}
.player-close::after{transform:rotate(-45deg)}


@media screen and (max-width: 63.9375em) {
	.article-list .article-list-content.player-mode{display:table}
}

@media screen and (max-width: 39.9375em) {
	.player-time{right:2.5rem}
}