| 1 | .BuySection { |
| 2 | @apply bg-white h-[700px] relative w-screen text-shadow-none text-black; |
| 3 | } |
| 4 | |
| 5 | .BuySection .Content { |
| 6 | @apply relative w-[320px] h-[550px] top-[125px] left-[50%] transform -translate-x-1/2; |
| 7 | @apply 552:w-[520px]; |
| 8 | } |
| 9 | |
| 10 | .BuySection .Title { |
| 11 | @apply text-2xl leading-none top-[0] absolute w-full text-center; |
| 12 | @apply 844:right-1/2 844:left-0 844:w-auto 844:text-4xl 844:top-[120px]; |
| 13 | } |
| 14 | |
| 15 | .BuySection .Content .BackpackSoldier { |
| 16 | background: url("/images/backpack.png") no-repeat; |
| 17 | background-size: contain; |
| 18 | @apply h-[280px] left-[50px] bottom-[70px] w-[480px] absolute hidden; |
| 19 | @apply 844:block; |
| 20 | } |
| 21 | |
| 22 | .BuySection .Bulletin { |
| 23 | background: url("/images/bulletin.png") no-repeat; |
| 24 | background-size: contain; |
| 25 | @apply absolute w-[300px] h-[480px] top-[35px] left-[50%] transform -translate-x-1/2; |
| 26 | @apply 844:absolute 844:w-[400px] 844:h-[480px] 844:top-[0px] 844:left-[50%] 844:translate-x-0; |
| 27 | } |
| 28 | |
| 29 | .Bulletin .Text { |
| 30 | @apply w-[215px] mt-[29px] text-[9px] mx-auto transform -rotate-[2.8deg]; |
| 31 | @apply 844:w-[230px] 844:ml-[50px] 844:mr-[0px] 844:text-[11px]; |
| 32 | } |
| 33 | |
| 34 | .BuySection .Bulletin .Section { |
| 35 | @apply mt-4; |
| 36 | } |
| 37 | |
| 38 | .BuySection .CopyBtn { |
| 39 | @apply border-black hover:brightness-150 cursor-pointer border-2 bg-primary text-white absolute rounded-full bottom-[0px] px-3 py-1 text-[30px] text-nowrap left-1/2 transform -rotate-[2.8deg] -translate-x-1/2; |
| 40 | } |