/*-----------------------------------------
            common
-------------------------------------------*/
body { padding-top:0;}
.main .header { background: none;}
.main .header .logo a { background-image: url('../img/common/thg_CI_gnb.png'); background-size: 100% auto;}
.main .header .gnb .menu a { color:#202020; }
.main .header .gnb .lang .active { color:#202020;  opacity: 1; }
.main .header .gnb .lang a{ color:#202020; opacity: 0.5; }
.main .header.fixed { background: #fff;}
.main .header.fixed .logo a { background-image: url('../img/common/thg_CI_gnb.png');  }
.main .header.fixed .gnb .menu a { color:#202020; }
.main .header.fixed .gnb .lang .active { color:#202020; }
.main .header.fixed .gnb .lang a{ color:#aeaeae; opacity: 1;}
.main .footer { border-top:0; }

/*-----------------------------------------
            contents
-------------------------------------------*/
.main .visual { position: relative; min-width:1720px; max-width:1720px; width:1720px; height:610px; margin:100px auto 0 auto; overflow:hidden; text-align:center; }
.main .visual .bg {  position: relative;  overflow: hidden; height:100%;}
.main .visual .bg:after { position:absolute; left:0; top:0; width:100%; height:100%; content:''; background: url('../img/main/kv_layer@2x.png') repeat-x; background-size: 100% 100%; }
.main .visual .bg video { position: absolute;  top: 0;  left: 0;  width: 100%; height: 100%;  object-fit: cover;  }
.main .visual p { position:absolute; top:50%; left:45.20%; margin-top:-50px; text-align: left; font-size: 32px; font-weight: bold; line-height: 1.63; color: #fff;}

.main .twohandsgames {  width:1264px; margin:0 auto; padding:100px 0; text-align:center; }
.main .twohandsgames .tit { margin-bottom:38px; }
.main .twohandsgames .txt { margin-bottom:80px; font-size: 20px; line-height: 1.8; color: #00b4ed;}
.main .twohandsgames .list { overflow:hidden; }
.main .twohandsgames .list li { float:left; }
.main .twohandsgames .list li a { overflow:hidden;  }
.main .twohandsgames .list li a .image { display:block; transition: all 0.2s ease-in-out; }
.main .twohandsgames .list li a:hover .image {transform: scale(1.1); }
.main .twohandsgames .link1 a .image { width:632px; height:514px; background:url('../img/main/img_story.png') no-repeat; background-size: cover;  }
.main .twohandsgames .link2 a .image  { width:632px; height:514px; background:url('../img/main/img_life.png') no-repeat; background-size: cover; }
.main .twohandsgames .link3 a .image  { width:632px; height:514px; background:url('../img/main/img_gsc.png') no-repeat; background-size: cover; }
.main .twohandsgames .link4 a .image  { width:632px; height:514px; background:url('../img/main/img_championstrike_4.png') no-repeat; background-size: cover; }

.main .twohandsgames .list li a { position:relative; display:block; }
.main .twohandsgames .list li .text {  position:absolute;  left:0; bottom:34px; width:100%; font-size: 28px; font-weight:bold; line-height:1.43; color: #fff; text-transform:uppercase }

.main .news {  width:1264px; margin:0 auto 100px auto; }
.main .news .title { margin-bottom:30px; font-size: 24px; font-weight: bold; line-height:1; color: #202020; }
.main .news .list { overflow:hidden; width:100%; }
.main .news .list ul { margin-left:-32px; }
.main .news .list li { float:left; width:340px; height:178px; padding:0 30px; margin-left:32px; overflow:hidden; background:#f9f9f9; }
.main .news .list .tit { display:block; margin:34px 0 34px 0; word-wrap: break-word; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.main .news .list .tit a { font-weight: 600; line-height:1.5; font-size:20px; color: #202020; }
.main .news .list .date,
.main .news .list .type { font-size: 14px; line-height:1; color: #999;}
/* .main .news .list .type:before { content:''; display:inline-block; width: 1px; height: 12px; margin:0 8px; vertical-align:middle; background-color: #e4e4e4;} */

.main .link-jobposting { width:100%; min-width:1264px; height:260px; text-align:center; overflow:hidden; background:url('../img/main/caeer_img.png') center no-repeat; }
.main .link-jobposting p { margin-top:91px; color:#fff; font-size: 32px; line-height: 1.25; }
.main .link-jobposting a:hover { text-decoration: none; }


/*-----------------------------------------
            mobile
-------------------------------------------*/
@media all and (max-width:1023px){
    .main .header .btn-layer-open { background: url('../img/common/btn_gnb_open_m2@2x.png') no-repeat; background-size: 32px auto;}
    .main .header.fixed .btn-layer-open { background: url('../img/common/btn_gnb_open_m@2x.png') no-repeat; background-size: 32px auto;}
    .main .header.fixed .gnb .menu a { color:#fff; }
    .main .header.fixed .gnb .lang .active { color:#fff; opacity: 1; }
    .main .header.fixed .gnb .lang a{ color:#fff;  opacity: 0.3}

    .main .visual { position:relative; min-width:auto; width:100%; height:100vh;  min-height:587px; overflow:hidden; margin-top:0; }
    .main .visual .bg { width:100%; height:100vh; min-width:100%; min-height:100vh;  overflow:hidden;}
    .main .visual .bg video { height:100vh;  object-fit: cover;  }
    .main .visual p { position:absolute; left:50%; top:42.5vw; width:314px; margin-left:-157px; margin-top:0; text-align:center; margin-top:0;  font-size: 20px; font-weight: bold; line-height: 1.5; color: #fff;}
    .main .visual p span { display:inline-block; width:100%; }
    .main .visual .bg:after { background: url('../img/main/kv_layer_m@2x.png') repeat-x; background-size: auto 100%; }

    .main .twohandsgames { width:100%; padding:48px 20px 0 20px; box-sizing: border-box;}
    .main .twohandsgames .tit { margin-bottom:28px; }
    .main .twohandsgames .tit img { width:280px }
    .main .twohandsgames .txt { width:306px; margin:0 auto 50px auto; font-size: 14px; line-height: 1.7; }
    .main .twohandsgames .txt span { display:inline-block; margin-bottom:16px; }
    .main .twohandsgames .list li { float:none; width:100% !important; height:66.3vw !important; min-height:239px; margin-bottom:12px;  }
    .main .twohandsgames .list li a .image { display:block; width:100% !important; height:66.3vw !important;  min-height:239px;}
    .main .twohandsgames .list li a .text { bottom:6.6vw;  font-size:20px; line-height:2; }
    .main .twohandsgames .list li img { display:none; }
    .main .twohandsgames .link1 a .image { background:url('../img/main/img_story_m@2x.png') no-repeat; background-size: cover;  }
    .main .twohandsgames .link2 a .image { background:url('../img/main/img_life_m@2x.png') no-repeat; background-size: cover;  }
    .main .twohandsgames .link3 a .image { background:url('../img/main/img_gsc_m.png') no-repeat; background-size: cover; }
    .main .twohandsgames .link4 a .image { background:url('../img/main/img_championstrike_4_m.png') no-repeat; background-size: cover; }
    

    .main .news { width:100%; min-width:auto; padding:38px 20px 42px 20px; margin:0; box-sizing: border-box;}
    .main .news .title { text-align:center; font-size:20px; margin-bottom:16px; }
    .main .news .list li { float:none; width:auto; height:116px; margin-bottom:8px; padding:0 20px; box-sizing: border-box;}
    .main .news .list li .tit { margin:20px 0 10px 0; }
    .main .news .list li .tit a { font-size: 16px; line-height:1.5; }
    .main .news .list .date,
    .main .news .list .type { font-size: 11px; }
    .main .news .list .type:before { height: 10px;}

    .main .link-jobposting { min-width:auto; height:300px;  background:url('../img/main/career_img_m@2x.png') center no-repeat; background-size: cover; }
    .main .link-jobposting p { width:200px; margin:110px auto 0 auto; font-size: 20px; line-height:1.4;}
    .main .link-jobposting p span { display:inline-block; }
}