Kdt5 kim sae yeon

css/main.css

@@ -0,0 +1,219 @@
+.wrap {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  margin-top: 100px;
+}
+.headerButtons button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  margin-top: 10px;
+
+  font-size: 19px;
+  font-weight: bold;
+}
+.header {
+  display: flex;
+  position: fixed;
+  /* margin-bottom: 100px; */
+  width: 97.5%;
+  margin-top: -40px;
+  height: 100px;
+  /* min-width: 100%; */
+  padding: 50px 570px 80px;
+  /* justify-content: space-between; */
+  /* border-bottom: 0.5px solid rgb(200, 200, 200); */
+  /* background-color: yellow; */
+}
+.header img {
+  width: 100px;
+  height: 50px;
+  margin-right: 30px;
+}
+.headerInput {
+  width: 330px;
+  height: 50px;
+  background-color: #f4f4f4;
+  display: flex;
+  margin-left: 30px;
+  margin-right: 50px;
+  border-radius: 10px;
+}
+.headerInput img {
+  width: 24px;
+  height: 24px;
+  margin: 8px 8px;
+  color: #afafaf;
+  padding-top: 3px;
+}
+.headerInput input {
+  width: 224px;
+  height: 48px;
+  background-color: #f4f4f4;
+  border: none;
+}
+.headerInput input:focus {
+  outline: none;
+}
+.headerInput input::placeholder {
+  color: #afafaf;
+  font-size: 17px;
+}
+.headerLogin {
+  display: flex;
+  padding-bottom: 30px;
+}
+.headerLogin button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  margin-top: -25px;
+  font-size: 18px;
+}
+.it {
+  background-color: #00c7ae;
+  width: 100px;
+  height: 50px;
+  margin-left: 10px;
+  border-radius: 8px;
+}
+.it button {
+  margin-top: 10px;
+  margin-left: 7px;
+  color: white;
+  font-weight: bold;
+  padding-top: 4px;
+}
+.it:hover {
+  background-color: #00a18d;
+}
+.icons {
+  display: flex;
+  width: 1200px;
+  justify-content: space-between;
+  padding: 20px 0 0 30px;
+}
+.icon {
+  padding: 5px;
+  width: 100%;
+  height: 110px;
+  cursor: pointer;
+  text-align: center;
+}
+/* .icon:hover {
+  background-color: rgb(238, 238, 238);
+
+} */
+.icon img {
+  width: 80px;
+  height: 80px;
+}
+.icon p {
+  font-size: 20px;
+  font-weight: bold;
+}
+.service p {
+  font-size: 28px;
+  font-weight: bold;
+  margin: 30px 50px 20px 0;
+  padding-left: 20px;
+}
+.banners img {
+  width: 1200px;
+}
+.service-banners {
+  display: flex;
+}
+.one-service {
+  margin: 7px;
+}
+.one-service img {
+  width: 290px;
+  height: 200px;
+  border-radius: 15px;
+}
+.one-service p {
+  margin-top: 20px;
+  font-size: 20px;
+}
+.number {
+  color: #00c7ae;
+  font-size: 32px;
+  font-weight: 400;
+  margin-bottom: 20px;
+}
+.time {
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+.except {
+  font-size: 18px;
+}
+.intro {
+  font-size: 20px;
+}
+.btns {
+  width: 170px;
+  height: 45px;
+  border: none;
+  background-color: #00c7ae;
+  color: white;
+  font-size: 17px;
+  font-weight: 750;
+  border-radius: 20px;
+  margin: 20px 7px 80px 0;
+}
+.footer {
+  border-top: 1px solid rgb(225, 225, 225);
+  margin-top: 50px;
+}
+[name="slide"] {
+  display: none;
+}
+.slidebox {
+  max-width: 1200px;
+  width: 100%;
+  margin: 70px auto 0;
+}
+.slidebox img {
+  max-width: 100%;
+}
+.slidebox .slidelist {
+  white-space: nowrap;
+  font-size: 0;
+  overflow: hidden;
+}
+.slidebox .slideitem {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  transition: all 0.35s;
+}
+.slidebox .slideitem label {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  transform: translate(-50%);
+  padding: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+label.left {
+  left: 20px;
+  background-color: #dedede;
+  background-image: url(/images/arrow_back_ios_FILL0_wght400_GRAD0_opsz48.png);
+  background-position: center center;
+  background-size: 50%;
+  background-repeat: no-repeat;
+}
+label.right {
+  left: 20px;
+  background-color: #dedede;
+  background-image: url(/images/arrow_forward_ios_FILL0_wght400_GRAD0_opsz48.png);
+  background-position: center center;
+  background-size: 50%;
+  background-repeat: no-repeat;
+}