@charset "utf-8";

.a{
	transition : all 0.5s ease;
    -webkit-transition : all 0.5s ease;
}


.user #container .board_top{position:relative; z-index:200; padding:0; margin-bottom:20px; text-align:center; font-family:"Noto Sans KR";}
.user #container .board_top .ti{float:left; position:relative; line-height:60px; font-weight:400; font-size:16px; color:#585858;}
.user #container .board_top .ti span{color:#000;}
.user #container .board_top>.lay{display:block; position:relative; float:right;}
.user #container .board_top:after{content:""; display:block; clear:both;}
.user #container .board_top .select,
.user #container .board_top input[type="text"],
.user #container .board_top input[type="submit"]{display:inline-block; height:60px; margin:0; vertical-align:top;}
.user #container .board_top .select{float:left; position:relative; width:200px;}
.user #container .board_top .select .lay{width:100%; border:1px solid #e1e1e1; background-color:#fff; box-sizing:border-box;}
.user #container .board_top .select .lay a{display:block; position:relative; width:100%; height:58px; line-height:58px; padding:0 40px 0 17px; text-decoration:none; text-align:left; font-weight:400; font-size:15px; color:#484848; box-sizing:border-box;}
.user #container .board_top .select .lay a:hover{color:#000;}
.user #container .board_top .select .lay>strong{display:block; width:100%; height:100%;}
.user #container .board_top .select .lay>strong a:after{
	content:""; display:block; position:absolute; right:18px; top:50%; width:14px; height:8px; margin-top:-4px; background:url(/media/images/content/select_bul.png) no-repeat center center;
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
.user #container .board_top .select .lay .lists{display:none;}
.user #container .board_top .select .lay .lists ul li{}
.user #container .board_top .select .lay .lists ul li a{display:block; padding-right:17px; border-top:1px dotted #e1e1e1;}
.user #container .board_top .select .lay .lists ul li a:hover{background-color:#efefef;}
.user #container .board_top input[type="text"]{float:left; width:246px; padding:0 20px; border:1px solid #e1e1e1; border-left:none; background-color:#fff; box-sizing:border-box;}
.user #container .board_top input[type="submit"]{overflow:hidden; float:left; width:60px; height:60px; text-indent:-1000px; background:url(/media/images/content/board_top_search_icon.png) no-repeat center center;}

.user #container .board_top .select.on .lay>strong a:after{
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
}
.user #container .board_top .select.on .lay .lists{display:block;}

@media screen and (max-width: 700px){
	.user #container .board_top .ti{float:none; display:block; line-height:20px; margin-bottom:10px; text-align:left;}
	.user #container .board_top>.lay{float:none; position:relative; width:100%; height:124px; padding:64px 60px 0 0; box-sizing:border-box;}
	.user #container .board_top .select{float:none; position:absolute; left:0; top:0; z-index:100; width:100%;}
	.user #container .board_top input[type="text"]{width:100%; border-left:1px solid #e1e1e1;}
	.user #container .board_top input[type="submit"]{position:absolute; right:0; bottom:0; z-index:0;}
}
@media screen and (max-width: 450px){
	.user #container .board_top .ti{font-size:13px;}
	.user #container .board_top>.lay{height:104px; padding:54px 50px 0 0;}
	.user #container .board_top .select{height:50px; line-height:50px;}
	.user #container .board_top .select .lay a{height:50px; line-height:48px;}
	.user #container .board_top input[type="text"]{height:50px;}
	.user #container .board_top input[type="submit"]{position:absolute; right:0; bottom:0; z-index:0; width:50px; height:50px;}
}



