@charset "utf-8";
/*============================================================================================================
    공통
============================================================================================================*/
.sub {padding:0 0; background:url('/common/img/sub/subBg.jpg')no-repeat center/cover;}
.sub .inner {background:url('/common/img/sub/subpageBg.jpg'); background-repeat:repeat; background-size:100%; background-position:top;}
.title_inner {position:relative; max-width:1440px; width:100%; margin:0 auto; padding:0 20px; background:url('/common/img/sub/subpageBg_top.png'); background-repeat:no-repeat; background-size:100%; background-position:top;}
.title_inner:after {display:block; clear:both; content:'';}
.sub .end_inner {position:relative; max-width:1440px; width:100%; height:168px; margin:0 auto; padding:0 20px; background:url('/common/img/sub/subpageBg_bottom.png'); background-repeat:no-repeat; background-size:100%; background-position:top;}
.sub .end_inner:after {display:block; clear:both; content:'';}
.visual {padding:235px 0 85px; text-align:center;}
.title .pageTit {padding:115px 100px 0; font-size:40px; font-weight:600; font-family:'GongGothicLight', sans-serif; color:#1b1b1c;}

@media all and (max-width:1440px){
    .sub .inner {width:calc(100% - 40px); margin:0 20px; padding:0 20px;}
    .title_inner {width:calc(100% - 40px); margin:0 20px; background-size:cover;}
    .title_inner:after {display:block; clear:both; content:'';}
    .sub .end_inner {width:calc(100% - 40px); margin:0 20px; }
}

@media all and (max-width:1024px){
    .visual {padding:180px 0 70px;}
    .title .pageTit {padding:100px 40px 0; font-size:36px;}
	.sub_con {padding:50px 40px 120px;}
}

@media all and (max-width:768px){
    .visual {padding:calc(90px + 10vw) 0 10vw;}
    .visual .imgBox img {width:70vw; max-width:396px;}
    .title .pageTit {padding:8vw 0 0; font-size:6vw;}
	.sub .end_inner {height:16vw;}
}



.sub_con {padding:70px 100px 170px;}
.sub_con .subTitle {font-family:'ChosunGs'; color:#000; text-align:center;}
.sub_con .subTitle h2 {position:relative; font-size:35px; padding:0 0 15px;}
.sub_con .subTitle h2:after {position:absolute; display:inline-block; content:''; height:5px; bottom:0; left:50%;}
.sub_con .subTitle h2.line1:after {background:url('/common/img/sub/title_line01.png') no-repeat; width:285px; margin:0 0 0 -142.5px;}
.sub_con .subTitle h2.line2:after {background:url('/common/img/sub/title_line02.png') no-repeat; width:323px; margin:0 0 0 -161.5px;}
.sub_con .subTitle h2.line3:after {background:url('/common/img/sub/title_line03.png') no-repeat center/100% 100%; left:0; width:100%; margin:0;}
.sub_con .subTitle h2 span {font-size:28px;}

.sub_con .subTitle2 {position:relative; font-size:22px; color:#1b1b1c; font-family:'GongGothicLight'; padding:0 0 0 26px; margin:0 0 15px;}
.sub_con .subTitle2:after {position:absolute; display:inline-block; content:''; background:url('/production/img/line_bullet.jpg') no-repeat; width:16px; height:3px; top:50%; left:0; margin:-1.5px 0 0;}

@media all and (max-width:1024px){
	.sub_con {padding:50px 40px 120px;}
    .sub_con .subTitle h2 {position:relative; font-size:28px; padding:0 0 15px;}
    .sub_con .subTitle h2 span {font-size:22px;}
}

@media all and (max-width:768px){
	.sub_con {padding:5vw 0 10vw;}
    .sub_con .subTitle h2 {position:relative; font-size:5.4vw; padding:0 0 2vw;}
    .sub_con .subTitle h2 span {font-size:4vw;}
    .sub_con .subTitle h2.line1:after {background:url('/common/img/sub/title_line01.png') no-repeat center/100% auto; width:50%; margin:0; transform:translateX(-50%);}
    .sub_con .subTitle h2.line2:after {background:url('/common/img/sub/title_line02.png') no-repeat center/100% auto; width:50%; margin:0; transform:translateX(-50%);}

    .sub_con .subTitle2 {font-size:3.6vw; padding:0 0 0 4vw; margin:0 0 3vw;}
    .sub_con .subTitle2:after {width:3vw; height:0.6vw; top:0; left:0; margin:1.75vw 0 0;}
}





/*============================================================================================================
    작품소개
============================================================================================================*/
/* 시놉시스 */
.synopsis .imgBox {display:inline-block; vertical-align:middle; box-shadow:rgba(0, 0, 0, 0.3) 8px 8px 6px;}
.synopsis .txtBox {display:inline-block; vertical-align:middle; font-size:17px; color:#333; line-height:2;}
.synopsis .txtBox span {font-size:20px; font-weight:bold; color:#000;}

.synopsis .leftBox, .synopsis .rightBox {margin:0 0 80px;}
.synopsis .leftBox .txtBox {margin:0 3.7% 0 0;}
.synopsis .rightBox .txtBox {margin:0 0 0 5%;}

@media all and (max-width:1440px){
    .synopsis .leftBox:after, .synopsis .rightBox:after {content:''; display:block; clear:both;}
    .synopsis .imgBox {float:left; width:50%;}
    .synopsis .txtBox {float:left; width:45%;}
    .synopsis .leftBox .txtBox {margin:0 5% 0 0;}
    .synopsis .rightBox .txtBox {margin:0 0 0 5%;}
    .synopsis .imgBox img {width:100%; height:auto;}
    .synopsis .txtBox br {display:none;}
    
}

@media all and (max-width:1024px){
    .synopsis .txtBox {font-size:16px; line-height:1.8;}
    .synopsis .txtBox span {font-size:18px;}
    .synopsis .leftBox, .synopsis .rightBox {margin:0 0 50px; text-align:center;}

    .synopsis .leftBox:after, .synopsis .rightBox:after {content:''; display:block; clear:both;}
    .synopsis .imgBox {float:none; width:100%;}
    .synopsis .txtBox {float:none; width:100%; text-align:left;}
    .synopsis .leftBox .txtBox {margin:0;}
    .synopsis .rightBox .txtBox {margin:0;}
    .synopsis .leftBox .imgBox {margin:40px 0 0;}
    .synopsis .rightBox .imgBox {margin:0 0 40px;}
    .synopsis .txtBox br {display:none;}
}

@media all and (max-width:768px){
    .synopsis .txtBox {font-size:3vw;}
    .synopsis .txtBox span {font-size:3.4vw;}
    .synopsis .leftBox, .synopsis .rightBox {margin:0 0 8vw; text-align:center;}
    .synopsis .imgBox {box-shadow:rgba(0, 0, 0, 0.3) 1vw 1vw 0.6vw;}
    .synopsis .leftBox .imgBox {margin:0 0 4vw;}
    .synopsis .rightBox .imgBox {margin:0 0 4vw;}

}



/* 세계관 */
.worldview .worldview_bg {background:url('/work/img/worldview_bg.png') center bottom no-repeat;}
.worldview .inner {padding:0;}
.worldview .sub_con {padding:70px 120px 0;}
.worldview .leftBox {position:relative; padding:15px 0 150px;}
.worldview .leftBox .imgBox {position:absolute; top:-30px; right:-240px;}
.worldview .rightBox {position:relative; padding:15px 0 150px 48%;}
.worldview .rightBox .imgBox {position:absolute; top:-80px; left:-340px;}
.worldview ul li {font-size:22px; color:#000; font-family:'ChosunGs'; line-height:1.5; margin:0 0 30px;}
.worldview ul li:last-child {margin:0;}

@media all and (max-width:1300px){
	.worldview .sub_con {padding:70px 100px 0;}
    .worldview .leftBox .imgBox {position:absolute; top:54px; right:-270px;}
    .worldview .leftBox .imgBox img {float:right; width:75%;}
    .worldview .rightBox .imgBox {position:absolute; top:auto; bottom:150px; left:-380px;}
    .worldview .rightBox .imgBox img {float:left; width:90%;}
}

@media all and (max-width:1024px){
	.worldview .sub_con {padding:50px 60px 0;}
    .worldview .leftBox {position:relative; padding:15px 0 100px;}
    .worldview .leftBox .imgBox {position:absolute; display:inline-block; top:auto; right:-21vw; bottom:100px;}
    .worldview .leftBox .imgBox img {float:none; width:50vw;}

    .worldview .rightBox {position:relative; padding:15px 0 100px 40%;}
    .worldview .rightBox .imgBox {position:absolute; display:inline-block; left:-39vw; bottom:60px;}
    .worldview .rightBox .imgBox img {float:none; width:65vw;}
    .worldview ul li {font-size:18px; margin:0 0 20px;}
}

@media all and (max-width:768px){
    .worldview .worldview_bg {background:url('/work/img/worldview_bg.png') bottom no-repeat; background-size:100% auto;}
	.worldview .sub_con {padding:5vw 20px 0;}
    .worldview .leftBox {margin:0 0 8vw; padding:0;}
    .worldview .leftBox .imgBox {position:static; transform:translateX(38%); margin:3vw 0 0;}
    .worldview .leftBox .imgBox img {width:80%;}

    .worldview .rightBox {padding:0;}
    .worldview .rightBox .imgBox {position:static; transform:translateX(-25%); margin:3vw 0 0;}
    .worldview .rightBox .imgBox img {width:80%;}
    .worldview ul li {font-size:3.6vw; margin:0 0 3vw;}
}



/* 등장인물 및 관계도 */
.relationship .subTitle {margin:0 0 60px;}

.diagram {margin:0 0 130px;}

.characters .tabBtn {text-align:center; margin:0 0 40px;}
.characters .tabBtn li {display:inline-block; margin:0 80px 0 0;}
.characters .tabBtn li:last-child {margin:0;}
.characters .tabBtn li a {font-size:24px; color:#1b1b1c; font-family:'GongGothicMedium'; cursor:pointer;}
.characters .tabBtn li a.on {position:relative; color:#032f95;}
.characters .tabBtn li a.on:after {position:absolute; display:inline-block; content:''; background:url('/work/img/tab_bullet.png') no-repeat; width:5px; height:5px; top:-10px; left:50%; margin:0 0 0 -2.5px;}

.characters .tabBox {display:none;}
.characters .tabBox.on {display:block;}
.characters .tabBox .introduce {color:#fff; text-align:center; margin:0 0 50px; padding:107px 20px 97px;}
.characters .tabBox .introduce h2 {font-size:34px; font-family:'GongGothicLight'; margin:0 0 30px;} 
.characters .tabBox .introduce p {font-size:16px; line-height:2;}
.characters #tabBox1 .introduce {background:url('/work/img/darmor_bg.jpg') center no-repeat;}
.characters #tabBox2 .introduce {background:url('/work/img/outside_bg.jpg') center no-repeat;}
.characters #tabBox3 .introduce {background:url('/work/img/hostility_bg.jpg') center no-repeat;}

.characters .tabBox .charBox .subTitle2 {margin:0 0 30px;}
.characters .tabBox .charBox ul:after {display:block; content:''; clear:both;}
.characters .tabBox .charBox ul li {float:left; width:32.66%; margin:0 1% 2% 0;}
.characters .tabBox .charBox ul li:nth-child(3n) {margin:0 0 2%;}
.characters .tabBox .charBox ul li .imgBox {width:100%; height:500px; background:rgba(0,0,0,0.05); display:table; position:relative;}
.characters .tabBox .charBox ul li .imgBox .imgBg {display:table-cell; vertical-align:bottom; text-align:center;}
.characters .tabBox .charBox ul li .imgBox .charInfo {display:none; position:absolute; top:0; left:0; color:#fff; background:rgba(3,47,149,0.9); width:100%; height:100%; padding:30px 25px; overflow-x:scroll;}
.characters .tabBox .charBox ul li:hover .imgBox .charInfo {display:block;}
.characters .tabBox .charBox ul li .imgBox .charInfo h2 {font-size:18px; line-height:1.6; font-family:'GongGothicLight'; margin:0 0 8px;}
.characters .tabBox .charBox ul li .imgBox .charInfo p {font-size:16px; line-height:1.8;}
.characters .tabBox .charBox ul li .name {font-size:20px; font-family:'ChosunGs'; color:#000; text-align:center; padding:20px 0;}
.characters .tabBox .charBox ul li .name span {font-size:18px;}

@media all and (max-width:1440px){
    .characters .tabBox .charBox ul li .imgBox {max-height:480px; height:auto; min-height:300px; padding:20px 0 0;}
}

@media all and (max-width:1024px){
    .relationship .subTitle {margin:0 0 50px;}

    .diagram {margin:0 0 130px;}

    .characters .tabBtn {text-align:center; margin:0 0 40px;}
    .characters .tabBtn li {display:inline-block; margin:0 60px 0 0;}
    .characters .tabBtn li a {font-size:20px;}
    .characters .tabBtn li a.on {position:relative; color:#032f95;}

    .characters .tabBox .introduce {margin:0 0 50px; padding:97px 20px 87px;}
    .characters .tabBox .introduce h2 {font-size:28px; margin:0 0 30px;} 
    .characters .tabBox .introduce p {font-size:16px; line-height:1.8;}

    .characters .tabBox .charBox ul li {float:left; width:49%; margin:0 2% 2% 0; cursor:pointer;}
    .characters .tabBox .charBox ul li:nth-child(3n) {margin:0 2% 2% 0;}
    .characters .tabBox .charBox ul li:nth-child(2n) {margin:0 0 2% 0;}
    .characters .tabBox .charBox ul li .imgBox .charInfo {display:none; position:absolute; top:0; left:0; color:#fff; background:rgba(3,47,149,0.9); width:100%; height:100%; padding:30px 25px; overflow-x:scroll;}
    /* 클릭시 */
    .characters .tabBox .charBox ul li:visited .imgBox .charInfo {display:block;}
}

@media all and (max-width:768px){
    .relationship .subTitle {margin:0 0 4vw;}
    .relationship .characters .subTitle {margin:0 0 6vw;}

    .diagram {margin:0 0 6vw;}

    .characters .tabBtn {text-align:center; margin:0 0 6vw;}
    .characters .tabBtn li {display:inline-block; margin:0 4vw 0 0;}
    .characters .tabBtn li a {font-size:3.5vw;}
    .characters .tabBtn li a.on:after {width:1vw; height:1vw; top:-1.6vw; left:50%; margin:0 0 0 -0.5vw;}
    

    .characters .tabBox .introduce {margin:0 0 6vw; padding:10vw 8vw 8vw;}
    .characters .tabBox .introduce h2 {font-size:4.6vw; margin:0 0 5vw;} 
    .characters .tabBox .introduce p {font-size:3vw; line-height:1.8;}

    .characters .tabBox .charBox .subTitle2 {margin:0 0 3vw;}
    .characters .tabBox .charBox ul li {float:left; width:100%; margin:0;}
    .characters .tabBox .charBox ul li:nth-child(3n) {margin:0;}
    .characters .tabBox .charBox ul li:nth-child(2n) {margin:0;}
    .characters .tabBox .charBox ul li .imgBox {min-height:auto; padding:4vw 0 0;}

    .characters .tabBox .charBox ul li .imgBox .imgBg img {max-width:80%;}
    .characters .tabBox .charBox ul li .imgBox .charInfo {height:100%; padding:5vw 4vw;}
    .characters .tabBox .charBox ul li .imgBox .charInfo h2 {font-size:3.4vw; line-height:1.6; margin:0 0 1.6vw;}
    .characters .tabBox .charBox ul li .imgBox .charInfo p {font-size:3.2vw; line-height:1.8;}
    .characters .tabBox .charBox ul li .name {font-size:4vw; padding:2vw 0 4vw;}
    .characters .tabBox .charBox ul li .name span {font-size:3.4vw;}
    
}



/* 등장 캐릭터 소개 */
.introduce {color:#fff; text-align:center; padding:107px 20px 97px; background:url('/work/img/character_bg.jpg') center no-repeat; margin:0 0 80px;}
.introduce h2 {font-size:34px; font-family:'GongGothicLight'; margin:0 0 30px;} 
.introduce p {font-size:16px; line-height:2;}

.charList {margin:0 0 80px;}
.charList:last-child {margin:0;}
.charList .imgBox {background:rgba(0,0,0,0.05); text-align:center; display:table;}
.charList .imgBox div {display:table-cell;}
.charList .people {margin:0 0 55px;}
.charList .people:after {display:block; content:''; clear:both;}
.charList .people .imgBox {float:left; width:35%; height:458px; margin:0 5% 0 0;}
.charList .people .imgBox div {vertical-align:bottom;}
.charList .people .txtBox {float:left; width:60%; color:#000; padding:20px 0 0;}
.charList .people .txtBox h2 {width:323px;}
.charList .people .txtBox p {font-size:20px; font-family:'GongGothicMedium'; margin:50px 0 40px;}
.charList .people .txtBox ul li {font-size:16px; line-height:1.8; margin:0 0 30px;}
.charList .people .txtBox ul li:last-child {margin:0;}
.charList .dinosaur h2 {font-size:24px; font-family:'ChosunGs';}
.charList .dinosaur h2.red {color:#970e24;}
.charList .dinosaur h2.blue {color:#032f95;}
.charList .dinosaur h2.purple {color:#552a7e;}
.charList .dinosaur h2.yellow {color:#dd9c0b;}
.charList .dinosaur ul {margin:30px 0 0;}
.charList .dinosaur ul:after {display:block; content:''; clear:both;}
.charList .dinosaur ul li {float:left; width:32.66%; margin:0 1% 0 0;}
.charList .dinosaur ul li:last-child {margin:0;}
.charList .dinosaur ul li .imgBox {width:100%; height:313px;}
.charList .dinosaur ul li .imgBox div {vertical-align:middle;}
.charList .dinosaur ul li p {font-size:18px; font-family:'GongGothicLight'; color:#000; text-align:center; padding:20px 0;}
.charList .dinosaur ul li p span {font-family:'GongGothicMedium';}

@media all and (max-width:1024px){
    .introduce {padding:97px 20px 87px; margin:0 0 50px;}
    .introduce h2 {font-size:28px; margin:0 0 30px;} 
    .introduce p {font-size:16px; line-height:1.8;}

    .charList {margin:0 0 50px;}
    .charList .people {margin:0 0 50px;}
    .charList .people .imgBox {height:auto; padding:20px 0 0;}
    .charList .people .txtBox {float:left; width:60%; color:#000; padding:20px 0 0;}
    .charList .people .txtBox h2 {width:323px;}
    .charList .people .txtBox p {font-size:20px; margin:40px 0 35px;}
    .charList .people .txtBox ul li {font-size:16px; margin:0 0 20px;}
    .charList .dinosaur h2 {font-size:24px;}
    .charList .dinosaur ul {margin:20px 0 0;}
    .charList .dinosaur ul li {float:left; width:32.66%; margin:0 1% 0 0;}
    .charList .dinosaur ul li .imgBox {height:280px;}
    .charList .dinosaur ul li p {font-size:16px; padding:15px 0;}
}

@media all and (max-width:768px){
    .introduce {padding:10vw 8vw 8vw; margin:0 0 8vw;}
    .introduce h2 {font-size:4.6vw; margin:0 0 6vw;} 
    .introduce p {font-size:3vw; line-height:1.8;}

    .charList {margin:0 0 8vw;}
    .charList .people {margin:0 0 8vw;}
    .charList .people .imgBox {width:100%; margin:4vw 0 0; padding:4vw 0 0;}
    .charList .people .imgBox img {width:50%;}
    .charList .people .txtBox {width:100%; padding:4vw 0 0;}
    .charList .people .txtBox h2 {width:100%;}
    .charList .people .txtBox p {font-size:3.8vw; margin:0 0 4vw;}
    .charList .people .txtBox ul li {font-size:3.2vw; line-height:1.8; margin:0 0 4vw;}
    .charList .dinosaur h2 {font-size:4vw;}
    .charList .dinosaur ul {margin:4vw 0 0;}
    .charList .dinosaur ul:after {display:block; content:''; clear:both;}
    .charList .dinosaur ul li {float:left; width:100%; margin:0 0 2vw;}
    .charList .dinosaur ul li:last-child {margin:0;}
    .charList .dinosaur ul li .imgBox {width:100%; height:auto; padding:6vw 0;}
    .charList .dinosaur ul li .imgBox img {width:50%;}
    .charList .dinosaur ul li p {font-size:3.2vw; padding:3vw 0;}
}





/*============================================================================================================
    제작소개
============================================================================================================*/
/* 대원미디어 */
.daewon .leftBox:after, .daewon .rightBox:after {content:''; display:block; clear:both;}
.daewon .imgBox {display:inline-block; vertical-align:middle; width:39.6%;}
.daewon .txtBox {display:inline-block; vertical-align:middle; width:55%}
.daewon .txtBox h2 {position:relative; font-size:24px; color:#1b1b1c; font-family:'GongGothicLight'; padding:0 0 0 30px;}
.daewon .txtBox h2:after {position:absolute; display:inline-block; content:''; background:url('/production/img/daewon_bullet.png') no-repeat; width:20px; height:20px; top:50%; left:0; margin:-12px 0 0;}
.daewon .txtBox p {font-size:16px; color:#0b0b0b; line-height:1.8; margin:15px 0 0;}

.daewon .leftBox, .daewon .rightBox {margin:0 0 50px;}
.daewon .leftBox .txtBox {margin:0 5% 0 0;}
.daewon .rightBox .txtBox {margin:0 0 0 5%;}

.portfolio {margin:130px 0 0;}
.portfolio .subTitle p {font-size:20px;}
.portfolio .subTitle h2 {font-size:45px;}
.portfolio ul {margin:50px 0 0;}
.portfolio ul:after {display:block; content:''; clear:both;}
.portfolio ul li {float:left; width:23.5%; margin:0 2% 2.5% 0;}
.portfolio ul li:nth-child(4n) {margin:0 0 2.5% 0;}
.portfolio ul li p {font-size:17px; color:#0b0b0b; font-weight:500; text-align:center; margin:10px 0 0;}

@media all and (max-width:1024px){
    .daewon .imgBox {float:left; width:40%;}
    .daewon .txtBox {float:left; width:55%}
    .daewon .txtBox h2 {font-size:20px; padding:0 0 0 25px;}
    .daewon .txtBox h2:after {background:url('/production/img/daewon_bullet.png') no-repeat center/cover; width:16px; height:16px; top:50%; left:0; margin:-10px 0 0;}
    
    .portfolio {margin:100px 0 0;}
    .portfolio .subTitle p {font-size:18px;}
    .portfolio .subTitle h2 {font-size:35px;}
    .portfolio ul {margin:40px 0 0;}
    .portfolio ul li {float:left; width:32%; margin:0 2% 2.5% 0;}
    .portfolio ul li:nth-child(4n) {margin:0 2% 2.5% 0;}
    .portfolio ul li:nth-child(3n) {margin:0 0 2.5% 0;}
    .portfolio ul li p {font-size:16px; margin:10px 0 0;}

}

@media all and (max-width:768px){
    .daewon .imgBox {float:left; width:100%;}
    .daewon .imgBox img {width:100%;}
    .daewon .txtBox {float:left; width:100%;}
    .daewon .txtBox h2 {font-size:3.6vw; padding:0 0 0 5vw;}
    .daewon .txtBox h2:after {width:3.5vw; height:3.5vw; top:50%; left:0; margin:-2vw 0 0;}
    .daewon .txtBox p {font-size:3.2vw; margin:3vw 0 0;}

    .daewon .leftBox, .daewon .rightBox {margin:0 0 8vw;}
    .daewon .leftBox .txtBox {margin:5vw 0 0;}
    .daewon .rightBox .txtBox {margin:5vw 0 0;}

    .portfolio {margin:15vw 0 0;}
    .portfolio .subTitle p {font-size:4vw;}
    .portfolio .subTitle h2 {font-size:6vw;}
    .portfolio ul {margin:6vw 0 0;}
    .portfolio ul li {float:left; width:48%; margin:0 4% 2.5% 0;}
    .portfolio ul li:nth-child(4n) {margin:0 4% 2.5% 0;}
    .portfolio ul li:nth-child(3n) {margin:0 4% 2.5% 0;}
    .portfolio ul li:nth-child(2n) {margin:0 0 2.5% 0;}
    .portfolio ul li p {font-size:3.2vw; margin:2vw 0 3vw;}
}


/* 스튜디오이온 */
.eonList {margin:0 0 60px;}
.eonList:after {display:block; content:''; clear:both;}
.eonList .imgBox {float:left; width:25%; margin:0 7% 0 0;}
.eonList .txtBox {float:left; width:68%; padding:40px 0 0;}
.eonList .txtBox h2 {position:relative; font-size:24px; color:#1b1b1c; font-family:'GongGothicLight'; padding:0 0 0 28px;}
.eonList .txtBox h2:after {position:absolute; display:inline-block; content:''; background:url('/production/img/eon_bullet.png') no-repeat center/cover; width:19px; height:20px; top:50%; left:0; margin:-12px 0 0;}
.eonList .txtBox h2 span {font-size:22px;}
.eonList .txtBox p {font-size:18px; color:#0b0b0b; font-weight:500; margin:30px 0;}
.eonList .txtBox ul li {font-size:16px; color:#0b0b0b; line-height:2;}

@media all and (max-width:1024px){
    .eonList {margin:0 0 50px;}
    .eonList .imgBox {float:left; width:25%; margin:0 5% 0 0;}
    .eonList .txtBox {float:left; width:70%; padding:30px 0 0;}
    .eonList .txtBox h2:after {width:19px; height:20px; top:2px; left:0; margin:0;}
    .eonList .txtBox p {margin:20px 0;}
    .eonList .txtBox ul li {padding:0 0 0 10px; text-indent:-10px;}
}

@media all and (max-width:768px){
    .eonList {margin:0 0 10vw;}
    .eonList .imgBox {float:left; width:100%; margin:0 0 4vw; text-align:center;}
    .eonList .imgBox img {width:50vw;}
    .eonList .txtBox {float:left; width:100%; padding:0;}
    .eonList .txtBox h2 {font-size:3.8vw; padding:0 0 0 5.6vw;}
    .eonList .txtBox h2:after {width:3.8vw; height:4vw; top:0; left:0; margin:0.3vw 0 0;}
    .eonList .txtBox h2 span {font-size:3.6vw;}

    .eonList .txtBox p {font-size:3.5vw; margin:4vw 0;}
    .eonList .txtBox ul li {font-size:3.2vw; padding:0 0 0 2vw; text-indent:-2vw;}
}



/* 제작과정 */
.process .subTitle {margin:0 0 60px;}
.crew:after {content:''; display:block; clear:both;}
.crew .crewBox {display:inline-block; vertical-align:top; width:49.8%; margin:0 0 50px;}
.crew .crewBox:nth-child(4), .crew .crewBox:nth-child(5) {margin:0;}
.crew .crewBox h2 {font-size:22px; color:#1b1b1c; font-family:'GongGothicLight';}
.crew .crewBox h2 span {font-size:20px;}
.crew .crewBox h2 span.position {font-size:22px; color:#032f95;}
.crew .crewBox .crewCon {margin:15px 0 0;}
.crew .crewBox .crewCon .imgBox {display:inline-block; vertical-align:bottom; margin:0 3% 0 0;}
.crew .crewBox .crewCon ul {display:inline-block; vertical-align:bottom;}
.crew .crewBox .crewCon ul li {font-size:16px; color:#0b0b0b; line-height:1.9;}

.processBox {margin:130px 0 0;}
.processBox .processList {margin:0 0 50px;}
.processBox .processList p {font-size:16px; color:#0b0b0b; line-height:1.8; padding:0 26px; margin:0 0 25px;}
.processBox .processList ul:after {display:block; content:''; clear:both;}
.processBox .processList ul li {float:left; width:32.66%; margin:0 1% 1% 0;}
.processBox .processList ul li:nth-child(3n) {margin:0 0 1% 0;}

.processBox .processList ul.type1_2 li:nth-child(10) {width:66.32%;}
.processBox .processList ul.type1_2 li:nth-child(11) {margin:0 0 1% 0}

.processBox .processList ul.type2 li {width:49.5%; margin:0 1% 1% 0;}
.processBox .processList ul.type2 li:nth-child(2n) {margin:0 0 1% 0;}

@media all and (max-width:1024px){
    .process .subTitle {margin:0 0 50px;}
    .crew .crewBox {float:left; width:48%; margin:0 0 40px;}
    .crew .crewBox.leftBox {margin:0 4% 40px 0;}
    .crew .crewBox:nth-child(4) {margin:0 4% 0 0;}
    .crew .crewBox:nth-child(5) {margin:0;}
    .crew .crewBox h2 {font-size:20px;}
    .crew .crewBox h2 span {font-size:18px;}
    .crew .crewBox h2 span.position {font-size:20px;}
    .crew .crewBox .crewCon .imgBox {display:block; margin:0;}
    .crew .crewBox .crewCon ul {margin:10px 0 0;}
    .crew .crewBox .crewCon ul li {line-height:1.8;}
    
    .processBox {margin:100px 0 0;}
    .processBox .processList {margin:0 0 40px;}
    .processBox .processList ul:after {display:block; content:''; clear:both;}
}

@media all and (max-width:768px){
    .process .subTitle {margin:0 0 6vw;}
    .crew .crewBox {float:left; width:100%; margin:0 0 6vw;}
    .crew .crewBox.leftBox {margin:0 0 6vw;}
    .crew .crewBox:nth-child(4) {margin:0 0 6vw;}
    .crew .crewBox:nth-child(5) {margin:0;}
    .crew .crewBox h2 {font-size:3.8vw;}
    .crew .crewBox h2 span {font-size:3.4vw;}
    .crew .crewBox h2 span.position {font-size:3.8vw;}
    .crew .crewBox .crewCon {margin:3vw 0 0;}
    .crew .crewBox .crewCon .imgBox img {width:100%;}
    .crew .crewBox .crewCon ul {margin:2vw 0 0;}
    .crew .crewBox .crewCon ul li {font-size:3.2vw;}
    
    .processBox {margin:14vw 0 0;}
    .processBox .processList {margin:0 0 8vw;}
    .processBox .processList .subTitle2 {margin:0 0 2vw;}
    .processBox .processList p {font-size:3.2vw; padding:0 0 0 4vw; margin:0 0 3vw; line-height:1.6;}
    .processBox .processList ul li {float:left; width:49%; margin:0 2% 2% 0;}
    .processBox .processList ul li:nth-child(3n) {margin:0 2% 2% 0;}
    .processBox .processList ul li:nth-child(2n) {margin:0 0 2% 0;}

    .processBox .processList ul.type1_2 li:nth-child(9) {display:none;}
    .processBox .processList ul.type1_2 li:nth-child(10) {width:100%; margin:0 0 2% 0}
    .processBox .processList ul.type1_2 li:nth-child(11) {margin:0 2% 2% 0;}
    
    .processBox .processList ul.type2 li {width:49%; margin:0 2% 2% 0;}
    .processBox .processList ul.type2 li:nth-child(2n) {margin:0 0 2% 0;}
}

/*============================================================================================================
    영상
============================================================================================================*/
/* 유튜브 채널 */






/* 방영정보 */
.align_mid::after {content: ''; display: inline-block; width: 0; height: 104%; vertical-align: middle;}
.tv .inner {padding: 35px 120px 130px;}

.tv .bgimg {position: absolute; z-index: 1;}
.tv .bgimg01 {top: 35px; left: 120px; right: 120px;}
.tv .bgimg01 img {height: 760px; filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.26));}
.tv .bgimg02 {top: 470px; right: -170px;}
.tv .bgimg02 img {filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.34));}

.tv .txtBox {position: relative; padding: 70px 0 210px; text-align: center; z-index: 2;}
.tv .txtBox h3 {margin: 0 0 20px; font-size: 26px; font-weight: 100; color: #fff;}
.tv .txtBox h4 {margin: 0 0 5px; font-size: 45px; font-weight: 100; line-height: 1.4; color: #fff;}
.tv .txtBox span {display: block; margin: 0 auto 3px; width: 720px; height: 1px; background: linear-gradient(to left, #b0bede00, #b0bede, #b0bede00);}
.tv .txtBox span:nth-child(4) {margin: 0 auto 40px;}
.tv .txtBox .noticeBox {display: block; margin: 0 auto; width: 780px; height: 75px; background: #fff; border-radius: 37.5px; box-shadow: 0 0 9px rgba(0, 0, 0, 0.59);}
.tv .txtBox .noticeBox p {display: inline-block; vertical-align: middle; font-size: 20px; font-weight: 600; color: #171717;}
.tv .txtBox .noticeBox.align_mid::after {height: 100%;}


.tv .contBox {position: relative; padding: 0 100px; z-index: 3;}
.tv .contBox h5 {position: relative; margin: 0 0 10px; font-size: 28px; color: #171717;}
.tv .contBox h5::before {content: ''; position: absolute; top: 50%; left: -30px; transform: translate(-50%, -50%); width: 30px; height: 28px; background: url(/videotape/img/txtimg01.png)no-repeat center / cover;}
.tv .contBox ul {margin: 0 0 60px; font-size: 0;}
.tv .contBox ul li {display: inline-block; margin: 10px 10px 0 0; width: 193px; height: 130px; text-align: center; background: #fff;}
.tv .contBox ul li p {display: block; width: 100%; height: 80px; font-size: 22px; color: #353535; border: 1px solid #000;}
.tv .contBox ul li a {display: block; width: 100%; height: 50px; font-size: 16px; color: #fff; background: #000; border: 1px solid #000;}


@media all and (max-width:1350px){
    .tv .bgimg02 {left: 680px; right: -300px;}

    .tv .txtBox .noticeBox {width: 590px;}
}
@media all and (max-width:1024px){
    .tv .inner {padding: 25px 60px 80px;}

    .tv .bgimg01 {top: 25px; left: 60px; right: 60px;}
    .tv .bgimg01 img {height: 580px;}
    .tv .bgimg02 {top: 350px; left: 510px; right: -300px;}
    
    .tv .txtBox {padding: 55px 0 100px;}
    .tv .txtBox h3 {margin: 0 0 15px; font-size: 22px;}
    .tv .txtBox h4 {margin: 0 0 5px; font-size: 35px;}
    .tv .txtBox span {margin: 0 auto 3px; width: 650px;}
    .tv .txtBox span:nth-child(4) {margin: 0 auto 30px;}
    .tv .txtBox .noticeBox {width: 490px; height: 70px; border-radius: 35px; box-shadow: 0 0 9px rgba(0, 0, 0, 0.59);}
    .tv .txtBox .noticeBox p {font-size: 18px;}
    
    .tv .contBox {padding: 0 60px;}
    .tv .contBox h5 {margin: 0 0 8px; font-size: 24px;}
    .tv .contBox h5::before {left: -20px; width: 26px; height: 24px;}
    .tv .contBox ul {margin: 0 0 45px;}
    .tv .contBox ul li {margin: 10px 10px 0 0; width: 170px; height: 110px;}
    .tv .contBox ul li p {height: 70px; font-size: 18px;}
    .tv .contBox ul li a {height: 40px; font-size: 14px;}
}
@media all and (max-width:768px){
    .tv .inner {padding: 5vw 20px 2vw;}

    .tv .bgimg01 {top: 5vw; left: 20px; right: 20px; overflow: hidden;}
    .tv .bgimg01 img {height: 105vw; width: 170%; max-width: 170%;}
    .tv .bgimg02 {display: none;}
    
    .tv .txtBox {padding: 10vw 0 30vw;}
    .tv .txtBox h3 {margin: 0 0 3vw; font-size: 4vw;}
    .tv .txtBox h4 {margin: 0 0 1vw; font-size: 5vw;}
    .tv .txtBox span {margin: 0 auto 2px; width: 80vw;}
    .tv .txtBox span:nth-child(4) {margin: 0 auto 30px;}
    .tv .txtBox .noticeBox {width: 72vw; height: 9vw; border-radius: 6vw; box-shadow: 0 0 1vw rgba(0, 0, 0, 0.59);}
    .tv .txtBox .noticeBox p {font-size: 2.7vw; line-height: 9vw;}
    .tv .txtBox .noticeBox.align_mid::after {content: none;}

    
    .tv .contBox {padding: 0;}
    .tv .contBox h5 {margin: 0 0 1.5vw; padding: 0 0 0 8vw; font-size: 4vw;}
    .tv .contBox h5::before {top: 2.2vw; left: 3vw; width: 5vw; height: 4.5vw;}
    .tv .contBox ul {margin: 0 0 10vw; padding: 0 8vw; width: 100%;}
    .tv .contBox ul li {margin: 2vw 2% 0 0; width: 48%; height: 20vw;}
    .tv .contBox ul li:nth-child(2n) {margin: 2vw 0 0 0;}
    .tv .contBox ul li p {height: 12vw; font-size: 3.6vw;}
    .tv .contBox ul li a {height: 8vw; font-size: 3vw;}

}




/*============================================================================================================
    상품
============================================================================================================*/
/* 상품 */