/* GLOBAl */ h2 {color: #4f6776; font-size: 3em;} h2:before {content: ""; position: absolute; top: -16px; left: 0; width: 120px; height: 2px; background-color: #222;} /*h2:before {background-color: #444;}*/ /* HEADER */ header .cate_show i {background-color: #2faeff;} /* CONTAINER */ #container {} #visual {position: relative;margin-bottom: 80px; height: 884px; background-image: url(../img/company/visual_01.jpg); background-size: cover; background-position: 80% 0;} #visual {} #about {margin-bottom: 80px;} #about p {margin-top: 30px; padding: 0 20px; font-size: 1.25em; letter-spacing: -1px; line-height: 1.8;} #history {margin-bottom: 80px;} #history .inner {margin-top: 30px; padding: 0 20px;} #history label {display: block; position: relative; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #999;} #history #y_2018:checked~#list_2018 {border: 0;} #history #y_2017:checked~#list_2017 {border: 0;} #history #y_2016:checked~#list_2016 {border: 0;} #history #y_2015:checked~#list_2015 {border: 0;} #history #y_2014:checked~#list_2014 {border: 0;} #history #y_2013:checked~#list_2013 {border: 0;} #history #y_2012:checked~#list_2012 {border: 0;} #history #y_2011:checked~#list_2011 {border: 0;} #history #y_2010:checked~#list_2010 {border: 0;} #history #y_1997:checked~#list_1997 {border: 0;} /* #history label:after {content: ""; top: 5px; right: 50px; position: absolute; width: 0; height: 0; border: 14px solid transparent; border-top-color: #444;} : 삼각형 */ #history .year_list:before {content: ""; top: 10px; right: 63px; position: absolute; width: 20px; height: 2px; background-color: #444; transform: rotate(45deg);} #history #y_2018:checked~#list_2018:before {top: 20px; transform: rotate(-45deg);} #history #y_2017:checked~#list_2017:before {top: 20px; transform: rotate(-45deg);} #history #y_2016:checked~#list_2016:before {top: 20px; transform: rotate(-45deg);} #history #y_2015:checked~#list_2015:before {top: 20px; transform: rotate(-45deg);} #history #y_2014:checked~#list_2014:before {top: 20px; transform: rotate(-45deg);} #history #y_2013:checked~#list_2013:before {top: 20px; transform: rotate(-45deg);} #history #y_2012:checked~#list_2012:before {top: 20px; transform: rotate(-45deg);} #history #y_2011:checked~#list_2011:before {top: 20px; transform: rotate(-45deg);} #history #y_2010:checked~#list_2010:before {top: 20px; transform: rotate(-45deg);} #history #y_1997:checked~#list_1997:before {top: 20px; transform: rotate(-45deg);} #history .year_list:after {content: ""; top: 10px; right: 50px; position: absolute; width: 20px; height: 2px; background-color: #444; transform: rotate(-45deg);} #history #y_2018:checked~#list_2018:after {top: 20px; transform: rotate(45deg);} #history #y_2017:checked~#list_2017:after {top: 20px; transform: rotate(45deg);} #history #y_2016:checked~#list_2016:after {top: 20px; transform: rotate(45deg);} #history #y_2015:checked~#list_2015:after {top: 20px; transform: rotate(45deg);} #history #y_2014:checked~#list_2014:after {top: 20px; transform: rotate(45deg);} #history #y_2013:checked~#list_2013:after {top: 20px; transform: rotate(45deg);} #history #y_2012:checked~#list_2012:after {top: 20px; transform: rotate(45deg);} #history #y_2011:checked~#list_2011:after {top: 20px; transform: rotate(45deg);} #history #y_2010:checked~#list_2010:after {top: 20px; transform: rotate(45deg);} #history #y_1997:checked~#list_1997:after {top: 20px; transform: rotate(45deg);} #history label em {font-size: 2.25em; font-weight: bold;} #history #y_2018:checked~#list_2018 em {color: #2faeff; font-size: 3.75em;} #history #y_2017:checked~#list_2017 em {color: #2faeff; font-size: 3.75em;} #history #y_2016:checked~#list_2016 em {color: #2faeff; font-size: 3.75em;} #history #y_2015:checked~#list_2015 em {color: #2faeff; font-size: 3.75em;} #history #y_2014:checked~#list_2014 em {color: #2faeff; font-size: 3.75em;} #history #y_2013:checked~#list_2013 em {color: #2faeff; font-size: 3.75em;} #history #y_2012:checked~#list_2012 em {color: #2faeff; font-size: 3.75em;} #history #y_2011:checked~#list_2011 em {color: #2faeff; font-size: 3.75em;} #history #y_2010:checked~#list_2010 em {color: #2faeff; font-size: 3.75em;} #history #y_1997:checked~#list_1997 em {color: #2faeff; font-size: 3.75em;} #history label .list_show {display: none; border-top: 2px solid #999; background-color: #f8fbfd;} #history #y_2018:checked~#list_2018 .list_show {display: block;} #history #y_2017:checked~#list_2017 .list_show {display: block;} #history #y_2016:checked~#list_2016 .list_show {display: block;} #history #y_2015:checked~#list_2015 .list_show {display: block;} #history #y_2014:checked~#list_2014 .list_show {display: block;} #history #y_2013:checked~#list_2013 .list_show {display: block;} #history #y_2012:checked~#list_2012 .list_show {display: block;} #history #y_2011:checked~#list_2011 .list_show {display: block;} #history #y_2010:checked~#list_2010 .list_show {display: block;} #history #y_1997:checked~#list_1997 .list_show {display: block;} #history label .list_show p {position: relative; padding: 20px 200px; font-size: 1.5em;} #history label .list_show p:after {content: ""; position: absolute; bottom: 0; left: 50px; right: 50px; height: 1px; background-color: #ddd;} #history .year_list .list_show p:before {content: ""; position: absolute; top: 20px; left: 70px; font-weight: bold;} #history #list_2018 .list_show p:nth-child(1):before {content: "1";} #history #list_2018 .list_show p:nth-child(2):before {content: "2";} #history #list_2018 .list_show p:nth-child(3):before {content: "3";} #history label .list_show p span {display: block;} #history #list_2017 .list_show p:nth-child(1):before {content: "1";} #history #list_2017 .list_show p:nth-child(2):before {content: "2";} #history #list_2017 .list_show p:nth-child(3):before {content: "3";} #history #list_2017 .list_show p:nth-child(4):before {content: "5";} #history #list_2017 .list_show p:nth-child(5):before {content: "6";} #history #list_2017 .list_show p:nth-child(6):before {content: "10";} #history #list_2017 .list_show p:nth-child(7):before {content: "11";} #history #list_2017 .list_show p:nth-child(8):before {content: "12";} #history #list_2016 .list_show p:nth-child(1):before {content: "1";} #history #list_2016 .list_show p:nth-child(2):before {content: "2";} #history #list_2016 .list_show p:nth-child(3):before {content: "3";} #history #list_2016 .list_show p:nth-child(4):before {content: "4";} #history #list_2016 .list_show p:nth-child(5):before {content: "5";} #history #list_2016 .list_show p:nth-child(6):before {content: "6";} #history #list_2016 .list_show p:nth-child(7):before {content: "7";} #history #list_2016 .list_show p:nth-child(8):before {content: "8";} #history #list_2016 .list_show p:nth-child(9):before {content: "9";} #history #list_2016 .list_show p:nth-child(10):before {content: "11";} #history #list_2016 .list_show p:nth-child(11):before {content: "12";} #history #list_2015 .list_show p:nth-child(1):before {content: "1";} #history #list_2015 .list_show p:nth-child(2):before {content: "2";} #history #list_2015 .list_show p:nth-child(3):before {content: "3";} #history #list_2015 .list_show p:nth-child(4):before {content: "4";} #history #list_2015 .list_show p:nth-child(5):before {content: "5";} #history #list_2015 .list_show p:nth-child(6):before {content: "6";} #history #list_2015 .list_show p:nth-child(7):before {content: "7";} #history #list_2015 .list_show p:nth-child(8):before {content: "8";} #history #list_2015 .list_show p:nth-child(9):before {content: "9";} #history #list_2015 .list_show p:nth-child(10):before {content: "10";} #history #list_2015 .list_show p:nth-child(11):before {content: "11";} #history #list_2015 .list_show p:nth-child(12):before {content: "12";} #history #list_2014 .list_show p:nth-child(1):before {content: "1";} #history #list_2013 .list_show p:nth-child(1):before {content: "1";} #history #list_2013 .list_show p:nth-child(2):before {content: "4";} #history #list_2013 .list_show p:nth-child(3):before {content: "10";} #history #list_2012 .list_show p:nth-child(1):before {content: "5";} #history #list_2012 .list_show p:nth-child(2):before {content: "7";} #history #list_2012 .list_show p:nth-child(3):before {content: "9";} #history #list_2012 .list_show p:nth-child(4):before {content: "10";} #history #list_2011 .list_show p:nth-child(1):before {content: "2";} #history #list_2011 .list_show p:nth-child(2):before {content: "12";} #history #list_2010 .list_show p:nth-child(1):before {content: "7";} #history #list_2010 .list_show p:nth-child(2):before {content: "11";} #history #list_1997 .list_show p:nth-child(1):before {content: "5";} #history #list_1997 .list_show p:nth-child(2):before {content: "11";} #notice {margin: 90px 0;} #notice .tit {margin-top: 40px; padding: 20px 50px 20px 20px; border-top: 2px solid #444; border-bottom: 2px solid #444;} #notice .tit span {width: 33%;} #notice .tit span:nth-child(2) {} #notice span {display: inline-block; font-size: 1.5em;} #notice span:last-child {text-align: right;} #notice .notice_area {font-family: 'Noto Sans', sans-serif; font-weight: 300;} #notice .notice_area a {display: block; padding: 14px 30px; border-bottom: 1px solid #ddd;} #notice .notice_area a:first-child {padding-top: 26px; } #notice .notice_area a span {} #notice .notice_area a span:first-child {width: 20%;} #notice .notice_area a span:nth-child(2) {width: 59%;} #notice .notice_area a span:last-child {width: 20%;} #notice .notice_no {display: block; margin-top: 20px; text-align: center; color: #444; font-size: 1.166em;} #contact {margin: 90px 0;} #contact iframe {margin-top: 40px; max-width: 100%;} #contact .contact_btm {margin-top: 30px; font-size: 1.125em; line-height: 1.8;} #contact .contact_btm .fll {padding-left: 10px; width: 50%; border-left: 2px solid #2faeff; cursor: pointer;} #contact .contact_btm .address span {display: inline-block;} #contact .contact_btm .address span em {display: block;} #contact .contact_btm .address span+span {padding-left: 50px;} #contact .contact_btm .mail {} #contact .contact_btm .mail dl {} #contact .contact_btm .mail dl dt {display: inline-block; width: 320px;} #contact .contact_btm .mail dl dd {display: inline-block;} #recruit {margin: 90px 0; min-height: 550px;} #ir {margin: 90px 0; min-height: 550px;} .page_notice {margin: 20% 0 16%; color: #2faeff; font-size: 5em; text-align: center;} /* Animation */ /* Media query */ @media screen and (max-width: 1024px) { #contact .contact_btm .address {width: 36%;} #contact .contact_btm .mail {width: 64%;} #contact .contact_btm .address span+span {display: block; padding-left: 0px;} #contact .contact_btm .mail dl dt {width: 280px;} } @media screen and (max-width: 880px) { #history label .list_show p {padding: 20px 100px 20px 200px;} } @media screen and (max-width: 768px) { #container {margin-top: 65px;} #visual {height: 450px;} #history .year_list:before {right: 28px;} #history .year_list:after {right: 14px;} #history label .list_show p {padding: 20px 50px 20px 140px; font-size: 1em;} #history .year_list .list_show p:before {left: 50px;} #notice span {font-size: 1.25em;} #notice .tit span {width: 32%;} #notice .notice_area a {padding: 14px 16px;} #notice .notice_area a span:first-child {width: 10%;} #notice .notice_area a span:nth-child(2) {width: 70%;} #notice .notice_area a span:last-child {width: 10%;} #contact .contact_btm .fll {float: none;} #contact .contact_btm .address {width: 100%;} #contact .contact_btm .mail {padding-top: 20px; width: 100%;} .page_notice {margin: 24% 0 20%; font-size: 3.25em;} } @media screen and (max-width: 480px) { #visual {height: 280px;} #history .inner {padding: 0 10px;} #history .year_list .list_show p:before {left: 20px;} #history label .list_show p:after {left: 20px; right: 20px;} #history label .list_show p {padding: 20px 40px 20px 50px; font-size: 0.875em;} #notice {margin-top: 70px;} #notice .tit {padding-right: 22px; padding-left: 12px;} #notice span {font-size: 1.125em;} #contact {margin-top: 70px;} #contact iframe {height: 300px;} #contact .contact_btm {font-size: 0.875em;} #contact .contact_btm .mail dl dt {width: 190px;} #recruit {margin-top: 70px; min-height: 190px;} #ir {margin-top: 70px; min-height: 190px;} .page_notice {font-size: 2.5em;} }