@charset "utf-8";
/*-----------------------------------------------------------------------------
[TABLE OF CONTENTS]
    +media
        + max-width : 1280px
        + max-width : 1020px
-----------------------------------------------------------------------------*/
/* media 
*----------------------------------------------------------------------------*/
/**
*
* Desktops
*
**/


@media only screen 
and (max-width : 1300px) {

    section article.learnHRbox .interviewBox .stepBoxList .stepWidth {
        max-width: 940px;
    }
}


@media only screen 
and (max-width : 1280px) {
    header .navbar .main .redBg { left: 140px;}
    header .navbar .logo { width: 112px; left: 20px; height: 36px;}
    header .navbar .unitComplex { left: 240px;}
    header .navbar .toolsComplex { right: 10px;}    
    footer .main { padding: 0 20px;}
    footer .selectBox { top: 25px;}
    .adWrapper {
        padding: 0;
    }
}



@media only screen 
and (max-width : 1130px) {
    section article.welfareHRbox .happinessBoxBox .facilityBoxList ul{
        max-width: 850px;
    }
}



@media only screen 
and (max-width : 1130px) {

/* index
*----------------------------------------------------------------------------*/
    header .recruitMenu .menuBox {
        right: 17px;
    }
    section article.recruitHRbox .videoBox .videoPlayBox {
        max-width: 80%;
        height: 348px;
        margin: 0 auto 0 100px;
    }
    section article.recruitHRbox .videoBox {
        height: 620px;
    }
    section article.welfareHRbox .activities{
        max-width: 818px;/*1088-820px*/
    }
    section article.recruitHRbox .hotVacaBox .moreVaca .button {
        right: 20px;
    }

}




@media only screen 
and (max-width : 1024px) {

/* index
*----------------------------------------------------------------------------*/
    section article.recruitHRbox .hotVacaBox .hotVacaList {
        max-width: 605px;
    }


}



@media only screen 
and (max-width : 1020px) {
    #wrapper {
        overflow: hidden;
    }
    header .topbar a {
        padding: 0 20px;
    }
    header .memberbar a,
    header .memberbar span,
    header .memberbar .login {
        font-size: 12px;
    }
    header .navbar .toolsComplex a { margin: 0; font-size: 11px; padding: 28px 0 0;}    
    header .navbar .toolsComplex a.qa { margin: 0 20px 0 5px;}
    header .navbar .toolsComplex a.msgComplex,
    header .navbar .toolsComplex a:hover.msgComplex,
    header .navbar .toolsComplex a.qaComplex,
    header .navbar .toolsComplex a:hover.qaComplex {
    	-moz-background-size: 28px auto;
    	-webkit-background-size: 28px auto;
    	-o-background-size: 28px auto;
    	background-size: 28px auto;
    }
    .searchrevampbox .searchbox .schtags input.schtext,
    .searchrevampbox .selectboxit-container * {
        font-size: 13px;
    }
    section article h2.mainHead { margin: 0 0 10px;}
    footer { padding: 20px 20px;}
    footer .selectBox { top: 0;}
}


@media only screen 
and (max-width : 980px) {
    header .navbar .toolsComplex a.msgComplex, 
    header .navbar .toolsComplex a.qaComplex {
        display: none;
    }
    header .navbar .toolsComplex {
        top: 17px;
    }
    header .navbar .unitComplex {
        left: 200px;
        font-size: 18px;
    }
    header .navbar .main .redBg {
        left: 130px;
    }
    header .navbar .main .redBg:after {
        left: -10px;
    }
    header .memberbar a.msgComplex,
    header .memberbar a.qaComplex { 
        display: inline;
        margin: 0 -8px 0 0;
        padding: 2px 10px 2px 36px;
    }
    header .memberbar a.other {
        padding: 0 20px;
    }
    
    /* learning
    *----------------------------------------*/
    section article.learnHRbox .interviewBox .stepBoxList .stepWidth {
        max-width: 630px;
    }

}





