@charset "utf-8";
@import "reset.css";
@import "common.css";

@media all and (min-width:1024px) and (max-width: 1400px) {

    [class $= 'inner'] {width: 900px !important; margin: 80px auto auto auto !important;}

    #header .header_inner {margin: 0 auto !important;}
    #header .menu ul {width: 90%;}
    #header .all_menu .all_menu_inner {margin: 0 auto !important;}

    #fullpage .full1 p {font-size: 40px;}

    p {font-size: 20px;}

    #parking_control article p {font-size: 15px;}
    #parking_control .biz ul li {height: 380px;}
    #parking_control .solution ul li {height: 440px;}

    #system_management .consulting_process ul li:nth-of-type(2n-1) {font-size: 20px;}
    #system_management .consulting table {width: 65%;}
    #system_management .type ul li {font-size: 18px; padding: 50px 0;}

    #product .product_inner ul li {width: 32%;}
    #product .product_inner ul li:not(:nth-of-type(4n)) {margin-right: 0;}
    #product .product_inner ul li:not(:nth-of-type(3n)) {margin-right: 2%;}
    #product .product_inner ul li:not(:nth-child(-n+4)) {margin-top: 0;}
    #product .product_inner ul li:not(:nth-child(-n+3)) {margin-top: 30px;}
    
    #notice_board .resultArea div .imgArea {height: 180px;}
}

@media all and (min-width:768px) and (max-width:1023px) {

    [class $= 'inner'] {width: 700px !important; margin: 80px auto auto auto !important;}

    #header .header_inner {margin: 0 auto !important;}
    #header .menu {font-size: 15px;}
    #header .menu ul {width: 90%;}
    #header .menu ul .main_list .sub_menu li {height: 50px; line-height: 50px;}
    #header .all_menu {height: 300px;}
    #header .all_menu .all_menu_inner {margin: 0 auto !important;}
    #header .a_menu {margin: unset;}
    .bar1, .bar2, .bar3 {width: 30px; height: 3px;}
    .change .bar1 {transform: rotate(-45deg) translate(-8px, 4px);}
    .change .bar3 {transform: rotate(45deg) translate(-8px, -5px);}
    #header ul .a_main_list {font-size: 15px;}
    #header ul .a_main_list .a_sub_menu li {height: 40px; line-height: 40px; font-size: 13px;}
    #header ul .a_main_list .a_sub_menu li a::after {height: 2px; bottom: 5px;}

    h1 {font-size: 40px; margin-bottom: 50px;}
    p {font-size: 15px;}

    #fullpage .full1 p {font-size: 35px;}
    #fullpage .title {font-size: 40px;}
    #fullpage p {font-size: 20px;}
    #fullpage .full2 ul li {width: 11%;}
    #fullpage .full2 ul li p {font-size: 18px;}
    #fullpage .full2 ul::after {height: 140px;}
    #fullpage .full3 ul {width: 700px;}
    #fullpage .full3 .text_area ul li {padding: 3.5% 0;}
    #fullpage .full3 .text_area ul li p:nth-of-type(1) {font-size: 60px;}

    #summary .business .text_area P:nth-of-type(1) {font-size: 18px;}
    #summary .company table {font-size: 15px;}
    #summary .company table tr {height: 40px;}

    #history .history_content .title {width: 30%;}
    #history .history_content .content {width: 70%;}

    #management_philosophy .management_philosophy_inner img {width: 60%;}
    #management_philosophy .management_philosophy_inner p {font-size: 20px;}

    #parking_control article ul {flex-direction: row; flex-wrap: wrap;}
    #parking_control article ul li .text_area .title {margin-bottom: 15px;}
    #parking_control article ul li {width: 49%;}
    #parking_control article p {font-size: 15px;}
    #parking_control .biz ul li {height: 370px;}
    #parking_control .solution ul li {height: 400px;}
    
    #system_management .consulting_process, #system_management .consulting {margin-bottom: 100px;}
    #system_management .consulting_process ul li {font-size: 15px; height: 80px; line-height: 80px;}
    #system_management .consulting_process ul li:nth-of-type(2n-1) {font-size: 18px;}
    #system_management .consulting table {width: 90%;}
    #system_management .type ul li {font-size: 14px; padding: 35px 0;}

    #upcs_composition article {margin-bottom: 150px;}

    #product .product_inner ul li {width: 32%; height: 320px;}
    #product .product_inner ul li:nth-of-type(1) img {width: 90%;}
    #product .product_inner ul li img {width: 30%;}
    #product .product_inner ul li:nth-of-type(5) img, #product .product_inner ul li:nth-of-type(6) img {top: 18%;}
    #product .product_inner ul li:not(:nth-of-type(4n)) {margin-right: 0;}
    #product .product_inner ul li:not(:nth-of-type(3n)) {margin-right: 2%;}
    #product .product_inner ul li:not(:nth-child(-n+4)) {margin-top: 0;}
    #product .product_inner ul li:not(:nth-child(-n+3)) {margin-top: 30px;}
    #product_detail_page .product_detail_page_inner .img_area {width: 300px; height: 300px;}
    #product_detail_page .product_content table {font-size: 15px;}
    #product_detail_page .product_content table tr {height: 40px;}

/*     #notice_board .notice_board_inner .search select {height: 25px; font-size: 15px;}
    #notice_board .notice_board_inner .search input[type=text] {height: 25px;}
    #notice_board .notice_board_inner .search button {height: 25px; font-size: 15px;}
    #notice_board .notice_board_inner table {margin-top: 100px;}
    #notice_board .notice_board_inner table {font-size: 15px;}
    #notice_board .notice_board_inner table tr {height: 40px;} */
    
    #notice_board .resultArea div {width: 32.6666%;}
    #notice_board .resultArea div:not(:nth-of-type(4n)) {margin-right: unset;}
    #notice_board .resultArea div:not(:nth-of-type(3n)) {margin-right: 1%;}
    
    #footer p {font-size: 13px;}
}

