/* include 공통 CSS */
/************************* 공통 시작*************************/
.int-tab {margin-top: 2em; font-size: 16px;}
.int-tab__list {display: flex; flex-wrap:wrap; align-items: center;}
.int-tab__item {margin-right: 1em;}
.int-tab__item:last-child {margin-right: 0;}

.dingo-wrap {font-size: 16px;}
#fans.dingo-wrap .dingo-wrap__sec {padding-bottom: 0;}
.dingo-wrap__inner {display: flex; flex-wrap:wrap; justify-content: space-between; align-items: flex-start;}
.dingo-wrap__sec {padding:7.5em 0;}
.dingo-wrap__sec--bg {padding-top: 0; padding-bottom: 0;}
.dingo-wrap__int {display: flex; flex-wrap:wrap; justify-content: space-between; align-items: flex-start;}
.dingo-wrap__txt {padding-right: 4em; flex:1;}
.dingo-wrap__cont {margin-top: 2.5em;}
.dingo-wrap__cont--bg {padding:4em 0; background-color: #fafafa;}
.dingo-wrap__image {width: 100%; flex: 1; text-align: center;}
.dingo-wrap__image img {max-width: 100%; height: auto;}
.dingo-wrap__ctrl .dingo-wrap__logo {max-width:220px; width: 25vw; margin-top: 20px;}
.dingo-wrap__ctrl .dingo-wrap__logo img {max-width:100%;height: auto;}
@media(max-width:1080px){
	.dingo-wrap {font-size: 15px;}
}
@media(max-width:768px){
	.dingo-wrap {font-size: 14px;}
	.dingo-wrap__txt {padding-right: 10%; width: 100%; flex:none;}
	.dingo-wrap__ctrl {display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 1.5em;}
	.dingo-wrap__ctrl .dingo-wrap__logo {margin-top: 0;}
}
@media(max-width:500px){
	.dingo-wrap {font-size: 13px;}
	.dingo-wrap__ctrl .dingo-wrap__logo {width: 35vw;}
}

.info-list__item {margin-bottom: 0.25em; display: flex; flex-wrap:wrap; line-height: 1.6;}
.info-list__item:last-child {margin-bottom: 0;}
.info-list__cate {min-width: 5.4545em; font-size: 1.375em;}
.info-list__desc {flex:1; align-self: center;}

.dingo-map {margin-top: 1em; border-radius:1.25em; overflow: hidden;}
.dingo-map__iframe {display: block; width: 100%; height: 25em;}

.link-arrow {position: relative; width: 58px; height: 58px;}
.link-arrow img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width:100%; vertical-align: top; transition:.3s ease all;}
.link-arrow img.on {opacity: 0; visibility: hidden; z-index: 1;}

@media(max-width:1080px){
	.link-arrow {width: 54px; height: 54px;}
	.link-arrow img {width: 46px;}
}
@media(max-width:768px){
	.link-arrow {width: 50px; height: 50px;}
	.link-arrow img {width: 42px;}
}
@media(max-width:500px){
	.link-arrow {width: 46px; height: 46px;}
	.link-arrow img {width: 38px;}
}

