@media(max-width: 1800px){ .container{ .image--section{ .section--container{ .contact--wrap{ .contact--form{ padding: 40px 50px; .contact--tit{ h3{ font-size: 28px; margin-bottom: 10px; } } .contact--cont{ gap: 20px; height: calc(100% - 100px); .input--wrap{ gap: 10px; select{ padding: 15px; } input{ padding: 15px; } textarea{ padding: 15px; } } } } } } } } } @media(max-width: 1600px){ .header--wrap{ .header--inner{ padding: 0 20px; .header--nav{ >ul{ >li{ >a{ padding: 30px 50px; } } } } } } .container{ .image--section { .main--swiper { .swiper-slide { .txt--wrap{ padding: 0 20px; } } .main--swiper--tab{ .tab--wrap{ padding: 50px 20px 30px; .tab--inner{ dt{ font-size: 16px; } } } } } .section--container{ .text--wrap{ padding: 0 20px; } .contact--wrap{ padding: 0 20px; .contact--form{ padding: 40px; } .location--group{ width: 55%; } .contact--form{ width: calc(45% - 30px); } } } } } main{ .sub--visual--wrap{ .visual--txt--wrap{ bottom: -7px; padding: 0 20px; h2{ font-size: 72px; } } } .sub--menu--wrap{ padding: 80px 20px; p{ font-size: 14px; } } .sub--container{ padding: 0 20px; .sub--title--wrap{ .sub--title{ &.type--2{ font-size: 36px; } } } .sub--cont--wrap{ margin-bottom: 80px; .sub--point{ margin-top: 80px; } .sub--desc{ br{ display: none; } } } .org--wrap{ .org--cont{ .org--mid{ .org--group--box{ width: 100%; margin-bottom: 20px; } .org--group{ &:nth-of-type(2){ margin-left: 20px; } } .org--group{ .org--line{ &.none--circle{ &::before{ display: block; } &::after{ display: block; left: -12px; } } } } .org--line{ &::before{ left: 0; right: auto; } &::after{ left: -12px; right: auto; } &.type--1{ display: none; } &.bottom--type{ display: none; } } } } } } .quick--menu--wrap{ right: 20px; } } } @media(max-width: 1264px){ .container{ .image--section{ .section--container{ .map--wrap{ justify-content: center; .map--img{ img{ width: auto; } } } } } } } @media(max-width: 1240px){ .header--wrap{ // &:hover{ // background-color: #101014; // .header--inner{ // .header--logo{ // background-image: url(../img/logo--default.svg)!important; // } // } // } .header--inner{ height: 80px; .header--nav{ display: none; } .header--mob--btn{ display: block; } .header--lang--btn{ display: none; } .header--mob--lang--btn{ display: block; } } } .footer--wrap{ position: static; padding: 40px 20px; font-size: 13px; } .container{ .image--section{ height: auto; position: static; &.global--section{ .section--container{ display: flex; flex-direction: column-reverse; } } &.contact--section{ background-image: url(../img/main--contact--mo.png); background-position: bottom; background-size: 100%; background-repeat: no-repeat; background-color: #15161a; } .main--swiper{ .swiper-slide{ .txt--wrap{ >h2{ font-size: 72px; } } } .main--swiper--tab{ display: none; } .swiper--btn--wrap{ display: block; .swiper-button-next, .swiper-button-prev{ display: block; } } .swiper--pag--wrap{ display: block; } } .section--container{ .map--wrap{ position: static; padding-bottom: 80px; .map--img{ width: 100%; display: flex; justify-content: center; } .map--dot--box{ display: flex; align-items: center; .map--dots{ padding: 20px; height: auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 25px; .dot{ position: static; } } } } .text--wrap{ padding-top: 100px; padding-bottom: 70px; position: static; >h3{ color: #fff; font-size: 40px; margin-bottom: 25px; } >h4{ margin-bottom: 30px; } >p{ margin-bottom: 50px; } } .contact--wrap{ padding: 100px 20px 80px; flex-direction: column; align-items: start; color: #fff; .location--group{ display: none; } .contact--tit--mo{ word-break: keep-all; margin-bottom: 50px; display: block; >h3{ font-size: 40px; margin-bottom: 25px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.8px; } p{ font-weight: 400; font-size: 17px; letter-spacing: -0.34px; } } .contact--form{ width: 100%; padding: 35px 25px; margin-bottom: 30px; height: auto; .contact--tit{ display: none; } .contact--cont{ height: auto; gap: 35px; .input--wrap{ gap: 18px; select{ padding: 20px; } input{ padding: 20px; } textarea{ padding: 20px; } } } } .contact--btn--mo{ display: block; width: 100%; button{ cursor: pointer; font-size: 18px; color: #fff; font-weight: 500; justify-content: center; align-items: center; display: flex; gap: 15px; border: none; border-radius: 15px; background-color: #EC3237; width: 100%; padding: 30px; .ico{ width: 16px; height: 16px; background-repeat: no-repeat; display: block; background-image: url(../img/ico--contact.svg); background-position: center; } } } } } } } main{ .sub--visual--wrap{ .visual--wrap{ height: 500px; img{ height: 100%; object-fit: cover; } } .visual--txt--wrap{ bottom: -9px; h2{ font-size: 60px; } } } .sub--container{ .sub--cont--wrap{ .sub--desc{ font-size: 15px; } .sub--point{ .point--box{ width: calc((100% - 60px) / 4); padding: 30px; .ico{ margin-bottom: 20px; } h5{ font-size: 18px; margin-bottom: 15px; } p{ font-size: 14px; } } } .map--wrap{ height: 400px; } .map--desc{ margin-top: 40px; h4{ font-size: 24px; margin-bottom: 30px; } ul{ gap: 20px; li{ font-size: 15px; } } } } .grt--wrap{ margin-bottom: 80px; .grt--part{ align-items: flex-start; .grt--title{ .grt--year{ width: 200px; .grt--txt{ left: calc(100% + 20px); right: auto;; } } h4{ font-size: 20px; text-align: center; } } .grt--desc{ padding-left: 97px; width: 100%; } } } .org--wrap{ .org--cont{ .org--mid{ .org--group{ padding-bottom: 50px; width: calc(50% - 10px); padding-right: 0; &:nth-of-type(4){ margin-left: 20px; } } } } } } .quick--menu--wrap{ width: 60px; gap: 10px; >div{ width: 60px; height: 60px; background-size: 26px 26px; background-color: rgba(255, 255, 255, 0.70); } >button{ margin-top: 10px; background-size: 20px 20px; width: 60px; height: 60px; } } } } @media(max-width: 1000px){ main{ .sub--container{ .sub--title--wrap{ .sub--title{ font-size: 40px; &.type--2{ font-size: 30px; } } } .sub--cont--wrap{ .sub--point{ margin-top: 50px; row-gap: 20px; .point--box{ padding: 20px; width: calc(50% - 10px); } } } } } } @media(max-width: 767px){ .container{ .image--section{ .section--container{ .contact--wrap{ .contact--form{ .contact--cont{ .input--type2--wrap{ flex-direction: column; .input--wrap{ width: 100%; } } } } } } .main--swiper{ .swiper-slide{ .txt--wrap{ top: 50%; transform: translate(-50%, -50%); >span{ font-size: 16px; margin-bottom: 20px; } >h2{ font-size: 55px; margin-bottom: 35px; } } } } } } main{ .sub--visual--wrap{ .visual--wrap{ .op--65{ object-position: 65%; } } .visual--txt--wrap{ h2{ .mo{ display: block; } } } } .sub--menu--wrap{ padding: 40px 20px; } .sub--container{ .sub--title--wrap{ flex-direction: column; align-items: center; margin-bottom: 30px; .sub--title{ &.type--2{ font-size: 28px; letter-spacing: -0.32px; } &.web{ display: none; } &.mo{ display: inline-block; width: fit-content; } } } .sub--cont--wrap{ .map--desc{ h4{ font-size: 20px; } ul{ li{ width: 100%!important; .ico{ background-size: 14px 14px; width: 30px; height: 30px; min-width: 30px; } } } } } .grt--wrap{ .grt--part{ margin-bottom: 70px; &:last-child{ margin-bottom: 0; } .grt--title{ margin: 0 auto; padding-bottom: 60px; .grt--year{ padding: 25px 30px; width: auto; .grt--txt{ transform: translateX(-50%); left: 50%; top: auto; bottom: -36px; font-weight: 700; font-size: 16px; } .title--line{ display: none; } } } .grt--desc{ padding-left: 0; .desc{ .desc--txt{ padding-left: 0px; padding-bottom: 50px; gap: 35px; .desc--year{ font-size: 22px; } ul{ li{ flex-direction: column; gap: 20px; &.active{ .circle{ background-color: #EC3237; } } .circle{ display: inline-block; background-color: #ccc; transition: all 0.3s; width: 8px; margin-right: 15px; height: 8px; border-radius: 50%; vertical-align: 2px; } >p{ padding-left: 24px; } } } } .desc--line{ display: none; } } } } } .org--wrap{ padding-top: 50px; >h3{ font-size: 30px; font-weight: 700; margin-bottom: 40px; } .org--cont{ .org--top{ .ceo--circle{ min-width: 120px; width: 120px; height: 120px; } .ceo--line{ &.bottom--type{ left: 60px; } } } .org--mid{ .org--group{ padding-bottom: 30px; width: 100%; margin-left: 20px!important; .org--list{ &.w--240{ li{ width: 100%; } } li{ width: 100%; } } } } .org--group--box{ .org--box{ width: 100%; } } } } } } } @media(max-width: 500px){ .container{ .image--section{ .section--container{ .map--wrap{ .map--dot--box{ .map--dots{ gap: 15px; .dot{ width: 150px; height: 150px; } } } } } } } main{ .sub--menu--wrap{ &.web{ display: none; } &.mo{ display: block; } } .sub--visual--wrap{ .visual--txt--wrap{ bottom: -7px; h2{ font-size: 48px; } } } .sub--container{ .sub--cont--wrap{ .sub--point{ .point--box{ width: 100%; padding: 30px; } } } .org--wrap{ .org--cont{ .org--top{ margin-bottom: 170px; .ceo--line{ &.right--type{ top: 180px; position: absolute; width: 90px; left: 60px; } &.bottom--type{ height: 170px; } } .ceo--circle{ &.type--2{ left: 150px; top: 120px; position: absolute; } &.type--3{ top: 120px; position: absolute; left: 270px; } } } .org--mid{ .org--group--box{ .org--box{ height: auto; padding: 25px 25px; } } } } } } } } @media(max-width: 420px){ main{ .sub--container{ .org--wrap{ .org--cont{ .org--top{ margin-bottom: 150px; .ceo--circle{ height: 100px; min-width: 100px; width: 100px; &.type--2{ top: 100px; left: 140px; } &.type--3{ top: 100px; left: 240px; } } .ceo--line{ &.bottom--type{ height: 150px; left: 50px; } &.right--type{ left: 50px; top: 150px; } } } } } } } }