@charset "utf-8";

@media (max-width: 1600px) {
    .hero .logo {top:30px; left:50px;}
    .hero .logo img {height:80px;}
    .hero .text img {height:140px;}
    .hero .text span {font-size:40px;}

    .nav {padding-top:60px;}
    .nav ul li a {width:160px; font-size:20px; line-height:45px;}

    .company {padding:60px 0;}
    .company .right {font-size:18px;}

    .welfare {padding:60px 0;}

    .recruit {padding:120px 0 60px;}
    .recruit h2 {font-size:30px;}

    .sticky-text .marquee span {font-size:16px;}

    #footer {padding:40px 0; font-size:14px;}
    #footer .contain {gap:40px;}
    .footer-logo img {height:62px;}
}

/* Landscape tablet */
@media (max-width: 1024px) {
    .hero .logo {top:24px; left:24px;}
    .hero .logo img {height:70px;}
    .hero .text img {height:120px;}
    .hero .text span {font-size:32px; margin-right:16px;}

    .nav ul li a {width:140px; font-size:18px; line-height:40px;}

    .company .contain {gap:30px;}
    .company .left {width:52%;}
    .company .right {width:42%; font-size:15px;}

    .recruit h2 {font-size:24px;}
    .recruit .left .content {font-size:14px;}
    .recruit .left .group h3 {font-size:18px;}
    .recruit .right .address {font-size:18px;}
    .recruit .right .tel {font-size:14px;}

/* portrait tablet */
@media (max-width: 900px) {	
	.only-desktop {display:none;}
	.only-tablet {display:block;}

    .hero .text span {display:block;position:static; margin:0 0 30px; text-align:center; font-weight:700; text-shadow:2px 2px 3px rgba(0,0,0,0.8);}

    .nav {padding-top:30px;}

    .company {padding:100px 0 80px;}
    .company .contain {flex-direction:column;}
    .company .left {width:100%; max-width:100%; text-align:center;}
    .company .right {order:-1; width:100%; max-width:100%; margin-top:0;}

    .welfare {padding:100px 0 80px;}
    .welfare .left {width:100%; max-width:100%; text-align:center;}

    .recruit {padding:100px 0 80px;}
    .recruit .contain {flex-direction:column; max-width:600px; margin:0 auto;}
    .recruit h2 {font-size:24px;}
    .recruit .left {width:100%; max-width:100%;}
    .recruit .left .content {font-size:14px;}
    .recruit .left .group h3 {font-size:18px;}
    .recruit .right {width:100%; max-width:100%;}
    .recruit .right .address {font-size:18px;}
    .recruit .right .tel {font-size:14px;}

    #footer .contain {flex-direction:column; align-items:flex-start; gap:30px;}
    .footer-text {width:auto;}
	
} 

/* Landscape phone */
@media (max-width: 640px) {
	.only-desktop-tablet {display:none;}
	.only-tablet {display:none;}
	.only-mobile {display:block;}

	.contain {padding-left:16px; padding-right:16px;}

	.hero .logo {top:16px; left:16px;}
    .hero .logo img {height:50px;}
    .hero .text img {height:70px;}
    .hero .text span {font-size:24px; margin-bottom:16px;}

    .nav {padding-top:24px;}
    .nav ul {width:100%; padding:0 16px; gap:0;}
    .nav ul li {flex:1; margin:0 -4px;}
    .nav ul li a {width:100%; font-size:15px; line-height:36px;}

    .recruit h2 {margin-bottom:30px; font-size:20px;}
    .recruit h2 span {padding:6px 25px;}
    .recruit .box {height:460px;}
    .recruit .left {padding:20px;}
    .recruit .left .group h3 {margin-bottom:20px; font-size:16px;}
    .recruit .left .group h3:before {width:80px;}
    .recruit .right .content {padding:20px;}

    .sticky-text .marquee span {font-size:14px;}

    #footer {padding:30px 0; font-size:13px;}
    .footer-logo img {height:50px;}
    .footer-text .bar {display:none !important;}

    
} 

/* Landscape phones and down */
@media (max-width: 320px) {

}