@media(max-width: 1280px){ .header--wrap{ .header--container{ padding: 0 20px; } } main{ section{ .sub--container{ &.type3{ padding: 100px 20px 120px; } .partners--wrap{ gap: 12px; .partners{ width: calc((100% - 36px) / 4); } } } } } .footer--wrap{ .footer--container{ padding: 40px 20px 60px; } } } @media(max-width: 1060px){ #top--visual{ height: 300px; .inner--content{ max-height: 300px; min-height: 300px; >h1{ font-size: 36px; } } } .header--wrap{ .header--container{ height: 60px; .logo--wrap{ width: 123px; height: 32px; } .menu--wrap{ display: none; } .lang--wrap{ display: none; } .ham--wrap{ display: block; } } } main{ section{ &.mission--section{ .title--wrap{ .mission--title{ font-size: 30px; } .mission--desc{ font-size: 20px; } } } &.notice--section{ .sub--container{ .title--wrap{ .title{ font-size: 36px; } } } } .sub--container{ padding-left: 20px!important; padding-right: 20px!important; .title--wrap{ .logo--wrap{ img{ width: 146px; } } .title{ font-size: 30px; } .sub--title{ font-size: 20px; } } .vision--wrap{ >p{ font-size: 30px; } } .values--card--wrap{ .card{ dt{ font-size: 20px; } } } .history--desc--wrap{ .history--desc{ &.left--type{ padding-right: 0; } &.left--type2{ padding-right: 0; } &.right--type{ padding-left: 0; } .desc--wrap{ >p{ font-size: 18px!important; } } .desc--box--wrap{ .desc--wrap{ >div{ font-size: 20px; } } } } } .history--graph--wrap{ .txt--wrap{ width: 35%; min-width: 200px; font-size: 30px; } .graph--wrap{ width: 65%; } } .catalog--wrap{ gap: 40px; .catalog{ gap: 40px; .img--wrap{ width: 50%; min-width: 0; } .download--wrap{ width: 50%; gap: 18px; >p{ font-size: 24px; } } } } .materials--wrap{ .materials--box{ gap: 40px; .img--wrap{ width: 40%; min-width: 0; img{ width: 100%; height: 100%; object-fit: cover; } } .desc--wrap{ width: 60%; gap: 12px; >h4{ font-size: 24px; } >h5{ font-size: 18px; } >ul{ >li{ font-size: 15px; } } } } } .life--cycle--wrap{ gap: 16px; .cycle{ gap: 16px; .img--wrap{ .txt{ padding: 16px; span{ font-size: 16px; } p{ font-size: 16px; } } } } } .patents--wrap{ .patents--list{ .patents{ gap: 12px; .img--wrap{ height: 300px; } } } } .news--wrap{ .news--list{ .news{ gap: 20px; .news--title--wrap{ h4{ font-size: 18px; } span{ font-size: 15px; } } } } } .sns--wrap{ .sns--list{ gap: 16px; .sns{ width: calc((100% - 48px) / 4); .txt--wrap{ >h4{ font-size: 16px; } } &:hover{ .txt--wrap{ min-height: 110px; } } } } } .notice--wrap{ .notice--list{ .notice{ gap: 40px; padding: 20px; h4{ font-size: 18px; width: calc(100% - 180px); } .news--index{ font-size: 15px; } .news--date{ font-size: 15px; } } } } .faq--wrap{ .border-default{ .flex{ >button{ padding: 20px; .text-start{ font-size: 18px; &::before{ font-size: 20px; } } } } .overflow-hidden{ padding: 20px 60px 20px 20px; .text-sm{ font-size: 16px; &::before{ font-size: 20px; } } } } } .location--wrap{ h4{ font-size: 24px; } .map{ font-size: 15px; } .call{ font-size: 15px; } .location--map{ height: 300px; } } } } } #out--container{ .out--container{ padding: 0 20px; .m--title{ font-size: 36px; } .form--contents--wrap{ .form--contents{ h3{ &.privacy--title{ font-size: 20px; } } } } } } .footer--wrap{ .footer--container{ .footer--top{ .menu--wrap{ display: none; } } .footer--bot{ margin-top: 20px; .info--list{ row-gap: 4px; li{ font-size: 13px; &:nth-of-type(1), &:nth-of-type(2){ width: 100%; } } .bar{ display: none; &.mobile{ display: inline-block; } } } .copyright{ flex-direction: column; align-items: start; span{ font-size: 13px; } a{ font-size: 13px; } .bar{ display: none; } } } } } } @media(max-width: 768px){ #top--visual { .inner--content { >h1 { font-size: 24px; } nav { >ul{ >li{ a{ font-size: 13px; } } } } } } main { section { &.mission--section { .title--wrap { .mission--title { font-size: 30px; } .mission--desc { font-size: 20px; } } } &.notice--section { .sub--container { .title--wrap { .title { font-size: 36px; } } } } .sub--container { padding-left: 20px !important; padding-right: 20px !important; .title--wrap { .logo--wrap { img { width: 146px; } } .title { font-size: 30px; } .sub--title { font-size: 20px; } } .vision--wrap { >p { font-size: 30px; } } .values--card--wrap { .card { dt { font-size: 20px; } } } .history--desc--wrap { .history--desc { &.left--type { padding-right: 0; } &.left--type2 { padding-right: 0; } &.right--type { padding-left: 0; } .desc--wrap { >p { font-size: 18px !important; } } .desc--box--wrap { .desc--wrap { >div { font-size: 20px; } } } } } .history--graph--wrap { .txt--wrap { width: 35%; min-width: 200px; font-size: 30px; } .graph--wrap { width: 65%; } } .catalog--wrap { gap: 40px; .catalog { gap: 40px; .img--wrap { width: 50%; min-width: 0; } .download--wrap { width: 50%; gap: 18px; >p { font-size: 24px; } } } } .materials--wrap { .materials--box { gap: 40px; .img--wrap { width: 40%; min-width: 0; img { width: 100%; height: 100%; object-fit: cover; } } .desc--wrap { width: 60%; gap: 12px; >h4 { font-size: 24px; } >h5 { font-size: 18px; } >ul { >li { font-size: 15px; } } } } } .life--cycle--wrap { gap: 16px; .cycle { gap: 16px; .img--wrap { .txt { padding: 16px; span { font-size: 16px; } p { font-size: 16px; } } } } } .patents--wrap { .patents--list { .patents { gap: 12px; .img--wrap { height: 300px; } } } } .news--wrap { .news--list { .news { gap: 20px; .news--title--wrap { h4 { font-size: 18px; } span { font-size: 15px; } } } } } .sns--wrap { .sns--list { gap: 16px; .sns { width: calc((100% - 48px) / 4); .txt--wrap { >h4 { font-size: 16px; } } &:hover { .txt--wrap { min-height: 110px; } } } } } .notice--wrap { .notice--list { .notice { gap: 40px; padding: 20px; h4 { font-size: 18px; width: calc(100% - 180px); } .news--index { font-size: 15px; } .news--date { font-size: 15px; } } } } .faq--wrap { .border-default { .flex { >button { padding: 20px; .text-start { font-size: 18px; &::before { font-size: 20px; } } } } .overflow-hidden { padding: 20px 60px 20px 20px; .text-sm { font-size: 16px; &::before { font-size: 20px; } } } } } .location--wrap { h4 { font-size: 24px; } .map { font-size: 15px; } .call { font-size: 15px; } .location--map { height: 300px; } } } } } #out--container { .out--container { .m--title { font-size: 36px; } .form--contents--wrap { .form--contents { h3 { &.privacy--title { font-size: 20px; } } } } } } }