@charset "utf-8";

body{
    background-color: #1a1a1a;
}

@media only screen and (min-width: 1200px) {

                /*main visual*/
                #main_vis { 
                    width: 100%;
                    height: 720px;
                    background: url(../img/career_mainvis.jpg);
                    background-position: 50% 50%;
                    background-repeat: no-repeat;
                    background-attachment: fixed;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                }

                /*contents*/
                #container h4{
                    padding-top: 50px;
                    font-weight: 300;
                    color: white;
                    text-align: center;
                }

                #container h5{
                    font-weight: 300;
                    color: white;
                }

                #container h6{
                    font-weight: 300;
                    color: white;
                }

                #container p{
                    font-weight: 300;
                    color: white;
                    opacity: 0.8;
                    padding-bottom: 20px;
                }

                #container p:last-child {
                    padding-bottom: 0;
                }

                #container > ul, #container > div {
                    width: 1200px;
                    margin: 0 auto;
                }

                #container ul.smallbox {
                width: 1200px;
                height: 300px;
                margin: 0 auto;
                margin-top: 30px;
                }

                #container ul.smallbox li {
                    width: 380px;
                    height: 300px; 
                    float: left; 
                    position: relative; cursor: pointer;
                }

                #container ul.smallbox li.kf1 {
                    background: url(../img/career_kf1.jpg);
                }

                #container ul.smallbox li.kf2 {
                    background: url(../img/career_kf2.jpg);
                }

                #container ul.smallbox li.kf3 {
                    background: url(../img/career_kf3.jpg);
                }

                #container ul.smallbox li h5 {
                    color: #1a1a1a; height: 300px;
                    text-align: center; 
                    padding-top: 35%;
                    transition: all 0.3s ease 0s;
                }

                #container ul.smallbox li~li {
                    margin-left: 20px;
                }

                #container ul.smallbox .hidden {
                    display: none;
                    color: #efefef;
                    text-align: left; 
                    position: absolute;
                    width: 370px; height: 300px;
                    top: 115px;
                    left: 0;
                }

                #container ul.smallbox .hidden p~p {
                    margin-top: 12px;
                }

                #container ul.smallbox li:hover h5 {
                    background-color: #1a1a1a;
                    border: 1px solid #efefef;
                    color: #efefef;
                    padding-top: 85px;
                }

                #container ul.smallbox li:hover .hidden {
                    display: block; margin-top: 20px;

                }

                #container ul.smallbox li:hover .hidden p {
                    line-height: 22px; opacity: 0.8; font-size: 13pt; font-weight: 300; text-align: center; width: 300px;
                    margin: 0 auto;
                }

                #container ul.smallbox img {
                    display: block;
                    width: 974px;  
                    margin: 0 auto;
                    padding-top: 350px;
                    padding-bottom: 20px;
                }

                #container ul.smallbox .hidden span{
                    display: block;
                    width: 20px;
                    height: 2px;
                    background-color: #c42127;
                    margin: 0 auto;
                    /*margin-top: 20px;*/
                    margin-bottom: 15px;
                }

                #container ul.smallbox > li~li {
                    margin-left: 30px;
                }

                #container ul.bigbox {
                    margin-top: 30px;
                }

                #container ul.bigbox > li {
                    padding: 30px;
                    width: 1200px;
                    border: 1px solid #efefef;
                }

                #container ul.bigbox > li~li {
                    margin-top: 30px;
                }

                #container ul.bigbox > li > span{
                    display: block;
                    width: 20px;
                    height: 2px;
                    background-color: #c42127;
                    margin-bottom: 20px;
                }



                /*button*/
                #container .button {
                    width: 296px;
                    height: 46px;
                    margin: 0 auto;
                    margin-top: 60px;
                    border: 2px solid #efefef;
                    position: relative;
                    overflow: hidden;
                }

                #container .button:hover{
                    border-color: #c42127;
                }

                #container .button a{
                    display: block;
                    width: 0;
                    height: 46px;
                    -webkit-transition: width 0.2s; /* For Safari 3.1 to 6.0 */
                    transition: width 0.2s;
                }

                #container .button a:hover{
                    text-decoration: none;
                    background: #c42127;
                    width: 294px;
                }

                #container .button span{
                    display: block;
                    width: 292px;
                    height: 42px;
                    font-family: 'Titillium Web', sans-serif;
                    font-size: 13pt;
                    font-weight: 300;
                    color: #efefef;
                    letter-spacing: 1px;
                    padding-top: 9px; text-align: left; padding-left: 20px;
                    background: url(../img/arrow_right_over.png) no-repeat 93% 48%;
                }

                #container .button span:hover{
                    color: black;
                    font-weight: 300;
                    background: url(../img/arrow_right.png) no-repeat 93% 48%;
                }

                #container .apply {
                    width: 1200px;
                    border: 1px solid #efefef;
                    margin-top: 30px;
                    padding: 30px;
                }

                #container .apply span{
                    display: block;
                    width: 20px;
                    height: 2px;
                    background-color: #c42127;
                    margin-top: 20px;
                    margin-bottom: 20px;
                }

}