@media all and (min-width:480px) and (max-width:767px) {
    [class $= 'inner'] {width: 430px !important; margin: 150px auto !important; padding: unset !important;}

    #header .header_inner {display: unset;}
    #header .logo {width: 25%; margin: auto;}
    #header .logo a img {width: 100%;}
    #header .menu {display: none;}
    #header .all_menu {height: 580px;}
    #header .all_menu .all_menu_inner {flex-direction: column; margin: auto !important;}
    #header .all_menu .all_menu_inner .a_logo {width: 29.07%; margin: auto;}
    #header .all_menu .all_menu_inner .a_logo img {width: 100%;}
    #header .a_menu {margin: auto; height: 100%; width: 100%;}
    #header ul {height: auto; flex-direction: column;}
    #header ul .a_main_list {font-size: 15px; width: 100%; height: auto; line-height: unset; margin-top: 20px;}
    #header ul .a_main_list span {height: 30px; line-height: 30px; font-size: 15px;}
    #header ul .a_main_list .a_sub_menu li {height: 30px; line-height: 30px; font-size: 13px;}
    #header ul .a_main_list .a_sub_menu li a::after {height: 2px; bottom: 5px;}
    
    .bar1, .bar2, .bar3 {width: 30px; height: 3px;}
    .change .bar1 {transform: rotate(-45deg) translate(-8px, 4px);}
    .change .bar3 {transform: rotate(45deg) translate(-8px, -5px);}

    #fullpage .full1 .text_area p {font-size: 25px; text-shadow: 2px 1px 3px #fff;}
    #fullpage .text_area .title {font-size: 40px;}
    #fullpage .text_area p {font-size: 15px;}
    #fullpage .full2 ul, #fullpage .full3 ul {width: 90%;}
    #fullpage .full2 ul li p {font-size: 20px;}
    #fullpage .full2 ul::after {padding: unset; top: 265px; height: 230px;}
    #fullpage .full3 .text_area ul li {border: 3px solid #169a99; padding: 5.5% 0;}
    #fullpage .full3 .text_area ul li p:nth-of-type(1) {font-size: 50px; margin-bottom: 10px;}
    #fullpage .full3 .text_area ul .line {height: 4px;}

    h1 {font-size: 30px; margin-bottom: 50px;}
    h2 {font-size: 24px;}
    p {font-size: 13px;}

    #visual {display: none;}

    #summary .business {margin-bottom: 50px; flex-direction: column;}
    #summary article {margin: auto;}
    #summary .business img {width: 100%; box-shadow: 5px 5px 5px #555; margin-bottom: 30px;}
    #summary .business .text_area {width: 100%;}
    #summary .business .text_area P:nth-of-type(1) {font-size: 18px; text-align: center; margin-bottom: 10px;}
    #summary .company table {font-size: 14px;}
    #summary .company table tr {height: 40px;}
    #summary .company table th {width: 25%;}

    #history .history_content .title {width: 35%;}
    #history .history_content .content {width: 65%;}
    #history .history_content .content > p {height: 30px; font-size: 11px;}
    #history .history_content .l .title::before {right: -20%;}
    #history .history_content .r .title::before {left: -14%;}

    #management_philosophy .management_philosophy_inner img {width: 60%;}
    #management_philosophy .management_philosophy_inner p {font-size: 17px;}

    #licensing .licensing_info .licensing_img {width: 33.3333%;}
    #licensing .licensing_info .licensing_img p {font-size: 15px;}
    #licensing .licensing_info .licensing_img:not(:nth-child(2n)) {margin: unset;}
    #licensing .licensing_info .licensing_img:not(:nth-child(-n+3)) {margin-top: 20px;}

    #parking_control h2 {margin-bottom: 0;}
    #parking_control article {padding: 0 25px 30px 25px;}
    #parking_control article p {font-size: 12px;}
    #parking_control article ul {flex-direction: column;}
    #parking_control article ul li {width: 100%; border: none; border-radius: 0; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center;}
    #parking_control article ul li .img_area {width: 49%; margin-bottom: 0;}
    #parking_control article ul li .img_area img {margin-bottom: 0;}
    #parking_control article ul li .text_area {width: 49%;}
    #parking_control article ul li .text_area .title {margin-bottom: 10px;}
    #parking_control article ul li:not(:nth-of-type(4)) {border-bottom: 1px solid #169a99;}
    #parking_control article ul li:not(:nth-of-type(1)) {margin-left: 0;}
    #parking_control article ul li .text_area .title {font-size: 15px;}
    #parking_control .biz ul li {height: 170px;}
    #parking_control .solution ul li {height: 170px;}

    #system_management h2 {margin-bottom: 10px;}
    #system_management .system_management_inner article {padding: 0 30px 30px;}
    #system_management .consulting_process ul li {font-size: 10px; height: 45px; line-height: 45px;}
    #system_management .consulting_process, #system_management .consulting  {margin-bottom: 100px;}
    #system_management .consulting_process ul li:nth-of-type(2n-1) {font-size: 13px;}
    #system_management .consulting table {width: 100%; font-size: 15px;}
    #system_management .consulting table tr {height: 50px;}
    #system_management .consulting table tr th {width: 10%;}
    #system_management .consulting table tr td {width: 90%;}
    #system_management .consulting table tr th img {width: 70%;}
    #system_management .type ul {flex-wrap: wrap; flex-direction: row;}
    #system_management .type ul li {width: 33.3333%; height: 50px; line-height: 50px; font-size: 14px; padding: 0; background: none; border: none;}
    #system_management .type ul li:not(:nth-of-type(1)) {margin-left: 0;}
    #system_management .type .line {display: none;}

    #upcs_composition article {margin-bottom: 100px;}
    #upcs_composition article p {margin-bottom: 50px;}

    #product .product_inner ul li {width: 48%; height: 300px;}
    #product .product_inner ul li:nth-of-type(1) img {width: 90%;}
    #product .product_inner ul li img {width: 30%;}
    #product .product_inner ul li:nth-of-type(5) img, #product .product_inner ul li:nth-of-type(6) img {top: 18%;}
    #product .product_inner ul li:not(:nth-of-type(4n)) {margin-right: 0;}
    #product .product_inner ul li:not(:nth-of-type(3n)) {margin-right: 0;}
    #product .product_inner ul li:not(:nth-of-type(2n)) {margin-right: 2%;}
    #product .product_inner ul li:not(:nth-child(-n+4)) {margin-top: 0;}
    #product .product_inner ul li:not(:nth-child(-n+3)) {margin-top: 0;}
    #product .product_inner ul li:not(:nth-child(-n+2)) {margin-top: 30px;}

    #product_detail_page .product_detail_page_inner .img_area {width: 250px; height: 250px;}
    #product_detail_page .function {padding: 0 50px 30px 50px; margin-bottom: 60px;}
    #product_detail_page .function h2 {margin-bottom: 10px;}
    #product_detail_page .product_content table {font-size: 15px;}
    #product_detail_page .product_content table tr {height: 40px;}

    #brochure .brochure_inner ul li img {height: 100%;}
    #brochure .brochure_inner ul li p {margin: 10px 0;}

    /* #notice_board .notice_board_inner .search {left: 0;}
    #notice_board .notice_board_inner .search select {float: left; width: 25%; height: 25px; font-size: 13px; margin-right: 5px;}
    #notice_board .notice_board_inner .search input[type=text] {float: left; width: 57%; height: 25px;}
    #notice_board .notice_board_inner .search button {float: right; width: 15%; height: 25px; font-size: 15px; padding: 0;}
    #notice_board .notice_board_inner table {margin-top: 80px;}
    #notice_board .notice_board_inner table {font-size: 13px;}
    #notice_board .notice_board_inner table tr {height: 40px;} */
    
    #notice_board .resultArea div {width: 49%; margin-bottom: 5%;}
    #notice_board .resultArea div:not(:nth-of-type(4n)) {margin-right: unset;}
    #notice_board .resultArea div:not(:nth-of-type(3n)) {margin-right: unset;}
    #notice_board .resultArea div:not(:nth-of-type(2n)) {margin-right: 2%;}

    #footer p {font-size: 10px;}
}