.user #con_board ul:after{content:""; display:block; clear:both;}
.user #con_board ul li{float:left; width:33.3%; margin-bottom:30px; box-sizing:border-box;}
.user #con_board ul li:nth-child(3n+1){padding:15px 20px 15px 0px;}
.user #con_board ul li:nth-child(3n+2){padding:15px 10px 15px 10px;}
.user #con_board ul li:nth-child(3n+3){padding:15px 0px 15px 20px;}
.user #con_board ul li a{display:block;}
.user #con_board ul li .photos{overflow:hidden; display:block; position:relative; width:100%; height:254px;}
.user #con_board ul li.movie .photos:after{content:""; display:block; position:absolute; right:20px; bottom:20px; z-index:10; width:50px; height:50px; background:url(/media/images/content/board_movie_simbol.png) no-repeat center center;}
.user #con_board ul li .photos span{display:block; position:absolute; left:50%; top:0; z-index:0; width:2000px; height:100%; margin-left:-1000px; text-align:center;}
.user #con_board ul li .photos span img{height:100%;}
.user #con_board ul li .ti{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:20px; padding:20px 0; font-size:19px; color:#010101;}
.user #con_board ul li .etc{display:block;}
.user #con_board ul li .etc:after{content:""; display:block; clear:both;}
.user #con_board ul li .etc span{display:block; float:left; position:relative; font-size:14px; color:#818181;}
.user #con_board ul li .etc span:not(:nth-child(1)){padding-left:21px;}
.user #con_board ul li .etc span:not(:nth-child(1)):before{content:""; display:block; position:absolute; left:10px; top:4px; width:1px; height:14px; background-color:#d2d2d2;}
.user #con_board ul li .etc span.names{color:#7d7d7d;}
@media screen and (max-width: 850px){
	.user #con_board ul li{margin-bottom:20px;}
	.user #con_board ul li:nth-child(3n+1){padding:7px 10px 7px 0px;}
	.user #con_board ul li:nth-child(3n+2){padding:7px 5px 7px 5px;}
	.user #con_board ul li:nth-child(3n+3){padding:7px 0px 7px 10px;}
	.user #con_board ul li .photos{height:162px;}
	.user #con_board ul li .ti{line-height:16px; padding:15px 0; font-size:15px;}
	.user #con_board ul li .etc span{font-size:12px;}
	.user #con_board ul li .etc span:not(:nth-child(1)):before{height:11px;}
}
@media screen and (max-width: 600px){
	.user #con_board ul li{width:50%;}
	.user #con_board ul li:nth-child(2n+1){padding:10px 10px 10px 0px;}
	.user #con_board ul li:nth-child(2n+2){padding:10px 0px 10px 10px;}
	.user #con_board ul li.movie .photos:after{width:40px; height:40px; background-size:100% auto;}
}
@media screen and (max-width: 400px){
	.user #con_board ul li:nth-child(2n+1){padding:5px 5px 5px 0px;}
	.user #con_board ul li:nth-child(2n+2){padding:5px 0px 5px 5px;}
	.user #con_board ul li .photos{height:115px;}
	.user #con_board ul li.movie .photos:after{right:10px; bottom:10px;}
	.user #con_board ul li .ti{padding:10px 0 5px 0; font-size:13px;}
	.user #con_board ul li .etc span{font-size:10px;}
	.user #con_board ul li .etc span:not(:nth-child(1)){padding-left:14px;}
	.user #con_board ul li .etc span:not(:nth-child(1)):before{left:7px; top:4px; height:9px;}
	.user #con_board ul li.movie .photos:after{width:30px; height:30px;}
}





/* Ç÷¯±×ÀδçÁø ¼Û µè±â */
.plugin_song {text-align:center;}
.downbtn_wrap {text-align: center;margin-top: 30px;}


