@charset "UTF-8";

.box {background:rgba(0,0,0,0.3); color:#fff; border:1px solid rgba(255,255,255,0.4); border-radius:20rem;}
.box a {color:#fff;}

#container {position:relative; padding:233rem 0 93rem; background:url('/design/garlic/img/main/bg.jpg') no-repeat center/cover;}
#container:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4);}
#container .wrap {position:relative;}
#container .wrap:before,
#container .wrap:after {content:''; position:absolute; opacity:0.7;}
#container .wrap:before {top:0; left:-69rem; width:198rem; height:111rem; background:url('/design/garlic/img/main/obj3.png') no-repeat center/contain;}
#container .wrap:after {bottom:-70rem; right:-194rem; width:309rem; height:197rem; background:url('/design/garlic/img/main/obj2.png') no-repeat center/contain;}
.top {text-align:center;}
.top .txt {display:inline-block; position:relative; margin-bottom:92rem;}
.top .txt:before {content:''; position:absolute; bottom:64rem; right:-157rem; width:215rem; height:147rem; background:url('/design/garlic/img/main/obj.png') no-repeat 0 0/contain;}
.top .txt > * {text-shadow:0 0 20px rgba(0,0,0,0.5);}
.top .txt span {display:block; font-size:24rem; color:#f8d7b1; display:block; line-height:1.4; margin-bottom:20rem; margin-left:-50rem}
.top .txt h2 {font-size:67rem; font-family:'ulsanjunggu'; font-weight:600; color:#fff; letter-spacing:1rem; line-height:1.1;}
@media all and (max-width:1640px){
  #container {padding:180rem 0 60rem;}
}
@media all and (max-width:1240px){
  #container {padding:140rem 0 60rem;}
  .top .txt {margin-bottom:60rem;}
  .top .txt:before {width:180rem; height:123rem; right:-120rem;}
  .top .txt span {font-size:21rem; margin-bottom:10rem;}
  .top .txt h2 {font-size:55rem;}
}
@media all and (max-width:1023px){
  .top .txt {margin-bottom:40rem;}
}
@media all and (max-width:599px){
  #container {padding:120rem 0 60rem;}
  .top .txt:before {display:none;}
  .top .txt span {margin-left:0;}
  .top .txt h2 {font-size:45rem;}
}

.flex {display:flex;}
.flex .left {display:flex; width:64.276%;}
.flex .left article {position:relative; width:50%; padding:60rem;}
.flex .left article:before {content:''; position:absolute; top:0; left:60rem; width:80rem; height:7rem; background:#ffef65;}
.flex .left article h3 {font-size:30rem; font-weight:600; }
.flex .left article p {margin-top:10rem; margin-left:3rem; font-size:17rem; opacity:0.7;}
.flex .left .list {margin:70rem 0 -25rem 4rem;}
.flex .left .list li {margin:25rem 0;}
.flex .left .list li a {display:block; position:relative; font-size:20rem;}
.flex .left .list li a:before {content:''; position:absolute; top:0; right:0; width:30rem; height:30rem; background:url('/design/garlic/img/main/icon2.png') no-repeat 66.666% 0/400% auto;}
.flex .left .step {border-top-right-radius:0; border-bottom-right-radius:0;}
.flex .left .reason {border-top-left-radius:0; border-bottom-left-radius:0; border-left:0;}
.flex .right {width:34.276%; margin-left:20rem;}
.flex .notice {position:relative; margin-bottom:20rem;}
.flex .notice h3 {position:absolute; bottom:10rem; left:0; width:110rem; height:101rem; padding-top:55rem; background:#572214; color:#fff; font-size:19rem; border-radius:20rem; text-align:center; box-shadow:10px 10px 20px rgba(0,0,0,0.2);}
.flex .notice h3 span:before {content:''; position:absolute; top:15rem; left:50%; width:30rem; height:30rem; margin-left:-15rem; background:url('/design/garlic/img/main/icon2.png') no-repeat 100% 0/400% auto;}
.flex .notice .list {display:block;  background:#fff; width:calc(100% - 40rem); margin-left:40rem; padding:20rem 20rem 20rem 110rem; box-shadow:10px 10px 20px rgba(0,0,0,0.2); border-radius:20rem;}
.flex .notice .list .tit {width:100%; max-width:80%; margin-bottom:3rem; color:#572214; font-size:18rem; font-weight:600; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.flex .notice .date {display:block; position:relative;  padding-left:22rem; color:#909090; font-size:16rem;}
.flex .notice .date:before {content:''; position:absolute; top:-4rem; left:-8rem ; width:30rem; height:30rem; background:url('/design/garlic/img/main/icon2.png') no-repeat 0 0/400% auto;}
.flex .notice .more {display:block; position:absolute; top:50%; right:30rem; width:30rem; height:30rem; margin-top:-15rem;  border-radius:50%; background:#572214; text-indent:-9999rem;}
.flex .notice .more:before {content:''; position:absolute; top:0; left:0; width:30rem; height:30rem; background:url('/design/garlic/img/main/icon2.png') no-repeat 33.333% 0/400% auto;}
.flex .quick ul {display:flex; flex-wrap:wrap; margin:-10rem;}
.flex .quick ul li {width:calc(50% - 20rem); margin:10rem; position:relative;}
.flex .quick ul li:before {content:''; position:absolute; bottom:20rem; right:20rem; width:38rem; height:38rem; background:url('/design/garlic/img/main/icon.png') no-repeat 0 0/400% auto;}
.flex .quick ul li.icon1:before {background-position:0 0;}
.flex .quick ul li.icon2:before {background-position:33.333% 0;}
.flex .quick ul li.icon3:before {background-position:66.666% 0;}
.flex .quick ul li.icon4:before {background-position:99.999% 0;}
.flex .quick ul li a {display:block; color:#fff; font-size:19rem; min-height:147rem; padding:30rem;}
@media all and (max-width:1440px){
  .flex .notice .list {padding-left:95rem;}
}
@media all and (max-width:1240px){
  .flex .left {width:60%;}
  .flex .left article {padding:40rem;}
  .flex .left article:before {left:40rem;}
  .flex .right {width:40%}
}
@media all and (max-width:1023px){
  .flex {flex-wrap:wrap;}
  .flex .left {width:100%; margin-bottom:40rem;}
  .flex .left .list {margin:40rem 0 -25rem 4rem;}
  .flex .right {width:100%; margin-left:0;}
  .flex .notice {margin-bottom:40rem;}
  .flex .quick ul li {width:calc(25% - 20rem);}
}
@media all and (max-width:768px){
  .flex .left article {padding:30rem;}
  .flex .left article:before {left:30rem;}
  .flex .left article h3 {font-size:25rem;}
  .flex .left .list {margin:30rem 0 -15rem 4rem;}
  .flex .left .list li {margin:15rem 0;}
  .flex .quick ul li {width:calc(50% - 20rem);}
}
@media all and (max-width:599px){
  .flex .left {flex-wrap:wrap; width:100%; margin-bottom:20rem;}
  .flex .left article {width:100%;}
  .flex .left .step {border-top-right-radius:20rem; border-bottom-left-radius:0;}
  .flex .left .reason {border-top-right-radius:0; border-bottom-left-radius:20rem; border-top:0; border-left:1px solid rgba(255,255,255,0.5);}
  .flex .notice {margin-bottom:20rem;}
  .flex .notice h3 {position:relative; bottom:0; width:100%; height:auto; padding:10rem; border-radius:20rem;}
  .flex .notice h3 span:before {display:none;}
  .flex .notice .list {width:100%; margin-left:0; padding:30rem;}
  .flex .notice .more {top:102rem; right:30rem;}
  .flex .quick ul {margin:-5rem 0;}
  .flex .quick ul li {width:100%; margin:5rem 0;}
}