/* Sub page */
.container {width:100%;display:inline-block;text-align:center;}


.container-box {width:1280px; margin:30px auto 0; display:table;}
.container-box .container-menu {width:320px;display:table-cell;vertical-align:top;text-align:left;}
.container-box .container-menu ul {padding:0px;margin:0px;}
.container-box .container-menu ul li {height:30px;}
.container-box .container-menu ul li a {display:inline-block;}
.container-box .container-menu ul li span, .container-box .container-menu ul li div {display:inline-block;line-height:30px;color:#999;margin:0px;}
.container-box .container-menu ul li span {height:1px;font-size:0px;line-height:0px;background:#A0A0A0;vertical-align:top;margin-top:14px;width:0px;}
.container-box .container-menu ul li div {margin-left:13px;}
.container-box .container-menu ul li.ar_menu_on span {width:124px;}
.container-box .container-menu ul li.ar_menu_on div {color:#333;}
.container-box .container-menu ul li:hover div {color:#333;}
.container-box .container-img { margin:0 auto 50px; width:576px;vertical-align:top;overflow:hidden;}
.container-box .container-img img {width:100%;}
.container-box .container-img .container-sns {color:#333;text-align:left; margin-top:10px; }
.container-box .container-img .container-sns ul { display:flex; justify-content: center; gap:10px;  }
.container-box .container-img .container-sns ul li {border:1px solid #000;height:40px;background:#transparent; ;margin-left:6px;}
.container-box .container-img .container-sns ul li.at_fancafe a { color: #000;  }
.container-box .container-img .container-sns ul li.at_insta {   }
.container-box .container-img .container-sns ul li.at_insta a {   }

.container-box .container-img .container-sns ul li:first-child {margin-left:0px;}
.container-box .container-img .container-sns ul li a {height:36px; padding:2px 5px;color:#000;text-align:center;line-height:36px;font-size:14px;}

.container-box .container-info { width: 650px; margin: 0 auto; padding: 0 15px;vertical-align:top;text-align:left;}
.container-box .container-info .info-title {border-bottom:1px solid #E5E5E5;width:100%;display:table;margin-top:10px;}
.container-box .container-info .info-title .left {width:60%;display:table-cell;}
.container-box .container-info .info-title .right {width:40%;display:table-cell;text-align:right;vertical-align:bottom;}
.container-box .container-info .info-title .left ul li {font-size:49px;font-weight:600;height:auto;vertical-align:bottom;}
.container-box .container-info .info-title .left ul li strong {font-size:20px;font-weight:400;}
.container-box .container-info .info-title .left ul li:last-child {margin-top:13px;font-size:17px;color:#999;height:30px;padding-left:10px;}
.container-box .container-info .info-title .right ul li {color:#999;font-size:13px;font-weight:300;display:inline-block;margin-bottom:13px;padding:0px 9px;}
.container-box .container-info .info-title .right ul li a {color:#999;}
.container-box .container-info .info-title .right ul li.on a, .container-box .container-info .info-title .right ul li:hover a {color:#333;}
.container-box .container-info .info-base {width:100%;display:table;margin-bottom:80px;}
.container-box .container-info .info-base .left {width:100%;display:inline-block;}
.container-box .container-info .info-base .left ul {margin-top:30px;}
.container-box .container-info .info-base .left ul li {display:table;width:100%;background:url('../images/icon_dot.gif') no-repeat left 14px;}
.container-box .container-info .info-base .left ul li span {display:table-cell;vertical-align:top;font-size:14px;color:#333;height:auto;line-height:30px;background:rgba(0,0,0,0);width:691px;}
.container-box .container-info .info-base .left ul li span:first-child {padding-left:18px;width:100px !important;color:#666;font-weight:500;}
.container-box .container-info .info-base .right {width:100%;display:inline-block;text-align:right;vertical-align:top;position:relative;}
.container-box .container-info .info-base .right ul {margin-top:12px;}
.container-box .container-info .info-base .right ul li {display:inline-block;padding-right:15px;}
.container-box .container-info .info-base .right ul li a {color:#666;font-size:12px;display:inline-block;text-align:center;font-weight:300;}
.container-box .container-info .info-works h2 {letter-spacing:-2px;font-size:40px;color:#333;font-weight:500;margin-top:12px;}
.container-box .container-info .info-works .info-works-box {width:100%;padding-top:30px;}
.container-box .container-info .info-works .info-works-box .info-works-scroll {width:100%;}
.container-box .container-info .info-works .info-works-box .info-works-scroll::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
}

.container-box .container-info .info-works .info-works-box .info-works-scroll::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #217af4; /* 스크롤바의 색상 */

    border-radius: 10px;
}

.container-box .container-info .info-works .info-works-box .info-works-scroll::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, .1);  /*스크롤바 뒷 배경 색상*/
}
.container-box .container-info .info-works .info-works-box .info-works-scroll ul li {display:table;background:url('/thema/layout/msoop/images/icon_dot.gif') no-repeat left 12px;width:100%;margin-top:30px;}
.container-box .container-info .info-works .info-works-box .info-works-scroll ul li:first-child {margin-top:0px;}
.container-box .container-info .info-works .info-works-box .info-works-scroll ul li span {font-size:14px;display:table-cell;vertical-align:top;color:#333;line-height:24px;background:rgba(0,0,0,0);width:680px;}
.container-box .container-info .info-works .info-works-box .info-works-scroll ul li span:first-child {padding-left:18px;width:120px !important;color:#666;font-weight:500;}


/* Base Area */
.inner {width:1200px;display:inline-block;}
.ainner {width:100%;height:100%;display:inline-block;}
.kinner {width:1700px;display:inline-block;}

@media (max-width:1700px) {
    .kinner {width:100%;}
    .contents .center {height:1100px;}
    .contents .center .slick-list {height:1100px;}
    .contents .center .slick-track {height:1100px;}
}
@media (max-width:1700px) {
	.container-box .container-info .info-title .left ul li:first-child {font-size:40px !important;}
}
@media (max-width:1500px) {
	.container-box .container-info .info-title .left ul li:first-child {font-size:34px !important;}
}
@media (max-width:1300px) {
	.container-box .container-info .info-title .left ul li:first-child {font-size:26px !important;}
}

@media (max-width:1430px) {

    .history-box .history-box-list li.img img {width:120px;}
    .container .kinner .container-box .container-menu {
	    display: none;
	}
    .container .kinner .container-box .container-menu {width:270px;}
    .container .kinner .container-box .container-img {width:460px;}
    .container .kinner .container-box .container-img img {width:100%;}
    .container .kinner .container-box .container-info {padding-left:30px;}
    .container-box .container-info .info-title .left ul li {font-size:36px;}
    .container-box .container-info .info-title .left ul li strong {font-size:16px;}
    .container-box .container-info .info-title .right ul li {padding:0px 5px;}

    .contents-vod .vod-slide .vod-slide-box {width:1200px;text-align:center;}
    .contents-vod .vod-slide .vod-slide-box .vod-slide-list {width:1050px;}

    .contents .center {height:800px;}
    .contents .center .slick-list {height:900px;}
    .contents .center .slick-track {height:900px;}
}

@media (max-width:799px) {
	.inner {width:100%;}

	.lang-mode {width:100%;padding:15px;}
    .container-box { width: 100%; margin:0px auto 0; }
    .container .kinner .container-box {width:100%;padding:15px;}
	.container .kinner .container-box .container-menu {display:none;}
	.container .kinner .container-box .container-img {width:100%;display:inline-block;}
	.container .kinner .container-box .container-info {width:100%;display:inline-block;padding:0px;margin-top:20px;}
	.nartist {display:none;}

    .container-box .container-info { width: 100%; }
    .container-box .container-info .info-works .info-works-box .info-works-scroll ul li span:first-child { padding-left:0px;  }
    .container-box .container-info .info-works .info-works-box .info-works-scroll ul li span:first-child br { display:none;  }
    .container-box .container-info .info-works .info-works-box .info-works-scroll ul li span { display:block;  }
    


    .container-box .container-info .info-title .left { width: 42%;  }
    .container-box .container-info .info-title .left ul li:last-child { padding-left:0px;  }
}