/* 1번 박스 */ @media (min-width: 850px) { #mbn { position:relative; width:100%; height:auto; margin:0px auto; height:auto; display:inline-block; padding:130px 0; } #mbn .mbn_box { position:relative; width: calc( 100% - 90px ); height:auto; margin:0px auto; height:auto; display:table; table-layout: fixed; border-spacing:20px; max-width:1200px; } #mbn .mbn_box .mbn_box1 h2 { font-size:24px; font-weight:700; color:#ee7700; line-height:25px; margin-bottom:0px; font-family: 'Jua', sans-serif; } #mbn .mbn_box .mbn_box1 p { font-size:44px; color:#333; line-height:53px; font-weight:300; max-width:300px; } #mbn .mbn_box .mbn_box1 { position:relative; display:table-cell; margin:0 0px;} #mbn .mbn_box .mbn_box2 { position:relative; display:table-cell; margin:0 0px; } #mbn .mbn_box .mbn_box3 { position:relative; display:table-cell; margin:0 0px;} } @media (max-width: 850px) { #mbn { position:relative; width:100%; height:auto; margin:0px auto; height:auto; display:inline-block; padding:40px 0; } #mbn .mbn_box { position:relative; width: calc( 100% - 30px ); height:auto; margin:0px auto; height:auto; border-spacing:20px; max-width:1200px; } #mbn .mbn_box .mbn_box1 h2 { font-size:22px; font-weight:300; color:#ee7700; line-height:20px; margin-bottom:10px; font-family: 'Jua', sans-serif; text-align:center; } #mbn .mbn_box .mbn_box1 p { font-size:27px; color:#333; line-height:35px; font-weight:300; text-align:center; } #mbn .mbn_box .mbn_box1 { position:relative; margin:0 0px 40px; width:100%; display:inline-block; } #mbn .mbn_box .mbn_box2 { position:relative; margin:0 0px 20px; display:inline-block; width:100%; } #mbn .mbn_box .mbn_box3 { position:relative; ; margin:0 0px; display:inline-block; width:100%; } #mbn .mbn_box .mbn_box1 p br { display:none; } } /* 2번 박스 */ #main_bg1 .divh {display:none;} @media only screen and (min-width:768px) { #main_bg1 .divh.desktop { display:block;} #main_bg1 .divh.mobile { display:none;} } @media only screen and (max-width:767px) { #main_bg1 .divh.mobile { display:block;} #main_bg1 .divh.desktop { display:none;} } @media (min-width: 850px) { #main_bg1 { position:relative; width:100%; padding:130px 0; text-align:center; margin-top:10px; } #main_bg1 h2 { font-size:25px; font-weight:300; color:#111; line-height:25px; border:2px solid #222; display:inline-block; padding:9px 30px; margin:0 auto 25px; border-radius:250px; letter-spacing: -0.5px; } #main_bg1 h3 { font-size:60px; font-weight:900; color:#111; line-height:60px; padding-bottom:60px; display:block; letter-spacing: -0.5px; } #main_bg1 .banner { position:relative; width: calc( 100% - 100px ); margin:0 auto 0px; display:table; table-layout: fixed; text-align:center; border-spacing:20px; } #main_bg1 .banner .banner_box { position:relative; display:table-cell; margin:0 0px; background:#fff; padding:90px 70px 70px; } #main_bg1 .banner .banner_box img {position:relative; max-width:130px; margin-bottom:10px; z-index:2; } #main_bg1 .banner .banner_box h5 { position:absolute; top:20px; left:20px; font-size:120px; color:#f6f6f6; line-height:120px; z-index:0; font-family: 'Anton', sans-serif; font-weight:400; } #main_bg1 .banner .banner_box h4 { position:relative; font-size:24px; line-height:26px; font-weight:400; margin:0 auto; padding-bottom:20px; z-index:3; z-index:3; } #main_bg1 .banner .banner_box p { position:relative; font-size:17px; font-weight:400; margin:0 auto; line-height:25px; color:#646464; z-index:3; letter-spacing: -0.5px;} } @media (max-width: 850px) { #main_bg1 { position:relative; width:100%; padding:60px 0 40px; text-align:center; margin-top:10px; } #main_bg1 h2 {font-size:4vw; font-weight:400; color:#111; line-height:4vw; border:1px solid #222; display:inline-block; padding:4px 20px; margin:0 auto 15px; border-radius:250px; } #main_bg1 h3 { font-size:7vw; font-weight:900; color:#111; line-height:9vw; padding-bottom:40px; display:inline-block; letter-spacing: -0.5px; } #main_bg1 .banner { position:relative; width: calc( 100% - 30px ); margin:0 auto 10px; text-align:center; display:inline-block; letter-spacing: -0.5px; } #main_bg1 .banner .banner_box { position:relative; margin:0 0 20px; background:#fff; padding:60px 60px 40px; z-index:2; } #main_bg1 .banner .banner_box img {position:relative; max-width:90px; margin-bottom:20px; z-index:5; } #main_bg1 .banner .banner_box h5 { position:absolute; top:10px; left:20px; font-size:150px; color:#f6f6f6; line-height:40vw; z-index:0; font-family: 'Anton'; } #main_bg1 .banner .banner_box h4 { position:relative; font-size:24px; line-height:28px; font-weight:400; margin:0 auto; padding-bottom:14px; z-index:2; } #main_bg1 .banner .banner_box p { position:relative; font-size:17px; font-weight:400; margin:0 auto; line-height:25px; color:#787878; z-index:2; letter-spacing: -0.5px;} } /* 3번박스 */ .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-width: 850px) { #main_bg2 { position:relative; width:100%; margin:0px auto; text-align:center; padding:130px 0; } #main_bg2 h2 { font-size:25px; font-weight:300; color:#111; line-height:25px; border:2px solid #222; display:inline-block; padding:9px 30px; margin:0 auto 25px; border-radius:250px; letter-spacing: -0.5px; } #main_bg2 h3 { font-size:60px; font-weight:900; color:#111; line-height:60px; padding-bottom:60px; display:block; letter-spacing: -0.5px; } #main_bg2 .banner_box { position:relative; margin:0 auto; width: calc( 100% - 100px ); clear:both; display:table; table-layout: fixed; max-width:1600px; } #main_bg2 .banner_box1_1 { position:relative; margin:0 auto; width:50%; display:table-cell; overflow:hidden; vertical-align:middle; padding-bottom:30%; height:0px; } #main_bg2 .banner_box1_1 img { position: absolute; object-fit: cover;min-width:100%; min-height:100%; left:0px; top:0px; } #main_bg2 .banner_box1_2 { margin:0 auto; width:50%; position:relative; display:table-cell; text-align:left; padding:70px 0; height:0px; vertical-align:middle; } #main_bg2 .banner_box1_2 h4 { position:relative; font-size:20px; font-weight:300; margin:0 0 0 90px; line-height:30px; padding-bottom:10px; width: calc( 100% - 100px ); max-width:600px; } #main_bg2 .banner_box1_2 h5 { position:relative; font-size:38px; font-weight:400; margin:0 0 0 90px; line-height:48px; padding-bottom:10px; width: calc( 100% - 100px ); max-width:600px; letter-spacing: -0.5px; } #main_bg2 .banner_box1_2 p { position:relative; font-size:17px; font-weight:400; margin:0 0 0 90px; line-height:26px; width: calc( 100% - 100px ); max-width:600px; color:#646464; letter-spacing: -0.5px;} #main_bg2 .banner_box1_1 .embed-container { position: absolute; object-fit: cover;min-width:100%; min-height:100%; left:0px; top:0px; } } @media (max-width: 850px) { #main_bg2 { position:relative; width:100%; margin:0px auto; text-align:center; padding:60px 0; } #main_bg2 h2 { font-size:4vw; font-weight:300; color:#111; line-height:4vw; border:1px solid #222; display:inline-block; padding:4px 20px; margin:0 auto 15px; border-radius:250px; letter-spacing: -0.5px; } #main_bg2 h3 { font-size:7vw; font-weight:900; color:#111; line-height:9vw; padding-bottom:30px; display:block; letter-spacing: -0.5px; } #main_bg2 .banner_box { position:relative; margin:0 auto; width: calc( 100% - 20px ); clear:both; max-width:1600px; } #main_bg2 .banner_box1_1 { position:relative; margin:0 auto; width:100%; overflow:hidden; vertical-align:middle; padding-bottom:65%; height:0px; } #main_bg2 .banner_box1_1 img { position: absolute; object-fit: cover;min-width:100%; min-height:100%; left:0px; top:0px; } #main_bg2 .banner_box1_2 { position:relative; margin:0 auto; text-align:left; padding:30px 0; height:auto; vertical-align:middle; } #main_bg2 .banner_box1_2 h4 { position:relative; font-size:15px; font-weight:300; margin:0 auto 0px; line-height:23px; padding-bottom:10px; width: calc( 100% - 10px ); max-width:600px; } #main_bg2 .banner_box1_2 h5 { position:relative; font-size:38px; font-weight:400; margin:0 auto 0px; line-height:48px; padding-bottom:10px; width: calc( 100% - 10px ); max-width:600px; letter-spacing: -0.5px; } #main_bg2 .banner_box1_2 p { position:relative; font-size:17px; font-weight:400; margin:0 auto 0px; line-height:20px; width: calc( 100% - 10px ); max-width:600px; color:#787878; letter-spacing: -0.5px; } #main_bg2 .banner_box1_1 .embed-container { position: absolute; object-fit: cover;min-width:100%; min-height:100%; left:0px; top:0px; } } /* 4번 박스 */ @media (min-width: 850px) { #main_bg3 { position:relative; width:100%; padding:130px 0; text-align:center; } #main_bg3 img.right { position:absolute; top:60px; left: 50%; transform: translateX(-50%); } #main_bg3 h2 { position:relative; font-size:25px; font-weight:300; color:#111; line-height:25px; display:inline-block; margin:0 auto 25px; z-index:4; letter-spacing: -0.5px; } #main_bg3 h3 { position:relative; font-size:60px; font-weight:900; color:#111; line-height:60px; padding-bottom:60px; display:block; z-index:4; letter-spacing: -0.5px; } #main_bg3 .banner3 { position:relative; width: calc( 100% - 40px ); margin:0 auto 0px; display:table; table-layout: fixed; text-align:center; border-spacing:20px; } #main_bg3 .banner3 .banner_box3 { position:relative; display:table-cell; margin:0 0px; background:#fff; padding:20px 10px 15px; border-radius:20px; border:1px dashed #000; -webkit-box-shadow:5px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow:5px 5px 0px rgba(0,0,0,0.2); box-shadow:5px 5px 0px rgba(0,0,0,0.2); } #main_bg3 .banner3 .banner_box3 .namebox { position:relative; display:table; margin:0 auto; width:auto; text-align:center; } #main_bg3 .banner3 .banner_box3 .namebox .img { position:relative; display:table-cell; width:70px; vertical-align:middle; text-align:left; } #main_bg3 .banner3 .banner_box3 .namebox .name { position:relative; display:table-cell; width: calc( 100% - 70px ); vertical-align:middle; } #main_bg3 .banner3 .banner_box3 .namebox img { max-width:70px; } #main_bg3 .banner3 .banner_box3 .namebox .img2 img { max-width: 131px; padding-top:10px; float: left; width: auto; height: auto; } #main_bg3 .banner3 .banner_box3 .namebox p.name1 { position:relative; font-size:23px; line-height:27px; font-weight:400; margin:0 auto; padding-bottom:5px; text-align:left; color:#111; } #main_bg3 .banner3 .banner_box3 .namebox p.name2 { position:relative; font-size:16px; line-height:23px; font-weight:300; margin:0 auto; } #main_bg3 .banner3 .banner_box3 .comment { position:relative; width: calc( 100% - 70px ); padding:25px 30px; border-radius:15px; margin:0 auto; background:#f6f6f6; display:inline-block; } #main_bg3 .banner3 .banner_box3 .comment { font-size:16px; font-weight:300; line-height:25px; color:#646464; letter-spacing: -0.5px; } } @media (max-width: 850px) { #main_bg3 { position:relative; width:100%; padding:60px 0; text-align:center; } #main_bg3 img.right { position:absolute; top:20px; right:30px; } #main_bg3 img.right { max-height:50px; } #main_bg3 h2 { position:relative; z-index:4; font-size:5vw; font-weight:400; color:#111; line-height:5vw; padding-bottom:10px; width: cacl( 100% - 30px ); margin:0 auto; letter-spacing: -0.5px; } #main_bg3 h3 { position:relative; z-index:4; font-size:7vw; font-weight:900; color:#111; line-height:9vw; padding-bottom:40px; display:inline-block; letter-spacing: -0.5px; } #main_bg3 .banner3 { position:relative; width: calc( 100% - 40px ); margin:0 auto 0px;text-align:center; border-spacing:20px; } #main_bg3 .banner3 .banner_box3 { position:relative; width: calc( 100% - 10px ); margin:0 0 30px; background:#fff; padding:20px 10px 15px; border-radius:20px; border:1px dashed #000; } #main_bg3 .banner3 .banner_box3 .namebox { position:relative; display:table; } #main_bg3 .banner3 .banner_box3 .namebox .img { position:relative; display:table-cell; width:70px; vertical-align:middle; } #main_bg3 .banner3 .banner_box3 .namebox .name { position:relative; display:table-cell; width: calc( 100% - 70px ); vertical-align:middle; } #main_bg3 .banner3 .banner_box3 .namebox img { max-width:60px; } #main_bg3 .banner3 .banner_box3 .namebox .img2 img { max-width: 100px; padding-top:10px; float: left; width: auto; height: auto; } #main_bg3 .banner3 .banner_box3 .namebox p.name1 { position:relative; font-size:17px; line-height:22px; font-weight:400; margin:0 auto; padding-bottom:5px; text-align:left; color:#111; } #main_bg3 .banner3 .banner_box3 .namebox p.name2 { position:relative; font-size:14px; line-height:20px; font-weight:300; margin:0 auto; text-align:left; color:#787878; } #main_bg3 .banner3 .banner_box3 .comment { position:relative; width: calc( 100% - 70px ); padding:25px 30px; border-radius:15px; margin:0 auto; background:#f6f6f6; display:inline-block; } #main_bg3 .banner3 .banner_box3 .comment { font-size:14px; font-weight:300; line-height:20px; color:#787878; } } /* 5번 박스 */ @media (min-width: 850px) { #main_bg4 { position:relative; width:100%; padding:130px 0; text-align:center; } #main_bg4 h5 { position:relative; font-size:25px; font-weight:300; color:#111; line-height:25px; display:inline-block; margin:0 auto 25px; z-index:4; letter-spacing: -0.5px;} #main_bg4 h8 { position:relative; font-size:60px; font-weight:900; color:#111; line-height:60px; padding-bottom:60px; display:block; z-index:4; } #main_bg4 img { max-width:1200px; margin:0 auto; width: calc( 100% - 40px ); } } @media (max-width: 850px) { #main_bg4 { position:relative; width:100%; padding:60px 0; text-align:center; } #main_bg4 h5 { f position:relative; z-index:4; font-size:5vw; font-weight:400; color:#111; line-height:5vw; padding-bottom:10px; width: cacl( 100% - 30px ); margin:0 auto; letter-spacing: -0.5px; } #main_bg4 h8 { font-size:7vw; font-weight:900; color:#111; line-height:9vw; padding-bottom:40px; display:inline-block; } #main_bg4 img { width: calc( 100% - 60px ); margin:0 auto; } } /* 6번 박스 */ @media (min-width: 850px) { #main_bg5 { position:relative; width:100%; padding:130px 0 160px; text-align:center; } #main_bg5 img.right { position:absolute; top:60px; left: 50%; transform: translateX(-50%); } #main_bg5 h5 { position:relative; font-size:25px; font-weight:300; color:#111; line-height:25px; display:inline-block; margin:0 auto 25px; z-index:4; } #main_bg5 h8 { position:relative; font-size:60px; font-weight:900; color:#111; line-height:60px; padding-bottom:60px; display:block; z-index:4; } #main_bg5 .banner5_line { position:relative; width: calc( 100% - 50px ); margin:0px auto 0px; text-align:center; max-width:1300px; background:#fff; padding:10px; border:1px solid #000; } #main_bg5 .banner5 { position:relative; width:100%; margin:0px auto 0px; display:table; table-layout: fixed; text-align:center; max-width:1300px; border-spacing:21px; } #main_bg5 .banner5 .banner_box5 { position:relative; display:table-cell; margin:0 0px; padding:20px 10px 40px; text-align:left; } #main_bg5 .banner5 .banner_box5 img { position:absolute; left:40px; top:50%; transform: translate(0px, -50%); max-width:none; } #main_bg5 .banner5 .banner_box5 h6 { position:relative; font-size:20px; font-weight:400; margin:0 0 0 150px; padding-bottom:2px; color:#5b4734; letter-spacing: -0.5px; } #main_bg5 .banner5 .banner_box5 p { position:relative; font-size:16px; font-weight:400; margin:0 0 0 150px; line-height:23px; color:#646464; letter-spacing: -0.5px; } } @media (max-width: 850px) { #main_bg5 { position:relative; width:100%; padding:50px 0 60px; text-align:center; } #main_bg5 img.right { position:absolute; top:40px; right:10px; max-width:200px; } #main_bg5 h5 { position:relative; font-size:6vw; font-weight:500; color:#111; line-height:6vw; padding-bottom:10px; z-index:9; text-shadow: 1px 1px 0px #fff; width: calc( 100% - 30px ); } #main_bg5 h8 { position:relative; font-size:6vw; font-weight:900; color:#111; line-height:8vw; padding-bottom:40px; display:inline-block; z-index:9; text-shadow: 1px 1px 0px #fff; width: calc( 100% - 30px ); } #main_bg5 h8 img { max-width:100%; } #main_bg5 .banner5_line { position:relative; width: calc( 100% - 50px ); margin:0px auto 0px; text-align:center; max-width:1300px; background:#fff; padding:20px 15px; border:1px solid #000; } #main_bg5 .banner5 { position:relative; width:100%; margin:0 auto 0px; text-align:left; display:inline-block; } #main_bg5 .banner5 .banner_box5 { width:100%; margin:15px auto; position:relative; display:inline-block; } #main_bg5 .banner5 .banner_box5 img { max-width:100px; position:absolute; left:15px; top:50%; transform: translate(0px, -50%); margin-top:0px; } #main_bg5 .banner5 .banner_box5 h6 { position:relative; font-size:15px; line-height:20px; font-weight:400; margin:0 20px 0 130px; padding-bottom:5px; color:#5b4734; letter-spacing: -0.5px; } #main_bg5 .banner5 .banner_box5 p { position:relative; font-size:14px; line-height:18px; font-weight:400; margin:0 20px 0 130px; color:#787878; letter-spacing: -0.5px; } } /* 7번 박스 */ @media (min-width: 850px) { #main_bg6 { position:relative; width:100%; margin:0 auto; background:#fff; text-align:center; display:inline-block; padding:130px 0; } #main_bg6 .title_box { position:relative; width:auto; display:inline-block; clear:both; font-size:30px; font-weight:900; color:#000; line-height:30px; border:2px solid #000; padding:9px 30px; margin:0 auto 35px; border-radius:250px; } #main_bg6 h2 { position:relative; width:100%; font-size:65px; font-weight:400; color:#111; line-height:70px; padding-bottom:60px; display:inline-block; } #main_bg6 .main_box6 { position:relative; height:auto; width: calc( 100% - 20px ); margin:0px auto 80px; display:inline-block; } #main_bg6 .main_box6 a { } #main_bg6 .main_box6 ul { clear:both; margin:0 0 0px; } #main_bg6 .main_box6 li.bn { display:table; width: calc( 100% - 20px ); max-width:1200px; margin:0 auto; display:inline-block; text-align:center; } } @media (max-width: 850px) { #main_bg6 { position:relative; width:100%; margin:0 auto; background:#fff; text-align:center; display:inline-block; padding:60px 0 10px; } #main_bg6 .title_box { position:relative; width:auto; display:inline-block; clear:both; font-size:4vw; font-weight:900; color:#000; line-height:4vw; border:2px solid #000; padding:4px 20px; margin:0 auto 15px; border-radius:250px; } #main_bg6 h2 { position:relative; width:100%; font-size:7vw; font-weight:400; color:#111; line-height:9vw; padding-bottom:30px; display:inline-block; } #main_bg6 .main_box6 { position:relative; height:auto; width: calc( 100% - 20px ); margin:0px auto 80px; display:inline-block; } #main_bg6 .main_box6 a { } #main_bg6 .main_box6 ul { clear:both; margin:0 0 0px; } #main_bg6 .main_box6 li.bn { display:table; width: calc( 100% - 20px ); max-width:1200px; margin:0 auto; display:inline-block; text-align:center; } } @font-face { font-family: 'NEXON Lv2 Gothic'; src: url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 400; src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff'); } @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 700; src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff'); } @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 300; src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff'); } .lottemartdream * { font-family: 'LotteMartDream', sans-serif; } @font-face { font-family: 'Recipekorea'; src: url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Recipekorea.woff') format('woff'); font-weight: normal; font-style: normal; } /** * 모바일쇼핑몰 슬라이딩메뉴 */ body { height:100%; } #wrap { overflow:hidden; position:relative; width:100%; } /* 확장 */ html.expand #wrap { height:100%; } html.expand #container { z-index:1; width:100%; -webkit-transform: translateX(0%); background-color:rgba(0,0,0,0.3); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } html.expand #btnFoldLayout { z-index:405; } html.expand #aside { z-index:999; overflow-x:hidden; background-color:rgba(0,0,0,0.8); } #menu_sns { position:relative; width:80%; height:auto; margin:0px 0; height:auto; display:table; table-layout: fixed; border-spacing:10px; z-index:9; } #menu_sns li { position:relative; display:table-cell; margin:0 0px; } #menu_sns li img { max-width:33px; } #aside .slide_menu { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:80%; } #aside .slide_menu li a { font-size:22px; color:#fff; width:100%; margin:0px auto 0px; font-weight:400; } #aside .slide_menu li { padding:10px 0; text-align:center; } #aside .slide_menu li:last-child { border-bottom:0px solid #ddd; } /* aside */ #aside {z-index:-1; visibility:hidden; position:absolute; right:0px; top:0px; bottom:0; overflow:auto; overflow-x:hidden; min-width:225px; width:100%; } /* conatiner */ #container { width:100%; z-index:100; position:relative; overflow:hidden; -webkit-transition:300ms; -moz-transition:300ms; -ms-transition:300ms; -o-transition:300ms; transition:300ms; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } #sideClose { visibility:hidden; display:block; position:absolute; top:18px; right:32px; z-index:999; line-height:0; width:40px; height:40px; } #sideClose .btnClose span p { color:#000; font-family:"Lato"; } #sideClose .btnClose span p.xx span { } #sideClose a .bar { display: block; position: absolute; background: #fff; height: 1px; width: 25px; top: 50%; left: 50%; margin-left: -8px; margin-top: -0px; border-radius: 2px; opacity: 1; -webkit-transform: translateZ(0) rotate(0deg); transform: translateZ(0) rotate(0deg); -webkit-transition: all 0.7s cubic-bezier(1, 0.1, 0, 0.9); transition: all 0.7s cubic-bezier(1, 0.1, 0, 0.9); } #sideClose a .bar.bar-1 { -webkit-transform: translateZ(0) rotate(45deg) translateY(0); transform: translateZ(0) rotate(45deg) translateY(0); } #sideClose a .bar.bar-3 { -webkit-transform: translateZ(0) rotate(-45deg) translateY(0); transform: translateZ(0) rotate(-45deg) translateY(0); } #sideClose a { display: inline-block; position: absolute; top: 0px; right: 0px; height: 25px; width: 25px; -webkit-transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9); transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9); -webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); } /* btnFoldLayout */ #btnFoldLayout { display:none; position:absolute; left:100%; top:0; right:0; bottom:0; width:100%; height:100%; opacity:0; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); and -webkit-focus-ring-color:rgba(0, 0, 0, 0); } #top02_pix4 { position:relative; width:100%; margin:0px auto 0px; z-index:3; display:block; padding-top:0px; } #top_menu { position:relative; width:auto; } #top_menu1 { position:relative; display:inline-block; float:left; } @media (min-width:1000px) { .top_menu { display:none; } .bottom_banner { display:none; } #right_banner { position:absolute; width:auto; right:0px; top:0px; height:90px; display:table; padding:0 25px 0 65px; } #right_banner ul { vertical-align:middle; display:table-cell; } #right_banner a { color:#000; font-size:18px; font-weight:700; } #right_banner a img { max-width:30px; position:absolute; top:50%; left:25px; transform: translateY(-50%); } .xans-layout-logotop img { max-height:60px; } } @media (max-width:1000px) { .top_menu { position:fixed; width:100%; height:60px; z-index:-1; top:0px; left:0px; opacity:0.0; } .top_menu.show { position:fixed; width:100%; height:60px; top:0px; left:0px; background:rgba(255,255,255,0.8); opacity:1.0; z-index:999; } .bottom_banner .bottom_banner1 { position:relative; display:table-cell; margin:0 0px; background:#000; overflow:visible; } .bottom_banner .bottom_banner2 { position:relative; display:table-cell; margin:0 0px; } .bottom_banner { text-align:center; z-index:999; display:table; table-layout: fixed; position:fixed; left:0px; opacity:0.0; bottom:-60px; width:100%; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } .bottom_banner.show { opacity:1.0; bottom:0px; } #right_banner { width:100%; height:60px; display:table; padding-left:20px;} #right_banner ul { vertical-align:middle; display:table-cell; } #right_banner a { color:#000; font-size:18px; font-weight:700; } #right_banner a img { max-width:30px; position:absolute; top:50%; left:20px; transform: translateY(-50%); } .xans-layout-logotop img { max-height:40px; } } #top_menu2 { position:absolute; display:inline-block margin:0 auto; width:100%; left:50%; transform:translateX(-50%); text-align:center; top:25px; } #top_menu2 li a {padding:10px 14px; display:inline-block; font-weight:300; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -moz-transition: all 0.3s ease; overflow: hidden; } #top_menu2 a span::before { opacity: 0; width: 100%; height: 2px; background: #fff; content: ""; position: absolute; left: 0; top: 0; -moz-transition: 0.1s; -o-transition: 0.1s; -webkit-transition: 0.1s; transition: 0.1s; -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%); } #top_menu2 a span::after { opacity: 0; width: 100%; height: 2px; background: #fff; content: ""; position: absolute; right: 0; bottom: 0; -moz-transition: 0.1s 0.2s; -o-transition: 0.1s 0.2s; -webkit-transition: 0.1s; -webkit-transition-delay: 0.2s; transition: 0.1s 0.2s; -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%); } #top_menu2 a::before { opacity: 0; width: 2px; height: 100%; background: #fff; content: ""; position: absolute; left: 0; top: 0; -moz-transform: translateY(0%); -ms-transform: translateY(0%); -webkit-transform: translateY(0%); transform: translateY(0%); -moz-transition: 0.1s 0.3s; -o-transition: 0.1s 0.3s; -webkit-transition: 0.1s; -webkit-transition-delay: 0.3s; transition: 0.1s 0.3s; } #top_menu2 a::after { opacity: 0; width: 2px; height: 100%; background: #fff; content: ""; position: absolute; right: 0px; bottom: 0; -moz-transform: translateY(0%); -ms-transform: translateY(0%); -webkit-transform: translateY(0%); transform: translateY(0%); -moz-transition: 0.1s 0.1s; -o-transition: 0.1s 0.1s; -webkit-transition: 0.1s; -webkit-transition-delay: 0.1s; transition: 0.1s 0.1s; } #top_menu2 a:hover { opacity: 1.0; background:none; color: #000; } @media (max-width:1400px) { #top_menu2 li { position:relative; display:inline-block; font-size:13px; margin:0 6px; } } @media (min-width:1400px) { #top_menu2 li { position:relative; display:inline-block; font-size:17px; margin:0 20px; } } @media (max-width:1200px) { #top02_pix4 { height:60px; } #top_01 { display:none; } } @media (min-width:1200px) { #top02_pix4 { height:90px; } #top_02 { display:none;} } .xans-layout-logotop .position1 > ul > li > a { font-size:35px; font-weight:400; color:#000; width:auto; display:inline-block; opacity:1.0; z-index:9; position:relative; margin:20px 0 0 40px; font-family: 'Anton', sans-serif; } .xans-layout-logotop .position1 > ul > li > a:hover { text-decoration:none; } .xans-layout-logotop .position3 > ul > li > a { font-size:27px; font-weight:400; color:#000; width:auto; display:inline-block; opacity:1.0; z-index:3; position:relative; margin:12px 0 0 30px; font-family: 'Anton', sans-serif; } .xans-layout-logotop .position3 > ul > li > a:hover { text-decoration:none; } .top_fixed { text-align:center; z-index:5; display:block; height:auto; text-align:center; position:fixed; background:rgba(255,255,255,0.8); padding:0px 0; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; opacity:0.0; width:100%; left:0px; top:-100px; } .top_fixed.show { opacity:1.0; left:0px; top:0px; } .placeholder { right:20px; top:38px; padding:0px 8px 7px; position: absolute; z-index: 39; } .placeholder .bar { display: block; border-radius:250px; height: 2px; width: 24px; background: #000; margin: 4px auto; } .con { width: auto; margin-top:-18px; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } .col { display: inline-block; width: 24%; text-align: center; height: auto; position: relative; } .middle { margin: 0 auto; } #footer a { color:#888; font-weight:300; } /* 6번박스 */ @media (min-width: 1000px) { #footer { position:relative; width:100%; margin:0px auto 0px; text-align:center; padding-bottom:50px; background:#222; color:#eee; overflow:hidden; font-weight:300; padding:50px 0; } #footer .info { max-width:1500px; width: calc( 100% - 40px ); margin:0 auto; height:auto; position:relative; text-align:center; display:inline-block; clear:both; font-weight:300; } #footer .info .info04 p { line-height:26px; font-size:14px; font-weight:300; color:#888; } #footer .info .info03 li a { font-size:17px; font-weight:300; color:#ddd; } #footer .info .info03 { position:relative; width:auto; height:auto; margin:30px auto 10px; clear:both; padding-top:30px; } #footer .info .info03 ul { position:relative; height:35px; clear:both; } } @media (max-width: 1000px) { #footer { position:relative; width:100%; margin:0px auto 0px; text-align:center; padding-bottom:100px; background:#222; color:#eee; overflow:hidden; font-weight:300; padding:20px 0 80px; } #footer .info { max-width:1200px; width: calc( 100% - 40px ); margin:0 auto; height:auto; position:relative; text-align:left; display:inline-block; clear:both; font-weight:300; } #footer .info .info04 p { font-size:12px; line-height:20px; font-weight:300; color:#888; } #footer .info .info03 li a { font-size:14px; line-height:20px; font-weight:300; color:#ddd; } #footer .info .info03 { position:relative; width:auto; height:auto; margin:20px auto 10px; clear:both; padding-top:15px; } #footer .info .info03 ul { position:relative; height:6vw; clear:both; } } #footer .info .info04 { width:auto; text-decoration:none; font-size:12px; text-align:center; display:inline-block; } #footer .info .info03 li { position:relative; float:left; margin:0 0px; } @charset "utf-8"; /* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */ /* tag reset */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; } html { width:100%; height:100%; font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } input:focus {outline:none;} article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } body,code { color:#333; font-size:13px; font-weight:100; font-family: 'Pretendard-Regular', Pretendard-ExtraLight , Pretendard-SemiBold, Pretendard-Regular; background:#fff; } body#popup { min-width:0; } li { list-style:none; } img,fieldset { border:none; vertical-align:top; } table { width:100%; border:0; border-spacing:0; border-collapse:collapse; } caption { display:none; } th,td { border:0; vertical-align:top; } input,select,textarea { font-size:100%; font-family:"Pretendard-ExtraLight", Pretendard-Regular; color:#333; vertical-align:middle; } input[type=radio], input[type=checkbox] { width:13px; height:13px; border:0; } input[type=text], input[type=password] { } input[type=radio] + label, input[type=checkbox] + label { margin:0 0px 0 0px; } select { height:24px; border:1px solid #333; } textarea { padding:5px 6px; border:1px solid #ccc; line-height:1.5; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { } input::-moz-placeholder, textarea::-moz-placeholder { opacity:1; } legend { visibility:hidden; position:absolute; left:-9999px; top:-9999px; width:0; height:0; line-height:0; } button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; } hr.layout { display:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; -webkit-transition: color 500ms ease 0s; -moz-transition: color 500ms ease 0s; -ms-transition: color 500ms ease 0s; -o-transition: color 500ms ease 0s; transition: color 500ms ease 0s; color:#333; } a:hover { text-decoration:none; color:#000; } a:active { text-decoration:none; } .objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; } table tr.radioType input, span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; } #content_CONTAINER table, #bi_inquire_content_CONTAINER table { border:0; margin:0 0 -1px; } #content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; } #content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; } table.nneditor-table { width:auto !important; } .gLabel { display:inline-block; } .gLabel label { margin-right:20px; line-height:22px; } .fWidthFull input[type=text] { width:100%; height:24px; -webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; } .fWidthFull textarea { width:100%; -webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; } a:active { text-decoration:none; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:0px solid #000; margin: 0; padding:0; } /* input, select, textarea, button, .button { letter-spacing: 0em; vertical-align:middle; font-family: inherit; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border 0.4s ease, background-color 0.4s ease; -moz-transition: border 0.4s ease, background-color 0.4s ease; -o-transition: border 0.4s ease, background-color 0.4s ease; transition: border 0.4s ease, background-color 0.4s ease; margin:0; box-sizing: border-box; color: rgb(34, 34, 34); font-size: 12px; background-color: transparent; } */ ::-moz-selection{ background: rgb(51, 51, 51); color:white; } ::selection{ background: rgb(51, 51, 51); color:white; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; max-width: 100%; } p { line-height: 1.5em; } /**** Clearfix ****/ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; } table tr.radioType input, span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; } #content_CONTAINER td { width:auto !important; } table.nneditor-table { width:auto !important; } /* 결제진행바 */ #progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; } #progressPaybarView { position:absolute; z-index:100; top:160px; left:20px; width:471px; font-size:12px; } #progressPaybarView .box { height:180px; background:url(http://img.cafe24.com/images/ec_hosting/popup/layer_guide/bg_layer_box1.gif) 0 0 no-repeat; } #progressPaybarView .box .graph { padding:15px 0 0 0; text-align:center;} #progressPaybarView .box .graph span { display:block; text-align:center; margin:20px 0; } #progressPaybarView .box .txt { text-align:center; padding:15px 0 0; color:#555555; } div.layerProgress { filter:alpha(opacity=40); opacity:0.4; -moz-opacity:0.4; background-color:#999; } /* contents */ #accNav {position:absolute; top:0; left:0; z-index:100; width:100%; height:0;} #accNav p, #accNav ul, #accNav ul li {height:0;} #accNav p a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#000; white-space:nowrap;} #accNav p a:focus, #accNav p a:hover, #accNav p a:active {width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:100;} .displaynone { display:none; } /* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */ @charset "utf-8" /* 아래내용은 임의로 수정시 오류등이 발생할 수 있으니 신중한 수정을 바랍니다 */ #wrap { background:#fff; } .png24 {tmp:expression(setPng24(this));} /* 내용 */ #contents_left1 { position:relative; width:100%; height:auto; margin:0px auto; } #contents_left { position:relative; width:1300px; height:auto; margin:0px auto 0px; } #contents_1987_main { position:relative; width:100%; height:auto; margin:0px auto 0px; zoom:1; min-height:900px; } #contents_1987_1 { position:relative; width:70%; height:auto; margin:0px 0px 0px 0px; zoom:1; padding:30px 0px 40px; min-height:900px; } #contents_1987_2 { position:relative; width:auto; height:auto; margin:0px 0 0px 0px; zoom:1; padding:0px 0px 50px; min-height:600px; } #contents_1987 { position:relative; width:auto; height:auto; margin:0px 0 0px 0px; zoom:1; padding:0px 0px 0px; } #contents_1987_4 { position:relative; width:100%; height:auto; margin:0px auto 0px; zoom:1; padding:30px 0px 0px; } #contents_1987t { position:relative; width:90%; height:auto; margin:0px auto 0px; zoom:1; padding:10px 5% 80px; min-height:700px; } #contents_1987t1 { position:relative; width:auto; height:auto; margin:0px 0px 0 0px; zoom:1; padding:40px 0px 0px; min-width:700px; } #wrap { position:relative; width:100%; margin:0 auto 0px; padding-top:0px; } #contents { position:relative; padding-bottom:0px; z-index:1; width:100%; margin:0px auto 0px; overflow:hidden; } ::-moz-selection {background: #555; color:#ddd;} ::selection {background: #555; color:#ddd;} /* 게시판상단메뉴 */ #board_main_menu { position:relative; width:auto; margin:0px auto 20px; zoom:1; padding:0px 0px 0px; height:68px; display:none; } #board_main_menu ul { float:right; position:relative; left:-50%;} #board_main_menu li { float:left; position:relative; left:50%; margin:0 5px; } #board_main_menu li a { font-weight:normal; color:#888; font-size:12px; padding:10px 15px; } #board_main_menu li a:hover { text-decoration:none; color:#000; } #board_main_menu li a.this { color:#14b0bf; background:#333; text-decoration:none;} /* 게시판 전체 공통 */ .xans-board-title .title { min-height:30px; margin:0px 0 20px; color:#fff; } .xans-board-title .title h2 { display:block; margin:40px 0 20px; padding-bottom:0px; *display:inline; *zoom:1; text-align:left; font-size:19px; color:#000; font-weight:400; letter-spacing:0px; text-decoration:none; } .xans-board-title .title p { display:inline-block; margin:0 0 0 6px; padding:0 0 0 10px; color:#000; vertical-align:bottom; *display:inline; *zoom:1; display:none; } .xans-board-title p.imgArea { margin:0 0 20px; } /* Main */ #boardArea { overflow:hidden; margin:0px 0 0; } #bannerArea { margin:0px 0 0; } #bannerArea h2 { margin:0 0 16px; font-family: 'Noto Sans KR',sans-serif; font-size:30px; color:#222; font-weight:900; letter-spacing:5px; text-decoration:none; } /* 탐색경로바 */ .path { overflow:hidden; display:none; height:30px; padding:3px 0 5px; line-height:30px; *zoom:1; width:100%; background:#f9f9f9; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; } .path span { overflow:hidden; position:absolute; width:0; height:0; white-space:nowrap; text-indent:100%; } .path ol { float:left; } .path li { float:left; padding:0 0 0 12px; margin:0 0 0 8px; color:#757575; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_path.gif") no-repeat 0 10px; } .path li:first-child { background:none; } .path li a { color:#757575; } .path li strong, .path li strong a { color:#2e2e2e; } /* 탐색경로바2 */ .path1 { overflow:hidden; display:none; height:30px; padding:3px 0 5px; line-height:30px; *zoom:1; width:100%; background:#f9f9f9; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } .path1 span { overflow:hidden; position:absolute; width:0; height:0; white-space:nowrap; text-indent:100%; } .path1 ol { float:left; } .path1 li { float:left; padding:0 0 0 12px; margin:0 0 0 8px; color:#757575; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_path.gif") no-repeat 0 10px; } .path1 li:first-child { background:none; } .path1 li a { color:#757575; } .path1 li strong, .path1 li strong a { color:#2e2e2e; } /* 타이틀 */ .titleArea { min-height:30px; margin:0px auto 20px; width:100%; } .titleArea h2 { display:block; margin:40px 0 20px; padding-bottom:0px; *display:inline; *zoom:1; text-align:left; font-size:19px; color:#000; font-weight:400; letter-spacing:0px; text-decoration:none; } .titleArea p { display:inline-block; margin:0 0 0 6px; padding:0 0 0 10px; color:#000; background:url("http://img.echosting.cafe24.com/skin/base_ko_KR/common/ico_title.gif") no-repeat 0 0; *display:inline; *zoom:1; } .titleArea ul { padding:5px 0; line-height:18px; } .titleArea ul li { padding:0 0 0 9px; background:url("http://img.echosting.cafe24.com/skin/base_ko_KR/common/ico_info.gif") no-repeat 4px 7px; } /* 이용안내 */ .help { margin:40px 0 0; border:1px solid #444; line-height:18px; } .help h3 { padding:9px 0 6px 10px; border-bottom:1px solid #444; color:#333; font-size:11px; } .help .content { padding:0 9px 12px; } .help .content h4 { margin:22px 0 -4px; color:#333; font-size:11px; font-weight:normal; } .help .content h4:first-child { margin-top:13px; } .help .content p { margin:15px 0 0 10px; color:#333; } .help .content ul { margin:15px 0 0 11px; } .help .content li { padding:0 0 0 25px; color:#333; background:url("http://img.echosting.cafe24.com/skin/base_ko_KR/common/ico_number.png") no-repeat; } .help .content li.item1 { background-position:-484px 0; } .help .content li.item2 { background-position:-434px -100px; } .help .content li.item3 { background-position:-384px -200px; } .help .content li.item4 { background-position:-334px -300px; } .help .content li.item5 { background-position:-284px -400px; } .help .content li.item6 { background-position:-234px -500px; } .help .content li.item7 { background-position:-184px -600px; } .help .content li.item8 { background-position:-134px -700px; } .help .content li.item9 { background-position:-84px -800px; } .help .content li.item10 { background-position:-34px -900px; } /* 퀵뷰 모달 */ #modalBackpanel { display:none; position:absolute; top:0; left:0; z-index:10000; width:100%; height:100%; background:#000; } #modalContainer { display:none; position:absolute; top:100px; left:100px; z-index:10001; width:975px; height:720px; border:1px solid #444; background:#fff; } #modalContainer #modalContent { width:100%; height:100%; } /* 큰버튼 */ .button_b a { padding:13px 22px 13px; border:1px solid #ddd; font-weight:400; font-size:15px; font-family: 'NEXON Lv1 Gothic OTF'; text-align:center; background:#fff; color: #222; position: relative; overflow: hidden; display: inline-block; margin:0 2px; -moz-transition: ease-out 0.3s; -o-transition: ease-out 0.3s; -webkit-transition: ease-out 0.3s; transition: ease-out 0.3s;} .button_b a:hover { color: #000; text-decoration:none; border:1px solid #555; background:#f1f1f1; } .button_b a:hover::before { opacity: 1;} .button_b:hover::after { opacity: 1;} .button_b a:hover span::before { opacity: 1;} .button_b:hover span::after { opacity: 1;} .button_b a h2 { font-size:13px; margin-bottom:3px; font-weight:bold; } .button_w a { padding:13px 22px 13px; border:1px solid #ddd; font-weight:400; font-size:15px; font-family: 'NEXON Lv1 Gothic OTF'; margin:0 2px; text-align:center; background:#fff; color: #222; position: relative; overflow: hidden; display: inline-block; -moz-transition: ease-out 0.3s; -o-transition: ease-out 0.3s; -webkit-transition: ease-out 0.3s; transition: ease-out 0.3s; } .button_w a:hover { color: #000; text-decoration:none; border:1px solid #555; background:#f1f1f1; } .button_w a:hover::before {opacity: 1;} .button_w:hover::after {opacity: 1;} .button_w a:hover span::before {opacity: 1;} .button_w:hover span::after { opacity: 1;} .button_w a h2 {font-size:13px; margin-bottom:3px; font-weight:bold; color: #000;} /* 작은버튼 */ .button_sb a { overflow: hidden; display: inline-block; *display:inline; vertical-align:bottom; *zoom:1; padding:7px 8px 0; margin:4px 1px; color: #444; background:#fff; min-width:50px; height:25px; border:1px solid #ccc; font-weight:400; font-size:12px; text-align:center; -moz-transition: ease-out 0.3s;-o-transition: ease-out 0.3s;-webkit-transition: ease-out 0.3s;transition: ease-out 0.3s;} .button_sb a:hover {color: #000; text-decoration:none; border:1px solid #555; background:#fff; } .button_sb a:hover::before {opacity: 1;} .button_sb:hover::after {opacity: 1;} .button_sb a:hover span::before {opacity: 1;} .button_sb:hover span::after { opacity: 1;} .button_sw a { background:#f1f1f1; color:#555; overflow: hidden; position:relative; display: inline-block; *display:inline; vertical-align:bottom; *zoom:1; padding:7px 8px 0; margin:4px 1px; min-width:50px; height:24px; border:1px solid #ddd; font-weight:400; font-size:12px; text-align:center; -moz-transition: ease-out 0.3s;-o-transition: ease-out 0.3s;-webkit-transition: ease-out 0.3s;transition: ease-out 0.3s;} .button_sw a:hover { color: #555; text-decoration:none;background:#fff; border:1px solid #555; } .button_sw a:hover::before {opacity: 1;} .button_sw:hover::after {opacity: 1;} .button_sw a:hover span::before {opacity: 1;} .button_sw:hover span::after { opacity: 1;} /* 게시판글쓰기 버튼 */ .button_wb a { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; -khtml-border-radius:5px; -o-border-radius:5px; overflow: hidden; display: inline-block; *display:inline; vertical-align:bottom; *zoom:1; padding:15px 8px 0; margin:2px 0; font-size:13px; font-family: 'NEXON Lv1 Gothic OTF'; background:#fff; width:40px; height:27px; border:1px solid #000; font-weight:normal; text-align:center; color: #000;-moz-transition: ease-out 0.3s;-o-transition: ease-out 0.3s;-webkit-transition: ease-out 0.3s;transition: ease-out 0.3s;} .button_wb a:hover {color: #fff;text-decoration:none;background:#000; border:1px solid #000; } .button_wb a:hover::before {opacity: 1;} .button_wb:hover::after {opacity: 1;} .button_wb a:hover span::before {opacity: 1;} .button_wb:hover span::after { opacity: 1;} #color_board { max-width:1220px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 게시판 */ #color_mypage { max-width:1120px;margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 마이페이지 */ #color_wish { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 관심상품 */ #color_order { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 주문목록 */ #color_add { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 배송주소록 */ #color_point { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 적립금 */ #color_coupon { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 쿠폰 */ #color_myb { max-width:1120px;margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 나의게시물 */ #color_recent { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 최근본상품 */ #color_shopinfo { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 하단메뉴 */ #color_order2 { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 주문서작성,주문완료 */ #color_cart { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 장바구니 */ #color_login { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:400px; } /* 로그인 */ #color_mb { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 비밀번호찾기,아이디찾기 */ #color_join { max-width:1120px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:800px; } /* 회원가입 */ #color_detail { position:relative; width: calc( 100% - 10px ); max-width:1600px; margin:0px auto 0px; } /* 상품상세페이지 */ #color_product { position:relative; width: calc( 100% - 10px ); max-width:1600px; margin:0px auto 0px; } #color_se { max-width:1200px; margin:40px auto 40px; padding:20px 40px 20px; background:#fff; min-height:600px; } /* 검색 */ #color_main { position:relative; width:100%; max-width:1500px; margin:0 auto; } /* Font */ .txtInfo { } .txtWarn { } .txtEm { } .txtDel, .strike, .discount { text-decoration:line-through; font-weight:normal; } .strike strong, .discount strong { font-weight:normal; } .txtNormal { font-weight:normal; font-style:normal; } .txtNum { font-size:11px; } .txt11 { font-size:11px; } .txt12 { font-size:12px; } .txt14 { font-size:14px; } .txt16 { font-size:16px; } .txt18 { font-size:18px; letter-spacing:-1px; } .txtIcon { font-size:12px; font-style:normal; } .txtBreak { word-break:break-all; word-wrap:break-word; } /* JP, TW, CN */ html:lang(ja) .txt11, html:lang(zh) .txt11, html:lang(zh-tw) .txt11 { font-size:12px; } /* grid */ .gBlank5 { display:block; margin-top:5px; } .gBlank10 { display:block; margin-top:10px; } .gBlank20 { display:block; margin-top:20px; } .gBlank30 { display:block; margin-top:30px; } .gIndent10 { margin-left:10px; } .gIndent20 { margin-left:20px; } .gSpace10 { margin-right:10px; } .gSpace20 { margin-right:20px; } .gMerge { position:relative; z-index:1; margin-top:-1px; } /* ec-base-qty */ .ec-base-qty { position:relative; display:inline-block; width:50px; margin:0 1px 0 0; text-align:left; } .ec-base-qty input[type="text"] { width:22px; height:23px; padding:0 0 0 5px; line-height:25px; border:1px solid #ddd; border-radius:3px 0 0 3px; } .ec-base-qty .up { position:absolute; left:27px; top:0; } .ec-base-qty .down { position:absolute; left:27px; bottom:0; } /* 공통 css */ .ec-base-tooltip { display:none; z-index:2; position:absolute; top:24px; padding:15px; border:1px solid #ddd; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); } .ec-base-tooltip h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; } .ec-base-tooltip h3 + p { margin:0 5px 10px; } .ec-base-tooltip h4 { margin:15px 10px 8px 5px; font-size:12px; } .ec-base-tooltip h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; vertical-align:middle; } .ec-base-tooltip .btnClose { position:absolute; right:14px; top:14px; } .ec-base-tooltip .edge { z-index:20; position:absolute; left:50%; top:-6px; display:block; margin:0 0 0 -5px; width:10px; height:6px; } .ec-base-tooltip .edge:before, .ec-base-tooltip .edge:after { display:inline-block; content:""; position:absolute; top:0; width:0; height:0; border:solid transparent; } .ec-base-tooltip .edge:before { margin:1px 0 0; border-bottom-color:#ddd; border-width:0 5px 5px 5px; } .ec-base-tooltip .edge:after { left:1px; margin:2px 0 0; border-bottom-color:#ddd; border-width:0 4px 4px 4px; } .ec-base-tooltip table th, .ec-base-tooltip table td { padding:8px 10px 7px 10px; border:1px solid #fff; line-height:1.5em; } .ec-base-tooltip table th { padding-right:0; } .ec-base-tooltip table thead th { text-align:center; } .ec-base-tooltip table tbody th { text-align:left; } .ec-base-tooltip table .left { text-align:left; } .ec-base-tooltip table .center { text-align:center; } .ec-base-tooltip table .right { text-align:right; } .ec-base-tooltip table .info { padding:0; } .ec-base-tooltip table p.info:before, .ec-base-tooltip table ul.info li:before { display:inline-block; content:""; margin:0 3px 0 0; width:4px; height:1px; vertical-align:middle; } .ec-base-tooltip .info { padding:10px 10px 0; margin:5px 0 0; } .ec-base-tooltip p.bullet, .ec-base-tooltip ul.bullet { margin:8px 10px; } .ec-base-tooltip p.bullet:before, .ec-base-tooltip ul.bullet li:before { display:inline-block; content:""; margin:-3px 3px 0 0; width:0; height:0; border:solid transparent; border-left-color:#444; border-width:2px 0 2px 2px; vertical-align:middle; } .ec-base-tooltip ul.bullet li { line-height:1.5em; } .ec-base-tooltip .txtEm { } .ec-base-tooltip .txtWarn { } /* typeUpper */ .ec-base-tooltip.typeUpper { top:auto; bottom:34px; } .ec-base-tooltip.typeUpper .edge { top:auto; bottom:-6px; } .ec-base-tooltip.typeUpper .edge:before { margin:0 0 -5px; border-top-color:#444; border-width:5px 5px 0 5px; } .ec-base-tooltip.typeUpper .edge:after { left:1px; margin:0 0 -4px; border-top-color:#444; border-width:4px 4px 0 4px; } /* 빨간느낌표 */ span.ec-base-help, p.ec-base-help, ul.ec-base-help li { margin:2px 9px; padding:1px 0 1px 20px; line-height:1.4; background:url('//img.echosting.cafe24.com/skin/base/common/ico_info.gif') no-repeat 0 2px; } ul.ec-base-help li img { max-height:20px; margin:-3px 2px 0 4px; } /* 블록 공통 */ div.ec-base-help img { max-height:10px; } div.ec-base-help { margin:20px 0; border:1px solid #ddd; line-height:18px; } div.ec-base-help > h2, div.ec-base-help > h3 { padding:9px 0 6px 10px; border-bottom:1px solid #ddd; font-size:12px; } div.ec-base-help .inner { padding:0 9px 12px; } div.ec-base-help h4 { margin:22px 0 -4px; font-size:12px; font-weight:normal; } div.ec-base-help h4:first-child { margin-top:13px; } div.ec-base-help p { margin:15px 0 0 10px; } div.ec-base-help ul, div.ec-base-help ol { margin:15px 0 0 11px; } div.ec-base-help li { } /* 숫자형 */ div.ec-base-help ol li { padding:0 0 0 25px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_number.png') no-repeat; } div.ec-base-help ol .item1 { background-position:-484px 0; } div.ec-base-help ol .item2 { background-position:-434px -100px; } div.ec-base-help ol .item3 { background-position:-384px -200px; } div.ec-base-help ol .item4 { background-position:-334px -300px; } div.ec-base-help ol .item5 { background-position:-284px -400px; } div.ec-base-help ol .item6 { background-position:-234px -500px; } div.ec-base-help ol .item7 { background-position:-184px -600px; } div.ec-base-help ol .item8 { background-position:-134px -700px; } div.ec-base-help ol .item9 { background-position:-84px -800px; } div.ec-base-help ol .item10 { background-position:-34px -900px; } /* 대쉬형 */ div.ec-base-help ul li { padding:0 0 0 11px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_dash.gif') no-repeat 0 7px; } /* typeMoreview */ .paginate.typeMoreview { margin:0 auto; width:100%; text-align:center; } .paginate.typeMoreview .btnMore { display:block; padding:12px 0; color:#000; font-weight:bold; } .paginate.typeMoreview .icoMore { display:none; margin:0 0 0 8px; width:13px; height:8px; font-size:0; line-height:0; vertical-align:baseline; } .paginate.typeMoreview a { color:#000; font-size:14px; font-weight:700; padding:8px 17px; cursor:pointer; background:#fff; cursor:hand; } .paginate.typeMoreview a:hover { text-decoration:none; } /* 할인율 */ .sale_price { display:none; z-index:9; } .Saleprice { z-index:9; position:absolute; overflow:hidden; color:#e55252; right:0px; bottom:0px; text-align:left; font-weight:900; font-size:15px; margin:0px 0; font-family: 'Bebas Neue'; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .Saleprice.on { display:block; } .Saleprice.off { display:none; } /* 퀵뷰 */ .ec-base-product ul.prdList #line:hover { } .ec-base-product ul.prdList #line { position:relative; -khtml-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .ec-base-product ul.prdList #line:hover .quickView { opacity:1.0; bottom:20px; right:20px; } .ec-base-product ul.prdList #line .quickView { display:block; z-index:9; text-align:right; position:absolute; right:20px; bottom:20px; width:auto; height:auto; padding:0px 0; opacity:0.0; zoom:1; -khtml-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .ec-base-product ul.prdList #line .quickView p { margin:0 0 8px; cursor:pointer; background:#fff; padding:7px; text-align:center;border-radius:250px; } .ec-base-product ul.prdList #line .quickView img { margin:0 auto; text-align:center; max-width:13px; } /* 공통 */ .ec-base-product h2 { display:block; margin:30px auto 30px; text-align:center; width:100%; font-size:30px; font-weight:700; color:#222; font-family: 'Noto Sans KR', sans-serif; padding:0px 0px 0; } .ec-base-product h3 { display:block; margin:30px 0px 10px 2.5%; text-align:left; width:100%; font-size:30px; font-weight:700; color:#222; font-family: 'Noto Sans KR', sans-serif; padding:0px 0px 0 5px; } .ec-base-product ul.prdList { display:table; width:100%; margin:0px auto 0px; font-size:0; line-height:0; text-align:left; } .ec-base-product ul.prdList li.item .box { margin:0 auto 0px; font-size:12px; line-height:18px; text-align:center; position:relative; width:100%; padding-bottom:0px; } .ec-base-product ul.prdList #line .prdIcon { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; } /* 1번 박스 */ @media (min-width: 1000px) { .ec-base-product { width:auto; margin:40px auto 50px; } .ec-base-product ul.prdList li.item { display:inline-block; margin:0px auto 60px; color:#757575; vertical-align:top; *display:inline; *zoom:1; padding:0px 0px 0; } .ec-base-product .description ul.spec { position:relative; padding-top:15px; text-align:center; } .ec-base-product ul.prdList .description .name span { padding-top:15px; font-size:17px !important; position:relative; text-align:center; color:#111 !important; font-weight:400 !important; display:block; line-height:24px; } .ec-base-product ul.prdList .list_box { position:relative; width:95%; margin:0 auto; } } @media (max-width: 1000px) { .ec-base-product { width:auto; margin:20px auto 50px; } .ec-base-product ul.prdList li.item { display:inline-block; margin:0px auto 20px; color:#757575; vertical-align:top; *display:inline; *zoom:1; padding:0px 0px 0; } .ec-base-product .description ul.spec { position:relative; padding-top:10px; text-align:center; } .ec-base-product ul.prdList .description .name span { padding-top:10px; font-size:13px !important; position:relative; text-align:center; color:#111 !important; font-weight:400 !important; display:block; line-height:18px; } .ec-base-product ul.prdList .list_box { position:relative; width:95%; margin:0 auto; } } .ec-base-product .description ul.spec li[rel*="요약"], .ec-base-product .description ul.spec li[rel*="간략"], .ec-base-product .description ul.spec li[rel="모델명"], .ec-base-product .description ul.spec li[rel="영문상품명"], .ec-base-product .description ul.spec li[rel="쿠폰적용가"], .ec-base-product .description ul.spec li[rel="상품가"], .ec-base-product .description ul.spec li[rel="세액"], .ec-base-product .description ul.spec li[rel="원산지"], .ec-base-product .description ul.spec li[rel="제조사"], .ec-base-product .description ul.spec li[rel="공급사"], .ec-base-product .description ul.spec li[rel="브랜드"], .ec-base-product .description ul.spec li[rel="트랜드"], .ec-base-product .description ul.spec li[rel="무이자할부"], .ec-base-product .description ul.spec li[rel="적립금"], .ec-base-product .description ul.spec li[rel="상품코드"], .ec-base-product .description ul.spec li[rel="자체 상품코드"], .ec-base-product .description ul.spec li[rel="제조일자"], .ec-base-product .description ul.spec li[rel="유효기간"], .ec-base-product .description ul.spec li[rel="사용후기"], .ec-base-product .description ul.spec li[rel="상품 요약설명"], .ec-base-product .description ul.spec li[rel="상품 간략설명"], .ec-base-product .description ul.spec li[rel="국내/해외배송"], .ec-base-product .description ul.spec li[rel="배송비방법"], .ec-base-product .description ul.spec li[rel="할인 기간"], .ec-base-product .description ul.spec li[rel="재고 수량"], .ec-base-product .description ul.spec li[rel="상품문의"], .ec-base-product .description ul.spec li[rel="배송비"], .ec-base-product .description ul.spec li[rel="상품 자유게시판"], .ec-base-product .description ul.spec li[rel*="소비자가"], .ec-base-product .description ul.spec li[rel*="판매가"], .ec-base-product .description ul.spec li[rel*="할인 기간"] { display:none; } .ec-base-product ul.prdList .description .name a:hover { text-decoration:none; } .ec-base-product ul.prdList .description .color { position:absolute; top:0px; left:0px; overflow:hidden; width:100%; text-align:left; margin-top:-8px; } .ec-base-product ul.prdList .description .color .chips { display:inline-block; width:12px; height:6px; border-radius:250px; margin:0 2px 2px 0; font-size:0; line-height:0; border:1px solid #bbb; } /* 진열방식 */ @media all and (min-width:1000px) { .ec-base-product ul.column2 li.item { width:50%; } .ec-base-product ul.column2 li.item .box { width: calc( 100% - 20px ); text-align:center; position:relative; margin:0 auto;} .ec-base-product ul.column2 li.item .thumb { max-width:100%; } .ec-base-product ul.column3 li.item { width:33.3%; } .ec-base-product ul.column3 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column3 li.item .thumb { max-width:100%; } .ec-base-product ul.column4 li.item { width:25%; } .ec-base-product ul.column4 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column4 li.item .thumb { max-width:100%; } .ec-base-product ul.column5 li.item { width:20%; } .ec-base-product ul.column5 li.item .box { width: calc( 100% - 15px );text-align:center; margin:0 auto; position:relative;} .ec-base-product ul.column5 li.item .thumb { max-width:100%; } .ec-base-product ul.column6 li.item { width:16.6%; } .ec-base-product ul.column6 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column6 li.item .thumb { max-width:100%; } .ec-base-product ul.column7 li.item { width:14.2%; } .ec-base-product ul.column7 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column7 li.item .thumb { max-width:100%; } } @media all and (max-width:1000px) { .ec-base-product ul.column2 li.item { width:50%; } .ec-base-product ul.column2 li.item .box { width: calc( 100% - 20px ); text-align:center; position:relative; margin:0 auto;} .ec-base-product ul.column2 li.item .thumb { max-width:100%; } .ec-base-product ul.column3 li.item { width:33.3%; } .ec-base-product ul.column3 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column3 li.item .thumb { max-width:100%; } .ec-base-product ul.column4 li.item { width:25%; } .ec-base-product ul.column4 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column4 li.item .thumb { max-width:100%; } .ec-base-product ul.column5 li.item { width:25%; } .ec-base-product ul.column5 li.item .box { width: calc( 100% - 12px );text-align:center; margin:0 auto; position:relative;} .ec-base-product ul.column5 li.item .thumb { max-width:100%; } .ec-base-product ul.column6 li.item { width:16.6%; } .ec-base-product ul.column6 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column6 li.item .thumb { max-width:100%; } .ec-base-product ul.column7 li.item { width:14.2%; } .ec-base-product ul.column7 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column7 li.item .thumb { max-width:100%; } } @media all and (max-width:700px) { .ec-base-product ul.column2 li.item { width:50%; } .ec-base-product ul.column2 li.item .box { width: calc( 100% - 20px ); text-align:center; position:relative; margin:0 auto;} .ec-base-product ul.column2 li.item .thumb { max-width:100%; } .ec-base-product ul.column3 li.item { width:33.3%; } .ec-base-product ul.column3 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column3 li.item .thumb { max-width:100%; } .ec-base-product ul.column4 li.item { width:25%; } .ec-base-product ul.column4 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column4 li.item .thumb { max-width:100%; } .ec-base-product ul.column5 li.item { width:33%; } .ec-base-product ul.column5 li.item .box { width: calc( 100% - 8px );text-align:center; margin:0 auto; position:relative;} .ec-base-product ul.column5 li.item .thumb { max-width:100%; } .ec-base-product ul.column6 li.item { width:16.6%; } .ec-base-product ul.column6 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column6 li.item .thumb { max-width:100%; } .ec-base-product ul.column7 li.item { width:14.2%; } .ec-base-product ul.column7 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column7 li.item .thumb { max-width:100%; } } @media all and (max-width:500px) { .ec-base-product ul.column2 li.item { width:50%; } .ec-base-product ul.column2 li.item .box { width: calc( 100% - 20px ); text-align:center; position:relative; margin:0 auto;} .ec-base-product ul.column2 li.item .thumb { max-width:100%; } .ec-base-product ul.column3 li.item { width:33.3%; } .ec-base-product ul.column3 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column3 li.item .thumb { max-width:100%; } .ec-base-product ul.column4 li.item { width:25%; } .ec-base-product ul.column4 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column4 li.item .thumb { max-width:100%; } .ec-base-product ul.column5 li.item { width:50%; } .ec-base-product ul.column5 li.item .box { width: calc( 100% - 5px );text-align:center; margin:0 auto; position:relative;} .ec-base-product ul.column5 li.item .thumb { max-width:100%; } .ec-base-product ul.column6 li.item { width:16.6%; } .ec-base-product ul.column6 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column6 li.item .thumb { max-width:100%; } .ec-base-product ul.column7 li.item { width:14.2%; } .ec-base-product ul.column7 li.item .box { width: calc( 100% - 15px ); text-align:center; margin:0 auto; position:relative; } .ec-base-product ul.column7 li.item .thumb { max-width:100%; } } .ec-base-product ul.prdList #line img.thumb { width:100%; } .ec-base-product ul.prdList #line { padding-bottom:0%; margin-bottom:20px; position:relative; width:100%; min-height:auto;text-align:center; -khtml-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .ec-base-product ul.prdList #line figure { width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: hidden; } /* Zoom In #1 */ .ec-base-product ul.prdList #line figure img { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .ec-base-product ul.prdList .button { margin:0 -80px 0 0; *zoom:1; } .ec-base-product ul.prdList .button img { margin:0 0 6px -3px; cursor:pointer; } .ec-base-product ul.prdList .button .option { display:inline; position:relative; *zoom:1; } .ec-base-product ul.prdList .mileage { display:block; } .ec-base-product ul.prdList span.grid { display:block; } .ec-base-product .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; } .ec-base-product .layerDiscountPeriod { left:50%; top:26px; width:247px; margin:0 0 0 -124px; background:#fff;} .ec-base-product .layerDiscountPeriod strong.title { display:block; margin:0 0 12px; padding:0 35px 0 0; font-weight:bold; color:#2e2e2e; } .ec-base-product .layerDiscountPeriod .content p { margin:2px 0 0; font-size:11px; line-height:16px; color:#757575; letter-spacing:-1px; } .ec-base-product .layerDiscountPeriod .content p strong { font-weight:normal; font-size:12px; color:#2e2e2e; } .ec-base-product .layerDiscountPeriod .content p strong span { font-size:11px; } /* 배송비 차등부과 레이어 */ .ec-base-product .btnTooltip { position:relative; display:inline-block; } .differentialShipping { display:none; overflow:hidden; position:absolute; left:50%; top:17px; z-index:100; width:350px; margin:0 0 0 -176px; } .differentialShipping h3.title { margin:0; height:35px; padding:0 35px 0 19px; border:0; font-size:14px; line-height:35px; } .differentialShipping .content { padding:12px 18px 14px 18px; border:1px solid #ddd; border-top:0; text-align:center; } .differentialShipping .close { position:absolute; right:14px; top:12px; } .differentialShipping .close img { cursor:pointer; } .differentialShipping .content ul { line-height:25px; } .differentialShipping .content li { overflow:hidden; } .differentialShipping .content li strong { float:left; font-weight:normal; } .differentialShipping .content li span { float:right; } .differentialShipping .content .info { margin:7px 0 0; padding:7px 0 0; border-top:1px dotted #444; text-align:right; } /* 썸네일 아이콘 위치 */ .ec-product-bgLT { background-position:left top; } .ec-product-bgLC { background-position:left center; } .ec-product-bgLB { background-position:left bottom; } .ec-product-bgRT { background-position:right top; } .ec-product-bgRC { background-position:right center; } .ec-product-bgRB { background-position:right bottom; } .ec-product-bgCT { background-position:center top; } .ec-product-bgCC { background-position:center center; } .ec-product-bgCB { background-position:center bottom; } /* 공통 css */ .ec-base-paginate1 { margin:0px 0 50px; text-align:center; font-size:0; line-height:0; } .ec-base-paginate1 ol { display:inline-block; font-size:0; line-height:0; vertical-align:top; *display:inline; *zoom:1; *margin:0; } .ec-base-paginate1 li { display:inline-block; margin:0 0 0 -1px; font-size:12px; vertical-align:top; *display:inline; *zoom:1; } .ec-base-paginate1 li:first-child { margin-left:0; } .ec-base-paginate1 img { vertical-align:top; } .ec-base-paginate1 li a { display:block; width:33px; padding:15px 0; font-weight:900; height:10px; } .ec-base-paginate1 li a:hover { text-decoration:none; background:#000; color:#de1414; border-radius:200px; } .ec-base-paginate1 li a.this { padding-bottom:6px; } .ec-base-paginate1 a.nolink { cursor:default; } /* 공통 css */ .ec-base-paginate { margin:30px 0; text-align:center; font-size:0; line-height:0; } .ec-base-paginate ol { display:inline-block; font-size:0; line-height:0; vertical-align:top; *display:inline; *zoom:1; *margin:0; } .ec-base-paginate li { display:inline-block; margin:0 0 0 -1px; border:1px solid #444; font-size:12px; color:#222; vertical-align:top; *display:inline; *zoom:1; } .ec-base-paginate li:first-child { margin-left:0; } .ec-base-paginate img { vertical-align:top; } .ec-base-paginate li a { display:block; width:33px; padding:9px 0; font-weight:normal; color:#222; line-height:14px; background:#fff; transition:all .3s ease; -webkit-transition:all .3s ease; } .ec-base-paginate li a:hover { text-decoration:none; background:#ddd; transition:all .3s ease; -webkit-transition:all .3s ease; } .ec-base-paginate li a.this { padding-bottom:6px; border-bottom:3px solid #444; color:#222; } .ec-base-paginate a.nolink { cursor:default; } /* typeSub */ .ec-base-paginate.typeSub ol { margin:0 15px; vertical-align:middle; } .ec-base-paginate.typeSub li { font-size:12px; border:0; } .ec-base-paginate.typeSub img { vertical-align:middle; } .ec-base-paginate.typeSub li a { width:auto; margin:0 0px 0; padding:2px; background:none; } .ec-base-paginate.typeSub li a.this { text-decoration:underline; border:0; } .ec-base-paginate.typeSub .first { margin-right:3px; } .ec-base-paginate.typeSub .last { margin-left:3px; } /* 공통 css */ .ec-base-tab { position:relative; } .ec-base-tab .menu { border-top:1px solid #ededed; margin:0 0 20px; border-bottom:1px solid #ededed; border-left:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .ec-base-tab .menu:after { content:""; display:block; clear:both; } .ec-base-tab .menu li { float:left; } .ec-base-tab .menu li a { display:block; min-width:187px; margin:0 0 0 -1px; padding:12px 5px 8px; text-decoration:none; outline:0; text-align:center; font-size:11px; } .ec-base-tab .menu li:first-child a { margin-left:0; } .ec-base-tab .menu li.selected a { position:relative; top:0px; left:-1px; margin:0 0 -2px; border-bottom:0; font-size:11px; font-weight:400; background:#fafafa; } .ec-base-tab > .right { position:absolute; top:8px; right:10px; line-height:24px; } /* 밝은형 타입 */ .ec-base-tab.typeLight .menu li.selected a { margin:0 0 -2px; } /* 넓이 가변형 grid(2~7) : 메뉴갯수만큼 grid 뒤의 숫자를 바꿔주세요 */ .ec-base-tab[class*="grid"] .menu { display:table; table-layout:fixed; width:100%; } .ec-base-tab[class*="grid"] .menu li { float:none; display:table-cell; vertical-align:middle; } .ec-base-tab[class*="grid"] .menu li a { display:inline-block; width:100%; min-width:0; margin:0; padding:11px 0; border:0; } .ec-base-tab[class*="grid"] .menu li.selected { position:relative; top:0; right:-1px; border-bottom:0; background:#fafafa; } .ec-base-tab[class*="grid"] .menu li:first-child.selected { right:0; } .ec-base-tab[class*="grid"] .menu li.selected a { position:static; background:none; } .ec-base-tab.grid2 .menu li { width:50.5%; } .ec-base-tab.grid3 .menu li { width:34%; } .ec-base-tab.grid4 .menu li { width:25.5%; } .ec-base-tab.grid5 .menu li { width:20.5%; } .ec-base-tab.grid6 .menu li { width:17%; } .ec-base-tab.grid7 .menu li { width:14.8%; width:15% \0/; } .ec-base-tab.grid7 .menu li:first-child { width:13% \0/; } /* 공통 */ .ec-base-button { padding:10px 0; text-align:center; } .ec-base-button.justify { position:relative; } .ec-base-button:after { display:block; content:""; clear:both; } .ec-base-button .gLeft { float:left; text-align:left; } .ec-base-button .gRight { float:right; text-align:right; } .ec-base-button.justify .gLeft { position:absolute; left:0; } .ec-base-button.justify .gRight { position:absolute; right:0; } .ec-base-button .text { margin:0 6px 0 10px; line-height:24px; } /* type */ .ec-base-button.typeBorder { margin-top:-1px; padding:10px 20px; } .ec-base-button.typeBG { padding:10px 20px; } /* base */ .ec-base-box { border-top:1px solid #ddd; padding-top:30px; margin-top:20px; padding-bottom:20px; margin-bottom:10px; } .ec-base-box.gHalf { position:relative; padding:20px 0; } .ec-base-box.gHalf:before { position:absolute; top:0; left:50%; display:block; content:""; width:1px; height:100%; background-color:#444; } .ec-base-box.typeBg { } .ec-base-box.typeThin { border-width:1px; } .ec-base-box.typeThinBg { border-width:1px; } /* 약관 */ .ec-base-box.typeThinBg > .agree { } .ec-base-box.typeThinBg > .agree p { padding:0 0 17px; } /* typeMember */ .ec-base-box.typeMember { padding:0; } .ec-base-box.typeMember .information { display:table; table-layout:fixed; padding:10px 0; width:100%; box-sizing:border-box; } .ec-base-box.typeMember .information > .title, .ec-base-box.typeMember .information > .thumbnail { display:table-cell; padding:0 15px; width:70px; text-align:center; vertical-align:middle; } .ec-base-box.typeMember .information > .title { vertical-align:middle; } .ec-base-box.typeMember .information > .thumbnail img { max-width:70px; } .ec-base-box.typeMember .information .description { display:table-cell; padding:0 10px; width:auto; line-height:1.5em; border-left:1px solid #ddd; vertical-align:middle; } .ec-base-box.typeMember.gMessage { border-width:1px; border-top:1px solid #ddd; } .ec-base-box .message { display:block; padding:10px 0 10px 35px; border-bottom:1px solid #ddd; background:#333 url("//img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 10px center; } /* typeProduct */ .ec-base-box.typeProduct { display:table; table-layout:fixed; padding:15px 0; width:100%; box-sizing:border-box; } .ec-base-box.typeProduct .thumbnail, .ec-base-box.typeProduct .information { display:table-cell; padding:0 20px; vertical-align:middle; } .ec-base-box.typeProduct .thumbnail { width:100px; } .ec-base-box.typeProduct .thumbnail img { max-width:90px; border:1px solid #fff; } .ec-base-box.typeProduct .information { padding-left:0; } /* 공통 css */ .ec-base-table table { position:relative; margin:10px 0 0; line-height:1.5; font-size:14px; color:#000; } .ec-base-table.gLayoutFixed table { table-layout:fixed; } .ec-base-table.gLayoutFixed .gLayoutAuto table { table-layout:auto; } .ec-base-table table:before { position:absolute; top:1px; left:0; display:block; content:""; width:100%; height:1px; } .ec-base-table thead th { padding:11px 0 10px; vertical-align:middle; font-weight:normal; background:#fff; text-align:center; } .ec-base-table tbody th { padding:11px 0 10px 18px; border-bottom-width:0; text-align:left; font-weight:normal; } .ec-base-table th:first-child { border-left:0; } .ec-base-table td { padding:11px 10px 10px; color:#111; display:table-cell; vertical-align:middle; } .ec-base-table td.clear { padding:0 !important; border:0 !important; } /* 여백, 테두리 상쇄 */ /* 가로형 */ /* 쓰기 타입 */ .ec-base-table.typeWrite td { padding:8px 10px 7px; } /* 세로형 */ /* 목록 타입 */ .ec-base-table.typeList table { border-top-color:#ddd; } .ec-base-table.typeList table:before { display:none; } .ec-base-table.typeList td { padding:8px 10px 7px; } .ec-base-table.typeList tfoot td { padding:15px 10px 17px; } /* 내역 없음 */ .ec-base-table .message { border-top:1px solid #ddd; border-bottom:1px solid #ededed; padding:50px 0; text-align:center; font-weight:normal; } .ec-base-table table + .message { margin:-1px 0 0; } .ec-base-table table td.message { padding:50px 0; } .ec-base-table .scroll .message { border:0; } /* 세로 스크롤 */ .ec-base-table.typeList .head td { padding:11px 0 10px; border-bottom:1px solid #ededed; vertical-align:middle; text-align:center; } .ec-base-table.typeList .head td:first-child { border-left:0; } .ec-base-table.typeList .scroll { position:relative; overflow-x:hidden; overflow-y:scroll; max-height:185px; min-height:100px; border:1px solid #ededed; border-top-width:0; margin-top:-1px; } .ec-base-table.typeList .scroll table { border:0; margin:0; } .ec-base-table.typeList .scroll table:before { display:none; } .ec-base-table.typeList .scroll .message { border: 0; } /* thead - blind */ .ec-base-table thead.blind, .ec-base-table thead.blind th { display:none; } .ec-base-table thead.blind + tbody tr:first-child th, .ec-base-table thead.blind + tbody tr:first-child td { border-top-width:0; padding-bottom:20px; } /* 라인형 */ .ec-base-table.typeList.gLine table { border-width:0; border-bottom-width:1px; } /* 공통 */ /* 테두리, 배경 없는 타입 */ .ec-base-table.typeClear table:before { display:none; } .ec-base-table.typeClear table, .ec-base-table.typeClear th, .ec-base-table.typeClear td { border:0 none; background:none; text-align:center; } .ec-base-table.typeClear th { font-weight:normal; } /* 셀 테두리 */ .ec-base-table.gBorder td { } .ec-base-table.gBorder td:first-child { border-left:0; } /* 정렬 */ .ec-base-table .left { text-align:left; } .ec-base-table .center { text-align:center; } .ec-base-table .right { text-align:right; } .ec-base-table.typeList .center td, .ec-base-table.typeList td.center { padding-left:0; padding-right:0; } .ec-base-table.typeList .center td.left { padding-left:10px; } .ec-base-table.typeList .center td.right { padding-right:10px; } .ec-base-table .top th, .ec-base-table th.top, .ec-base-table .top td, .ec-base-table td.top { vertical-align:top; } .ec-base-table .middle th, .ec-base-table th.middle, .ec-base-table .middle td, .ec-base-table td.middle { vertical-align:middle; } /* 폼태그 */ .ec-base-table img { vertical-align:middle; } @media print { .ec-base-table table:before { display:none; } } .ec-base-desc { overflow:hidden; text-align:left; } .ec-base-desc:after { content:""; display:block; clear:both; } .ec-base-desc dt, .ec-base-desc .term { float:left; width:100px; margin:0 0 2px; padding:0 4px 0 0; line-height:22px;-webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; font-weight:normal; } .ec-base-desc dd, .ec-base-desc .desc { display:block; margin:0 0 2px; padding:0 5px 0 100px; min-height:22px; line-height:22px; word-wrap:break-word; } .ec-base-desc dd:after, .ec-base-desc .desc:after { content:""; display:block; clear:left; } /* size */ .ec-base-desc.gSmall dt, .ec-base-desc.gSmall .term { width:30%; } .ec-base-desc.gSmall dd, .ec-base-desc.gSmall .desc { padding-left:30%; } .ec-base-desc.gMedium dt, .ec-base-desc.gMedium .term { width:40%; } .ec-base-desc.gMedium dd, .ec-base-desc.gMedium .desc { padding-left:40%; } .ec-base-desc.gLarge dt, .ec-base-desc.gLarge .term { width:50%; } .ec-base-desc.gLarge dd, .ec-base-desc.gLarge .desc { padding:0 0 0 50%; } /* align */ .ec-base-desc.centerDT dt, .ec-base-desc.centerDD dd, .ec-base-desc.centerDT .term, .ec-base-desc.centerDD .desc, .ec-base-desc.center, .ec-base-desc .center { text-align:center; } .ec-base-desc.rightDT dt, .ec-base-desc.rightDD dd, .ec-base-desc.rightDT .term, .ec-base-desc.rightDD .desc, .ec-base-desc.right, .ec-base-desc .right { text-align:right; } .ec-base-desc.rightDD dd, .ec-base-desc.rightDD .desc { padding-right:0; } /* typeBullet */ .ec-base-desc.typeBullet dt, .ec-base-desc.typeBullet .term { padding:0 4px 0 10px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow.png") no-repeat 0 7px; } /* typeDot */ .ec-base-desc.typeDot dt, .ec-base-desc.typeDot .term { padding: 0 4px 0 6px; background: url("//img.echosting.cafe24.com/skin/base/common/ico_square3.gif") no-repeat left 10px; } @charset "euc-kr"; /* 페이지네이트 */ .paginate { text-align:center; } /* 더보기 */ .paginate.typeMoreview { margin:0 auto 0px; width:100%; } .paginate.typeMoreview a { border:1px solid #444; font:8px "Montserrat",Dotum,AppleGothic,sans-serif; display:block; padding:10px 5px; color:#000; width:100px; margin:0 auto 0px; } .paginate.typeMoreview span.icoMore { display:inline-block; margin:0 0 0 px; font-size:0; line-height:0; vertical-align:baseline; } /* Swipe */ .paginate.typeSwipe { color:#000; } .paginate.typeSwipe button.circle { margin:0 1px 0px; width:13px; height:4px; border:1px solid #ddd; border-radius:20px; cursor:pointer; background:rgba(0,0,0,0.0); } .paginate.typeSwipe button.circle.selected { background:rgba(0,0,0,0.8); } .paginate.typeSwipe span { color:#000; font-size:0; line-height:0; } .paginate.typeSwipe button.prev, .paginate.typeSwipe button.next { width:31px; font-size:15px; line-height:1.2em; border:0; cursor:pointer; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_prev.png") no-repeat 50% 50%; background-size:7px auto; } .paginate.typeSwipe button.next { background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_next.png") no-repeat 50% 50%; background-size:7px auto; } /* 이전, 다음페이지보기(총페이지노출형) */ .paginate.typeTotal { color:#666; } .paginate.typeTotal > span { margin:0 8px;font-weight:bold; } .paginate.typeTotal p { display:inline-block;vertical-align:middle; } .paginate.typeTotal .prev, .paginate.typeTotal .next { width:7px; height:13px; font-size:15px; line-height:1.2em; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_prev.png") no-repeat 50% 50%; background-size:7px auto; } .paginate.typeTotal .next { background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_next.png") no-repeat 50% 50%; background-size:7px auto; } .paginate.typeTotal p span { overflow:hidden; display:block; width:29px; text-indent:-999px; } .paginate.typeTotal strong { color:#29b7c5; } /* 이전, 다음페이지보기(리스트형) */ .paginate.typeList { margin-top:20px; padding:7px 0; color:#666; } .paginate.typeList ol { margin:0 8px; } .paginate.typeList ol, .paginate.typeList ol li, .paginate.typeList p, .paginate.typeList p a, .paginate.typeList ol li a { display:inline-block; vertical-align:middle; } .paginate.typeList ol li { margin:0 1px 5px; list-style:none; } .paginate.typeList p, .paginate.typeList ol li a { padding:4px 0 4px; width:22px; height:14px; border-radius:2px; } .paginate.typeList ol li .other, .paginate.typeList p, .paginate.typeList ol li a { border:1px solid #ddd; } .paginate.typeList ol li .this { border:1px solid #666; } .paginate.typeList .this { color:#000; } .paginate.typeList .prev, .paginate.typeList .next { margin:0 0 5px; width:22px; font-size:15px; line-height:1.2em; background:#fff url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_prev.png") no-repeat 50% 50%; background-size:7px auto; } .paginate.typeList .next { background-image:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_next.png"); } .paginate.typeList p span { overflow:hidden; display:block; width:29px; text-indent:-999px; } .paginate.typeList p a { padding:7px 0 2px; width:31px; height:19px; color:#666; } /* 서브 */ #top_subject { position:relative; width:100%; display:inline-block; height:auto; text-align:center; color:#fff; overflow:hidden; } #top_subject .text_banner { text-align:left; padding-left:20%; } @media (min-width: 800px) { #top_subject img { position: absolute; object-fit: cover; min-width: 100%; min-height: 100%; left: 0px; top: 0px; } #top_subject h2 { position:relative; font-size:50px; font-weight:bold; margin:0 auto; width: calc( 100% - 40px ); padding:200px 0 10px; opacity:1.0; } #top_subject h3 { position:relative; font-size:20px; font-weight:300; margin:0 auto; width: calc( 100% - 40px ); padding-bottom:220px; line-height:32px; opacity:1.0; } } @media (max-width: 800px) { #top_subject img { position: absolute; object-fit: cover; min-width: 100%; min-height: 100%; left: 0px; top: 0px; } #top_subject h2 { position:relative; font-size:30px; line-height:41px; font-weight:bold; margin:0 auto; width: calc( 100% - 40px ); padding:60px 0 5px; opacity:1.0; } #top_subject h3 { position:relative; font-size:14px; line-height:24px; font-weight:300; margin:0 auto; width: calc( 100% - 40px ); padding-bottom:80px; opacity:1.0; } } /* 제목 박스 */ .top_subject { position:relative; width:100%; display:inline-block; height:690px; text-align:center; color:#fff; overflow:hidden; } .top_subject .text_banner { text-align:left; padding-left:20%; } #contents .banner_main1987_bn .banner_main { height:690px; } .banner_main li { height:100%; } .mainimg { height:100%; } .mainimg img { position:absolute; left:50%; top:50%; height:100%; width:auto !important; max-width:unset; transform:translate(-50%,-50%); } @media (min-width:1900px){ .mainimg img { height:auto; width:100% !important; } } @media (min-width: 800px) { .top_subject h2 { position:relative; font-size:50px; font-weight:bold; margin:0 auto; width: calc( 100% - 40px ); padding:200px 0 10px; opacity:1.0; } .top_subject h3 { position:relative; font-size:20px; font-weight:200; margin:0 auto; width: calc( 100% - 40px ); padding-bottom:200px; line-height:32px; opacity:1.0; } } @media (max-width: 800px) { .top_subject h2 { position:relative; font-size:30px; line-height:41px; font-weight:bold; margin:0 auto; width: calc( 100% - 40px ); padding:60px 0 5px; opacity:1.0; } .top_subject h3 { position:relative; font-size:14px; line-height:24px; font-weight:200; margin:0 auto; width: calc( 100% - 40px ); padding-bottom:80px; opacity:1.0; } } /* 애니메이션 제거 */ #top_subject h2, #top_subject h3, #top_subject img { animation: none; /* 모든 애니메이션 제거 */ } /* 메인 동영상, 회사소개 페이지의 오시는 길을 on/onff 할 수 있습니다. ※ on일 경우 아래와 같이 공란을 유지해주세요. .main_video { } .company_map { } ※ off일 경우 아래와 같이 괄호안에 display:none; 을 입력해주세요. off를 원하시는 경우에만 입력해주시면 됩니다. .main_video { display:none; } .company_map { display:none; } */ .main_video { } .company_map { } @media (max-width:1000px) { #mainSlider { display:inline-block; } .banner_main1987_bn { display:none; } } @media (min-width:1000px) { #mainSlider {display:none; } .banner_main1987_bn { display: block; } } /* 메인화면 */ #mainSlider img { width:100%; height:auto; display:block; } #mainSlider ul { position:absolute; top:0; left:0; overflow:hidden; display:block; } #mainSlider ul li { height:auto; } #mainSliderbg { position:relative; width:100%; height:auto; margin:0px 0 0px 0%; display:inline-block; padding:0px 0 0; } #mainSlider { position:relative; width:100%; height:auto; overflow:hidden; margin:0 auto; } .m_banner {position:relative;} .m_banner span {position:absolute;color:white;width:100%;height:auto;top:40%;left:0%;font-size:25px;font-weight:bold;text-align:center;} .ts-controls { height: 8px; position: absolute; overflow: hidden; z-index:9; bottom:15px; width:100%; text-align:center; } .ts-prev { display:none; width:100px; height:36px; background:#000; font-size:16px; color:#fff; font-weight:bold; position:absolute; top:0; left:0; } .ts-next { display:none; width:100px; height:36px; background:#000; font-size:16px; color:#fff; font-weight:bold; position:absolute; top:0; right:0; } .ts-paging { position:relative; width:100%; text-align:center; position:absolute; top:0px; left:0; } .ts-paging-btn { display:none; width:7px; height:3px; margin:0 1px; background:rgba(255,255,255,0.6); overflow: hidden; border-radius:250px; } .ts-paging-btn:first-child { margin-left:0; } .ts-paging-active { background:rgba(255,255,255,0.9); } button { border:0 none; background:transparent; cursor:pointer; } .banner_main1987_bn { position:relative; width:100%; height:auto; margin:0px auto 0px; height:auto; } .banner_main1987_bn .banner_main { position:relative; display:block; width:100%; height:auto; overflow:hidden; text-align:center; margin:0 auto;} .banner_main1987_bn .banner_main li { position:absolute; width:100%; } .banner_main1987_bn .banner_main li .mainimg { width:100%; margin:0 auto; height:auto; } .banner_main1987_bn .banner_main li:first-child { z-index:1; } .banner_main1987_bn .banner_main li img { width:100%;} /* 페이지 버튼 */ .banner_main1987_bn .banner_paging { position:absolute; z-index:3; width:100%; bottom:15px; text-align:center; font-size:0; line-height:0; opacity:1.0; -webkit-opacity:1.0; transition-delay:0s; -webkit-transition-delay:0s;} .banner_main1987_bn .banner_paging li { position:relative; display:inline-block; *display:inline; *zoom:1; height:3px; margin:0 2px; padding:5px 0; cursor:pointer; } .banner_main1987_bn .banner_paging li div { width:8px; height:8px; background:rgba(255,255,255,0.5); font-size:0; transition:all .3s ease; -webkit-transition:all .3s ease; border-radius:250px; } .banner_main1987_bn .banner_paging li.on div { width:12px; background:rgba(255,255,255,0.8); } /* 상품후기 아코디언형 */ #faq_main td .faq-subject a { display:block; text-decoration:none; } /* 공통 css */ #faq_main table .gLayoutFixed table { table-layout:fixed; } #faq_main table .gLayoutFixed .gLayoutAuto table { table-layout:auto; } #faq_main table tr {position:relative; border:1px solid #333; box-sizing:border-box; margin-bottom:20px; border-spacing:20px; } #faq_main table td { border-top:1px solid #333; border-bottom:1px solid #333; } /* 1번 박스 */ @media (min-width: 850px) { #faq_main table { position:relative; margin:10px 0 0; line-height:1.5; font-size:13px; color:#111; -webkit-box-shadow:13px 13px 0px rgba(0,0,0,0.2); -moz-box-shadow:13px 13px 0px rgba(0,0,0,0.2); box-shadow:13px 13px 0px rgba(0,0,0,0.2); } #faq_main table td.qna { width:60px; text-align:right; } #faq_main table td { padding:20px 10px; color:#111; display:table-cell; vertical-align:middle; box-sizing:border-box; margin-bottom:20px; font-size:22px; } #faq_main table td.qna { color:#ffcc00; font-size:30px; font-weight:900; } #faq_main td .faq-subject .subject { font-weight:normal; font-size:23px; line-height:26px; } #faq_main #content_view td { padding:20px 20px 20px; line-height:28px; font-size:20px; text-align:left; font-weight:400; background:#f1f1f1; color:#111; box-sizing:border-box; } #faq_main td .faq-subject .btn-unfold { position:absolute; right:40px; top:50%; margin-top:-15px; } #faq_main td .faq-subject img.btn-unfold { max-width:30px; } #faq_main td.subject { position:relative; width: calc( 100% - 40px ); } } @media (max-width: 850px) { #faq_main table { position:relative; margin:10px 0 0; line-height:1.5; font-size:13px; color:#111; -webkit-box-shadow:4px 4px 0px rgba(0,0,0,0.2); -moz-box-shadow:4px 4px 0px rgba(0,0,0,0.2); box-shadow:4px 4px 0px rgba(0,0,0,0.2); } #faq_main table td.qna { width:40px; text-align:right; } #faq_main table td { color:#111; display:table-cell; vertical-align:middle; box-sizing:border-box; margin-bottom:0px; font-size:14px; } #faq_main table td.qna { color:#ffcc00; font-size:5vw; font-weight:900; } #faq_main td.subject .faq-subject .subject { font-weight:normal; font-size:14px; line-height:20px; } #faq_main #content_view td { padding:20px 20px 20px; line-height:24px; font-size:14px; text-align:left; font-weight:300; background:#f1f1f1; color:#111; box-sizing:border-box; } #faq_main td .faq-subject .btn-unfold { position:absolute; right:10px; top:50%; margin-top:-10px; } #faq_main td .faq-subject img.btn-unfold { max-width:20px; } #faq_main td.subject { position:relative; padding:15px 40px 15px 15px; } }