@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap'); @import url('https://webfontworld.github.io/NexonLv2Gothic/NexonLv2Gothic.css'); @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); html{ font-size: 62.5%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 6rem; } *{ box-sizing: border-box; padding: 0; margin: 0; outline: none; border: none; text-decoration: none; text-transform: capitalize; transition:all .1s linear; } body{ width: 100%; } a{ text-decoration: none; } img{ vertical-align: top; } /* Çì´õ¿µ¿ª */ header{ display: flex; justify-content: space-between; margin: 3.5rem 17%; } header .navbar{ display: flex; justify-content: space-between; width: 100%; margin-left: 17rem; } header .navbar a{ font-size: 1.8rem; line-height: 130px; color: #1e1e1e; font-weight: 500; font-family: "GmarketSans"; } header .navbar a:nth-of-type(3){ color: #67cfff; font-family: "GmarketSans"; } header .navbar a:hover{ color: #67cfff; } #menu-bar{ cursor: pointer; color: #1e1e1e; border-radius: .3rem; padding: 0.5rem 1.5rem; display: none; } /* ¸ÞÀμ½¼Ç */ .first-section{ background: url('http://enflow2022.cafe24.com/base/img/main_background.png') 100%; object-fit: cover; width: 100%; height: 376px; } .first-section h1{ text-align: center; font-size: 10rem; letter-spacing: 3px; line-height:360px; color: #ffffff; font-weight: 800; font-family: "Raleway"; } .second-section{ position: relative; } .second-section img{ width: 100%; position: absolute; top: -570px; z-index: -100; } /* °Ô½ÃÆÇ ¿µ¿ª */ .third-section{ height: 770px; } .third-section h2{ margin-top: 12.5rem; margin-left:6.94%; font-size: 3rem; letter-spacing: 1px; line-height: 38px; color: #67cfff; font-weight: bold; font-family: "NexonLv2Gothic"; } .third-section img{ width: 12%; margin-top: 3rem; } .third-section p{ text-align: center; font-size: 2.5rem; } .third-section i{ text-align: center; display: block; font-size: 5rem; margin-top: 15rem; } .third-section p:nth-of-type(2){ margin-top: 2rem; } .notice-board{ font-size: 3.5rem !important; margin-top: 4rem; } /* .table-area{ width: 90%; font-size: 21px; letter-spacing: 0px; line-height: 25px; color: #575757; font-weight: 500; font-family: "NexonLv2Gothic"; text-align: center; } .table-area table{ width: 100%; margin-top: 4.5rem; margin-right: 12rem; margin-left: 10rem; border-collapse: collapse } .table-area table tr:first-child{ border-bottom:2px solid #bfbfbf; height:28px; padding: 0 5rem; border-spacing:initial; } .table-area table tr:nth-of-type(2){ border-bottom:1px solid #bfbfbf; line-height: 85px; } .table-area table tr:nth-of-type(3){ line-height: 85px; border-bottom:1px solid #bfbfbf; } .table-area table tr th:first-child{ width: 8%; line-height: 85px; } .table-area table tr th:nth-of-type(2){ width: 65%; } .table-area table tr th:nth-of-type(3){ width: 10%; } .table-area table tr th:last-child{ width: 5%; } */ /* ǪÅÍ */ footer{ background-color: #eaeaea; } footer > div{ display: flex; justify-content: space-between; width: 100%; height: 308px; background-color: #eaeaea; padding: 0 22%; margin-left: 4rem; } footer > div img{ height: 30%; margin-top: 16.5rem; } .footer-container{ padding-top: 6.7rem; } footer p{ font-size: 1.5rem; letter-spacing: 0px; line-height: 25px; color: #000000; font-family: "NexonLv2Gothic"; } footer p:nth-of-type(2){ margin-top: 3rem; } footer p:nth-of-type(4){ margin-top: 3rem; } @media screen and (max-width:1024px){ header{ margin: 3.5rem; } #menu-bar{ font-size: 3.5rem; line-height: 120px; display: block; } header .navbar{ z-index: 100; position: absolute; top: 0; left: 0; right: 0; background-color: #fff; display: flex; flex-direction: column; margin: 0; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } header .navbar.active{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } header .navbar a{ margin: .5rem; padding: .8rem; display: block; border: 1rem solid rgba(213, 210, 210, 0.1); font-weight: 600; } .second-section img{ top: -250px; } .third-section h2{ margin-left: 8%; margin-right: 1%; } .third-section img{ width: 23%; } .table-area{ width: 80%; } .table-area table tr th:nth-of-type(2){ width: 45%; } footer > div{ padding: 0 10%; margin: 0; } } @media screen and (max-width:768px){ html{ font-size: 50%; } .second-section img{ top: -200px; } .third-section h2{ margin-left: 5%; margin-right: 2%; } .third-section img{ width: 20%; } .table-area{ width: 90%; } .table-area table{ margin-left: 5rem; } .table-area table tr th:nth-of-type(2){ width: 30%; } .footer-container p{ font-size: 1.9rem; } } @media screen and (max-width:480px){ html{ font-size: 40%; } header{ margin-left: 20%; } header > a{ margin: 0 auto; display: block; } #menu-bar{ margin-left: 10%; } .second-section img{ top: -100px; } .third-section{ height:500px; } .third-section h2{ font-size: 4rem; text-align: left; } .text-area { margin-left: 0%; margin-right: 7%; } .text-area p{ font-size: 2.8rem; } .third-section img{ width: 21%; height: 10px; margin-left: 0%; } .table-area{ width: 87%; } .table-area table{ margin-left: 5rem; } .table-area table tr th:nth-of-type(2){ width: 10%; } .table-area table tr th{ font-size: 2.4rem; } .table-area table tr td{ font-size: 2.4rem; } .third-section p{ margin: 0 10%; line-height: 30px; } .third-section i{ margin-bottom: 5rem; } footer > div{ display: flex; flex-direction: column; } footer > div img{ margin: 0 auto; width: 50%; } .footer-container{ text-align: center; } .footer-container p{ font-size: 2rem; } }