@media only screen and (max-width: 1200px) {
                /*main visual*/
                #main_vis { 
                    width: 100%;
                    height: 600px;
                    background: url(../img/career_mainvis.jpg);
                    background-position: 50% 50%;
                    background-repeat: no-repeat;
                    background-attachment: fixed;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                }

                /*contents*/
                #container h4{
                    padding-top: 50px;
                    font-weight: 300;
                    color: white;
                    text-align: center;
                }

                #container h5{
                    font-weight: 300;
                    color: white;
                }

                #container h6{
                    font-weight: 300;
                    color: white;
                }

                #container p{
                    font-weight: 300;
                    color: white;
                    opacity: 0.8;
                    padding-bottom: 20px;
                }

                #container p:last-child {
                    padding-bottom: 0;
                }

                #container > ul, #container > div {
                    width: 820px;
                    margin: 0 auto;
                }

                #container ul.smallbox {
                width: 820px; overflow: hidden;
                height: auto;
                margin: 0 auto;
                margin-top: 30px;
                }

                #container ul.smallbox li {
                    width: 820px;
                    height: 150px; 
                    float: left; 
                    position: relative; cursor: pointer;
                }

                #container ul.smallbox li.kf1 {
                    background: url(../img/career_kf11.jpg);
                }

                #container ul.smallbox li.kf2 {
                    background: url(../img/career_kf22.jpg);
                }

                #container ul.smallbox li.kf3 {
                    background: url(../img/career_kf33.jpg);
                }

                #container ul.smallbox li h5 {
                    color: #1a1a1a; height: 150px;
                    text-align: center; 
                    padding-top: 7%;
                    transition: all 0.3s ease 0s;
                }

                #container ul.smallbox li~li {
                    margin-left: 0; margin-top: 20px;
                }

                #container ul.smallbox .hidden {
                    display: none;
                    color: #efefef;
                    text-align: left; 
                    position: absolute;
                    width: 820px; height: 300px;
                    top: 55px;
                    left: 0;
                }

                #container ul.smallbox .hidden p~p {
                    margin-top: 12px;
                }

                #container ul.smallbox li:hover h5 {
                    background-color: #1a1a1a;
                    border: 1px solid #efefef;
                    color: #efefef;
                    padding-top: 30px;
                }

                #container ul.smallbox li:hover .hidden {
                    display: block; margin-top: 20px;

                }

                #container ul.smallbox li:hover .hidden p {
                    line-height: 22px; opacity: 0.8; font-size: 12pt; font-weight: 300; text-align: center; width: 820px;
                    margin: 0 auto;
                }

                #container ul.smallbox img {
                    display: block;
                    width: 974px;  
                    margin: 0 auto;
                    padding-top: 350px;
                    padding-bottom: 20px;
                }

                #container ul.smallbox .hidden span{
                    display: block;
                    width: 20px;
                    height: 2px;
                    background-color: #c42127;
                    margin: 0 auto;
                    /*margin-top: 20px;*/
                    margin-bottom: 10px;
                }

                #container ul.bigbox {
                    margin-top: 20px;
                }

                #container ul.bigbox > li {
                    padding: 30px;
                    width: 820px;
                    border: 1px solid #efefef;
                }

                #container ul.bigbox > li~li {
                    margin-top: 20px;
                }

                #container ul.bigbox > li > span{
                    display: block;
                    width: 20px;
                    height: 2px;
                    background-color: #c42127;
                    margin-bottom: 20px;
                }

                #container .apply {
                    width: 820px;
                    border: 1px solid #efefef;
                    margin-top: 30px;
                    padding: 30px;
                }

                #container .apply span{
                    display: block;
                    width: 20px;
                    height: 2px;
                    background-color: #c42127;
                    margin-top: 20px;
                    margin-bottom: 20px;
                }
}