@media only screen 
and (max-width : 870px) {

/* index
*----------------------------------------------*/
    section article.welfareHRbox .activities{
        max-width: 545px;/*1088-820px*/
    }

/* happy
*----------------------------------------------*/
    section article.welfareHRbox .happinessBoxBox .facilityBoxList ul {
      max-width: 752px;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li {
        width: 220px;
    }
}



@media only screen 
and (max-width : 769px) {
    section article.recruitHRbox .hotVacaBox .hotVacaList {
        max-width: 100%;
    }
    .hotVacaWrap .slick-track {
        margin: 15px auto;
    }
}





@media only screen 
and (max-width : 767px) {
    .pc-show{
        display: none;
    }
    .mb-show{
        display: block;
    }
    /**
    *
    * ad
    *
    **/
    footer .monitor { display: none;}
    footer .mobile { display: block;}
    .adWrapper .monitor { display: none; }
    .adWrapper .mobile { display: none; }

    .adWrapper{
        display: none;
    }
    header .recruitMenu {
        display: none;
    }
    header .memberbar a,
    header .memberbar a.msgComplex,
    header .memberbar a.qaComplex,
    header .memberbar a.retail {
        font-weight: normal;
    }
    /*header .topbar,*/
    header .navbar .toolsComplex,
    header .memberbar .login,
    header .memberbar .sitemap,
    header .memberbar a.retail,
    header .memberbar a.msgComplex,
    header .memberbar a.qaComplex,
    footer .monitor { display: none;}    
    footer .mobile { display: block;}
    header .memberbar a.other {
        display: inline;
    }
    header .topbar {
        float: right;
    }
    .backtop {
        right: 5px;
        bottom: 100px;
    }
    header .memberbar a.msgComplex,
    header .memberbar a.qaComplex,
    header .memberbar a.retail {
        padding: 0 15px 0 36px;
    }
    header .memberbar a.retail {
        border-right: 0;
    }

    
    header .navbar .unitComplex {
        top: 14px;
        left: 140px;
    }
    header .navbar .redBg { height: 42px;}
    header .navbar .main .redBg { left: 75px;height: 42px;}
    header .navbar {
        height: 42px;
    }
    header .navbar .main {
        text-align: right;
    }

    header .navbar .logo {
        top: 5px;
        left: 10px;
        width: 80px;
        height: 29px;
        z-index: 1;
    }
    header .navbar .redBg { left: 180px;}
    header .navbar .main .redBg {
        left: 55px;
    }


    header .navbar .navMobile {
        position: relative;
        float: right;
        display: block;
        z-index: 1;
    }
    header .navbar .navMobile a.FETnetComplex {
        background: url(../images/mobile/btn_FETnet.png) no-repeat;
    }
    header .navbar .navMobile a.msgComplex {
        background: url(../images/mobile/btn_msgComplex.gif) no-repeat;
    }
    header .navbar .navMobile a.qaComplex {
        background: url(../images/mobile/btn_qaComplex.gif) no-repeat;
    }
    header .navbar .navMobile a.retail {
        background: url(../images/mobile/btn_retail.jpg) no-repeat;
    }
    header .navbar .navMobile a.menuComplex {
        background: url(../images/mobile/btn_menu.jpg) no-repeat;
    }
    header .navbar .navMobile a.FETnetComplex,
    header .navbar .navMobile a.msgComplex,
    header .navbar .navMobile a.qaComplex,
    header .navbar .navMobile a.retail,
    header .navbar .navMobile a.menuComplex {
        float: left;
        width: 42px;
        height: 42px;
        font-size: 0;
    	-moz-background-size: 42px auto;
    	-webkit-background-size: 42px auto;
    	-o-background-size: 42px auto;
    	background-size: 42px auto;
    }
    header .navbar .navMobile a.msgComplex {
        width: 53px;
        margin: 0 4px 0 0;
    	-moz-background-size: 53px auto;
    	-webkit-background-size: 53px auto;
    	-o-background-size: 53px auto;
    	background-size: 53px auto;
    }
    header .navbar .navMobile a.FETnetComplex,
    header .navbar .navMobile a.msgComplex,
    header .navbar .navMobile a.qaComplex,
    header .navbar .navMobile a.retail {
        display: none;
    }
    header .navbar .menuMobile {
        display: block;
    }
	header .menuMobile {
	    display: block;
	}
	
    header .memberbar .login a,
    header .memberbar .logout a {
        padding: 0 0 0 37px;
    }


/* menu
*----------------------------------------------------------------------------*/
    div.menu {
        display: block;
        position: fixed;
        right: -240px;/*-240px*/
        float: right;
        background: #f2f2f2;
        z-index: 18;
    }
    div.menu.on {
        /*position: relative;*/
        height: 100%;
        right: 0px;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    div.menu .menubox {
        width: 235px;
        margin-top: 72px;
    }
    .adSize div.menu .menubox {
        margin-top: 103px;
    }
    .maxSize div.menu .menubox {
        margin-top: 143px;
    }
    .minSize + div.menu .menubox {
        margin-top: 36px;
    }
    div.menu .menuhd {
        text-align: right;
        padding: 10px 15px 12px 15px;
    }
    div.menu .menuhd .logout {
        line-height: 20px;
        padding: 4px 0 0 0;
        font-size: 14px;
    }
    div.menu .menuhd .logout a {}
    div.menu .menuhd .logout .icon {
        float: left;
        width: 24px;
        height: 24px;
        overflow: hidden;
    }
    div.menu .menuhd .login {
        font-size: 15px;
        line-height: 38px;
    }
    div.menu .menuhd .login .icon.vip,
    div.menu .menuhd .login .icon.vip2,
    div.menu .menuhd .login .icon.fet,
    div.menu .menuhd .login .icon.web {
        float: left;
        text-align: left;
        overflow: hidden;
    }
    div.menu .menuhd .logout .icon img {max-width: 24px; max-height: 24px;}
    div.menu .menuhd .login .icon.vip img {max-width: 60px; max-height: 48px;}
    div.menu .menuhd .login .icon.vip2 img {max-width: 81px; max-height: 48px;}
    div.menu .menuhd .login .icon.fet img {max-width: 105px; max-height: 24px;}
    div.menu .menuhd .login .icon.web img {max-width: 92px; max-height: 24px;}
    div.menu .menuhd .login .icon.vip {
        width: 60px;
        height: 48px;
        margin: -6px 0 0 0;
    }
    div.menu .menuhd .login .icon.vip2 {
        width: 81px;
        height: 48px;
        margin: -6px 0 0 0;
    }
    div.menu .menuhd .login .icon.fet {
        width: 105px;
    }
    div.menu .menuhd .login .icon.web {
        width: 92px;
    }
    div.menu .menuhd .login .icon.fet,
    div.menu .menuhd .login .icon.web {
        height: 24px;
        margin-top: 4px;
    }
    div.menu .menuhd .login a.iconLogout {
        display: block;
        float: right;
        color: #333;
        font-weight: bold;
        top: auto;
        line-height: 30px;
        padding: 0 0 0 37px;
        border-right: 0;
        background: url(../images/icon_logout.png) no-repeat 17px 7px;
        -moz-background-size: 17px auto;
        -webkit-background-size: 17px auto;
        -o-background-size: 17px auto;
        background-size: 17px auto;
    }
    div.menu .menuhd .login .con {
        width: 190px;
        padding: 5px 0 0 0;
        font: 12px/14px Helvetica, sans-serif;
        text-align: left;
        word-wrap: break-word;
        -moz-binding: url(js/wordwrap.xml#wordwrap);
        display: block;
        overflow: auto;
    }
    div.menu .menubd {
        border-top: 1px #d8d8d8 solid;
    }
    div.menu .menubd h3 {
        padding: 0 0 5px 0;
        color: #666;
        font: 12px/18px Helvetica, sans-serif;
    }
    div.menu .menubd hr {
        display: block;
        height: 1px;
        border: 0;
        margin: 7px auto;
        background: #ede5dc;
    }
    div.menu .menubd ul {
        display: block;
        clear: both;
        overflow: hidden;
        padding: 0 0 0 33px;
    }
    div.menu .menubd ul:nth-child(1) {
        background: #fff;
        padding: 0 0 0 15px;
    }
    div.menu .menubd ul:nth-child(2) {
        background: #e8e8e8;
    }
    div.menu .menubd.friday ul:nth-child(1) {
        background: #f2f2f2;
        border-top: 4px #ddd solid;
        border-bottom: 4px #ddd solid;
    }
    div.menu .menubd.friday ul:nth-child(1) img {
        max-width: 48px;
        vertical-align: middle;
    }
    div.menu .menubd ul li {
        padding: 6px 0;
        border-top: 1px #a9a9a9 solid;
        background: url(../images/icon/icon_arrow_nav.png) no-repeat 90% center;
        -moz-background-size: 30px auto;
        -webkit-background-size: 30px auto;
        -o-background-size: 30px auto;
        background-size: 30px auto;
    }
    div.menu .menubd ul li.noArrow {
        background: none;
    }
    div.menu .menubd ul li:nth-child(1) {
        border-top: 0;
    }
    div.menu .menubd ul li,
    div.menu .menubd ul li a {
        display: block;
        font: 16px/38px Helvetica, sans-serif;
    }
    div.menu .menubd ul:nth-child(1) li,
    div.menu .menubd ul:nth-child(1) li a {
        font-weight: bold;
    }
    div.menu .menubd ul li a span {
        color: #e71a0f;
    }
    div.menu .menubd ul li .app a {
        float: left;
        width: 40px;
        margin: 10px 12px 0 0;
    }
    div.menu .menubd ul li .app a.last {
        margin: 10px 0 0 0;
    }
    div.menu .menubd .box {
        padding: 8px 0;
        display: block;
        clear: both;
        overflow: hidden;
    }
    div.menu .menubd .box a {
        float: left;
        display: block;
        height: 27px;
        text-indent: -10000px;
    }
    div.menu .menuft {
        border-top: 1px #bbb solid;
        padding: 30px 20px 100px 10px;
    }
    div.menu .menuft .menubd {
        border-top: 0;
    }
    div.menu .menuft .menubd .box {
        margin: 0 0 18px;
        padding: 0 0 10px;
    }
    div.menu .menuft .box {
        margin: 5px 0 15px 0;
        font: 12px/20px Helvetica, sans-serif;
    }
    div.menu .menuft .privacy {
        font: 12px/20px Helvetica, sans-serif;
    }
    div.menu .menuft .copyright {
        font: 10px/20px Helvetica, sans-serif;
    }
    div.menu .menuft .privacy span {
        padding: 0 5px;
    }
/* mask
*----------------------------------------------------------------------------*/
    .section.on, .section.ch {
        z-index: 1;
    }
    .popupMask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/icon/icon_mask.png) repeat;
        display: none;
        z-index: 19;
    }
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: url(../images/icon/icon_mask.png) repeat;
        display: none;
        z-index: 19;
    }
    .searchrevampbox .searchbox .schtags {
	    float: none;
	    height: 32px;
	    position: absolute;
	    width: auto;
	    left: 0;
	    right: 32px;
	}
	.searchrevampbox .searchbox .schtags input.schtext {
        height: 32px;
        line-height: 32px;
    }
    .searchrevampbox .searchbox input.schsubmit {
        height: 32px;
        width: 32px;
    }
    .searchrevampbox .selectboxit-container span {
        height: 32px;
        line-height: 32px;
    }    
	section {
	    padding: 72px 0 0 0;
	}
    section.minSize,
    section.maxSize { padding: 42px 0 0;}

	article.toolMobile { display: block;}



/* index
*----------------------------------------------------------------------------*/
    section article.recruitHRbox .bannerBox {
        height: inherit;
        padding-bottom: 46%;
        background: #fff;
    }
    .kvComplex{
        display: none;
    }
    .kvComplex_M{
        display: block;
        position: absolute;
        width: 100%;
        padding-bottom: 38%;
    }
    .kvComplex_M img{
        width: 100%   
    }
    section article.recruitHRbox .bannerBox .kvComplex_M {
        display: block;
    }
    section article.recruitHRbox .bannerBox .bannerTitleWrap {
        position: absolute;
        top: 0;
        width: 100%;
        padding-bottom: 46%;
    }
    section article.recruitHRbox .bannerBox .bannerTitle {
        width: 190px;
        height: 100px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    section article.recruitHRbox .bannerBox .bannerTitle.on {
        left: 14px;
    }
    section article.recruitHRbox .bannerBox .bannerTitle img{
        width: 100%;
    }
    section article.recruitHRbox .videoBox .bannerTitle {
        position: absolute;
        padding: 0;
        top: 150px;
        left: 0px;
        width: 93px;
        height: 30px;
        text-align: center;
        background: rgba(22,14,17,1);
        background: -moz-linear-gradient(left, rgba(22,14,17,1) 0%, rgba(81,81,81,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(22,14,17,1)), color-stop(100%, rgba(81,81,81,1)));
        background: -webkit-linear-gradient(left, rgba(22,14,17,1) 0%, rgba(81,81,81,1) 100%);
        background: -o-linear-gradient(left, rgba(22,14,17,1) 0%, rgba(81,81,81,1) 100%);
        background: -ms-linear-gradient(left, rgba(22,14,17,1) 0%, rgba(81,81,81,1) 100%);
        background: linear-gradient(to right, rgba(22,14,17,1) 0%, rgba(81,81,81,1) 100%);
    }
    section article.recruitHRbox .videoBox .bannerTitle h3 {
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 13px;
        font-weight: normal;
        line-height: 30px;
        color: #fff
    }
    section article.recruitHRbox .videoBox .bannerTitle h3:before {
        position: absolute;
        left: 2px;
        top: 25px;
        bottom: 2px;
        width: 29px;
        height: 1px;
        background-color: #e71a0f;
        content: "";
    }
    section article.recruitHRbox .videoBox .bannerTitle h3 > span {
        display: inline-block;
        margin: 0 2px;
    }
    section article.recruitHRbox .videoBox .videoPlayBox {
        max-width: 100%;
        height: 300px;
        margin: 0 20px 0px;
    }
    section article.recruitHRbox .bannerBox .moreVideo{
        display: none;
    }
    /*
    section article.recruitHRbox .bannerBox .moreVideo, 
    section article.recruitHRbox .bannerBox .moreVideo a {
        width: 54px;
        height: 54px;
    }
    section article.recruitHRbox .bannerBox .moreVideo a {
        display: block;
        padding: 17px 0 0 0;
        font-size: 12px;
        text-align: center;
        background: url(../images/hr/icon_recruit_arrow.png) no-repeat center 90%;
        -webkit-background-size: 20px auto;
        -o-background-size: 20px auto;
        background-size: 20px auto;
    }
    */
    section article.recruitHRbox .videoBox {
        height: 550px;
    }
    section article.recruitHRbox .hotVacaBox .hotVacaBoxComplex {
        height: auto;
    }
    section article.recruitHRbox .hotVacaBox .bannerTitle {
        width: 72px;
        margin: 0 auto 20px auto;
    }
    section article.recruitHRbox .hotVacaBox .bannerTitle h3 {
        position: relative;
        padding: 5px 0 0 0;
        font-size: 18px;
        line-height: 20px;
        border-top: 2px #d25346 solid;
    }
        section article.recruitHRbox .hotVacaBox .moreVaca {
        position: relative;
        z-index: 1;
    }
    section article.recruitHRbox .hotVacaBox .moreVaca .button {
        position: absolute;
        bottom: -52px;
        left: 50%;
        top: 15px;
        margin: 0 0 0 -48px;
        display: block;
        color: #fff;
        font-size: 12px;
        width: 96px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        background: #666;
        border: 1px #333 solid;
        text-decoration: none;
    }
    section article.recruitHRbox .hotVacaBox .moreVaca .button span.narrow {
        width: 10px;
        display: inline-block;
    }
    section article.recruitHRbox .hotVacaBox .moreVaca .button span.narrow img {
        vertical-align: middle;
        width: 100%;
    }

    section article.recruitHRbox .hotVacaBox .kvComplex{
        display: none;
    }
    section article.recruitHRbox .hotVacaBox .kvComplex_bg_m{
        display: block;
    }
    section article.recruitHRbox .hotVacaBox .kvComplex_bg_m img{
        width: 100%;
    }
    section article.welfareHRbox .activityBox .bannerTitle {
        top: 40px;
        width: 72px;
        margin: 0 0 0 -36px;
    }
    section article.welfareHRbox .activityBox .bannerTitle h3 {
        width: 72px;
        margin-left: -36px;
        left: 50%;
        position: relative;
        padding: 5px 0 0 0;
        font-size: 18px;
        line-height: 22px;
        border-top: 2px #ac834d solid;
    }
    section article.welfareHRbox .activityList {
        top: 90px;
    }
    section article.welfareHRbox .activityBox {
        height: 500px;
    }
    section article.welfareHRbox .activityList .slickLi {
        -webkit-box-shadow: 0 8px 15px rgba(0,0,0,0.3);
        box-shadow: 0 8px 8px rgba(0,0,0,0.3);
    }
    .welFacBgComplex{
        background: #f2f2f2;
    }
    .boxShadow{
        background: transparent;
        -webkit-box-shadow: 0 0px 0px 0px rgba(150,150,150,0.15);
        -moz-box-shadow: 0 0px 0px 0px rgba(150,150,150,0.15);
        box-shadow: 0 0px 0px 0px rgba(150,150,150,0.15);

    }
    section article.welfareHRbox .joinTabs.unit .bannerTitle {
        display: block;
        width: 91px;
        margin: 0px auto 20px auto;
        text-align: center;
    }
    section article.welfareHRbox .joinTabs.unit .bannerTitle h3 {
        padding: 5px 0 0 0;
        font-size: 18px;
        line-height: 20px;
        font-weight: bold;
        color: #333;
        border-top: 2px #999 solid;
    }
    .hotVacaWrap .slick-slider .slick-prev { width: 40px; height: 50px;left: -40px; background: url(../images/icon/icon_slickprev.png) no-repeat center;background-size: 60% auto;}
    .hotVacaWrap .slick-slider .slick-next { width: 40px; height: 50px;right: -40px; background: url(../images/icon/icon_slicknext.png) no-repeat center;background-size: 60% auto;}
    section article.recruitHRbox .hotVacaBox .hotVacaList .vacaItem {
        width: 120px;
        height: 120px;
        padding: 1px 0 0 0;
    }

    
       
    section article.recruitHRbox .outstandingBox{
        width: 100%;
        height: 480px;
        background-size: auto 480px;
    }
    section article.recruitHRbox .outstandingBox .bannerTitle {
        top: 40px;
        width: 72px;
        margin: 0 0 0 -36px;
    }
    section article.recruitHRbox .outstandingBox .bannerTitle h3 {
        width: 72px;
        margin-left: -36px;
        left: 50%;
        position: relative;
        padding: 5px 0 0 0;
        font-size: 18px;
        line-height: 22px;
        border-top: 2px #ac834d solid;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox {
        max-width: 100%;
        margin: 0 auto;
        padding: 240px 15px 0;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox .item {
        width: 120px;
        height: 120px;
        margin: 10px 0px;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox .decoLine{
       width: 60px;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox .item .text {
        margin: 28px auto 12px;
    }
    section article.recruitHRbox .outstandingBox .slick-list {
        padding: 0 !important;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox .item.slick-center{
        background: #e41e1f;
    }   
    section article.recruitHRbox .outstandingBox .itemWrapBox .item.slick-center:before{
        border: 1px solid #e41e1f;
    }
    








/* happiness
*----------------------------------------------------------------------------*/
    section article.welfareHRbox .happinessBoxBox {
        position: relative;
        padding: 40px 0 40px 0;
        background: #f2f2f2 url(../images/hr/bg_happiness_m.png) no-repeat top center;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
        -webkit-transition: background-size .2s ease-in;
        transition: background-size .2s ease-in;
    }
    section article.welfareHRbox .happinessBoxBox .bannerTitle {
        margin: 0 auto 20px auto;
        text-align: center;
    }
    section article.welfareHRbox .happinessBoxBox .bannerTitle h3 {
        width: 90px;
        margin: 0 auto 17px auto;
        padding: 5px 0 0 0;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        color: #ac834d;
        border-top: 2px #caa778 solid;
    }
    section article.welfareHRbox .happinessBoxBox .bannerTitle p {
        font-size: 14px;
        line-height: 20px;
        color: #333;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li {
        position: relative;
        display: block;
        float: left;
        vertical-align: top;
        width: 49%;
        height: auto;
        min-height: 175px;
        padding: 2% 5% 6% 5%;
        margin: 1% auto;
        border-top: 3px #aaaaaa solid;
        text-align: left;
        font-size: 13px;
        line-height: 20px;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li:nth-child(odd) {
        margin-right: 2%;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList ul {
        max-width: 98%;
        margin: 0 2%;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li:nth-child(1) .icon, 
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li:nth-child(2) .icon, 
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li:nth-child(3) .icon, 
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li:nth-child(4) .icon, 
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li:nth-child(5) .icon, 
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li:nth-child(6) .icon, 
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li:nth-child(7) .icon, 
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li:nth-child(8) .icon {
        -webkit-background-size: 72px auto;
        background-size: 72px auto;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li .icon {
        width: 72px;
        height: 72px;
        margin: 0 auto 12px auto;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li.changeStyle {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li.changeStyle .icon,
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li.changeStyle .title{
        display: table-cell;
        margin: 0 auto;
        padding: 0 10px;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    section article.recruitHRbox .hotVacaBox .hotVacaList .area {
        width: 120px;
        padding-top: 30px;
        margin: 0 auto;
        height: 22px;
        font-size: 13px;
        overflow: hidden;
    }
    section article.recruitHRbox .hotVacaBox .hotVacaList .position {
        font-size: 15px;
        line-height: 18px;
    }
    section article.recruitHRbox .hotVacaBox .hotVacaList .position span{
        display: block;
    }




/* joinUs
*----------------------------------------------------------------------------*/
    section article.welfareHRbox .joinTabs {
        padding: 20px 0 30px 0;
    }
    section article.welfareHRbox .joinTabs > ul li {
        width: 32%;
        text-align: center;
    }
    section article.welfareHRbox .joinTabs ul li:nth-child(1),
    section article.welfareHRbox .joinTabs ul li:nth-child(2) {
        display: none;
    }
    section article.welfareHRbox .joinTabs > ul li a{
        padding: 0;
    }
    section article.welfareHRbox .joinTabs.unit > ul {
        display: none;
        margin: 0 0 20px 0;
        border-bottom: 2px #c7c6c6 solid;
    }
    .editBox th, .editBox td {
        padding: 4px 5px;
        font-size: 14px;
        line-height: 22px;
    }
    .locationBox .singleColumn {
        margin: 0;
        padding: 0px 20px 10px;
    }
    section article.welfareHRbox .joinTabs .iframeBox {
        overflow-x: scroll;
    }
  
/* falware
*----------------------------------------------------------------------------*/
    section article.welfareHRbox .bannerBox .kvComplex {
        display: none;
    }
    section article.welfareHRbox .bannerBox {
        position: relative;
        height: auto;
        height: inherit;
    }
    section article.welfareHRbox .bannerBox .kvComplex_M{
        display: block;
        position: relative;
        top: 0;
        width: 100%;
        padding-bottom: 37%;
        height: initial;
        height: auto;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
    }
    section article.welfareHRbox .bannerBox .bannerTitle {
        position: relative;
        padding: 21px 20px 36px;
        top: 0;
        right: 0;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    section article.welfareHRbox .bannerBox .bannerTitle h3 {
        color: #333;
        font-weight: bold;
        font-size: 16px;
        line-height: 20px;
        margin: 0 0 16px 0;
    }
    section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd .salaryBox,
    section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd .bonusBox{
        float: none;
        width: 100%;
        min-height: auto;
    }
    section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd > div {
        padding: 0 6px;
        margin-bottom: 20px;
        border-left: 2px #ccc solid;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd h4 {
        height: auto;
        font-size: 15px;
        line-height: 20px;
        margin: 0 0 8px 0;
    }
    section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd p {
        height: auto;
        font-size: 13px;
        line-height: 20px;
    }
    section article.welfareHRbox .welFacBg {
        padding: 40px 0 0 0;
    }
    section article.welfareHRbox .welFacBox .bannerTitle {
        margin: 0 auto 25px auto;
        text-align: center;
    }
    section article.welfareHRbox .welFacBox .bannerTitle h3 {
        width: 72px;
        margin: 0px auto 17px auto;
        padding: 5px 0 0 0;
        font-size: 18px;
        line-height: 22px;
        border-top: 2px #caa778 solid;
    }
    section article.welfareHRbox .welFacBox .bannerTitle p {
        font-size: 13px;
        line-height: 18px;
    }
    section article.welfareHRbox .welFacBox .facilityBoxList ul {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    }
    section article.welfareHRbox .welFacBox .facilityBoxList li {
        width: calc(50% - 5px);
        min-height: 160px;
        margin: 0 0 10px;
        max-width: calc(50% - 5px);
        max-width: auto;
        padding: 12px 15px 24px 15px;
        border-top: 2px #aaaaaa solid;
        font-size: 13px;
        line-height: 15px;
    }
    section article.welfareHRbox .welFacBox .facilityBoxList li .title {
        max-width: 380px;
        margin: 15px auto 0 auto;
    }
    section article.welfareHRbox .welFacBox .facilityBoxList li .icon {
        width: 72px;
        height: 60px;
    }
    section article.welfareHRbox .welFacBox .facilityBoxList li.fullwidth {
        width: 100%;
        max-width: 100%
    }
    section article.welfareHRbox .welFacBox .facilityBoxList li.fullwidth .icon {
        width: 82px;
        height: 75px;
        margin: 0 auto 5px auto;
    }
    section article.welfareHRbox .welFacBox .retireBox {
        margin: 0 auto 40px auto;
        max-width: 100%;
    }
    section article.welfareHRbox .welFacBox .retireBox .retireBoxIn{
        margin: 0 20px 10px 20px;
        text-align: left;
        max-width: 100%;
        padding: 15px 18px;
        border-top: 2px #aaaaaa solid;
        font-size: 13px;
        line-height: 20px;
        color: #282828;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.3);
        box-shadow: 0 5px 10px rgba(0,0,0,0.3);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
    }
    section article.welfareHRbox .retireBox .icon {
        float: none;
        width: 82px;
        height: 100px;
        margin: 0px auto 0;
        -webkit-background-size: 82px auto;
        background-size: 82px auto;
    }
    section article.welfareHRbox .welFacBox .retireBox .retContBox {
        width: 100%;
        float: none;
    }
    section article.welfareHRbox .welFacBox .facilityBoxList {
        max-width: 100%;
        margin: 0 20px;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox.first{
        padding: 0px 0 32% 0;
    }
     section article.welfareHRbox .welFacBox .travelActiveBox {
        padding: 0px 0 45% 0;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox.first .activeBox {
        position: relative;
        width: 100%;
        height: initial;
        height: auto;
        max-height: 360px;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox .traActBoxBd h3 {
        width: 72px;
        margin: 0 auto 20px auto;
        padding: 5px 0 0 0;
        font-size: 18px;
        line-height: 20px;
        color: #ac834d;
        border-top: 2px #caa778 solid;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox .traActBoxBd p {
        font-size: 13px;
        line-height: 18px;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox .activeBox .traActBoxBd,
    section article.welfareHRbox .welFacBox .travelActiveBox .travelBox .traActBoxBd{
        display: block;
        float: none;
        width: 100%;
        max-width: 100%;
        min-height: initial;
        min-height: auto;
        margin: 0 auto 20px;
    }

    section article.welfareHRbox .welFacBox .travelActiveBox .activeBox .traActPhoto,
    section article.welfareHRbox .welFacBox .travelActiveBox .travelBox .traActPhoto{
        display: block;
        float: none;
        top: 0;
        max-width: 93%;
        width: 100%;
        margin: 0 auto 20px;
    }


/* learning
*----------------------------------------------------------------------------*/
    section article.learnHRbox .bannerBox .kvComplex {
        display: none;
    }
    section article.learnHRbox .bannerBox .kvComplex_M {
        position: relative;
        display: block;
        padding-bottom: 0;
    }
    section article.learnHRbox .bannerBox {
        height: auto;
    }
    section article.learnHRbox .bannerBox .bannerTitle {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        padding-bottom: 25px;
    }
    section article.learnHRbox .bannerBox .bannerTitle h3 {
        display: block;
        font-size: 20px;
        line-height: 28px;
        margin-top: 19px;
        font-weight: bold;
        padding: 0 20px 4px;
    }
    section article.learnHRbox .bannerBox .bannerTitle h4 {
        display: block;
        padding: 0 20px;
        font-size: 13px;
        line-height: 17px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex {
        position: relative;
        width: 220px;
        min-height: 240px;
        margin: 2px auto 20px auto;
        background: url(../images/hr/icon_learn_kv_m.png) no-repeat;
        -webkit-background-size: 220px auto;
        background-size: 220px auto;
        z-index: 4;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex .boxHd a, 
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex .boxHd span {
        display: block;
        padding: 5px 18px 2px 17px;
        color: #333;
        font-size: 13px;
        font-weight: bold;
        line-height: 20px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex .boxHd.on a {
        padding: 5px 26px 2px 17px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex .boxHd{
        position: relative;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex1 {
        top: 13px;
        left: 50px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex2 {
        top: 61px;
        left: -38px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex6 {
        top: 50px;
        left: 112px;
        width: 150px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex3 {
        top: 116px;
        left: -38px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex5 {
        top: 151px;
        left: 114px;
        width: 150px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex4 {
        top: 190px;
        left: 50px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex .boxBd {
        padding: 2px 18px 10px 18px;
        font-size: 13px;
    }

    /* two column */
    section article.learnHRbox .interviewBox .dirCusBox .title {
        font-size: 18px;
        line-height: 20px;
        margin: 0 0 20px 0;
    }
    section article.learnHRbox .interviewBox .dirCusBox .title span {
        padding: 0 0 0 9px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .title span:before {
        top: 50%;
        left: 0;
        margin: -8px 0 0 0;
        width: 2px;
        height: 16px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxBd h5:before {
        top: 6px;
        left: 6px;
        width: 6px;
        height: 6px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxBd {
        font-size: 13px;
        line-height: 20px;
        padding: 15px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .directMarketBox,
    section article.learnHRbox .interviewBox .dirCusBox .customerServiceBox {
        width: 100%;
        display: block;
        float: none;
    }
    section article.learnHRbox .interviewBox .dirCusBox .directMarketBox{
        margin-bottom: 40px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxCon {
        max-width: 100%;
        margin: 0 20px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .box{
        display: block;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .box > div{
        display: block;
        width: 100%;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .label {
        font-size: 15px;
        line-height: 31px;
        width: 100%;
        height: 30px;
        color: #fff;
        text-align: center;
        letter-spacing: 2px;
        background: #e8415c;
        border-bottom: 1px #d03a53 solid;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con {
        font-size: 13px;
        min-height: 36px;
        line-height: 36px;
        text-align: center;
        border-bottom: 1px #e5e5e5 solid;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con ul li,
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con ul li:nth-child(2),
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con ul li:nth-child(3) {
        display: table-cell;
        width: calc(33.33% - 1px);
        height: auto;
        text-align: center;
        border-right: 1px #e5e5e5 solid;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con ul {
        margin: 0;
        width: 100%;
        display: table;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con{
        padding: 0;
    }
    section article.learnHRbox .interviewBox .dirCusBox .customerServiceBox .dirCusBoxHd .con ul li a.twoHeight {
        padding: 8px 2px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con ul li a {
        min-height: auto;
        font-size: 13px;
        line-height: 20px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .btnDirCus a {
        position: relative;
        line-height: 30px;
        font-size: 15px;
        padding: 5px 0;
    }
    section article.learnHRbox .interviewBox .dirCusBox .btnDirCus span {
        width: 18px;
        top: -1px;
        -webkit-background-size: 12px auto;
        background-size: 12px auto;
    }
    section article.learnHRbox .interviewBox .stepBoxList .stepWidth {
        max-width: 80%;
    }
    section article.learnHRbox .interviewBox {
        padding: 40px 0 40px;
    }
    section article.learnHRbox .interviewBox .bannerTitle {
        width: 72px;
        margin: 0 auto 20px auto;
    }
    section article.learnHRbox .interviewBox .bannerTitle h3 {
        padding: 5px 0 0 0;
        font-size: 18px;
        line-height: 20px;
        border-top: 2px #999 solid;
    }
    section article.learnHRbox .interviewBox .stepBoxList {
        margin: 0 auto 50px auto;
    }
    section article.learnHRbox .interviewBox .stepBoxList .steps {
        position: relative;
        display: block;
        max-width: 90px !important;
        height: auto;
        margin: 0 .8%;
        border: 3px #c9c9c9 solid;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #fff;
    }
    section article.learnHRbox .interviewBox .stepBoxList .steps > div {
        display: block;
        vertical-align: middle;
        height: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    section article.learnHRbox .interviewBox .stepBoxList .steps .stepBox {
        position: relative;
        text-align: center;
        width: auto;
        padding: 23% 0 8% 0;
        font-size: 14px;
        font-family: Arial;
        color: #f4b1b9;
        background: #e8415c;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }
    section article.learnHRbox .interviewBox .stepBoxList .steps .title {
        width: auto;
        padding: 15px 0 15px 0;
        color: #333;
        font-size: 13px;
        line-height: 17px;
    }
    section article.learnHRbox .interviewBox .stepBoxList .steps .title > span{
        display: block;
    }
    section article.learnHRbox .interviewBox .stepBoxList .steps .stepBox span.num {
        font-size: 36px;
    }
    section article.learnHRbox .interviewBox .stepBoxList .steps .stepBox span.ste {
        width: 30px;
    }
    section article.learnHRbox .interviewBox .stepBoxList .steps .stepBox:before {
        right: 60%;
        top: 100%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 6px 0px 6px;
        border-color: #e8415c transparent transparent transparent;
    }
    section article.learnHRbox .interviewBox .stepBoxList .steps:before {
        width: 24px;
        right: -26px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .btnDirCus {
        position: relative;
        margin-top: 20px;
        bottom: 0;
        left: 0;
        right: 0;
    }

  
/* how to go
*----------------------------------------------------------------------------*/
    .locationBox .singleColumn {
        width: 93%;
        margin: 0 auto;
        padding: 0px;
        background: #fff;
    }
    .editBox table.coupontable th, 
    .editBox table.coupontable td, 
    .editBox table.posttable th, 
    .editBox table.posttable td, 
    .editBox table.winning th, 
    .editBox table.winning td, 
    .editBox table.data th, 
    .editBox table.data td{
        padding: 5px 8px;
    }
    .editBox table.posttable th:nth-child(1){
        width: 27%;
    }
    .editBox table.posttable th:nth-child(2){
        width: 57%;
    }
    .editBox table.posttable th:nth-child(3){
        width: 16%;
    }
    section article.welfareHRbox .detailBoxBd {
        padding: 20px 0 0;
    }
    






}















@media only screen 
and (max-width : 640px) {


}
@media only screen 
and (max-width : 600px) {

/* index
*----------------------------------------------------------------------------*/
    
    section article.welfareHRbox .activities{
        max-width: 274px;/*1088-820px*/
    }

    .slick-slider {
        margin: 0 auto;
    }

}


@media only screen and (max-width: 594px){
    /*  outstanding slider show */
    section article.recruitHRbox .outstandingBox .itemWrapBox .item {
        margin: 10px 30px;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox .item:after {
        content: '';
        position: absolute;
        left: 108%;
        top: calc(50% - 4px);
        width: 40px;
        height: 7px;
        background: url(../images/hr/multiLine.png) no-repeat center center;
        background-size: auto 7px;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox {
        padding: 240px 0 0;
    }
    section article.recruitHRbox .outstandingBox .slick-slider .slick-prev {
        left: calc(50% - 150px);
        top: 80%;
        background: url(../images/icon/icon_Arrow_circle.png) no-repeat center;
        background-size: 100% auto;
    }
    section article.recruitHRbox .outstandingBox .slick-slider .slick-next {
        right: calc(50% - 150px);
        top: 80%;
        background: url(../images/icon/icon_Arrow_circle.png) no-repeat center;
        background-size: 100% auto;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    section article.recruitHRbox .outstandingBox .slick-slider .slick-next:hover{
        -webkit-transform: rotateY(180deg) scale(1.03);
        -moz-transform: rotateY(180deg) scale(1.03);
        -ms-transform: rotateY(180deg) scale(1.03);
        transform: rotateY(180deg) scale(1.03);
    }
    section article.recruitHRbox .outstandingBox .slick-slider .slick-prev:hover{
        -webkit-transform: scale(1.03);
        -moz-transform: scale(1.03);
        -ms-transform: scale(1.03);
        transform: scale(1.03);
    }
    
}



@media only screen 
and (max-width : 460px) {

/* index
*----------------------------------------------------------------------------*/
    /*
    section article.recruitHRbox .hotVacaBox .hotVacaList .hotVacaWrap {
        position: absolute;
        width: 100%;
        height: 212px;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }

    section article.recruitHRbox .hotVacaBox .hotVacaList {
        max-width:208px;/* 208px
        background: pink
    }*/

}



/*i6 plus*/
@media only screen 
and (max-width : 414px) {
/* index
*----------------------------------------------------------------------------*/
    section article.recruitHRbox .videoBox .videoPlayBox {
        height: 190px;
    }
    section article.recruitHRbox .videoBox {
        height: 485px;
    }
    section article.recruitHRbox .hotVacaBox {
        padding: 0;
    }
/* falware
*----------------------------------------------------------------------------*/
    section article.welfareHRbox .welFacBox .travelActiveBox.first {
        padding: 0px 0 40% 0;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox.first .activeBox {
        max-height: 260px;
    }

}






@media only screen 
and (max-width : 320px) {
    .activities .slick-slider .slick-prev {
        left: -28px;
    }
    .activities .slick-slider .slick-next {
        right: -28px;
    }
}











/**
*
* iPads
*
**/
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

/* index
*--------------------------------*/ 
    section article.recruitHRbox .bannerBox .bannerTitle {
        top: 150px;
        width: 350px;
    }
    section article.recruitHRbox .hotVacaBox .moreVaca .button {
        top: -8px;
        right: 50%;
        margin-right: -51px;
    }
    section article.recruitHRbox .hotVacaBox .hotVacaList {
        max-width: 100%;
    }
    section article.recruitHRbox .hotVacaBox .hotVacaList .vacaItem {
        width: 168px;
        height: 168px;
        margin: 0 20px;
        padding: 28px 0 0 0;
    }
    section article.recruitHRbox .hotVacaBox .hotVacaList .area {
        height: 32px;
        padding-top: 20px;
    }


/* learning
*--------------------------------*/
    section article.learnHRbox .bannerBox .kvComplex {
        display: none;
    }
    section article.learnHRbox .bannerBox .kvComplex_M {
        position: relative;
        display: block;
        padding-bottom: 0;
    }
    section article.learnHRbox .bannerBox .kvComplex_M img{
        width: 100%;
    }
    section article.learnHRbox .bannerBox {
        height: auto;
    }
    section article.learnHRbox .bannerBox .bannerTitle {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        padding-bottom: 25px;
    }
    section article.learnHRbox .bannerBox .bannerTitle h3 {
        display: block;
        font-size: 40px;
        line-height: 42px;
        margin-top: 20px;
        font-weight: bold;
        padding: 0 20px 4px;
    }
    section article.learnHRbox .bannerBox .bannerTitle h4 {
        display: block;
        padding: 0 20px;
      
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex {
        margin: 0 auto 40px;
    }

    /* two column */
    section article.learnHRbox .interviewBox .dirCusBox .directMarketBox,
    section article.learnHRbox .interviewBox .dirCusBox .customerServiceBox {
        width: 100%;
        display: block;
        float: none;
    }
    section article.learnHRbox .interviewBox .dirCusBox .directMarketBox{
        margin-bottom: 70px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxCon {
        max-width: 100%;
        margin: 0 20px;
    }
    section article.learnHRbox .interviewBox .dirCusBox .box{
        display: block;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .box > div{
        display: block;
        width: 100%;
        text-align: center;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con ul li,
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con ul li:nth-child(2),
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con ul li:nth-child(3) {
        display: table-cell;
        width: calc(33.33% - 1px);
        height: auto;
        text-align: center;
        border-right: 1px #e5e5e5 solid;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con ul {
        margin: 0;
        width: 100%;
        display: table;
    }
    section article.learnHRbox .interviewBox .dirCusBox .dirCusBoxHd .con{
        padding: 0;
    }
    section article.learnHRbox .interviewBox .dirCusBox .customerServiceBox .dirCusBoxHd .con ul li a.twoHeight {
        padding: 8px 2px;
    }
    section article.learnHRbox .interviewBox {
        padding: 40px 0 60px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex4 {
        top: 324px;
        left: 192px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex3 {
        top: 225px;
        left: 22px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex2 {
        top: 80px;
        left: 23px;
    }
    section article.learnHRbox .bannerBox .bannerTitle .bannerBoxComplex .boxComplex5 {
        top: 231px;
        left: 326px;
    }

/* farware
*--------------------------------*/
    section article.welfareHRbox .bannerBox {
        position: relative;
        height: inherit;
    }
    section article.welfareHRbox .bannerBox .bannerTitle {
        position: relative;
        padding: 21px 20px 36px;
        top: 0;
        right: 0;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    section article.welfareHRbox .bannerBox .kvComplex {
        display: none;
    }
    section article.welfareHRbox .bannerBox .kvComplex_M {
        display: block;
        position: relative;
        top: 0;
        width: 100%;
        padding-bottom: 37%;
        height: initial;
        height: auto;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
    }
    section article.welfareHRbox .bannerBox .bannerTitle {
        position: relative;
        padding: 21px 20px 36px;
        top: 0;
        right: 0;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd .salaryBox, section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd .bonusBox {
        float: none;
        width: 100%;
    }
    section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd .salaryBox{
        margin-bottom: 20px;
    }
    section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd h4 {
        height: 1.4em;
    }
    section article.welfareHRbox .bannerBox .bannerTitle .bannerBoxBd p {
        height: 3.5em;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox.first {
        padding: 20px 0 0 0;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox .activeBox .traActPhoto,
    section article.welfareHRbox .welFacBox .travelActiveBox .travelBox .traActPhoto {
        top: -40px;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox {
        padding: 80px 0 60px 0;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox .main {
        padding: 0 40px;
    }
    section article.welfareHRbox .welFacBg {
        min-height: initial;
        min-height: auto;
    }
    section article.welfareHRbox .welFacBox .facilityBoxList {
        max-width: 100%;
        margin: 0 35px 20px;
    }
    section article.welfareHRbox .welFacBox .facilityBoxList ul{
        margin: 0 -2%;
    }
    section article.welfareHRbox .welFacBox .facilityBoxList li {
        width: calc(33.33% - 4%);
        margin: 0 2% 30px;
        padding: 15px 30px 26px;
        max-width: initial;
    }
    /*section article.welfareHRbox .welFacBox .facilityBoxList li:nth-child(3) {
        margin: 0;
    }*/
    section article.welfareHRbox .welFacBox .retireBox {
        margin: 0 20px 80px 20px;
        max-width: 100%;
    }
    section article.welfareHRbox .welFacBox .retireBox .retireBoxIn {
        margin: 0;
    }
    section article.welfareHRbox .welFacBox .travelActiveBox .activeBox .traActBoxBd,
    section article.welfareHRbox .welFacBox .travelActiveBox .travelBox .traActBoxBd {
        top: -40px;
        position: relative;
    }

/* how to go
*--------------------------------*/
    section article.welfareHRbox .detailBoxBd {
        padding: 0;
    }
    section article.welfareHRbox .joinTabs .iframeBox {
        overflow-x: scroll;
    }

/* happy
*--------------------------------*/
    section article.welfareHRbox .happinessBoxBox .facilityBoxList ul {
        max-width: 722px;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList li {
        margin: 22px 10px 0px;
    }

}





@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    section article.recruitHRbox .bannerBox .kvComplex {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 475px;
        background-repeat: no-repeat;
        background-position: 58% center;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox {
        padding: 292px 7.5% 0;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox .decoLine {
        width: 82px;
        height: 82px;
    }
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

    section article.welfareHRbox .welFacBox .travelActiveBox {
        padding: 120px 0 80px 0;
    }
    section article.welfareHRbox .happinessBoxBox .facilityBoxList ul {
        max-width: 850px;
    }
    section article.recruitHRbox .hotVacaBox .hotVacaList .vacaItem {
        width: 168px !important;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox {
        max-width: 700px;
    }
    section article.recruitHRbox .outstandingBox .itemWrapBox .decoLine {
        width: 80px;
        height: 80px;
    }
}
/**
*
* iPhones 
*
**/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) {
    section {
        padding: 72px 0 0 0;
    }
    section.minSize,
    section.maxSize { padding: 42px 0 0;}

}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) 
and (orientation : portrait) {

}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) 
and (orientation : landscape) {

}
/**
*
* ratio: 1.5
*
**/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5){
}