@charset "utf-8";
#sub #container {padding:100px 0 0;}
#sub #contents {padding:60px 0 120px;}
#sub #contents .inner {width:100%; max-width:1200px; margin:0 auto; transition: all 0.3s; box-sizing:border-box;}

/*history*/
.history .txt {color:#666; font-size:18px; line-height:36px; font-weight:300; letter-spacing:-0.05em; text-align:center; word-break:keep-all;}
.history .history-list {margin:80px 0 0; }
.history .history-list > li {position:relative; min-height:134px; padding:49px 80px 49px 290px; margin:10px 0 0; border:1px solid #c5cad3; box-sizing:border-box;}
.history .history-list > li:first-child {margin:0; border-top:2px solid #a7ce38;}
.history .history-list > li strong {position:absolute; top:45px; left:80px; color:#1e1f22; font-size:46px; font-family:'Jost', sans-serif; line-height:1;}
.history .history-list > li ul li {position:relative; padding:0 0 0 15px; margin:13px 0 0; color:#888; font-size:16px; font-weight:300; line-height:1.3;}
.history .history-list > li ul li::after {content:'ㆍ'; position:absolute; top:0; left:0; font-weight:800; color:#a7ce38;}
.history .history-list > li ul li:first-child {margin:0;}

/*location*/
.location .map {height:480px;}
.location .info {margin:60px 0 0; text-align:center;} 
.location .info address {color:#1e1f22; font-size:28px; word-break:keep-all; letter-spacing:-0.05em; font-style:normal;}
.location .info p {margin:25px 0 0;}
.location .info p span {display:inline-block; color:#9da5ab; font-size:20px; line-height:1;}
.location .info p span:first-child::after {content:''; display:inline-block; width:1px; height:16px; margin:-1px 20px 0; background-color:#dcdcdc; vertical-align:middle;}

/* game */
.game .tit01 {margin:180px 0 60px; color:#fff; font-size:46px; font-weight:700; font-family:'Jost', sans-serif; text-align:center; line-height:1; text-transform:uppercase;}
.game .tit01:first-child {margin-top:0;}
.game .tit02 {margin:75px 0 50px; color:#fff; font-size:24px; font-weight:700; letter-spacing:-0.05em;}
.game .video-container {margin:60px 0 0;}
.game .story-area {text-align:center; letter-spacing:-0.05em;}
.game .story-area .tit {display:block; margin:55px 0 30px; color:#fff; font-size:28px;}
.game .story-area .tit:first-child {margin-top:0;}
.game .story-area p {color:#888; font-size:16px; line-height:30px;}
.game .info-box {text-align:center; font-size:0;}
.game .info-box li {display:inline-block; width:calc((100% - 60px) / 4); margin:0 0 0 20px;  background-color:#141514; border:1px solid #3f3f3f; color:#fff; font-size:16px; line-height:32px; letter-spacing:-0.05em; box-sizing:border-box;}
.game .info-box li > div {display:table; width:100%; min-height:200px; padding:10px; box-sizing:border-box;}
.game .info-box li:first-child {margin:0;}
.game .info-box li p {display:table-cell; vertical-align:middle; word-break:keep-all;}
.game .txt-area {color:#fff; font-size:18px; line-height:32px; letter-spacing:-0.05em; text-align:center;}

.game01 .character-area {padding:0 15px; text-align:center;}
.game01 .character-area img {max-width:100%;}

.game02 .bg-cont-area {margin:180px 0 0; height:1255px; background-image:url('../images/sub/img-game02-bg-cont.png'); background-position:center 100%; background-repeat:no-repeat;}
.game02 .bg-cont-area img {display:none;}

.game03 .character-area {margin:80px 0 0;}
.game03 .character-area ul {overflow:hidden;}
.game03 .character-area ul li {float:left; width:25%; text-align:center;}
.game03 .character-area ul li .name {line-height:1;}
.game03 .character-area ul li .name strong {color:#fff; font-size:24px; font-weight:700; letter-spacing:-0.05em;}
.game03 .character-area ul li .name em {display:block; margin:15px 0 0; color:#666; font-size:20px; font-style:normal;}
.game03 .character-area ul li .img-area {display:table; width:100%; margin:20px 0 30px;}
.game03 .character-area ul li .img-area p {display:table-cell; vertical-align:bottom;}
.game03 .character-area ul li:nth-child(1) .img-area {padding-top:10%; text-align:left;}
.game03 .character-area ul li:nth-child(1) .img-area img {max-width:95%}
.game03 .character-area ul li:nth-child(2) .img-area {padding-top:10%}
.game03 .character-area ul li:nth-child(2) .img-area img {max-width:84.6%}
.game03 .character-area ul li:nth-child(3) .img-area img {max-width:69.33%}
.game03 .character-area ul li:nth-child(3) .img-area {padding-top:13.33%}
.game03 .character-area ul li:nth-child(4) .img-area img {max-width:92.33%}
.game03 .character-area ul li .img-area:nth-child(4) {text-align:right;}
.game03 .character-area ul li p {color:#888; font-size:16px; font-weight:300; letter-spacing:-0.05em;}

.game04 .story-area {margin:175px 0 0;}
.game04 .img-txt-list {margin:180px 0}
.game04 .logo-box {width:300px; height:100px; padding:26px 0 0; margin:0 auto; border:1px solid rgb(255, 255, 255, 0.2); text-align:center; box-sizing:border-box;}
.game04 .logo-box img {width:204px; height:47px;}

.game04 .logo-box2{ margin-top:30px; font-size:0; text-align:center; }
.game04 .logo-box2 a{ display:inline-block; vertical-align:top; margin:0 15px;}

.sns-link-area {text-align:center; font-size:0;}
.sns-link-area li {display:inline-block; margin:0 0 0 60px;}
.sns-link-area li:first-child {margin:0;}
.sns-link-area li a {display:block;}
.sns-link-area li a p {margin:24px 0 0; color:#fff; font-size:18px; font-weight:300;}

.img-txt-list ul {overflow:hidden;}
.img-txt-list ul li {float:left; width:calc((100% - 60px) / 3); margin:45px 0 0 30px;}
.img-txt-list.only-img ul li {margin:30px 0 0 30px;}
.img-txt-list ul li .img-area img {width:100%; max-width:100%;}
.img-txt-list ul li .txt-area {margin:30px 0 0; letter-spacing:-0.05em;}
.img-txt-list ul li .txt-area strong {color:#fff; font-size:18px;}
.img-txt-list ul li .txt-area strong + p {margin:15px 0 0;}
.img-txt-list ul li .txt-area p {color:#888;}

/* 동영상 영역 */
.video-container {position:relative; width:100%; height:auto; padding-top:56.25%;}
.video-container iframe,
.video-container video {z-index:1; top:0; left:0; position:absolute; width:100%; height:100%; border:0}


/*official*/
.official {padding:40px 0 0; border-top:2px solid #1f2023;}
.official iframe {display:block; width:750px; height:700px; margin:0 auto;}

/* careers */
.careers {letter-spacing:-0.05em;}
.careers .slogan {padding:0 0 60px; border-bottom:1px solid #1e1f22; color:#1e1f22; font-size:34px; letter-spacing:-0.05em; text-align:center;}
.careers .slogan strong {color:#a7ce38;}
.careers .slogan + .tit  {margin:80px 0 0;}
.careers .tit {margin:100px 0 0; color:#1e1f22; font-size:30px; font-weight:700; letter-spacing:-0.05em;}
.careers .welfare-list {overflow:hidden; margin:50px 0 0; text-align:center;}
.careers .welfare-list li {float:left; width:20%; }
.careers .welfare-list li strong {color:#1e1f22; font-size:20px; font-weight:500;}
.careers .welfare-list li p {margin:20px 0 0; color:#888; font-size:16px; line-height:28px; word-break:keep-all;}
.careers .welfare-list li strong::before {content:''; display:block; width:80px; height:80px; margin:0 auto 20px; background-color:#f1f1f1; border-radius:50%; background-repeat:no-repeat; background-position:50% 50%;}
.careers .welfare-list li:nth-child(1) strong::before {background-image:url('../images/sub/careers-icon01.png');}
.careers .welfare-list li:nth-child(2) strong::before {background-image:url('../images/sub/careers-icon02.png');}
.careers .welfare-list li:nth-child(3) strong::before {background-image:url('../images/sub/careers-icon03.png');}
.careers .welfare-list li:nth-child(4) strong::before {background-image:url('../images/sub/careers-icon04.png');}
.careers .welfare-list li:nth-child(5) strong::before {background-image:url('../images/sub/careers-icon05.png');}
.careers .step {margin:60px 0 0; text-align:center; font-size:0;}
.careers .step li {display:inline-block;overflow:hidden; position:relative; width:16.5%; margin:0 0 0 80px; border-radius:50%; border:1px solid #b0b6bb; text-align:center;}
.careers .step li:first-child {margin:0;}
.careers .step li::after {content:''; display:block;  padding-top:100%;}
.careers .step li em {position:absolute; top:-18px; left:0; width:100%; font-size:54px; opacity:0.1; font-weight:700; font-family:'Jost','noto', sans-serif; font-style:normal;}
.careers .step li p {position:absolute; top:50%; left:0; width:100%; padding:0 30px; color:#1e1f22; font-size:20px; line-height:30px; word-break:keep-all; box-sizing:border-box; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%);}
.careers .step li p span {display:block; color:#888; font-size:16px; font-weight:300;}
.careers .box-bg-gray {padding:40px 60px; margin:60px 0 0; background-color:#f1f1f1; letter-spacing:-0.05em; box-sizing:border-box;}
.careers .box-bg-gray .box-tit {color:#1e1f22; font-size:18px; font-weight:500;}
.careers .box-bg-gray ul {margin:25px 0 0;}
.careers .box-bg-gray ul li {position:relative; padding:0 0 0 8px; margin:15px 0 0; color:#666; font-size:15px; line-height:1.2;}
.careers .box-bg-gray ul li:first-child {margin:0;}
.careers .box-bg-gray ul li::after {content:'-'; position:absolute; top:0; left:0; }

.announcement-list {margin:40px 0 0; border-top:2px solid #1f2023; letter-spacing:-0.05em; text-align:center;}
.announcement-list .thead-area {overflow:hidden;}
.announcement-list .thead-area span {float:left; color:#1e1f22; font-size:18px; line-height:60px;}
.announcement-list .tbody-area {border-top:1px solid #1e1f22;}
.announcement-list .tbody-area .title-area {position:relative; border-bottom:1px solid #dfe1e7; color:#888; font-size:16px; line-height:60px; box-sizing:border-box;}
.announcement-list .tbody-area .title-area .title {float:left; margin:0 0 0 100px; color:#1e1f22; font-weight:500; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.announcement-list .tbody-area .title-area ul {overflow:hidden;}
.announcement-list .tbody-area .title-area ul li {float:left;}
.announcement-list .tbody-area .title-area ul li.division {position:absolute; top:0; left:0;}
.announcement-list .tbody-area .contents-area {display:none; padding:40px; border-bottom:1px solid #dfe1e7; text-align:left; font-size:16px; background-color:#f6f8fa; box-sizing:border-box; line-height:28px;}
.announcement-list .division {width:100px;}
.announcement-list .title {width:calc(100% - 450px); padding:0 40px; box-sizing:border-box;}
.announcement-list .type {width:120px;}
.announcement-list .date {width:230px;}
.announcement-list .no_data {padding:100px 0;}

.btn-area {margin:50px 0 0;}
.btn-area a {display:inline-block; letter-spacing:-0.05em;}
.btn-area .btn-green {padding:0 45px; background-color:#a7ce38; border-radius:32px;}
.btn-area .btn-green span {padding:0 25px 0 0; color:#fff; font-size:18px; font-weight:500; line-height:64px; background-image:url('../images/icon/icon-arrow-white.png'); background-position:97% 50%; background-repeat:no-repeat; transition: all 0.3s;}
.btn-area .btn-green:hover span {background-position:100% 50%;}


@media all and (max-width:1350px){
  #sub #contents .inner {padding:0 15px;}   

  .game02 .bg-cont-area {height:auto; padding-bottom:59%; background-size:100%;}
}


@media all and (min-width:1024px){
    .img-txt-list ul li:nth-child(3n+1),
    .img-txt-list.only-img ul li:nth-child(3n+1) {margin-left:0; clear:both;}
    .img-txt-list ul li:nth-child(-n+3), 
    .img-txt-list.only-img ul li:nth-child(-n+3) {margin-top:0;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
    #sub #container {padding:40px 0 0;}
    #sub #contents {padding:30px 0 50px;}

    /*history*/
    .history .txt {font-size:13px; line-height:20px;}
    .history .history-list {margin:30px 0 0; }
    .history .history-list > li {min-height:auto; padding:20px 24px 24px; margin:5px 0 0;}
    .history .history-list > li strong {position:static; font-size:30px;}
    .history .history-list > li ul {margin:15px 0 0;}
    .history .history-list > li ul li {padding:0 0 0 15px; margin:9px 0 0; font-size:12px; line-height:1.3;}

    /*location*/
    .location .map {height:290px;}
    .location .info {margin:25px 0 0;} 
    .location .info address {font-size:18px; line-height:26px;}
    .location .info p {margin:18px 0 0;}
    .location .info p span {display:block; font-size:15px; line-height:23px;}
    .location .info p span:first-child::after {display:none;}

    /* game */
    .game .tit01 {margin:60px 0 30px; font-size:25px;}
    .game .tit02 {margin:40px 0 25px; font-size:18px;}
    .game .video-container {margin:30px 0 0;}
    .game .story-area .tit {margin:30px 0 20px; font-size:18px;}
    .game .story-area p {font-size:12px; line-height:18px;}
    .game .info-box li {width:100%; margin:5px 0 0; font-size:13px; line-height:20px;}
    .game .info-box li > div {display:block; min-height:auto; padding:25px 20px;}
    .game .info-box li p {display:block;}
    .game .txt-area {font-size:13px; line-height:20px;}

    .game02 .bg-cont-area {margin:60px 0 0;}

    .game03 .character-area {margin:40px 0 0;}
    .game03 .character-area ul li .name strong {font-size:18px;}
    .game03 .character-area ul li .name em {margin:10px 0 0; font-size:15px;}
    .game03 .character-area ul li .img-area {margin:15px 0 16px;}
    .game03 .character-area ul li p {font-size:12px; line-height:18px;}

    .game04 .story-area {margin:60px 0 0;}
    .game04 .img-txt-list {margin:60px 0}
    .game04 .logo-box {width:180px; height:60px; padding:13px 0 0;}
    .game04 .logo-box img {width:138px; height:32px;}

	.game04 .logo-box2{ margin-top:20px; }
	.game04 .logo-box2 a{ margin:0 10px;}
	.game04 .logo-box2 a:nth-of-type(1) img{ width:60px; }
	.game04 .logo-box2 a:nth-of-type(2) img{ width:66px; }

    .sns-link-area li {margin:0 0 0 30px;}
    .sns-link-area li a img {max-width:50px;}
    .sns-link-area li a p {margin:10px 0 0; font-size:13px;}
    
    .img-txt-list ul li {width:calc((100% - 20px) / 2); margin:30px 0 0 20px;}
    .img-txt-list.only-img ul li {margin:20px 0 0 20px;}
    .img-txt-list ul li .txt-area {margin:15px 0 0;}
    .img-txt-list ul li .txt-area strong {font-size:13px;}
    .img-txt-list ul li .txt-area strong + p {margin:10px 0 0;}

    /*official*/
    .official {overflow-x: scroll; padding:40px 0 0; border-top:2px solid #1f2023;}

    /* careers */
    .careers .slogan {padding:0 0 25px; font-size:18px; line-height:26px;}i8
    .careers .slogan + .tit  {margin:50px 0 0;}
    .careers .tit {margin:50px 0 0; font-size:17px; text-align:center;}
    .careers .welfare-list {margin:20px 0 0;}
    .careers .welfare-list li {width:33.33%;}
    .careers .welfare-list li:nth-child(4) {clear:both}
    .careers .welfare-list li:nth-child(n+4) {margin:25px 0 0;}
    .careers .welfare-list li strong {font-size:13px;}
    .careers .welfare-list li p {margin:11px 0 0; font-size:12px; line-height:18px;}
    .careers .welfare-list li strong::before {width:60px; height:60px; margin:0 auto 15px;}
    .careers .welfare-list li:nth-child(1) strong::before {background-size:28.5px;}
    .careers .welfare-list li:nth-child(2) strong::before {background-size:24px;}
    .careers .welfare-list li:nth-child(3) strong::before {background-size:31px;}
    .careers .welfare-list li:nth-child(4) strong::before {background-size:28.5px;}
    .careers .welfare-list li:nth-child(5) strong::before {background-size:28.5px;}
    .careers .step {margin:25px 0 0;}
    .careers .step li {width:140px; margin:0 0 0 20px;}
    .careers .step li em {top:-11px; font-size:34px;}
    .careers .step li p {padding:0; font-size:15px; line-height:24px;}
    .careers .step li p span {font-size:12px;}
    .careers .box-bg-gray {padding:20px; margin:30px 0 0;}
    .careers .box-bg-gray .box-tit {font-size:13px;}
    .careers .box-bg-gray ul {margin:15px 0 0;}
    .careers .box-bg-gray ul li {padding:0 0 0 6px; margin:10px 0 0; font-size:11px; line-height:18px;}

    .announcement-list {margin:20px 0 0; border-top:2px solid #1f2023;}
    .announcement-list .thead-area {display:none;}
    .announcement-list .tbody-area .title-area {padding:15px 5px; font-size:12px; line-height:1;}
    .announcement-list .tbody-area .title-area .title {float:none; display:block; margin:0 0 10px;}
    .announcement-list .tbody-area .title-area ul li::before {content:''; display:inline-block; width:1px; height:9px; margin:0 9px; background-color:#cfcfcf; vertical-align:middle;}
    .announcement-list .tbody-area .title-area ul li:first-child {margin:0;}
    .announcement-list .tbody-area .title-area ul li:first-child::before {display:none;}
    .announcement-list .tbody-area .title-area ul li.division {position:static;}
    .announcement-list .tbody-area .contents-area {padding:15px 5px; font-size:12px; line-height:19px;}
    .announcement-list .division {width:auto;}
    .announcement-list .title {width:100%; padding:0;}
    .announcement-list .type {width:auto;}
    .announcement-list .date {width:auto;}
    .announcement-list .no_data {padding:50px 0;}

    .btn-area {margin:25px 0 0;}
    .btn-area .btn-green {padding:0 25px; border-radius:18px;}
    .btn-area .btn-green span {padding:0 15px 0 0; font-size:13px; line-height:37px; background-size:5px; background-position:100% 50%;}
}

@media screen and (min-width:768px) and (max-width:1024px) { 
    .img-txt-list ul li:nth-child(2n+1),
    .img-txt-list.only-img ul li:nth-child(2n+1) {margin-left:0; clear:both;}
    .img-txt-list ul li:nth-child(-n+2),
    .img-txt-list.only-img ul li:nth-child(-n+2) {margin-top:0;}
}

/* 모바일 */
@media all and (max-width:768px){
    .game02 .bg-cont-area {height:auto; padding:0; background-image:none;}
    .game02 .bg-cont-area img {display:block; width:100%; max-width:100%;}

    .game03 .character-area ul li {width:50%;}
    .game03 .character-area ul li:nth-child(1) .img-area {padding-top:10%;}
    .game03 .character-area ul li:nth-child(3) {clear:both;}
    .game03 .character-area ul li:nth-child(3),
    .game03 .character-area ul li:nth-child(4) {margin:50px 0 0;}

    .img-txt-list ul li {width:100%; margin:30px 0 0;}
    .img-txt-list.only-img ul li {margin:10px 0 0;}

    .careers .step {margin:5px 0 0;}
    .careers .step li {width:38%; min-width:110px; margin:20px 0 0 20px;}
    .careers .step li:nth-child(odd) {margin-left:0;}
}

/* 약관 */
.yg{font-size:14px; line-height:24px; word-break:keep-all}
.yg h2{margin-top:70px; font-size:22px; font-weight:700; color:#333;}
.yg h3{margin-top:40px; margin-bottom:5px; font-size:18px; font-weight:700; color:#444;}
.yg h4{margin-top:20px; margin-bottom:5px; font-size:16px; font-weight:500; color:#555;}
.yg p{margin:5px 0;}

.fly_w{margin-top:10px; background:#f2f2f2; box-sizing:border-box; padding:20px;}
.fly_w > li:first-child{margin-top:0;}
.fly_w > li > ul{margin-top:0; padding:0 0 0 15px; background:none;}
.fly_w > li > ul > li{padding:0; margin:0;}
.fly_w > li > ul > li:before{display:none;}
.fly_w > li > ol{margin-top:0; padding:0 0 0 15px; background:none;}
.fly_w > li > ol > li{padding:0; margin:0;}
.fly_w > li > ol > li:before{display:none;}

ul.fly_w > li{position:relative; padding-left:10px; margin-top:5px; color:#777;}
ul.fly_w > li:before{content:'-'; position:absolute; top:0; left:0;}
ol.fly_w > li{position:relative; margin-top:5px; color:#777;}

.yg_table{overflow:hidden; margin-top:15px;}
.yg_table div{float:right; width:calc(50% - 10px);}
.yg_table div:first-child{float:left;}
.yg_table div > strong{display:block; text-align:center; background:#333; color:#fff; font-size:15px; font-weight:500; padding:15px 0;}
.yg_table div table{width:100%; box-sizing:border-box;}
.yg_table div table thead th{text-align:center; color:#333; font-weight:700; border-bottom:1px solid #ddd; padding:10px 0; background:#f2f2f2;}
.yg_table div table tbody th{text-align:center; border-bottom:1px solid #ddd; color:#333; padding:10px 0; font-weight:500; background:#f9f9f9}
.yg_table div table tbody td{border-bottom:1px solid #ddd; padding:5px 20px; border-left:1px solid #ddd;}

.yg_select { padding-left:10px; margin-top: 20px; width: 320px; height: 40px; font-size: 14px; border-color: #bbb;}

@media all and (max-width:1024px){
  .yg{font-size:12px; line-height:18px;}
  .yg h2{margin-top:50px; font-size:18px;}
  .yg h3{margin-top:20px; margin-bottom:5px; font-size:15px;}
  .yg h4{margin-top:10px; margin-bottom:5px; font-size:14px;}
  .yg p{margin:5px 0;}

  .fly_w{margin-top:5px; padding:10px;}
  .fly_w > li > ul{padding:0 0 0 5px;}
  .fly_w > li > ol{padding:0 0 0 5px;}

  ul.fly_w > li{padding-left:10px; margin-top:3px;}
  ol.fly_w > li{margin-top:3px;}

  .yg_table{margin-top:10px;}
  .yg_table div{width:100%; margin-top:10px;}
  .yg_table div:first-child{margin-top:0;}
  .yg_table div > strong{font-size:12px; padding:8px 0;}
  .yg_table div table{ table-layout:fixed; }
  /* .yg_table div table colgroup col:nth-of-type(1){width:80px !important;}
  .yg_table div table colgroup col:nth-of-type(2){width:calc(100% - 80px) !important;} */
  .yg_table div table thead th{padding:5px 0;}
  .yg_table div table tbody th{padding:5px 0;}
  .yg_table div table tbody td{padding:0 10px}
  .yg_select { margin-top: 15px; width: 300px; height: 30px; font-size: 12px; }
}