.link-btn {display: inline-flex; justify-content: center; align-items: center; padding:0.5em; width: 220px; min-height: 46px; font-size: 16px; font-weight: 700; background-color: #212121; text-align: center; color: #fff !important; border-radius:46px; transition:.3s ease all;}
@media(max-width: 1080px){
	.link-btn {width: 200px; font-size: 15px; min-height: 44px;}
}
@media(max-width: 768px){
	.link-btn {width: 160px; font-size: 14px; min-height: 42px;}
}
@media(max-width: 500px){
	.link-btn {font-size: 14px; min-height: 42px;}
}
@media(min-width:768px){
  .link-btn:hover {background-color: #FF0F0F;}
}

.link-ani {position: relative; display: inline-flex; width: 100%; z-index: 0;}
.link-ani span {position: absolute; display: inline-flex; justify-content:center; align-items:center; top: 50%; left: 50%; width: 100%; transform:translate(-50%,-50%); color: #fff; z-index: 1; text-align: center; font-size: 16px; font-weight: 700; transition: .3s ease all;}
.link-ani .bg {width: 100%; height: 45px; background-color: #212121; border-radius: 30px; transition:.3s ease all;}
.link-ani.tab-link .bg {width: 220px; height: 46px;}

@media(max-width:1080px){
	.link-ani .bg {height: 42px;}
	.link-ani span {font-size: 15px;}
	.link-ani.tab-link .bg {height: 44px;}
}
@media(max-width:768px){
	.link-ani .bg {height: 38px;}
	.link-ani span {font-size: 14px;}
	.link-ani.tab-link .bg {height: 42px;}
}
@media(max-width:500px){
	.link-ani span {font-size: 13px;}
	.link-ani.tab-link .bg {height: 42px;}
}

.quick-menu {position: fixed; right: 23px; top: 15%;}
.quick-menu li {margin-bottom: 20px; text-align: center;}
.quick-menu li:last-child {margin-bottom: 0;}
.quick-menu li figure {position: relative; margin: 0 auto; width: 50px; height: 50px;}
.quick-menu li figure img {max-width:100%; vertical-align: top;}
.quick-menu li figure img.on {left: 0; top: 0; position: absolute; opacity: 0; visibility: hidden;}
.quick-menu li p {margin-top: 5px; font-size: 14px; font-weight: 500; color: #808080;}

@media(max-width:1640px){
	.quick-menu {right: 4%;}
}
@media(max-width:1080px){
	.quick-menu li figure {margin-bottom: 10px; width: 40px; height: 40px;}
	.quick-menu li p {font-size: 13px;}
}
@media(max-width:768px){
	.quick-menu {display: none;}
}
@media(min-width:768px){
	.quick-menu li figure img {transition:.3s ease all;}
	.quick-menu li:hover figure img.off {opacity: 0; visibility: hidden;}
	.quick-menu li:hover figure img.on {opacity: 1; visibility: visible;}

	.quick-menu li p {transition: .3s ease all;}
	.quick-menu li:hover p {color: #212121;}
}


.sub_right						{position:relative; margin-top: 160px; width:100%;}
@media(max-width:768px){
	.sub_right {margin-top: 24%;}
}

.content_title {margin: 0 auto; max-width:1600px;}
.content_title h1 {margin-bottom:0.245em; font-size: 62px; font-weight: 700;}
@media(max-width:1640px){
	.content_title {padding: 0 4%;}
	.content_title h1 {font-size: 56px;}
}
@media(max-width:1440px){
	.content_title h1 {font-size: 50px;}
}
@media(max-width:1080px){
	.content_title h1 {font-size: 44px;}
}
@media(max-width:768px){
	.content_title h1 {font-size: 38px;}
	.content_title p br {display: none;}
}
@media(max-width:500px){
	.content_title h1 {font-size: 32px;}
}

.content_desc				{min-height:500px;}

.tabmenu {display: flex; flex-flow: row wrap; margin: 0 auto; max-width:1600px}
.tabmenu li {width: 180px; margin-right: 25px;}
.tabmenu li:last-child {margin-right: 0;}
.tabmenu li img {margin-left: 8px;}
@media(max-width:1640px){
	.tabmenu {padding:0 4%;}
}
@media(max-width:1080px){
  .tabmenu li {margin-right: 15px;}	
}
@media (max-width:450px) {
	.tabmenu li {width: 49%; margin-right: 2%;}
	.tabmenu li:nth-child(2n) {margin-right: 0;}
}

/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header_t {width:100%; display:flex; align-items: center; padding:0 20px; position: fixed; z-index: 20; left:0; top:0; min-height:70px; transition:.3s ease all;}
.header_t_on {background-color: #fff;}
.header_t.hide {transform:translateY(-100%);}
.f-nav{background:#fff; position:fixed; box-shadow:0 2px 6px rgb(0,0,0,0.1);}

.header_logo{width:10%;}

.header_gnb_bg {display: flex; width: 80%; align-items: center; justify-content: center; transition:all 0.6s;}
.header_gnb_bg::after {content: ''; display: block; width: 100vw; height: 0; background: #fff; box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 10%); position: absolute; left: 0; top: 80px; transition:height 0.6s; z-index:-1; }
#all_nav {width: 100%; max-width: 552px; transition: all 0.6s;}
.header_gnb_bg .nav_ul {display: flex; flex-flow:row wrap; justify-content:space-between;}
.header_gnb_bg .nav_ul > li {flex:1 0 auto; position: relative; padding: 28px 0;}
.header_gnb_bg .nav_ul > li > a {font-weight: 500; position: relative; color: #FFF;}
.header_gnb_bg .nav_ul > li .sub a {color: #555; transition:.3s ease all;}
.header_gnb_bg .nav_ul > li .sub a:hover {color: #000;}
.header_gnb_bg .sub {width: 0; height: 0; opacity: 0; visibility: hidden; text-align: left; }
.header_gnb_bg .sub li {margin-bottom: 3px;}
.header_gnb_bg .sub li:last-child {margin-bottom: 0;}
.header_gnb_bg .sub a {font-size: 15px; position: relative; top: 0; left: 0; }
.header_gnb_bg:hover::after {height: 200px; transition:height 0.6s;}
.header_gnb_bg:hover .sub {width: 100%; height: auto; opacity: 1; visibility: visible; position: absolute; left: 0; top: 80px; z-index: 9; line-height: 2; transition:opacity 0.2s 0.2s;}
.header_gnb_bg:hover .sub a {color: #212121; font-weight: 400; line-height: 1.6;}

.header_btn{width:10%;display: flex; justify-content: flex-end;}
.header_btn .language_btn{width:100%; position: relative; text-align:center;}
.header_btn .language_btn>a{color:#fff; font-weight: 700; width:100%; text-align:center;}
.header_btn .language_btn ul{position:absolute; top:53px; width:50%; left: 50%; transform:translateX(-50%); display: none; background:#fff; padding:5px 10px; border-radius:12px; box-shadow:0px 4px 4px rgba(0,0,0,0.1);}
.header_btn .language_btn ul li a{display:block; font-size:15px; color:#121212; padding:5px 0; text-align:center;}



.f-nav .header_gnb_bg .nav_ul > li > a, .header_t_on .header_gnb_bg .nav_ul > li > a {color: #212121;}
.f-nav .header_btn .language_btn a, .header_t_on .header_btn .language_btn a {color:#212121;}


.header_t_on #all_nav {max-width: 720px;}

.bg-overlay {position: fixed; top:0; left:0; width: 100%; height: 0; background: rgba(0,0,0,0.5); z-index: 6; opacity: 0; transition: opacity 0.6s;}
.header_t_on + .bg-overlay {opacity: 1; height: 100%; }

/* 햄벅 */
.mo_nav				{display:none; }
.mo_nav *{
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;}
.mo_nav .navbar-toggle {position: relative; background-color:transparent; background-image:none; padding: 0; border:0;}
.mo_nav .navbar-toggle:focus {outline: 0;}
.mo_nav .navbar-toggle .icon-bar {margin-bottom: 8px; background:#212121; display:block; width:40px; height:3px; border-radius:3px;}
.mo_nav .navbar-toggle .icon-bar:last-of-type {margin-bottom: 0;}

.f-nav .mo_nav .navbar-toggle .icon-bar, 
.header_t_on .mo_nav .navbar-toggle .icon-bar {background-color: #212121;}
@media(max-width:1600px){
	.header_t{padding:0 4%;}
}
@media(max-width:1080px){
	.mo_nav{display:block;}
	.header_btn .login_btn, .header_btn .language_btn{display: none;}
	.header_btn, .header_logo{width:40%;}
	.header_t{justify-content: space-between;}
	.header_gnb_bg {display: none;}
}

/************************* header_inc 끝*************************/

/************************* main_inc 시작*************************/
.flx {display: flex; flex-flow:row wrap;}

.inner {width: 100%; max-width:1600px; margin: 0 auto;}


.main_visual										{position:relative; margin:0 auto;}
@media(max-width:768px){
	.main_visual {height:600px; overflow: hidden;}
	.main_visual div {padding: 0 !important;}
	.main_visual video {width: 1080px !important; height: 620px !important;  left: 50% !important; transform:translateX(-50%);}
	.main_visual iframe {width: 1080px !important; height: 620px !important;  left: 50% !important; transform:translateX(-50%);}
}

.m-tit {font-size: 62px; font-weight: 700; line-height: 1.3;}

.main2 {padding: 140px 0;}
.main2 p {font-size: 22px; font-weight: 700; margin-bottom: 13px;}

.main3 {width: 40%; margin: 0 auto; background: linear-gradient(135deg, rgba(0,161,233,1) 0%, rgba(255,204,0,1) 100%); padding: 170px 0; opacity: 0; border-radius:150px; transition:1.2s ease all;}
.main3.on {width: 100%; opacity: 1; border-radius:0;}
.main3 .main_num ul {justify-content: space-between;}
.main3 .main_num ul li				{padding:0px 0; position:relative; color:#fff;}
.main3 .main_num ul li h3		{font-size:72px; font-weight:700; }
.main3 .main_num ul li p			{font-size:32px; opacity: 0.7;}

.main4 {text-align: center; padding-top: 130px;}
.main4 .box2 {padding-bottom: 115px;}
.main4 .box2 img {width: 75%; max-width: 467px;}
.main4 .link-ani {max-width: 180px; margin: 30px auto 0;}


@keyframes linkAni {
	0% {margin-top: 20px;}
	100% {margin-top: 0px; opacity: 1;}
}

@media (max-width:1640px) {
	.inner {padding: 0 4%;}
}
@media(max-width:1600px){
	
.m-tit {font-size: 58px;}

.main2 {padding: 130px 0;}
.main2 p {font-size: 21px;}

.main3 { padding: 160px 0;}
.main3 .main_num ul li h3 {font-size:68px; }
.main3 .main_num ul li p {font-size:30px; }

.main4 {padding-top: 120px;}
.main4 .box2 {padding-bottom: 100px;}
.main4 .link-ani {margin-top: 25px;}
}

@media(max-width:1300px){
.m-tit {font-size: 50px;}

.main2 {padding: 110px 0;}
.main2 p {font-size: 20px; margin-bottom: 10px;}

.main3 { padding: 140px 0;}
.main3 .main_num ul li h3 {font-size:62px; }
.main3 .main_num ul li p {font-size:28px; }

.main4 {padding-top: 110px;}
.main4 .box2 {padding-bottom: 90px;}
}

@media(max-width:1080px){
.m-tit {font-size: 42px;}

.main2 {padding: 80px 0;}
.main2 p {font-size: 19px; margin-bottom: 10px;}

.main3 { padding: 110px 0;}
.main3 .main_num ul li {width: 100%; text-align: center; margin-bottom: 5%;}
.main3 .main_num ul li h3 {font-size:56px; }
.main3 .main_num ul li p {font-size:24px; }

.main4 {padding-top: 90px;}
.main4 .box2 {padding-bottom: 70px;}
.main4 .link-ani {margin-top: 20px;}
}

@media(max-width:768px){
.m-tit {font-size: 32px;}

.main2 p {font-size: 18px; margin-bottom: 5px;}

.main3 { padding: 80px 0;}
.main3 .main_num ul li h3 {font-size:42px; }
.main3 .main_num ul li p {font-size:20px; }

.main4 {padding-top: 80px;}
.main4 .m-tit {padding:0 4%;}
.main4 .link-ani {margin-top: 15px;}
}

@media(min-width:768px){
	.link-ani:hover span {opacity: 0; animation: linkAni .3s .3s forwards;}
	.link-ani:hover .bg {background-color: #FF0F0F;}
}

/************************* main_inc 끝*************************/

/************************* title_navi 시작 *************************/
.navi_all{border-bottom:1px solid #ddd;}
.navi_in{width:100%; max-width:1300px; margin:0 auto; display: flex;}
.navi_in .home_btn_all a{display: flex; align-items: center; justify-content: center; padding:15px;}
.navi_in .down_btn{position:relative; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.navi_in .down_btn2{border-right:1px solid #ddd; border-left:0;}
.navi_in .down_btn .down_btn_title{display: flex; align-items: center; padding:17px 30px; cursor: pointer; width:240px;}
.navi_in .down_btn .down_btn_title h3{font-size:15px; font-weight:600; line-height:1; transition:all .2s;}
.navi_in .down_btn:hover .down_btn_title h3{color:#ea002b;}
.navi_in .down_btn .down_btn_title img{position:absolute; right:30px; top:0; bottom:0; margin:auto; transition:all .3s;}

ul.extend{position:absolute; background:#fff; width:calc(100% + 2px); top:50px; border:1px solid #ddd; z-index: 5; left:-1px; padding:10px 0; display: none;}
ul.extend li{}
ul.extend li a{ font-size:15px; font-weight:600; display: block; margin:0 30px; padding:13px 0; transition:all .3s;}
ul.extend li a:hover{color:#ea002b;}
@media(max-width:1050px){
	.navi_in .down_btn .down_btn_title {width:200px; padding: 20px;}
}
@media(max-width:768px){
	ul.extend {top:55px;}
	ul.extend li a {font-size: 14px; margin: 0px 20px; padding: 10px 0;}
}
@media(max-width:600px){
	.navi_in .home_btn_all{display: none;}
	.navi_in .down_btn{width:50%;}
	.navi_in .down_btn .down_btn_title {width:100%; padding: 15px;}
	.navi_in .down_btn .down_btn_title h3 {font-size: 13px;}
	.navi_in .home_btn_all a {padding:8px;}
	.navi_in .down_btn .down_btn_title img {right:15px;}
	ul.extend {top:43px;}
	ul.extend li a {font-size: 13px; margin: 0px 17px; padding: 8px 0;}
}


/************************* title_navi 끝 *************************/

/************************* 서브 CSS 시작 *************************/
.s-tit h2 {font-size: 48px; font-weight: 700;}
.s-tit h2 span {color: #f00;}
.s-tit p {margin-top: 0.9em;}

@media(max-width:1080px){
	.s-tit h2 {font-size: 40px;}
}
@media(max-width:768px){
	.s-tit h2 {font-size: 34px;}
}
@media(max-width:500px){
	.s-tit h2 {font-size: 28px;}
}



.s11 {margin-top: 80px;}
.s11-1 .sct {position: relative; align-items: center; height: 100vh;}
.s11-1 .sct .desc-box {width: 640px;}
.s11-1 .sct .bg-box {position: absolute; top: 0; width: 50%; height: 100%; z-index: -1; background-color: #212121; overflow: hidden;}
.s11-1 .sct .bg-box img {width: 100%; height: 100%; object-fit: cover;}

@media(max-width:1440px){
	.s11-1 .sct .desc-box {width: 80%; padding:40px 4%; box-shadow:0px 4px 8px rgba(0,0,0,0.1); background-color: rgba(255,255,255,0.95); border-radius:20px;}
	.s11-1 .sct01 ul li {box-shadow: 0 1px 4px rgba(0,0,0,0.1);}
	.s11-1 .sct02 .graph-wrap {box-shadow: 0 1px 4px rgba(0,0,0,0.1);}
}
@media(max-width:1080px){
	.s11-1 .sct {padding:12% 0; height: auto;}
	.s11-1 .sct .desc-box {width: 100%;}
	.s11-1 .sct .bg-box {width: 100%;}
}
@media(max-width:768px){
	.s11 {margin-top: 10%}
}




.s11-1 .sct01 .bg-box {right: 0;}
.s11-1 .sct01 ul {margin-top: 60px;}
.s11-1 .sct01 ul li {margin-right: 15px; padding-top: 52px; width: 200px; min-height: 200px; border-radius:20px; text-align: center; background-color: #fafafa;}
.s11-1 .sct01 ul li:last-child {margin-right: 0;}
.s11-1 .sct01 ul li h4 {margin-top: 0.6em; display: flex; justify-content: center; align-items: center; min-height: 52px; font-weight: 500;}

@media(max-width:1080px){
	.s11-1 .sct01 ul {margin-top: 40px;}
	.s11-1 .sct01 ul li {margin-right: 2%; width: 32%; padding-left: 10px; padding-right: 10px;}
	.s11-1 .sct01 .bg-box {background-position: center bottom;}
}
@media(max-width:768px){
	.s11-1 .sct {padding:18% 0;}
	/* .s-tit p {width: 90%;} */
	.s-tit p br {display: none;}
}
@media(max-width:500px){
	.s11-1 .sct01 ul {margin-top: 25px;}
	.s11-1 .sct01 ul li {margin-right: 0; padding:20px 10px; margin-bottom: 10px; min-height:auto; width: 100%;}
	.s11-1 .sct01 ul li:last-child {margin-bottom: 0;}
	.s11-1 .sct01 ul li br {display: none;}
	.s11-1 .sct01 ul li h4 {min-height: auto;}
}

.s11-1 .sct02 .desc-box {float:right;}
.s11-1 .sct02 .bg-box {left: 0;}
.s11-1 .sct02 .graph-wrap {position: relative; margin-top: 60px; padding:100px 0 40px; background-color: #fafafa; border-radius:20px;}
.s11-1 .sct02 .graph-circle {margin: 0 auto; position: relative; width: 214px; height: 214px; border-radius:100%; border:1px solid #212121;}
.s11-1 .sct02 .graph {position: absolute;}
.s11-1 .sct02 .graph h4,
.s11-1 .sct02 .graph figure {display: inline-flex;}
.s11-1 .sct02 .graph h4 {font-weight: 500;}
.s11-1 .sct02 .graph figure {justify-content:center; align-items:center; background-color: #fafafa; width: 45px; height: 45px;}
.s11-1 .sct02 .graph01 {top: -76px; left: 50%; transform:translateX(-50%); text-align: center;}
.s11-1 .sct02 .graph02 {bottom: 0; left: -103px;}
.s11-1 .sct02 .graph03 {bottom: -20px; right: -110px;}



@media(max-width:1080px){
	.s11-1 .sct02 .graph-wrap {margin-top: 40px;}
}
@media(max-width:768px){
	.s11-1 .sct02 .graph-wrap {margin-top: 28px;}
	.s11-1 .sct02 .graph-circle {width: 160px; height: 160px;}
}
@media(max-width:500px){
	.s11-1 .sct02 .graph-wrap {padding: 88px 0 70px;}
	.s11-1 .sct02 .graph-circle {width: 120px; height: 120px;}
	.s11-1 .sct02 .graph01 {top: -64px;}
	.s11-1 .sct02 .graph02 {display: flex; bottom: -24px; left: -59px; text-align:right; align-items: flex-end; flex-flow:column-reverse wrap;}
	.s11-1 .sct02 .graph03 {bottom: -43px; right: -68px;}

	.s11-1 .sct02 .graph h4,
	.s11-1 .sct02 .graph figure {display: flex;}
	.s11-1 .sct02 .graph figure {width: 35px; height: 35px;}
	.s11-1 .sct02 .graph01 figure {margin: 0 auto;}
}


.s11-2 {background-color: #fafafa;}
.s11-2 .desc-box {padding:150px 0 143px; justify-content: space-between; min-height:800px;}
.s11-2 .history-wrap {width: 39.5%;}
.s11-2 .his-year li {position: relative; margin-bottom: 50px; z-index: 0;}
.s11-2 .his-year li:before {position: absolute; content:''; display: inline-block; top: 12px; right: 10px; width: 1px; height: 84px; background-color: #212121; z-index: -1;}
.s11-2 .his-year li a {padding-right: 3px; display: flex; justify-content: space-between; align-items:center; width: 114px; font-size: 22px; font-weight: 700; color: #212121;}
.s11-2 .his-year li.on a {padding-right: 0;}
.s11-2 .his-year li a:after {content:''; display: inline-block; width: 14px; height: 14px; background-color: #212121; border-radius:100%; transition:.3s ease all;}
.s11-2 .his-year li.on a:after {width: 20px; height: 20px; background-color: #fff; border:4px solid #ff0f0f;}
.s11-2 .his-cont {position: relative; width:calc(100% - 114px); }
.s11-2 .his-cont ul {display: none; opacity: 0; padding-left: 58px; width: 100%;opacity: 0; visibility: hidden;}
.s11-2 .his-cont ul.on {display: block; animation: fade-in 1s; animation-fill-mode: forwards;}
.s11-2 .his-cont .year {margin-bottom: 0.5em; display: inline-flex; justify-content: center; align-items: center; width: 105px; height: 39px; border-radius:39px; background-color: #ff0f0f; color: #fff; font-size: 17px; font-weight: 500; text-align: center;}
.s11-2 .his-cont li {margin-bottom: 27px;}


.s11-2 .sct-wrap { padding: 150px 0 143px; justify-content: space-between; min-height: 800px;}

.sct .sct03 .flx .desc-box {padding-top: 150px;}


@media(max-width:1440px){
	.s11-2 .history-wrap {width: 50%;}
}
@media(max-width:1080px){
	.s11-2 .s-tit {width: 34%;}
	.s11-2 .s-tit p br {display: none;}
	.s11-2 .history-wrap {width: 60%;}
	.s11-2 .his-year li {margin-bottom: 45px;}
	.s11-2 .his-year li a {width: 90px; font-size: 20px;}
	.s11-2 .his-cont {width: calc(100% - 90px);}
	.s11-2 .his-cont ul {padding-left: 26px;}
	.s11-2 .his-cont .year {font-size: 16px; width: 98px; height: 36px;}
}
@media(max-width:768px){
	.s11-2 .sct-wrap {padding:15% 0; min-height: auto;}
	.s11-2 .s-tit {margin-bottom: 4%; width: 100%;}
	.s11-2 .s-tit p br {display: block;}
	.s11-2 .history-wrap {width: 100%; min-height: 630px;}
	.s11-2 .his-year li a {font-size: 18px;}
	.s11-2 .his-cont .year {font-size: 15px; width: 94px; height: 34px;}
}
@media(max-width:500px){
	.s11-2 .his-year li {margin-bottom: 30px;}
	.s11-2 .his-year li:before {right: 7px; height: 54px;}
	.s11-2 .his-year li a {padding-right: 2px; width: 70px; font-size: 16px;}
	.s11-2 .his-year li a:after {width: 10px; height: 10px;}
	.s11-2 .his-year li.on a:after {width: 15px; height: 15px;}
	.s11-2 .his-cont {width: calc(100% - 70px);}
	.s11-2 .his-cont ul {padding-left: 18px;}
	.s11-2 .his-cont .year {font-size: 14px; width: 90px; height: 30px;}
	.s11-2 .his-cont li {margin-bottom: 15px;}
	.s11-2 .his-cont li p {font-size: 13px;}
}

@keyframes fade-in {
  from {
		transform:translateY(25px); 
    opacity: 0;
		visibility: hidden;
  }
  to {
		transform:translateY(0); 
    opacity: 1;
		visibility: visible;
  }
}


/***************** 13 페이지 CSS *****************/

.s13-1 {margin-top: 77px; padding:81px 0 150px; background-color: #fafafa;}
.s13-1 .inner {justify-content: space-between; align-items: flex-end;}
.s13-1 li {align-items:center; margin-bottom: 8px;}
.s13-1 li:last-child {margin-bottom: 0;}
.s13-1 li h4 {width: 120px; font-size: 22px; font-weight: 700;}
.s13-1 .map-box {margin-top: 60px; width: 100%; height: 400px; border-radius:20px; overflow: hidden;}

@media(max-width:1080px){
	.s13-1 li h4 {width: 100px; font-size: 20px;}
	.s13-1 .map-box {margin-top: 50px; height: 350px;}
}
@media(max-width:768px){
	.s13-1 {margin-top: 10%; padding:10% 0 15%}
	.s13-1 li h4 {width: 80px; font-size: 18px;}
	.s13-1 .map-box {margin-top: 40px; height: 300px;}
}
@media(max-width:500px){
	.s13-1 ul {width: 100%; margin-bottom: 10px;}
	.s13-1 li h4 {width: 60px; font-size: 16px;}
	.s13-1 .map-box {margin-top: 30px; height: 250px;}
}

/***************** 팝업 문의폼 *****************/
.req-pop {position: fixed; display: flex; justify-content:center; align-items:flex-end; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden;  transition:.3s ease all;}
.req-pop.on {opacity: 1; visibility: visible;}
.req-pop .pop-overlay {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.7); z-index: 0;}
@media(max-width:1440px){
	.req-pop {padding: 0 4%;}
}

/***************** 21 페이지 CSS *****************/
.s21 .s-tit h2 {line-height: 1.45;}
.s21-1 {margin-top: 76px; padding:85px 0 78px; background-color: #fafafa;}
.s21-1 ul {margin-top: 12px; justify-content: space-between;}
.s21-1 li {display: flex; flex-flow: column wrap; justify-content: space-between; margin-top: 25px; padding: 22px 26px; width: 517px; height: 245px; border-radius:20px; background-color: #fff; transition:.3s ease all;}
.s21-1 li h3 {font-size: 52px; font-weight: 700;}
.s21-1 li p {color: #808080;}

@media(max-width:1640px){
	.s21-1 li {width: 32%; padding:22px 2%;}
}
@media(max-width:1440px){
	.s21-1 li h3 {font-size: 46px;}
}
@media(max-width:1080px){
	.s21-1 li h3 {font-size: 40px;}
}
@media(max-width:768px){
	.s21-1 {margin-top: 10%; padding:12% 0;}
	.s21-1 li {margin-top: 2%; width: 49%; height: 212px; padding:22px 4%;}
	.s21-1 li:first-child {background-color: #FF0F0F;}
	.s21-1 li:nth-child(2){background-color: #FFA500;}
	.s21-1 li:nth-child(3) {background-color: #00A064;}
	.s21-1 li:nth-child(4) {background-color: #3255FF;}
	.s21-1 li:nth-child(5) {background-color: #7D28FF;}
	.s21-1 li:nth-child(6) {background-color: #FF5A00;}
	.s21-1 li h3, .s21-1 li p {color: #fff;}
	.s21-1 li h3 {font-size: 34px;}
}
@media(max-width:500px){
	.s21-1 li {height: 176px;}
	.s21-1 li h3 {font-size: 28px;}
}

.s21-2 {padding:154px 0 150px;}
.s21-2 .sct-wrap {margin-top: 58px; justify-content: center;}

@media(max-width:768px){
	.s21-2 .sct-wrap {margin-top: 6%;}
	.s21-2 {padding:18% 0;}
}

@media(min-width:768px){
	.s21-1 li:first-child {background-color: #FF0F0F; color:#fff;}
	.s21-1 li:first-child p {color: #fff;}
	.s21-1 li:nth-child(2) {background-color: #FFA500; color:#fff;}
	.s21-1 li:nth-child(2) p {color: #fff;}
	.s21-1 li:nth-child(3) {background-color: #00A064; color:#fff;}
	.s21-1 li:nth-child(3) p {color: #fff;}
	/* .s21-1 li:nth-child(4):hover {background-color: #3255FF;}
	.s21-1 li:nth-child(5):hover {background-color: #7D28FF;}
	.s21-1 li:nth-child(6):hover {background-color: #FF5A00;}
	.s21-1 li:hover h3, .s21-1 li:hover p {color: #fff;} */
}


/***************** 분포도 그래프 CSS *****************/
.chart-tit {margin-top: 65px; display: inline-flex; justify-content:center; align-items:center; width: 180px; height: 40px; border-radius:20px; font-size: 16px; font-weight: 700; background-color: #ff0f0f; color: #fff; text-align: center; opacity: 0; transition:1s ease all;}
.chart-tit {opacity: 1;}

@media(max-width:1080px){
	.chart-tit {margin-top: 34px; width: 175px; height: 38px; font-size: 15px;}
}
@media(max-width:768px){
	.chart-tit {width: 170px; height: 36px; font-size: 14px;}
}
@media(max-width:500px){
	.chart-tit {width: 165px; height: 34px; font-size: 13px;}
}

.age-graph {display: flex; text-align: center; flex-flow: column wrap; justify-content: space-between;}
.age-graph .sct-wrap {justify-content: flex-end;}

.graph-height {min-height: 300px;}

.graph-cate {margin-bottom: 16px; justify-content: center; opacity: 0; transition:1s ease all;}
.graph-cate {opacity: 1;}
.graph-cate li {margin-right: 28px; display: flex; align-items:center}
.graph-cate li:last-child {margin-right: 0;}
.graph-cate li:before {margin-right: 5px; display: inline-block; content:''; width: 25px; height: 25px; border-radius:3px;}
.graph-cate li.age13-17:before {background-color: #212121;}
.graph-cate li.age18-34:before, .graph-cate li.woman:before {background-color: #FF0F0F;}
.graph-cate li.age35-44:before, .graph-cate li.man:before {background-color: #8B95A1;}
.graph-cate li.age55:before {background-color: #F1F1F1;}

@media(max-width:1440px){
	.graph-cate {margin-bottom: 25px;}
}
@media(max-width:1080px){
	.graph-cate li {margin-right: 20px;}
	.graph-cate li:before {width: 20px; height: 20px;}
}
@media(max-width:600px){
	.graph-cate {justify-content: center;}
	.graph-cate li {margin-top: 10px; width: 34%; margin-right: 0;}
}


.age-bar {display: flex; flex-flow:row wrap; justify-content: space-between; align-items: flex-end; width: 615px;}
.age-bar li {position: relative;}
.age-bar li div {margin: 0 auto; display: flex; flex-direction: column; justify-content:flex-end; width: 30px; height: 260px;}
.age-bar li div p {display: flex; justify-content: center; align-items:center; font-size: 13px; color: #fff; opacity: 0;}
.age-bar li div p.age55 {background-color: #F1F1F1;}
.age-bar li div p.age35-44 {background-color: #8B95A1;}
.age-bar li div p.age18-34 {background-color: #FF0F0F;}
.age-bar li div p.age13-17 {background-color: #212121;}
.age-bar li h5 {position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-size: 16px;}

@media(max-width:1640px){
	.age-graph {width: 46%;}
	.age-bar {width: 100%}
}
@media(max-width:1440px){
	.age-graph {width: 100%; display: block;}
	.age-bar {justify-content: center;}
	.age-bar li {margin-right: 8%;}
	.age-bar li:last-child {margin-right: 0;}
}
@media(max-width:1080px){
	.age-bar li div {height: 220px;}
	.age-bar li h5 {font-size: 14px;}
}
@media(max-width:500px){
	.age-bar {justify-content: flex-start;}
	.age-bar li {width: 25%; margin-top: 4%; margin-right: 0;}
	.age-bar li div {height: 200px;}
	.age-bar li h5 {position: static; margin-top: 0.3em; transform:none; text-align: center; font-size: 13px;}
}

/***************** 분포도 웹 예능 CSS *****************/
.age-graph.on .age-bar li.variety div p.age13-17 {animation: ageVariety01 1s forwards;}
.age-graph.on .age-bar li.variety div p.age18-34 {animation: ageVariety02 1s 0.5s forwards;}
.age-graph.on .age-bar li.variety div p.age35-44 {animation: ageVariety03 1s 1s forwards;}
.age-graph.on .age-bar li.variety div p.age55 {animation: ageVariety04 1s 1.5s forwards;}

@keyframes ageVariety01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 11.112%;
		opacity: 1;
	}
}
@keyframes ageVariety02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 72.65%;
		opacity: 1;
	}
}
@keyframes ageVariety03{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 11.112%;
		opacity: 1;
	}
}
@keyframes ageVariety04{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 5.13%;
		opacity: 1;
	}
}

/***************** 분포도 웹 드라마 CSS *****************/
.age-graph.on .age-bar li.drama div p.age13-17 {animation: ageDrama01 1s forwards;}
.age-graph.on .age-bar li.drama div p.age18-34 {animation: ageDrama02 1s 0.5s forwards;}
.age-graph.on .age-bar li.drama div p.age35-44 {animation: ageDrama03 1s 1s forwards;}
.age-graph.on .age-bar li.drama div p.age55 {animation: ageDrama04 1s 1.5s forwards;}


@keyframes ageDrama01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 19.24%;
		opacity: 1;
	}
}
@keyframes ageDrama02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 61.95%;
		opacity: 1;
	}
}
@keyframes ageDrama03{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 13.68%;
		opacity: 1;
	}
}
@keyframes ageDrama04{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 5.13%;
		opacity: 1;
	}
}

/***************** 분포도 뮤직 CSS *****************/
.age-graph.on .age-bar li.music div p.age13-17 {animation: ageMusic01 1s forwards;}
.age-graph.on .age-bar li.music div p.age18-34 {animation: ageMusic02 1s 0.5s forwards;}
.age-graph.on .age-bar li.music div p.age35-44 {animation: ageMusic03 1s 1s forwards;}
.age-graph.on .age-bar li.music div p.age55 {animation: ageMusic04 1s 1.5s forwards;}

@keyframes ageMusic01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 9.4%;
		opacity: 1;
	}
}
@keyframes ageMusic02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 81.17%;
		opacity: 1;
	}
}
@keyframes ageMusic03{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 4.3%;
		opacity: 1;
	}
}
@keyframes ageMusic04{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 5.13%;
		opacity: 1;
	}
}


/***************** 분포도 정보 CSS *****************/
.age-graph.on .age-bar li.info div p.age13-17 {animation: ageInfo01 1s forwards;}
.age-graph.on .age-bar li.info div p.age18-34 {animation: ageInfo02 1s 0.5s forwards;}
.age-graph.on .age-bar li.info div p.age35-44 {animation: ageInfo03 1s 1s forwards;}
.age-graph.on .age-bar li.info div p.age55 {animation: ageInfo04 1s 1.5s forwards;}


@keyframes ageInfo01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 12.82%;
		opacity: 1;
	}
}
@keyframes ageInfo02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 73.93%;
		opacity: 1;
	}
}
@keyframes ageInfo03{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 8.12%;
		opacity: 1;
	}
}
@keyframes ageInfo04{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 5.13%;
		opacity: 1;
	}
}


/***************** 분포도 카툰 CSS *****************/
.age-graph.on .age-bar li.cartoon div p.age13-17 {animation: ageCartoon01 1s forwards;}
.age-graph.on .age-bar li.cartoon div p.age18-34 {animation: ageCartoon02 1s 0.5s forwards;}
.age-graph.on .age-bar li.cartoon div p.age35-44 {animation: ageCartoon03 1s 1s forwards;}
.age-graph.on .age-bar li.cartoon div p.age55 {animation: ageCartoon04 1s 1.5s forwards;}


@keyframes ageCartoon01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 21.8%;
		opacity: 1;
	}
}
@keyframes ageCartoon02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 56.83%;
		opacity: 1;
	}
}
@keyframes ageCartoon03{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 16.24%;
		opacity: 1;
	}
}
@keyframes ageCartoon04{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 5.13%;
		opacity: 1;
	}
}

/***************** 분포도 리얼리티 CSS *****************/
.age-graph.on .age-bar li.reality div p.age13-17 {animation: ageReality01 1s forwards;}
.age-graph.on .age-bar li.reality div p.age18-34 {animation: ageReality02 1s 0.5s forwards;}
.age-graph.on .age-bar li.reality div p.age35-44 {animation: ageReality03 1s 1s forwards;}
.age-graph.on .age-bar li.reality div p.age55 {animation: ageReality04 1s 1.5s forwards;}

@keyframes ageReality01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 11.112%;
		opacity: 1;
	}
}
@keyframes ageReality02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 77.778%;
		opacity: 1;
	}
}
@keyframes ageReality03{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 5.98%;
		opacity: 1;
	}
}
@keyframes ageReality04{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 5.13%;
		opacity: 1;
	}
}

/***************** 분포도 기타 CSS *****************/
.age-graph.on .age-bar li.etc div p.age13-17 {animation: ageEtc01 1s forwards;}
.age-graph.on .age-bar li.etc div p.age18-34 {animation: ageEtc02 1s 0.5s forwards;}
.age-graph.on .age-bar li.etc div p.age35-44 {animation: ageEtc03 1s 1s forwards;}
.age-graph.on .age-bar li.etc div p.age55 {animation: ageEtc04 1s 1.5s forwards;}

@keyframes ageEtc01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 16.24%;
		opacity: 1;
	}
}
@keyframes ageEtc02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 67.518%;
		opacity: 1;
	}
}
@keyframes ageEtc03{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 11.112%;
		opacity: 1;
	}
}
@keyframes ageEtc04{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 5.13%;
		opacity: 1;
	}
}




/***************** 성별 그래프 CSS *****************/
.age-cate li:before {margin-right: 5px; display: inline-block; content:''; width: 25px; height: 25px; border-radius:3px;}
.age-cate li.age13-17:before {background-color: #212121;}
.age-cate li.age18-34:before {background-color: #FF0F0F;}


.cha-graph {display: flex; justify-content: space-between; flex-flow: column wrap; margin-left: 11%; text-align: center;}
.cha-bar {width: 626px; min-height:262px; justify-content: space-between; align-items:flex-end;}
.cha-bar li {position: relative;}
.cha-bar li h5 {position: absolute; width: 150%; left: 50%; transform: translateX(-50%); bottom: -30px; font-size: 16px;}
.cha-bar li .bar {justify-content:center; align-items: flex-end;}
.cha-bar li .bar div {display: flex; flex-direction: column; justify-content: flex-end; height: 241px;}
.cha-bar li .bar div.woman {margin-right: 6px;}
.cha-bar li .bar div p {position: relative; margin: 0 auto; width: 25px; opacity: 0;}
.cha-bar li .bar div.woman p {background-color: #FF0F0F;}
.cha-bar li .bar div.man p {background-color: #8B95A1;}
.cha-bar li .bar div p span {position: absolute; top: -20px; left: 50%; transform:translateX(-50%); font-size: 13px; font-weight: 500;}
.cha-bar li .bar div.woman p span {color: #ff0f0f;}
.cha-bar li .bar div.man p span {color: #8B95A1;}

@media(max-width:1640px){
	.cha-graph {margin-left: 4%; width: 46%;}
	.cha-bar {width: 100%;}
}
@media(max-width:1440px){
	.cha-graph {display: block; padding-top: 50px; margin:50px 0 0 0; width: 100%; border-top:1px solid #ddd;}
	.cha-bar {justify-content:center;}
	.cha-bar li {margin-right: 8%;}
	.cha-bar li:last-child {margin-right: 0;}
}
@media(max-width:1080px){
	.cha-bar li {margin-right: 6%;}
	.cha-bar li .bar div {height: 220px;}
	.cha-bar li h5 {position: static; margin-top: 0.3em; transform:none; width: auto; font-size: 14px;}
}
@media(max-width:768px){
	.cha-graph .graph-cate {margin-bottom: 10px;}
	.cha-graph .graph-cate li {width: 22%; justify-content: center;}
	.cha-bar {justify-content: flex-start;}
	.cha-bar li {margin-right: 0; margin-top: 28px; width: 25%;}
}
@media(max-width:500px){
	.cha-bar li .bar div {height: 200px;}
	.cha-bar li h5 {font-size: 13px;}
}


/***************** 성별 분포도 웹 예능 CSS *****************/
.cha-graph.on .cha-bar li.variety .bar div.woman p {animation: chaVariety01 1s forwards;}
.cha-graph.on .cha-bar li.variety .bar div.man p {animation: chaVariety02 1s 0.2s forwards;}

@keyframes chaVariety01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 62.25%;
		opacity: 1;
	}
}
@keyframes chaVariety02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 52.28%;
		opacity: 1;
	}
}

/***************** 성별 분포도 웹 드라마 CSS *****************/
.cha-graph.on .cha-bar li.drama .bar div.woman p {animation: chaDrama01 1s forwards;}
.cha-graph.on .cha-bar li.drama .bar div.man p {animation: chaDrama02 1s 0.2s forwards;}

@keyframes chaDrama01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 92.12%;
		opacity: 1;
	}
}
@keyframes chaDrama02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 22%;
		opacity: 1;
	}
}

/***************** 성별 분포도 뮤직 CSS *****************/
.cha-graph.on .cha-bar li.music .bar div.woman p {animation: chaMusic01 1s forwards;}
.cha-graph.on .cha-bar li.music .bar div.man p {animation: chaMusic02 1s 0.2s forwards;}

@keyframes chaMusic01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 43.56%;
		opacity: 1;
	}
}
@keyframes chaMusic02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 67.64%;
		opacity: 1;
	}
}

/***************** 성별 분포도 정보 CSS *****************/
.cha-graph.on .cha-bar li.info .bar div.woman p {animation: chaInfo01 1s forwards;}
.cha-graph.on .cha-bar li.info .bar div.man p {animation: chaInfo02 1s 0.2s forwards;}

@keyframes chaInfo01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 92.12%;
		opacity: 1;
	}
}
@keyframes chaInfo02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 22%;
		opacity: 1;
	}
}

/***************** 성별 분포도 카툰 CSS *****************/
.cha-graph.on .cha-bar li.cartoon .bar div.woman p {animation: chaCartoon01 1s forwards;}
.cha-graph.on .cha-bar li.cartoon .bar div.man p {animation: chaCartoon02 1s 0.2s forwards;}

@keyframes chaCartoon01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 87.97%;
		opacity: 1;
	}
}
@keyframes chaCartoon02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 28.22%;
		opacity: 1;
	}
}

/***************** 성별 분포도 리얼리티 CSS *****************/
.cha-graph.on .cha-bar li.reality .bar div.woman p {animation: chaReality01 1s forwards;}
.cha-graph.on .cha-bar li.reality .bar div.man p {animation: chaReality02 1s 0.2s forwards;}

@keyframes chaReality01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 20.34%;
		opacity: 1;
	}
}
@keyframes chaReality02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 100%;
		opacity: 1;
	}
}

/***************** 성별 분포도 기타 CSS *****************/
.cha-graph.on .cha-bar li.etc .bar div.woman p {animation: chaEtc01 1s forwards;}
.cha-graph.on .cha-bar li.etc .bar div.man p {animation: chaEtc02 1s 0.2s forwards;}

@keyframes chaEtc01{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 63.9%;
		opacity: 1;
	}
}
@keyframes chaEtc02{
	0%{
		height:0;
		opacity: 0;
	}
	100%{
		height: 47.72%;
		opacity: 1;
	}
}



/***************** 22 페이지 CSS *****************/
.s22-1 {padding:76px 0 150px;}
.s22-2 {padding:150px 0; background-color: #fafafa;}
@media(max-width:768px){
	.s22-1 {padding:10% 0 18%;}
	.s22-2 {padding:18% 0;}
}

/***************** 23 페이지 CSS *****************/
.s23-1 {padding:76px 0 150px;}
@media(max-width:768px){
	.s23-1 {padding:10% 0 18%;}
}

/***************** 31 페이지 CSS *****************/
.s31-1 {padding:78px 0 15px;}
@media(max-width:768px){
	.s31-1 {padding:10% 0 18%;}
}
.s31-2 {padding:141px 0 150px; background-color: #fafafa;}
@media(max-width:768px){
	.s31-2 {padding: 15% 0 18%;}
}

.st-wrap {justify-content: space-between; align-items: flex-end;}
@media(max-width:1440px){
	.st-wrap .s-tit {width: 70%;}
	.st-wrap .link-btn {width: 26%;}
}
@media(max-width:768px){
	.st-wrap .s-tit {width: 100%;}
	.st-wrap .link-btn {margin-top: 20px; width: 200px;}
}


/***************** 브랜드 컨텐츠 리스트 CSS *****************/
.brand-list {margin-top: 28px;}
.brand-list li {width: 23.75%; margin:25px 1.6667% 0 0; border-radius:20px; overflow: hidden;}
.brand-list li a {display: block; width: 100%; height: 100%;}
.brand-list li figure img {max-width:100%; vertical-align: top;}
.brand-list li:nth-child(4n) {margin-right: 0;}
.brand-list li div {padding: 7% 5% 10%; background-color: #fff;}
.brand-list li h4 {display: -webkit-box; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical; font-size: 17px;}
.brand-list li span {display: inline-block; margin-top: 0.5em; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #808080;}
@media(max-width:1080px){
	.brand-list li h4 {font-size: 16px;}
}
@media(max-width:768px){
	.brand-list li {width: 32%; margin:15px 2% 0 0;}
	.brand-list li:nth-child(4n) {margin-right: 2%;}
	.brand-list li:nth-child(3n) {margin-right: 0;}
	.brand-list li h4 {font-size: 15px;}
}
@media(max-width:500px){
	.brand-list li {width: 49%; margin:10px 2% 0 0;}
	.brand-list li:nth-child(3n) {margin-right: 2%;}
	.brand-list li:nth-child(2n) {margin-right: 0;}
	.brand-list li h4 {font-size: 14px;}
}

/***************** 브랜드 컨텐츠 뷰페이지 CSS *****************/
.view-inner {margin: 0 auto; max-width:1000px;}
.view-wrap {padding: 64px 0 150px;}
.view-wrap .link-btn {margin-top: 150px;}
.view-wrap .link-btn.mt0 {margin-top: 0;}
.view-wrap .view-link {margin-top: 150px;}
.view-wrap .view-link .link-btn {margin-top: 0;}
.view-wrap .view-link .link-btn.apply-btn {margin-left: 25px;}
.view-tit h4 {font-size: 22px; font-weight: 700;}
.view-tit > span {display: inline-block; margin: 0.2em 0 0.7em; font-weight: 300; color: #808080;}
.view-tit h2 {margin-bottom: 1.04em; padding-bottom: 0.6em; border-bottom:1px solid #D2D2D7;}
@media(max-width:1080px){
	.view-inner {padding: 0 4%;}
	.view-wrap {padding:10% 0 18%;}
	.view-wrap .link-btn {margin-top: 18%;}
	.view-wrap .view-link {margin-top: 18%;}
	.view-tit h4 {font-size: 20px;}
}
@media(max-width:768px){
	.view-wrap .view-link .link-btn.apply-btn {margin-left: 15px;}
	.view-tit h4 {font-size: 18px;}
}
@media(max-width:500px){
	.view-tit h4 {font-size: 16px;}
}

.brand-video .video-box {height: 560px; border-radius:20px; overflow: hidden;}
.brand-video p {margin-top: 0.85em; font-size: 22px; line-height: 1.5;}
@media(max-width:1080px){
	.brand-video .video-box {height: 50vw; min-height: 250px;}
	.brand-video p {font-size: 20px;}
}
@media(max-width:768px){
	.brand-video p {font-size: 18px;}
}
@media(max-width:1080px){
	.brand-video p {font-size: 16px;}
}

.brand-desc {margin:35px 0 150px;}
.brand-desc .desc-list {margin:20px 3.5% 0 0; width: 46.5%;}
.brand-desc .desc-list:nth-child(2n) {margin-right: 0;}
.brand-desc .desc-list h5 {padding-bottom: 0.7em; font-size: 22px; font-weight: 700; border-bottom:2px solid #212121;}
.brand-desc .desc-list ul {padding-top: 13px;}
.brand-desc .desc-list li {margin-top: 0.3em;}
.brand-desc .desc-list li:first-child {margin-top: 0;}

@media(max-width:1080px){
	.brand-wrap {padding: 8% 0 18%;}
	.brand-desc {margin: 5% 0 18%;}
	.brand-desc .desc-list h5 {font-size: 20px;}
}
@media(max-width:768px){
	.brand-tit.s-tit h2 {font-size: 26px;}
	.brand-desc .desc-list h5 {font-size: 18px;}
}
@media(max-width:500px){
	.brand-tit.s-tit h2 {font-size: 22px;}
	.brand-desc .desc-list h5 {font-size: 16px;}
	.brand-desc .desc-list {margin-top: 25px; margin-right: 0; width: 100%;}
}

/***************** 채용정보 뷰페이지 CSS *****************/
.apply-wrap {padding: 0 10px;}
.apply-wrap img {max-width:100%; vertical-align: top;}
.apply-cont {margin-bottom: 55px; }
.apply-cont * {width: auto !important;}
.apply-cont:last-child {margin-bottom: 0;}
.apply-cont h3  {margin-bottom: 0.4em; font-size: 22px; font-weight: 700;}
.apply-cont h3:before {display: inline-block; margin:0 6px 3px 0; content:''; width: 10px; height: 10px; background-color: #212121;}
.apply-cont .apply-box {padding: 0 10px;}
.apply-cont p {margin-top: 0.5em;}
.apply-list li {position: relative; padding-left: 13px;}
.apply-list li:before {position: absolute; top: 11px; left: 0; content:''; display: inline-block; width: 4px; height: 4px; background-color: #212121; border-radius:100%;}
@media(max-width:1080px){
	.apply-cont {margin-bottom: 10%;}
	.apply-cont h3  {font-size: 20px;}
	.apply-list li:before {top: 10px;}
}
@media(max-width:768px){
	.apply-cont h3  {font-size: 18px;}
	.apply-cont h3:before {margin:0 4px 4px 0; width: 5px; height: 5px;}
	.apply-list li {padding-left: 10px;}
	.apply-list li:before {top: 9px;}
}
@media(max-width:768px){
	.apply-cont h3  {font-size: 16px;}
	.apply-list li:before {top: 8px;}
}


/***************** 딩고 컨텐츠 슬라이드 CSS *****************/
.slide-list {margin-top: 54px; padding-bottom: 34px; border-bottom:1px solid #ddd;}
.slide-list li {margin-bottom: 30px; padding-bottom: 30px; border-bottom:1px solid #ddd;}
.slide-list li:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom:none;}
.slide-list .slide-tit {display: flex; flex-flow:row wrap; align-items:flex-start; justify-content:space-between;}
.slide-list .slide-tit h4 {margin-bottom: 1.1em; font-size: 22px; font-weight: 700; color: #ff0f0f; }
.slide-list .slide-tit p:last-of-type {margin-bottom: 20px;}
.slide-list .swiper-slide a {display: block; width: 100%; height: 100%; color: #212121;}
.slide-list .swiper-slide .slide-thumb {border-radius:20px;}
.slide-list .swiper-slide h3 {display: -webkit-box; margin-top: 1em; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical; font-size: 17px;}

.slide-control {display: flex; align-items:center;}
.slide-control .slide-arrow {margin-left: 10px;}
.slide-control .slide-arrow .swiper-button-prev, 
.slide-control .slide-arrow .swiper-button-next {display: inline-flex; justify-content:center; align-items:center; position: static; margin:0; width: 33px; height: 33px; background-color: #fafafa !important;}
.slide-control .slide-arrow .swiper-button-prev {margin-right: -3px; border-radius: 5px 0 0 5px;}
.slide-control .slide-arrow .swiper-button-next {border-radius: 0 5px 5px 0;}
.slide-control .slide-arrow .swiper-button-prev i,
.slide-control .slide-arrow .swiper-button-next i {font-size: 18px; font-weight: 500; color: #ccc;}
.slide-control .swiper-button-prev, .slide-control .swiper-container-rtl .swiper-button-next,
.slide-control .swiper-button-next, .slide-control .swiper-container-rtl .swiper-button-prev {background:none !important;}

.slide-control .swiper-pagination {position: static;}
.slide-control .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {width: 120px; text-align:right;}
.slide-control .swiper-pagination-fraction {color: #ccc;}
.slide-control .swiper-pagination-fraction span {display: inline-block; margin: 0 5px; font-weight: 700;}
.slide-control .swiper-pagination-fraction span.swiper-pagination-current {color: #212121;}
@media(max-width:1440px){
	.slide-txt {width: 70%;}
	.slide-list .slide-tit h4 {width: 58%;}
	.slide-control {justify-content: flex-end;}
}
@media(max-width:1080px){
	.slide-list .slide-tit h4 {font-size: 20px;}
	.slide-list .swiper-slide h3 {font-size: 16px;}
}
@media(max-width:768px){
	.slide-list {margin-top: 8%;}	
	.slide-control .slide-arrow .swiper-button-prev, 
	.slide-control .slide-arrow .swiper-button-next {width: 30px; height: 30px;}
	.slide-list .slide-tit h4 {font-size: 18px;}
	.slide-list .swiper-slide h3 {font-size: 15px;}
	.slide-control .swiper-pagination-fraction span {margin:0 3px;}
}
@media(max-width:500px){
	.slide-list .slide-tit h4 {font-size: 16px; width: 100%; margin-bottom: 0;}
	.slide-control {width: 100%; margin-bottom: 10px;}
	.slide-list .swiper-slide h3 {font-size: 14px;}
}

@media(min-width:768px){
	.slide-control .slide-arrow .swiper-button-prev i,
	.slide-control .slide-arrow .swiper-button-next i {transition:.3s ease all;}
	.slide-control .slide-arrow .swiper-button-prev:hover i,
	.slide-control .slide-arrow .swiper-button-next:hover i {color: #212121;}
}


.view-info {padding-bottom: 50px; justify-content: space-between; border-bottom:1px solid #D2D2D7;}
.view-info .view-txt h5 {font-size: 22px; font-weight: 700;}
.view-info .view-txt span {display: inline-block; margin:0.4em 0 0.8em; color: #808080;}

.track-info .view_image {width: 48%;}
.track-info .view-txt {width: 47%;}

.track-info .music_link {margin-top: 10px;}
.track-info .music_link li {margin-right: 8px;}
.track-info .music_link li:last-child {margin-right: 0;}
.track-info .music_link img {max-width:100%; width: 32px; vertical-align:top;}

.channel-info .view_image {width: 38%;}
.channel-info .view-txt {display: flex; flex-direction: column; justify-content: space-between; width: 54%;}
.channel-info .sns-link {margin-top: 10px;}
.channel-info .sns-link li {margin-right: 8px;}
.channel-info .sns-link li:last-child {margin-right: 0;}
.channel-info .sns-link img {max-width:100%; vertical-align: top; width: 32px;}

@media(max-width:1080px){
	.view-info {padding-bottom: 8%;}
	.view-info .view-txt {width: 48%;}
	.view-info .view-txt h5 {font-size: 20px;}
}
@media(max-width:768px){
	.view-info .view_image {margin-bottom: 6%;}
	.view-info .view-txt h5 {font-size: 18px;}
	.track-info .view_image {width: 100%;}
	.track-info .view-txt {width: 100%;}
	.channel-info .view_image {width: 100%;}
	.channel-info .view-txt {width: 100%;}
}
@media(max-width:500px){
	.view-info .track-img {margin-bottom: 6%; width: 100%;}
	.view-info .view-txt {width: 100%;}
	.view-info .view-txt h5 {font-size: 16px;}
}

.related-video {padding-top: 48px;}
.related-video h3 {margin-bottom: 1.3em; font-size: 22px; font-weight: 700;}
.related-video li {margin-right: 2.6%; width: 31.6%;}
.related-video li:nth-child(3n) {margin-right: 0;}
.related-video li a {display: block;}
.related-video li figure {border-radius: 20px; overflow: hidden;}
.related-video li figure img {max-width:100%; vertical-align: top;}
.related-video li h4 {margin: 1.2em 0 0.3em; display: -webkit-box; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical; font-size: 17px; color: #212121;}
.related-video li span {color: #808080;}

@media(max-width:1080px){
	.related-video {padding-top: 8%;}
	.related-video li h4 {font-size: 16px;}
}
@media(max-width:768px){
	.related-video li h4 {font-size: 15px;}
}
@media(max-width:500px){
	.related-video li {width: 100%; margin-right: 0;}
	.related-video li {margin-bottom: 10%;}
	.related-video li:last-child {margin-bottom: 0;}
	.related-video li h4 {font-size: 14px;}
}


/***************** 42 페이지 CSS *****************/
.s42 {margin-top: 78px;}
.s42-1 {padding:79px 0 150px; background-color: #fafafa;}

.s42-2 {padding-bottom: 150px; background-color: #fafafa;}
.s42-2 .item-slide {margin-top: 56px;}

.s42-3 {padding:150px 0;}
.s42-3 .sct h4 {margin-bottom: 0.5em; font-size: 22px; font-weight: 700;}
.s42-3 .sct-wrap {margin-top: 50px; justify-content: space-between;;}
.s42-3 .sct-wrap .sct {margin-right: 2%; width: 32%;}
.s42-3 .sct-wrap .sct:last-child {margin-right: 0;}
.s42-3 ul {padding: 0 8px;}
.s42-3 li {position: relative; margin-bottom: 0.3em; padding-left: 12px; color: #808080;}
.s42-3 li:last-child {margin-bottom: 0;}
.s42-3 li:before {position: absolute; left: 0; top: 12px; content:''; display: inline-block; width: 4px; height: 4px; border-radius:100%; background-color: #808080;}
@media(max-width:1080px){
	.s42-3 .sct h4 {font-size: 20px;}
	.s42-3 li:before {top: 11px;}
}
@media(max-width:768px){
	.s42 {margin-top: 10%;}
	.s42-1 {padding:10% 0 18%;}
	.s42-2 {padding-bottom: 18%;}
	.s42-2 .item-slide {margin-top: 8%;}
	.s42-3 {padding:15% 0;}
	.s42-3 .sct-wrap {margin-top: 6%;}
	.s42-3 .sct-wrap .sct {margin: 0 0 8% 0; width: 100%;}
	.s42-3 .sct-wrap .sct:last-child {margin-bottom: 0;}
	.s42-3 .sct h4 {font-size: 18px;}
	.s42-3 li:before {top: 10px;}
}
@media(max-width:500px){
	.s42-3 .sct h4 {font-size: 16px;}
}
.s42-4 {padding-bottom: 150px;}

/************************* footer_inc 시작 *************************/
.footer_t {background: #212121; color: #fff; padding: 30px 0; font-size: 12px;}
.footer_t .inner {justify-content: space-between; align-items: flex-end;}
.footer_t p {font-weight: 300; }
.footer_txt {display: flex; flex-flow: column wrap; justify-content: space-between; margin-left: 15px;}
.footer_txt ul li a {font-size: 13px; font-weight: 500; color: #fff; margin-right: 5px;}
.footer_copyright {text-align: right;}
.footer_copyright a {color: #999;}

@media(max-width:768px){
.footer_t {padding: 20px 0;}
.footer_t .inner > div  {width: 100%;}
.footer_copyright  {text-align: left; display: flex; flex-flow: row wrap; padding-top: 3%; margin-top: 3%; border-top: 1px solid rgba(255,255,255,0.7);}
.footer_copyright p:first-child {order:2;}
}

@media(max-width:500px){
.footer_txt {width: 100%; margin-left: 0;}
.footer_txt p {padding:5px 0;}
}



/*family_inc.php의 스타일*/
.total								{width:100%;  cursor:pointer; }
.select_d							{border:1px solid #ddd; width:100%; line-height:30px; height:30px; padding-left:8px; position:relative; font-size:12px;}
.select_d span				{display:inline-block; position:absolute; right:10px;}

/* 패밀리사이트 클릭시 밑으로 떨어지는  CSS*/
/*
.select_op						{border:1px solid #ddd;border-top:none; width:168px; margin-top:0px; display:none; position:absolute; z-index:3px; background:#fff; font-size:11px;}
*/

/* 패밀리사이트 클릭시 위로 올라오는 CSS*/
.select_op						{border:1px solid #ddd;border-bottom:none; width:160px; margin-top:0px; display:none; position:absolute; z-index:3px; background:#fff; font-size:11px;bottom:30px;}

.select_op	li				{line-height:30px;height:30px; border:0px solid red; padding-left:8px;}
.select_op	li		a		{cursor:pointer; width:100%; height:30px; display:inline-block;letter-spacing:-0.3px;}
.select_op	li:hover	{background:#eee;}
.a_focus							{background:#8e8e8e; color:#fff !important;}





/************************* footer_inc 끝 *************************/



/************************* left_lnb_inc 시작 *************************/
.left_lnb		{  }
/************************* left_lnb_inc 끝 *************************/



/************************* ui.totop 시작 *************************/
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url("./img/ui.totop6.png") no-repeat left top;
}

#toTopHover {
	background:url("./img/ui.totop6.png") no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}
/************************* ui.totop 끝 *************************/