/* ij¸¯ÅÍ */
.bx_symbol {margin-top:30px;overflow: hidden;}
.bx_symbol.col2 li {float: left;width: 48%;margin:0 4% 5% 0;}
.bx_symbol.col2 li:nth-child(even) {margin: 0 0 5% 0;}
.bx_symbol li figure {width: 100%;padding: 25px 20px;border: 1px solid #ddd;text-align: center;margin: 0;box-sizing: border-box;}
.bx_symbol li figure img{max-width: 100%;}
.bx_symbol li .downbtn_wrap b {text-align: center; display: block;margin: 10px 0;font-size: 19px;color: #000;}


/*0408 캐릭터 소개*/
.tab-list {display: table;table-layout: fixed;width: 100%;text-align: center;border: 1px solid #d9d9d9;}
.tab-list .tab-menu {display: table-cell;padding: 20px 0;border-right: 1px solid #d9d9d9;font-size: 16px;cursor: pointer;}
.tab-list .tab-menu:last-child {border-right: 0;}
.tab-list .tab-menu.on {background: #2778c3;border: 1px solid #2778c3;color: #fff;}
.wrap-tab-cont .tab-cont {display: none;}
.wrap-tab-cont .tab-cont.on {display: block;}

.topbox0408 {position: relative;padding: 50px;background: linear-gradient(90deg, rgba(249,251,237,1) 0%, rgba(237,250,248,1) 100%);border-radius: 10px;}
.topbox0408:after {content: '';display: block;position: absolute;bottom: 0;right: 0;width: 466px;height: 355px;background: url(../images/content/0408_topbox_bg.png) no-repeat;}
.topbox0408 .tit {margin-bottom: 50px;font-size: 36px;color: #2778c3;letter-spacing: -1px;}
.list-character {position: relative;z-index: 1;}
.list-character li {margin-bottom: 15px;}
.list-character li strong {display: inline-block;width: 125px;margin-right: 25px;padding: 3px 0;background-color: #2778c3;border-radius: 15px;font-size: 16px;text-align: center;color: #fff;}
.list-character li span {color: #000;font-size: 16px;}
.list-character li .list-blue {display: inline-block;margin: 0;color: #2778c3;font-weight: bold;}

.box-tit-0408 {margin-bottom: 20px;}
.box-tit-0408 .num-big {margin-right: 20px;font-size: 50px;color: #4db7f4;vertical-align: baseline;}
.box-tit-0408 span {font-size: 26px;vertical-align: super;}
.box-rounded {border-radius: 8px;padding: 35px;height: 140px;}
.box-rounded p {margin: 0;font-size: 16px;color: #000;line-height: 1.7;}

.list-history {font-size: 16px;}
.list-history strong {position: relative;margin-right: 30px;padding-left: 10px;font-size: 18px;color: #000;}
.list-history strong:before {content: '';display: block;position: absolute;top: 13px;left: 0;width: 3px;height: 3px;margin-right: 10px;background-color: #acacac;}

@media screen and (max-width: 1280px){
	.wrap-tab {width: 90%;margin: 0 auto;}
	.list-character li {margin-bottom: 30px;}
	.list-character li span {display: block;margin-top: 7px;}
	.box-rounded {height: 200px;}
	.box-tit-0408 .num-big {font-size: 40px;}
	.box-tit-0408 span {font-size: 22px;}
}

@media screen and (max-width: 1024px){
	.topbox0408:after {width: 40%;height: 270px;background-size: contain;}
	.topbox0408 .tit {margin-bottom: 20px;font-size: 26px;}
	.bx_symbol.col2.intro li {width: 100%;}
	.box-rounded {height: auto;padding: 30px;}

}

@media screen and (max-width: 768px){
	.topbox0408 {padding: 35px;}
	.topbox0408:after {display: none;}
	.downbtn_wrap {margin-top: 20px;}
	.bx_symbol li .downbtn_wrap b {font-size: 17px;}
	.bx_symbol li .btn.btn-file {margin-bottom: 5px;}
	.box-tit-0408 {margin-bottom: 10px;}
	.bx_symbol.col2.list-history li {width: 100%;margin-bottom: 20px !important;}
}

@media screen and (max-width: 414px){
	.box-tit-0408 .num-big {font-size: 32px;}
	.box-tit-0408 span {font-size: 18px;}
	.list-character li strong {margin-bottom: 5px;}
	.list-history strong {display: block;}
}

.content_vr_wrap {}

.vr_content01 {padding: 0 15px;}
.vr_content01 > p {font-size:18px; word-break: break-all;}






.vr_box_01 {}
.vr_box_01 > p {text-align:center; font-size:23px;}
.vr_box_01 img {display:block; margin:0 auto; max-width:100%; height:auto;}
.vr_box_01 .vr_btn {text-align:center; margin-top:50px; margin-bottom:50px;}
.vr_box_01 a:hover {background:#0c4f78; transition: all 0.4s;}
.vr_box_01 a {    padding: 0 20px;
    color: #fff;
    background-color: #35a4e9;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    box-shadow: 10px 10px 20px rgb(0 0 0 / 10%);
    -webkit-box-shadow: 10px 10px 20px rgb(0 0 0 / 10%);
    /* margin: 0 auto; */
    text-align: center;
    /* display: inline-block; */
    height: 40px;
    display: inline;
    display: inline-block;
    font-size: 20px;
    line-height: 35px;}

    @media all and (max-wdith:1280px) {
	 .vr_content01 {padding:0 15px !important;}
}

    @media all and (max-width:680px) {
    	.vr_box_01 p {font-size:22px;}
    	.vr_box_01 a {font-size:18px;}
    	.vr_content01 > p {font-size:16px !important;}
    	.vr_content01 {padding: 0 0px;}
    }

    /* Scroll Animation (sa, 스크롤 애니메이션) */
 .sa {
    opacity: 0;
    transition: all .5s ease;
  }
  /* 스크롤 애니메이션 up  */
  .sa-up {
    transform: translate(0, 100px);
  }
  /* 스크롤 애니메이션 down  */
  .sa-down {
    transform: translate(0, -100px);
  }
  /* 스크롤 애니메이션 right  */
  .sa-right {
    transform: translate(-100px, 0);
  }
  /* 스크롤 애니메이션 left  */
  .sa-left {
    transform: translate(100px, 0);
  }
  /* 스크롤 애니메이션 rotate왼쪽  */
  .sa-rotateL {
    transform: rotate(180deg);
  }
  /* 스크롤 애니메이션 rotate오른쪽  */
  .sa-rotateR {
    transform: rotate(-180deg);
  }
  /* 스크롤 애니메이션 확대  */
  .sa-scaleUp {
    transform: scale(.5);
  }
  /* 스크롤 애니메이션 rotate축소  */
  .sa-scaleDown {
    transform: scale(1.5);
  }
  /* 스크롤 애니메이션 show  */
  .sa.show {
    opacity: 1;
    transform: none;
  }