@media all and (max-width:479px) {
	[class $= 'inner'] {width: 330px !important; margin: 130px auto !important; padding: unset !important;}

    #header .header_inner {display: unset;}
    #header .logo {width: 25%; margin: auto;}
    #header .logo a img {width: 100%;}
    #header .menu {display: none;}
    #header .all_menu {height: 580px;}
    #header .all_menu .all_menu_inner {flex-direction: column; margin: auto !important;}
    #header .all_menu .all_menu_inner .a_logo {width: 29.07%; margin: auto;}
    #header .all_menu .all_menu_inner .a_logo img {width: 100%;}
    #header .a_menu {margin: auto; height: 100%; width: 100%;}
    #header ul {height: auto; flex-direction: column;}
    #header ul .a_main_list {font-size: 15px; width: 100%; height: auto; line-height: unset; margin-top: 20px;}
    #header ul .a_main_list span {height: 30px; line-height: 30px; font-size: 15px;}
    #header ul .a_main_list .a_sub_menu li {height: 30px; line-height: 30px; font-size: 13px;}
    #header ul .a_main_list .a_sub_menu li a::after {height: 2px; bottom: 5px;}
    
    .bar1, .bar2, .bar3 {width: 30px; height: 3px;}
    .change .bar1 {transform: rotate(-45deg) translate(-8px, 4px);}
    .change .bar3 {transform: rotate(45deg) translate(-8px, -5px);}

    #fullpage .full1 .text_area p {font-size: 20px; text-shadow: 2px 1px 3px #fff;}
    #fullpage .text_area .title {font-size: 30px;}
    #fullpage .text_area p {font-size: 12px;}
    #fullpage .full2 ul {margin: 160px auto 0;}
    #fullpage .full2 ul, #fullpage .full3 ul {width: 95%;}
    #fullpage .full2 ul li p {font-size: 12px;}
    #fullpage .full2 ul::after {padding: unset; top: 245px; height: 150px;}
    #fullpage .full3 .text_area ul li {border: 3px solid #169a99; padding: 3.5% 0;}
    #fullpage .full3 .text_area ul li p:nth-of-type(1) {font-size: 35px; margin-bottom: 10px;}
    #fullpage .full3 .text_area ul .line {height: 4px;}
    #fullpage .footer p {font-size: 10px;}

    h1 {font-size: 30px; margin-bottom: 50px;}
    h2 {font-size: 18px;}
    p {font-size: 12px;}

    #visual {display: none;}

    #summary .business {margin-bottom: 50px; flex-direction: column;}
    #summary article {margin: auto;}
    #summary .business img {width: 100%; box-shadow: 5px 5px 5px #555; margin-bottom: 30px;}
    #summary .business .text_area {width: 100%;}
    #summary .business .text_area P:nth-of-type(1) {font-size: 18px; text-align: center; margin-bottom: 10px;}
    #summary .company table {font-size: 11px;}
    #summary .company table tr {height: 40px;}
    #summary .company table th {width: 25%;}

    #history .history_content .title {width: 20%;}
    #history .history_content div:not(:last-child) {border-bottom: 1px solid #3c63ae; box-sizing: border-box;}
    #history .history_content .content {width: 80%;}
    #history .history_content .content > p {height: 30px; font-size: 11px;}
    #history .history_content .l {flex-direction: row; width: 100%; text-align: left; margin: unset; padding-top: 15px;}
    #history .history_content .r {width: 100%; margin: unset; padding-top: 15px;}
    #history .history_content::after,
    #history .history_content .l .title::before,
    #history .history_content .r .title::before {display: none;}

    #management_philosophy .management_philosophy_inner img {width: 60%;}
    #management_philosophy .management_philosophy_inner p {font-size: 13px;}

    #licensing .licensing_info .licensing_img {width: 33.3333%;}
    #licensing .licensing_info .licensing_img p {font-size: 13px;}
    #licensing .licensing_info .licensing_img:not(:nth-child(2n)) {margin: unset;}
    #licensing .licensing_info .licensing_img:not(:nth-child(-n+3)) {margin-top: 20px;}

    #parking_control h2 {margin-bottom: 0;}
    #parking_control article {padding: 0 25px 30px 25px;}
    #parking_control article p {font-size: 12px;}
    #parking_control article ul {flex-direction: column;}
    #parking_control article ul li {width: 100%; border: none; border-radius: 0; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center;}
    #parking_control article ul li .img_area {display: none;}
    #parking_control article ul li .img_area img {margin-bottom: 0;}
    #parking_control article ul li .text_area {width: 100%;}
    #parking_control article ul li .text_area .title {margin-bottom: 10px;}
    #parking_control article ul li:not(:nth-of-type(4)) {border-bottom: 1px solid #3c63ae;}
    #parking_control article ul li:not(:nth-of-type(1)) {margin-left: 0;}
    #parking_control article ul li .text_area .title {font-size: 12px;}
    #parking_control .biz ul li,
    #parking_control .solution ul li {height: 150px;}

    #system_management h2 {margin-bottom: 10px;}
    #system_management .system_management_inner article {padding: 0 30px 15px;}
    #system_management .consulting_process ul {flex-direction: row; flex-wrap: wrap; justify-content: center;}
    #system_management .consulting_process ul li {font-size: 10px; height: 30px; line-height: 30px; width: 27.8%; margin-bottom: 10px;}
    #system_management .consulting_process ul li:nth-of-type(2n) {margin: 0px 2%; width: 3%;}
    #system_management .consulting_process, #system_management .consulting  {margin-bottom: 100px;}
    #system_management .consulting_process ul li:nth-of-type(2n-1) {font-size: 13px;}
    #system_management .consulting table {width: 100%; font-size: 13px;}
    #system_management .consulting table tr {height: 50px;}
    #system_management .consulting table tr th {width: 10%;}
    #system_management .consulting table tr td {width: 90%;}
    #system_management .consulting table tr th img {width: 70%;}
    #system_management .type ul {flex-wrap: wrap; flex-direction: row;}
    #system_management .type ul li {width: 33.3333%; height: 50px; line-height: 50px; font-size: 14px; padding: 0; background: none; border: none;}
    #system_management .type ul li:not(:nth-of-type(1)) {margin-left: 0;}
    #system_management .type .line {display: none;}

    #upcs_composition article {margin-bottom: 80px;}
    #upcs_composition article p {margin: 25px 0 30px 0;}

    #product .product_inner ul li {width: 48%; height: 300px;}
    #product .product_inner ul li:nth-of-type(1) img {width: 90%;}
    #product .product_inner ul li img {width: 30%;}
    #product .product_inner ul li:nth-of-type(5) img, #product .product_inner ul li:nth-of-type(6) img {top: 18%;}
    #product .product_inner ul li:not(:nth-of-type(4n)) {margin-right: 0;}
    #product .product_inner ul li:not(:nth-of-type(3n)) {margin-right: 0;}
    #product .product_inner ul li:not(:nth-of-type(2n)) {margin-right: 2%;}
    #product .product_inner ul li:not(:nth-child(-n+4)) {margin-top: 0;}
    #product .product_inner ul li:not(:nth-child(-n+3)) {margin-top: 0;}
    #product .product_inner ul li:not(:nth-child(-n+2)) {margin-top: 30px;}

    #product_detail_page .product_detail_page_inner .img_area {width: 250px; height: 250px;}
    #product_detail_page .function {padding: 0 50px 30px 50px; margin-bottom: 60px;}
    #product_detail_page .function h2 {margin-bottom: 10px;}
    #product_detail_page .product_content table {font-size: 12px;}
    #product_detail_page .product_content table tr {height: 40px;}
    
    .back {padding: 10px 15px; font-size: 13px; width: 20%;}

	#brochure .brochure_inner ul {flex-direction: row; flex-wrap: wrap;}
	#brochure .brochure_inner ul li {width: 100%;}
	#brochure .brochure_inner ul li:nth-child(1) {margin-bottom: 20px;}
    #brochure .brochure_inner ul li img {width: 100%; height: auto;}
    #brochure .brochure_inner ul li p {margin: 10px 0;}
    
    #notice_board .resultArea div {width: 49%; margin-bottom: 5%;}
    #notice_board .resultArea div p {font-size: 15px;}
    #notice_board .resultArea div .imgArea {height: 135px;}
    #notice_board .resultArea div:not(:nth-of-type(4n)) {margin-right: unset;}
    #notice_board .resultArea div:not(:nth-of-type(3n)) {margin-right: unset;}
    #notice_board .resultArea div:not(:nth-of-type(2n)) {margin-right: 2%;}

    #footer p {font-size: 10px;}
}