@charset "utf-8";
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
	     url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
		 url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
		 url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
		 url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
	     url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
		 url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
	     url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
		 url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
	     url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
		 url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 900;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
		 url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
		 url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); }

		 
/* 초기화 */
html {overflow-y:hidden}
body {margin:0;padding:0;font-size:0.95em;font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;background:#111}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd, li {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}



#pop{background: #111;display: flex;height: 100vh;}

/* 이미지 뷰어 */
#photo-view {display: none;}
#photo-view.on {display: block;}
#photo-view input[type="range"] {width: 200px;}
#photo-view .buttons {position: absolute;background: black;bottom: 250px;right: -40px;z-index: 9999;width: fit-content;height: fit-content;display: block;border: 1px solid;transform: rotate(270deg);padding: 0px 20px 5px;}
#photo-view .panzoom { height: 100%; }
#photo-view.drLine {text-align: center;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 9;background: #000;}

/* 비디오 뷰어 */
#video-view {display: none;}
#video-view.on {display: block;}
#video-view.drLine {text-align: center;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 9;background: #000;}
#video-view .frame {
  height: auto;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#video-view .frame #video {width: auto;height: 100%;max-width: 100%;}

/* 이미지박스 */
#pop .img_cont{width: 50%;display:flex;justify-content: center;align-items: center;margin: 0 auto}
#pop .img_cont .wrapper{max-width: 95%;position: relative;}
#pop .img_cont img{width: 100%;max-height: 800px}
#pop .img_cont .zoom_ico {color: white; width:30px;position: absolute;right: 15px;top: 15px;}

/* 텍스트박스 */
#pop .txt{display: block;position: relative;color:#fff;width:50%; overflow: scroll;overflow-x: hidden;max-height: 100vh}
#pop .txt .close{position: fixed; top: 43px; right: 61px;z-index: 999}
#pop .txt .close i{color: #fff;font-size: 35px}
#pop .txt .box {min-height: 400px;    position: relative;padding: 5px 5px 5px 5px;}
#pop .txt .icon li span{cursor: pointer;}
#pop .txt #audio-life {font-size: 0.7rem;display: none;width: 32px;line-height: 15px; position: relative;left: -2px;background: black}

/** 텍스트박스 상단 제목 **/
#pop .txt .title{border-bottom:3px solid #e5e5e5;padding-bottom:30px;}
#pop .txt .title h3.prize{font-size:28px;border-radius: 50px; border:1px solid #fff; width:150px;padding:0 35px;margin-bottom: 5px}
#pop .txt .title h1.main{font-size:50px;padding-bottom: 15px}
#pop .txt .title .size{font-size:20px; font-weight: 400}

/** 텍스트박스 작가정보 **/
#pop .txt .name{margin: 30px 0; padding-bottom:30px; display: flex;    align-items: flex-end; justify-content: space-between;border-bottom:1px solid #e5e5e5}
#pop .txt .name table{font-size: 18px}
#pop .txt .name table th{padding: 10px 20px 10px 0; text-align: left}
#pop .txt .name .icon li{width: 35px; height: 35px; line-height: 33px; border-radius: 100%; background: #fff;text-align: center; margin-right: 15px;float:left}
#pop .txt .name .icon li:last-child{margin: 0}
#pop .txt .name .icon i{color:#111;font-size:20px}

/** 텍스트박스 tab **/
#pop .txt .content ul.tabs{margin: 0px;padding: 0px;list-style: none;}
#pop .txt .content ul.tabs li{background: none;color: #fff;display: inline-block;padding: 10px 20px 10px;cursor: pointer;font-size: 22px;font-weight: 300;}
#pop .txt .content ul.tabs li.current{background: none;color: #fff;border-bottom:4px solid #fff;font-weight: 600}
#pop .txt .content .tab-content{display: none;background: none;padding:0px 0px;word-break: keep-all;line-height: 30px;min-height: 700px;}
#pop .txt .content .tab-content.current{display: inherit;}
#pop .txt .content .tab-content li{padding-bottom: 20px}
#pop .txt .content .tab-content li h3{font-size: 18px; padding-bottom: 15px}
#pop .txt .content .tab-content li h3 i{padding-right: 10px}


#pop .txt::-webkit-scrollbar {
    width: 15px;
  }
