@charset "utf-8";

/* 내용관리 */
#ctt {margin:10px 0;padding:0px;background:#fff}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}
#ctt_con h2 { font-size:2rem; font-weight:900; line-height:100%;}
#ctt_con h2 { font-size:1.6rem; text-align:center; margin-bottom:30px; margin-top:20px;}
#ctt_con h3 { font-size:1.4rem; text-align:center; margin-bottom:30px;}
/*
#depth4_menu_div ul {display:flex; flex-wrap:wrap; margin-bottom:7rem; justify-content:center}
#depth4_menu_div ul li {margin:0.3rem 0.3rem}
#depth4_menu_div ul li a {border:1px solid #ccc; border-radius:var(--second-radius); color:#666; display:flex; font-size:1.1rem; font-weight:normal; height:100%; min-height:3rem; line-height:1.4; padding:5px 2rem 0; align-items:center; justify-content:center; word-break:keep-all; text-align:center; transition:all .3s}
#depth4_menu_div ul li.current a {border:1px solid #0f72ec; color:#0f72ec; font-weight:700}
*/
@media (hover:hover) {
	/*효과*/
	/*#depth4_menu_div ul li a:hover {border:1px solid #0f72ec; color:#0f72ec}*/
}

/*콘텐츠 그룹*/
.con-group {display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; position:relative; padding:8rem 0; border-bottom:1px solid #efefef;}
.con-group .con-tt {width:17rem; padding-right:2rem; word-break:keep-all}
.con-group .con-tt .dep01 {margin-top:0; padding-top:0}
.con-group .con-desc {color:#333; font-weight:500; line-height:1.6; width:calc(100% - 18rem); word-break:keep-all}
.con-group .con-desc .group + .group {margin-top:2rem}
.con-group .title {position:relative; margin-top:-0.5rem; margin-bottom:3rem}
.con-group .title strong {background-color:#fff; color:#fff; display:inline-block; font-size:6.4rem; font-weight:700; line-height:1; padding-right:3.5rem; text-shadow:-1px 0px rgba(15,114,236,0.3), 0px 1px rgba(15,114,236,0.3), 1px 0px rgba(15,114,236,0.3), 0px -1px rgba(15,114,236,0.3)}
.con-group .title:after {content:''; background-color:#0f72ec; width:100%; height:1px; position:absolute; left:0; top:50%; opacity:0.2; z-index:-1} 
.con-group .stt {color:#0f72ec; display:block; font-size:2.2rem; font-weight:700; margin-bottom:1rem}
.con-group .overview {color:#333; display:block; font-size:1.8rem; font-weight:normal; margin-bottom:0rem; word-break:keep-all}
.con-group .info {display:flex; flex-wrap:wrap;/* width:calc(100% + 5rem)*/}
.con-group .info > li {width:100%; display:flex}
.con-group .info .tt {color:#333; font-weight:700; width:9rem; font-size:1.05rem;}
.con-group .info .tt::before { content:"\f00c";
  font-family: FontAwesome;
  font-size: 1rem; color:var(--main-color); margin-right:0.5rem;}




.con-group .info .txt {width:calc(100% - 4rem);/* margin-top:-0.3rem;*/ font-size:1.05rem;}
.con-group .apply {display:none !important; background-color:#fafafa; border-radius:1rem; margin-top:2.5rem; padding:2rem 2rem 2.5rem; text-align:center}
.con-group .apply .tt {color:#333; display:block; font-size:2rem; font-weight:700}
.con-group .apply .tt small {color:#888; display:block; font-size:1.4rem; font-weight:normal}
.con-group .apply .btn {background-color:#0f72ec; border-radius:1rem; color:#fff; display:flex; font-size:1.8rem; height:5rem; width:40rem; margin:1.5rem auto 0; align-items:center; justify-content:center}
.con-group .apply .btn i {margin-left:0.5rem}
.con-group .gallery {margin-top:0rem}
.con-group .gallery ul {display:flex; flex-wrap:wrap; width:calc(100% + 2rem)}
.con-group .gallery li {border-radius:1rem;width:calc(33.333% - 2rem); height:23rem; margin-right:2rem; overflow:hidden; position:relative}
.con-group .gallery li {border-radius:1rem;width:100%; height:23rem; margin-right:2rem; overflow:hidden; position:relative}
.con-group .gallery li img {display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); min-width:100%; min-height:100%; object-fit:cover}

.con-group:first-child {padding-top:0}


.con-group.type2 .con-tt {width:100%}
.con-group.type2 .con-desc {width:100%}

@media screen and (max-width:1280px) {
	.con-group .info > li {/*width:calc(100% - 5rem);*/ margin-bottom:1rem}
}

@media screen and (max-width:1024px) {
	.con-group .con-desc {width:100%}
	.con-group .con-tt {width:100%; padding-right:0}
}

@media screen and (max-width:768px) {
	.con-group .title:after {display:none}
	.con-group .overview {margin-bottom:1rem; font-size:1.2rem;}
	.con-group .apply .btn {width:calc(100% - 2rem)}
	.con-group .gallery li {width:calc(50% - 2rem); margin-bottom:1rem}
	.con-group .con-desc .group + .group {margin-top:1rem}
}

@media screen and (max-width:640px) {
	.con-group .gallery li {width:calc(100% - 2rem); height:25rem}
	.con-group {display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; position:relative; padding:2rem 0; border-bottom:1px solid #efefef;}

}

.info-box {border-radius:1rem; border:2px solid #e8e8e8; display:flex; flex-wrap:wrap; padding:4rem 4rem; position:relative; word-break:keep-all}
.info-box:before {content:''; width:10rem; height:10rem; position:absolute; left:-2px; top:-2px; border-top:2px solid #0f72ec; border-left:2px solid #0f72ec; border-radius:1rem 0 0 0}
.info-box .icon {background-color:#f8f8f8; border-radius:100%; width:10rem; height:10rem; display:flex; align-items:center; justify-content:center; text-align:center; margin-right:3rem}
.info-box .desc {width:calc(100% - 13rem)}
.info-box .desc .tt {color:#333; display:block; font-size:3rem; font-weight:700}
.info-box .desc .txt {color:#555; display:block; font-size:1.8rem; font-weight:normal; line-height:1.6; margin-top:1rem}

@media screen and (max-width:768px) {
	.info-box {padding:2.5rem}
	.info-box .icon {margin:0 auto 3rem}
	.info-box .desc {width:100%; text-align:center}
}



/*캐릭터*/
.mt30 { margin-top:30px; float:left;}
.TxtC { text-align:center; }
p { width:100%; }
.c010400 .move {scroll-behavior: smooth}
.c010400 .con-group .title:after{display:none}
.c010400 .con-group .info .tt{width:10rem}
.c010400 .con-group .full li{width:100%; /*height:35rem;*/ background-color:#fff; margin:0; border:1px solid #eee}
.con-group .full ul{width:100%}
.c010400 .con-group .full li img{object-fit:contain}
.c010400 .con-group .cartoon{width:100%; background-color:#fff; border:1px solid #eee; border-radius:var(--first-radius);}
.c010400 .con-group .cartoon ul{width:calc(100% + 2rem); display:flex; flex-wrap:wrap;  padding:3rem 3rem 0 3rem; position:relative}
.c010400 .con-group .cartoon li{display:flex; margin-right:2rem; width:calc(50% - 2rem); margin-bottom:3rem}
.c010400 .con-group .cartoon li:nth-of-type(even){padding-left:2rem}
.c010400 .con-group .cartoon .img{display:block; width:12rem; height:12rem; position:relative; overflow:hidden; border-radius:1rem}
.c010400 .con-group .cartoon .img img{min-width:100%; min-height:100%; object-fit:cover; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.c010400 .con-group .cartoon .num{width:3rem; height:3rem; background-color:#0d72ec; text-align:center; line-height:3rem; color:#333; font-weight:700; color:#fff; border-radius:100%; display:block; margin-bottom:1rem}
.c010400 .con-group .cartoon .desc{margin:1.5rem 0 0 2rem; width:100%; clear:both;}
.c010400 .con-group .cartoon .txt{font-size:1rem}

.c010400 .episode > li{align-items:center}
.c010400 .episode .tt{width:6rem; height:6rem; line-height:6rem; text-align:center; border:1px solid #2881ee; color:#2881ee; border-radius:var(--second-radius); margin-right:2rem}

.c010400 .con-group .cartoon ul::before{display:block; content:''; width:calc(100% - 8rem); border:1px dashed #eee; position:absolute; top:50%; left:3rem; transform:translateY(-50%)}
.c010400 .con-group .cartoon ul::after{display:block; content:''; width:1px; height:calc(100% - 6rem); border:1px dashed #eee; position:absolute; left:50%; transform: translateX(calc(-50% - 1rem))}

.c010400 .flexBox > * {display:flex; flex-wrap:wrap; width:calc(100% + 2rem)}
.c010400 .flexBox > * > * {border:1px solid #ddd; flex:1 1; position:relative; padding:3rem; margin:0 2rem 2rem 0}
.c010400 .flexBox > * > * i {display:block}
.c010400 .flexBox > * > * .title {display:block; font-size:1.2rem; text-align:center; margin-bottom:1rem; line-height:normal}

.c010400 .flexBox.division > * {border:1px solid #ddd;width:100%}
.c010400 .flexBox.division > * > * {border:none; border-right:1px dashed #ddd; width: auto; margin:0}
.c010400 .flexBox.division > * > *:last-child {border-right:0}
.c010400 .flexBox.division > * > * i {margin-bottom:2rem}
.c010400 .btnbox { display:flex; clear:both; border:0px solid red; float:left; width:100%; margin-top:3rem;justify-content: space-around; }
.c010400 .btnbox .button a{ background-color:#0f72ec; border:none;  float:left; padding:2rem 6rem; color:#fff; font-size:1.2rem; justify-content: space-around; border-radius:var(--second-radius);}
@media screen and (max-width:768px) {
	
	.con-group .gallery{margin-top:0}
	
	/*이미지 롤링*/
	div.gallery ul.bxslider li {width:auto !important}
	div.gallery ul.bxslider {left:0}
	div.bx-viewport:before, div.bx-viewport:after {content:none}
	
	.c010400 .con-group .full li{height:15rem}
	
	.c010400 .btnbox { display:flex; flex-wrap:wrap}
	.c010400 .btnbox .button{flex:1}
	.c010400 .btnbox .button a{display:block; padding:2rem}
	
	.c801090 .madeList .list .desc {width:calc(100% - 20% - 11rem)}
	
	.c010400 .characterList{display:none}
	.c010400 .con-group .cartoon ul::before{display:none}
	.c010400 .con-group .cartoon ul::after{display:none}
	.c010400 .con-group .cartoon li:nth-of-type(even){padding-left:0}
	.c010400 .con-group .cartoon li{display:block; margin-right:2rem; width:calc(50% - 2rem); margin-bottom:3rem}
.c010400 .con-group .cartoon .img{ width:100%; min-height:230px; text-align:center;}

.c010400 .con-group .cartoon .img img{min-width:230px; min-height:230px; object-fit:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
	.c010400 .con-group .cartoon .desc{margin:1.5rem 0 0 0; width:100%; clear:both;}
.c010400 .con-group .cartoon .num{width:3rem; height:3rem; background-color:#0d72ec; float:left; margin-right:1rem; text-align:center; line-height:3rem; color:#333; font-weight:700; color:#fff; border-radius:100%; display:block; margin-bottom:1rem}

	.c010400 .con-group .cartoon li{width:100%}
	.c010400 .con-group .full li img{min-width:120%}
	
	.c010400 .con-group .episode > li{flex-wrap:wrap}
	.c010400 .episode .tt{width:auto; padding:0 2rem; height:auto; line-height:4rem; border-radius:30rem; margin:auto auto 2rem auto}
	
	.c010400 .flexBox.division > * {flex-direction:column}
	.c010400 .flexBox.division > * > * {border-right:0; border-bottom:1px dashed #ddd;}
	.c010400 .flexBox.division > * > *:last-child {border-bottom:0}
	.c010400 .flexBox.division > * > * i {right:0; text-align:center}
	
	.c011100 .flipNoti{display:none}
	.c011100 .flipImg li{width:calc(50% - 2rem); overflow:initial; height:initial}
	.c011100 .flipImg .flip{height:initial}
	.c011100 .flipImg .front{position:relative; border:1px solid #eee; height:40rem; overflow:hidden; border-radius:1rem}
	.c011100 .flipImg .back{position:initial; padding:2rem 0 0 0; text-align:left; background:none; color:#333; transform:initial}
	.c011100 .flipImg li:hover .flip{transform:initial}
}





#ctt_con .ctt_con_0105 { font-size:1.1rem; line-height:150%; width:100%;  margin:0px auto; clear:both; margin-top:30px;}
#ctt_con .ctt_con_0105 .item { padding:0px 100px; clear:both; }
#ctt_con .ctt_con_0105 .item h2 { width:100%; }
#ctt_con .ctt_con_0105 table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:2px solid #333;border-bottom:1px solid #ccc} 
#ctt_con .ctt_con_0105 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
#ctt_con .ctt_con_0105 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ccc;height:40px}
#ctt_con .ctt_con_0105 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
#ctt_con .ctt_con_0105 tfoot th, tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
#ctt_con .ctt_con_0105 tbody th {padding:8px 0;border-bottom:1px solid #ccc}
#ctt_con .ctt_con_0105 .tbl tr:first-child { border-top:2px solid #333;}
#ctt_con .ctt_con_0105 td {color:#000;padding:10px 5px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;line-height:1.4rem;word-break:break-all; text-align:center;}
#ctt_con .ctt_con_0105 tbody tr:hover td {background:#fafafa}
#ctt_con .ctt_con_0105 a:hover {text-decoration:underline}

#ctt_con .ctt_con_0105 h1 { font-size:3rem; font-weight:900; line-height:120%; }
/*#ctt_con .ctt_con_0105 h2:before { content:""; height:40px; display:inline-block; border-left:5px solid #f067a6; border-top:4px solid #38ac67; border-bottom:9px solid #ffc24d; }*/
/*#ctt_con .ctt_con_0105 h2:before { content:""; height:25px; display:inline-block; border-left:4px solid #2284c6; }*/

#ctt_con .ctt_con_0105 h2 span { padding-left:15px;display:block; color:#333;  border-left:4px solid var(--main-color); }
#ctt_con .ctt_con_0105 h2 { font-size:1.5rem; font-weight:700; color:#4e4e4e; text-align:left; line-height:110%; letter-spacing:-0.05em;  margin-top:0px; }
#ctt_con .ctt_con_0105 .div_left { float:left; width:30%; padding:0px 0px 0px ; text-align:left;}
#ctt_con .ctt_con_0105 .div_left img { width:100%; max-width:400px; }
#ctt_con .ctt_con_0105 .div_right { float:right; font-size:1.2rem; width:70%; background:#f9f9f9; border-radius:var(--first-radius); padding:30px 30px 30px 50px;background-position:100% 100%; background-repeat:no-repeat;}
#ctt_con .ctt_con_0105 .sm { font-size:0.95rem; }
#ctt_con .ctt_con_0105 .gap { display:inline-block; width:20px; text-align:center; }
#ctt_con .ctt_con_0105 .list { margin-left:10px; clear:both; display:block; width:100%; word-break: keep-all; color:#525252;}
@media (max-width:600px) {

#ctt_con .ctt_con_0105 { font-size:1.1rem; line-height:150%; width:100%;  margin:0px auto; clear:both; margin-top:80px;}
#ctt_con .ctt_con_0105 .item { padding:0px 0px; display:block;}

#ctt_con .ctt_con_0105 .item h2 { width:100%; }

.pview { display:none; }
.mview { display:inline;  }

}