@media only screen and (max-width: 820px) {
                /*main visual*/
                #main_vis { 
                    width: 100%;
                    height: 420px;
                    background: url(../img/career_mainvis2.jpg) no-repeat center;
                    position: relative; 
                }

                #main_vis h3{
                    padding-top: 180px;
                }


                /*contents*/
                #container h4{
                    padding-top: 50px;
                    font-weight: 300;
                    color: white;
                    text-align: center;
                }

                #container h5{
                    font-weight: 300;
                    color: white;
                }

                #container h6{
                    font-weight: 300;
                    color: white;
                }

                #container p{
                    font-weight: 300;
                    color: white;
                    opacity: 0.8;
                    padding-bottom: 20px;
                }

                #container p:last-child {
                    padding-bottom: 0;
                }

                #container > ul, #container > div {
                    width: 85%;
                    margin: 0 auto;
                }

                #container ul.bigbox > li {
                    padding: 30px;
                }

                #container ul.smallbox {
                    width: 85%; overflow: hidden;
                    height: auto;
                    margin: 0 auto;
                    margin-top: 20px;
                }

                #container ul.smallbox li {
                    width: 100%; overflow: hidden;
                    height: auto; 
                    float: left; 
                    position: static; cursor: initial;
                    border: 1px solid #efefef; 
                    padding: 30px;
                }

                #container ul.smallbox li h5 {
                    color: #efefef; height: auto;
                    text-align: left; 
                    padding-top: 0;
                    border: none;
                }

                #container ul.smallbox li~li {
                    margin-left: 0; margin-top: 20px;
                }

                #container ul.smallbox .hidden {
                    display: block;
                    color: #efefef;
                    text-align: left; 
                    position: static;
                    width: 100%; height: auto; background-image: none;
                }

                #container ul.smallbox li.hidden p {
                    line-height: 22px; opacity: 0.8; font-size: 12pt; font-weight: 300; text-align: left; width: 100%;
                    margin: 0 auto;
                }

                #container ul.smallbox .hidden p~p {
                    margin-top: 12px;
                }

                #container ul.smallbox li:hover h5 {
                    color: #efefef; height: auto;
                    text-align: left; 
                    padding-top: 0;
                    border: none;
                }

                #container ul.smallbox li:hover .hidden {
                    display: block;
                    color: #efefef;
                    text-align: left; 
                    position: static;
                    width: 100%; height: auto; margin-top: 0;
                }

                #container ul.smallbox li:hover .hidden p {
                    line-height: 22px; opacity: 0.8; font-size: 12pt; font-weight: 300; text-align: left; width: 100%;
                    margin: 0 auto;
                }

                #container ul.smallbox .hidden span{
                    display: block;
                    width: 100%;
                    height: 2px;
                    background-color: #c42127;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    margin-left: 0; opacity: 0.3;
                }

                #container ul.smallbox li.kf1 {
                    background: none;
                }

                #container ul.smallbox li.kf2 {
                    background: none;
                }

                #container ul.smallbox li.kf3 {
                    background: none;
                }

                #container ul.bigbox {
                    width: 85%;
                    margin-top: 20px;
                }

                #container ul.bigbox > li {
                    width: 100%;
                    border: 1px solid #efefef;
                }

                #container ul.bigbox > li~li {
                    margin-top: 20px;
                }

                #container ul.bigbox > li > span{
                    display: block;
                    width: 20px;
                    height: 2px;
                    background-color: #c42127;
                    margin-bottom: 20px;
                }

                #container .apply {
                    width: 85%;
                    border: 1px solid #efefef;
                    margin-top: 20px;
                    padding: 30px;
                }

                #container .apply span{
                    display: block;
                    width: 20px;
                    height: 2px;
                    background-color: #c42127;
                    margin-top: 20px;
                    margin-bottom: 20px;
                }
}