#pop .txt::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 50px
  }
#pop .txt::-webkit-scrollbar-track {
    background-color: #eee;
  }

@media (max-width: 1400px) {
    #pop .txt .close{right: 66px;}
    #pop .txt .box{padding: 90px 50px 50px 0px;}
    #pop .txt .title h3.prize{font-size:23px; width:130px;padding:0 30px;}
    #pop .txt .title h1.main{font-size:40px;}
    #pop .txt .title .size{font-size:18px;}
    #pop .txt .name{margin: 15px 0; padding-bottom:10px}
    #pop .txt .name .icon li{width: 30px; height: 30px; line-height: 28px;margin-right: 10px;}
    #pop .txt .name .icon img{width:30px}
    #pop .txt .content ul.tabs li{font-size: 20px;} 
    
}


@media (max-width: 1199px) {
  #pop{flex-direction: column; align-items: center;overflow-y: scroll;overflow-x: hidden}
  #pop .img_cont{margin:50px auto;}
  #pop .txt{width:100%;overflow: visible;height: 100%}
  #pop .txt .box{padding:50px}
  #pop .txt .close{right: 20px;top: 7px;}
  #pop::-webkit-scrollbar { width: 10px; }
  #pop::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 50px }
  #pop::-webkit-scrollbar-track {background-color:#eee; }

  #photo-view input[type="range"] {width: 250px;}
  #photo-view .buttons {position: absolute;bottom: 200px;right: -100px;}
  #photo-view .panzoom { height: 100%; }


}


@media (max-width: 879px) {
    #pop .img_cont{width: 90%}
    #pop .txt .title h3.prize{font-size:20px; width:118px;}
    #pop .txt .title h1.main{font-size:35px;}
    #pop .txt .title .size{font-size:16px;}
    #pop .txt .name table{font-size: 17px}
    #pop .txt .name table th{padding: 5px 15px 5px 0; }
    #pop .txt .name{margin: 15px 0; padding-bottom:15px}
    #pop .txt .content ul.tabs li{font-size: 18px;} 
    
}

@media (max-width: 630px) {
    #pop .img_cont{width: 95%}
    .icon.fixed {position: fixed;top: 0px;padding: 15px 20px 16px;z-index: 1;/* margin-top: 10px; */left: 50px;height: 56px;left: 0;line-height: 56px;background: black;width: calc(100% - 10px);border-bottom: 1px solid;}
    #tabs.fixed {height: 48px;padding: 10px 10px; position: fixed;top: 56px;background: black;width:calc(100% - 10px);left: 0;height: 47px;}
    #pop .txt .close{right: 20px;top: 10px;}
}

@media (max-width: 499px) {
    #pop .txt .box{padding:30px}
    #pop .txt .title h3.prize{font-size:18px; width:112px;}
    #pop .txt .title h1.main{font-size:30px;}
    #pop .txt .title .size{font-size:16px;}
    #pop .txt .name table{font-size: 16px}
    #pop .txt .name table th{padding: 5px 15px 5px 0; }
    #pop .txt .content ul.tabs li{font-size: 17px;}  
    #pop .txt .content .tab-content{padding:0px;}
    #pop .txt .content .tab-content li h3{font-size: 16px; }
}

@media (max-width: 399px) {
    #pop .txt .box{padding:0 2px 2px}
    #pop .txt .title{padding-bottom: 15px}
    #pop .txt .title h3.prize{font-size:16px; width:107px;}
    #pop .txt .title h1.main{font-size:25px;}
    #pop .txt .title .size{font-size:14px;}
    #pop .txt .name table{font-size: 15px}
    #pop .txt .name table th{padding: 3px 10px 3px 0; }
    #pop .txt .content ul.tabs li{font-size: 16px;padding: 0px 2px 2px;}  
    #pop .txt .content .tab-content{padding:2px 2px; font-size: 12px}
    #pop .txt .content .tab-content li h3{font-size: 15px; }
    #pop .txt .name .icon li{width: 25px; height: 25px; line-height: 23px;margin-right: 6px;}
    #pop .txt .name .icon i{font-size:16px;color:#111}
    #tabs.fixed {padding: 10px 10px !important; }
}