@charset "utf-8";

@import url('layout.css');
@import url('common.css');

/* form */
select{outline:none;height:46px;padding:0 16px;border:1px solid #ccd0d5;border-radius:16px;border:1px solid #c9cacc;background:url(../images/ic_sel.png) no-repeat right 16px center #fafafa;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
input[type="text"],input[type="password"],input[type="tel"],input[type="number"],input[type="email"]{outline:none;height:50px;padding:0 16px;border-radius:10px;border:1px solid #ccd0d5;background:#fafafa;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
textarea{outline:none;padding:16px;border:1px solid #ccd0d5;border-radius:16px;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
select:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="number"]:focus,textarea:focus{}
select:disabled,input:disabled,textarea:disabled{background-color:#f5f5f5;}
select:invalid{color:#999}
textarea:focus,input:focus,select:focus{border-color:#6173e4}

/* button */
.btnD1,.btnD2{position:relative;overflow:hidden;display:inline-block;min-width:220px;height:68px;padding:0 20px;border-radius:12px;color:#474747;font-size:22px ! important;font-weight:700;text-align:center;box-sizing:border-box;transition:all 0.2s ease-in-out;}
a.btnD1,a.btnD2{line-height:62px;}
.btnD1{color:#474747 ! important;border:2px solid #474747}
.btnD2{color:#fff ! important;background:#404eaa}
.btnD2:hover{background:#233085}

.btnD1::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:100%;background:#474747;transform:translateY(100%);z-index:0;transition:transform .3s cubic-bezier(0,0,0.58,1)}
.btnD1 .text-default,.btnD1 .text-hover{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-weight:700;transition:transform .4s ease,opacity .4s cubic-bezier(0.42,0,0.17,1);z-index:1}
.btnD1 .text-default{top:50%;transform:translate(-50%,-50%);transition:all .3s ease-in-out}
.btnD1 .text-hover{top:100%;color:#fff;opacity:0;transition:all .3s ease-in-out}
.btnD1:hover::before{transform:translateY(0)}
.btnD1:hover .text-default{transform:translate(-50%,-150%);opacity:0}
.btnD1:hover .text-hover{top:50%;transform:translate(-50%,-50%);opacity:1}

.btn_block{position:relative;margin-top:86px;text-align:center}
.btn_block .btng{position:absolute;top:-40px;right:0;}
.btn_block a~a,.btn_block a~button,.btn_block button~button{margin-left:4px}


/* board  */
.ic_new{position:relative;top:-1px;display:inline-block;width:18px;height:18px;line-height:18px;margin-left:4px;text-align:center;vertical-align:middle;font-size:10px;border-radius:4px;background:#f56583;color:#fff}
.ic_file{display:inline-block;width:21px;height:27px;font-size:0;background:url(../images/ic_file.png) no-repeat 50% 50%/contain;}

.boardSearch_g{position:relative;min-height:16px;margin-bottom:50px;text-align:right}
.boardSearch_g.type{margin-bottom:30px;}
.boardSearch_g label{font-size:0;position:absolute;left:-10000px;}
.boardSearch_g select{width:130px;height:48px;margin-right:20px;font-size:17px;border-radius:0 ! important;border:0;border-bottom:2px solid #222;background-position:right 6px center}
.boardSearch_g.type select{width:240px;}
.boardSearch_g input{width:320px;height:48px;padding-right:48px;font-size:17px;border-radius:0 ! important;border:0;border-bottom:2px solid #222}
.boardSearch_g .btn{margin-left:-48px;width:48px;height:48px;font-size:0;background:url(../images/ic_search.png) no-repeat 50% 50%;}
.boardSearch_g select + .btn{margin-left:-26px}
.boardSearch_g .total{position:absolute;top:14px;left:0;font-size:20px;font-weight:600}
.boardSearch_g .total strong{font-weight:900;color:#336f99}

.board_basic{border-top:1px solid #333;border-bottom:1px solid #dfdfdf;}
.board_basic table{table-layout:fixed}
.board_basic table thead th{height:45px;line-height:24px;padding:10px 5px;vertical-align:middle;font-weight:600;word-break:normal;}
.board_basic table tr~tr th{border-top:1px solid #dfdfdf}
.board_basic table tbody th,.board_basic table td{height:45px;line-height:24px;padding:10px 5px;vertical-align:middle;border-top:1px solid #dfdfdf;text-align:center;word-break:normal;}
.board_basic a{display:inline-block;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(98% - 40px);word-wrap:break-word;}
.board_basic a:hover{color:#000;font-weight:400;text-decoration:underline;text-underline-position:under;}
.board_basic .num{color:#909090}
.board_basic .cell{padding-left:12px;text-align:left}
.board_basic .data2{color:#909090}
.board_basic .part{color:#2f4eaa;font-weight:700}
.board_basic td span{display:none}

.paging{position:relative;text-align:center;margin:70px auto 0;font-size:0;}
.paging *{vertical-align:middle;}
.paging ul{display:inline-block;margin:0 20px;font-size:0;}
.paging li{display:inline-block;}
.paging li a,.paging li strong{position:relative;display:inline-block;width:38px;height:38px;line-height:38px;font-size:18px;text-align:center;color:#61666b;box-sizing:border-box}
.paging li strong a,.paging li strong{color:var(--primary-color-20);font-weight:700;text-underline-position:under;text-decoration:underline;}
.paging .prev,.paging .next,.paging .first,.paging .last{display:inline-block;width:44px;height:44px;border-radius:10px;font-size:0;border:1px solid #e5e5e5;transition:all 0.3s ease-in-out}
.paging .prev:hover,.paging .next:hover,.paging .first:hover,.paging .last:hover{border-color:#eceff3;background-color:#eceff3}
.paging .first{margin-right:10px;background:url(../images/ic_first.png) no-repeat 50% 50% #fff;font-weight:300;letter-spacing: 0;}
.paging .prev{background:url(../images/ic_prev.png) no-repeat 50% 50% #fff;}
.paging .next{transform:rotate(-180deg);background:url(../images/ic_prev.png) no-repeat 50% 50% #fff;}
.paging .last{transform:rotate(-180deg);margin-left:10px;background:url(../images/ic_first.png) no-repeat 50% 50% #fff;}

.board_view{position:relative;padding-top:30px;border-top:1px solid #333;border-bottom:1px solid #ddd}
.board_view .had{text-align:center}
.board_view .part{color:#336f99;font-weight:700}
.board_view h2{line-height:56px;font-size:36px;font-weight:700}
.board_view .date{margin-top:27px;color:#909090;font-size:17px}
.board_view .date span{display:inline-block;}
.board_view .date span~span{position:relative;padding-left:24px;margin-left:24px;}
.board_view .date span~span:before{content:"";position:absolute;top:4px;left:0;width:1px;height:14px;background:#909090}
.board_view .date strong{margin-right:6px;font-weight:600;color:#333}
.board_view .img{margin-top:38px;padding:25px;border-top:1px solid #ddd}
.board_view .img .thum{overflow:hidden;width:540px;height:270px;line-height:270px;margin:60px auto;text-align:center;border-radius:20px;border:1px solid #ddd}
.board_view .img .thum img{max-height:100%;max-width:100%}
.board_view .memo{margin-top:23px;padding:36px 0;line-height:28px;font-size:20px;border-top:1px solid #efefef;}
.board_view .memo img{max-width:100%;}
.board_view .file{position:relative;padding:24px 0 24px 124px;border-top:1px solid #ddd}
.board_view .file dt{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;font-weight:700}
.board_view .file dd~dd{margin-top:6px}
.board_view .file a:hover{text-decoration:underline;text-underline-position:under;}
.board_view .file a{word-break:break-all;}
.board_view iframe{display:block;width:1236px;height:695px;margin:0 auto}
.board_view .news_view{font-size:16px;}
.board_view ol, .board_view ul{margin-left:16px}
.board_view li{list-style:normal;}

.btn_prevList,.btn_nxtList{position:relative;font-size:18px ! important;color:#909090 ! important;transition:all 0.3s ease-in-out;}
.btn_nxtList{margin-left:46px ! important}
.btn_prevList:before,.btn_nxtList:after{content:"";position:relative;top:-2px;display:inline-block;width:30px;height:21px;vertical-align:middle;background:url(../images/ic_prevp.png) no-repeat 0 0/contain;}
.btn_prevList:before{margin-right:10px;}
.btn_nxtList:after{margin-left:10px;transform:rotate(180deg);}
.btn_prevList:hover,.btn_nxtList:hover{color:#111 ! important}

/* contents */
.h2_tit{padding-top:84px;margin-bottom:52px;text-align:center;color:#474747;font-size:74px;font-weight:900}

.sub_company h2{width:806px;height:260px;padding-top:180px;margin:0 auto 180px;font-size:0;background:url(../images/img_company01.png) no-repeat 50% bottom/contain;}
.sub_company p{text-align:center}
.sub_company p:nth-of-type(1){color:#474747;font-size:30px;font-weight:700}
.sub_company p:nth-of-type(2){margin-top:30px;line-height:32px;font-weight:600}

.sub_culture p{text-align:center;color:#474747;font-weight:700;font-size:30px;}
.sub_culture dl{display:flex;gap:110px;justify-content:center;margin-top:83px;text-align:center;}
.sub_culture dt{font-size:34px;font-weight:900;color:#474747}
.sub_culture dd:nth-of-type(1){margin-top:16px;font-size:25px;font-weight:700}
.sub_culture div dt:after{content:"";display:block;width:261px;height:261px;margin:6px auto 10px;}
.sub_culture div:nth-child(1) dt:after{background:url(../images/img_culture01.png) no-repeat 0 0/contain;}
.sub_culture div:nth-child(2) dt:after{background:url(../images/img_culture02.png) no-repeat 0 0/contain;}
.sub_culture div:nth-child(3) dt:after{background:url(../images/img_culture03.png) no-repeat 0 0/contain;}
.sub_culture div:nth-child(4) dt:after{background:url(../images/img_culture04.png) no-repeat 0 0/contain;}
.sub_culture div:nth-child(1) dd:nth-of-type(1){color:#f47224;}
.sub_culture div:nth-child(2) dd:nth-of-type(1){color:#f3bb56}
.sub_culture div:nth-child(3) dd:nth-of-type(1){color:#0ea1f7;}
.sub_culture div:nth-child(4) dd:nth-of-type(1){color:#345171}
.sub_culture dd:nth-of-type(2){margin-top:30px;line-height:32px;font-weight:900}

.page.sub_games{max-width:100%;}
.sub_games .games_list{position:relative;}
.sub_games .games_list .itemg{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;}
.sub_games .box{position:relative;overflow:hidden;width:374px;height:513px;border-radius:20px;font-size:0;cursor:pointer;transition:all 0.3s ease-in-out;}
.sub_games .box:before{opacity:0;content:"";z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;background:#000;transition:all 0.3s ease-in-out;}
.sub_games .img{z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;width:374px;height:513px;transition:all 0.5s ease-in-out;}
.sub_games .txt{z-index:2;position:absolute;left:0;bottom:30px;width:100%;height:180px;transition:all 0.3s ease-in-out;}
.sub_games .down{opacity:0;z-index:3;position:absolute;left:0;bottom:0;width:100%;text-align:center;transition:all 0.3s ease-in-out;}
.sub_games .down a{opacity:.5;display:inline-block;width:60px;height:60px;border-radius:100%;border:2px solid #fff;transition:all 0.3s ease-in-out;}
.sub_games .down a~a{margin-left:12px}
.sub_games .android{background:url(../images/icon_android.png) no-repeat rgba(0, 0, 0, .3) 50% 50%/40px auto;}
.sub_games .ios{background:url(../images/icon_ios.png) no-repeat rgba(0, 0, 0, .3) 50% 50%/40px auto;}
.sub_games .galaxy{background:url(../images/icon_galaxy.png) no-repeat rgba(0, 0, 0, .3) 50% 50%/40px auto;}
.sub_games .one{background:url(../images/icon_one.png) no-repeat rgba(0, 0, 0, .3) 50% 50%/40px auto;}
.sub_games .game1 .img{background:url(../images/img_games1.png) no-repeat 0 0/contain;}
.sub_games .game1 .txt{background:url(../images/img_games1_txt.png) no-repeat 50% bottom;}
.sub_games .game2 .img{background:url(../images/img_games2.png) no-repeat 0 0/contain;}
.sub_games .game2 .txt{background:url(../images/img_games2_txt.png) no-repeat 50% bottom;}
.sub_games .game3 .img{background:url(../images/img_games3.png) no-repeat 0 0/contain;}
.sub_games .game3 .txt{background:url(../images/img_games3_txt.png) no-repeat 50% bottom;}
.sub_games .game4 .img{background:url(../images/img_games4.png) no-repeat 0 0/contain;}
.sub_games .game4 .txt{background:url(../images/img_games4_txt.png) no-repeat 50% bottom;}
.sub_games .game5 .img{background:url(../images/img_games5.png) no-repeat 0 0/contain;}
.sub_games .game5 .txt{background:url(../images/img_games5_txt.png) no-repeat 50% bottom;}
.sub_games .box:hover{box-shadow:5px 10px 20px rgba(0, 0, 0, .5);}
.sub_games .box:hover:before{opacity:.3;}
.sub_games .box:hover .img{transform:scale(1.05);}
.sub_games .box:hover .txt{transform:scale(1.05);bottom:110px}
.sub_games .box:hover .down{opacity:1;bottom:30px;}
.sub_games .box .down a:hover{opacity:1;background-color:rgba(0, 0, 0, .3)}
.sub_games .swiper-pagination{display:none;}


@media (max-width: 1930px) {
	
	.sub_games .games_list .itemg{display:flex;gap:0;justify-content:normal;flex-wrap:nowrap;} 
	.sub_games .swiper-slide{width:auto;padding:0 20px}
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:-50px}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 10px;width:14px;height:14px}
	.swiper-pagination-bullet{opacity:1;background:#a7a7a7}
	.swiper-pagination-bullet-active{background:#000}
}

@media (max-width: 1600px) {
	.h2_tit{font-size:54px;}
}

/* for mobile */
@media (max-width: 1280px) {
	body{font-size:18px;}

	select{height:42px;}
	input[type="text"],input[type="password"],input[type="tel"],input[type="number"],input[type="email"]{height:42px;padding:0 12px;border-radius:12px;}
	textarea{padding:12px;border:1px solid #ccd0d5;border-radius:12px;}

	/* button */
	.btnD1, .btnD2{min-width:100px;height:40px;font-size:14px ! important;border-radius:6px}
	a.btnD1{line-height:40px}
	a.btnD2{line-height:40px}
	.btn_block{margin-top:30px}
	.btn_block .btng{position:relative;top:0;}

	/* board */
	.ic_file{width:10px;height:13px;}

	.boardSearch_g .total{display:none}
	.boardSearch_g{margin-bottom:30px;font-size:0}
	.boardSearch_g select{width:30% ! important;max-width:120px;margin-right:14px;height:42px;font-size:14px;}
	.boardSearch_g.type select{padding-left:0}
	.boardSearch_g input{width:calc(70% - 44px);max-width:320px;font-size:14px;}
	.boardSearch_g .btn{margin-left:-12px ! important;width:42px;height:42px;background-size:16px auto}
	.boardSearch_g select + .btn{margin-top:0;margin-right:12px}

	.paging{margin-top:30px}
	.paging ul{margin:0 10px}
	.paging li a, .paging li strong{width:28px;font-size:14px}
	.paging .prev, .paging .next, .paging .first, .paging .last{width:32px;height:32px}
	.paging .prev, .paging .next{background-size:9px auto}
	.paging .first, .paging .last{background-size:11px auto}
	
	.board_view{padding-top:20px;}
	.board_view h2{line-height:28px;font-size:18px}
	.board_view h2 br{display:none}
	.board_view .date{margin-top:12px;font-size:12px}
	.board_view .date span~span{margin-left:12px;padding-left:12px}
	.board_view .date span~span:before{height:10px;top:3px}
	.board_view .memo{overflow-x:auto;width:calc(100% - 4px);margin-top:20px;padding:24px 0;line-height:24px;font-size:16px;box-sizing:border-box;}
	.board_view .memo p{line-height:22px ! important;font-size:14px ! important}
	.board_view .memo img{max-width:calc(100% - 10px);}
	.board_view .img{margin-top:24px;padding:16px}
	.board_view .img .thum{width:245px;height:106px;line-height:106px;}
	.board_view .img .thum img{max-height:60px;max-width:200px}
	.board_view .img + .memo{margin-top:0}
	.board_view .file{padding-left:66px}
	.board_view iframe{width:460px;height:259px}

	.btn_prevList, .btn_nxtList{position:absolute;top:12px;font-size:14px ! important}
	.btn_prevList{left:0}
	.btn_nxtList{right:0}
	.btn_prevList:before, .btn_nxtList:after{width:15px;height:10px}

	.board_basic{margin-top:-12px;border-top:0}
	.board_basic table thead th,.board_basic table tbody th, .boarboard_basicd_list table td{height:30px;}
	.board_basic colgroup{display:none}
	.board_basic thead{display:none}
	.board_basic .num{display:none ! important}
	.board_basic .cell{padding-left:12px;margin-right:0;background:none}
	.board_basic .cell span{display:none}
	.board_basic .cell:before{display:none;}
	.board_basic tr{overflow:hidden;display:block;padding:10px 0 14px;border-bottom:1px dashed #ddd}
	.board_basic tr:last-child{border:0}
	.board_basic table tbody th, .board_basic table td{border:0;text-align:left}
	.board_basic table td{position:relative;display:block;height:auto;padding:0;margin:0;border:0;text-align:left;box-sizing:border-box;color:#333}
	.board_basic td:before{content:"";position:relative;top:-1px;display:inline-block;width:2px;height:2px;vertical-align:middle;margin-right:5px;background:#000;}
	.board_basic td~td{margin-top:0}
	.board_basic .cell{width:100%;padding-left:0;padding-bottom:5px;font-weight:500}
	.board_basic td span{position:relative;display:inline-block;min-width:48px;padding-right:10px;margin-right:10px;color:#666;font-size:13px;font-weight:500;}
	.board_basic td span:after{content:"";position:absolute;top:6px;right:0;width:1px;height:12px;background:#999}
	.board_basic .part span,.board_basic td.part:before{display:none;}
	.board_basic td.part{padding-left:0}

	/* contents */

}


@media (max-width: 920px) {
	.h2_tit{padding-top:64px;margin-bottom:42px;font-size:62px;}
	
	.sub_company h2{padding-top:80px;margin-bottom:80px;background-size:auto 166px;}
	.sub_company h2{width:auto;height:166px;}
	.sub_company p:nth-of-type(1){font-size:24px;}
	.sub_company p:nth-of-type(1) i{display:none}
	.sub_company p:nth-of-type(1) span{display:block;margin-top:6px;font-size:44px;}
	.sub_company p:nth-of-type(2){line-height:32px;}

	.sub_culture p{font-size:22px;}
	.sub_culture dl{max-width:600px;margin:0 auto;flex-wrap:wrap;;gap:60px;margin-top:60px;}
	.sub_culture dt{font-size:26px;}
	.sub_culture dd:nth-of-type(1){font-size:19px;}
	.sub_culture div dt:after{width:160px;height:160px;}
	.sub_culture dd:nth-of-type(2){margin-top:12px;line-height:24px;font-size:14px}
	
	.sub_games .swiper-slide{padding:0 10px}
	.sub_games .box{width:340px;height:466px;}
	.sub_games .img{width:340px;height:466px;}
	.sub_games .txt{height:350px;bottom:40px;}
	.sub_games .box:hover .txt{bottom:100px}
	.sub_games .down a{width:40px;height:40px;}
	.sub_games .android,.sub_games .ios,.sub_games .galaxy{background-size:26px auto;}
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:-50px}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 8px;width:10px;height:10px;}
	.sub_games .swiper-pagination{display:block;}
}


@media (max-width: 540px) {
	body{font-size:14px;}
	
	.h2_tit{padding-top:44px;margin-bottom:20px;font-size:38px;}
	
	.sub_company h2{padding-top:60px;margin-bottom:60px;height:88px;background-size:auto 88px;}
	.sub_company p:nth-of-type(1){font-size:14px;}
	.sub_company p:nth-of-type(1) span{font-size:24px;}
	.sub_company p:nth-of-type(2){line-height:28px;padding:0 12px}
	
	.sub_culture p{font-size:12px;}
	.sub_culture dl{max-width:320px;gap:40px;margin-top:30px;}
	.sub_culture dt{font-size:16px;}
	.sub_culture dd:nth-of-type(1){margin-top:8px;font-size:14px;}
	.sub_culture div dt:after{width:80px;height:80px;}
	.sub_culture dd:nth-of-type(2){margin-top:6px;line-height:20px;font-size:12px}
	
	.sub_games .box{width:320px;height:439px;}
	.sub_games .img{width:320px;height:439px;}
	.sub_games .txt{height:300px;}
	.sub_games .android,.sub_games .ios,.sub_games .galaxy{background-size:20px auto;}
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:-30px}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px;width:7px;height:7px;}
}

@media (max-width: 360px) { 
	.sub_games .swiper-slide{padding:0 5px}
}