/* * PC 영역을 기본으로 두고 모바일만 덮어쓰기 하고 싶다면 */ #wrap_pc { display: block; } #wrap_mobile { display: none; } /* 모바일 */ @media (max-width: 1279px) { #wrap_pc { display: none; } #wrap_mobile { display: block; } } html>/**/body { width:1280px-y:scroll;} @charset "utf-8"; .mgt2 {margin-top:2px !important;clear:both;} .mgt5 {margin-top:5px !important;clear:both;} .pdt1 {padding-top:1px !important;clear:both;} .pdt2 {padding-top:2px !important;clear:both;} .pdt3 {padding-top:3px !important;clear:both;} .pdt4 {padding-top:4px !important;clear:both;} .pdt5 {padding-top:5px !important;clear:both;} .pdt6 {padding-top:6px !important;clear:both;} .pdt7 {padding-top:7px !important;clear:both;} .pdt8 {padding-top:8px !important;clear:both;} .pdt9 {padding-top:9px !important;clear:both;} .pdt10 {padding-top:10px !important;clear:both;} .pdt11 {padding-top:11px !important;clear:both;} .pdt12 {padding-top:12px !important;clear:both;} .pdt13 {padding-top:13px !important;clear:both;} .pdt15 {padding-top:15px !important;clear:both;} .pdt17 {padding-top:17px !important;clear:both;} .pdt20 {padding-top:20px !important;clear:both;} .pdt25 {padding-top:25px !important;clear:both;} .pdt30 {padding-top:30px !important;clear:both;} .pdt35 {padding-top:35px !important;clear:both;} .pdt40 {padding-top:40px !important;clear:both;} .pdt45 {padding-top:45px !important;clear:both;} .pdt50 {padding-top:50px !important; clear:both;} .pdt60 {padding-top:60px !important;clear:both;} .pdt70 {padding-top:70px !important;clear:both;} .pdt75 {padding-top:75px !important;clear:both;} .pdt80 {padding-top:80px !important;clear:both;} .pdt90 {padding-top:90px !important;clear:both;} .pdt100 {padding-top:100px !important;clear:both;} .pdt100 {padding-top:100px !important;clear:both;} .pdt110 {padding-top:110px !important;clear:both;} .pdt120 {padding-top:120px !important;clear:both;} .pdt130 {padding-top:130px !important;clear:both;} .pdt140 {padding-top:140px !important;clear:both;} .pdt150 {padding-top:150px !important;clear:both;} .pdt160 {padding-top:160px !important;clear:both;} .pdt170 {padding-top:170px !important;clear:both;} .pdt180 {padding-top:180px !important;clear:both;} .pdt190 {padding-top:190px !important;clear:both;} .pdt200 {padding-top:200px !important;clear:both;} .pdt250 {padding-top:250px !important;clear:both;} .pdt300 {padding-top:300px !important;clear:both;} .pdt350 {padding-top:350px !important;clear:both;} .pdt400 {padding-top:400px !important;clear:both;} .pdt500 {padding-top:500px !important;clear:both;} .pdt600 {padding-top:600px !important;clear:both;} .pdt700 {padding-top:700px !important;clear:both;} .w10 {width: 10%} .w20 {width: 20%} .w30 {width: 30%} .w40 {width: 40%} .w48 {width: 48%} .w49 {width: 49%} .w50 {width: 50%} .w60 {width: 60%} .w70 {width: 70%} .w80 {width: 80%} .w90 {width: 90%} .w100 {width: 100%} .pdt_b {position:relative; padding-top:100px !important;clear:both;} .pdt_b2 {position:relative; padding-top:60px !important;clear:both;} .pdt_b3 {position:relative; padding-top:30px !important;clear:both;} .pd15 {padding:15px !important;clear:both;} .pd20 {padding:20px !important;clear:both;} .pd30 {padding:30px !important;clear:both;} .pd21 {padding:20px !important;clear:both; border-top:1px solid #ececec;} .pdl5 {padding-left:5px !important;} .pdl10 {padding-left:10px !important;} .pdb10 {padding-bottom:10px !important;} .pdb15 {padding-bottom:15px !important;} .pdb17 {padding-bottom:17px !important;} .pdb18 {padding-bottom:18px !important;} .pdb20 {padding-bottom:20px !important;} .dan50 {margin-top:50px !important;} .mgt10 {margin-top:10px !important;} .mgt15 {margin-top:15px !important;} .mgt30 {margin-top:30px !important;} .mgt50 {margin-top:50px !important;} .mgb5 {margin-bottom:5px !important;} .mgb10 {margin-bottom:10px !important;} .mgb20 {margin-bottom:20px !important;} .mgb25 {margin-bottom:25px !important;} .mgl15 {margin-left:15px !important;} .mgr3 {margin-right:3px !important;} .mgr5 {margin-right:5px !important;} .mgr6 {margin-right:6px !important;} .mgr7 {margin-right:7px !important;} .mgr8 {margin-right:8px !important;} .mgr9 {margin-right:9px !important;} .mgr10 {margin-right:10px !important;} .mgr11 {margin-right:11px !important;} .mgr12 {margin-right:12px !important;} .mgr13 {margin-right:13px !important;} .mgr15 {margin-right:15px !important;} .mgr20 {margin-right:20px !important;} .mgr23 {margin-right:23px !important;} .mgr24 {margin-right:24px !important;} .mgr25 {margin-right:25px !important;} .mgr28 {margin-right:28px !important;} .mgr30 {margin-right:30px !important;} .mgr39 {margin-right:39px !important;} .mgr40 {margin-right:40px !important;} .mgr45 {margin-right:45px !important;} .mgr46 {margin-right:46px !important;} .mgr47 {margin-right:47px !important;} .mgr48 {margin-right:48px !important;} .mgr49 {margin-right:49px !important;} .mgr50 {margin-right:50px !important;} .mgr52 {margin-right:52px !important;} .mgr54 {margin-right:54px !important;} .mgr58 {margin-right:58px !important;} .mgr60 {margin-right:60px !important;} img {display:block;} .ft_col_b {color:#000;} .ft_col_p {color:#72134a;} .line_b1 {border-bottom:1px solid #2b2b2b} .box1280{position:relative; width:1280px; margin:0 auto;} @import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700"); @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap'); @import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css'); @import url('//fonts.googleapis.com/earlyaccess/jejumyeongjo.css'); @import url('//fonts.googleapis.com/earlyaccess/nanummyeongjo.css'); /* ✅ 1279px 이하 = 모바일 버전만 표시 */ @media (max-width: 1279px) { * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @font-face { font-family: 'GmarketSansMedium'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GmarketSansTTFBold'; src: url('https://cdn.jsdelivr.net/gh/wizfile/font/GmarketSansTTFBold.eot'); src:url('https://cdn.jsdelivr.net/gh/wizfile/font/GmarketSansTTFBold.woff') format('woff'); font-style: normal; } @font-face { font-family: 'Eommakkaturi'; src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/Katuri.woff') format('woff'); font-weight: normal; font-display: swap; } /*기본설정 */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;letter-spacing:0em;} ol,ul,li {list-style:none;padding:0;margin:0;} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0} ins{text-decoration:none} del{text-decoration:line-through} **html input, *html input {margin:-1px 0px -1px 0px; width:100%; } html {height:100%;} body {background:#000; color:#333; font-size:14px; padding:0;margin:0; } /* 모바일 */ @media (max-width: 1279px) { body {background:#fff; color:#333; font-size:14px; padding:0;margin:0; height:100%; word-spacing:0em; letter-spacing:-0.1em;} } hr {display:none;} dl,li {list-style:none;padding:0;margin:0;} a {text-decoration:none; color:#333; padding:0;margin:0;} a:link:hover, a:active {text-decoration:none; color:#333;} input,select,textarea {font-size:100%;vertical-align:middle;} em {font-style:normal;} div#select_box {position:relative; border:1px solid #ccc; border-radius:5px; height:26px; width:100%; background: url('../images/select_arw.gif')no-repeat right center #f6f6f6; background-size:28px;} div#select_box label {position:absolute; top:5px; margin-left:5px; font-size:14px; color:#999;} div#select_box select#color {border:1px solid #ccc; font-size:14px; color:#999; line-height:100%; width:100%; height:26px; background:#f6f6f6; opacity:0;} .png24 {tmp:expression(setPng24(this));} .f300{font-weight:300;} .f400{font-weight:400;} .f500{font-weight:500;} .f600{font-weight:600;} .f700{font-weight:700;} /* ✅ 1280px 이상 = PC 버전만 표시 */ @media (min-width: 1280px) { .scroll-downs { position: absolute; right: 0; bottom: 50px; left: 0; margin: auto; color:#afafae; text-size:12px; width :38px; height: 55px; font-family: 'yg-jalnan'; } .mousey { width: 3px; padding: 10px 15px; height: 35px; border: 2px solid #afafae; border-radius: 25px; opacity: 0.75; box-sizing: content-box; } .scroller { width: 3px; height: 10px; border-radius: 25%; background-color: #00afd8; animation-name: scroll; animation-duration: 1.5s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite; } @keyframes scroll { 0% { opacity: 0; } 10% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(15px); opacity: 0;} } } /* ✅ 1280px 이상 = PC 버전만 표시 */ /* @media (min-width: 1280px) { .b_cover {position:fixed; top: 0; left: 0; background:url('../images/black_bg.png'); background-size: cover; width:100%; height:100%; z-index:1700; } .b_cover .pop_stmt {position:relative; width:80%; max-width:1200px; min-width:1000px; background:url('../images/stmt_bg.jpg')no-repeat; background-size:cover; transform: translate(-50%, -50%); top: 50%; left: 50%; overflow:auto; overflow-y:hidden; overflow-x:hidden; box-shadow: 0px 8px 6px 0px rgb(0, 0, 0, 0.2); } .b_cover .pop_stmt .close {position:absolute; right:20px; top:17px; display:block; width:40px; height:40px; background: url('../images/btn_close.png') no-repeat center; z-index: 100;} .b_cover .pop_stmt .pop_area {position:relative; padding:70px 50px; display:block; text-align:center;} .b_cover .pop_stmt .ttl1 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(44px, 4vw, 50px); color:#000; line-height:130%; text-align:center;} .b_cover .pop_stmt .ttl2 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(30px, 3vw, 36px); color:#fff; background:#aa0000; font-weight:700; line-height:130%; text-align:center; display:inline; padding:3px 15px 0px 15px;} .b_cover .pop_stmt .txt1 {position:relative; font-family: 'GmarketSansMedium', sans-serif; font-size:clamp(18px, 2vw, 20px); color:#444; font-weight: 400; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; text-align: justify;} .b_cover .pop_stmt .txt2 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(22px, 2vw, 24px); color:#222; font-weight: 400; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; } .b_cover .pop_stmt .txt3 {position:relative; font-family: 'GmarketSansMedium', sans-serif; font-size:clamp(16px, 2vw, 18px); color:#666; font-weight: 200; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; } .pop_privacy {position:relative; width:600px; background:url('../images/stmt_bg.jpg')no-repeat; background-size:cover; overflow:auto; overflow-y:hidden; overflow-x:hidden; box-shadow: 0px 8px 6px 0px rgb(0, 0, 0, 0.2); } .pop_privacy .close {position:absolute; right:20px; top:17px; display:block; width:40px; height:40px; background: url('../images/btn_close.png') no-repeat center; } .pop_privacy .pop_area {position:relative; padding:40px; display:block; text-align:center;} .pop_privacy .ttl1 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(30px, 3vw, 30px); color:#000; line-height:130%; text-align:center; background: url('../images/line1.png')repeat-x center; display:inline;} .pop_privacy .txt1 {position:relative; font-family: 'GmarketSansMedium', sans-serif; font-size:clamp(16px, 2vw, 16px); color:#444; font-weight: 400; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; text-align: justify;} .pop_privacy .txt2 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(20px, 2vw, 20px); color:#222; font-weight: 400; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; text-align: justify;} .pop_privacy .txt3 {position:relative; font-family: 'GmarketSansMedium', sans-serif; font-size:clamp(16px, 2vw, 16px); color:#666; font-weight: 200; line-height:150%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; text-align: justify;} } */ /* ✅ 1279px 이하 = MOBILE 버전만 표시 */ /* @media (max-width: 1279px) { .b_cover {position:fixed; top: 0; left: 0; background:url('../images/black_bg.png'); width:100%; height:100%; z-index:1700} .b_cover .pop_stmt {position:relative; width:90%; max-width:1000px; min-width:320px; background:url('../images/stmt_bg.jpg')no-repeat; background-size:cover; transform: translate(-50%, -50%); top: 50%; left: 50%; overflow:auto; overflow-y:hidden; overflow-x:hidden; box-shadow: 0px 8px 6px 0px rgb(0, 0, 0, 0.2); } .b_cover .pop_stmt .close {position:absolute; right:20px; top:17px; display:block; width:25px; height:25px; background: url('../images/btn_close.png') no-repeat center; background-size:70%; } .b_cover .pop_stmt .pop_area {position:relative; padding:7% 5%; display:block; text-align:center;} .b_cover .pop_stmt .ttl1 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(18px, 4vw, 50px); color:#000; line-height:130%; text-align:center;} .b_cover .pop_stmt .ttl2 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(14px, 3vw, 30px); color:#fff; background:#aa0000; font-weight:700; line-height:130%; text-align:center; display:inline; padding:3px 15px 0px 15px;} .b_cover .pop_stmt .txt1 {position:relative; font-family: 'GmarketSansMedium', sans-serif; font-size:clamp(11px, 3vw, 20px); color:#444; font-weight: 400; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; text-align: justify;} .b_cover .pop_stmt .txt2 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(12px, 3vw, 24px); color:#222; font-weight: 400; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; } .b_cover .pop_stmt .txt3 {position:relative; font-family: 'GmarketSansMedium', sans-serif; font-size:clamp(11px, 2vw, 18px); color:#666; font-weight: 200; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; } .pop_privacy {position:relative; width:100%; background:url('../images/stmt_bg.jpg')no-repeat; background-size:cover; overflow:auto; overflow-y:hidden; overflow-x:hidden; box-shadow: 0px 8px 6px 0px rgb(0, 0, 0, 0.2); } .pop_privacy .close {position:absolute; right:20px; top:17px; display:block; width:40px; height:40px; background: url('../images/btn_close.png') no-repeat center; } .pop_privacy .pop_area {position:relative;padding:7% 5%; display:block; text-align:center;} .pop_privacy .ttl1 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(14px, 3vw, 30px); color:#000; line-height:130%; text-align:center; background: url('../images/line1.png')repeat-x center; display:inline;} .pop_privacy .txt1 {position:relative; font-family: 'GmarketSansMedium', sans-serif; font-size:clamp(11px, 2vw, 16px); color:#444; font-weight: 400; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; text-align: justify;} .pop_privacy .txt2 {position:relative; font-family: 'GmarketSansTTFBold', sans-serif; font-size:clamp(12px, 2vw, 20px); color:#222; font-weight: 400; line-height:130%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; text-align: justify;} .pop_privacy .txt3 {position:relative; font-family: 'GmarketSansMedium', sans-serif; font-size:clamp(11px, 2vw, 16px); color:#666; font-weight: 200; line-height:150%; text-align:left; word-break: keep-all; overflow-wrap: anywhere; text-align: justify;} } */ /* flex */ .dsp_flex { display: flex; } /* 가로 */ .dsp_flex_sp_between { display: flex; justify-content: space-between; } .dsp_flex_sp_around { display: flex; justify-content: space-around; } .dsp_flex_sp_evenly { display: flex; justify-content: space-evenly; } .dsp_flex_row_reverse { display: flex; flex-direction: row-reverse; } /* 세로 */ .dsp_flex_column { display: flex; flex-direction: column; } .dsp_flex_column_reverse { display: flex; flex-direction: column-reverse; } /* 가로세로 정렬 */ .dsp_flex_x_start { display: flex; justify-content: flex-start; } .dsp_flex_x_end { display: flex; justify-content: flex-end; } .dsp_flex_y_end { display: flex; -webkit-align-items: flex-end; align-items: flex-end; } .dsp_flex_x_center { display: flex; justify-content: center; } .dsp_flex_y_center { display: flex; align-items: center; } .dsp_flex_xy_center { display: flex; justify-content: center; align-items: center; }