From cb74e1100e12f29b602f3555ed55e91d7d998e9f Mon Sep 17 00:00:00 2001 From: YoungseoChoi23 Date: Thu, 22 Aug 2024 03:20:58 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Style=20:=20=EB=A9=94=EC=9D=B8?= =?UTF-8?q?=20=ED=99=94=EB=A9=B4=20=EB=B0=98=EC=9D=91=ED=98=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/introduce/bottom.png | Bin 0 -> 9850 bytes src/pages/IntroducePage/Main.jsx | 28 ++++++++++++++-------------- 2 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 src/assets/introduce/bottom.png diff --git a/src/assets/introduce/bottom.png b/src/assets/introduce/bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..30de34dc5780941a697864a5c0cb4694acbe054f GIT binary patch literal 9850 zcmYj%c|6qL_x~Nl7;723EU63<6|yfQk#&$=H1AZFEFoK#DTX2>p=29NY7m7|A)!J^_uO;OJ?A{nncD<20}hN31^~cu#_*IS0E}b+ zP(5g7I8twYga-ey`Wo8%1Hi_E{GmWbrT`p7`CA&`!Lv4z8Ti6wEk0_Rh{%eD@b}ofT#Z$SM0?W`rVQZ4aDZ-zll;H9`S7 zWvvJ7UA|ib4xdl5>}|@U6R;rVNpNUzxE~hKETuv2D0O7L!FTbh;1}g$T6(<3QO56=LhdAt z521XlTL=%<`F*UY!}DA%v_DPL!|N!(A%$h2;jDp^7^jxGH8`^TL%gum$$H1Zb1xs4 zmC<$8&h1}M{y1OUOFFz4gL=}vHe)O1a(knv=A+{r7wK~9x_{!9KtXNQaU2!LK#-zv zlTy{Z_n4k6=C-qG_trl#pzWC|DVDbL+?M>G13kYvPrGPw0K2`Au5j>y)}I3{+yYPO zyza6p`or3sx1$WqPp{Xp0lNbTfePo%_oasJ>Sr0-=R$aoaWKDSH~?D3u?)WMObwI! zxKVb@kc`dVgl$XjO^W4}^$Uh3C(fddO;)OlmCU_~Lf7k~$sn^ePv$}VZS|X`ch~)l z-fAb#?`VP%O;$M5zd}7968eo}j*^fcimneqsHs%U56|ysSd@XXd`CwONr~(}17dmlazsJH zIj=$hX*GZMo2M-O@(7b;|DAqAad#-7#^J!cfl&}6UWIA;1cf{IvbVl7=K#%x{Z z(K-noZ78JXRX?9a;zoYtiIM$OU%P@eIcq&q1UCkyW>$=wDlEk2ibdl|oP!VMznQ3t z{x~kooEep7Nt)+@6mAy#YhFH(36&k$_e6*xAf14w9cvC^S;<#0j4^)ffu@<_C3Fm` z)jzgO(0!F}Wi@q7;DDPZl!Q?$OY4tDdbe&6i#;!o5$eqaZcyn^6;%E)#9Z7p)v{p8 zAzN%1uE`1cVWoJ+v0FC- zuP&`~-Cb;t+e7p1TL0^TN}7CV_j@UUom(C!F9DhilqdcQR6-8(bKxFSnn}|O*FR7G zs&N1Zy-l1BTeY^~>;!%BQ_kT?4j^QXV{)thxjpjBgPu=Mt`(%oghXcd_`JT1rd@%I zq6BezgMvDYw6J+BgW}n$yUyYTb5xXKl*V9jT{a`>w52qYTW-Qkl>C7y17a@w&{ai4 z_u1Hv+66dg0p}igOr8=%uj9oF9Aos`Hgil`%Y1;4KHRP@RVVm`AA_1~QQ!8}fSm=D zjwC!|4hil~shbiy{>Za9cc%e-J^`PVc+fK^8n|;Kpil`+cy4yo&%;=TudWx~_@D68 zz~qMM-+P&TXFi-Clw=angeZ^XAmSWT%|}r^QU?57cGq<19)Fb$?l1;-bZC@%iQcIT z69Of7Cf9)MLGDI%4wjIYLE(S9n^E;GPp}LnAOD;`UgIYRl{=~!5}7t8ADjQl0+a{H zKyEK0dw-*$N(<)43fsG&z{N~pl@_*_0PUJmPY1N_G_r^Y&h)t-0poIe8%^3cO` z31u8!y0yWP- zGM2PqpK1c{U$!fu3#fy_KA)xyNT_oKDEL%R;Pn*_4j*6`{z2z7+ROpJ@X>< zSBTjiv43+7YE%kTV+RaSM;ktAH8xMa{qUp7L*z@>z>kLM)*@6r8EVJrW`DQ7`Xe25 z@d>BaiXkx42<2savsB`7!PpU1VmHuv8smEv;h{5#`)VdEUBBlk{7Og3OOXlxBt_Yh z#I_HEYWq}a;TBg}b!_PMhI1qn={poqC3dO7HF(k?^oo>(VpQR8FjZuU_T`+7Gz?B1dsZ2>x_Ty8t9`5lGgJr(Tmw;F|B~Zb(+0?(@L5tm@A&h zrz*OK<|OT=2%?71mNDp-QE2*0UnZ===xb8QJ#uP^*lEeU zrBJhPCJ>av@R5o08|KXA_iKB_K-vQ>m~svK_hTELbOBxu zN9A!ic3QJEpXTCVh=Rhw;UqW=@6G=`8M(`nvW*^%&$tQzO?bI$Umgq3g{-`)MWfmo zbDN{_xl@?Z3$*JIoL~#iZ>3$3B{{dMvXXVm?9ZT9)2y-e{x()1{IMl^wdYsUgy`P# za=w{MVD&x$y=o(KCyynu@Z%#C%?d9;b5tes->AQNovf4d+6ujDS(Sc8v&bD}`j&A| z7q5Y|f5H?5ACLa6lC@xuzcnhp{AWX3Hc~sHH%Bg~N5uM_nbxbYM|=zI7kq;i{w}-w z5}U7o@&g({FUl6*j(p3`3HP+P)0*>qvY)@{=eT^Lw8_Ec zdXw13u?6Lbh{dGk9m$|ur0<3F=}&IU+6`lLMUnzv zK-Id2Xs1gYAFSCf0lQm zG$oR?crY`mpOh=N9b>#jK>y4HJtCw3VUOQD@YNEZhe8i_125)mT=dn-sG+!5NzGTm2>BCWI~$X zww!^|jN)YQLGey&yhN5o)dwfR$AePqk}q!_YE7bI#**?kBa_nl|AZ`;mhBz+vOJuk zZMMBn4xU7*j5w!ds7id5frH5mhH|$@y-v)=L?n96?$_;>=dY9nG_JIEbtU8kQ6)~y zcY!kZE+)$<7aoxyTICW-y2cP!kjl52vVC{{zDt8OTQ2{4Lh^cR(-JX-%OJ(zMwem; z!_$?rhuPZVa?GO9u zjZq4k{I!Mn(Z5?K!`ehvPH%L4dDiO$7?xSk-WZ=~e|{=wOHr`>*@u&D+Em}_H0DwUuRekE&^`FBF`9@o2er-AS?aR!qkbiNECM zD6ZzVI=STAhl;GtisG5)Iv<4#9~@b!BkQ0uFWE<3LK5hT2)X^}=$bP!F8rmF8xd=2 z(&yiw#n=n3Gl#ge27A0&S~24!S!ryHZy8@tSe;pIn9@Hg>cKl%LQU(u&pddo>}sBN zG(OF&n4LfHj9g)ksnodr(VR}k%zw5!2L6oX$7|jVCBE-GI3iMc|AowefjyO~7F_cW zUVMVV%)zM4{M}y_;4rejVlF;Ghb(oo=j@3MFIdS(^w$Cc#``B`J?vixS{&7@`tB~* z&L!{H`_FdqPQ42QcXKDhls7&!S)}RXCOV&TzBtSOMCgZXlqbrU+4J4!;p>0h zt_AsSIfTv9F9>Gaa`4aAjND@-JIR`&E-!v|AA^L_6KYHh z&DTB}e{`byoT6yzg3ySrS2h==!wgf>a^~%H-R!=vGaKAOa|KRcL+e%D(kZw75@RQ$ z;+9ghO}B-BF(E6`cAMK}3Ok50P5$S_(u%8RcF(J-6hBcJa?Q!Pe9Y5 z)XkOdfR4=0K%Mb|Qfk)Mjb@15YSIx*@mAs7{SU^EI8Topx8^!EW!v>?zP-z}y~y8o zMU-JUitzEF_0~^!?zf}c;&LPBnU2P@D`oQ zXC-S&L5kJ%^M?AkU(etF^VbvJ3pnXwt&mytr()0gmJ&L&*ug{|p>m8}XqB&AsMerL*(!Uld@ zVtN`N3&2Qiq2tNN>OnWn{ENz)lpk}|-O5~N0N`lj$U`$8j5<~5h}DqfS7i*S*N19_ zut7`2H1TFzht_~aMe+Pz2H>k|HqXB;Iem~)9%VMa*BjP&oH8mWBZw#6#pWKQgh#W$ z?WQld-RIELc*OIsaY0~JCaQk5wNEBWv zS((59$}M}&2E-T<4cvtHfb)fZOA6CWlyb)1sZe+S3l65WMRS!&FEd|4J$VEuntMKC z$(PSzE-kd|^Q$OMyTt$qk47D`=a@?mV_)_ab!81&_iF)=tL*NH07W;sxqLb6ssx*+ zi{B10fn0CZ9HVZT>nA0{i%&<{YVMMZkfM-~abfu=0uSKeSBKB@%n6Sz z`_BIxGag3)K>DqgQ5d%6tEh?*I#XEQ@I&lBTW~Z`_?f{Q9>p|59|1|erM=*(R-WUO zE8sYcRsPD7?CqcjMKfS8Epj_bDW}9`YMP=zu6jw4+mWbCLen31OqEwcLq*{JBr5J3 zFt;ft84-C($???y1SH-#@#P>^IT>{Vz7X1;?^jGD^eN<+1$hfAFajO^!sTnvAc-Va z*(ABE6bjQOQ#0%(Kq=SN+H^mDH2!DZ833lAWxk9$y%!@~@JB(qkP*2aKd1M9dTGaSr>BQei81|kd5bW{`&T_&c>hIQX zvtvT6WTh6PNdUNG(Fjrr{ALI>b{pUIc##tebui~zh76gB@* z#EB=GRwgol`h_03=Vg#(ibx1NpnAMt6;&BeJm&{7Jg8^YPx*@`SDnE_mUM5CuXtQZ z!>2+++8QLa2xfrprtFimRId)MBvw8U zxuAeTCa{CMA|^-g451|tr&~!A-Gwv`hZaFXP=`8 z%~SwC8dn%1`u_-b;pQ#{T$OeKQHM?vE9BP8jQBGe_kTwao+4qZlU?Tv;o8RU_;%n{ zNik5YD|1F7|I1JIw=uH%;$hV>1v^!W?|V)I9tt;jx?phKHwSM3?G=<<#?@sfSrFg<`M|x#L3n450c^>2x8%EtM zQ{Sh4fFseYTWj!`FWACO(~o-YFTD+oW%pW4jN1K1u{zKyp~5E%ohCV{6n;I}{HwVv`Z0G(?TLTdSGJTc+Lb*K&Q!%2ws zS{Q}MLw~&9=}Zu&l%Iyh0>FK2$M?&>cAlY6{B;!G!Zb-SQAEqR&{Pu=rH;(xFoWE8 z_ashKLDNY42jNh3Z!;Rcd8YlKkg@RoRJ?oZ4ew#Zxp;X0!B)U(S;whOH{@2lwuSD~ z$G)Qn-cz1xxdP}NANF+ofL`iH0r~5J z>j0=3%(|UmC394`NtlM5giJ43V$NOVfX=kD{v?bxStoXUw}><8ZcfON*{(}azy*^>rb#RZ+S>S zf^s{Xo#sz#xx6q4pQ?hXfwJN3j5kdPhTn>%m5IUSGB23Ev=n4$EFQ31HB+SOi zJ3>fkJ^mY-8||#> zr;jXuzu5y5tXv_r6srN~Kkbt5k3|;uQgmlo$@?h@(1KH?U4nM)$c!7Keo9yxfY!io z%5VA}ni`~z9K$Xra!=sePoKe@&GCOTiWmW ztm=~*sW~Z+f``(hPNl|47aF`~za6hCpcq52t3b-R7aw@D-GC0(kayp@pWwcDyFqn< z@C`*I)?{d9NVB+F>|J1^+yHSnahWbg)i+ zW1M62bllF$;@=5ewIY7>P=_cyd)cdJ`Ob^-My=icIXcOWk$2neDAX0pz;B8Joiyo4 zZ=&HfD|w1gb?e!V#L!h+xYEy80%j?lr#xpi(BuVO0VY8Dp(bjQ5;zrAb*{AVvJ^J^ zh5}?zIyO9dog4Fgm%>I}rZtw!n)ACUE{u@~nYzZks%L~ik zZWM>kpk?KT;^Wjh6P(8Lz7w$Z*1Zp2TrX>tBb|TK(mF5Ha*=n_I*9o|TZ+WwX+kg7*-Xg;VNGrRPj> zCDf>HhE}IbP0*VM$JbeNuyinX4>cT^3cmqmRWXI2r*)+X0X6w7YUiX&4#&5_Lc}~L z^p{g9>p$GX-?myewb@{_H`d$c`ny-{#F-#6k@wJHx%^H&w`{_ShhBMx9 z4X3n3PRh(#oQ6C9mcfR$C%jwW=(*vXqBX~J9#V5AxNp0Obp)2L1I9Arv!+t#jH4WP z3!D3Cuz(T&R7Z6I)+}H)WUrJ}Ip9r8ohc}NhP7E|DWgl&wMl!y#G{^iZ6urMsYlt2 zg0cI=M6G??jw-}7d1MDcOtFs2yNtT3JEAZTzxgwpnB4PfK!x=98fCF-CaRrn9malA zjJv18mG0b!9ul?4Qi>Kzq)T$`>&1ARN<&XPkr&-19;k=xG{e)*^zfD|EJ!)z@lwi# z)^>#zK1!a+31!FxJy8my#Cr?6%2LoZ8gSt0UyLB_J9GTdB&u zaevf2&N||pO0sWN@m4MNsGd(4Vo>#g&u#i({A@XHTHjv za+nK_JMTid;%vh=oxeLgI^Ej(kK&=CdO3=37eGW(_(;%32y@wXTsZ0?q#iDDuzvot z;e;$3nYk6dXFe0s@JG5^fU-yxrgJ#=@6L5o$xP&rS4kK*~0$!cr*+VBg<6B8Ro{%12tSNZv_W zX-(#ulHLx3G2;EcBc?@qSW?OS&#=^e zaPhBWZrMG`2sBJ!tM)DQ4OFVzCG%3jT}r9WWg|Cw?9spW=@_!^>-(L*ky7|o6hDTH zfK~AI2!Bd7$v?J{YUH*D%BwTf*`rS-PjQkFbP71G-tZWGji<;!)6q%EeCH7SjPL|P zRX|giD&eaO!kvW>8)D)WYqsy|SUy!BXnx>}f1(F5G{@Yzpl!GEKsudKRJDXy- zIu#3lHUOg|5b~6}6!d*+rQJ!I{;TLyaG=tD$P1VTDjIM6g%%i)X0GL5h#VtgJ{jI{ z+imvR8^7lAcfl+8lD<+}5%KdOo}vUb2)ynox4+3AGojFs-?xy`RL4W(tXRGXKm-bC zMwf+D{5=Y3BtbZ3BjkKLV6)O(tv3AYzXL6o1yokr2zKX86wgB&&Mociac8_dEQqn% z#o0hE?bYy_`FBB#ztQDkFL*FID-$Av3xB74ILJs%XYvsdNHn!l#jOGnr&un2mWm3(RRP144Di|+JMAqzjJZ> zL+1Jq!h;Ji7Xs6FUdg>MFN+xYZ~G691+*NQ?11W79cy+j#`1|hmWM__YO_!3T^XLG zC^*_dZP852${q*HVIRXz7!-DD;v^R3f*~Wdd3Rpqluue0OMmG4wD>-$7K`ahT@69R zxA#o;uKTl@j;A2#6%76Unc84GkL4SOFS&1>`;B)7vm2>p0Z0!GlDo^#%hF3Nt3?^t zS>Y<7BQ0!Dgo|DUj?EW+=>bbh|>zbvI~DGJCyscvG)uI}`nevX1a z+khWh8(HH-5KsycpdnUSS=VX6sXpl$if o)`yRxkVS__N2>c6Z#25Ya`}>3cK}K?1rmTW`evt|;m_avA75nCV*mgE literal 0 HcmV?d00001 diff --git a/src/pages/IntroducePage/Main.jsx b/src/pages/IntroducePage/Main.jsx index 44c3beb..cda20af 100644 --- a/src/pages/IntroducePage/Main.jsx +++ b/src/pages/IntroducePage/Main.jsx @@ -1,6 +1,6 @@ import NavBar from "../../components/IntroducePage/NavBar"; import main_center from "../../assets/introduce/main_center.svg"; -import main_bottom from "../../assets/introduce/main_bottom.svg"; +import main_bottom from "../../assets/introduce/bottom.png"; import styled from "styled-components"; import Background from "../../components/IntroducePage/Background"; import { useNavigate } from "react-router-dom"; @@ -66,39 +66,39 @@ const Center = styled.div` const Bottom = styled.div` position: relative; img { - width: 810.9px; - height: 366.3px; + width: 684x; + height: 357.2px; position: fixed; left: 50%; bottom: 0px; - z-index: 2; + z-index: 0; transform: translateX(-50%); cursor: pointer; - @media (min-width: 1024px) { - width: 100%; /*1024px보다 클 때 width 100%*/ - } - @media (max-width: 1024px) { + + @media (max-width: 700px) { + width: 100%; + height: auto; } } `; const BottomText = styled.div` position: fixed; left: 50%; - bottom: 80px; + bottom: 2.5em; transform: translateX(-50%); z-index: 3; color: var(--light_black, #232323); text-align: center; - font-size: 32px; + font-size: 2rem; font-style: normal; font-weight: 700; line-height: 40px; /* 125% */ cursor: pointer; - @media (max-width: 768px) { - postiion: absolute; - bottom: 80px; - } white-space: nowrap; + @media (max-width: 500px) { + font-size: 1.2em; + bottom: 1em; + } `; export default Main;