@charset "utf-8"; /* ========== [태그 초기화] ========== */ * {margin:0; padding:0;} html, body {width:100%; height:100%;} body {line-height:1.2; font-size:12px; color:#acacac; word-break:break-word; word-wrap:break-word;} img {max-width:100%; border:0; vertical-align:middle;} form, fieldset {display:block; border:0;} ul,ol,li {list-style:none;} hr {display:none;} table {border-collapse:collapse; border-spacing:0; width:100%;} p, acronym, address, big, small, cite, code, dfn, em, kbd, pre, samp, sub, sup, tt, var {font-style:normal;} h1, h2, h3, h4, h5, h6 {font-size:12px;} input, select { vertical-align:middle; font-family:arial,AppleGothic,verdana,sans-serif; font-size:1em; color:#67625c; } blockquote, q {quotes: none;} a:link, a:visited, a:hover, a:focus, a:active {color:#888888; text-decoration:none;} a {cursor:pointer;} /* ========== [공통스타일] ========== */ /* [서식] */ .select {height:21px; font-size:12px; font-family:arial; vertical-align:middle; border:1px solid #9c9c9c; border-radius:0; background:#ffffff;} .input-text {height:20px; border:1px solid #bfbfbf; font-size:12px; background:#ffffff;} input[type="text"].input-text:disabled {-webkit-text-fill-color:#666666; opacity:1;} .input-radio {width:13px; height:13px; margin:0; padding:0; vertical-align:middle;} .input-check {width:13px; height:13px; margin:0; padding:0; vertical-align:middle; border-radius:0;} .input-image {margin:0; padding:0; border:none; vertical-align:middle;} .input-file {height:21px; border:1px solid #d3d3d3; font-size:12px; border:1px solid #d8d8d8; background:#ffffff;} .textarea {font-size:12px; border:1px solid #d7d7d7;} /* 정렬 */ .al_l {text-align:left;} .al_c {text-align:center;} .al_r {text-align:right;} .al_t {vertical-align:top;} /* 클리어링 */ .clearfix:after {content:''; clear:both; display:block;} /* [display] */ .hide, legend {overflow:hidden;visibility:hidden;position:absolute;width:0;height:0;font-size:0;line-height:0;} caption {display:none;} /* table */ .tbl-fixed {table-layout:fixed;} /* margin/padding */ .mg0 {margin:0 !important;} .mgt0 {margin-top:0 !important;} .mgt5 {margin-top:5px !important;} .mgt8 {margin-top:8px !important;} .mgt10 {margin-top:10px !important;} .mgt15 {margin-top:15px !important;} .mgt20 {margin-top:20px !important;} .mgt25 {margin-top:25px !important;} .mgt30 {margin-top:30px !important;} .mgt35 {margin-top:35px !important;} .mgt40 {margin-top:40px !important;} .mgt45 {margin-top:45px !important;} .mgt50 {margin-top:50px !important;} .mgt55 {margin-top:55px !important;} .mgt60 {margin-top:60px !important;} .mgt65 {margin-top:65px !important;} .mgt70 {margin-top:70px !important;} .mgt75 {margin-top:75px !important;} .mgt80 {margin-top:80px !important;} .mgt5P{margin-top: 5% !important;} .mgr0 {margin-right:0 !important;} .mgr5 {margin-right:5px !important;} .mgr10 {margin-right:10px !important;} .mgr15 {margin-right:15px !important;} .mgr20 {margin-right:20px !important;} .mgr25 {margin-right:25px !important;} .mgr30 {margin-right:30px !important;} .mgb0 {margin-bottom:0 !important;} .mgb5 {margin-bottom:5px !important;} .mgb10 {margin-bottom:10px !important;} .mgb15 {margin-bottom:15px !important;} .mgb20 {margin-bottom:20px !important;} .mgb25 {margin-bottom:25px !important;} .mgb30 {margin-bottom:30px !important;} .mgb40 {margin-bottom:40px !important;} .mgb50 {margin-bottom:50px !important;} .mgb60 {margin-bottom:60px !important;} .mgl0 {margin-left:0 !important;} .mgl5 {margin-left:5px !important;} .mgl10 {margin-left:10px !important;} .mgl15 {margin-left:15px !important;} .mgl17 {margin-left:17px !important;} .mgl20 {margin-left:20px !important;} .mgl25 {margin-left:25px !important;} .mgl30 {margin-left:30px !important;} .mgCng{margin: 0 8px 0 0 !important;} .mgCng label{margin: 0 15px 0 0 !important;} .pd0 {padding:0 !important;} .pdl10 {padding-left:10px !important;} .ft_red {color:#c50000;} .bgnone {background:none !important;} .label {cursor:pointer;} .input-radio {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; border-radius:50%; background:#ffffff;} .input-radio:checked {box-shadow:0 0 0 4px #ffffff inset; background:#454b51;} /* 버튼 [180409] */ a.btn, button.btn, input.btn {display:inline-block; background:transparent none; border:0 none; -webkit-appearance:none; -moz-appearance:none; appearance:none;} .btnPrimary {padding:.55em 1.5em; border:1px solid currentColor; border-radius:.15em; line-height:1.2em; font-size:1rem; font-weight:bold;} .btnBlack:link, .btnBlack:visited {color:#222;} .btnBlack:hover {color:white; background-color:#222; border-color:#222;} .btnWhite:link, .btnWhite:visited {color:white;} .btnWhite:hover {color:#222; background:white; border-color:white;} .btnBgBlack:link, .btnBgBlack:visited {color:white; background-color:#222; border-color:#222;} .btnBgBlack:hover {background-color:#024137; border-color:#024137;} /* ========== [레이아웃] ========== */ #wrap {overflow:hidden; min-width:320px;} #container {padding-top:70px;} @media screen and (max-width: 768px){ #wrap {height:auto !important; padding-top:48px !important;} /* #wrap.bannerOn {padding-top:90px !important;} */ #wrap.app_mode{padding-top:0 !important;} #container {padding-top:0;} } #header {position:fixed; left:0; top:0; width:100%; height:70px; padding-bottom:14px; background:url(../images/layout/BG_gnbShadow.png) repeat-x left bottom; z-index:1000;} #header .headerLeft {position:absolute;left:0;top:0;width:74.7%;max-width: 950px;} #header .headerLeft .logo {float:left; width:28%; max-width:245px;} #header .headerLeft .logo a {display:block; max-width:212px; height:50px; padding-top:20px; text-align:center;} #header .headerLeft .logo a img {width:134px;} #header .headerLeft .gnbMenuWrap {float:left;width:72%;max-width: 680px;} #header .headerLeft .gnbMenuWrap .gnbMenu {} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList {} #wrap.pcWrap #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList {transform:translateY(0) !important;} /* 웹버전일때 */ #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList + div {display:none;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul {} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul:after {content:''; display:block; clear:both;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li {float:left;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li a {display:block; position:relative; height:43px; padding-top:27px; text-align:center; line-height:1.4; font-weight:bold; font-size:14px; color:#222222;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li a em {display:inline-block; position:relative; height:100%;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li a span {display:none; position:absolute; left:-2px; bottom:0; width:100%; height:2px; padding:0 2px; background:#024137;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.on a {color:#024137;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.on a span {display:block;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu1 {width:20.9%; max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu2 {width:30.5%; max-width:179px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu3 {width:16%; max-width:115px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu4 {width:19.7%; max-width:132px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu5 {width:19.7%; max-width:132px;} /* 2017-03-02 ID - gnb */ #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_ID ul li.menu1 {width: 18.9%;max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_ID ul li.menu2 {width:30.5%;max-width: 159px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_ID ul li.menu3 {width:16%;max-width: 55px;} /* #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_ID ul li.menu4 {width:12.9%;max-width: 63px;} */ /* #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_ID ul li.menu4 {width: 23.7%;max-width: 152px;} */ #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_ID ul li.menu4 {width:26%;max-width:175px} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_ID .iconNew2 {bottom: -2px; right: 0%;} #header .gnbSubWrap.gnbMenuSub_ID .gnbSubMenu5 .iconNew2 {bottom: -2px; right: 0%;} /* 2017-03-14 TW - gnb */ #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_TW ul li.menu1 {width:20%; max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_TW ul li.menu2 {width:20%; max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_TW ul li.menu3 {width:20%; max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_TW ul li.menu4 {width:20%; max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_TW ul li.menu5 {width:20%; max-width:127px;} .language_L008 .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu1 {width:20% !important; max-width:127px;} .language_L008 .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu2 {width:23% !important; max-width:127px;} .language_L008 .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu3 {width:15% !important; max-width:127px;} .language_L008 .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu4 {width:20% !important; max-width:127px;} .language_L008 .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu5 {width:22% !important; max-width:127px;} /* 2017-03-14 HK - gnb */ #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_HK ul li.menu1 {width:20%; max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_HK ul li.menu2 {width:20%; max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_HK ul li.menu3 {width:20%; max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_HK ul li.menu4 {width:20%; max-width:127px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_HK ul li.menu5 {width:20%; max-width:127px;} #header .headerMenu {position:absolute; right:45px; top:27px;} #header .headerMenu .memberMenu {float:left; margin:-6px 28px 0 0;} #header .headerMenu .memberMenu .vipGift {display:inline-block; margin-right:5px; vertical-align:middle;} #header .headerMenu .memberMenu .menu_txt {display:inline-block; vertical-align:middle;} #header .headerMenu .memberMenu .menu_icon {display:none;} #header .headerMenu .memberMenu a {display:inline-block; line-height:32px; font-size:11px; color:#666666;} #header .headerMenu .memberMenu a.bar {margin-right:6px; padding-right:10px; background:url(../images/common/bar_1x12_cdd1cf.gif) no-repeat right center;} #header .headerMenu .memberMenu a em {display:inline-block; overflow:hidden; max-width:30px; vertical-align:bottom; text-overflow:ellipsis; white-space:nowrap;} #header .headerMenu .searchMenu {float:left; position:relative; margin-right:20px; z-index:1;} #header .headerMenu .searchMenu a.btnSearchOpen {display:block; position:relative;} #header .headerMenu .searchMenu a.btnSearchOpen.open span {position:absolute; left:50%; top:37px; width:12px; height:7px; margin-left:-3px; background:url(../images/layout/BG_searchAreaArr.gif) no-repeat left top;} #header .headerMenu .searchArea {display:none; position:absolute; right:0; top:43px; width:371px; height:38px; padding-right:37px; border:1px solid #dddddd; background:#ffffff;} #header .headerMenu .searchArea .input-search {width:100%; height:38px; text-indent:20px; line-height:38px; font-size:13px; color:#999999; border:none; background:none;} #header .headerMenu .searchArea .btnSearch {position:absolute; right:8px; top:0; width:37px; height:27px; padding-top:11px; text-align:center;} #header .headerMenu .searchArea .btnSearch img {width:17px;} #header .headerMenu .languageMenu {float:left; position:relative;} #header .headerMenu .languageMenu .currentLanguage {} #header .headerMenu .languageMenu .currentLanguage a {display:inline-block; padding-bottom:4px;} #header .headerMenu .languageMenu .currentLanguage a span {display:inline-block; padding-right:13px; vertical-align:middle; line-height:21px; font-size:11px; font-family:Arial; color:#666666; background:url(../images/common/arrDown_7x4_666666.gif) no-repeat right 8px;} #header .headerMenu .languageMenu .currentLanguage.on a span {background-image:url(../images/common/arrUp_7x4_666666.gif);} #header .headerMenu .languageMenu .languageList {display:none; position:absolute; left:0; top:100%; width:100%;} #header .headerMenu .languageMenu .languageList ul {border:1px solid #222222; background:#ffffff;} #header .headerMenu .languageMenu .languageList ul li {} #header .headerMenu .languageMenu .languageList ul li a {display:block; text-align:center; line-height:25px; font-family:Arial; color:#666666;} #header .headerMenu .languageMenu .languageList ul li a:hover {color:#024137; background:#f5f5f5;} #header .gnbSubWrap {} #header .gnbSubWrap .gnbSubClose {overflow:hidden; height:0;} #header .gnbSubWrap .gnbSubMenu {display:none; position:absolute; left:0; top:70px; width:74.7%; max-width:912px;} #header .gnbSubWrap .gnbSubMenu .gnbSub {position:absolute; left:0; top:0; border:1px solid #cfd3d1; background:#ffffff;} #header .gnbSubWrap .gnbSubMenu .gnbSub:after {content:''; display:block; clear:both;} #header .gnbSubWrap .gnbSubMenu .gnbSub .inner {padding:26px 0 26px 32px;} #header .gnbSubWrap .gnbSubMenu3 .gnbSub .inner, #header .gnbSubWrap .gnbSubMenu4 .gnbSub .inner{padding:26px 0 26px 30px;} #header .gnbSubWrap .gnbSubMenu .gnbSub.product_one .inner{padding: 13px 0 26px 30px;} /* GNB > 제품메뉴 */ #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate {float:left;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateLine {min-height:240px; background:url(../images/common/line_1x1_eeeeee.gif) repeat-y right top;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateTitle {margin-bottom:13px;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateTitle a {line-height:1.4; font-size:14px; font-weight:bold; color:#222222;} #header .gnbSubWrap .gnbSubMenu .gnbSub .allTit {margin-bottom:12px;} #header .gnbSubWrap .gnbSubMenu .gnbSub .allTit a {line-height:1; font-size:13px; font-weight:bold; color:#666666;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateTitle.last-child {margin-bottom:0;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateTitle a strong {display:inline-block; padding-right:9px; color:#024137; word-break:break-all; background:url(../images/common/arrRight_3x5_276c3e.gif) no-repeat right center;} #header .gnbSubWrap .gnbSubMenu .gnbSub ul {} #header .gnbSubWrap .gnbSubMenu .gnbSub ul li {margin-top:8px;padding-right:5px;} #header .gnbSubWrap .gnbSubMenu .gnbSub ul li a {line-height:1.4; font-size:13px; color:#666666;text-transform:uppercase;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 {width:50%;} #header .gnbSubWrap .gnbSubMenu .gnbSub.product_one .gnbCate1{left:67.5%; width:180px;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .cateLine {overflow:hidden;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .cateTitle {float:left; width:100%;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .subCateWrap {float:left; width:30.2%;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .subCateWrap+.subCateWrap {float:left; width:37.5%;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .subCateWrap+.subCateWrap+.subCateWrap {float:left; width:32.3%;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .subCate .subCateTitle {font-size:13px; color:#024137;font-weight:bold;padding-right:5px;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate2 {width:16.66%;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate3 {width:16.66%;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate4 {width:16.66%} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate4 .subCate {margin-bottom:13px;} /* #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCateBanner {width:26.3%;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCateBanner .inner {padding:26px 20px;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCateBanner .bannerLink {display:inline-block;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCateBanner .bannerLink .thumb {display:block;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCateBanner .bannerLink strong {display:block; margin-top:16px; line-height:1.4; font-size:14px; font-weight:bold; color:#222222;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCateBanner .bannerLink .desc {display:block; line-height:1.4; font-size:13px; color:#666666;} */ #header .gnbSubWrap .gnbSubMenu1 {} #header .gnbSubWrap .gnbSubMenu1 .gnbSub {left:20%; width:1146px;} #header .gnbSubWrap .gnbSubMenu1 .gnbSub.product_one {left:24%; width:auto;} #header .gnbSubWrap .gnbSubMenu3 {} #header .gnbSubWrap .gnbSubMenu3 .gnbSub {left:57.5%; width:180px;} #header .gnbSubWrap .gnbSubMenu4 {} #header .gnbSubWrap .gnbSubMenu4 .gnbSub {left:67%; width:210px;} #header .gnbSubWrap .gnbSubMenu5 .gnbSub {left:80%; width:200px} #header .gnbSubWrap.gnbMenuSub_ID .gnbSubMenu4 .gnbSub {left: 62.5%;width:196px;} #header .gnbSubWrap.gnbMenuSub_ID .gnbSubMenu5 .gnbSub {left: 70.5%;width:180px;} /* 모바일개선추가 18.04.06 */ .pcDck{display:block;} .moDck{display:none;} .mobileTopWrap{position:static;} .mainWrap #header .headerMenu .searchArea{display:none;} .sideMenuBtn{display:none;} .searchTxt{display:none;} .headerBanner{position:relative;text-align:center;height:auto;overflow:hidden;height:42px;} .headerBanner .slick-list{padding:0;} .headerBanner li{width:100% !important;position:relative;} .headerBanner li>a.txt{display:block;margin:0 auto;max-width:82%;font-size:14px;height:100%;text-align:center;line-height:42px;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;} .bannerClose{display:block;width:14px;height:14px; background:url(../images/common/btn_topWhite.png) no-repeat 0 0 / 100% 100%;position:absolute;top:50%;right:46px;margin-top:-7px;text-indent:-9999em;} .headerBanner li.black .bannerClose{background:url(../images/common/btn_topBlack.png) no-repeat 0 0 / 100% 100%;position:absolute;} .bannerOn.pcWrap #header{height:112px;} .bannerOn.pcWrap .mobileTopWrap{position:relative;} .bannerOn.pcWrap #container{padding-top:112px;} .subWrap #container{padding-bottom:40px;} .bannerOn.pcWrap .mainEventPop{top:8%;} #header .headerMenu .searchMenu a.btnSearchOpen img{width:20px;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .subCate .subCateTitle.subCateTitle1 {display:none;} /*드롭다운메뉴*/ .dropMenu{display:none;} .prdDropMenu{display:none;} .cateTitle1{display:none;} .allTit.prdallTit{display:none;} @media screen and (max-width: 1300px){ #header .gnbSubWrap .gnbSubMenu1 {left:0; width:100%; max-width:none;} #header .gnbSubWrap .gnbSubMenu1 .gnbSub {position:static; margin:0 auto;} #header .gnbSubWrap .gnbSubMenu1 .gnbSub {width:100%; border:none; border-top:1px solid #cfd3d1;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCateBanner .inner {padding:26px 0; text-align:center;} #header .gnbSubWrap .gnbSubMenu .gnbSub .inner {padding:15px 0 30px 15px;} #header .gnbSubWrap .gnbSubMenu3 .gnbSub .inner, #header .gnbSubWrap .gnbSubMenu4 .gnbSub .inner{padding:26px 0 26px 30px;} } @media screen and (max-width: 1240px){ #header .headerMenu .memberMenu .menu_txt {display:none;} #header .headerMenu .memberMenu .menu_icon {display:inline-block; vertical-align:middle;} #header .headerMenu .memberMenu .menu_icon a {padding:5px 0 6px;} #header .headerMenu .memberMenu .menu_icon img{width:24px;} } @media screen and (max-width: 1080px){ #header .headerMenu {right:1%;} } @media screen and (max-width: 920px){ /* #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCateBanner .bannerLink {text-align:left;} */ } @media screen and (max-width: 768px){ #header {min-width:320px; height:auto; padding-bottom:0; background:none;} #header.gnbOpen {position:absolute;} #header .headerLeft {position:relative; width:auto; margin-bottom:-14px; padding-bottom:14px; background:url(../images/layout/BG_gnbShadow.png) repeat-x left bottom; z-index:1;} #header .headerLeft .logo {float:none; position:relative; width:auto; max-width:none; text-align:center; border-bottom:1px solid #e5e5e5; background:#ffffff; z-index:2;} #header .headerLeft .logo a {display:inline-block; width:116px; height:auto; padding:10px 0;} #header .headerLeft .gnbMenuWrap {overflow:hidden; float:none; position:relative; width:auto; max-width:540px; height:40px; margin:0 auto; -webkit-transition:all 0.5s ease-in-out 0s; background:#ffffff;display:none;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList {width:590px;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li {width:auto !important; max-width:none !important;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li a {height:29px; padding:11px 19px 0; color:#999999;} #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_ID ul li.menu2{width:40.5% !important;} /* #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu2 {width:25.5% !important;} */ #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList.gnbMenu_ID ul li a {padding: 11px 7px 0;} #header .headerMenu {position:static;} #header .headerMenu .memberMenu {float:none; position:absolute; left:0; top:0; margin:0; padding-right:44px; z-index:2;} #header .headerMenu .memberMenu .vipGift {position:absolute; left:44px; top:0; width:32px; height:32px; margin:0; padding:6px;} #header .headerMenu .memberMenu .menu_icon a {display:block; padding:12px 5px 12px 15px;} #header .headerMenu .searchMenu {float:none; position:absolute; right:50px; top:0; margin-right:0; z-index:2;} #header .headerMenu .searchMenu a.btnSearchOpen {width:18px; height:18px; padding:15px 7px;} /* #header .headerMenu .searchMenu a.btnSearchOpen.open {background:url(../images/layout/btn_searchClose.gif) no-repeat center center;} */ #header .headerMenu .searchMenu a.btnSearchOpen.open span {display:none;} /* #header .headerMenu .searchMenu a.btnSearchOpen.open img {display:none;} */ #header .headerMenu .searchArea {top:47px; width:100%; height:40px; padding:1px 0 14px; border:none; background:url(../images/layout/BG_gnbShadow.png) repeat-x left bottom; z-index:1;} #header .headerMenu .searchArea .searchForm {position:relative; height:29px; margin:0 15px; padding-right:27px; border:1px solid #cccccc;} #header .headerMenu .searchArea .input-search {height:29px; text-indent:10px; line-height:29px;} #header .headerMenu .searchArea .btnSearch {width:27px; height:23px; padding-top:6px;} #header .headerMenu .languageMenu {display:none;} #header .gnbSubWrap {position:absolute; left:0; top:87px; width:100%;} #header .gnbSubWrap .gnbSubClose {display:none; position:relative; top:-1px; height:auto; margin-bottom:-1px; padding-bottom:19px; border-top:1px solid #d8d9dd; background:url(../images/layout/BG_gnbSubShadow.png) repeat-x left bottom;} #header .gnbSubWrap .gnbSubClose a {display:block; padding:17px 0 20px; text-align:center; background:#f5f5f5;} #header .gnbSubWrap .gnbSubMenu {position:static; width:100%; max-width:none;} #header .gnbSubWrap .gnbSubMenu .gnbSub {position:static !important; width:100% !important; border:none;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate {float:none; width:auto !important;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCateBanner {display:none;} #header .gnbSubWrap .gnbSubMenu .gnbSub .inner {padding:0;} #header .gnbSubWrap .gnbSubMenu .gnbSub.product_one .inner{padding:0;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateLine {min-height:inherit; background:none;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateTitle {margin-bottom:0;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateTitle a {display:block; padding:15px 0 15px 20px; font-size:13px; border-bottom:1px solid #eeeeee;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateTitle a.on {} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateTitle.hasChild a {background:url(../images/layout/BG_gnbSub2Depth.png) no-repeat right center;} #header .gnbSubWrap .gnbSubMenu .gnbSub .cateTitle.hasChild a.on {background:url(../images/layout/BG_gnbSub2DepthOn.png) no-repeat right center;} #header .gnbSubWrap .gnbSubMenu .gnbSub .subCate {display:none; padding:6px 0; border-bottom:1px solid #eeeeee; background:#fafafa;} #header .gnbSubWrap .gnbSubMenu .gnbSub ul {} #header .gnbSubWrap .gnbSubMenu .gnbSub ul li {margin-top:0;} #header .gnbSubWrap .gnbSubMenu .gnbSub ul li a {display:block; padding:6px 0 6px 20px; color:#666666;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .cateTitle {float:none; width:auto;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .subCate {float:none; width:auto;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate1 .subCate .subCateTitle {padding:6px 0 6px 20px;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate4 .subCate {margin-bottom:0;} /* 모바일개선추가 18.04.06 */ .pcDck{display:none;} .moDck{display:block;} .headerBanner{position:relative;text-align:center;height:auto;overflow:hidden;} .headerBanner li{} .headerBanner li>a.txt{font-size:12px;line-height:40px;max-width:76%;} .bannerClose{width:18px;height:18px;right:15px;margin-top:-9px;} .bannerClose{width:12px;height:12px;right:15px;margin-top:-10px;padding:4px;background:url(../images/common/btn_topWhite.png) no-repeat center center / 12px 12px;} .headerBanner li.black .bannerClose{background:url(../images/common/btn_topBlack.png) no-repeat center center / 12px 12px;} .mobileTopWrap{position:relative;} .mainWrap #header .headerMenu .searchArea{display:block;} /* .bannerOn.pcWrap .mainVisualWrap{top:50px;} */ #header .headerMenu .searchArea .btnSearch img{width:18px;} #header .headerMenu .memberMenu .menu_icon img{width:26px;} .mainWrap #header .headerMenu .searchMenu a.btnSearchOpen{display:none;} .mainWrap #header .headerMenu .searchMenu a.btnSearchOpen{display:none;} .mainWrap #header .headerMenu .searchArea .searchClose{display:none;} .sideMenuBtn{display:block;position:absolute;top:0;right:8px;z-index:2;} .sideMenuBtn a{display:block;width:22px;height:17px;padding:15px 7px;} .subWrap #header .headerMenu .searchArea{border:1px solid #e5e5e5;border-width:0 1px; padding:11px 0 16px;height:31px;background:url(../images/layout/BG_gnbShadow2.png) repeat-x 0 0 / auto 100%;} .subWrap #header .headerMenu .searchArea .searchForm{background-color:#fff;margin:0 35px 0 15px;border:1px solid #e5e5e5;padding-right:31px;} .subWrap #header .headerMenu .searchArea .searchForm:after{content:'';display:block;position:absolute;top:-20px;right:18px;width:15px;height:9px;background:url(../images/layout/BG_searchAreaArr_m.png) no-repeat center top / 100% 100%;} .subWrap #header .headerMenu .searchArea .searchClose{position:absolute;right:-33px;top:-1px;padding:10px;} .subWrap #header .headerMenu .searchArea .searchClose img{width:10px;} /* dropdown 메뉴*/ .dropMenu{display:block;position:relative;} .dropMenu .cateTitle{border-bottom:1px solid #eeeeee;padding:0 20px;} .dropMenu .cateTitle>a{display:block;font-size:14px;line-height:18px;padding:18px 0;font-weight:bold;color:#222;text-align:center;background:url(../images/layout/btn_dropmenu_down.png) no-repeat right center / 15px auto} .dropMenu.on .cateTitle>a{background:url(../images/layout/btn_dropmenu_up.png) no-repeat right center / 15px auto} .dropMenu .subCate{display:none;} .dropMenu.on .subCate{display:block;position:absolute;left:0;top:55px;width:100%;z-index:15;padding-bottom:19px;background:url(../images/layout/BG_gnbSubShadow.png) repeat-x left bottom} .dropMenu.on .subCate ul{max-height:250px;overflow-y:scroll;} .dropMenu.on .subCate a{display:block;font-size:12px;color:#666666;font-weight:bold;line-height:16px;padding:12px 0;background-color:#fff;border-bottom:1px solid #eeeeee;padding-left:20px;box-sizing:border-box;} .dropMenu.on .subCate .on a{color:#222;} .dropMenu.on .subCate .green a{color:#024137;} .dropMenu.aboutDropMenu{border-top:1px solid #eee;} .pageTitle.noticePageTitle{padding-top:0;} /*poduct dropdown 메뉴 */ .prdDropMenu{margin:0 -2.5%;display:block;text-transform:uppercase;} .prdDropMenu .allTit{padding:0;} .prdDropMenu .allTit.prdallTit{display:block;} .prdDropMenu .gnbCate{position:relative;} .prdDropMenu .gnbCate1 .subCateTitle{display:none;} .prdDropMenu .gnbCate1 .subCateTitle.subCateTitle1{display:block;} .prdDropMenu .gnbCate1 .allTit{display:none;} .prdDropMenu .cateTitle{border-bottom:1px solid #eeeeee;padding:0 20px;display:none;} .prdDropMenu .cateTitle1{display:block;} .prdDropMenu .cateTitle>a{display:block;font-size:14px;line-height:18px;padding:18px 0;font-weight:bold;color:#222;text-align:center;background:url(../images/layout/btn_dropmenu_down.png) no-repeat right center / 15px auto} .prdDropMenu .cateTitle>a.on{background:url(../images/layout/btn_dropmenu_up.png) no-repeat right center / 15px auto} .prdDropMenu .subCateWrap{display:none;} .prdDropMenu .subCate+.allTit{display:none;} .prdDropMenu .subCateWrap.on{display:block;position:absolute;left:0;top:55px;width:100%;z-index:15;padding-bottom:19px;background:url(../images/layout/BG_gnbSubShadow.png) repeat-x left bottom;} .prdDropMenu .subCate{max-height:205px;overflow-y:scroll;} .prdDropMenu .subCateWrap.on ul{} .prdDropMenu .allTit a{display:block;font-size:12px;color:#666666;font-weight:bold;line-height:16px;padding:12px 0;background-color:#fff;border-bottom:1px solid #eeeeee;padding-left:20px;box-sizing:border-box;} .prdDropMenu .allTit.on a{color:#222;} .prdDropMenu .subCateWrap.on a{display:block;font-size:12px;color:#666666;font-weight:bold;line-height:16px;padding:12px 0;background-color:#fff;border-bottom:1px solid #eeeeee;padding-left:20px;box-sizing:border-box;} .prdDropMenu .subCateWrap.on li.on a{color:#222;} } @media screen and (max-width: 560px){ #header .headerLeft .gnbMenuWrap .arr {position:absolute; right:0; top:0; width:45px; height:40px; background:url(../images/layout/arr_gnbMenu.png) no-repeat left top; z-index:1;} /* #header .headerLeft .gnbMenuWrap .gnbMenu .gnbMenuList ul li.menu2{width: 28.5% !important;} */ } /* footer */ #footer {border-top:1px solid #dddddd;} #footer .share {max-width:1200px; margin:0 auto; padding-bottom:10px; zoom:1;} #footer .share:after {content:''; display:block; clear:both;} #footer .share .snsArea {float:left; padding:14px 0 0 30px;} #footer .share .footerLanguage {display:none;} #footer .share ul {float:left;} #footer .share ul li {float:left; margin-right:15px;} #footer .share .letterArea {float:right; padding:10px 30px 0 0;} #footer .share .letterArea .title {float:left; margin-right:15px; line-height:30px; font-size:13px; font-weight:bold; color:#333;} #footer .share .letterArea .form {float:left; position:relative; padding-right:36px;} #footer .share .letterArea .form .input-text {width:173px; height:28px; text-indent:10px; border:1px solid #dddddd;} #footer .share .letterArea .form label.error {display:block; max-width:173px; margin-top:5px;} #footer .share .letterArea .form .btnSend {display:block; position:absolute; right:0; top:0; border:1px solid #dddddd;padding:0;} #footer .footerLanguageSel {display:none;} #footer .footerMenuWrap {border-top:1px solid #dddddd; background:url(../images/layout/BG_footerMenu.gif) repeat center top;} #footer .footerMenuWrap .footerMenu {overflow:hidden; max-width:1200px; margin:0 auto; padding:40px 0 70px;} #footer .footerMenuWrap .footerMenu1 {float:left; width:50%;} #footer .footerMenuWrap .footerMenu2 {float:left; width:50%;} #footer .footerMenuWrap .footerMenu ul {float:left; width:100%;} #footer .footerMenuWrap .footerMenu ul li {float:left; width:100%;} #footer .footerMenuWrap .footerMenu ul li.menu1 {width:23%; padding-left:34px;} #footer .footerMenuWrap .footerMenu ul li.menu2 {width:25%;} #footer .footerMenuWrap .footerMenu ul li.menu3 {width:23%;} #footer .footerMenuWrap .footerMenu ul li.menu4 {width:24%;} #footer .footerMenuWrap .footerMenu ul li.menu5 {width:27%;} #footer .footerMenuWrap .footerMenu ul li.menu6 {width:29%;} #footer .footerMenuWrap .footerMenu ul li.menu7 {width:29%;} #footer .footerMenuWrap .footerMenu ul li.menu8 {width:15%;} #footer .footerMenuWrap .footerMenu ul li a {display:inline-block; font-size:13px; font-weight:bold; color:#222222;} #footer .footerMenuWrap .footerMenu ul li ul {float:none; margin-top:15px;} #footer .footerMenuWrap .footerMenu ul li ul li {float:none; margin-top:12px;} #footer .footerMenuWrap .footerMenu ul li ul li a {font-size:12px; color:#888888;padding-right:5px;} #footer .footerContWrap {border-top:1px solid #e5e5e5;} #footer .footerContWrap .footerCont {overflow:hidden; max-width:1200px; margin:0 auto; padding-bottom:18px;} #footer .footerContWrap .footerCont .footerLogo {float:left; padding:30px 0 0 30px;} #footer .footerContWrap .footerCont .contact {padding:20px 0 0 50px;} #footer .footerContWrap .footerCont .contact:after{content:'';display:table;clear:both;} #footer .footerContWrap .footerCont .contact .mail {font-size:11px; font-weight:bold; color:#666666;} #footer .footerContWrap .footerCont .contact .mail a {display:inline-block; margin-right:11px; padding-right:13px; font-weight:bold; color:#666666; background:url(../images/common/bar_2x11_e8e8e8.gif) no-repeat right center;} #footer .footerContWrap .footerCont .contact .mail a.last-child {margin-right:0; padding-right:0; background:none;} #footer .footerContWrap .footerCont .contact .copyright {margin-top:5px; font-size:11px; font-weight:bold; color:#999999;float:left; line-height:16px} #footer .footerContWrap .footerCont .contact .footerRight {margin-top:5px; text-align:right;} #footer .footerContWrap .footerCont .contact .footerRight a{font-size:11px; font-weight:bold; color:#999999;} #footer .footerContWrap .footerCont .contact .footerRight .terms{margin-right:6px;padding-right:10px;display:inline-block;background:url(../images/common/bar_1x12_cdd1cf.gif) no-repeat right center} #footer .footerContWrap .footerCont .contact .footerRight .return{margin-left:6px; padding-left:10px; display:inline-block; background:url(../images/common/bar_1x12_cdd1cf.gif) no-repeat left center;} #footer .footerContWrap .footerCont .contact .footerRight .return + a{margin-left:6px; padding-left:10px; display:inline-block; background:url(../images/common/bar_1x12_cdd1cf.gif) no-repeat left center;} #footer .footerContWrap .footerCont .contact .copyright span{color:#666} #footer .footerContWrap .footerCont .contact .from{clear:both; position:relative; padding:30px 0 0 0;} #footer .footerContWrap .footerCont .contact .from .footLogo{position:relative; margin-bottom:30px} #footer .footerContWrap .footerCont .contact .from p{color:#999; font-size:11px; margin-bottom:20px; line-height:17px} #footer .footerContWrap .footerCont .contact .from p:nth-last-child(1){margin-bottom:0} /*20200211 vn 마크 추가*/ #footer .footerContWrap .footerCont .contact .from .footLogo .vnMark{display:inline-block;width:180px;position:absolute;top:-15px;right:0;} /* ui ux 개선 */ #footer .share {padding-bottom:0;} #footer .share .snsArea {padding:8px 0 8px 34px} #footer .share .pollow {float:left;font-weight:bold;color:#333;line-height:34px;margin-right:14px;} #footer .share ul li {margin:0 7px} #footer .share a {display:inline-block;padding:5px 4px;} #footer .share li img {height:23px;} #footer .share .letterArea .form .input-text::placeholder {color:#444;} #footer .footerMenuWrap .footerMenu1{width:68%;} #footer .footerMenuWrap .footerMenu2 {width:32%;} #footer .footerMenuWrap .footerMenu ul li.menu1 {width:24%;} #footer .footerMenuWrap .footerMenu ul li.menu2 {width:23%;} #footer .footerMenuWrap .footerMenu ul li.menu3 {width:24%;} #footer .footerMenuWrap .footerMenu ul li.menu4 {width:22%;} #footer .footerMenuWrap .footerMenu ul li.menu5 {width:58%;} #footer .footerMenuWrap .footerMenu ul li.menu6 {width:36%;} #footer .footerMenuWrap .footerMenu ul li.menuLast {width:25%;} #footer .footerContWrap .footerCont {padding-bottom:20px} /* jp */ #footer .footerMenuWrap .footerMenu.jp ul li.menu1 {width:22%;} #footer .footerMenuWrap .footerMenu.jp ul li.menu2 {width:25%;} #footer .footerMenuWrap .footerMenu.jp ul li.menu3 {width:25%;} #footer .footerMenuWrap .footerMenu.jp ul li.menu4 {width:21.5%;} /* giftCard 추가 */ #footer .footerMenuWrap .footerMenu.sg .footerMenu1 {width:55.67%;} #footer .footerMenuWrap .footerMenu.sg .footerMenu2 {width:44.33%;} #footer .footerMenuWrap .footerMenu.sg ul li.menu1 {width:23%;} #footer .footerMenuWrap .footerMenu.sg ul li.menu2 {width:20%;} #footer .footerMenuWrap .footerMenu.sg ul li.menu3 {width:26%;} #footer .footerMenuWrap .footerMenu.sg ul li.menu4 {width:25%;} #footer .footerMenuWrap .footerMenu.sg ul li.menu5 {width:37.3%;} #footer .footerMenuWrap .footerMenu.sg ul li.menu6 {width:34%;} #footer .footerMenuWrap .footerMenu.gcAdd .footerMenu1 {width:55.67%;} #footer .footerMenuWrap .footerMenu.gcAdd .footerMenu2 {width:44.33%;} #footer .footerMenuWrap .footerMenu.gcAdd ul li.menu1 {width:23%;} #footer .footerMenuWrap .footerMenu.gcAdd ul li.menu2 {width:20%;} #footer .footerMenuWrap .footerMenu.gcAdd ul li.menu3 {width:26%;} #footer .footerMenuWrap .footerMenu.gcAdd ul li.menu4 {width:25%;} #footer .footerMenuWrap .footerMenu.gcAdd ul li.menu5 {width:37.3%;} #footer .footerMenuWrap .footerMenu.gcAdd ul li.menu6 {width:34%;} /* ph */ #footer .footerMenuWrap .footerMenu.ph .footerMenu1 {width:85%;} #footer .footerMenuWrap .footerMenu.ph .footerMenu2 {width:15%;} #footer .footerMenuWrap .footerMenu.ph ul li.menu1 {width:30%;} #footer .footerMenuWrap .footerMenu.ph ul li.menu3 {float:right;width:34%;} #footer .footerMenuWrap .footerMenu.ph ul li.menu5 {width:auto;} @media screen and (max-width: 1024px){ #footer .footerMenuWrap .footerMenu.sg .footerMenu1, #footer .footerMenuWrap .footerMenu.sg .footerMenu2 {width:100%;} #footer .footerMenuWrap .footerMenu.sg ul li.menu5 {width:23%;padding-left:34px;} #footer .footerMenuWrap .footerMenu.sg ul li.menu6 {width:20%;} #footer .footerMenuWrap .footerMenu.sg ul li.menuLast {width:auto;} #footer .footerMenuWrap .footerMenu.gcAdd .footerMenu1, #footer .footerMenuWrap .footerMenu.gcAdd .footerMenu2 {width:100%;} #footer .footerMenuWrap .footerMenu.gcAdd ul li.menu5 {width:23%;padding-left:34px;} #footer .footerMenuWrap .footerMenu.gcAdd ul li.menu6 {width:20%;} #footer .footerMenuWrap .footerMenu.gcAdd ul li.menuLast {width:auto;} } @media screen and (max-width: 768px){ #footer .share {position:relative; padding-bottom:0;} #footer .share .snsArea:after {content:'';display:table;clear: both;} #footer .share .snsArea {float:none; padding:8px 2.25%; text-align:center;} #footer .share .footerLanguage {display:none; position:absolute; right:2.25%; top:19px;} #footer .share .footerLanguage a {display:block;} #footer .share .footerLanguage a span {display:inline-block; padding-right:20px; vertical-align:middle; color:#222222; background:url(../images/common/arrDown_10x6_666666.gif) no-repeat right center;} #footer .share ul {float:right; overflow:hidden; min-height:23px;} #footer .share ul li {margin:0 5px;} #footer .share .letterArea {float:none; padding:25px 2.25% 10px; border-top:1px solid #dddddd; color:#222; background:#f5f5f5;} #footer .share .letterArea .title {float:none; margin-left:5px; line-height:1.2; font-size:12px; font-weight:normal; color:#666666;} #footer .share .letterArea .form {float:none; margin-top:10px; padding-right:40px;} #footer .share .letterArea .form .input-text {width:100%; height:28px; vertical-align:top; border:1px solid #dddddd; background:#f5f5f5;} #footer .share .letterArea .form label.error {max-width:inherit;} #footer .share .letterArea .form .btnSend {position:absolute; right:0; top:0;} #footer .share .pollow {font-size:11px;color:#aaa;} #footer .footerLanguageSel {position:absolute; left:0; bottom:90px; bottom:0; width:100%; padding-top:19px; background:url(../images/layout/BG_footerLanguageSelShadow.png) repeat-x left top; z-index:50;} #footer .footerLanguageSel .footerLanguageClose {} #footer .footerLanguageSel .footerLanguageClose a {display:block; padding:19px 0; text-align:center; border-bottom:1px solid #d8d9dd; background:#f5f5f5;} #footer .footerLanguageSel .footerLanguageCont {padding:16px 2.25% 25px; background:#ffffff;} #footer .footerLanguageSel .footerLanguageCont .nation {margin-left:5px; font-size:15px; font-weight:bold; color:#222222;} #footer .footerLanguageSel .footerLanguageCont .countrySel {margin-top:25px; border-bottom:1px solid #dddddd;} #footer .footerLanguageSel .footerLanguageCont .countrySel .t {font-weight:bold; color:#222222;} #footer .footerLanguageSel .footerLanguageCont .countrySel .select {width:100%; height:44px; font-size:15px; font-weight:bold; color:#999999; border:none;} #footer .footerLanguageSel .footerLanguageCont .languageSel {margin-top:18px; border-bottom:1px solid #dddddd;} #footer .footerLanguageSel .footerLanguageCont .languageSel .t {font-weight:bold; color:#222222;} #footer .footerLanguageSel .footerLanguageCont .languageSel .select {width:100%; height:44px; font-size:15px; font-weight:bold; color:#999999; border:none;} #footer .footerLanguageSel .footerLanguageCont .languageSave {margin-top:15px;} #footer .footerLanguageSel .footerLanguageCont .languageSave a {display:block; padding:13px 0; text-align:center; font-size:14px; font-weight:bold; color:#ffffff; background:#222222;} #footer .footerLanguageSel .footerLanguageCont .msg {margin-top:13px; font-size:13px; color:#666666;} #footer .footerContWrap {border:none; padding:0 2.25%; background:#f5f5f5;} #footer .footerContWrap .footerCont {padding-bottom:25px;} #footer .footerContWrap .footerCont .footerLogo {display:none;} #footer .footerContWrap .footerCont .contact {float:none; padding:0; text-align:center;} #footer .footerContWrap .footerCont .contact .mail {padding:15px 0; font-size:11px; font-weight:bold; color:#666666;} #footer .footerContWrap .footerCont .contact .mail a {margin-right:7px; padding-right:9px;}#footer .footerMenuWrap .footerMenu.ph .footerMenu2 {width:auto;} #footer .footerContWrap .footerCont .contact .copyright {margin-top:0; padding:15px 15px 5px; border-top:1px solid #dddddd;float:none;} #footer .footerContWrap .footerCont .contact .footerRight{text-align:center;} #footer .footerMenuWrap .footerMenu {padding:5px 2.25% 20px;} #footer .footerMenuWrap .footerMenu1 {float:none;width:100%;} #footer .footerMenuWrap .footerMenu2 {float:none;width:100%; max-width:none; margin-top:0} #footer .footerMenuWrap .footerMenu.ph .footerMenu2 {width:auto;} #footer .footerMenuWrap .footerMenu ul li {margin-top:15px;} #footer .footerMenuWrap .footerMenu ul li a {font-weight:normal;} #footer .footerMenuWrap .footerMenu ul li.menu1, #footer .footerMenuWrap .footerMenu ul li.menu3, #footer .footerMenuWrap .footerMenu ul li.menu5, #footer .footerMenuWrap .footerMenu ul li.menu7 {width:50% !important; padding-left:0 !important;} #footer .footerMenuWrap .footerMenu ul li.menu2, #footer .footerMenuWrap .footerMenu ul li.menu4, #footer .footerMenuWrap .footerMenu ul li.menu6, #footer .footerMenuWrap .footerMenu ul li.menu8 {width:50% !important; padding-left:0;} #footer .footerMenuWrap .footerMenu ul li ul {display:none;} #footer .footerMenuWrap .footerMenu.ph ul li.menu3 {float:left;} body.language_L012 #footer .footerContWrap .footerCont .contact .footerRight{max-width:345px; margin:0 auto; margin-top:5px} body.language_L012 #footer .footerContWrap .footerCont .contact .footerRight a{margin-bottom:3px} #footer .footerContWrap .footerCont .contact .footerRight .return{margin-left:6px; padding-left:10px; display:inline-block; background:none; margin-left:0; padding-left:0} #footer .footerContWrap .footerCont .contact .from .footLogo{margin-bottom:20px} #footer .footerContWrap .footerCont .contact .from .footLogo img{width:116px} /*20200211 vn 마크 추가*/ #footer .footerContWrap .footerCont .contact .from .footLogo img.vnMark{display:block;width:116px;position:static;margin:20px auto;} } /* ========== [사이드메뉴] ========== */ .sidemenu {position:fixed; right:0; top:0; z-index:1500; display:none; width:100%; height:100%; background:rgba(0,0,0,.8); -webkit-transition:all .2s ease; -moz-transition:all .2s ease; -ms-transition:all .2s ease; -o-transition:all .2s ease; transition:all .2s ease;} .sidemenu .layer {margin-left:44px; position:relative; height:100%; -webkit-transition:all .2s ease; -moz-transition:all .2s ease; -ms-transition:all .2s ease; -o-transition:all .2s ease; transition:all .2s ease; right:-100%;} .sidemenu .layer.open {right:0;} .sidemenu .scroll {background:#fff; height:100%; position:relative; overflow:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch;} .sidemenuClose {position:absolute; background:url('../images/common/sideMenuClose.png') left top no-repeat; background-size:20px auto; border:0 none; width:20px; height:20px; left:-32px; top:20px;} .sidemenu .head, .sidemenu .foot {color:#222; background-color:#f5f5f5;} .sidemenu .foot {padding-bottom:6em; text-align:center;} /* 유저정보 */ .sidemenu .greet {padding:20px; color:white; background:#024137;} .sidemenu .greet .action, .sidemenu .greet .prompt {display:inline-block; vertical-align:middle;} .sidemenu .greet .action .btn {padding:.68em 1.8em; border-width:2px; font-size:15px;border:1px solid #fff;} .sidemenu .greet .prompt {margin-left:.65em; font-size:14px; font-weight:bold; text-transform:capitalize;} .sidemenu .userStat {padding:30px 20px 0; text-align:center;} .sidemenu .userStatRow {line-height:1.4em;} .sidemenu .barCode {padding:0 0 30px;} .sidemenu .barCodeImg {max-width:80%; margin:0 auto;} .sidemenu .barCodeNum {margin-top: 7px; text-align: center; font-size: 12px;font-weight:bold;color:#222;} .sidemenu .power {font-size:16px; font-weight:bold;} .sidemenu .powerDef {float:left; width:50%; box-sizing:border-box;} .sidemenu .powerDef dd {margin-top:.7em;} .sidemenu .power .level .value {padding:.45em 1.1em; color:white; background-color:#024137; border-radius:.2em; font-size:.92em;} .sidemenu .power .points {border-left:1px solid #ddd;} .sidemenu .power .points .value {color:#024137;} .sidemenu .mypage {padding:20px 0;} .sidemenu .mypageLink {display:block; padding: .65em 1em; color:#222; background-color:white; border:1px solid #ccc; font-size:16px; font-weight:bold;} .sidemenu .mypageLink:hover {color:white; background-color:#222; border-color:#222;} /* 20181101 NEW logo 교체 */ .sidemenu .layer2018 .greet, .sidemenu .layer2018 .power .level .value {background-color:#024137;} .sidemenu .layer2018 .power .points .value {color:#024137} .layer2018 .cNavMenu li .deco {border:1px solid #024137;color:#024137} .layer2018 .cNavHigher .topmost {color:#024137} /*2018-09-06 필리핀 css 모바일메뉴 초록색부분*/ .sidemenu .ph .greet .prompt{text-transform: none;} /* 컨텐츠 탐색 */ .sidemenu .cNav{min-height:333px;} .cNavMenu {color:#222; line-height:1.2em; font-size:17px; font-weight:bold;} .cNavMenu li {border:solid #e5e5e5; border-width:0 0 1px;} .cNavMenu li:first-child {border-top-width:1px;} .cNavMenu li .deco{font-size:13px;display:inline-block;width:41px;border:1px solid #024137;text-align:center;border-radius:10px;color:#024137;} .cNavMenu li a {position:relative; display:block; padding:.9em 0; margin:0 20px; color:inherit;} .cNavMenu li a.hasSubmenu:after {content:''; position:absolute; top:50%; right:0; display:inline-block; width:16px; height:16px; margin-top:-8px; background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgdmlld0JveD0iMCAwIDI1IDI1Ij4gIDxwYXRoIGZpbGw9IiNBQUFBQUEiIGQ9Ik0xMSAwaDN2MjVoLTNWMHoiLz4gIDxwYXRoIGZpbGw9IiNBQUFBQUEiIGQ9Ik0wIDExaDI1djNIMHYtM3oiLz48L3N2Zz4=) no-repeat; background-size:100% 100%;} .cNavSubmenu {display:none;} .cNavSubmenu li a {margin-left:35px;} .cNavHigher {border-top:1px solid #e5e5e5;} .cNavHigher .depth {display:block; padding:.9em 20px;} .cNavHigher .topmost {color:#024137;} .cNavHigher .topmost:before {content:'<'; margin-right:.7em;} .cNavHigher .higher {color:#aaa; background-color:white;} .cNavHigher .current {color:white; background-color:#474847;} /* 언어선택 */ .sidemenu .langSelect {position:relative; padding:12px 20px; border-bottom:1px solid #e5e5e5; font-size:15px;} .sidemenu .langSelect .label {margin-right:1.25em;} .sidemenu .langSelect .selected {color:inherit;} .sidemenu .langSelect .selected .flag {margin-right:.2em;} .sidemenu .langSelect .selected .lang {font-weight:bold;} .sidemenu .langSelect .selected:after {content:''; display:inline-block; width:0; height:0; margin-left:.25em;vertical-align:middle; border-style:solid; border-width:9px 7px 0 7px; border-color:#666 transparent transparent transparent;} .sidemenu .langSelect .form {position:absolute; bottom:0; left:0; display:none; width:100%;} .sidemenu .langSelect .form:before {content:''; display:block; width:100%; padding-top:19px; background: transparent url('../images/layout/BG_footerLanguageSelShadow.png') repeat-x left top; font-size:20px;} .sidemenu .langSelect .formCon {padding-bottom:36px; color:#222; background-color: white; text-align:left;} .sidemenu .langSelect .form .close {display:block; width:100%; height:48px; margin-bottom:20px; background:#f5f5f5 url('../images/layout/btn_footerLanguageClose.png') no-repeat center; border-bottom:1px solid #d8d9dd; } .sidemenu .langSelect .form .row {margin-bottom:22px; padding:0 20px; } .sidemenu .langSelect .form .selection {padding-left:.25em; font-weight:bold;} .sidemenu .langSelect .form .select {width:100%; height:3em; padding:0 .2em; font-size:inherit; font-weight:bold; color:#999; border:solid #ddd; border-width:0 0 1px;} .sidemenu .langSelect .form .selectLabel {display:block; font-size:.8em; font-weight:bold;} .sidemenu .langSelect .form .submit {display:block; padding:.85em 1em; text-align:center; font-size:.8em; font-weight:bold;} .sidemenu .langSelect .form .note {padding:0 20px; color:#666; font-size:.75em;} /* 약관, 저작권표기 */ .sidemenu .helpLinks {margin-top:22px; font-size:14px;} .sidemenu .helpLinks .terms {display:table; margin:0 auto;} .sidemenu .helpLinks .terms li {position:relative; display:inline-block; float:left; padding:0 1em;} .sidemenu .helpLinks .terms li:not(:last-child):after {content:''; position:absolute; top:.1em; bottom:.1em; right:0; display:inline-block; border-right:1px solid #e5e5e5;} .sidemenu .helpLinks .terms a {color:#666;} .sidemenu .helpLinks .copyright {margin-top:1em; color:#7c7c7c;} @media (min-width:740px) { .sidemenu .layer {margin-left:40%;} } @media (max-width:480px) { .sidemenu .cNav{min-height:337px;} .sidemenu .greet {padding-top:15px; padding-bottom:15px;} .sidemenu .greet .action .btn {border-width:1px; font-size:11px;} .sidemenu .greet .prompt {font-size:12px;} .sidemenu .userStat {padding-top:22px;} .sidemenu .barCode {padding:0 0 22px;} .sidemenu .power {font-size:12px;} .sidemenu .mypage {padding:15px 0;} .sidemenu .mypageLink {font-size:12px;} .sidemenu .langSelect {font-size:13px;} .sidemenu .langSelect .form {font-size:15px;} .sidemenu .helpLinks {font-size:12px;} .cNavMenu {font-size:15px;} } /* 20190103 - Vip Kit 버튼 */ #header .headerMenu .vipKitBtn {display:inline-block;float:left;height:20px;line-height:20px;padding:0 8px 0 25px;margin-right:20px;border:1px solid #024137;font-size:14px;font-weight:bold;color:#024137; background:#fff url('../images/layout/icon_vipKitBtn.png') no-repeat 9px center / 11px 11px; -webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px; } .sidemenu .vipKitBtn {padding:20px;} .sidemenu .vipKitBtn a {display:block;padding:20px 0;text-align:center;font-size:17px;font-weight:bold;color:#222;background-color:#ddd;} .sidemenu .vipKitBtn a span {display:inline-block;height:40px;padding-left:50px;margin-left:-25px;line-height:40px;background:url('../images/layout/btn_sidemenu_vipkit.png') no-repeat 0 0;background-size:40px 40px;} @media screen and (max-width: 1024px){ #header .headerMenu .searchMenu {margin-right:0;} #header .headerMenu .vipKitBtn {font-size:11px;} } @media screen and (max-width: 768px){ #header .headerMenu .vipKitBtn {display:none;} } @media screen and (max-width: 480px){ .sidemenu .vipKitBtn {padding-top:15px;padding-bottom:15px;} .sidemenu .vipKitBtn a {font-size:15px;} .sidemenu .vipKitBtn a span {height:30px;padding-left:40px;margin-left:-20px;line-height:30px;background-size:30px 30px;} } /* ========== [메인페이지] ========== */ /* ? */ #wrap.mainVisualOver {height:auto !important;} #wrap.mainVisualOver .mainVisual {} #wrap.mainVisualOver #mainScrollArea {position:relative;} #wrap #mainScrollArea {position:fixed; left:0; top:0; width:100%;} /* 메인 비주얼 */ .mainVisualWrap {overflow:hidden; position:absolute; left:0; top:0; width:100%; height:100%; background:#ffffff; z-index:100;} .mainVisual {position:relative; width:100%; height:100%;} .mainVisual ul {position:relative; overflow:hidden; width:100%; height:100%;} .mainVisual ul li {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; filter:alpha(opacity=0);} .mainVisual ul li .bg {position:absolute; top:0; right:0; bottom:0; left:0; background-repeat:no-repeat; background-position:center center; background-size:cover;} .mainVisual ul li .img {max-height:100%;} .mainVisual ul li .img img {position:relative; left:50%; max-width:none; height:100%;} .mainVisual ul li .cont {position:absolute; left:0; bottom:9%; width:100%; text-align:center; z-index:5;} .mainVisual ul li .cont .txt {margin:0 2%;} .mainVisual ul li .cont .txt .title {line-height:1; font-size:50px; font-weight:bold; color:#ffffff;} .mainVisual ul li .cont .txt .desc {display:inline-block; min-width:213px; margin-top:22px; padding:12px 20px 0; font-size:18px; font-weight:bold; color:#ffffff; border-top:1px solid #ffffff;} .mainVisual ul li .cont .btn {margin-top:27px;} .mainVisual ul li .cont .btn a {display:inline-block; overflow:hidden; position:relative; min-width:104px; padding:0 10px; line-height:38px; font-size:14px; font-weight:bold; color:#ffffff; border:1px solid #ffffff; -webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s} .mainVisual ul li .cont .btn a span {display:block; position:relative;} .mainVisual ul li .cont .btn a .cover {position:absolute; left:0; top:100%; width:100%; height:100%;} .mainVisual ul li .cont.txtColorType1 .btn a {color:#ffffff;} .mainVisual ul li .cont.txtColorType1 .btn a .cover {background:#ffffff} .mainVisual ul li .cont.txtColorType1 .btn a:hover {color:#222222;} .mainVisual ul li .cont.txtColorType2 .btn a {color:#222222; border:1px solid #222222;} .mainVisual ul li .cont.txtColorType2 .btn a .cover {background:#222222} .mainVisual ul li .cont.txtColorType2 .btn a:hover {color:#ffffff;} .mainVisual ul li .cont.txtColorType2 .txt .desc {border-color:#222222;} .mainVisual .slick-list, .mainVisual .slick-track {height:100%;} /* .mainVisual.wideVisual {} .mainVisual.wideVisual ul li .img {} .mainVisual.wideVisual ul li .img img {left:0; top:50%; width:100%; height:auto; max-height:none;} */ .mainVisualNavi {position:absolute; left:0; top:50%; width:100%; z-index:6;} .mainVisualNavi .btnArea {position:relative; max-width:1200px; margin:0 auto;} .mainVisualNavi .btnArea .btnPrev {position:absolute; left:0; top:0;} .mainVisualNavi .btnArea .btnNext {position:absolute; right:0; top:0;} /* #flicking.mainVisual ul li {float:left; position:relative; opacity:1; filter:alpha(opacity=100);} #flicking.mainVisual ul li .img img {left:0; margin-left:0 !important; opacity:0 !important;} #flicking.mainVisual ul li .cont {bottom:7%; transform:scale(0.67); -webkit-transform:scale(0.67); -ms-transform:scale(0.67); -o-transform:scale(0.67); -moz-transform:scale(0.67); transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -ms-transform-origin:50% 100%; -o-transform-origin:50% 100%; -moz-transform-origin:50% 100%; } #flicking.mainVisual ul li .cont .txt {margin:0 -20%;} .language_L012 #flicking.mainVisual ul li .cont {bottom:7%; transform:scale(0.58); -webkit-transform:scale(0.58); -ms-transform:scale(0.58); -o-transform:scale(0.58); -moz-transform:scale(0.58);} .language_L012 #flicking.mainVisual ul li .cont .txt {margin:0 -28%;} */ @media screen and (max-width:1260px){ .mainVisualNavi .btnArea {margin:0 2%;} } @media screen and (max-width: 768px){ #wrap #mainScrollArea {position:static !important;} .mainVisualWrap {position:relative;} .mainVisualWrap:before {content:''; display:block; padding-bottom:122.65625%;}/* 640x785 */ .mainVisual{position:absolute; top:0; left:0;} .mainVisual ul li {} .mainVisual ul li .img {} .mainVisual ul li .cont {bottom: 11%;} .mainVisual ul li .cont .txt .title {font-size:40px;} .mainVisual ul li .cont .txt .desc {padding-top:0; border-top:0 none; font-size:16px;}/* [180404] 구분선 삭제 */ .mainVisual ul li .cont .btn {margin-top:20px;} .mainVisual ul li .cont .btn a {line-height:34px; border-radius:2px;} .mainVisualNavi {top:52%;} .mainVisualNavi .btnArea {display:none;} .mainVisualPages {position:absolute; bottom:3%; left:0; display:block; width:100%; z-index:6; text-align:center;} .mainVisualPages .slick-dots {display:table; margin:0 auto; font-size:0; line-height:0;} .mainVisualPages .slick-dots li {display:inline-block;} .mainVisualPages .slick-dots button {display:inline-block; width:10px; height:10px; margin:0 4px; overflow:hidden; background:rgba(255,255,255,.6); border:0 none; border-radius:100%; text-indent:-200%; -webkit-appearance:none; -moz-appearance:none; appearance:none;} .mainVisualPages .slick-dots .slick-active button {background-color:white;} } @media screen and (max-width: 640px){ .mainVisual ul li .bg {top:-10vw; right:-10vw; left:-10vw;} .mainVisual ul li .cont .txt .title {font-size:26px;} .mainVisual ul li .cont .txt .title font {font-size: 15px !important;letter-spacing: -0.5px;} .mainVisual ul li .cont .txt .desc {font-size:12px; padding: 2% 0 0; margin-top: 2%;} .mainVisualNavi {top:48%;} .mainVisualNavi .btnArea .btnPrev {width:16px;} .mainVisualNavi .btnArea .btnNext {width:16px;} } /* 베스트 */ /* .mainBest {overflow:hidden; position:relative; max-width:1200px; margin:0 auto; padding-top:60px;} .mainBest .more {position:absolute; right:0; top:35px;} .mainBest .more a {text-decoration:underline; font-size:12px; font-weight:bold; color:#666666;} .mainBest .listWrap {position:relative;} .mainBest .listWrap .btnPrev {display:none; position:absolute; left:0; top:40%; margin-top:-20px; z-index:5;} .mainBest .listWrap .btnNext {display:none; position:absolute; right:0; top:40%; margin-top:-20px; z-index:5;} .mainBest .listWrap .btnPrev:hover {background:#f5f5f5;} .mainBest .listWrap .btnNext:hover {background:#f5f5f5;} .mainBest .listWrap .list {} .mainBest .listWrap .list:after {content:''; display:block; clear:both;} .mainBest .listWrap .list ul {float:left; position:relative;} .pcWrap .mainBest .listWrap .list {width:auto !important;} .pcWrap .mainBest .listWrap .list ul {width:auto !important; left:0 !important; transform:translate(0px, 0px) translateZ(0px) !important;} .pcWrap .mainBest .listWrap .list ul:nth-of-type(3) {display:none;} .pcWrap .mainBest .listWrap .list ul:nth-of-type(4) {display:none;} .mainBest .listWrap .list ul li {float:left; position:relative; width:272px; margin-right:36px;} .mainBest .listWrap .list ul li.last-child {margin-right:0;} .mainBest .listWrap .list ul li a {display:block; position:relative;} .mainBest .listWrap .list ul li .no {position:absolute; left:0; top:0; width:70px;} .mainBest .listWrap .list ul li .thumb {display:block; text-align:center;} .mainBest .listWrap .list ul li .name {display:block; margin-top:10px; text-align:center; line-height:1.4; font-size:13px; color:#222222;} .mainBest .listWrap .list ul li .point {display:block; margin-top:5px; text-align:center; font-size:12px; font-weight:bold; color:#666666;} .mainBest .listWrap .list ul li .point img {height:15px;} .mainBest .listWrap .list ul li .price {display:block; margin-top:8px; text-align:center; font-size:12px; font-weight:bold; color:#222222;} .mainBest .listWrap .list ul li .desc {margin-top:3px; text-align:center; line-height:1.4; font-size:13px; color:#666666} .mainBest .listWrap .list ul li .desc img {position:relative; top:-1px;} .mainBest .listWrap .list ul li .desc span {display:inline-block; padding-left:20px; background:url(../images/main/BG_mainPdtDesc.gif) no-repeat left 2px;} @media screen and (max-width: 1220px){ .mainBest .more {position:absolute; right:2%;} .mainBest .listWrap .list {} .mainBest .listWrap .list ul {width:50%;} .pcWrap .mainBest .listWrap .list ul {width:50% !important;} .mainBest .listWrap .list ul li {width:50%; margin-right:0;} .mainBest .listWrap .list ul li a {margin:0 4.5%;} } @media screen and (max-width: 768px){ .mainBest {margin-top:5%; padding-top:0;} .mainBest .more {display:none;} .mainBest .listWrap {} .mainBest .listWrap .btnPrev {display:block;} .mainBest .listWrap .btnNext {display:block;} .mainBest .listWrap .list {position:relative;} .mainBest .listWrap .list ul {width:100%;} .mainBest .listWrap .list ul li {width:50%;} .mainBest .listWrap .list ul li .no {width:20%;} .mainBest .listWrap .list ul li:nth-of-type(1) {display:block;} .mainBest .listWrap .list ul li:nth-of-type(2) {display:block;} .mainBest .listWrap .list ul.ul2 {position:absolute; left:100%; top:0; width:100%;} #flicking2 .list ul {position:relative !important;} } */ /* 영상,이벤트 */ /* .mainEvent {overflow:hidden; max-width:1200px; margin:35px auto 0;} .mainEvent .eventL {float:left;} .mainEvent .eventR {float:right;} .mainEvent .eventUnit {position:relative; width:48.5%;} .mainEvent .eventUnit ul {overflow:hidden; position:relative;} .mainEvent .eventUnit ul li {position:absolute; left:0; top:0; width:100%; opacity:0; filter:alpha(opacity=0);} .mainEvent .eventUnit ul li.on {position:relative; z-index:3;} .mainEvent .eventUnit ul li .thumb {position:relative; padding-top:54.4%;} .mainEvent .eventUnit ul li .thumb img {position:absolute; left:0; top:0; width:100%; height:100%;} .mainEvent .eventUnit ul li .thumb iframe {position:absolute; left:0; top:0; width:100%; height:100%;} .mainEvent .eventUnit ul li .title {position:absolute; left:6%; top:9%; font-size:14px; color:#ffffff;} .mainEvent .eventUnit ul li .txt {position:absolute; left:6%; bottom:15%; font-size:13px; color:#ffffff;} .mainEvent .eventUnit ul li .txt .p {font-size:13px; color:#ffffff;} .mainEvent .eventUnit ul li .txt .p2 {margin-top:5px;} .mainEvent .eventUnit .navi {position:absolute; left:0; bottom:7%; width:100%; text-align:center; line-height:0; font-size:0; z-index:4;} .mainEvent .eventUnit .navi a {display:inline-block; overflow:hidden; width:14px; height:14px; margin:0 4px; vertical-align:middle; border-radius:50%; background:#cececf;} .mainEvent .eventUnit .navi a.on {background:#235e39;} .mainEvent .eventUnit .navi a span {line-height:0; font-size:0; opacity:0;} @media screen and (max-width: 768px){ .mainEvent .eventUnit {float:none; width:auto; margin:2.25%;} } @media screen and (max-width: 640px){ .mainEvent .eventUnit .navi a {width:10px; height:10px;} } */ /* JEJU BENEFIT */ .mainJeju {position:relative; height:450px; background-attachment:fixed; background-repeat:no-repeat; background-position:center center; background-size:cover;} .mainJeju .cont {position:absolute; left:0; top:50%; width:100%; margin-top:-60px; text-align:center;} .mainJeju .cont .txt {line-height:1.4; font-size:18px; color:#fffefe;} .mainJeju .cont .txt strong {font-size:26px;} .mainJeju .cont .txt a {color:#fffefe;} .mainJeju .cont .more {margin-top:30px;} .mainJeju .cont .more a {display:inline-block; padding:0 20px; line-height:28px; font-size:11px; font-weight:bold; color:#ffffff; border:1px solid #ffffff;} .mainJeju .cont .more a:hover {color:#222222; background:#ffffff;} .mainJeju .mLink {display:none; position:absolute; left:0; top:0; width:100%; height:100%;} .mainJeju .mLink span {opacity:0; filter:alpha(opacity=0); line-height:0; font-size:0;} /*Edge*/ @supports (-ms-accelerator:true){ .mainJeju {background-attachment:inherit;} } /*Ie 10/11*/ @media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){ .mainJeju {background-attachment:inherit;} } /*Ie 9/10*/ @media screen and (min-width:0\0){ .mainJeju {background-attachment:inherit;} } @media screen and (max-width: 768px){ .mainJeju {height:auto; margin-top:0; padding-top:0; background-attachment:inherit; background-size:150% auto;} .mainJeju .cont {margin-top:-20px;} .mainJeju .cont .txt {font-size:12px;} .mainJeju .cont .txt strong {font-size:18px;} .mainJeju .cont .more {display:none;} .mainJeju .mLink {display:block;} } /* ========== [서브레이아웃] ========== */ /* content */ #content {} #content .contentCenter {max-width:1200px; margin:0 auto;} #content .location {margin-top:13px;} #content .location span {display:inline-block; margin-right:2px; padding-right:14px; vertical-align:middle; font-size:12px; color:#999999; background:url(../images/common/arrLocation.gif) no-repeat right center;} #content .location strong {display:inline-block; vertical-align:middle; font-size:12px; font-weight:normal; color:#222222;} #content .location strong em {color:#024137;} @media screen and (max-width: 1230px){ #content .contentCenter {padding:0 15px;} } @media screen and (max-width: 768px){ #content .location {display:none;} } @media screen and (max-width: 640px){ #content {} #content .contentCenter {padding:0 2.25%;} } /* ========== [서브공통스타일] ========== */ /* 페이징 */ .paging {margin-top:20px; text-align:center;} .paging a {display:inline-block; width:30px; height:30px; vertical-align:top; text-align:center; line-height:30px; font-size:14px; color:#666666;} .paging a:hover {background:#f5f5f5;} .paging a img {vertical-align:top;} .paging a.current {color:#ffffff; background:url(../images/common/paging_current.gif) no-repeat left top;} .paging a.pagingFirst {} .paging a.pagingLast {} .paging a.pagingPrev {} .paging a.pagingNext {} .paging .webPaging {} .paging .mPaging {display:none;} .paging .mPaging .paingNum {display:inline-block; margin:0 30px; vertical-align:top; line-height:30px; font-size:15px; font-weight:bold; color:#999999;} .paging .mPaging .paingNum .now {color:#222222;} @media screen and (max-width: 768px){ .paging .webPaging {display:none;} .paging .mPaging {display:block;} } /* 페이징 - 이전글,다음글 */ .paging_prevNext {margin-top:60px;} .paging_prevNext ul {border-top:1px solid #e5e5e5;} .paging_prevNext ul li {overflow:hidden; border-bottom:1px solid #e5e5e5;} .paging_prevNext ul li .dt {float:left; width:115px; padding:16px 0; text-align:center; line-height:1.4; font-size:13px; font-weight:bold; color:#222222;} .paging_prevNext ul li .dt span {display:inline-block; padding-left:22px;} .paging_prevNext ul li .dd {overflow:hidden; position:relative; padding-right:115px;} .paging_prevNext ul li .link {padding:16px 0 16px 5%; line-height:1.4; font-size:13px; color:#666666;} .paging_prevNext ul li .link span {display:block; overflow:hidden; width:100%; text-overflow:ellipsis; color:#666666; white-space:nowrap;} .paging_prevNext ul li .link a {color:#666666;} .paging_prevNext ul li .date {position:absolute; right:0; top:50%; width:115px; margin-top:-9px; text-align:center; line-height:1.4; font-size:13px; color:#999999;} .paging_prevNext ul li.prev .dt span {background:url(../images/common/arrUp_7x4_666666.gif) no-repeat left 7px;} .paging_prevNext ul li.next .dt span {background:url(../images/common/arrDown_7x4_666666.gif) no-repeat left 7px;} /* 타이틀,탭메뉴 */ .pageTitle {} .pageTitle h2 {padding:54px 0 52px; text-align:center; font-size:32px; color:#222222;} .pageTitle .tabType {} .pageTitle .tabType ul {text-align:center;} .pageTitle .tabType ul li {display:inline-block; vertical-align:top;} .pageTitle .tabType ul li a {display:inline-block; margin:0 13px; padding:0 5px 11px; font-size:16px; font-weight:bold; color:#666666;} .pageTitle .tabType ul li br {display:none;} .pageTitle .tabType ul li.on a {color:#222222; border-bottom:2px solid #222222;} .pageTitle .tabType2 {} .pageTitle .tabType2 ul {} .pageTitle .tabType2 ul:after {content:''; display:block; clear:both;} .pageTitle .tabType2 ul li {display:block; float:left; width:50%;} .pageTitle .tabType2 ul li a {} .pageTitle .tabType2 ul li.tabLeft {text-align:right;} .pageTitle .tabType2 ul li.tabRight {text-align:left;} @media screen and (max-width: 768px){ .pageTitle {padding-top:0;} #wrap.app_mode .pageTitle {padding-top:0 !important;} .pageTitle h2 {padding:26px 0; font-size:20px;} .pageTitle .tabType {border-top:1px solid #dddddd; border-bottom:1px solid #dddddd;} .pageTitle .tabType.vnMD ul li{display:block;} .pageTitle .tabType ul li {margin-bottom:-1px;} .pageTitle .tabType ul li a {padding:19px 0 17px; font-size:13px; margin:0 4px;} .pageTitle .tabType ul li.on a {} .pageTitle .tabType2 ul li {text-align:center !important;} .pageTitle .tabType2 ul li a {margin:0;} .pageTitle .scrollTab {border-top:1px solid #dddddd; border-bottom:1px solid #dddddd;} .pageTitle .scrollTab .tabType {margin:0 auto; border:none;} #mypageEditScrollTab .tabType {width:570px;} } @media screen and (max-width: 440px){ .pageTitle .tabType ul li br {display:block;} } /* 게시판 - 리스트(공지사항) */ .listType1 {padding-top:40px;} .listType1 .total {margin-bottom:17px; font-size:13px; color:#222222;} .listType1 .caption {margin:0 0 17px 25px; font-size:13px; font-weight:bold; color:#222222;} .listType1 .tblAreaTop {position:relative; margin:0 10px 6px 0; zoom:1;} .listType1 .tblAreaTop:after {content:''; display:block; clear:both;} .listType1 .tblAreaTop .total {float:left; margin-bottom:0; line-height:28px;} .listType1 .tblAreaTop .tblMoreArea {float:right;} .listType1 .tblAreaTop .tblMoreArea .btnReceipt {display:inline-block; padding:0 15px; vertical-align:middle; line-height:28px; font-size:13px; color:#666666; border:1px solid #dddddd; background:#f5f5f5;} .listType1 .tblAreaTop .tblMoreArea .btnMore {display:inline-block; margin-left:15px; padding-right:10px; vertical-align:middle; text-decoration:underline; line-height:28px; font-size:12px; color:#222222; background:url(../images/common/arrRight_4x5_222222.gif) no-repeat right center;} .listType1 .tblAreaTop .tblMoreArea .receiptHelpWrap {display:inline-block; vertical-align:middle;} .listType1 .tblAreaTop .tblMoreArea #receiptHelp {display:none; position:absolute; right:0; bottom:-7px; padding:18px 20px; font-size:13px; color:#666666; border:1px solid #adadad; box-shadow:3px 3px 10px #d1d1d1; background:#ffffff;} .listType1 table {border-top:1px solid #aaaaaa;} .listType1 table th {padding:11px 0 13px; border-bottom:1px solid #e5e5e5;} .listType1 table .th {line-height:1.4; font-size:13px; color:#222222;} .listType1 table .th.category {padding-left:20px; text-align:left;} .listType1 table .th.al_l {padding-left:40px; text-align:left;} .listType1 table td {padding:16px 0 15px; border-bottom:1px solid #e5e5e5;} .listType1 table .td {text-align:center; line-height:1.8; font-size:14px; color:#666666;} .listType1 table .td.category {padding-left:20px; text-align:left;} .listType1 table .td.title {padding-left:10px; text-align:left;} .listType1 table .td.title a {color:#222222;} .listType1 table .td.al_l {padding-left:40px; text-align:left;} .listType1 .cautionMsg {margin:0; padding:60px 0; border:none;} /* 게시판 - 리스트(마이페이지 - 구매내역) */ .listType1 table tr td .btn_viewDetail {color:#222222;} .listType1 table tr td .purchaseStore {display:none; margin-top:7px; font-size:13px; color:#999999;} .listType1 table tr td .icon_viewDetail {display:inline-block; width:19px; height:11px; padding:5px; background:url(../images/mypage/BG_purchaseOpen.gif) no-repeat center center;} .listType1 table tr td .icon_viewDetail span {line-height:0; font-size:0; opacity:0;} .listType1 table tr.open td.date {border-bottom:none;} .listType1 table tr.open td .purchaseStore {display:block;} .listType1 table tr.open td .icon_viewDetail {background:url(../images/mypage/BG_purchaseClose.gif) no-repeat center center;} .listType1 table tr.purchaseDetail {display:none;} .listType1 table tr.purchaseDetail td {} .listType1 table tr.purchaseDetail td.detailContWrap {padding:0 0 15px;} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont {} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont ul {} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont ul li {overflow:hidden; position:relative; margin-top:16px; padding-right:170px; font-size:14px; color:#666666;} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont ul li .what {float:left; max-width:480px; padding-left:40px;} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont ul li .quantity {float:right; width:120px; text-align:center;} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont ul li .price {position:absolute; right:0; top:0; width:130px;} .listType1 table tr.purchaseTotal {display:none;} .listType1 table tr.purchaseTotal td {border-bottom:1px solid #222222; background:#f5f5f5;} .listType1 table tr.purchaseTotal td.detailContWrap {padding:0 0 15px;} .listType1 table tr.purchaseTotal td.detailContWrap .detailCont {} .listType1 table tr.purchaseTotal td.detailContWrap .detailCont ul {} .listType1 table tr.purchaseTotal td.detailContWrap .detailCont ul li {overflow:hidden; position:relative; margin-top:16px; padding-right:170px; font-size:14px; color:#222222;} .listType1 table tr.purchaseTotal td.detailContWrap .detailCont ul li .orderTotal {float:right; width:120px; text-align:center;} .listType1 table tr.purchaseTotal td.detailContWrap .detailCont ul li .price {position:absolute; right:0; top:0; width:130px; font-weight:bold;} @media screen and (max-width: 1200px){ .listType1 table .th.al_l {padding-left:30px;} .listType1 table .td.al_l {padding-left:30px;} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont ul li .what {max-width:360px; padding-left:30px;} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont ul li .price {width:140px;} .listType1 table tr.purchaseTotal td.detailContWrap .detailCont ul li .price {width:140px;} } @media screen and (max-width: 1024px){ .listType1 table .th.al_l {padding-left:20px;} .listType1 table .td.al_l {padding-left:20px;} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont ul li .what {max-width:170px; padding-left:20px;} .listType1 table tr.purchaseDetail td.detailContWrap .detailCont ul li .price {width:150px;} .listType1 table tr.purchaseTotal td.detailContWrap .detailCont ul li .price {width:150px;} } /* 게시판모바일 - 리스트(공지사항, 1:1상담) */ .m_listType1 {display:none;} .m_listType1 ul {} .m_listType1 ul li {border-bottom:1px solid #e5e5e5;} .m_listType1 ul li a {display:block; padding:24px 10px 22px; font-size:14px; color:#222222;} .m_listType1 ul li .category {margin-right:5px; font-size:13px; color:#222222;} .m_listType1 ul li .date {display:block; margin-top:17px; font-size:13px; color:#666666;} .m_listType1 ul li .info {display:block; margin-top:17px; color:#222222;} .m_listType1 ul li .info .status {display:inline-block; margin-right:10px; padding-right:11px; vertical-align:middle; font-size:13px; font-weight:bold; background:url(../images/common/bar_1x12_cdd1cf.gif) no-repeat right center;} .m_listType1 ul li .info .date {display:inline-block; margin-top:0; vertical-align:middle; font-weight:bold;} @media screen and (max-width: 768px){ .listType1 {display:none;} .m_listType1 {display:block;} } /* 게시판모바일 - 리스트(마이페이지) */ .m_listType3 {display:none;} .m_listType3 .m_listType3Top {overflow:hidden; padding:0 10px 17px 0;} .m_listType3 .m_listType3Top .caption {float:left; line-height:20px; font-size:15px; font-weight:bold; color:#222222; } .m_listType3 .m_listType3Top .btnMore {float:right; text-decoration:underline; line-height:20px; font-size:12px; font-weight:bold; color:#666666;} .m_listType3 ul {border-top:1px solid #aaaaaa;} .m_listType3 ul li {padding:23px 10px 22px; border-bottom:1px solid #e5e5e5;} .m_listType3 ul li .date {display:inline-block; margin-right:11px; padding-right:15px; vertical-align:middle; font-size:13px; font-weight:bold; color:#666666; border-right:1px solid #e5e5e5;} .m_listType3 ul li .point {display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#222222;} .m_listType3 ul li .cont {display:block; margin-top:18px; font-size:13px; color:#222222;} .m_listType3 ul li .store {display:block; margin-top:12px; font-size:12px; color:#666666;} .m_listType3 ul li .cautionMsg {margin:0; padding:30px 0; border:none;} /* 게시판모바일 - 리스트(마이페이지 - 구매내역) */ .m_listType3 ul li a.btn_viewDetailM {display:block; position:relative; padding-right:35px;} .m_listType3 ul li .purchaseDetail {display:none; margin:18px -10px 0; padding:0 10px; border-top:1px solid #e5e5e5;} .m_listType3 ul li .purchaseDetail .unit {margin-top:17px;} .m_listType3 ul li .purchaseDetail .what {margin-bottom:10px; font-size:13px; color:#666666;} .m_listType3 ul li .purchaseDetail .quantity {display:inline-block; min-width:70px; margin-right:11px; padding-right:15px; vertical-align:middle; font-size:13px; color:#666666; border-right:1px solid #e5e5e5;} .m_listType3 ul li .purchaseDetail .price {display:inline-block; vertical-align:middle; font-size:14px; color:#222222;} .m_listType3 ul li .purchaseTotal {display:none; margin:25px -10px 0; padding:17px 10px 15px; background:#f5f5f5;} .m_listType3 ul li .purchaseTotal .orderTotal {display:inline-block; min-width:71px; margin-right:11px; padding-right:15px; vertical-align:middle; font-size:13px; color:#222222;} .m_listType3 ul li .purchaseTotal .price {display:inline-block; vertical-align:middle; font-size:14px; font-weight:bold; color:#222222;} .m_listType3 ul li .icon_viewDetail {position:absolute; right:8px; top:3px; width:19px; height:11px; background:url(../images/mypage/BG_purchaseOpen.gif) no-repeat center center;} .m_listType3 ul li.open {padding-bottom:0; border-bottom:1px solid #222222;} .m_listType3 ul li.open .purchaseDetail {display:block;} .m_listType3 ul li.open .purchaseTotal {display:block;} .m_listType3 ul li.open .icon_viewDetail {background:url(../images/mypage/BG_purchaseClose.gif) no-repeat center center;} @media screen and (max-width: 768px){ .m_listType3 {display:block;} } /* 에러메시지 */ label.error {display:inline-block; font-size:13px; color:#c50000;} @media screen and (max-width: 768px){ label.error {font-size:12px;} } /* 리스트없음 */ .cautionMsg {margin:40px 0; padding:120px 0 116px; border-top:10px solid #f5f5f5; border-bottom:10px solid #f5f5f5;} .cautionMsg .msg {text-align:center;} .cautionMsg .msg .icon {display:inline-block;} .cautionMsg .msg .p {margin-top:10px; line-height:1.4; font-size:13px; color:#666666;} @media screen and (max-width: 768px){ .cautionMsg {margin:20px 0; padding:60px 0; border-top:5px solid #f5f5f5; border-bottom:5px solid #f5f5f5;} } /* ========== [팝업] ========== */ /* 웰컴배경 */ .modalScreen {display:none; position:fixed; left:0; top:0; width:100%; height:100%; opacity:0.8; filter:alpha(opacity=80); background:#000000; z-index:1000;} /* 웰컴팝업 */ #welcomePopWrap {display:none; position:fixed; left:0; top:184px; width:100%; z-index:1001;} .pcWrap #welcomePopWrap {top:50% !important; margin-top:-276px;} #welcomePopWrap .welcomePop {overflow:hidden; position:relative; max-width:828px; height:552px; margin:0 auto;} #welcomePopWrap .welcomePop .welcomeBG {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/member/BG_welcomePop.jpg) no-repeat center center !important;} #welcomePopWrap .welcomeBody {overflow:hidden; position:relative; padding:95px 8.5% 0;} #welcomePopWrap .welcomeBody .welcomeLogo {float:left; width:43%; padding-top:123px; text-align:center;} #welcomePopWrap .welcomeBody .welcomBox {position:relative; float:right; width:48.6%; background:#ffffff;} #welcomePopWrap .welcomeBody .welcomBox .welcomBox_inner {padding:26px 8.7% 40px;} #welcomePopWrap .welcomeBody .welcomBox .btnClose {position:absolute; right:8.7%; top:30px;} #welcomePopWrap .welcomeBody .welcomBox .nation {min-height:25px; padding-bottom:20px; font-size:20px; font-weight:bold; color:#222222; border-bottom:1px solid #222222;} #welcomePopWrap .welcomeBody .welcomBox .selTitle {margin-top:28px; font-size:13px; font-weight:bold; color:#222222;} #welcomePopWrap .welcomeBody .welcomBox .sel {margin-top:17px;} #welcomePopWrap .welcomeBody .welcomBox .sel .select {width:100%; height:30px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} #welcomePopWrap .welcomeBody .welcomBox .btn {margin-top:30px; text-align:center;} #welcomePopWrap .welcomeBody .welcomBox .btn a {display:inline-block; min-width:130px; padding:13px 10px 12px; text-align:center; font-size:13px; color:#ffffff; background:#222222;} #welcomePopWrap .welcomeBody .welcomBox .msg {display:none; margin-top:26px; text-decoration:underline; line-height:1.4; font-size:13px; color:#222222;} @media screen and (max-width: 768px){ #welcomePopWrap {position:absolute; top:110px;} #welcomePopWrap .welcomePop {height:auto; margin:0 2.25%} #welcomePopWrap .welcomePop .welcomeBG {background:url(../images/member/BG_MwelcomePop.jpg) no-repeat center top / cover !important;} #welcomePopWrap .welcomeBody {padding:0 2.25% 2.25%;} #welcomePopWrap .welcomeBody .welcomeLogo {float:none; width:auto; padding:12% 0;} #welcomePopWrap .welcomeBody .welcomeLogo img {max-width:43%;} #welcomePopWrap .welcomeBody .welcomBox {float:none; width:auto;} #welcomePopWrap .welcomeBody .welcomBox .welcomBox_inner {padding:15px 15px 30px;} #welcomePopWrap .welcomeBody .welcomBox .btnClose {right:0; top:0;} #welcomePopWrap .welcomeBody .welcomBox .btnClose a {display:block; width:15px; padding:15px;} #welcomePopWrap .welcomeBody .welcomBox .nation {min-heigth:15px; padding-bottom:13px; font-size:13px;} #welcomePopWrap .welcomeBody .welcomBox .selTitle {margin-top:18px; font-size:12px; font-weight:normal;} #welcomePopWrap .welcomeBody .welcomBox .sel {margin-top:12px;} #welcomePopWrap .welcomeBody .welcomBox .sel .select {font-size:12px;} #welcomePopWrap .welcomeBody .welcomBox .btn {margin-top:20px;} #welcomePopWrap .welcomeBody .welcomBox .btn a {display:block; padding:13px 10px 12px; font-size:14px; font-weight:bold;} #welcomePopWrap .welcomeBody .welcomBox .msg {margin-top:10px; font-size:12px;} } /* 일반팝업 */ .popWrap {display:none; position:absolute; left:0; top:0; width:100%; z-index:1001;} .popWrap .popBody {max-width:600px; margin:0 auto; background:#ffffff;} .popWrap .popBody .popinner {position:relative; padding:30px 30px 40px; box-shadow:1px 1px 2px rgba(0,0,0,0.1);} .popWrap .popBody .popTitle {padding:0 30px 20px 0; font-size:20px; color:#222222; border-bottom:1px solid #222222;} .popWrap .popBody .popClose {position:absolute; right:30px; top:30px;} .popWirteForm {} .popWirteForm .msg {overflow:hidden; padding-top:16px;} .popWirteForm .msg .please {float:left; line-height:1.4; font-size:13px; color:#c50000;} .popWirteForm .msg .note {float:right; padding-left:10px; line-height:1.4; font-size:13px; color:#222222; background:url(../images/common/bul_required.gif) no-repeat left 6px;} .popWirteForm .formArea {} .popWirteForm .formArea ul {} .popWirteForm .formArea ul li {overflow:hidden; min-height:55px; margin-top:15px;} .popWirteForm .formArea ul li .dt {float:left; width:130px; padding:7px 5px 0 0; font-size:13px; color:#222222;} .popWirteForm .formArea ul li .dt span {display:inline-block; padding-left:10px;} .popWirteForm .formArea ul li .dt .required {background:url(../images/common/bul_required.gif) no-repeat left 5px;} .popWirteForm .formArea ul li .dd {overflow:hidden;} .popWirteForm .formArea ul li .dd .select {display:block; width:100%; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .popWirteForm .formArea ul li .dd .input-text {display:block; width:100%; height:28px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .popWirteForm .formArea ul li .dd .textarea {display:block; width:100%; height:100px; line-height:1.4; font-size:13px; color:#999999; border:none; border-bottom:1px solid #aaaaaa;} .popWirteForm .formArea ul li .dd label.error {margin-top:10px;} .popWirteForm .formArea .agreeArea {position:relative; margin:40px 0 50px; padding-left:17px;} .popWirteForm .formArea .agreeArea .input-check {position:absolute; left:0; top:3px;} .popWirteForm .formArea .agreeArea .label {line-height:1.4; font-size:13px; color:#666666;} .popWirteForm .formArea .agreeArea .error {position:absolute; left:17px; top:100%; margin-top:5px;} .popWirteForm .formArea .btn {margin-top:15px; padding-top:20px; text-align:center; border-top:1px solid #aaaaaa;} .popWirteForm .formArea .btn a {display:inline-block; min-width:113px; padding:0 10px; text-align:center; border:1px solid #222222; background:#222222;} .popWirteForm .formArea .btn a span {display:inline-block; line-height:38px; font-size:13px; color:#ffffff;} .popWirteForm .formArea .btn a.btnW {background:#ffffff;} .popWirteForm .formArea .btn a.btnW span {color:#222222;} .popWirteForm .formArea .confirmMsg {padding:50px 10px 35px; text-align:center; line-height:1.6; font-size:13px; color:#222222;} .popWirteForm .formArea .confirmMsgL {padding-top:15px; line-height:1.6; font-size:13px; color:#222222;} .popWirteForm .formArea .btn.btnSGStyle a span{display:block; line-height:17px;} .popWirteForm .formArea .btn.btnSGStyle a.btnSGStyle_w{background-color:#fff; border: 1px solid #bfbfbf; color:#222; margin-bottom:5px;} .popWirteForm .formArea .btn.btnSGStyle a.btnSGStyle_w span{color:#222;} .popWirteForm .formArea .btn.btnSGStyle a{display: block; width:90%; margin:0 auto; min-width: 113px; padding: 5px 10px; text-align: center; border: 1px solid #bfbfbf; background: #222222;} .popWirteForm .formArea .btn.btnSGStyle a span:first-child{font-weight:bold;} @media screen and (max-width: 768px){ .popWrap .popBody .popinner {padding:15px 15px 30px;;} .popWrap .popBody .popTitle {padding:0 20px 13px 0; font-size:13px;} .popWrap .popBody .popClose {position:absolute; right:0; top:0;} .popWrap .popBody .popClose a {display:block; width:15px; padding:15px;} .popWirteForm .msg {} .popWirteForm .msg .please {float:none;} .popWirteForm .msg .note {float:none; margin-top:5px;} .popWirteForm .formArea ul li {min-height:inherit; margin-top:10px;} .popWirteForm .formArea ul li .dt {width:100px; padding:4px 10px 0 0; font-size:12px;} .popWirteForm .formArea ul li .dt .required {background-position:left 4px;} .popWirteForm .formArea ul li .dd .select {font-size:12px;} .popWirteForm .formArea ul li .dd .input-text {font-size:12px;} .popWirteForm .formArea ul li .dd .textarea {font-size:12px;} .popWirteForm .formArea ul li .dd label.error {margin-top:6px;} .popWirteForm .formArea .agreeArea {margin-top:20px;} .popWirteForm .formArea .btn a {display:block;} .popWirteForm .formArea .btn a span {padding-right:17px; line-height:50px; font-size:12px; font-weight:bold; background:url(../images/common/arrRight_7x12_ffffff.png) no-repeat right center;} .popWirteForm .formArea .btn.btnChild2 {} .popWirteForm .formArea .btn.btnChild2 a {display:inline-block; min-width:90px;} .popWirteForm .formArea .btn.btnChild2 a span {padding-right:0; line-height:40px; font-size:13px; font-weight:normal; background:none;} } @media screen and (max-width: 630px){ .popWrap .popBody {margin:0 15px;} } /* 이니뷰티파인더팝업 */ #beautyFinderPop {top:365px;} #beautyFinderPop .popBody {} /* 이니뷰티파인더팝업2 */ #beautyFinderPop2 {} /* 상품추천메일팝업 */ #emailFriend {top:204px;} .popWirteForm .formArea .fromTo {overflow:hidden;} .popWirteForm .formArea .fromTo .who {float:left; width:75px; padding-top:18px; font-size:16px; font-weight:bold; color:#222222;} .popWirteForm .formArea .fromTo ul {overflow:hidden;} .popWirteForm .formArea .fromTo ul li .dt {width:80px;} .popWirteForm .formArea .fromTo ul li .dd .byte {margin-top:7px; text-align:right; font-size:13px; font-weight:bold; color:#999999;} .popWirteForm .formArea .fromTo ul li .dd .byte span {color:#024137;} .popWirteForm .formArea .from {padding-bottom:45px; border-bottom:1px solid #aaaaaa;} .popWirteForm .formArea .fromTo ul li .dd .codeSection {margin-top:23px;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .code {} .popWirteForm .formArea .fromTo ul li .dd .codeSection .code span {display:inline-block; width:125px; height:40px; margin-right:13px; text-align:center; vertical-align:middle; line-height:40px; font-size:14px; color:#ffffff; background:url(../images/common/BG_code.gif) no-repeat center center;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .code a {display:inline-block; padding:15px 17px; vertical-align:middle; font-size:13px; color:#666666; background:url(../images/common/BG_refresh.gif) no-repeat left center;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .codep {margin-top:15px; font-size:13px; color:#666666;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .inputCode {margin-top:7px; font-size:13px; color:#999999;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .inputCode .input-text {display:block; width:100%; height:28px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .inputCode .label.error {margin-top:10px;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .sendMe {position:relative; margin:9px 0 40px; padding-left:17px;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .sendMe .input-check {position:absolute; left:0; top:3px;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .sendMe .label {line-height:1.4; font-size:13px; color:#666666;} .popWirteForm .formArea .fromTo ul li .dd .codeSection .sendMe .error {position:absolute; left:17px; top:100%; margin-top:5px;} .popWirteForm .formArea .codeAlarm {line-height:1.4; font-size:13px; color:#666666;} @media screen and (max-width: 768px){ .popWirteForm .formArea .fromTo .who {float:none; width:auto; padding:18px 0 5px;} .popWirteForm .formArea .fromTo ul li .dt {width:55px;} } /* 상품추천완료팝업 */ #emailFriendComplete {top:404px;} #emailFriendComplete .popPdtSummary {overflow:hidden; padding-top:40px;} #emailFriendComplete .popPdtSummary .thumb {float:left; width:170px; margin-right:40px;} #emailFriendComplete .popPdtSummary .txt {overflow:hidden;} #emailFriendComplete .popPdtSummary .txt h4 {line-height:1.4; font-size:16px; color:#222222;} #emailFriendComplete .popPdtSummary .txt .price {margin-top:12px; font-size:16px; font-weight:bold; color:#222222;} #emailFriendComplete .popPdtSummary .txt .point {margin-top:17px;} #emailFriendComplete .popPdtSummary .txt .point em {display:inline-block; vertical-align:middle; line-height:0; font-size:0;} #emailFriendComplete .popPdtSummary .txt .point em img {height:34px;} #emailFriendComplete .popPdtSummary .txt .point span {display:inline-block; vertical-align:middle; font-size:13px; color:#222222;} #emailFriendComplete .popPdtSummary .txt .onway {margin-top:20px; line-height:1.4; font-size:13px; color:#666666;} #emailFriendComplete .popPdtSummary .txt .onway .address {text-decoration:underline; color:#024137;} #emailFriendComplete .popPdtBtn {margin-top:45px; padding-top:20px; text-align:center; border-top:1px solid #aaaaaa;} #emailFriendComplete .popPdtBtn a {display:inline-block; min-width:155px; padding:0 10px; text-align:center; background:#222222;} #emailFriendComplete .popPdtBtn a span {display:inline-block; line-height:40px; font-size:13px; color:#ffffff;} @media screen and (max-width: 768px){ #emailFriendComplete .popPdtBtn {margin-top:20px;} #emailFriendComplete .popPdtBtn a {display:block;} } @media screen and (max-width: 500px){ #emailFriendComplete .popPdtSummary {padding-top:20px;} #emailFriendComplete .popPdtSummary .thumb {float:none; width:auto; margin-right:0; text-align:center;} #emailFriendComplete .popPdtSummary .thumb img {max-width:170px;} #emailFriendComplete .popPdtSummary .txt {margin-top:10px;} } /* 비주얼스토리보기팝업 */ #visualStoryDetail {} #visualStoryDetail .popBody {max-width:530px;} #visualStoryDetail .popBody .popinner {padding-top:70px;} #visualStoryDetail .visualStoryDetailView {} #visualStoryDetail .visualStoryDetailView img {width:100%;} /* 원료보기팝업 */ #ingredientDetail {top:800px;} #ingredientDetail .popBody {max-width:400px;} #ingredientDetail .ingredientScroll {position:relative; height:210px; margin-top:10px; padding-right:10px;} #ingredientDetail .ingredientScroll .scrollArea {line-height:1.4; font-size:13px; color:#666666;} #ingredientDetail .ingredientWithout {margin-top:20px; padding-top:20px; border-top:1px solid #e5e5e5;} #ingredientDetail .ingredientWithout .t {font-size:13px; font-weight:bold; color:#222222;} #ingredientDetail .ingredientWithout .p {margin-top:4px; line-height:1.6; font-size:13px; color:#666666;} /* 리뷰이미지더보기팝업 */ #reviewMorePop {} #reviewMorePop .popBody {max-width:530px;} #reviewMorePop .popBody .popinner {padding-top:70px;} #reviewMorePop .reviewMoreViewWrap {position:relative;} #reviewMorePop .reviewMoreViewWrap .reviewMoreView {overflow:hidden;} #reviewMorePop .reviewMoreViewWrap .reviewMoreView ul {overflow:hidden; position:relative;} #reviewMorePop .reviewMoreViewWrap .reviewMoreView ul li {float:left; position:relative; width:100%;} #reviewMorePop .reviewMoreViewWrap .reviewMoreView ul li.movie {padding-top:18.4%;} #reviewMorePop .reviewMoreViewWrap .reviewMoreView ul li.movie iframe {position:absolute; left:0; top:0; width:100%; height:100%;} #reviewMorePop .reviewMoreViewWrap .pagingNum {margin-top:18px; text-align:center; font-size:13px; color:#666666;} #reviewMorePop .reviewMoreViewWrap .pagingNum .current {color:#045321;} #reviewMorePop .reviewMoreViewWrap .btn {position:absolute; top:50%; margin-top:-20px;} #reviewMorePop .reviewMoreViewWrap .btnPrev {left:10px;} #reviewMorePop .reviewMoreViewWrap .btnNext {right:10px;} #reviewMorePop .reviewMoreViewWrap .reviewMoreView ul li img {width:100%;} @media screen and (max-width: 630px){ #reviewMorePop .reviewMoreViewWrap .btn {width:15px; margin-top:-13px;} } /* 비밀번호분실팝업 */ #layerPhone {} #layerPhone .popBody {max-width:480px;} #layerPhone .popWirteForm .formArea ul li {position:relative; padding-right:100px;} #layerPhone .popWirteForm .formArea ul li .dd {overflow:visible;} #layerPhone .popWirteForm .formArea ul li .dd label.error {} #layerPhone .popWirteForm .btnVerification {position:absolute; right:0; top:0;} #layerPhone .popWirteForm .btnVerification a {display:inline-block; width:80px; padding:5px; text-align:center; line-height:18px; font-size:13px; color:#ffffff; background:#222222;} /* pos회원 otp인증팝업 */ #layerPosWhatsApp {} #layerPosWhatsApp .popBody {max-width:480px;} #layerPosWhatsApp .popWirteForm .formArea ul li {position:relative; padding-right:100px;} #layerPosWhatsApp .popWirteForm .formArea ul li .dd {overflow:visible;} #layerPosWhatsApp .popWirteForm .formArea ul li .dd label.error {} #layerPosWhatsApp .popWirteForm .btnVerification {position:absolute; right:0; top:0;} #layerPosWhatsApp .popWirteForm .btnVerification a {display:inline-block; width:80px; padding:5px; text-align:center; line-height:18px; font-size:13px; color:#ffffff; background:#222222;} /* whatsApp비밀번호분실팝업 */ #layerWhatsApp {} #layerWhatsApp .popBody {max-width:480px;} #layerWhatsApp .popWirteForm .formArea ul li {position:relative; padding-right:100px;} #layerWhatsApp .popWirteForm .formArea ul li .dd {overflow:visible;} #layerWhatsApp .popWirteForm .formArea ul li .dd label.error {} #layerWhatsApp .popWirteForm .btnVerification {position:absolute; right:0; top:0;} #layerWhatsApp .popWirteForm .btnVerification a {display:inline-block; width:80px; padding:5px; text-align:center; line-height:18px; font-size:13px; color:#ffffff; background:#222222;} /* 비밀번호분실팝업-20181126_수정 */ #layerPhone .popWirteForm2 .formArea ul li {padding:0;} #layerPhone .popWirteForm2 .formArea ul li .dd_txt {margin:5px 0 20px;font-size:13px;color:#222;} #layerPhone .popWirteForm2 .formArea ul li .dd_inner {position:relative;padding-left:100px;} #layerPhone .popWirteForm2 .btnVerification {left:0;right:inherit;} #layerPhone .popWirteForm2 .btnVerification a {border:1px solid #222;color:#222;background-color:#fff;} #layerPhone .popWirteForm2 .formArea .btn {padding:0;border:0;} /* whatsapp 비밀번호분실팝업 */ #layerWhatsApp .popWirteForm2 .formArea ul li {padding:0;} #layerWhatsApp .popWirteForm2 .formArea ul li {min-height:inherit;} #layerWhatsApp .popWirteForm2 .formArea ul li .dd_txt {margin:5px 0 20px;font-size:13px;color:#222;} #layerWhatsApp .popWirteForm2 .formArea ul li .dd_inner {position:relative;padding-left:100px;} #layerWhatsApp .popWirteForm2 .btnVerification {left:0;right:inherit;} #layerWhatsApp .popWirteForm2 #optCode {left:0;right:inherit;} #layerWhatsApp .popWirteForm2 .btnVerification a {border:1px solid #222;color:#222;background-color:#fff;} #layerWhatsApp .popWirteForm2 .formArea .btn {padding:0;border:0;} .input-text-opt {height: 30px;border: none;border-bottom: 1px solid #aaaaaa;width : 250px;line-height: 50px;left : -70px;top : 14px;font-size: 12px;background: #ffffff;} .popWirteForm .formArea ul li .dt-opt {float:left; width:80px; padding:7px 5px 0 0; font-size:13px; color:#222222;} .popWirteForm .formArea ul li .dt-opt span {display:inline-block; padding-left:10px;} .popWirteForm .formArea ul li .dt-opt .required {background:url(../images/common/bul_required.gif) no-repeat left 5px;} #li-opt{margin: 5px 0 20px;font-size: 13px;color: #222;} /* pos회원 otp인증팝업 */ #layerPosWhatsApp .popWirteForm2 .formArea ul li {padding:0;} #layerPosWhatsApp .popWirteForm2 .formArea ul li {min-height:inherit;} #layerPosWhatsApp .popWirteForm2 .formArea ul li .dd_txt {margin:5px 0 20px;font-size:13px;color:#222;} #layerPosWhatsApp .popWirteForm2 .formArea ul li .dd_inner {position:relative;padding-left:100px;} #layerPosWhatsApp .popWirteForm2 .btnVerification {left:0;right:inherit;} #layerPosWhatsApp .popWirteForm2 #optCode {left:0;right:inherit;} #layerPosWhatsApp .popWirteForm2 .btnVerification a {border:1px solid #222;color:#222;background-color:#fff;} #layerPosWhatsApp .popWirteForm2 .formArea .btn {padding:0;border:0;} /* 비밀번호분실팝업 */ #forgotPW {} #forgotPW .popBody {max-width:480px;} #forgotPW .popWirteForm .formArea ul li .dt {width:100px;} #forgotPW .popWirteForm .formArea .btn {border:none;} /* whatsApp 비밀번호분실팝업 */ #forgotSelectAuth {} #forgotSelectAuth .popBody {max-width:480px;} #forgotSelectAuth .popWirteForm .formArea ul li .dt {width:100px;} #forgotSelectAuth .popWirteForm .formArea .btn {border:none;} /* whatsApp 비밀번호분실팝업(2) */ #forgotPWbyWhatsApp {} #forgotPWbyWhatsApp .popBody {max-width:480px;} #forgotPWbyWhatsApp .popWirteForm .formArea ul li .dt {width:100px;} #forgotPWbyWhatsApp .popWirteForm .formArea .btn {border:none;} /* pos회원 whatsApp 인증팝업 */ #posMemberWhatsApp {} #posMemberWhatsApp .popBody {max-width:480px;} #posMemberWhatsApp .popWirteForm .formArea ul li .dt {width:100px;} #posMemberWhatsApp .popWirteForm .formArea .btn {border:none;} /* 비밀번호이메일팝업 */ #forgotPW2 {} #forgotPW2 .popBody {max-width:480px;} /* 이메일등록선택팝업 */ #emailRegister {} #emailRegister .popBody {max-width:480px;} #emailRegister .popWirteForm .formArea ul li {min-height:inherit; margin-top:20px; font-size:14px; color:#222222;} #emailRegister .popWirteForm .formArea ul li .input-radio {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; border-radius:50%; background:#ffffff;} #emailRegister .popWirteForm .formArea ul li .input-radio:checked {box-shadow:0 0 0 4px #ffffff inset; background:#454b51;} #emailRegister .popWirteForm .formArea ul li .bar {display:inline-block; margin:0 3px; color:#cccccc;} #emailRegister_1 {} #emailRegister_1 .popBody {max-width:480px;} #emailRegister_1 .popWirteForm .formArea ul li {min-height:inherit; margin-top:20px; font-size:14px; color:#222222;} #emailRegister_1 .popWirteForm .formArea ul li .input-radio {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; border-radius:50%; background:#ffffff;} #emailRegister_1 .popWirteForm .formArea ul li .input-radio:checked {box-shadow:0 0 0 4px #ffffff inset; background:#454b51;} #emailRegister_1 .popWirteForm .formArea ul li .bar {display:inline-block; margin:0 3px; color:#cccccc;} /* 이메일등록폼팝업 */ #emailRegister2 {} #emailRegister2 .popBody {max-width:480px;} #emailRegister2 .popWirteForm .formArea ul li {min-height:inherit;} #emailRegister2 .popWirteForm .formArea .btn {border:none;} /* 이메일등록확인팝업 */ #emailRegister3 {} #emailRegister3 .popBody {max-width:480px;} #emailRegister3 .popWirteForm .formArea .confirmMsg strong {display:block; margin-bottom:20px; font-size:16px; color:#045321;} /* 이메일등록팝업 */ #emailRegister4 {} #emailRegister4 .popBody {max-width:520px;} #emailRegister4 .popWirteForm .formArea .confirmMsg strong {display:block; margin-top:20px; font-size:16px; color:#045321;} /* 카드등록오류팝업 */ #emailRegister5 {} #emailRegister5 .popBody {max-width:480px;} /* 모바일번호확인팝업 */ #mobileConfirmPop {} #mobileConfirmPop .popBody {max-width:480px;} #mobileConfirmPop .popWirteForm .formArea ul li {min-height:inherit;} #mobileConfirmPop .popWirteForm .formArea .btn {border:none;} /* whatsApp모바일번호확인팝업 */ #whatsAppConfirmPop {} #whatsAppConfirmPop .popBody {max-width:480px;} #whatsAppConfirmPop .popWirteForm .formArea ul li {min-height:inherit;} #whatsAppConfirmPop .popWirteForm .formArea .btn {border:none;} /* 모바일번호확인팝업 */ #mobileConfirmPop2 {} #mobileConfirmPop2 .popBody {max-width:480px;} /* 영수증등록팝업 */ #receiptConfirm {} #receiptConfirm .popBody {max-width:480px;} #receiptConfirm .popWirteForm .formArea ul li {min-height:inherit;} #receiptConfirm .popWirteForm .formArea ul li .dt {width:100px;} #receiptConfirm .popWirteForm .formArea .btn {border:none;} /* 영수증등록팝업(기존인증) */ #receiptConfirm2 {} #receiptConfirm2 .popBody {max-width:480px;} /* 영수증등록팝업(인증성공) */ #receiptConfirm3 {} #receiptConfirm3 .popBody {max-width:480px;} #receiptConfirm3 .popWirteForm .formArea .confirmMsg em {color:#024137;} /* 비밀번호변경완료팝업 */ #pwChanged {} #pwChanged .popBody {max-width:480px;} /* 이메일수정폼팝업 */ #emailEdit {} #emailEdit .popBody {max-width:480px;} #emailEdit .popWirteForm .formArea ul li {min-height:inherit;} #emailEdit .popWirteForm .formArea .btn {border:none;} #emailEdit2 {} #emailEdit2 .popBody {max-width:480px;} /* whatsApp 이메일수정폼팝업 */ #loginByWhatsApp {} #loginByWhatsApp .popBody {max-width:480px;} #loginByWhatsApp .popWirteForm .formArea ul li {min-height:inherit;} #loginByWhatsApp .popWirteForm .formArea .btn {border:none;} #memberLeavePop {} #memberLeavePop .popBody {max-width:480px;} #memberLeavePop2 {} #memberLeavePop2 .popBody {max-width:480px;} /* vip키트팝업 */ #vipkitPop1 {} #vipkitPop1 .popBody {max-width:830px;} #vipkitPop1 .popWirteForm .formArea .p {margin:26px 0 -11px 4px; font-size:14px; color:#222222;} #vipkitPop1 .popWirteForm .formArea .listType1 table th {background:#efefef;} #vipkitPop1 .popWirteForm .formArea .aboutVip {overflow:hidden; padding:32px 25px 0;} #vipkitPop1 .popWirteForm .formArea .aboutVip .name {float:left;} #vipkitPop1 .popWirteForm .formArea .aboutVip .name span {display:inline-block; font-size:13px; font-weight:bold; color:#024137;} #vipkitPop1 .popWirteForm .formArea .aboutVip .name span em {font-size:14px; color:#222222;} #vipkitPop1 .popWirteForm .formArea .aboutVip .store {float:right; font-size:13px; font-weight:bold; color:#024137;} #vipkitPop1 .popWirteForm .formArea .aboutVip .store em {font-size:14px; color:#222222;} #vipkitPop1 .popWirteForm .formArea .btn {border-top:none;} #vipkitPop1 .precaution {margin:50px -25px -40px; padding:46px 50px; background:#f7f7f7;} #vipkitPop1 .precaution .t {font-size:16px; font-weight:bold; color:#024137;} #vipkitPop1 .precaution ul {margin-top:20px;} #vipkitPop1 .precaution ul li {margin-top:15px; padding-left:15px; text-indent:-15px; line-height:1.6; font-size:14px; color:#666666;} #vipkitPop1 .precaution ul li strong {color:#222222;} #vipkitPop2 .popBody {max-width:520px;} #vipkitPop2 .popWirteForm .formArea .cont {padding:0 25px;} #vipkitPop2 .popWirteForm .formArea .p {margin:33px 10px 0; text-align:center; line-height:1.5; font-size:16px; font-weight:bold; color:#000000;} #vipkitPop2 .popWirteForm .formArea .p em {display:inline-block; color:#024137;} #vipkitPop2 .popWirteForm .formArea .p2 {padding-left:11px; text-indent:-11px; line-height:1.6; font-size:14px; color:#666666;} #vipkitPop2 .popWirteForm .formArea .periodBox {margin:30px 0 33px; padding:19px 10px 23px; background:#f7f7f7;} #vipkitPop2 .popWirteForm .formArea .periodBox p {padding:5px 0 4px; text-align:center; font-size:15px; font-weight:bold;} #vipkitPop2 .popWirteForm .formArea .periodBox p span {display:inline-block; color:#045321;} #vipkitPop2 .popWirteForm .formArea .periodBox p em {display:inline-block; color:#000000;} #vipkitPop3 {} #vipkitPop3 .popBody {max-width:520px;} #vipkitPop3 .popWirteForm .formArea .confirmMsg em {color:#024137;} #vipkitPop4 .popBody {max-width:520px;} #vipkitPop4 .popWirteForm .formArea .cont {padding:0 25px;} #vipkitPop4 .popWirteForm .formArea .p {margin:33px 10px 25px; text-align:center; line-height:1.5; font-size:16px; font-weight:bold; color:#000000;} #vipkitPop4 .popWirteForm .formArea .p em {display:inline-block; color:#024137;} #vipkitPop4 .popWirteForm .formArea .p2 {margin:5px 10px 0; text-align:center; line-height:1.5; font-size:14px; color:#666666;} #vipkitPop4 .popWirteForm .formArea .periodBox {margin:30px 0 33px; padding:19px 10px 23px; background:#f7f7f7;} #vipkitPop4 .popWirteForm .formArea .periodBox p {padding:5px 0 4px; text-align:center; font-size:15px; font-weight:bold;} #vipkitPop4 .popWirteForm .formArea .periodBox p span {display:inline-block; color:#045321;} #vipkitPop4 .popWirteForm .formArea .periodBox p em {display:inline-block; color:#000000;} @media screen and (max-width: 768px){ #vipkitPop1 .m_listType2 ul li {margin-top:0; padding:10px;} #vipkitPop1 .m_listType2 ul li a.findStore .storeName {font-size:13px;} #vipkitPop1 .m_listType2 ul li a.findStore .storeAddress {font-size:13px;} #vipkitPop1 .popWirteForm .formArea .p {margin:20px 0 -20px 4px; font-size:13px;} #vipkitPop1 .popWirteForm .formArea .aboutVip {padding:20px 10px 0;} #vipkitPop1 .popWirteForm .formArea .aboutVip .name {float:none;} #vipkitPop1 .popWirteForm .formArea .aboutVip .store {float:none; margin-top:5px;} #vipkitPop1 .precaution {margin:30px -15px -30px; padding:20px 25px; background:#f7f7f7;} #vipkitPop1 .precaution .t {font-size:14px;} #vipkitPop1 .precaution ul {margin-top:15x;} #vipkitPop1 .precaution ul li {margin-top:10px; font-size:13px;} #vipkitPop2 .popWirteForm .formArea .cont {padding:0 15px;} #vipkitPop2 .popWirteForm .formArea .p {margin:20px 5px 0; font-size:14px;} #vipkitPop2 .popWirteForm .formArea .p2 {font-size:13px;} #vipkitPop2 .popWirteForm .formArea .periodBox {margin:20px 0; padding:15px 10px;} #vipkitPop2 .popWirteForm .formArea .periodBox p {padding:3px 0 2px; font-size:13px;} #vipkitPop4 .popWirteForm .formArea .cont {padding:0 15px;} #vipkitPop4 .popWirteForm .formArea .p {margin:20px 5px; font-size:14px;} #vipkitPop4 .popWirteForm .formArea .p2 {margin:5px 5px 0; font-size:13px;} #vipkitPop4 .popWirteForm .formArea .periodBox {margin:20px 0; padding:15px 10px;} #vipkitPop4 .popWirteForm .formArea .periodBox p {padding:3px 0 2px; font-size:13px;} } #jpStorePop .jp_msg {padding:6% 5% 3% 5%;font-size:14px;color:#666;line-height:1.5;} @media screen and (max-width: 768px){ #jpStorePop .jp_msg {font-size:12px;} } /* ========== [제품리스트] ========== */ /* 제품리스트 */ .productVisual {height:540px; background-size:cover !important;} .productVisual h2 {text-align:center; line-height:540px; font-size:50px; font-weight:bold; color:#222222;} @media screen and (max-width: 1200px){ .productVisual {height:300px;} .productVisual h2 {line-height:300px;} } @media screen and (max-width: 768px){ /* .productVisual h2 {padding-top:20px;} */ } @media screen and (max-width: 640px){ .productVisual {height:190px; background-size:auto 100% !important;} .productVisual h2 {line-height:190px; font-size:20px;} #container.productNoVisual {padding-top:0;} } .productListWrap {margin-top:54px; padding-bottom:60px; background:url(../images/common/line_1x1_dddddd.gif) repeat-y 184px 0;} .productListWrap:after {content:''; display:block; clear:both;} /* 제품리스트 - 왼쪽영역 */ .productListWrap .productLNB {float:left; width:185px;} .productListWrap .productLNB .concerns {} .productListWrap .productLNB .concerns h3 {line-height:1.4; font-size:18px; font-weight:bold; color:#222222;} .productListWrap .productLNB .concerns h3 a {color:#222222;} .productListWrap .productLNB .concerns .list {margin:12px 0 35px;} .productListWrap .productLNB .concerns .list li {margin-top:20px;} .productListWrap .productLNB .concerns .list li a {line-height:1.6; font-size:13px; font-weight:bold; color:#222222;} .productListWrap .productLNB .concerns .list li ul {} .productListWrap .productLNB .concerns .list li ul li {margin-top:6px;} .productListWrap .productLNB .concerns .list li ul li a {font-weight:normal; color:#666666;} .productListWrap .productLNB .concerns .list li.on a {text-decoration:underline; font-weight:bold; color:#024137;} .productListWrap .productLNB .concerns .list li.on ul li a {text-decoration:none; font-weight:normal; color:#666666;} .productListWrap .productLNB .concerns .list li.on ul li.current a {font-weight:bold; color:#222222;} .productListWrap .productLNB .filterBy {padding-top:38px; border-top:1px solid #dddddd;} .productListWrap .productLNB .filterBy .title {overflow:hidden; margin-bottom:-6px;} .productListWrap .productLNB .filterBy .title h3 {float:left; margin-right:28px; font-size:16px; font-weight:bold; color:#000000;} .productListWrap .productLNB .filterBy .title h3 a {font-size:16px; font-weight:bold; color:#000000; cursor:default;} .productListWrap .productLNB .filterBy .title .clearAll {float:left;} .productListWrap .productLNB .filterBy .title .clearAll a {display:inline-block; padding:0 5px 0 17px; background:url(../images/common/BG_refresh.gif) no-repeat left center;} .productListWrap .productLNB .filterBy h4 {margin-top:32px; line-height:1.4; font-size:14px; font-weight:bold; color:#222222;} .productListWrap .productLNB .filterBy .list {margin-top:12px;} .productListWrap .productLNB .filterBy .list li {margin-top:6px;} .productListWrap .productLNB .filterBy .list li a {display:inline-block; padding-left:26px; line-height:1.6; font-size:13px; color:#666666; background:url(../images/common/BG_checkbox.gif) no-repeat left 2px;} .productListWrap .productLNB .filterBy .list li.on a {font-weight:bold; color:#222222; background-image:url(../images/common/BG_checkboxON.gif);} .productListWrap .productLNB .filterBy .list li a span {display:block;} .productListWrap .productLNB .filterBy .list li a span em {display:inline-block; padding:0 6px; background:#e5e5e5;} .productListWrap .productLNB .filterBy .allType {margin-top:17px;} .productListWrap .productLNB .filterBy .allType a {text-decoration:underline; line-height:1.4; font-size:13px; color:#222222;} .productListWrap .productLNB .filterBy .filterByBtn {display:none;} /* 제품리스트 - 오른쪽영역 */ .productListWrap .productListArea {overflow:hidden; padding-left:40px;} .productListWrap .productListArea .resultSort {overflow:hidden;} .productListWrap .productListArea .resultSort .resultNum {float:left; line-height:34px; font-size:13px; color:#666666;} .productListWrap .productListArea .resultSort .resultNum strong {color:#222222;} .productListWrap .productListArea .resultSort .sort {float:right;} .productListWrap .productListArea .resultSort .sort .select {width:175px; height:34px; font-size:13px; color:#666666; border:1px solid #222222;} .productListWrap .productListArea .productList {overflow:hidden; border-bottom:1px solid #e5e5e5;} .productListWrap .productListArea .productList ul {overflow:hidden; margin:-20px -40px 0 0; padding-bottom:57px;} .productListWrap .productListArea .productList ul li {float:left; width:33.3%; margin-top:60px; text-align:center;} .productListWrap .productListArea .productList ul li a {display:block; position:relative; margin-right:40px;} .productListWrap .productListArea .productList ul li .icon {position:absolute; left:0; top:0; width:50px;} .productListWrap .productListArea .productList ul li .icon img {display:inline-block; margin-bottom:5px;} .productListWrap .productListArea .productList ul li .thumb {display:block;} .productListWrap .productListArea .productList ul li .thumb img {width:100%;} .productListWrap .productListArea .productList ul li .desc {display:block; overflow:hidden; height:32px; margin:32px 10px 0; line-height:16px; font-size:13px; color:#222222;} .productListWrap .productListArea .productList ul li .reviewPoint {display:block; min-height:16px; margin-top:6px;} .productListWrap .productListArea .productList ul li .reviewPoint em {display:inline-block; vertical-align:middle; line-height:0; font-size:0;} .productListWrap .productListArea .productList ul li .reviewPoint img {height:17px;} .productListWrap .productListArea .productList ul li .reviewPoint span {display:inline-block; vertical-align:middle; line-height:16px; font-weight:bold; color:#666666;} .productListWrap .productListArea .productList ul li .price {display:block; margin-top:13px; font-size:12px; font-weight:bold; color:#222222;} .productListWrap .productListArea .productList ul li .desc2 {display:block; margin:3px 10px 0; line-height:1.4; font-size:13px; color:#666666;} .productListWrap .productListArea .productList ul li .desc2 img {position:relative; top:-1px;} .productListWrap .productListArea .productList ul li:nth-of-type(3n+1) {clear:both;} .productListWrap .productListArea .productList ul li.step3_clear {clear:both;} @media screen and (max-width: 768px){ .productListWrap .productListArea .productList ul li {width:50%;} .productListWrap .productListArea .productList ul li:nth-of-type(3n+1) {clear:none;} .productListWrap .productListArea .productList ul li:nth-of-type(2n+1) {clear:both;} .productListWrap .productListArea .productList ul li.step3_clear {clear:none;} .productListWrap .productListArea .productList ul li.step2_clear {clear:both;} } @media screen and (max-width: 640px){ .productListWrap {position:relative; margin-top:20px; padding:40px 0 0; background:none;} .productListWrap .productLNB {float:none; width:auto;} .productListWrap .productLNB .concerns {display:none;} .productListWrap .productLNB .filterBy {position:absolute; left:0; top:0; width:50%; padding-top:0; border-top:none; z-index:10;} .productListWrap .productLNB .filterBy .title {overflow:visible; margin-bottom:0;} .productListWrap .productLNB .filterBy .title h3 {float:none; margin-right:4.5%; border-bottom:1px solid #aaaaaa;} .productListWrap .productLNB .filterBy .title h3 a {display:block; padding-right:10px; line-height:33px; font-size:13px; font-weight:normal; color:#666666; cursor:pointer; background:url(../images/common/BG_filterBy.gif) no-repeat right center;} .productListWrap .productLNB .filterBy .title .clearAll {display:none;} .productListWrap .productLNB .filterBy .filterList {display:none; position:absolute; left:0; top:33px; width:200%; background:#ffffff;} .productListWrap .productLNB .filterBy .filterList .inner {padding:0 15px; border:1px solid #333366;} .productListWrap .productLNB .filterBy h4 {margin-top:15px;} .productListWrap .productLNB .filterBy .list li {margin-top:5px;} .productListWrap .productLNB .filterBy .list li a {padding:5px 0 5px 26px; background-position:0 7px;} .productListWrap .productLNB .filterBy .allType {display:none;} .productListWrap .productLNB .filterBy .filterByBtn {display:block; position:relative; margin:5px -15px 0 ; padding:7px 15px; border-top:1px solid #e6e6e6;} .productListWrap .productLNB .filterBy .filterByBtn a.btn {display:inline-block; min-width:90px; vertical-align:middle; text-align:center; line-height:28px; font-weight:bold;} .productListWrap .productLNB .filterBy .filterByBtn a.btnSave {border:1px solid #aaaaaa; color:#222222;} .productListWrap .productLNB .filterBy .filterByBtn a.btnClear {border:1px solid #e5e5e5; color:#666666;} .productListWrap .productLNB .filterBy .filterByBtn a.btnClose {position:absolute; right:0; top:0; width:15px; padding:14px 15px;} .productListWrap .productLNB .filterByOpen {} .productListWrap .productLNB .filterByOpen .title h3 a {padding:0 20px 0 15px; color:#ffffff; background:#454b51 url(../images/common/BG_filterByON.gif) no-repeat right center;} .productListWrap .productLNB .filterByOpen .filterList {display:block;} .productListWrap .productListArea {padding-left:0;} .productListWrap .productListArea .resultSort {overflow:visible;} .productListWrap .productListArea .resultSort .resultNum {float:none;} .productListWrap .productListArea .resultSort .sort {float:none; position:absolute; right:0; top:0; width:50%; text-align:right;} .productListWrap .productListArea .resultSort .sort .select {width:95.5%; border:1px solid #ffffff; border-bottom:1px solid #aaaaaa;} .productListWrap .productListArea .productList ul {margin:-25px -2.25% 0; padding-bottom:37px;} .productListWrap .productListArea .productList ul li {margin-top:40px;} .productListWrap .productListArea .productList ul li a {display:block; position:relative; margin:0 4.5%;} .productListWrap .productListArea .productList ul li .desc {margin-top:5px;} } /* 제품리스트 - 개인화추천 */ .recommendVisual {position:relative; background:url(../images/common/visual_recommend.jpg) no-repeat center top;} .recommendVisual h2 {line-height:440px; color:#fff;} .recommendVisual .desc {position:absolute; left:0; top:52%; width:100%; text-align:center; font-size:25px; font-style:italic; color:#fff;} .recommendWrap {padding-bottom:40px;} .recommendWrap .list_title {display:none; margin-top:75px; padding-bottom:25px; font-size:20px; font-weight:600; color:#222; border-bottom:1px solid #000;} .recommendWrap .recommendList {overflow:hidden;} .recommendWrap .recommendList ul {overflow:hidden; margin:-25px 0 0 0; padding-bottom:150px; text-align:center;} .recommendWrap .recommendList ul li {display: inline-block; width:33.3%; vertical-align:top; margin-top:150px; margin-right: -4px; text-align:center;} /* 20180918 개인추천 개선 .recommendWrap .recommendList ul li:nth-child(4), .recommendWrap .recommendList ul li:nth-child(5) {display:none;} */ .recommendWrap .recommendList ul li .inBox {display:block; position:relative; margin-left:45px; padding-left:55px;} .recommendWrap .recommendList ul li .rank {position:absolute; left:0; top:0; width:30px;} .recommendWrap .recommendList ul li .rank em {display:block; color:#222; font-weight:600;} .recommendWrap .recommendList ul li .rank em.top {padding-bottom:2px; font-size:12px; border-bottom:1px solid #222;} .recommendWrap .recommendList ul li .rank em.top.in {display:none;} .recommendWrap .recommendList ul li .rank em.top.out {display:block;} .recommendWrap .recommendList ul li .rank em.bot {padding-top:12px; line-height:100%; font-size:35px;} .recommendWrap .recommendList ul li .icon {position:absolute; left:55px; top:0; width:50px;} .recommendWrap .recommendList ul li .icon img {display:inline-block; margin-bottom:5px;} .recommendWrap .recommendList ul li .thumb {display:block;} .recommendWrap .recommendList ul li .thumb img {width:100%;} .recommendWrap .recommendList ul li .desc {display:block; overflow:hidden; height:32px; margin:32px 10px 0; line-height:16px; font-size:13px; color:#222222;} .recommendWrap .recommendList ul li .reviewPoint {display:block; min-height:16px; margin-top:6px;} .recommendWrap .recommendList ul li .reviewPoint em {display:inline-block; vertical-align:middle; line-height:0; font-size:0;} .recommendWrap .recommendList ul li .reviewPoint img {height:17px;} .recommendWrap .recommendList ul li .reviewPoint span {display:inline-block; vertical-align:middle; line-height:16px; font-weight:bold; color:#666666;} .recommendWrap .recommendList ul li .price {display:block; margin-top:13px; font-size:12px; font-weight:bold; color:#222222;} .recommendWrap .recommendList ul li .desc2 {display:block; margin:3px 10px 0; line-height:1.4; font-size:13px; color:#666666;} .recommendWrap .recommendList ul li .desc2 {display:block; margin:3px 10px 0; line-height:1.4; font-size:13px; color:#666666;} .recommendWrap .recommendList ul li .coupon {display:none; width:178px; height:36px; margin:0 auto; margin-top:25px; text-align:center; font-size:12px; font-weight:600; color:#222; background:#fff; border:1px solid #222; -webkti-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;} .recommendWrap .recommendList ul li .coupon em {display:inline-block; line-height:36px; padding-left:33px; background:url(../images/common/icon_recm_coupon_off.png) 0 center no-repeat;} .recommendWrap .recommendList ul li .coupon:hover {color:#fff; background:#222;} .recommendWrap .recommendList ul li .coupon:hover em {background:url(../images/common/icon_recm_coupon_on.png) 0 center no-repeat;} .recommendWrap .coupon_area .logout {display:block;} .recommendWrap .coupon_area .login {display:none;} .recommendWrap .coupon_area p {line-height:30px; margin-bottom:30px; text-align:center; font-size:18px; font-weight:600; color:#222; letter-spacing: 0.5px;} .recommendWrap .coupon_area .desc_box {padding:48px 0; text-align:center; background:#fafafa; border-top:1px solid #e5e5e5;} .recommendWrap .coupon_area .desc_box a {display:inline-block; width:200px; height:50px; line-height:50px; margin-top:30px; font-size:16px; font-weight:600; color:#fff; background:#222;} .recommendWrap .coupon_area .desc_box dt {margin-bottom:12px; font-size:16px; font-weight:600; color:#424242; letter-spacing:0.5px;} .recommendWrap .coupon_area .desc_box dd {margin-bottom:5px; font-size:14px; color:#666} .recommendWrap.login_chk .list_title {display:block;} .recommendWrap.login_chk .recommendList ul li .coupon {display:block;} .recommendWrap.login_chk .recommendList ul li:nth-child(4), .recommendWrap.login_chk .recommendList ul li:nth-child(5) {display:inline-block;} .recommendWrap.login_chk .recommendList ul li .rank em.top.in {display:block;} .recommendWrap.login_chk .recommendList ul li .rank em.top.out {display:none;} .recommendWrap.login_chk .logout {display:none;} .recommendWrap.login_chk .login {display:block;} .recommendWrap.login_chk .coupon_area .desc_box {padding:35px 0;} @media screen and (max-width: 1200px){ .recommendVisual h2 {line-height:250px;} .recommendVisual .desc {top:58%; font-size:20px;} } @media screen and (max-width: 1024px){ .recommendWrap {padding-bottom:20px;} .recommendWrap .list_title {margin-top:30px; font-size:18px;} .recommendWrap .recommendList ul {padding-bottom:75px;} .recommendWrap .recommendList ul li {margin-top:75px;} .recommendWrap .recommendList ul li .inBox {margin-left:15px; padding-left:30px;} } @media screen and (max-width: 768px){ .recommendVisual h2 {line-height:250px;} .recommendVisual .desc {top:61%; font-size:17px;} .recommendWrap .recommendList ul li {width:50%;} .recommendWrap .recommendList ul li .inBox {margin-left:0;} .recommendWrap .recommendList ul li .icon {left:40px; width:40px;} .recommendWrap .recommendList ul li .rank em.bot {font-size:25px;} .recommendWrap .recommendList ul li .coupon {margin-top:15px;} .recommendWrap.login_chk .recommendList ul li .coupon {width:80%;} .recommendWrap .coupon_area p {margin-bottom:15px; font-size:15px; line-height:24px; letter-spacing:0px;} .recommendWrap.login_chk .coupon_area .desc_box {padding:25px 0;} .recommendWrap .coupon_area .desc_box {padding:30px 0;} .recommendWrap .coupon_area .desc_box a {height:40px; line-height:40px; margin-top:15px;} } @media screen and (max-width: 640px){ .recommendVisual h2 {line-height:150px;} .recommendVisual .desc {top:59%; font-size:14px;} .recommendWrap {position:relative; padding:40px 0 0; background:none;} .recommendWrap .list_title {margin-top:0px;} .recommendWrap .recommendList ul {padding-bottom:37px;} .recommendWrap .recommendList ul li {margin-top:40px;} .recommendWrap .recommendList ul li .inBox {display:block; position:relative; margin:0 4.5%;} .recommendWrap .recommendList ul li .desc {margin-top:5px;} .recommendWrap.login_chk .recommendList ul li .coupon {width:90%;} } /* 개인화팝업 */ .pcWrap #recommend_pdt {/*top: 50% !important; margin-top: -438px;*/} #recommend_pdt .popBody {max-width:480px;} #recommend_pdt .info_area {width:350px; margin:0 auto; text-align:center;} #recommend_pdt .info_area .thumb img {width:100%;} #recommend_pdt .info_area .link {display:inline-block; margin-top:5px; font-size:16px; color:#5c9641; font-weight:600; border-bottom:1px solid;} #recommend_pdt .info_area .tit {margin-top:10px; font-size:18px; color:#222; font-weight:600;} #recommend_pdt .info_area .txt {margin-top:7px; font-size:20px; color:#222;} #recommend_pdt .info_area .date {margin-top:10px; font-size:16px; color:#666;} #recommend_pdt .info_area .num {height:40px; line-height:40px; margin:0 -35px; margin-top:10px; font-size:16px; color:#5c9641; background:#f2f7f0;} #recommend_pdt .info_area .down {display:inline-block; height:40px; margin:0 auto; margin-top:20px; padding:0 16px; color:#fff; background:#222; border-radius: 2px;} #recommend_pdt .info_area .down em {display:inline-block; line-height:40px; padding-right:15px; font-size:13px; background:url(../images/common/arr_coupon_down.gif) right center no-repeat;} #recommend_pdt .desc_box {margin-top:20px; padding:10px 23px; background:#f2f2f2;} #recommend_pdt .desc_box li {margin-bottom:5px; font-size:14px; color:#666;} @media screen and (max-width: 768px){ #recommend_pdt .popBody {max-width:100%; margin:0 10px;} #recommend_pdt .info_area {width:100%;} #recommend_pdt .info_area .num {margin:10px 0 0 0;} } /* ========== [제품상세] ========== */ /* 제품상세 */ .productDetailVisual {background-size:cover !important;} /* 제품상세썸네일롤링 */ .productDetailVisual .productDetailVisualCont {position:relative; max-width:1200px; margin:0 auto;} .productDetailVisual .pdtThumbWrap {position:absolute; right:0; top:50%; width:37.5%; margin-top:-18.8%;} .productDetailVisual .pdtThumbWrap .pdtThumbArea {position:relative;} .productDetailVisual .pdtThumbWrap .thumbList {overflow:hidden; position:relative;} .productDetailVisual .pdtThumbWrap .thumbList ul {overflow:hidden;} .productDetailVisual .pdtThumbWrap .thumbList ul li {float:left; position:relative; width:100%; background:#ffffff;} .productDetailVisual .pdtThumbWrap .thumbList ul li span {display:block; padding:0 7% 14%;} .productDetailVisual .pdtThumbWrap .thumbList ul li img {width:100%;} .productDetailVisual .pdtThumbWrap .navi {position:absolute; left:0; bottom:4%; width:100%; text-align:center;} .productDetailVisual .pdtThumbWrap .navi a {display:inline-block; width:36px;} .productDetailVisual .pdtThumbWrap .navi a.on {width:32px; border:2px solid #222222;} /* 제품상세요약 */ .productDetailVisual .pdtSummary {width:60%; min-height:390px; padding:6.5% 0 6%; color:#ffffff;} .productDetailVisual .pdtSummary .icon {} .productDetailVisual .pdtSummary .icon span {display:inline-block; height:21px; padding:0 10px; vertical-align:top; line-height:21px; font-size:12px; font-weight:bold; color:#ffffff; border:1px solid #ffffff; border-radius:11px;} .productDetailVisual .pdtSummary .pdtHeadline {margin-top:3%; font-size:18px;} .productDetailVisual .pdtSummary .pdtName {margin-top:3px; font-size:40px; font-weight:bold;} .productDetailVisual .pdtSummary .pdtDesc {margin-top:5%; line-height:1.6; font-size:13px;} .productDetailVisual .pdtSummary .price {margin-top:2.5%; font-size:22px; font-weight:bold;} .productDetailVisual .pdtSummary .shareMenu {overflow:hidden; margin-top:5%;} .productDetailVisual .pdtSummary .shareMenu .t {float:left; padding:0 13px; line-height:40px; font-size:13px; font-weight:bold; color:#666666; background:#ffffff;} .productDetailVisual .pdtSummary .shareMenu ul {float:left; padding:8px 5px; background:#ffffff;} .productDetailVisual .pdtSummary .shareMenu ul li {float:left; padding:0 7px;} .productDetailVisual .pdtSummary .shareMenu ul li a {display:block; width:24px; height:24px;} .productDetailVisual .pdtSummary .shareMenu ul li a span {line-height:0; font-size:0; opacity:0; filter:alpha(opacity=0);} .productDetailVisual .pdtSummary .shareMenu ul li a.snsF {background:url(../images/common/icon_24x24_snsF.png) no-repeat left top;} .productDetailVisual .pdtSummary .shareMenu ul li a.snsT {background:url(../images/common/icon_24x24_snsT.png) no-repeat left top;} .productDetailVisual .pdtSummary .shareMenu ul li a.snsP {background:url(../images/common/icon_24x24_snsP.png) no-repeat left top;} .productDetailVisual .pdtSummary .shareMenu ul li a.snsE {background:url(../images/common/icon_24x24_snsE.png) no-repeat left top;} /* 제품상세컬러칩 & 리뷰정보 */ .pdtReviewinfoWrap {border-bottom:18px solid #f5f5f5;} .pdtReviewinfoWrap .pdtReviewinfo {padding:20px 0 25px; border-bottom:1px solid #dddddd;} .pdtReviewinfoWrap .pdtReviewinfo.new_pdtReviewinfo {padding:21px 0 25px;} .pdtReviewinfoWrap .pdtReviewinfo .inner {overflow:hidden; max-width:1200px; margin:0 auto;} .pdtReviewinfoWrap .pdtReviewinfo .inner.after{overflow:visible;} .pdtReviewinfoWrap .pdtReviewinfo .inner.after:after{content:''; display:block; clear:both;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor {float:left; width:60%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .texture {float:left; width:160px; margin-right:35px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip {overflow:hidden; padding-top:30px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip .colorchipName {margin-left:5px; font-size:13px; color:#222222;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip ul {overflow:hidden; max-width:340px; margin-top:10px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip ul li {float:left; margin:4px 2px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip ul li a {display:block; position:relative; padding:3px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip ul li img {width:24px; border-radius:50%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip ul li.on a {padding:2px; border:1px solid #262626; border-radius:50%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview {float:right; width:37.5%; padding-top:20px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .dt {display:inline-block; width:170px; margin-top:8px; padding-right:5px; vertical-align:middle; font-size:13px; color:#222222;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .dd {display:inline-block; margin-top:8px; vertical-align:middle;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .average {} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .average .dd span {display:inline-block; vertical-align:middle; line-height:0; font-size:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .average .dd span img {height:17px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .average .dd em {display:inline-block; margin-left:10px; padding-left:10px; vertical-align:middle;font-size:13px; color:#666666; border-left:1px solid #dddddd;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .average .dd em a {text-decoration:underline;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .recommend {margin-top:12px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .recommend .dd {font-size:18px; font-weight:bold; color:#045321;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .btn {margin-top:20px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .btn a {display:inline-block; padding:0 19px; line-height:28px; font-size:13px; color:#222222; border:1px solid #aaaaaa;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 {position:relative; float:none; width:auto; padding-top:0; text-align:center;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .dt {width:auto; margin-top:0; line-height:21px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .dd {margin-top:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .average {position:absolute; left:0; top:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .average .dd span {display:inline-block; vertical-align:middle; line-height:0; font-size:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .average .dd span img {height:17px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .average .dd em {display:inline-block; margin-left:10px; padding-left:10px; vertical-align:middle; font-size:13px; color:#666666; border-left:1px solid #dddddd;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .average .dd em a {text-decoration:underline;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .recommend {display:inline-block; margin-top:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .recommend .dd {font-size:18px; font-weight:bold; color:#045321;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .btn {position:absolute; right:0; top:0; margin-top:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .btn a {padding:0 10px 0 0; text-decoration:underline; line-height:21px; font-weight:bold; border:none; background:url(../images/common/arrRight_4x5_222222.gif) no-repeat right center;} /*2017-08-09 BUYNOW 버튼 추가*/ .pdtReviewinfoWrap .pdtReviewinfo .inner .flL{float: left !important; width: 37.5%; padding-top: 0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow{float: right; position:relative; width: 37.5%; } .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .btn_buynow a{display:inline-block;width:100%;height:100%;background-color:#000;color:#fff;text-align:center;font-weight:bold;font-size:18px;padding: 16.5px 0;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList{display:none;width:99.8%;position:absolute;top: 54px;left:0;padding-top:7px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul{font-size:0; border:1px solid #C3C3C3; text-align:center;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul > li{background-color:#fff; display:inline-block;border-left:1px solid #C3C3C3;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul.pb3 > li{width: 33%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul.pb2 > li{width:49.5%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul.pb1 > li{width:100%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul > li:first-child{border-left:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul > li > a{display:inline-block; width:100%; height:100%; padding:13px 0;} .pdtReviewinfoWrap.bdbN{border-bottom:0;} .pdtReviewinfo.new_pdtReviewinfo2{padding-top:40px; } .pdtReviewinfo.new_pdtReviewinfo3{border-bottom:0; background-color:#F5F5F5; } /* 제품상세내용 */ .productDetail_contArea {margin-top:75px;} .productDetailCont {overflow:hidden; margin-top:58px;} .productDetailCont .productDetailContL {float:left; width:50%;} .productDetailCont .whatitis {margin-right:5%;} .productDetailCont .whatitis h4 {font-size:16px; color:#222222;} .productDetailCont .whatitis .p {margin-top:13px; line-height:1.4; font-size:13px; color:#666666;} .productDetailCont .whatitis .picto {overflow:hidden; margin-top:20px;} .productDetailCont .whatitis .picto li {float:left; margin:2px 2px 0 0;} .productDetailCont .moreDesc {margin:30px 5% 0 0;} .productDetailCont .moreDesc h4 {font-size:16px; color:#222222;} .productDetailCont .moreDesc .p {margin-top:13px; line-height:1.4; font-size:13px; color:#666666;} .productDetailCont .howTo {margin:30px 5% 0 0;} .productDetailCont .howTo h4 {font-size:16px; color:#222222;} .productDetailCont .howTo .p {margin-top:13px; line-height:1.4; font-size:13px; color:#666666;} .productDetailCont .howTo ol {overflow:hidden;} .productDetailCont .howTo ol li {float:left; margin:7px 10px 0 0; padding-left:14px; line-height:1.4; font-size:13px; font-weight:bold; color:#999999; background:url(../images/common/arrRight_4x5_aaaaaa.gif) no-repeat 0 7px;} .productDetailCont .howTo ol li.current {text-decoration:underline; color:#024137;} .productDetailCont .howTo ol li.first-child {padding-left:0;} .productDetailCont .productDetailContR {float:left; width:50%;} .productDetailCont .visualStory {margin-left:5%;} .productDetailCont .visualStory h4 {font-size:16px; font-weight:bold; color:#222222;} .productDetailCont .visualStory .movie {position:relative; margin-top:17px; padding-top:56.3%;} .productDetailCont .visualStory .movie iframe {position:absolute; left:0; top:0; width:100%; height:100%;} .productDetailCont .visualStory .img {overflow:hidden; padding-top:10px;} .productDetailCont .visualStory .img ul {overflow:hidden; margin-right:-20px;} .productDetailCont .visualStory .img ul li {float:left; width:33.3%;} .productDetailCont .visualStory .img ul li span {display:block; position:relative; margin:20px 20px 0 0; border:1px solid #e5e5e5;} .productDetailCont .visualStory .img ul li span img {width:100%;} .productDetailCont .visualStory .img ul li span a {position:absolute; left:0; top:0; width:100%; height:100%;} .productDetailCont .visualStory .img ul li span a img {position:absolute; right:0; bottom:0; width:26px;} .productDetailCont .ingredients {margin:28px 0 0 5%;} .productDetailCont .ingredients h4 {font-size:16px; font-weight:bold; color:#222222;} .productDetailCont .ingredients .p {overflow:hidden; margin-top:12px; line-height:1.4; font-size:13px; color:#666666;} .productDetailCont .ingredients .p .img {float:right; width:30%;} .productDetailCont .ingredients .p .see_ingredient {display:block; margin-top:10px;} .productDetailCont .ingredients .p .see_ingredient a {display:inline-block; padding-right:10px; text-decoration:underline; font-weight:bold; color:#222222; background:url(../images/common/arrRight_4x5_222222.gif) no-repeat right center;} .productDetailCont .productDetailContR > .see_ingredient {display:block; margin-top:10px;margin-left:5%; font-size:13px;}/* 20190607 */ .productDetailCont .productDetailContR > .see_ingredient a {display:inline-block; padding-right:10px; text-decoration:underline; font-weight:bold; color:#222222; background:url(../images/common/arrRight_4x5_222222.gif) no-repeat right center;}/* 20190607 */ .productDetailCont .warnings {margin:28px 0 0 5%;} .productDetailCont .warnings h4 {font-size:16px; font-weight:bold; color:#222222;} .productDetailCont .warnings .p {margin-top:13px; line-height:1.4; font-size:13px; color:#666666;} /* 제품상세리뷰 */ .productDetail_reviewArea {margin-top:80px; padding-top:75px; border-top:1px solid #dddddd;} .reviewBox {margin-top:40px; padding:40px 40px 36px; background:#fafafa;} .reviewBox .reviewBoxTop {text-align:center;} .reviewBox .reviewBoxTop .average {display:inline-block; vertical-align:middle;} .reviewBox .reviewBoxTop .average .dt {display:inline-block; margin-right:15px; vertical-align:middle; font-size:13px; font-weight:bold; color:#222222;} .reviewBox .reviewBoxTop .average .dd {display:inline-block; vertical-align:middle; line-height:0; font-size:0;} .reviewBox .reviewBoxTop .average .dd img {height:22px;} .reviewBox .reviewBoxTop .recommend {display:inline-block; margin:0 70px; vertical-align:middle;} .reviewBox .reviewBoxTop .recommend .dt {display:inline-block; margin-right:15px; vertical-align:middle; font-size:13px; font-weight:bold; color:#222222;} .reviewBox .reviewBoxTop .recommend .dd {display:inline-block; vertical-align:middle; font-size:30px; font-weight:bold; color:#045321;} .reviewBox .reviewBoxTop .btn {display:inline-block; vertical-align:middle;} .reviewBox .reviewBoxTop .btn a {display:inline-block; padding:0 20px; line-height:40px; font-size:13px; font-weight:bold; color:#ffffff; background:#222222;} .reviewBox .reviewKeyword {margin-top:30px; padding-top:28px; border-top:1px solid #e5e5e5;} .reviewBox .reviewKeyword ul {overflow:hidden; height:24px; text-align:center;} .reviewBox .reviewKeyword ul li {display:inline-block; font-size:13px; color:#666666;} .reviewBox .reviewKeyword ul li a {display:inline-block; line-height:22px; color:#666666;} .reviewBox .reviewKeyword ul li.most {font-weight:bold; line-height:18px; color:#045321;} .reviewBox .reviewKeyword ul li.most a {color:#045321;} .reviewBox .reviewKeyword ul li.on {border-bottom:1px solid #666666;} .reviewBox .reviewKeyword .more {margin-top:20px;} .reviewBox .reviewKeyword .more a {display:block; text-align:center; line-height:28px; border:1px solid #dddddd; background:#f5f5f5;} .reviewBox .reviewKeyword .more a span {display:inline-block; padding-left:13px; font-size:13px; font-weight:bold; color:#666666;} .reviewBox .reviewKeyword .more a.btnMore {} .reviewBox .reviewKeyword .more a.btnMore span {background:url(../images/common/arrDown_7x5_999999.gif) no-repeat left center;} .reviewBox .reviewKeyword .more a.btnClose {display:none;} .reviewBox .reviewKeyword .more a.btnClose span {background:url(../images/common/arrUp_7x5_999999.gif) no-repeat left center;} .reviewBox .reviewKeyword.open ul {height:auto;} .reviewBox .reviewKeyword.open .more a.btnMore {display:none;} .reviewBox .reviewKeyword.open .more a.btnClose {display:block;} /* 제품상세리뷰리스트 */ .reviewSort {overflow:hidden; margin-top:30px;} .reviewSort ul {float:right;} .reviewSort ul li {float:left; padding-left:20px;} .reviewSort ul li .select {width:175px; border:none; border-bottom:1px solid #aaaaaa;} #reviewList {margin-bottom:40px;} .reviewList {} .reviewList .reviewTotal {padding-bottom:10px; font-size:13px; color:#222222; border-bottom:1px solid #aaaaaa;} .reviewList .unit {overflow:hidden; padding:30px 0; border-bottom:1px solid #e5e5e5;} .reviewList .unit .writerArea {float:left; width:215px;} .reviewList .unit .writerArea .reviewPoint {line-height:0; font-size:0;} .reviewList .unit .writerArea .reviewPoint img {height:17px;} .reviewList .unit .writerArea .name {margin-top:19px; font-size:13px; font-weight:bold; color:#222222;} .reviewList .unit .writerArea .name .again {display:none;} .reviewList .unit .writerArea .info {margin-top:15px;} .reviewList .unit .writerArea .info li {margin-top:2px; line-height:1.4; font-size:12px; color:#999999;} .reviewList .unit .writerArea .btn {margin-top:12px;} .reviewList .unit .writerArea .btn a {display:inline-block; width:60px; text-align:center; line-height:18px; font-size:11px; color:#222222; border:1px solid #aaaaaa;} .reviewList .unit .contArea {overflow:hidden} .reviewList .unit .contArea .cont {position:relative; min-height:173px; padding:0 85px 0 260px;} .reviewList .unit .contArea .cont .again {font-size:13px; font-weight:bold; color:#222222;} .reviewList .unit .contArea .cont .onePoint {margin-top:16px; font-size:18px; font-weight:bold; color:#222222;} .reviewList .unit .contArea .cont .p {margin-top:4px; line-height:1.6; font-size:13px; color:#666666;} .reviewList .unit .contArea .cont .youtube {position:absolute; left:0; top:0; width:230px;} .reviewList .unit .contArea .cont .img {position:absolute; left:0; top:0; width:230px;} .reviewList .unit .contArea .cont .img img {width:230px; height:173px;} .reviewList .unit .contArea .cont .more {position:absolute; right:0; bottom:0; background:url(../images/common/BG_reviewMore.png) repeat-x left top;} .reviewList .unit .contArea .cont .more a {display:block; padding:0 10px;} .reviewList .unit .contArea .cont .more img {width:auto; height:auto;} .reviewList .unit .contArea .cont .more span {display:inline-block; vertical-align:middle; line-height:24px; font-size:13px; color:#ffffff;} .reviewList .unit .contArea .cont ul {margin-top:18px;} .reviewList .unit .contArea .cont ul li {margin-top:9px; font-size:13px;} .reviewList .unit .contArea .cont ul li .dt {display:inline-block; margin:5px -4px 0 0; padding-left:9px; font-weight:bold; color:#222222; background:url(../images/common/dot_3x3_646464.gif) no-repeat left 5px;} .reviewList .unit .contArea .cont ul li .dd {display:inline-block; padding-left:9px; margin-top:5px; color:#666666;} .reviewList .unit .contArea .cont ul li .dd .answer {} .reviewList .unit .contArea .cont ul li .dd .answer span {text-decoration:underline;} .reviewList .unit .contArea .cont .feedback {margin-top:9px; padding-left:9px; font-size:13px; font-weight:bold; color:#045321;} .reviewList .unit .contArea .cont .snsLink {position:absolute; right:0; bottom:8px;} .reviewList .unit .contArea .cont .snsLink a {display:inline-block; width:20px; height:20px; vertical-align:middle;} .reviewList .unit .contArea .cont .snsLink a span {line-height:0; font-size:0; opacity:0; filter:alpha(opacity=0);} .reviewList .unit .contArea .cont .snsLink a.snsF {background:url(../images/common/icon_20x20_snsF.png) no-repeat left top;} .reviewList .unit .contArea .cont .snsLink a.snsT {background:url(../images/common/icon_20x20_snsT.png) no-repeat left top;} .reviewList .unit .contArea .cont .snsLink a.snsP {background:url(../images/common/icon_20x20_snsP.png) no-repeat left top;} .reviewList .unit .contArea .cont .snsLink .btn {display:none;} .reviewList .unit .contArea .cont .snsLink .btn a {display:inline-block; vertical-align:middle; line-height:21px; width:80px; text-align:center; font-size:13px; color:#222222; border:1px solid#e5e5e5;} .reviewList .unit.noMovie {} .reviewList .unit.noMovie .contArea .cont {padding-left:0;} @media screen and (max-width: 1230px){ .productDetailVisual .productDetailVisualCont {margin:0 15px;} .pdtReviewinfoWrap .pdtReviewinfo .inner {padding:0 15px;} } @media screen and (max-width: 1000px){ .reviewList .unit .contArea .cont {padding-right:0;} .reviewList .unit .contArea .cont .snsLink {position:static; margin:10px 0 0 9px;} } @media screen and (max-width: 900px){ .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 {text-align:left;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .average {position:static;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .recommend {display:none; margin-top:12px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .recommend .dt {padding-right:10px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReviewType2 .btn {display:none; position:static; margin-top:12px;} } @media screen and (max-width: 768px){ .productDetailVisual {background-size:390% auto !important;} .productDetailVisual .productDetailVisualCont {margin:0;} .productDetailVisual .pdtThumbWrap {position:static; width:auto; margin-top:0; padding:11.8% 12.5% 11.8%;} /* 제품상세요약 */ .productDetailVisual .pdtSummary {width:auto; min-height:0; padding:20px 2.25% 0; color:#222222; background:#ffffff;} .productDetailVisual .pdtSummary .icon {} .productDetailVisual .pdtSummary .icon span {color:#222222 !important; border-color:#222222 !important;} .productDetailVisual .pdtSummary .pdtHeadline {margin-top:9px; font-size:13px; color:#222222 !important;} .productDetailVisual .pdtSummary .pdtName {margin-top:5px; font-size:18px; color:#000000 !important;} .productDetailVisual .pdtSummary .pdtDesc {margin-top:3px; font-size:12px; color:#666666 !important;} .productDetailVisual .pdtSummary .price {margin-top:8px; font-size:13px; color:#000000 !important;} /* .productDetailVisual .pdtSummary .shareMenu {margin-top:30px; line-height:0; font-size:0; border-top:1px solid #dddddd;} .productDetailVisual .pdtSummary .shareMenu .t {display:none;} .productDetailVisual .pdtSummary .shareMenu ul {float:none; padding:15px 0; text-align:center;} .productDetailVisual .pdtSummary .shareMenu ul li {display:inline-block; float:none; padding:0 8px; line-height:0; font-size:0;} .productDetailVisual .pdtSummary .shareMenu ul li a {display:block; width:32px; height:32px;} .productDetailVisual .pdtSummary .shareMenu ul li a.snsF {background:url(../images/common/icon_32x32_snsF.gif) no-repeat left top;} .productDetailVisual .pdtSummary .shareMenu ul li a.snsT {background:url(../images/common/icon_32x32_snsT.gif) no-repeat left top;} .productDetailVisual .pdtSummary .shareMenu ul li a.snsP {background:url(../images/common/icon_32x32_snsP.gif) no-repeat left top;} .productDetailVisual .pdtSummary .shareMenu ul li a.snsE {background:url(../images/common/icon_32x32_snsE.gif) no-repeat left top;} */ .productDetailVisual .pdtSummary .shareMenu {margin-top:10px; text-align:center; background:#fafafa;} .productDetailVisual .pdtSummary .shareMenu .t {display:inline-block; float:none; vertical-align:middle; background:none;} .productDetailVisual .pdtSummary .shareMenu ul {display:inline-block; float:none; padding:0; vertical-align:middle; text-align:center; background:none;} .productDetailVisual .pdtSummary .shareMenu ul li {display:inline-block; float:none; padding:0 8px; vertical-align:middle; line-height:0; font-size:0;} /* 제품상세컬러칩 & 리뷰정보 */ .pdtReviewinfoWrap .pdtReviewinfo .inner {padding:0 2.25%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor {float:none; overflow:hidden; width:auto;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .texture {display:none;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip {padding-top:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip ul {max-width:none;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutColor .colorchip ul li img {width:40px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview {float:none; width:auto; margin-top:16px; padding-top:15px; border-top:1px solid #dddddd;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .dt {width:auto; margin-top:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .dd {margin-top:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .recommend {display:none;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .recommend .dt {width:auto; padding-right:10px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .aboutReview .btn {display:none;} /*2017-08-09 BUYNOW 버튼 추가*/ .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .btn_buynow a{border-radius:0; -webkit-border-radius: 0;-webkit-border-radius: 0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .flL{float: none !important; } .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow{float:none; width:100%; margin-top:5%; bottom:0; left:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList{width:100%; position:static; padding-top:0; } .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul{padding:0; background-color:#FFF;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul > li{ width:100% !important; border-left:0; border-top:1px solid #C3C3C3; background: url(../images/temp/bn_m_arrow.png) 97% center no-repeat; background-size: 3%; } .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul > li:first-child {border-top:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul.pb1 > li{border-bottom:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul > li > a{padding: 12px 0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul > li > a > img{width:17%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul > li > a > img.m_bigImg{width:auto;max-height: 31px;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow .mallList > ul.pb3 > li:last-child{border-bottom:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow.fixed{position:fixed;bottom:0; left:0; z-index:999;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow.fixed .mallList{position:absolute; bottom:57px; top:auto;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow.fixed .mallList > ul {background-color:transparent; border:0; } .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow.fixed .mallList > ul > li{border-bottom: 1px solid #fff; background:#dfdfdf url(../images/temp/fixLi_bg.png) center repeat; background-size: 120%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow.fixed .btn_buynow a{color:#fff;background:url(../images/temp/fixA_bg.png) center no-repeat; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow.fixed .btn_buynow a.pdC{padding:18px 0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow.fixed .mallList.btC{bottom:57px;} .pdtReviewinfoWrap .pdtReviewinfo.new_pdtReviewinfo3 .inner .aboutReview{border-top:0; margin:0; padding:0;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow.fixed .mallList > ul > li > a > img{width:18%;} .pdtReviewinfoWrap .pdtReviewinfo .inner .buynow.fixed .mallList > ul > li > a > img.m_bigImg {width:auto;max-height: 31px;} /* 제품상세내용 */ .productDetail_contArea {margin-top:10px;} .productDetail_contArea .pageTitle {padding-top:0;} .productDetail_contArea .pageTitle .tabType {border-top:none} .productDetail_contArea .pageTitle .tabType ul li a {display:block;} .productDetailCont {margin-top:0;} .productDetailCont .productDetailContL {float:none; width:auto;} .productDetailCont .whatitis {margin:28px 0 0;} .productDetailCont .whatitis h4 {font-size:13px;} .productDetailCont .whatitis .p {margin-top:9px; line-height:1.2; font-size:12px;} .productDetailCont .whatitis .picto {overflow:hidden; margin-top:5px;} .productDetailCont .whatitis .picto li {float:left; margin:2px 2px 0 0;} .productDetailCont .moreDesc {margin:30px 5% 0 0;} .productDetailCont .moreDesc h4 {font-size:13px;} .productDetailCont .moreDesc .p {margin-top:9px; line-height:1.4; font-size:12px;} .productDetailCont .howTo {margin:30px 0 0 0;} .productDetailCont .howTo h4 {font-size:13px;} .productDetailCont .howTo .p {margin-top:9px; line-height:1.2; font-size:12px;} .productDetailCont .howTo ol {overflow:hidden;} .productDetailCont .howTo ol li {float:left; margin:5px 7px 0 0; padding-left:12px; line-height:1.4; font-size:11px; font-weight:normal; background:url(../images/common/arrRight_4x5_aaaaaa.gif) no-repeat left center;} .productDetailCont .productDetailContR {float:none; width:auto;} .productDetailCont .visualStory {margin:28px 0 0;} .productDetailCont .visualStory h4 {font-size:13px;} .productDetailCont .visualStory .movie {margin-top:10px; padding-top:56.3%;} .productDetailCont .visualStory .img {padding-top:6px;} .productDetailCont .visualStory .img ul {margin-right:-4px;} .productDetailCont .visualStory .img ul li span {margin:4px 4px 0 0;} .productDetailCont .visualStory .img ul li span a {position:absolute; left:0; top:0; width:100%; height:100%;} .productDetailCont .visualStory .img ul li span a img {position:absolute; right:0; bottom:0; width:26px;} .productDetailCont .ingredients {margin:28px 0 0 0;} .productDetailCont .ingredients h4 {font-size:13px;} .productDetailCont .ingredients .p {margin-top:9px; line-height:1.2; font-size:12px;} .productDetailCont .ingredients .p .see_ingredient {margin-top:7px;} .productDetailCont .ingredients .p .see_ingredient a {font-weight:normal;} .productDetailCont .productDetailContR > .see_ingredient {margin-top:7px; margin-left:0; font-size:12px;} .productDetailCont .productDetailContR > .see_ingredient a {font-weight:normal;} .productDetailCont .warnings {margin:28px 0 0 0;} .productDetailCont .warnings h4 {font-size:13px;} .productDetailCont .warnings .p {margin-top:9px; line-height:1.2; font-size:12px;} /* 제품상세리뷰 */ .productDetail_reviewArea {margin-top:30px; padding-top:0; border:none;} .productDetail_reviewArea .pageTitle {padding-top:0;} .productDetail_reviewArea .pageTitle .tabType ul li a {display:block;} .reviewBox {margin-top:30px; padding:0; border:1px solid #e5e5e5;} .reviewBox .reviewBoxTop {} .reviewBox .reviewBoxTop .average {display:block; overflow:hidden; padding:15px 10px;} .reviewBox .reviewBoxTop .average .dt {float:left; line-height:22px;} .reviewBox .reviewBoxTop .average .dd {float:right;} .reviewBox .reviewBoxTop .recommend {display:block; overflow:hidden; margin:0; padding:12px 10px; border-top:1px solid #e5e5e5;} .reviewBox .reviewBoxTop .recommend .dt {float:left; line-height:36px;} .reviewBox .reviewBoxTop .recommend .dd {float:right;} .reviewBox .reviewBoxTop .btn {display:block; margin:0 10px;} .reviewBox .reviewBoxTop .btn a {display:block; line-height:40px;} .reviewBox .reviewKeyword {margin-top:10px; padding:10px;} .reviewBox .reviewKeyword ul {height:46px;} .reviewBox .reviewKeyword .more {margin-top:5px;} .reviewBox .reviewKeyword .more a {border:none; background:none;} .reviewBox .reviewKeyword .more a span {padding:0 13px 0 0; text-decoration:underline; background-position:right center !important;} /* 제품상세리뷰리스트 */ .reviewSort {overflow:hidden; margin-top:20px;} .reviewSort ul {float:none; overflow:hidden;} .reviewSort ul li {float:left; padding-left:0; width:50%;} .reviewSort ul li span {display:block;} .reviewSort ul li.sortL span {padding-right:10px;} .reviewSort ul li.sortR span {padding-left:10px;} .reviewSort ul li .select {width:100%;} .reviewList {margin-top:-25px;} .reviewList .reviewTotal {display:none;} .reviewList .unit {padding:40px 0 15px;} .reviewList .unit .writerArea {float:none; width:auto; padding:15px; background:#fafafa;} .reviewList .unit .writerArea .name {margin-top:10px; font-weight:normal;} .reviewList .unit .writerArea .name .again {display:inline;} .reviewList .unit .writerArea .info {overflow:hidden; position:relative; margin-top:10px;} .reviewList .unit .writerArea .info li {float:left; position:relative; left:-15px; margin-top:2px; padding-left:15px; background:url(../images/common/bar_1x12_cdd1cf.gif) no-repeat 7px 2px;} .reviewList .unit .writerArea .btn {display:none;} .reviewList .unit .contArea .cont {padding:0;} .reviewList .unit .contArea .cont .again {display:none;} .reviewList .unit .contArea .cont .onePoint {margin-top:16px; font-size:18px; font-weight:bold; color:#222222;} .reviewList .unit .contArea .cont .p {margin-top:4px; line-height:1.6; font-size:13px; color:#666666;} .reviewList .unit .contArea .cont .youtube {position:relative; width:auto; margin-top:10px; padding-top:56.3%;} .reviewList .unit .contArea .cont .youtube iframe {position:absolute; left:0; top:0; width:100%; height:100%;} .reviewList .unit .contArea .cont .img {position:relative; width:auto; margin-top:10px; text-align:center;} .reviewList .unit .contArea .cont .img img {width:auto; height:auto;} .reviewList .unit .contArea .cont ul {margin-top:15px;} .reviewList .unit .contArea .cont ul li {margin-top:9px; font-size:13px;} .reviewList .unit .contArea .cont .feedback {font-weight:normal;} .reviewList .unit .contArea .cont .snsLink a {width:23px; height:23px;} .reviewList .unit .contArea .cont .snsLink a.snsF {background:url(../images/common/icon_23x23_snsF.png) no-repeat left top;} .reviewList .unit .contArea .cont .snsLink a.snsT {background:url(../images/common/icon_23x23_snsT.png) no-repeat left top;} .reviewList .unit .contArea .cont .snsLink a.snsP {background:url(../images/common/icon_23x23_snsP.png) no-repeat left top;} .reviewList .unit .contArea .cont .snsLink .btn {display:inline-block; margin-left:10px; vertical-align:middle;} } /* 리뷰작성 */ .reviewWriteWrap {margin-bottom:-40px; padding-bottom:120px; background:#f5f5f5;} .reviewWriteWrap .reviewWrite_inner {max-width:720px; margin:0 auto;} .reviewWriteWrap .title {padding:74px 0 64px; text-align:center; font-size:32px; color:#222222;} /* 리뷰작성 - 완료 */ .reviewWriteWrap .reviewWriteComplete {padding:60px 0; text-align:center; background:#ffffff; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#cccccc,Positive=1,OffX=2,OffY=2); box-shadow:1px 1px 2px rgba(0,0,0,0.1); } .reviewWriteWrap .reviewWriteComplete .t {font-size:16px; font-weight:bold; color:#222222;} .reviewWriteWrap .reviewWriteComplete .p {margin-top:10px; font-size:13px; color:#666666;} .reviewWriteWrap .reviewWriteComplete .btn {text-align:center; margin-top:43px;} .reviewWriteWrap .reviewWriteComplete .btn a {display:inline-block; padding:0 20px; line-height:40px; font-size:13px; color:#ffffff; background:#222222;} /* 리뷰작성 - 작성 */ .reviewWriteWrap .pdt_info {overflow:hidden;} .reviewWriteWrap .pdt_info .thumb {float:left; width:170px; margin-right:40px;} .reviewWriteWrap .pdt_info .txt {overflow:hidden;} .reviewWriteWrap .pdt_info .txt h3 {font-size:16px; color:#222222;} .reviewWriteWrap .pdt_info .txt .p {margin-top:30px; line-height:1.4; font-size:13px; color:#888888;} .reviewWriteWrap .reviewWrite_form {margin-top:50px; padding:45px 50px 75px; background:#ffffff; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#cccccc,Positive=1,OffX=2,OffY=2); box-shadow:1px 1px 2px rgba(0,0,0,0.1); } .reviewWriteWrap .reviewWrite_form .fieldMsg {margin-bottom:5px; font-size:13px; color:#c50000;} .reviewWriteWrap .reviewWrite_form .infoTitle {overflow:hidden;} .reviewWriteWrap .reviewWrite_form .infoTitle h3 {float:left; line-height:1.4; font-size:16px; color:#222222;} .reviewWriteWrap .reviewWrite_form .infoTitle .p {float:right; margin-top:2px; padding-left:10px; line-height:1.4; font-size:13px; color:#222222; background:url(../images/common/bul_required.gif) no-repeat left 6px;} .reviewWriteWrap .reviewWrite_form .msg {margin-top:45px; font-size:13px; color:#666666;} .reviewWriteWrap .reviewWrite_form .msg span {color:#045321;} .reviewWriteWrap .reviewWrite_form .grayBox {margin-top:37px; padding:28px 30px; background:#fafafa;;} .reviewWriteWrap .reviewWrite_form .grayBox h4 {font-size:16px; color:#222222;} .reviewWriteWrap .reviewWrite_form .grayBox .p {margin-top:17px; line-height:1.4; font-size:13px; color:#222222;} .reviewWriteWrap .reviewWrite_form .grayBox ul {} .reviewWriteWrap .reviewWrite_form .grayBox ul li {padding-left:12px; line-height:1.4; font-size:13px; color:#666666; background:url(../images/common/dot_2x2_888888.gif) no-repeat 2px 7px;} .reviewWriteWrap .reviewWrite_form .grayBox ul li .link {display:inline-block; color:#045321; border-bottom:1px solid #76937e;} .reviewWriteWrap .reviewWrite_form .dlArea {margin-top:17px; border-top:1px solid #aaaaaa;} .reviewWriteWrap .reviewWrite_form .dl {overflow:hidden; padding-top:30px;} .reviewWriteWrap .reviewWrite_form .dl dt {float:left; width:28%; padding-top:3px;} .reviewWriteWrap .reviewWrite_form .dl dt span {display:inline-block; padding-right:10px; line-height:1.4; font-size:13px; color:#222222;} .reviewWriteWrap .reviewWrite_form .dl dt span.required {padding-left:10px; line-height:1.4; font-size:13px; color:#222222; background:url(../images/common/bul_required.gif) no-repeat left 6px;} .reviewWriteWrap .reviewWrite_form .dl dd {overflow:hidden;} .reviewWriteWrap .reviewWrite_form .section {margin-top:55px;} .reviewWriteWrap .reviewWrite_form .section .dl dd .input-text {width:100%; height:28px; border:none; border-bottom:1px solid #dddddd;} .reviewWriteWrap .reviewWrite_form .section .dl dd .textarea {width:100%; height:100px; line-height:1.4; font-size:13px; color:#222222; border:none; border-bottom:1px solid #dddddd;} .reviewWriteWrap .reviewWrite_form .section .dl dd .select {width:100%; height:29px; border:none; border-bottom:1px solid #dddddd;} .reviewWriteWrap .reviewWrite_form .section .dl dd .byte {margin-top:8px; text-align:right; font-size:13px; color:#999999;} .reviewWriteWrap .reviewWrite_form .section .dl dd .byte strong {color:#045321;} .reviewWriteWrap .reviewWrite_form .section .dl dd label.error {display:block; margin-top:10px;} .reviewWriteWrap .reviewWrite_form .section1 {} .reviewWriteWrap .reviewWrite_form .section1 .dl {padding:15px 0; border-bottom:1px solid #e5e5e5;} .reviewWriteWrap .reviewWrite_form .section1 .dl dt {width:45%; padding-top:0;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd .point {} .reviewWriteWrap .reviewWrite_form .section1 .dl dd .point .pointLeaf {display:inline-block; margin-right:10px; vertical-align:middle; line-height:0; font-size:0;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd .point .pointLeaf img {height:22px; margin-right:1px;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd .point .pointTxt {display:inline-block; vertical-align:middle; line-height:1.4; font-size:16px; font-weight:bold; color:#045321;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd p.error {margin-top:10px; font-size:13px; color:#c50000;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd .unit {display:inline-block; margin-right:10px; vertical-align:top;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd .unit .input-radio {width:17px; height:17px;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd .unit .input-check {width:17px; height:17px;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd .unit .label {font-size:13px; color:#666666;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd.unitWrap {overflow:visible; margin-bottom:-15px;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd.unitWrap .unit {margin-bottom:15px;} .reviewWriteWrap .reviewWrite_form .section3 .dlArea {position:relative;} .reviewWriteWrap .reviewWrite_form .section3 .dl dt {padding-top:5px;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea {} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul {} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li {position:relative; min-height:30px; padding-bottom:25px; padding-right:185px;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li .fileZone {min-height:18px; padding:6px 0; line-height:18px; border-bottom:1px solid #dddddd;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li .fileZone .fileName {display:inline-block; vertical-align:middle; font-size:13px; color:#666666; border-bottom:1px solid #9f9f9f;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li .fileZone .btnDelete {display:inline-block; padding:5px; vertical-align:middle;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li .uploadBtn {position:absolute; right:0; top:0;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li .uploadBtn .btnFile {display:inline-block; position:relative; width:81px; vertical-align:top; text-align:center; line-height:28px; font-size:13px; color:#222222; border:1px solid #aaaaaa;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li .uploadBtn .btnFile .input-file {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; filter:alpha(opacity=0); cursor:pointer;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li .uploadBtn .btnUpload {display:inline-block; width:83px; vertical-align:top; text-align:center; line-height:30px; font-size:13px; color:#ffffff; background:#aaaaaa;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea .maxMb {margin-top:-10px; font-size:13px; color:#999999;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea .maxMb span {display:inline-block; border-bottom:1px solid #bcbcbc;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea .formatMsg {margin-top:7px; font-size:13px; color:#c50000;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .pasteUrl {margin-top:10px; font-size:13px; color:#999999;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .pasteUrl .link {display:inline-block; color:#045321; border-bottom:1px solid #789580;} .reviewWriteWrap .reviewWrite_form .section3 .upload_img {display:none; position:absolute; left:50%; top:0; width:170px; margin-left:-86px; border:1px solid #dddddd; background:#ffffff; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#cccccc,Positive=1,OffX=5,OffY=5); box-shadow:1px 1px 5px rgba(0,0,0,0.15); } .reviewWriteWrap .reviewWrite_form .section3 .upload_img .btnClose {position:absolute; right:0; top:0; padding:7px 10px;} .reviewWriteWrap .reviewWrite_form .reviewWriteBtn {margin-top:40px; text-align:center;} .reviewWriteWrap .reviewWrite_form .reviewWriteBtn a {display:inline-block; width:131px; text-align:center; line-height:38px; font-size:13px;} .reviewWriteWrap .reviewWrite_form .reviewWriteBtn a.btnBlack {color:#ffffff; border:1px solid #222222; background:#222222;} .reviewWriteWrap .reviewWrite_form .reviewWriteBtn a.btnWhite {color:#222222; border:1px solid #454b51;} @media screen and (max-width: 768px){ .reviewWriteWrap {padding-top:40px;} .reviewWriteWrap .reviewWrite_inner {margin:0 2.25%;} .reviewWriteWrap .title {padding:33px 2.25%; font-size:20px;} .reviewWriteWrap .reviewWriteComplete {padding:20px 15px;} .reviewWriteWrap .reviewWriteComplete .btn {margin-top:20px;} .reviewWriteWrap .reviewWriteComplete .btn a {display:block;} .reviewWriteWrap .pdt_info .thumb {margin-right:5%;} .reviewWriteWrap .pdt_info .txt .p {margin-top:5%;} } @media screen and (max-width: 640px){ .reviewWriteWrap .reviewWrite_form {margin-top:5%; padding:12px 15px 30px;} .reviewWriteWrap .reviewWrite_form .msg {margin-top:20px; font-size:12px;} .reviewWriteWrap .reviewWrite_form .infoTitle h3 {float:none; font-size:14px;} .reviewWriteWrap .reviewWrite_form .infoTitle .p {float:none; margin-top:5px;} .reviewWriteWrap .reviewWrite_form .grayBox {margin-top:20px; padding:15px;} .reviewWriteWrap .reviewWrite_form .grayBox h4 {font-size:14px;} .reviewWriteWrap .reviewWrite_form .grayBox .p {margin-top:10px; font-size:12px;} .reviewWriteWrap .reviewWrite_form .grayBox ul {} .reviewWriteWrap .reviewWrite_form .grayBox ul li {padding-left:10px; font-size:12px; background:url(../images/common/dot_2x2_888888.gif) no-repeat 0 6px;} .reviewWriteWrap .reviewWrite_form .dlArea {margin-top:10px;} .reviewWriteWrap .reviewWrite_form .dl {padding-top:10px;} .reviewWriteWrap .reviewWrite_form .section {margin-top:20px;} .reviewWriteWrap .reviewWrite_form .section .dl dt {width:100px;} .reviewWriteWrap .reviewWrite_form .section .dl dd .byte {margin-top:5px; font-size:12px;} .reviewWriteWrap .reviewWrite_form .section1 {margin-top:10px;} .reviewWriteWrap .reviewWrite_form .section1 .dl {padding:10px 0;} .reviewWriteWrap .reviewWrite_form .section1 .dl dt {float:none; width:auto;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd {margin-top:10px;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd.unitWrap {margin-bottom:-10px;} .reviewWriteWrap .reviewWrite_form .section1 .dl dd.unitWrap .unit {margin-bottom:10px;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li {padding-bottom:10px; padding-right:0;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea ul li .uploadBtn {position:static; margin-top:10px;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea .maxMb {margin-top:0; font-size:12px;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea .maxMb span {border-bottom:none;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .uploadArea .formatMsg {font-size:12px;} .reviewWriteWrap .reviewWrite_form .section3 .dl dd .pasteUrl {margin-top:7px; font-size:12px;} .reviewWriteWrap .reviewWrite_form .reviewWriteBtn {margin-top:20px;} } @media screen and (max-width: 480px){ .reviewWriteWrap .pdt_info .thumb {float:none; width:auto; margin-right:0; text-align:center;} .reviewWriteWrap .pdt_info .txt {float:none; margin-top:5%;} } /* 이니뷰티파인더 */ .beautyFinderWrap {margin:0 auto -40px; padding-bottom:120px; background:url(../images/product/BG_beautyFinder.jpg) no-repeat center top; background-size:cover;} .beautyFinderWrap .beautyFinderTitle {padding:74px 0 70px; text-align:center;} .beautyFinderWrap .beautyFinderTitle h2 {font-size:32px; color:#222222;} .beautyFinderWrap .beautyFinderTitle .desc {margin-top:12px; line-height:1.4; font-size:13px; color:#666666;} .beautyFinderWrap .info_form {max-width:800px; margin:0 auto; padding:70px 50px; background:#ffffff;} .beautyFinderWrap .info_form .infoTitle {overflow:hidden; padding-bottom:17px; border-bottom:1px solid #aaaaaa;} .beautyFinderWrap .info_form .infoTitle h3 {float:left; font-size:16px; font-weight:bold; color:#222222;} .beautyFinderWrap .info_form .infoTitle .p {float:right; font-size:13px; color:#222222;} .beautyFinderWrap .info_form .dl {overflow:hidden; margin-top:35px;} .beautyFinderWrap .info_form .dl dt {float:left; width:135px; padding:7px 5px 0 0; font-size:14px; font-weight:bold; color:#222222;} .beautyFinderWrap .info_form .dl dd {overflow:hidden;} .beautyFinderWrap .info_form .dl dd .select {display:block; width:50%; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .beautyFinderWrap .info_form .btn {margin-top:40px; text-align:center;} .beautyFinderWrap .info_form .btn a {display:inline-block; min-width:243px; padding:0 10px; text-align:center;} .beautyFinderWrap .info_form .btn a span {display:inline-block; line-height:48px; font-size:13px;} .beautyFinderWrap .info_form .btn a.btnB {border:1px solid #222222; background:#222222;} .beautyFinderWrap .info_form .btn a.btnB span {color:#ffffff;} .beautyFinderWrap .info_form .btn a.btnW {border:1px solid #222222; background:#ffffff;} .beautyFinderWrap .info_form .btn a.btnW span {color:#222222;} .beautyFinderResult {max-width:800px; margin:0 auto; padding:37px 50px 70px; background:#f5f5f5;} .beautyFinderResult h3 {text-align:center; font-size:18px; color:#222222; background:url(../images/common/line_1x1_aaaaaa.gif) repeat-x center center;} .beautyFinderResult h3 span {display:inline-block; padding:0 40px; background:#f5f5f5;} .beautyFinderResult .stepList {margin-top:37px;} .beautyFinderResult .stepList ol {overflow:hidden;} .beautyFinderResult .stepList ol li {float:left; width:20%; text-align:center;} .beautyFinderResult .stepList ol li .inner {min-height:346px; padding:36px 10px 0; background:url(../images/common/line_1x1_e9e9e9.gif) repeat-y right top;} .beautyFinderResult .stepList ol li.step5 .inner {background:none;} .beautyFinderResult .stepList ol li .step {font-size:18px; font-weight:bold; color:#222222;} .beautyFinderResult .stepList ol li .step span {display:inline-block; padding:0 12px; line-height:28px; font-weight:18px; font-weight:bold; color:#222222; border-radius:15px; border:1px solid #222222;} .beautyFinderResult .stepList ol li .pdtCate {margin-top:15px;} .beautyFinderResult .stepList ol li .pdtCate span {font-size:13px; font-weight:bold; color:#024137;} .beautyFinderResult .stepList ol li .pdt {margin-top:60px;} .beautyFinderResult .stepList ol li .pdtName {margin-top:10px; line-height:1.4; font-size:13px; color:#222222;} .beautyFinderResult .stepList ol li .desc {margin-top:5px; line-height:1.4; font-size:13px; color:#666666;} .beautyFinderResult .stepList ol li .noCont {padding-top:120px; line-height:1.4; font-size:13px; font-weight:bold; color:#222222;} .beautyFinderResult .btn {margin-top:60px; text-align:center;} .beautyFinderResult .btn a {display:inline-block; min-width:245px; padding:0 10px; text-align:center; background:#222222;} .beautyFinderResult .btn a span {display:inline-block; line-height:50px; font-size:13px; color:#ffffff;} @media screen and (max-width: 768px){ .beautyFinderWrap {padding-top:40px;} .beautyFinderWrap .beautyFinderTitle {padding:33px 2.25%;} .beautyFinderWrap .beautyFinderTitle h2 {font-size:20px;} .beautyFinderWrap .beautyFinderTitle .desc {margin-top:7px; font-size:12px;} .beautyFinderWrap .info_form {margin:0 2.25%; padding:20px 15px;} .beautyFinderWrap .info_form .infoTitle {padding-bottom:10px;} .beautyFinderWrap .info_form .infoTitle h3 {float:none; font-size:14px;} .beautyFinderWrap .info_form .infoTitle .p {float:none; margin-top:6px; font-size:12px;} .beautyFinderWrap .info_form .dl {margin-top:20px;} .beautyFinderWrap .info_form .dl dt {float:left; width:100px; font-size:13px;} .beautyFinderWrap .info_form .dl dd {} .beautyFinderWrap .info_form .dl dd .select {width:100%; font-size:12px;} .beautyFinderWrap .info_form .btn a {display:block; width:auto;} .beautyFinderResult {margin:0 2.25%; padding:20px 15px 30px; background:#f5f5f5;} .beautyFinderResult h3 {font-size:14px;} .beautyFinderResult h3 span {padding:0 20px;} .beautyFinderResult .stepList {margin-top:15px;} .beautyFinderResult .stepList ol li {width:33.3%;} .beautyFinderResult .stepList ol li.step4 {clear:both;} .beautyFinderResult .stepList ol li .inner {padding:25px 5px 0; background:none;} .beautyFinderResult .stepList ol li .step {font-size:14px;} .beautyFinderResult .stepList ol li .pdtCate {} .beautyFinderResult .stepList ol li .pdt {margin-top:20px;} .beautyFinderResult .stepList ol li .pdtName {margin-top:5px; font-size:12px;} .beautyFinderResult .stepList ol li .desc {margin-top:3px; font-size:12px;} .beautyFinderResult .btn {margin-top:20px;} .beautyFinderResult .btn a {display:block;} } @media screen and (max-width: 480px){ .beautyFinderWrap {background-size:auto 100%;} .beautyFinderResult .stepList ol li {width:50%;} .beautyFinderResult .stepList ol li.step3 {clear:both;} .beautyFinderResult .stepList ol li.step4 {clear:none;} .beautyFinderResult .stepList ol li.step5 {clear:both;} } /* 베스트셀러 & 제품검색 */ .searchProductVisual {background:url(../images/product/visual_searchProduct.jpg) no-repeat center top;} .bestSellerVisual {background:url(../images/product/visual_bestseller.jpg) no-repeat center top;} .bestSellerListWrap {padding-bottom:40px;} .bestSellerListWrap .bestSellerList {overflow:hidden;} .bestSellerListWrap .bestSellerList ul {overflow:hidden; margin-right:-36px;} .bestSellerListWrap .bestSellerList ul li {float:left; position:relative; width:25%; margin-top:40px;} .bestSellerListWrap .bestSellerList ul li a {display:block; position:relative; margin-right:36px;} .bestSellerListWrap .bestSellerList ul li button {display:block; position:relative; margin-right:36px; background:none; border:0; cursor:pointer; appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius:0} .bestSellerListWrap .bestSellerList ul li .no {position:absolute; left:0; top:0; width:25.6%; max-width:70px;} .bestSellerListWrap .bestSellerList ul li .thumb {display:block; text-align:center;} .bestSellerListWrap .bestSellerList ul li .thumb img {width:100%;} .bestSellerListWrap .bestSellerList ul li .name {display:block; margin-top:10px; text-align:center; line-height:1.4; font-size:13px; color:#222222;} .bestSellerListWrap .bestSellerList ul li .point {display:block; margin-top:5px; text-align:center; font-size:12px; font-weight:bold; color:#666666;} .bestSellerListWrap .bestSellerList ul li .point img {height:17px;} .bestSellerListWrap .bestSellerList ul li .price {display:block; margin-top:8px; text-align:center; font-size:12px; font-weight:bold; color:#222222;} .bestSellerListWrap .bestSellerList ul li .desc {margin-top:3px; text-align:center; line-height:1.4; font-size:13px; color:#666666} .bestSellerListWrap .bestSellerList ul li:nth-of-type(4n+1) {clear:both;} .bestSellerListWrap .bestSellerList ul li.step4_clear {clear:both;} .bestSellerListWrap .paging {margin-top:45px; padding-top:20px; border-top:1px solid #e5e5e5;} @media screen and (max-width: 900px){ .bestSellerListWrap .bestSellerList ul {margin-right:-30px;} .bestSellerListWrap .bestSellerList ul li {width:33.3%; margin-top:30px;} .bestSellerListWrap .bestSellerList ul li a {margin-right:30px;} .bestSellerListWrap .bestSellerList ul li button {margin-right:30px} .bestSellerListWrap .bestSellerList ul li:nth-of-type(4n+1) {clear:none;} .bestSellerListWrap .bestSellerList ul li:nth-of-type(3n+1) {clear:both;} .bestSellerListWrap .bestSellerList ul li.step4_clear {clear:none;} .bestSellerListWrap .bestSellerList ul li.step3_clear {clear:both;} } @media screen and (max-width: 640px){ .bestSellerListWrap .bestSellerList ul {margin-right:-15px;} .bestSellerListWrap .bestSellerList ul li {width:50%; margin-top:15px;} .bestSellerListWrap .bestSellerList ul li a {margin-right:15px;} .bestSellerListWrap .bestSellerList ul li button {margin-right:15px} .bestSellerListWrap .bestSellerList ul li:nth-of-type(3n+1) {clear:none;} .bestSellerListWrap .bestSellerList ul li:nth-of-type(2n+1) {clear:both;} .bestSellerListWrap .bestSellerList ul li.step3_clear {clear:none;} .bestSellerListWrap .bestSellerList ul li.step2_clear {clear:both;} } .bestSellerTab {margin-top:55px;} .bestSellerTab ul {text-align:center;} .bestSellerTab ul li {display:inline-block; vertical-align:top;} .bestSellerTab ul li a {display:inline-block; margin:0 13px; padding:0 5px 11px; font-size:16px; font-weight:bold; color:#666666;} .bestSellerTab ul li.on a {color:#222222; border-bottom:2px solid #222222;} .bestSellerTab .select {display:none; height:34px; width:50%; max-width:300px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} @media screen and (max-width: 980px){ .bestSellerTab ul {display:none;} .bestSellerTab .select {display:block;} } /* ========== [OFFERS & EVENT] ========== */ /* 리스트 */ .offersWrap {max-width:1200px; margin:0 auto;} .offersWrap .offersList {padding-top:10px;} .offersWrap .offersList ul {} .offersWrap .offersList ul:after {content:''; display:block; clear:both;} .offersWrap .offersList ul li {clear:both; float:left; width:50%; margin-top:2.5%;} .offersWrap .offersList ul li .link {display:block; position:relative; margin:0 2.5% 0 0.8%;} .offersWrap .offersList ul li .thumb {} .offersWrap .offersList ul li .thumb img {width:100%;} .offersWrap .offersList ul li .aboutOfferWrap {left:0; bottom:-0.5px; width:100%;} .offersWrap .offersList ul li .aboutOffer {display:block; padding:4.3% 2.6% 4.6%; text-align:center; border:1px solid #dddddd; background:#ffffff;} .offersWrap .offersList ul li .aboutOffer .t {display:block; font-size:16px; color:#222222;} .offersWrap .offersList ul li .aboutOffer .p {display:block; margin-top:1.2%; font-size:16px; color:#666666;} .offersWrap .offersList ul li .aboutOffer .date {display:block; margin-top:2.9%; font-size:13px; color:#999999;} .offersWrap .offersList ul li.even {clear:none;} .offersWrap .offersList ul li.even .link {margin:0 0.8% 0 2.5%;} .offersWrap .otherOffers {display:none; margin:35px 2.26%; text-align:center; border:1px solid #000000;} .offersWrap .otherOffers a {display:block; font-size:14px; font-weight:bold;} .offersWrap .otherOffers a span {display:inline-block; padding:15px 17px 15px 0; color:#222222; background:url(../images/common/arr_otherOffers.gif) no-repeat right center;} @media screen and (max-width: 1230px){ .offersWrap {padding:0 15px;} } @media screen and (max-width: 768px){ .offersWrap {padding:0;} .offersWrap .offersList {padding-top:0;} .offersWrap .offersList ul li {float:none; width:100%; margin:0 auto !important; border-bottom:10px solid #f5f5f5;} .offersWrap .offersList ul li .link {margin:0 !important;} .offersWrap .offersList ul li .aboutOffer {text-align:left;} .offersWrap .offersList ul li .aboutOffer .t {font-size:13px;} .offersWrap .offersList ul li .aboutOffer .p {display:none;} .offersWrap .offersList ul li .aboutOffer .date {font-size:12px;} .offersWrap .otherOffers {display:block;} } /* 상세 */ .offerEventDetailTop {} .offersDetail {} .offersDetail .offersDetailCont {padding-top:24px; line-height:1.8; font-size:13px; color:#222222;} .offersDetail .offersDetailBtn {margin-top:33px; padding:20px 0; text-align:right; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;} .offersDetail .offersDetailBtn .btn {display:inline-block; min-width:185px; padding:0 10px; text-align:center; background:#222222;} .offersDetail .offersDetailBtn .btn span {display:inline-block; line-height:40px; font-size:13px; color:#ffffff;} /* 댓글작성폼 */ .offersDetail .btnPrevious {margin-top:40px;} .offersDetail .btnPrevious a {display:block; text-align:center; border:1px solid #e6e6e6; background:#f5f5f5;} .offersDetail .btnPrevious a span {display:inline-block; padding-left:18px; line-height:52px; font-size:13px; font-weight:bold; color:#666666; background:url(../images/common/BG_cross_10x10.gif) no-repeat left center;} .offersDetail .cautionMsg {margin-bottom:0; padding:55px 0; border:none; border-top:1px solid #aaaaaa; border-bottom:1px solid #e5e5e5; } .offersDetail .offersDetailSection {} .offersDetail .replyWriteForm {padding:30px 30px 40px; border-bottom:1px solid #e5e5e5; background:#fafafa;} .offersDetail .replyWriteForm .t {margin-left:7px; font-size:13px; font-weight:bold; color:#222222;} .offersDetail .replyWriteForm .writeSecton {position:relative; margin-top:15px; padding-right:142px;} .offersDetail .replyWriteForm .writeSecton .writeCont {min-height:110px; padding:10px; border:1px solid #adadad; background:#ffffff;} .offersDetail .replyWriteForm .writeSecton .writeCont .plzLogin {padding:7px 0 0 5px; line-height:18px; font-size:13px; color:#999999;} .offersDetail .replyWriteForm .writeSecton .writeCont .plzLogin .icon {} .offersDetail .replyWriteForm .writeSecton .writeCont .plzLogin .icon img {width:18px;} .offersDetail .replyWriteForm .writeSecton .writeCont .plzLogin a {display:inline-block; color:#222222; border-bottom:1px solid #818181;} .offersDetail .replyWriteForm .writeSecton .writeCont .textarea {border:none; width:100%; height:110px; line-height:1.6; font-size:13px; color:#999999;} .offersDetail .replyWriteForm .writeSecton .writeCont label.error {position:absolute; left:0; top:100%; margin-top:10px;} .offersDetail .replyWriteForm .writeSecton .btnSubmit {position:absolute; right:0; top:0; width:132px; height:132px; text-align:center; line-height:132px; font-size:16px; color:#ffffff; background:#222222;} /* .offersDetail .replyWriteForm .writeSecton .byte {margin-top:18px; text-align:right; font-size:13px; color:#999999;} .offersDetail .replyWriteForm .writeSecton .byte span {color:#045321;} */ /* 댓글리스트 */ .offersDetail .replyArea {} .offersDetail .replyArea .total {margin:20px 0 0 15px; font-size:13px; font-weight:bold; color:#666666;} .offersDetail .replyArea .total span {color:#045321;} .offersDetail .replyList {margin-top:20px; border-top:1px solid #aaaaaa;} .offersDetail .replyList .unit {position:relative; padding:30px 0; border-bottom:1px solid #e5e5e5;} .offersDetail .replyList .unit .written_info {overflow:hidden;} .offersDetail .replyList .unit .written_info .writer {float:left; line-height:16px; font-size:13px; font-weight:bold; color:#999999;} .offersDetail .replyList .unit .written_info .date {float:left; line-height:16px;} .offersDetail .replyList .unit .written_info .date span {display:inline-block; padding-left:15px; vertical-align:top; font-size:11px; color:#999999;} .offersDetail .replyList .unit .cont {margin:20px 200px 0 0;line-height:1.4; font-size:13px; color:#666666;} .offersDetail .replyList .unit .btn {position:absolute; right:0; bottom:60px;} .offersDetail .replyList .unit .btn a {display:inline-block; line-height:14px; font-size:11px; color:#222222;} .offersDetail .replyList .unit .btn a.btnEdit {padding-left:18px; background:url(../images/common/BG_btnEdit.png) no-repeat left center;} .offersDetail .replyList .unit .btn a.btnDelete {padding-left:15px; background:url(../images/common/BG_btnDelete.png) no-repeat left center;} .offersDetail .replyList .unit .btn span {margin-left:17px; padding-left:21px; background:url(../images/common/bar_1x12_cdd1cf.gif) no-repeat left center;} .offersDetail .replyList .unit .moreReply {margin-top:15px; font-size:13px; color:#222222;} .offersDetail .replyList .unit .moreReply a {display:inline-block; padding-right:15px; color:#222222; background:url(../images/common/arrDown_7x5_222222.gif) no-repeat right center;} .offersDetail .replyList .unit .moreReply a span {display:inline-block; border-bottom:1px solid #818181;} .offersDetail .replyList .unit .moreReply.on a {background:url(../images/common/arrUp_7x5_222222.gif) no-repeat right center;} .offersDetail .replyList .unit .writeArea {padding:10px; border:1px solid #aaaaaa;} .offersDetail .replyList .unit .writeArea .textarea {width:100%; height:90px; line-height:1.6; font-size:13px; color:#999999; border:none;} .offersDetail .replyList .unit .writeArea label.error {position:absolute; left:0; bottom:30px;} .offersDetail .replyList .unit .writeArea .plzLogin {min-height:80px; padding:7px 0 0 5px; line-height:18px; font-size:13px; color:#999999;} .offersDetail .replyList .unit .writeArea .plzLogin .icon {position:static;} .offersDetail .replyList .unit .writeArea .plzLogin .icon img {width:18px;} .offersDetail .replyList .unit .writeArea .plzLogin a {display:inline-block; color:#222222; border-bottom:1px solid #818181;} .offersDetail .replyList .unit .write_info {margin-top:15px; text-align:right;} /* .offersDetail .replyList .unit .write_info .byte {display:inline-block; vertical-align:middle; font-size:13px; color:#999999;} .offersDetail .replyList .unit .write_info .byte span {color:#045321;} */ .offersDetail .replyList .unit .write_info .btn2 {display:inline-block; margin-left:15px; vertical-align:middle;} .offersDetail .replyList .unit .write_info .btn2 a {display:inline-block; width:60px; vertical-align:middle; text-align:center; font-size:11px; line-height:18px; border:1px solid #aaaaaa;} .offersDetail .replyList .unit .write_info .btn2 a.btnType1 {color:#ffffff; background:#aaaaaa;} .offersDetail .replyList .unit .write_info .btn2 a.btnType2 {color:#222222;} .offersDetail .replyList .replyUnit {display:none;} .offersDetail .replyList .replyUnit .unit {padding-left:33px;} .offersDetail .replyList .replyUnit .unit .icon {position:absolute; left:0; top:30px;} .offersDetail .replyList .replyUnit .unit .writeArea label.error {left:30px;} .offersDetail .replyList .replyUnit .unit .btn {bottom:30px;} @media screen and (max-width: 768px){ .offerEventDetailTop {padding-top:0;} .bannerOn .offerEventDetailTop {padding-top:0;} #wrap.app_mode .offerEventDetailTop {padding-top:0 !important;} .offersDetail .offersDetailCont {padding-top:17px; line-height:1.4; font-size:12px;} .offersDetail .offersDetailBtn {margin-top:20px; padding-top:15px;} .offersDetail .offersDetailBtn .btn {display:block;} .offersDetail .offersDetailBtn .btn span {padding-right:17px; line-height:50px; font-size:14px; font-weight:bold; background:url(../images/common/arrRight_7x12_ffffff.png) no-repeat right center;} .offersDetailSection {} .offersDetail .replyList .unit .cont {margin-right:0;} .offersDetail .replyList .unit .btn {bottom:30px;} .offersDetail .replyList .replyUnit .unit .btn {position:static; margin-top:15px; text-align:right;} } @media screen and (max-width: 640px){ .offersDetail .offersDetailSection {margin:20px -2.5% 0; padding:30px 2.25% 0; border-top:10px solid #f5f5f5;} .offersDetail .replyWriteForm {margin-top:20px; padding:0; border-bottom:none; background:#ffffff;} .offersDetail .replyWriteForm .t {margin-left:0; font-weight:normal;} .offersDetail .replyWriteForm .writeSecton {padding-right:0;} .offersDetail .replyWriteForm .writeSecton .writeCont {position:relative; padding:10px 0; border-left:none; border-right:none;} .offersDetail .replyWriteForm .writeSecton .writeCont .plzLogin {padding-left:0;} .offersDetail .replyWriteForm .writeSecton .writeCont label.error {top:100%; margin-top:13px;} .offersDetail .replyWriteForm .writeSecton .btnSubmit {display:block; position:static; width:auto; height:auto; margin-top:35px; line-height:50px; font-size:14px; font-weight:bold;} .offersDetail .replyList .unit {padding:20px 0;} .offersDetail .replyList .unit .written_info .date span {padding-left:10px; font-size:13px;} .offersDetail .replyList .unit .cont {margin-top:15px;} .offersDetail .replyList .unit .btn {bottom:20px;} .offersDetail .replyList .unit .writeArea {padding:0; border:none;} .offersDetail .replyList .unit .writeArea .textarea {border-bottom:1px solid #dddddd;} .offersDetail .replyList .unit .writeArea label.error {display:block; position:static; margin:20px 0 -20px;} .offersDetail .replyList .unit .writeArea .plzLogin {min-height:inherit; text-align:center;} .offersDetail .replyList .unit .write_info {margin-top:40px;} .offersDetail .replyList .unit .write_info .byte {display:block;} .offersDetail .replyList .unit .write_info .btn2 {display:block; margin-left:0;} .offersDetail .replyList .unit .write_info .btn2 a {width:70px; line-height:28px; font-size:12px;} .offersDetail .replyList .replyUnit .unit {padding:20px 0;} .offersDetail .replyList .replyUnit .unit .writeArea {margin-top:30px;} .offersDetail .replyList .replyUnit .unit .icon {top:20px;} .offersDetail .replyList .replyUnit .unit .written_info {padding-left:25px;} } /* ========== [NEWS] ========== */ /* 리스트 */ .newsWrap {max-width:1200px; margin:0 auto;} @media screen and (max-width: 1230px){ .newsWrap {padding:0 15px;} } @media screen and (max-width: 768px){ .newsWrap {padding:0 2.25%;} } /* 상세 */ .newsDetail {} .newsDetail .newsTitle {padding-bottom:17px; line-height:1.4; font-size:18px; color:#222222; border-bottom:1px solid #aaaaaa;} .newsDetail .date {margin:20px 20px 0 0; text-align:right; font-size:13px; color:#999999;} .newsDetail .newsDetailCont {} .newsDetail .newsDetailCont .p {margin-top:35px; line-height:1.4; font-size:13px; color:#666666;} .newsDetail .newsDetailCont .img {margin-top:40px;} .newsDetail .newsDetailBtn {margin-top:55px; padding-top:20px; text-align:center; border-top:1px solid #e5e5e5;} .newsDetail .newsDetailBtn .btn {display:inline-block; min-width:185px; padding:0 10px; text-align:center; background:#222222;} .newsDetail .newsDetailBtn .btn span {display:inline-block; line-height:40px; font-size:13px; color:#ffffff;} @media screen and (max-width: 768px){ .newsDetail .newsTitle {padding-bottom:0; text-align:center; border-bottom:none;} .newsDetail .newsTitle span {display:block; margin-bottom:8px; font-size:13px;} .newsDetail .date {text-align:center;} .newsDetail .newsDetailCont {padding-top:10px;} .newsDetail .newsDetailCont .p {font-size:12px;} .newsDetail .newsDetailCont .img {margin-top:14px;} .newsDetail .newsDetailBtn {margin-top:20px; padding-top:15px;} .newsDetail .newsDetailBtn .btn {display:block;} .newsDetail .newsDetailBtn .btn span {padding-right:17px; line-height:50px; font-size:14px; font-weight:bold; background:url(../images/common/arrRight_7x12_ffffff.png) no-repeat right center;} } /* ========== [STORE] ========== */ /* 매장지도 */ .storeMap {position:relative;} .storeMap .storeSearch {position:absolute; right:30px; top:60px; min-width:330px; background:#ffffff; z-index:10; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#cccccc,Positive=1,OffX=10,OffY=10); box-shadow:5px 5px 10px rgba(0,0,0,0.2); } .storeMap .storeSearch h2 {padding:16px 30px; line-height:1.4; font-size:14px; color:#222222; background:#f5f5f5;} .storeMap .storeSearch .searchForm {padding:25px 30px;} .storeMap .storeSearch .searchForm .t {font-size:13px; color:#222222;} .storeMap .storeSearch .searchForm .selectCountry {margin-top:20px;} .storeMap .storeSearch .searchForm .selectCountry .p {font-size:13px; color:#222222;} .storeMap .storeSearch .searchForm .selectCountry .cell {position:relative; margin-top:10px;} .storeMap .storeSearch .searchForm .selectCountry .cell .select {display:block; width:100%; height:27px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .storeMap .storeSearch .searchForm .selectCountry .cell label.error {display:block; margin-top:10px;} .storeMap .storeSearch .searchForm .selectCountry .cell .input-search {display:block; width:100%; height:26px; padding-right:25px; line-height:24px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .storeMap .storeSearch .searchForm .selectCountry .searchCell {padding-right:25px;} .storeMap .storeSearch .searchForm .selectCountry .searchCell .btnSearch {position:absolute; right:0; top:2px; width:16px;} .storeMap .mapArea {overflow:hidden; position:relative; height:598px; border:1px solid #e5e5e5; background:#e5e5e5;} .storeMap .storeDetail {position:absolute; left:100px; top:100px; width:272px; padding:20px 17px; border:1px solid #222222; background:#ffffff;} .storeMap .storeDetail .btnClose {position:absolute; right:0; top:0; padding:10px 9px;} .storeMap .storeDetail .storeName {padding-right:30px; font-size:13px; font-weight:bold; color:#222222;} .storeMap .storeDetail .storeAddress {margin-top:5px; line-height:1.4; font-size:13px; color:#666666;} .storeMap .storeDetail .phoneNumber {margin-top:14px; font-size:13px; color:#666666;} .storeMap .storeDetail .phoneNumber span {color:#222222;} .storeMap .storeDetail .storeHoursPop{margin-top:14px; } .storeMap .storeDetail .storeHoursPop:after{content:''; display:block; clear:both;} .storeMap .storeDetail .storeHoursPop span {display:block; float:left; font-size:13px; color:#666666; line-height:1.8;} .storeMap .storeDetail .storeHoursPop span:first-child {margin-right:4px; color:#222222;} .storeMap .storeDetail .storePhoto {margin-top:11px;} .storeMap .storeDetail .storePhoto img {width:100%;} .storeWrap {max-width:1200px; margin:0 auto;} .storeWrap .listType1 {} .storeWrap .listType1 .td.storeName {font-size:14px; color:#222222;} .storeWrap .listType1 .td .phone {display:inline-block; margin-left:5px; vertical-align:middle;} .m_listType2 {display:none; margin:28px 0.25% 0;} .m_listType2 .caption {padding:0 10px 17px; font-size:15px; font-weight:bold; color:#222222; border-bottom:1px solid #aaaaaa;} .m_listType2 ul {} .m_listType2 ul li {padding:23px 10px 22px; border-bottom:1px solid #e5e5e5;} .m_listType2 ul li a.findStore {display:block;} .m_listType2 ul li a.findStore .storeName {display:block; font-size:15px; font-weight:bold; color:#222222;} .m_listType2 ul li a.findStore .storeAddress {display:block; margin-top:5px; font-size:15px; color:#666666;} .m_listType2 ul li .storeHours {display: block; color: #666; font-size: 13px; line-height:1.8; margin-top: 10px;} .m_listType2 ul li a.tel {display:inline-block; margin-top:11px;} .m_listType2 ul li a.tel .number {display:inline-block; vertical-align:middle; font-size:13px; color:#666666;} @media screen and (max-width: 1230px){ .storeWrap {padding:0 15px;} } @media screen and (max-width: 768px){ .storeMap {padding-top:0; border-bottom:10px solid #f5f5f5;} .storeMap .storeSearch {position:static;} .storeMap .storeSearch h2 {padding:16px 2.25%; font-size:13px; background:#fafafa;} .storeMap .storeSearch .searchForm {padding:18px 2.25%;} .storeMap .storeSearch .searchForm .t {font-size:12px;} .storeMap .storeSearch .searchForm .selectCountry {margin-top:15px;} .storeMap .storeSearch .searchForm .selectCountry .p {font-size:12px;} .storeMap .storeSearch .searchForm .selectCountry .cell {margin-top:10px;} .storeMap .storeSearch .searchForm .selectCountry .cell .select {height:27px; font-size:12px;} .storeMap .storeSearch .searchForm .selectCountry .cell label.error {margin-top:8px;} .storeMap .storeSearch .searchForm .selectCountry .cell .input-search {height:26px; padding-right:25px; line-height:24px; font-size:12px;} .storeMap .storeSearch .searchForm .selectCountry .searchCell {padding-right:25px;} .storeMap .storeSearch .searchForm .selectCountry .searchCell .btnSearch {top:0; width:20px; height:26px; padding-left:5px;} .storeMap .mapArea {height:220px;} .storeMap .storeDetail {position:static; width:auto; padding:13px 2.25% 20px; border:none; border-bottom:1px solid #e5e5e5;} .storeMap .storeDetail .btnClose {display:none;} .storeMap .storeDetail .storeName {padding-right:0; font-size:14px;} .storeMap .storeDetail .phoneNumber {margin-top:9px;} .storeMap .storeDetail .storePhoto {margin-top:11px;} .storeWrap {padding:0 2.25%;} .m_listType2 {display:block;} } /* ========== [CUSTOMER] ========== */ .customerContent .customerMenu {position:relative; border-bottom:1px solid #e5e5e5;} .customerContent .pageTitle {display:block;} .customerContent .customerMenuList {overflow:hidden;} .customerContent .customerMenuList ul {text-align:center;} .customerContent .customerMenuList ul li {display:inline-block;} .customerContent .customerMenuList ul li a {display:inline-block; height:39px; padding:21px 18px 0; line-height:1.4; font-size:13px; font-weight:bold; color:#999999;} .customerContent .customerMenuList ul li.on a {color:#222222;} .customerContent .customerMenuList ul + div {display:none;} @media screen and (max-width: 768px){ .customerContent {} .customerContent .customerMenu {margin-top:40px;} .customerContent .customerMenuList ul {width:750px; margin:0 auto;} .customerContent .customerMenuList ul li a {height:29px; padding:11px 19px 0; white-space:nowrap;} .customerContent .pageTitle {padding-top:0;display:none;} } /* 약관,개인정보처리방침 */ .incl_titleNo > .title{display:none;} .utilBox {position:relative;} .utilBox .title {margin-top:22px; margin-bottom:-6px; line-height:1.4; font-size:13px; font-weight:bold; color:#222222;} .utilBox .paragraph {margin-top:18px; line-height:1.4; font-size:13px; color:#666666;} .utilBox .paragraph .tit_s {margin-bottom:10px;} .utilBox .ul {} .utilBox .ul li {margin-top:3px; line-height:1.4; font-size:13px; color:#666666;} .utilBox a {color:#666666;} /* 20190829_캐나다 */ .utilBox.ca .ul li a, .line_blue {text-decoration:underline !important;color:#0000ff !important} .utilBox .paragraph.givea{padding-left:25px; position:relative; margin-bottom:5px} .utilBox .paragraph.givea i{text-decoration:none; font-style:normal; position:absolute; left:10px; top:0} /* FAQ */ .faqWrap {margin-top:-58px;} .faqCategory {margin-top:58px;} .faqCategory .title {padding:0 13px 20px 13px; font-size:16px; font-weight:bold; color:#222222; border-bottom:1px solid #aaaaaa;} .faqCategory .unit {padding:36px 13px 29px 13px; border-bottom:1px solid #e5e5e5;} .faqCategory .unit .question {line-height:1.4; font-size:13px; color:#222222;} .faqCategory .unit .answer {margin-top:12px; line-height:1.4; font-size:13px; color:#666666;} .faqCategory .unit .answer span.faq_red{color:#de2910;} .faqWrap .emailUs {margin-top:27px; padding-left:28px; line-height:1.4; font-size:13px; color:#666666; background:url(../images/common/dot_2x2_999999.gif) no-repeat 15px 8px;} .faqWrap .emailUs a {display:inline-block; color:#0c6835; border-bottom:1px solid #0c6835;} /* CONTACT US */ .contactWrap {} /* CONTACT US - 상단박스 */ .contactWrap .contactBox {padding:30px 0; text-align:center; border:10px solid #f5f5f5;} .contactWrap .contactBox .icon {} .contactWrap .contactBox h3 {margin-top:15px; font-size:26px; color:#222222;} .contactWrap .contactBox .p {margin-top:3px; font-size:13px; color:#666666;} .contactWrap .writeusMsg {margin-top:37px;} .contactWrap .writeusMsg .p {line-height:1.4; font-size:13px; font-weight:bold; color:#222222;} .contactWrap .writeusMsg .also {margin-top:12px; line-height:1.4; font-size:13px; color:#666666;} .contactWrap .writeusMsg .also a {display:inline-block; color:#222222; border-bottom:1px solid #222222;} /* CONTACT US - 하단박스 */ .contactWrap .contactForm {margin-top:57px;} .contactWrap .contactForm .msg {overflow:hidden;} .contactWrap .contactForm .msg .please {float:left; line-height:1.4; font-size:13px; color:#c50000;} .contactWrap .contactForm .msg .note {float:right; padding-left:10px; line-height:1.4; font-size:13px; color:#222222; background:url(../images/common/bul_required.gif) no-repeat left 6px;} .contactWrap .contactForm .contactBox {margin-top:18px; padding:30px 39px 30px; border:1px solid #aaaaaa;} .contactWrap .contactForm .contactBox ul {overflow:hidden;} .contactWrap .contactForm .contactBox ul li {float:left; width:50%; min-height:55px; margin-top:15px; text-align:left;} .contactWrap .contactForm .contactBox ul li .dl {overflow:hidden;} .contactWrap .contactForm .contactBox ul li .dl .dt {float:left; width:170px; padding:7px 15px 0 0; font-size:13px; font-weight:bold; color:#222222;} .contactWrap .contactForm .contactBox ul li .dl .dt span {display:inline-block; padding-left:10px;} .contactWrap .contactForm .contactBox ul li .dl .dt .required {background:url(../images/common/bul_required.gif) no-repeat left 5px;} .contactWrap .contactForm .contactBox ul li .dl .dd {overflow:hidden;} .contactWrap .contactForm .contactBox ul li .dl .dd .select {display:block; width:100%; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .contactWrap .contactForm .contactBox ul li .dl .dd .input-text {display:block; width:100%; height:28px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .contactWrap .contactForm .contactBox ul li .dl .dd .textarea {display:block; width:100%; height:100px; line-height:1.4; font-size:13px; color:#999999; border:none; border-bottom:1px solid #aaaaaa;} .contactWrap .contactForm .contactBox ul li .dl .dd label.error {margin-top:10px;} .contactWrap .contactForm .contactBox ul li.halfCellL {clear:both;} .contactWrap .contactForm .contactBox ul li.halfCellL .dl {padding-right:13.4%;} .contactWrap .contactForm .contactBox ul li.halfCellR {} .contactWrap .contactForm .contactBox ul li.halfCellR .dl {padding-left:13.4%;} .contactWrap .contactForm .contactBox ul li.wideCell {width:100%;} .contactWrap .contactForm .contactBox ul li.wideCell .dl {} .contactWrap .contactForm .contactBtn {margin-top:25px; text-align:center;} .contactWrap .contactForm .contactBtn .btn {display:inline-block; min-width:115px; padding:0 10px; text-align:center; background:#222222;} .contactWrap .contactForm .contactBtn .btn span {display:inline-block; line-height:40px; font-size:13px; color:#ffffff;} .contactWrap .contactForm .emailUs {overflow:hidden; margin-top:55px;} .contactWrap .contactForm .emailUs .dt {float:left;margin-right:20px;font-size: 15px;line-height:1.4;font-weight:bold;color:#222222;} .contactWrap .contactForm .emailUs .dd {display:block;overflow:hidden;line-height:1.4;font-size: 15px;color:#666666;} .contactWrap .contactForm .emailUs .dd a {display:inline-block; color:#024137; border-bottom:1px solid #024137;} @media screen and (max-width: 768px){ .contactWrap .contactBox {padding:15px; border:5px solid #f5f5f5;margin-top:30px;} .contactWrap .contactBox .icon img {width:50px;} .contactWrap .contactBox h3 {font-size:16px;} .contactWrap .writeusMsg {margin-top:17px;} .contactWrap .contactForm {margin-top:27px;} .contactWrap .contactForm .msg .please {float:none;} .contactWrap .contactForm .msg .note {float:none; margin-top:5px;} .contactWrap .contactForm .contactBox {margin-top:8px; padding:10px;} .contactWrap .contactForm .contactBox ul li {float:none !important; width:auto !important; min-height:inherit; margin-top:10px;} .contactWrap .contactForm .contactBox ul li .dl {padding:0 !important;} .contactWrap .contactForm .contactBox ul li .dl .dt {width:100px; padding:4px 10px 0 0; font-size:12px;} .contactWrap .contactForm .contactBox ul li .dl .dt .required {background-position:left 4px;} .contactWrap .contactForm .contactBox ul li .dl .dd .select {font-size:12px;} .contactWrap .contactForm .contactBox ul li .dl .dd .input-text {font-size:12px;} .contactWrap .contactForm .contactBox ul li .dl .dd .textarea {font-size:12px;} .contactWrap .contactForm .contactBox ul li .dl .dd label.error {margin-top:6px;} .contactWrap .contactForm .contactBtn {margin-top:20px;} .contactWrap .contactForm .contactBtn .btn {display:block;} .contactWrap .contactForm .contactBtn .btn span {padding-right:17px; line-height:50px; font-size:14px; font-weight:bold; background:url(../images/common/arrRight_7x12_ffffff.png) no-repeat right center;} .contactWrap .contactForm .emailUs {overflow:hidden; margin-top:20px;} .contactWrap .contactForm .emailUs .dt {margin-right:15px; font-size:14px;} .contactWrap .contactForm .emailUs .dd {font-size:14px} .faqWrap{margin-top:-30px;} .utilBox{margin-top:30px;} } /* CONTACT US 완료 */ .contactComplete {padding:75px 0 90px; text-align:center; border-top:10px solid #f5f5f5; border-bottom:10px solid #f5f5f5;} .contactComplete .thanks {line-height:1.4; font-size:13px; color:#666666;} .contactComplete .thanks strong {display:block; margin-bottom:12px; font-size:26px; color:#222222;} .contactComplete .btnReturn {margin-top:50px;} .contactComplete .btnReturn a {display:inline-block; background:#222222;} .contactComplete .btnReturn a span {display:inline-block; min-width:260px; padding:13px 10px 12px; font-size:13px; color:#ffffff;} @media screen and (max-width: 768px){ .contactComplete {padding:30px 0 40px; border-top:5px solid #f5f5f5; border-bottom:5px solid #f5f5f5;} .contactComplete .thanks strong {margin-bottom:7px; font-size:18px;} .contactComplete .btnReturn {margin-top:30px;} .contactComplete .btnReturn a {display:block;} .contactComplete .btnReturn a span {display:block; width:auto; font-size:13px;} } /* MEMBER GUIDE */ .tblMemberGuide {} .tblMemberGuide thead th {padding:10px 5px; line-height:18px; color:#666666; border:1px solid #e5e5e5; border-top:1px solid #aaaaaa; background:#f5f5f5;} .tblMemberGuide tbody th {padding:15px 5px; text-align:center; line-height:18px; font-size:14px; color:#222222; border:1px solid #e5e5e5;} .tblMemberGuide tbody td {padding:15px 5px; text-align:center; line-height:18px; font-size:14px; color:#666666; border:1px solid #e5e5e5;} .tblMemberGuide .color1 {color:#222222;} .tblMemberGuide .color2 {color:#222222;} .tblMemberGuide .msg {margin-top:10px; line-height:1.4; font-size:14px; color:#666666;} .tblMemberGuide .msg .brText{padding-left: 6px;} .tblMemberGuide_2 thead th{font-size: 14px;} .tblMemberGuide_2 thead th.color1{background-color: #F8F8F8;} .tblMemberGuide_2 thead th.color2{background-color: #E6E6E6;} .tblMemberGuide_2 thead th.color3{background-color: #D3D2D2;} .grayBigArrow{margin: 3% 0; padding: 7% 0;width: 100%; height: auto; background:url(../images/customer/grayBigArrow.png) center no-repeat;} .text2017Wrap {} .text2017Wrap h2{text-align: center; font-size: 32px; color: #222222;} .text2017Wrap > p{margin-top: 1%; text-align: center; font-size: 32px; color: #222222;} .text2017Wrap > p > span{vertical-align: middle; padding: 0 10px; font-size: 50px; color: #d3d2d2; line-height: 1.2;} .text2017Wrap .member2017Dl{width: 75%; margin: 2% auto 4% auto;} .text2017Wrap .member2017Dl.wC{width: 84%;} .text2017Wrap .member2017Dl.wC2{width: 87%;} .text2017Wrap .member2017Dl dl dt{margin-bottom: 3%; text-align: left; font-size: 18px; line-height: 1.6; font-weight: bold; color: #000;} .text2017Wrap .member2017Dl dl dd{padding-left: 10px; margin-bottom: 15px; background:url(../images/customer/2017ListDot.png) 0 8px no-repeat; font-size: 16px; color: #545454; text-align: left;} .text2017Wrap .member2017Dl dl dd:last-child{margin-bottom: 0;} .roundGreen{display: inline-block; -webkit-border-radius: 50px;-moz-border-radius: 50px; border-radius: 50px; width: 45px; margin-right: 5px; line-height: 15px; border: 1px solid #3F7A55; color: #3F7A55; font-size: 12px; font-weight: bold;} .gr_line{color: #055321; line-height: 15px; border-bottom: 1px solid #055321;} a.gr_line{color: #055321;} .grText{color: #055321; font-weight: bold;} .popUpArea {display:none; position:absolute; left:0; top:0; z-index:1001; width:100%; height:100%;} .popUpArea.AP_On {z-index:1001 !important;} .popUpArea .popBg{position:absolute; left:0; top:0; z-index:991; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=80)} .popUpArea .popUpContainer{ width:100%; margin:0 auto; position:fixed; top:50%; left:0; margin-top:-400px; z-index:995;} .popUpArea .massgeWrap .popUpContainer{width:100%; position:absolute; top:0; left:1%; z-index:995;} .popUpArea.massgeWrap .popUpContainer{margin-top:0; top:0; position:absolute; top:0; left:0; width:100%; } .popUpArea .phonJoin .popUpContainer{ top:600px; } .popUpArea .popUpContainer .popUpCont{max-width:653px; margin:0 auto; text-align:left;} .popUpArea .popUpContainer .popUpCont div.title h3{padding-bottom: 3%; font-size: 20px; color: #222; font-weight: normal;} .popUpArea .popUpContainer .popUpCont div.title:after { content:''; display:block; clear:both;} .popUpArea .popUpContainer .popUpCont div.title span{float:left; display:block; font-size:16px; font-weight:bold; color:#fff; } .popUpArea .popUpContainer .popUpCont div.title a{position:absolute; top:28px; right:26px;} .popUpArea .popUpContainer .popUpCont .cont {padding: 4%; margin:0 auto; position:relative; background-color: #fff;} .popUpArea .popUpContainer .popUpCont .cont .in_text{padding-top: 3%; padding-bottom: 3%; border-top: 1px solid #222; border-bottom: 1px solid #222; max-height: 490px; overflow-y:scroll} .popUpArea.AP_PPOn .popUpContainer .popUpCont .cont .in_text{min-height: 546px; overflow:auto;} .popUpArea.AP_On .popUpContainer .popUpCont .cont .in_text{max-height:410px;} .popUpArea.AP_On .popUpContainer.topC{} .popUpArea .popUpContainer .popUpCont .cont .in_text.utilBox .paragraph{color: #333;} .popUpArea .popUpContainer .popUpCont .cont .in_text.utilBox .paragraph a{display: inline-block; margin-top: 15px; border-bottom: 1px solid #1155CC; color: #1155CC;} .popUpArea .popUpContainer .popUpCont .cont .in_text .paragraph{color: #333;} .popBtnWrap {margin-top: 4%; text-align: center;} button.popButton {display: inline-block; cursor:pointer; text-align: center; width: 133px; height: 40px; line-height: 24px; color:#ffffff; border:1px solid #222222; background:#222222;} .in_text .popTable{margin-top: 2%; width: 100%;} .in_text .popTable > table{width: 100%; border-top:1px solid #ccc; border-right: 1px solid #ccc;} .in_text .popTable > table > thead > tr > th{border-bottom:1px solid #ccc; border-left: 1px solid #ccc; font-size: 13px; color: #333; text-align: center; font-weight: bold; padding: 10px 0;} .in_text .popTable > table > tbody > tr > td{border-bottom:1px solid #ccc; border-left: 1px solid #ccc; text-align: center; font-size: 13px; color: #333; padding: 10px 0; } .in_text .popTable > table > tbody > tr > td.taL{padding-left: 3%; text-align: left;} .in_text .popTable.pd > table > tbody > tr > td, .in_text .popTable.pd > table > tbody > tr > th {padding:10px;} /* 언어선택 탭 */ .privacy_tab {position:absolute;top:-120px;right:10px;} .privacy_tab ul li {display:inline-block;margin-left:20px;} .privacy_tab ul li:first-child {margin-left:0;} .privacy_tab ul li > a {display:inline-block;border-bottom:1px solid #fff;line-height:1.4;font-size:16px;color:#666} .privacy_tab ul li.on > a {border-bottom:1px solid #2f2f2f;font-weight:bold;color:#2f2f2f;} @media screen and (max-width: 768px){ .grayBigArrow{padding: 10% 0; -webkit-background-size: contain; background-size: contain;} .text2017Wrap h2{font-size: 22px; } .text2017Wrap > p{font-size: 22px;} .text2017Wrap .member2017Dl{width: 92% !important;} .text2017Wrap .member2017Dl dl dt{font-size: 13px;} .text2017Wrap .member2017Dl dl dd{font-size: 13px; background-position: 0 5px;} .popUpArea .popUpContainer{margin-top: -375px;} .privacy_tab {position:inherit;top:inherit;right:inherit;text-align:center;} .privacy_tab ul {display:inline-block;} } @media screen and (max-width: 640px){ .popUpArea .popUpContainer .popUpCont div.title a{top:15px;} .popUpArea .popUpContainer{margin-top: -245px; } .popUpArea .popUpContainer .popUpCont .cont .in_text{max-height: 360px;} .popUpArea.AP_PPOn .popUpContainer .popUpCont .cont .in_text{min-height:408px;} .popUpArea .popUpContainer .popUpCont div.title h3{font-size:16px;} } /* ========== [GIFT CARD] ========== */ /*gift card*/ .giftcardWrap {text-align:center;border:none;} .giftcardWrap .vMiddle {position:absolute;top:50%;left:0%;width:100%;-moz-transform:translate(0, -50%);-webkit-transform:translate(0, -50%);transform:translate(0, -50%);} .giftcardWrap .section_1 {position:relative;height:294px;font-size:26px;color:#fff;background:url('../images/giftcard/visual.jpg') no-repeat center center / cover;} .giftcardWrap .section_1 h3 {padding-top:10px;font-size:48px;font-weight:bold;} .giftcardWrap .section_2 {max-width:1200px;margin:100px auto 0;} .giftcardWrap .section_2 .giftcardBanner {position:relative;min-height:519px;margin:0 auto 50px;background:url('../images/giftcard/cardBanner_bg.jpg') no-repeat center center / cover;} .giftcardWrap .section_2 .giftcardBanner .inner {left:0;right:0;max-width:520px;padding:55px 0;margin:0 auto;font-size:30px;font-weight:bold;line-height:1.4;color:#f8ffe7;background-color:#085338} .giftcardWrap .section_2 .giftcardInfo {display:table;width:100%;} .giftcardWrap .section_2 .giftcardInfo .infoBox {display:table-cell;position:relative;width:49.5%;max-width:595px;padding:40px 0 115px;line-height:1.4;color:#222;background:#f8fef1 url('../images/giftcard/box1_bg.gif') no-repeat center bottom / cover;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;box-shadow:3px 3px 3px 0 rgba(0,0,0,0.1);} .giftcardWrap .section_2 .giftcardInfo .infoBox .tit {font-size:28px;font-weight:bold;} .giftcardWrap .section_2 .giftcardInfo .infoBox .txt {padding:0 10px;font-size:23px;} .giftcardWrap .section_2 .giftcardInfo .infoBox .txt2 {position:absolute;bottom:0;left:0;right:0;width:auto;height:85px;margin:0 auto;text-align:center;font-size:21px;color:#00290f;} .giftcardWrap .section_2 .giftcardInfo .box1 ul {position:relative;margin-top:55px;font-size:0;z-index:3;} .giftcardWrap .section_2 .giftcardInfo .box1 li {display:inline-block;position:relative;width:43%;max-width:252px;margin:0 10px;text-align:left;color:#fff;} .giftcardWrap .section_2 .giftcardInfo .box1 li.card3 {position:absolute;top:38%;left:0;right:0;margin:0 auto;z-index:3;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top {position:absolute;top:4px;left:6%;width:87%;letter-spacing:-0.4px;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top span {font-size:14px;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top .free {position:absolute;top:7px;right:0;font-weight:bold;text-align:right} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top .price {display:block;font-size:57px;line-height:100%;font-weight:bold;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top .price > em {display:inline-block;font-size:32px;line-height:42px;vertical-align:top;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top .price + p {margin-top:-3px;font-size:16px;color:#fdff68;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top .price + p > em {display:inline-block;margin-left:2px;font-size:23px;vertical-align:inherit;} .giftcardWrap .section_2 .giftcardInfo .box1 .deco {position:absolute;left:7%;bottom:22%;width:19.19%;z-index:3;} .giftcardWrap .section_2 .giftcardInfo .box2 {background:#f2fcff url('../images/giftcard/box2_bg.gif') no-repeat center bottom / cover;} .giftcardWrap .section_2 .giftcardInfo .box2 .image {max-width:559px;margin:45px auto 25px} .giftcardWrap .section_2 .giftcardInfo .box2 .image img {width:100%;} .giftcardWrap .section_2 .giftcardInfo .box2 .appBtn {} .giftcardWrap .section_2 .giftcardInfo .box2 .appBtn > a {display:inline-block;width:40%;margin:0 0.5%;} .giftcardWrap .section_2 .giftcardInfo .box2 .appBtn > a:first-child {width:36%} .giftcardWrap .section_2 .giftcardInfo .infoBoxB {width:1%;} .giftcardWrap .section_3 {padding:100px 0 75px;margin-top:95px;background-color:#f8f8f8} .giftcardWrap .section_3 .inner {max-width:1200px;margin:0 auto;font-size:15px;color:#666;} .giftcardWrap .section_3 .inner .tit {font-size:32px;font-weight:bold;color:#222;} .giftcardWrap .section_3 .qnaList {margin-top:65px;text-align:left;} .giftcardWrap .section_3 .qnaList dt {position:relative;display:block;padding:25px 148px 25px 18px;color:#222;cursor:pointer;border-top:1px solid #e5e5e5;} .giftcardWrap .section_3 .qnaList dt:first-child {border-top:1px solid #606060;} .giftcardWrap .section_3 .qnaList dt:after {content:'';position:absolute;top:30px;right:18px;width:14px;height:9px;opacity:.5;filter: alpha(opacity=50);background:url('../images/giftcard/accordion_arrow.png') no-repeat 0 0 / cover; -moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);-webkit-transform:rotate(180deg) } .giftcardWrap .section_3 .qnaList dt.on:after {-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform:rotate(0deg);opacity:1;filter: alpha(opacity=100);} .giftcardWrap .section_3 .qnaList dd {display:none;padding:0 148px 25px 18px;line-height:1.4;} .giftcardWrap .section_3 .qnaList dd .br {display:block;margin-bottom:15px;} .giftcardWrap .section_3 .qnaList + ul {padding:25px 148px 25px 18px;border-top:1px solid #e5e5e5} .giftcardWrap .section_3 .qnaList + ul li {display:block;padding-left:9px;text-align:left;background:url('../images/giftcard/bullet.gif') no-repeat 0 8px;} .giftcardWrap .section_3 .qnaList + ul li a {display:inline-block;color:#0c6835;border-bottom:1px solid #0c6835} /*20190121 GIFT CARD MY 추가*/ .myGiftBr{display: none;} .myGiftBr2{display: block;} .giftcardWrap .section_1.my{background:url('../images/giftcard/visual_my.jpg') no-repeat center center / cover;} .giftcardWrap .section_1.my .vMiddle .card_ribbon{margin: 30px 0 10px;} .giftcardWrap .section_1.my .vMiddle .card_ribbon strong {display:inline-block; padding-left:24px; background:url('../images/giftcard/left_BG.png') no-repeat left center;} .giftcardWrap .section_1.my .vMiddle .card_ribbon span {display:inline-block; padding-right:24px; background:url('../images/giftcard/right_BG.png') no-repeat right center;} .giftcardWrap .section_1.my .vMiddle .card_ribbon em {display:block; width:288px; text-align:center; line-height:36px; font-size:16px; font-weight: bold; color:#fff; letter-spacing:7px;background:#4c9748;} .giftcardWrap .section_2.my .giftcardBanner{background:url('../images/giftcard/cardBanner_bg_my.jpg') no-repeat center center / cover;} .giftcardWrap .section_2.my .giftcardBanner .inner{background:#024137;font-size: 30px;color:#fff;} .giftcardWrap .section_2.my .giftcardBanner .inner span{font-size:23px;color: #f8ffe7;} .giftcardWrap .section_2.my .giftcardInfo .infoBox{display:block;width: 100%;max-width: 1200px;padding-top:55px;background: url('../images/giftcard/box1_bg_my.gif') no-repeat center bottom / cover;} .giftcardWrap .section_2.my .giftcardInfo .box1 ul{margin-top: 30px;} .giftcardWrap .section_2.my .giftcardInfo .box1 li{width:33%;max-width: 250px;} .giftcardWrap .section_2.my .giftcardInfo .box1 li p{display:inline-block;padding:0px 5px;font-size:14px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .free{position:static;margin-top:20%;text-align: center;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price{font-size: 45px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price > em{font-size:24px;vertical-align: bottom;line-height: 28px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price + p{margin:10px 0 3px;font-size:14px;color: #fff;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price + p > em{font-size:14px;} .giftcardWrap .section_2.my .giftcardInfo .box1 li.card2{margin-left: 0;} .giftcardWrap .section_2.my .giftcardInfo .box1 li.card3{position: inherit;} .giftcardWrap .section_2.my .giftcardInfo .box1 li.card1 p{background:#0f5e38;} .giftcardWrap .section_2.my .giftcardInfo .box1 li.card2 p{background:#024137;} .giftcardWrap .section_2.my .giftcardInfo .box1 li.card3 p{background:#006f49;} .giftcardWrap .section_2.my .giftcardInfo .box1 li.card1 .price, .giftcardWrap .section_2.my .giftcardInfo .box1 li.card2 .price, .giftcardWrap .section_2.my .giftcardInfo .box1 li.card3 .price{background: none;} .giftcardWrap .section_2.my .giftcardInfo .box1 .deco{bottom:41.5%;left:0%;} .giftcardWrap .section_2.my .giftcardInfo .box1 p.txt3 {display:block;margin-top:10px;padding:0;background:none !important;font-size: 16px; color: #222; font-weight:bold;text-align: center;} .giftcardWrap .section_2.my .giftcardInfo .infoBox .txt2 span{display:inline-block;padding-bottom:5px;border-bottom:1px solid #00290f; color:#024137 ;} .giftcardWrap .section_3.my .qnaList dt{text-transform: uppercase;} .giftcardWrap .section_3.my .qnaList dd table{margin-top: 25px;max-width: 510px;text-align: center;font-size: 14px;border-top:1px solid #c6c6c6;border-bottom:1px solid #c6c6c6;} .giftcardWrap .section_3.my .qnaList dd table th{background: #e1e7e6; color: #222;font-weight: normal;border-bottom:1px solid #c6c6c6;} .giftcardWrap .section_3.my .qnaList dd table td{color: #666;} .giftcardWrap .section_3.my .qnaList dd table th, .giftcardWrap .section_3.my .qnaList dd table td{padding: 10px 0;} .giftcardWrap .section_3.my .qnaList dd table .f_tr{border-bottom:1px solid #e5e5e5;} .giftcardWrap .section_3.my .qnaList dd table tr th:nth-child(1), .giftcardWrap .section_3.my .qnaList dd table tr td:nth-child(1){border-right: 1px solid #c6c6c6;} .giftcardWrap .section_3.my .qnaList dd table th:nth-child(2){text-indent: 10px;} .giftcardWrap .section_3.my .qnaList dd table th:nth-child(3){text-indent: -10px;} .giftcardWrap .section_3.my .qnaList dd table td:nth-child(2) img{padding-left: 10px;} .giftcardWrap .section_3.my .qnaList dd table td:nth-child(3) img{padding-right: 10px;} /*20191007 GIFT CARD IN 추가*/ .inGiftBr{display: none;} .inGiftBr2{display: block;} .giftcardWrap .section_1.in{background:url('../images/giftcard/visual_in.jpg') no-repeat center center / cover;} .giftcardWrap .section_1.in .vMiddle .card_ribbon{margin: 30px 0 10px;} .giftcardWrap .section_1.in .vMiddle .card_ribbon strong {display:inline-block; padding-left:24px; background:url('../images/giftcard/left_BG.png') no-repeat left center;} .giftcardWrap .section_1.in .vMiddle .card_ribbon span {display:inline-block; padding-right:24px; background:url('../images/giftcard/right_BG.png') no-repeat right center;} .giftcardWrap .section_1.in .vMiddle .card_ribbon em {display:block; width:288px; text-align:center; line-height:36px; font-size:16px; font-weight: bold; color:#fff; letter-spacing:7px;background:#4c9748;} .giftcardWrap .section_2.in .giftcardBanner{background:url('../images/giftcard/cardBanner_bg_in.jpg') no-repeat center center / cover;} .giftcardWrap .section_2.in .giftcardBanner .inner{background:#024137;font-size: 30px;color:#fff;} .giftcardWrap .section_2.in .giftcardBanner .inner span{font-size:23px;color: #f8ffe7;} .giftcardWrap .section_2.in .giftcardInfo .infoBox{display:block;width: 100%;max-width: 1200px;padding:40px 0 143px;background: url('../images/giftcard/box1_bg_in.gif') no-repeat center bottom / cover;} .giftcardWrap .section_2.in .giftcardInfo .box1 ul{margin-top: 30px;} .giftcardWrap .section_2.in .giftcardInfo .box1 li{width:33%;max-width: 250px;} .giftcardWrap .section_2.in .giftcardInfo .box1 li p{display:inline-block;padding:0px 5px;font-size:14px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .free{position:static;margin-top:20%;text-align: center;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price{font-size: 45px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price > em{font-size:24px;vertical-align: bottom;line-height: 28px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price + p{margin:10px 0 3px;font-size:14px;color: #fff;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price + p > em{font-size:14px;} .giftcardWrap .section_2.in .giftcardInfo .box1 li.card2{margin-left: 0;} .giftcardWrap .section_2.in .giftcardInfo .box1 li.card3{position: inherit;} .giftcardWrap .section_2.in .giftcardInfo .box1 li.card1 p{background:#0f5e38;} .giftcardWrap .section_2.in .giftcardInfo .box1 li.card2 p{background:#024137;} .giftcardWrap .section_2.in .giftcardInfo .box1 li.card3 p{background:#006f49;} .giftcardWrap .section_2.in .giftcardInfo .box1 li.card1 .price, .giftcardWrap .section_2.in .giftcardInfo .box1 li.card2 .price, .giftcardWrap .section_2.in .giftcardInfo .box1 li.card3 .price{background: none;} .giftcardWrap .section_2.in .giftcardInfo .box1 .deco{bottom:41.5%;left:0%;} .giftcardWrap .section_2.in .giftcardInfo .box1 p.txt3 {display:block;margin-top:10px;padding:0;background:none !important;font-size: 16px; color: #222; font-weight:bold;text-align: center;} .giftcardWrap .section_2.in .giftcardInfo .infoBox .txt2 {height:104px;} .giftcardWrap .section_2.in .giftcardInfo .infoBox .txt2 span{display:inline-block;padding-bottom:5px;border-bottom:1px solid #00290f; color:#024137 ;} .giftcardWrap .section_3.in .qnaList dt{text-transform: uppercase;} .giftcardWrap .section_3.in .qnaList dd table{margin-top: 25px;max-width: 510px;text-align: center;font-size: 14px;border-top:1px solid #c6c6c6;border-bottom:1px solid #c6c6c6;} .giftcardWrap .section_3.in .qnaList dd table th{background: #e1e7e6; color: #222;font-weight: normal;border-bottom:1px solid #c6c6c6;} .giftcardWrap .section_3.in .qnaList dd table td{color: #666;} .giftcardWrap .section_3.in .qnaList dd table th, .giftcardWrap .section_3.in .qnaList dd table td{padding: 10px 0;} .giftcardWrap .section_3.in .qnaList dd table .f_tr{border-bottom:1px solid #e5e5e5;} .giftcardWrap .section_3.in .qnaList dd table tr th:nth-child(1), .giftcardWrap .section_3.in .qnaList dd table tr td:nth-child(1){border-right: 1px solid #c6c6c6;} .giftcardWrap .section_3.in .qnaList dd table th:nth-child(2){text-indent: 10px;} .giftcardWrap .section_3.in .qnaList dd table th:nth-child(3){text-indent: -10px;} .giftcardWrap .section_3.in .qnaList dd table td:nth-child(2) img{padding-left: 10px;} .giftcardWrap .section_3.in .qnaList dd table td:nth-child(3) img{padding-right: 10px;} /*20190916 GIFT CARD VN 추가 (base:MY)*/ .giftcardWrap.vn .section_1.my{background-image:url('../images/giftcard/visual_vn.jpg');} .giftcardWrap.vn .section_1.my .vMiddle .card_ribbon em {font-size:20px;letter-spacing:0;} .giftcardWrap.vn .section_1 h3 {font-size:46px;letter-spacing:-1px;} .giftcardWrap.vn .section_2.my .giftcardBanner{background-image:url('../images/giftcard/cardBanner_bg_vn.jpg');} .giftcardWrap.vn .section_2 .giftcardBanner .inner{max-width:610px;} .giftcardWrap.vn .section_2.my .giftcardBanner .inner p{margin-bottom:8px;} .giftcardWrap.vn .section_2.my .giftcardInfo .box1 ul {margin:75px 0 30px;} .giftcardWrap.vn .section_2 .giftcardInfo .infoBox .txt2 {height:105px;} .giftcardWrap.vn .section_3.my .qnaList dd table {letter-spacing:-1px;} /*NEW 로고 변경_ 20181004*/ .giftcardWrap.newBi {} .giftcardWrap.newBi .section_1 {background:url('../images/giftcard/visual_2018.jpg') no-repeat center center / cover;} /* 2019 GiftCard */ .giftcardWrap.new .section_1 {background:url('../images/giftcard/visual_2019.jpg') no-repeat center center / cover;} .giftcardWrap.new .giftcardBanner{background:url('../images/giftcard/cardBanner_bg2019.jpg') no-repeat center center / cover; margin:0 auto; min-height:auto; height:303px; overflow:hidden} .giftcardWrap.new .section_2 .giftcardBanner .inner{background:none; font-weight:bold; color:#333333; font-size:22px; text-align:center} .giftcardWrap.new .section_2 .giftcardBanner .inner img{display:block; margin:0 auto; margin-bottom:10px} .giftcardWrap.new .section_2 .giftcardBanner .bird01{position:absolute;left: 50%;margin-left: -361px;top: 50px;animation:flotar 2s infinite;} .giftcardWrap.new .section_2 .giftcardBanner .bird02{position:absolute;left: 50%;margin-left: -306px;top: 82px;animation:flotar2 2s infinite;} .giftcardWrap.new .section_2 .giftcardBanner .bird03{position:absolute;left: 50%;margin-left: 227px;top: 50px;animation:flotar 2s infinite;} .giftcardWrap.new .section_2 .giftcardInfo{display:block; font-size:0} .giftcardWrap.new .section_2 .giftcardInfo .infoTit{position:relative; padding:60px 0 60px 0} .giftcardWrap.new .section_2 .giftcardInfo .infoTit.mo{display:none} .giftcardWrap.new .section_2 .giftcardInfo .card{width:582px; height:777px; display:inline-block; position:relative} .giftcardWrap.new .section_2 .giftcardInfo .card.left{margin-right:34px; background:url(../images/giftcard/leftcard_bg.jpg) no-repeat} .giftcardWrap.new .section_2 .giftcardInfo .card.right{background:url(../images/giftcard/rightcard_bg.jpg) no-repeat} .giftcardWrap.new .section_2 .giftcardInfo .card .mid{position:absolute; width:460px; height:289px; left:50%; top:215px; transform:translateX(-50%);} .giftcardWrap.new .section_2 .giftcardInfo .card .midCard{display:block} .giftcardWrap.new .section_2 .giftcardInfo .card .tail{position:absolute;left:50%;transform:translateX(-50%);bottom:60px;width:460px;font-size: 17px;color:#fff;font-weight:bold;} .giftcardWrap.new .section_2 .giftcardInfo .card .tail img{display:block;} .giftcardWrap.new .section_2 .giftcardInfo .card .tail div{position:absolute;bottom: 20px;} .giftcardWrap.new .section_2 .giftcardInfo .card .tail .cardTxt{left: 98px;} .giftcardWrap.new .section_2 .giftcardInfo .card .tail .stickerTxt{left: 305px;} .giftcardWrap.new .section_2 .giftcardInfo .card .point{display:inline-block; padding:5px 15px; background:#d04735; border-radius:0 20px 20px 0; position:absolute; left:0; top:17px; font-size:19px; font-weight:bold; color:#fff} .giftcardWrap.new .section_2 .giftcardInfo .card .cardTit{position:absolute; left:50%; transform:translateX(-50%); top:65px} .giftcardWrap.new .infoTail{position:relative; padding:70px 0 0 0; max-width:460px; margin:0 auto} .giftcardWrap.new .infoTail .tit{padding:10px; color:#fff; font-weight:bold; background:#86b06e; border-radius:30px; font-size:21px} .giftcardWrap.new .infoTail ul{position:relative; text-align:left; padding:20px 0 0 15px} .giftcardWrap.new .infoTail ul li{font-size:19px; color:#444; margin-bottom:5px} .giftcardWrap.new .infoTail ul li:before{content:''; display:inline-block; width:3px; height:3px; background:#444; border-radius:50%; vertical-align:middle; margin-right:10px} .giftcardWrap.new .section_3 .qnaList dd{padding:0 130px 25px 18px} .giftcardWrap.new .section_3 .qnaList dd a{color:#094438; border-bottom:1px solid #094438} .giftcardWrap.new .section_2 .giftcardInfo .card .bird01{position:absolute;left: 200px;top: 17px; animation:flotar2 2s infinite;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird02{position:absolute;left: 245px;top: 19px; animation:flotar 2s infinite;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird03{position:absolute;left: 244px;top: 43px; animation:flotar 2s infinite;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird04{position:absolute;left: 307px;top: 44px; animation:flotar2 2s infinite;} .giftcardWrap.new .section_2 .giftcardInfo .card .bullon01{position:absolute;left: 55px;top: 50px; animation:leftright 4s infinite;} .giftcardWrap.new .section_2 .giftcardInfo .card .bullon02{position:absolute;left: 167px;top: 77px; animation:leftright2 4s infinite;} .giftcardWrap.new .section_2 .giftcardInfo .card .bus{position:absolute;left:163px;top:161px; animation:bus 6s infinite;} .bannerCard{position:absolute; left:50%; margin-left:-501px; top:53px; animation:bCard 3s infinite} .scard{position:absolute; left:50%; margin-left:245px; top:49px; animation:bCard 3s infinite} @media screen and (max-width: 1220px) { .giftcardWrap.new .section_2 .giftcardInfo .card.left{margin-right:30px} .giftcardWrap.new .section_2 .giftcardInfo .card{width:calc(50% - 15px);} .giftcardWrap.new .section_2 .giftcardInfo .card .midCard{width:400px; margin:0 auto} .giftcardWrap.new .section_2 .giftcardInfo .card .bird01{top: 15px;width: 20px;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird02{width: 25px;top: 15px;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird03{width: 30px;top: 36px;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird04{width: 25px;top: 34px;} .giftcardWrap.new .section_2 .giftcardInfo .card .tail{width:400px} .giftcardWrap.new .section_2 .giftcardInfo .card{height:720px} .giftcardWrap.new .section_2 .giftcardInfo .card .bus{width:35px; top:140px; left:170px} } @media screen and (max-width:1200px) { .bannerCard{width:200px; margin-left:-372px; top:50px} } @media screen and (max-width: 1024px) { .giftcardWrap.new .section_2 .giftcardBanner{min-height:auto; height:250px; overflow:hidden} .giftcardWrap.new .section_2 .giftcardBanner .inner{font-size:18px} .giftcardWrap.new .section_2 .giftcardBanner .inner img{width:300px} .giftcardWrap.new .section_3 .qnaList dd{padding:0 70px 25px 18px} .scard{width:210px; margin-left:215px; top:75px} } @media screen and (max-width: 980px) { .giftcardWrap.new .section_2 .giftcardInfo .card.left{margin-right:0} .giftcardWrap.new .section_2 .giftcardInfo .card{width:100%; height:auto; display:block; background-size:cover !important; background-position:center center !important} .giftcardWrap.new .section_2 .giftcardInfo .card .cardTit{position:relative;text-align:center;left:auto;top:auto;transform:none;padding-top:50px;width: 130px;} .giftcardWrap.new .section_2 .giftcardInfo .card .mid{position:relative; width:350px; height:auto; left:auto; top:auto; transform:none; margin:0 auto; margin-top:50px} .giftcardWrap.new .section_2 .giftcardInfo .card .midCard{width:100%; max-width:350px;} .giftcardWrap.new .section_2 .giftcardInfo .card .tail{position:relative; left:auto; transform:none; bottom:auto; font-size:14px; margin:0 auto; text-align:center; display:inline-block; margin-top:30px; margin-bottom:50px} .giftcardWrap.new .section_2 .giftcardInfo .card .tail img{margin:0 auto; max-width:350px; width:100%} .giftcardWrap.new .section_2 .giftcardInfo .card .point{font-size:15px} .giftcardWrap.new .section_2 .giftcardInfo .card .tail div{bottom:15px} .giftcardWrap.new .section_2 .giftcardInfo .card .tail .stickerTxt{left:259px;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird01{top: 12px;width:15px;left: 156px;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird02{width: 20px;top: 15px;left: 182px;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird03{width: 25px;top: 31px;left: 188px;} .giftcardWrap.new .section_2 .giftcardInfo .card .bird04{width: 20px;top: 27px;left: 229px;} .giftcardWrap.new .section_2 .giftcardInfo .card .bullon01{top:35px; left:30px} .giftcardWrap.new .section_2 .giftcardInfo .card .bullon02{top:60px;left: 135px;} .giftcardWrap.new .section_2 .giftcardInfo .card .bus{width:31px; top:122px; left:124px} .giftcardWrap.new .infoTail .tit{font-size:16px} .giftcardWrap.new .infoTail ul li{font-size:15px} } @media screen and (max-width: 640px) { .giftcardWrap.new .section_2 .giftcardBanner{background:url(../images/giftcard/cardBanner_bg2019_mo.jpg) no-repeat center center / cover; height:auto; padding-top:86%} .giftcardWrap.new .section_2 .vMiddle{top:11%; transform:none} .giftcardWrap.new .section_2 .giftcardBanner .inner{padding:0; font-size:15px} .giftcardWrap.new .section_2 .giftcardBanner .inner img{width:190px; position:relative; z-index:10} .giftcardWrap.new .section_2 .giftcardBanner .bird01{margin-left:0;left: 20px;width:30px;top: 20px;} .giftcardWrap.new .section_2 .giftcardBanner .bird02{margin-left:0;left: 55px;width: 30px;top: 30px;} .giftcardWrap.new .section_2 .giftcardBanner .bird03{margin-left:0; left:auto; right:20px; top:25px; width:25px} .giftcardWrap.new .section_2 .giftcardInfo .infoTit{display:none} .giftcardWrap.new .section_2 .giftcardInfo .infoTit.mo{display:block; padding:30px 0 30px 0} .giftcardWrap.new .section_2 .giftcardInfo .infoTit.mo img{width:250px} .giftcardWrap.new .infoTail{width:90%; padding:30px 0 0 0} .giftcardWrap.new .infoTail ul li{font-size:14px; margin-bottom:3px} .giftcardWrap.new .infoTail .tit{padding:5px; font-size:15px} .giftcardWrap.new .section_2 .giftcardInfo .card .cardTit{width: 130px;padding-top:60px;} .giftcardWrap.new .section_2 .giftcardInfo .card .point{font-size:13px; top:15px} .giftcardWrap.new .section_2 .giftcardInfo .card .mid{margin-top:30px; width:300px} .giftcardWrap.new .section_2 .giftcardInfo .card .midCard{max-width:300px} .giftcardWrap.new .section_2 .giftcardInfo .card .tail{width:300px; margin-bottom:30px; font-size:13px} .giftcardWrap.new .section_2 .giftcardInfo .card .tail div{bottom:12px} .giftcardWrap.new .section_2 .giftcardInfo .card .tail img{max-width:300px} .giftcardWrap.new .section_2 .giftcardInfo .card .tail .cardTxt{left:64px} .giftcardWrap.new .section_2 .giftcardInfo .card .tail .stickerTxt{left:198px} .giftcardWrap.new .section_2 .giftcardInfo .card .bus{width:27px; top:105px; left:115px} .giftcardWrap.new .section_3{margin-top:40px} .giftcardWrap.new .section_3 .qnaList dd{padding:0 45px 15px 15px} .bannerCard{width:130px; margin-left:-275px; top:40px} .scard{width:68%; margin-left:0; top:39%; left:16%} } @media screen and (max-width: 330px) { .giftcardWrap.new .section_2 .giftcardBanner .inner{font-size:13px} } @keyframes bCard { 0%,100% {transform:rotate(0deg)} 20%{transform:rotate(-1deg)} 30%{transform:rotate(0deg)} 40%{transform:rotate(-1deg)} 50%{transform:rotate(0deg)} } @keyframes flotar { 0%,100% {transform:translateY(0);} 50% {transform:translateY(-3px);} } @keyframes flotar2 { 0%,100% {transform:translateY(0);} 50% {transform:translateY(4px);} } @keyframes leftright { 0%,100% {transform:translateY(0);} 50% {transform:translateX(12px);} } @keyframes leftright2 { 0%,100% {transform:translateY(0);} 50% {transform:translateX(-10px);} } @keyframes bus { 0%,100% {transform:translateX(5px);} 70%{transform:translateX(-10px);} } @media screen and (max-width: 1200px){ .giftcardWrap .section_1 {height:220px;} .giftcardWrap .section_2 {padding:0 3%;margin-top:5%;} .giftcardWrap .section_2 .giftcardInfo .infoBox .txt > br {display:none;} .giftcardWrap .section_2 .giftcardInfo .box1 ul {margin-top:40px;} .giftcardWrap .section_2 .giftcardInfo .box2 .image {width:89%;} .giftcardWrap .section_3 .inner {padding:0 3%;} } @media screen and (max-width: 1024px){ .giftcardWrap .section_2 .giftcardBanner {min-height:390px;margin-bottom:3%;} .giftcardWrap .section_2 .giftcardBanner .inner {padding:40px 0;font-size:24px;} .giftcardWrap .section_2 .giftcardInfo .infoBox {padding-bottom:75px;} .giftcardWrap .section_2 .giftcardInfo .infoBox .tit {font-size:18px;} .giftcardWrap .section_2 .giftcardInfo .infoBox .txt {font-size:15px;} .giftcardWrap .section_2 .giftcardInfo .infoBox .txt > br {display:block;} .giftcardWrap .section_2 .giftcardInfo .infoBox .txt2 {height:auto;} .giftcardWrap .section_2 .giftcardInfo .box1 li {margin:0 5px;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top span {font-size:11px;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top .price {font-size:28px;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top .price > em {display:inline-block;margin-right:1px;font-size:18px;line-height:28px;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top .price + p {font-size:12px;} .giftcardWrap .section_2 .giftcardInfo .box1 .card_top .price + p > em {font-size:15px;} .giftcardWrap .section_2 .giftcardInfo .infoBox .txt2 {height:55px !important;font-size:13px;} .giftcardWrap .section_3 {padding:50px 0 35px;margin-top:7%;} .giftcardWrap .section_3 .inner .tit {font-size:28px;} .giftcardWrap .section_3 .qnaList {margin-top:35px;} .giftcardWrap .section_3 .qnaList dt {padding:25px 70px 25px 18px;} .giftcardWrap .section_3 .qnaList dd {padding:0 70px 25px 18px;} .giftcardWrap .section_3 .qnaList dd .br {margin-bottom:10px;} .giftcardWrap .section_3 .qnaList + ul {padding:25px 70px 25px 18px;border-top:1px solid #e5e5e5} /* MY */ .giftcardWrap .section_1.my .vMiddle .card_ribbon em { width:250px;font-size:14px;letter-spacing:5px;} .giftcardWrap .section_2.my .giftcardBanner .inner{font-size: 24px;} .giftcardWrap .section_2.my .giftcardBanner .inner span{font-size: 17px;} .giftcardWrap .section_2.my .giftcardInfo .box1{padding-bottom: 20%;} .giftcardWrap .section_2.my .giftcardInfo .box1 li{width: 43%;} .giftcardWrap .section_2.my .giftcardInfo .box1 li.card3{margin-top: 40px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price {font-size:28px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price > em {display:inline-block;margin-right:1px;font-size:18px;line-height:28px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price + p {margin:5px 0 2px;font-size:13px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price + p > em {font-size:14px;} .giftcardWrap .section_2.my .giftcardInfo .box1 li p{font-size: 13px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .deco{bottom:0%;left:0%;} /* IN */ .giftcardWrap .section_1.in .vMiddle .card_ribbon em { width:250px;font-size:14px;letter-spacing:5px;} .giftcardWrap .section_2.in .giftcardBanner .inner{font-size: 24px;} .giftcardWrap .section_2.in .giftcardBanner .inner span{font-size: 17px;} .giftcardWrap .section_2.in .giftcardInfo .box1{padding-bottom: 10%;} .giftcardWrap .section_2.in .giftcardInfo .box1 li{width: 43%;} .giftcardWrap .section_2.in .giftcardInfo .box1 li.card3{margin-top: 40px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price {font-size:28px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price > em {display:inline-block;margin-right:1px;font-size:18px;line-height:28px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price + p {margin:5px 0 2px;font-size:13px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price + p > em {font-size:14px;} .giftcardWrap .section_2.in .giftcardInfo .box1 li p{font-size: 13px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .deco{bottom:0%;left:0%;} /* VN */ .giftcardWrap.vn .section_1.my .vMiddle .card_ribbon em {font-size:15px;} .giftcardWrap.vn .section_2 .giftcardBanner .inner {width:90%;} } @media screen and (max-width: 840px){ /* MY */ .myGiftBr{display: block !important;} .myGiftBr2{display: none !important;} .giftcardWrap .section_1.my{min-height:200px; padding: 50 0px;} .giftcardWrap .section_1.my .vMiddle .card_ribbon em { width:200px;font-size:12px;letter-spacing:3px;} .giftcardWrap .section_2.my .giftcardBanner .inner{font-size: 17px;} .giftcardWrap .section_2.my .giftcardBanner .inner span{font-size: 12px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price + p {font-size:10px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price + p > em {font-size:11px;} .giftcardWrap .section_2.my .giftcardInfo .box1 li p{font-size: 10px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .deco{bottom:12%;left:5%;} .giftcardWrap .section_2.my{margin-top: 0; padding: 0;} .giftcardWrap .section_2.my .giftcardInfo .box1 li {width:45%;max-width:250px;} .giftcardWrap .section_2.my .giftcardBanner{margin-bottom: 0;} .giftcardWrap .section_2.my .giftcardInfo .infoBox{background: url('../images/giftcard/box1_bg_my_m.gif') no-repeat center center / cover;} .giftcardWrap .section_2.my .giftcardInfo .box1 p.txt3{font-weight: normal;font-size: 12px;} /* IN */ .inGiftBr{display: block !important;} .inGiftBr2{display: none !important;} .giftcardWrap .section_1.in{min-height:200px; padding: 50 0px;} .giftcardWrap .section_1.in .vMiddle .card_ribbon em { width:200px;font-size:12px;letter-spacing:3px;} .giftcardWrap .section_1.in h3 {padding-top:5px;font-size:25px;} .giftcardWrap .section_2.in .giftcardBanner .inner{font-size: 17px;} .giftcardWrap .section_2.in .giftcardBanner .inner span{font-size: 12px;} .giftcardWrap .section_2.in .giftcardInfo .box1{padding-bottom: 15%;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price + p {font-size:10px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price + p > em {font-size:11px;} .giftcardWrap .section_2.in .giftcardInfo .box1 li p{font-size: 10px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .deco{bottom:0%;left:-6%;} .giftcardWrap .section_2.in{margin-top: 0; padding: 0;} .giftcardWrap .section_2.in .giftcardInfo .box1 li {width:45%;max-width:250px;} .giftcardWrap .section_2.in .giftcardBanner{margin-bottom: 0;} .giftcardWrap .section_2.in .giftcardInfo .infoBox{background: url('../images/giftcard/box1_bg_in_m.gif') no-repeat center center / cover;} .giftcardWrap .section_2.in .giftcardInfo .box1 p.txt3{font-weight: normal;font-size: 12px;} /* VN */ .giftcardWrap.vn .section_2.my .giftcardInfo .infoBox {padding-top:25px;} .giftcardWrap.vn .section_2.my .giftcardInfo .box1 li {width:47%;} } @media screen and (max-width: 768px){ .giftcardWrap .section_2 .giftcardInfo .infoBox .txt > br {display:none;} .giftcardWrap .section_2 .giftcardInfo .box1 ul {margin-top:30px;} /* MY */ .giftcardWrap .section_2.my .giftcardInfo .box1 li.card3 {margin-top:20px;} /* IN */ .giftcardWrap .section_2.in .giftcardInfo .box1 li.card3 {margin-top:20px;} /* VN */ .giftcardWrap.vn .section_2.my .giftcardInfo .box1 ul {margin:50px 0 20px;} } @media screen and (max-width: 640px){ .giftcardWrap .section_1 {height:160px;font-size:18px;background:url('../images/giftcard/visual_m.jpg') no-repeat center center / cover;} .giftcardWrap.newBi .section_1 {background:url('../images/giftcard/visual_m_2018.jpg') no-repeat center center / cover;} /*NEW 로고 변경_ 20181004*/ .giftcardWrap .section_1 h3 {padding-top:5px;font-size:25px;} .giftcardWrap .section_2 {padding:0;margin:0;} .giftcardWrap .section_2 .giftcardBanner {min-height:235px;margin:0;} .giftcardWrap .section_2 .giftcardBanner .inner {max-width:inherit;width:84%;padding:30px 0;font-size:17px;} .giftcardWrap .section_2 .giftcardInfo .infoBox {display:block;width:100%;max-width:inherit;padding-top:25px;background-position:center center; -webkit-border-radius:inherit;-moz-border-radius:inherit;border-radius:inherit;box-shadow:none; } .giftcardWrap .section_2 .giftcardInfo .infoBox .txt > br {display:block;} .giftcardWrap .section_2 .giftcardInfo .box1 {padding-bottom:160px;} .giftcardWrap .section_2 .giftcardInfo .box1 li {width:45%;max-width:200px;} .giftcardWrap .section_2 .giftcardInfo .box1 .deco {bottom:18%;} .giftcardWrap .section_2 .giftcardInfo .box2 .image {width:89%;max-width:559px;margin:20px auto 10px;} .giftcardWrap .section_3 {padding:35px 0;margin:0;} .giftcardWrap .section_3 .inner {padding:0;font-size:13px;} .giftcardWrap .section_3 .inner .tit {font-size:20px;} .giftcardWrap .section_3 .qnaList {margin-top:18px;} .giftcardWrap .section_3 .qnaList dt {padding:15px 45px 15px 15px;} .giftcardWrap .section_3 .qnaList dt:after {top:16px;width:12px;height:7px;} .giftcardWrap .section_3 .qnaList dd {padding:0 45px 15px 15px;} .giftcardWrap .section_3 .qnaList dd .br {margin-bottom:10px;} .giftcardWrap .section_3 .qnaList + ul {padding:15px 45px 15px 15px;border-top:1px solid #e5e5e5} /* VN */ .giftcardWrap.vn .section_1 h3 {font-size:22px;} } @media screen and (max-width: 480px){ .giftcardWrap .section_2 .giftcardInfo .box1 {padding-bottom:41%;} .giftcardWrap .section_2 .giftcardInfo .infoBox .txt > br {display:none;} /* MY */ .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price{font-size:16px;} .giftcardWrap .section_2.my .giftcardInfo .box1 .card_top .price > em{font-size:12px;line-height:1} /* IN */ .giftcardWrap .section_2.in .giftcardInfo .box1{padding-bottom: 20%;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price{font-size:16px;} .giftcardWrap .section_2.in .giftcardInfo .box1 .card_top .price > em{font-size:12px;line-height:1} } @media screen and (max-width: 320px){ .giftcardWrap.vn .section_2.my .giftcardBanner .inner span {font-size:11px;} .giftcardWrap.vn .section_2.in .giftcardBanner .inner span {font-size:11px;} } /*terms*/ .termsWrap {position:relative;max-width:1200px;margin:60px auto 70px;} .termsWrap .titleWrap h3 {font-size:32px;text-align:center;font-weight:bold;color:#222;} .termsWrap .termsCon {margin-top:50px;} .termsWrap .termsCon ul li {margin-top:40px;font-size:13px;line-height:1.4;color:#666;} .termsWrap .termsCon ul li:first-child {margin:0;} .termsWrap .termsCon ul li:first-child .tit {margin-bottom:30px;margin:0;} .termsWrap .termsCon ul li .tit {font-size:15px;font-weight:bold;color:#222;} .termsWrap .termsCon ul li .txt {font-size:13px;margin-top:15px;} .termsWrap strong.fc3 {color:#333;} .termsWrap strong.fc4 {color:#444;} .terms_tab {position:absolute;top:0;right:10px;} .terms_tab ul li {display:inline-block;margin-left:20px;} .terms_tab ul li:first-child {margin-left:0;} .terms_tab ul li > a {display:inline-block;border-bottom:1px solid #fff;line-height:1.4;font-size:16px;color:#666} .terms_tab ul li.on > a {border-bottom:1px solid #2f2f2f;font-weight:bold;color:#2f2f2f;} @media screen and (max-width: 1200px){ .termsWrap {padding:0 30px;} } @media screen and (max-width: 768px){ .termsWrap {padding:0 15px;margin:35px auto 5px;} .termsWrap .titleWrap h3 {display:none;} .termsWrap.langTab .termsCon {margin-top:30px;} .terms_tab {position:inherit;top:inherit;right:inherit;text-align:center;} .terms_tab ul {display:inline-block;} } @media screen and (max-width: 640px){ .termsWrap .termsCon {margin:0;} .termsWrap .termsCon ul li {margin-top:30px;} .termsWrap .termsCon ul li:first-child .tit {margin-bottom:23px;} } /* ========== [ABOUT US] ========== */ /* 브랜드메뉴 */ .brandSubTab {padding:18px 0 57px;} .brandSubTab ul {text-align:center;} .brandSubTab ul li {display:inline-block; margin-right:11px; padding-right:16px; background:url(../images/common/bar_1x12_cdd1cf.gif) no-repeat right 1px;} .brandSubTab ul li a {font-size:13px; color:#999999; display:inline-block; min-height:18px} .brandSubTab ul li.last-child {margin-right:0; padding-right:0; background:none;} .brandSubTab ul li.on a {color:#222222;} .brandSubTab .brandSelect {display:none;} .brandSubTab .brandSelect .select {width:100%; height:45px; font-size:12px; color:#666666; border:none; background:#f5f5f5;} @media screen and (max-width: 640px){ .brandSubTab {padding:0;} .brandSubTab .brandSelect {display:block;} } /* 브랜드 - CONCEPT */ .brandConceptWrap {} .brandConceptWrap .section1 {height:560px; text-align:center; background:url(../images/about/brand_concept_section1.jpg) no-repeat center center; background-size:cover;} .brandConceptWrap .section1 h3 {padding-top:182px;} .brandConceptWrap .section1 h3 span {display:block; font-size:60px; font-weight:normal; color:#222222;} .brandConceptWrap .section1 h3 strong {display:block; margin-top:10px; font-size:32px; color:#222222;} .brandConceptWrap .section1 .brandDesc {margin-top:7px; font-size:16px; color:#222222;} .brandConceptWrap .section2 {max-width:1200px; margin:0 auto;} .brandConceptWrap .section2 .txt {display:inline-block; width:50%; margin-right:-10px; vertical-align:middle; text-align:center;} .brandConceptWrap .section2 .txt .t {margin:0 10px; line-height:1.4; font-size:18px; font-weight:bold; color:#222222;} .brandConceptWrap .section2 .txt .p {margin:0 10px; margin-top:43px; line-height:1.4; font-size:13px; color:#666666;} .brandConceptWrap .section2 .img {display:inline-block; width:50%; margin:22px auto 22px;vertical-align:middle; text-align:center;} .brandConceptWrap .section3 {padding:76px 0 115px 0; background:#f5f5f5;} .brandConceptWrap .section3 h4 {text-align:center; font-size:26px; color:#222222;} .brandConceptWrap .section3 .p {margin-top:17px; text-align:center; line-height:1.4; font-size:13px; color:#666666;} .brandConceptWrap .section3 .symbol {position:relative; max-width:1200px; margin:90px auto 0;} .brandConceptWrap .section3 .symbol .img {text-align:center;} .brandConceptWrap .section3 .symbol ul {} .brandConceptWrap .section3 .symbol ul li {position:absolute;} .brandConceptWrap .section3 .symbol ul li strong {display:block; font-size:16px; color:#024137;} .brandConceptWrap .section3 .symbol ul li p {margin-top:10px; font-size:13px; color:#666666;} .brandConceptWrap .section3 .symbol ul li.li1 {left:4.5%; top:23px; padding:8px 0 0 59px; background:url(../images/about/brand_concept_section3_1.png) no-repeat 30px top;} .brandConceptWrap .section3 .symbol ul li.li2 {left:75.6%; top:32px; padding:0 0 0 43px; background:url(../images/about/brand_concept_section3_2.png) no-repeat 2px 2px;} .brandConceptWrap .section3 .symbol ul li.li3 {left:4.5%; top:131px; padding-left:59px; background:url(../images/about/brand_concept_section3_3.png) no-repeat left 4px;} .brandConceptWrap .section3 .symbol ul li.li4 {left:75.6%; top:120px; padding:3px 0 0 43px; background:url(../images/about/brand_concept_section3_4.png) no-repeat left top;} /*20181004 section3 변경*/ .brandConceptWrap .section3_2018 {max-width:1200px;margin:0 auto 120px;text-align:center;} .brandConceptWrap .section3_2018 h4 {font-size:26px;color:#222;} .brandConceptWrap .section3_2018 .logoBi {margin:65px 0 60px;font-size:0;} .brandConceptWrap .section3_2018 .logoBi li {display:inline-block;} .brandConceptWrap .section3_2018 .logoBi_txtBox {padding:35px 0;background-color:#f5f5f5;} .brandConceptWrap .section3_2018 .logoBi_txtBox .inner {position:relative;/* max-width:830px;margin:0 auto; */line-height:1.4;font-size:14px;color:#444;text-align:center;} .brandConceptWrap .section3_2018 .logoBi_txtBox .tit {display:inline-block;padding:15px 30px 40px 15px;text-align:left;color:#fff;background-color:#024137;vertical-align:middle;} .brandConceptWrap .section3_2018 .logoBi_txtBox .tit > strong {display:block;font-size:18px;} /* .brandConceptWrap .section3_2018 .logoBi_txtBox .txt {position:absolute;top:50%;left:225px;-moz-transform:translate(0,-50%);-webkit-transform:translate(0,-50%);transform:translate(0,-50%);} */ .brandConceptWrap .section3_2018 .logoBi_txtBox .txt {display:inline-block;margin-left:50px;text-align:left;vertical-align:middle;} @media screen and (max-width: 1000px){ .brandConceptWrap .section3_2018 .logoBi_txtBox .inner {padding:0 15px;} .brandConceptWrap .section3_2018 .logoBi li {width:33.33%;} .brandConceptWrap .section3_2018 .logoBi_txtBox .txt {width:60%;margin-left:3%;} .brandConceptWrap .section3_2018 .logoBi_txtBox .txt > br {display:none} } @media screen and (max-width: 768px){ .brandConceptWrap .section1 {position:relative; height:auto; padding-top:67%; background-size:auto 100%;} .brandConceptWrap .section1 .txt {position:absolute; left:0; top:0; width:100%;} .brandConceptWrap .section1 h3 {padding-top:22%;} .brandConceptWrap .section3 {padding:35px 0;} .brandConceptWrap .section3 .p {margin:17px 10px 0;} .brandConceptWrap .section3 .symbol {margin-top:30px;} .brandConceptWrap .section3 .symbol ul {overflow:hidden; margin-top:15px; padding:0 40px;} .brandConceptWrap .section3 .symbol ul li {position:static; float:left; margin-top:20px;} .brandConceptWrap .section3 .symbol ul li strong {display:block; font-size:16px; color:#024137;} .brandConceptWrap .section3 .symbol ul li p {margin-top:10px; font-size:13px; color:#666666;} .brandConceptWrap .section3 .symbol ul li.li1 {left:4.5%; top:23px; width:53%; padding:8px 0 0 59px; background:url(../images/about/brand_concept_section3_1.png) no-repeat 30px top;} .brandConceptWrap .section3 .symbol ul li.li2 {left:75.6%; top:32px; padding:0 0 0 43px; background:url(../images/about/brand_concept_section3_2.png) no-repeat 2px 2px;} .brandConceptWrap .section3 .symbol ul li.li3 {left:4.5%; top:131px; width:53%; padding-left:59px; background:url(../images/about/brand_concept_section3_3.png) no-repeat left 4px;} .brandConceptWrap .section3 .symbol ul li.li4 {left:75.6%; top:120px; padding:3px 0 0 43px; background:url(../images/about/brand_concept_section3_4.png) no-repeat left top;} .brandConceptWrap .section3_2018 .logoBi_txtBox .tit {padding:10px 20px 20px 10px;} .brandConceptWrap .section3_2018 .logoBi_txtBox .txt {width:50%} /* .brandConceptWrap .section3_2018 .logoBi_txtBox .txt > br {display:none} */ } @media screen and (max-width: 640px){ .brandConceptWrap .section1 {height:224px; padding-top:0;} .brandConceptWrap .section1 .txt {position:absolute; left:0; top:50%; width:100%; margin-top:-40px;} .brandConceptWrap .section1 h3 {padding-top:0;} .brandConceptWrap .section1 h3 span {font-size:30px;} .brandConceptWrap .section1 h3 strong {margin-top:5px; font-size:16px;} .brandConceptWrap .section1 .brandDesc {margin-top:3px; font-size:12px;} .brandConceptWrap .section2 .txt {display:block; width:auto; margin-right:0;} .brandConceptWrap .section2 .txt .t {margin-top:30px; font-size:14px;} .brandConceptWrap .section2 .txt .p {margin-top:15px; font-size:12px;} .brandConceptWrap .section2 .img {display:block; width:auto; max-width:400px; margin:10px auto 10px;} .brandConceptWrap .section3 h4 {font-size:14px;} .brandConceptWrap .section3 .p {font-size:12px;} .brandConceptWrap .section3 .symbol .img {margin:0 60px;} .brandConceptWrap .section3 .symbol ul {padding:0 20px;} .brandConceptWrap .section3 .symbol ul li {float:none; width:auto !important; margin-top:10px;} .brandConceptWrap .section3 .symbol ul li strong {font-size:13px;} .brandConceptWrap .section3 .symbol ul li p {font-size:12px;} .brandConceptWrap .section3 .symbol ul li.li1 {padding-left:59px;} .brandConceptWrap .section3 .symbol ul li.li2 {padding-left:59px; background-position:21px 2px;} .brandConceptWrap .section3 .symbol ul li.li3 {padding-left:59px;} .brandConceptWrap .section3 .symbol ul li.li4 {padding-left:59px; background-position:21px 0;} .brandConceptWrap .section3_2018 {margin-bottom:50px;} .brandConceptWrap .section3_2018 h4 {font-size:13px;} .brandConceptWrap .section3_2018 .logoBi {margin:33px 0 30px;} .brandConceptWrap .section3_2018 .logoBi_txtBox {padding:15px 0;} .brandConceptWrap .section3_2018 .logoBi_txtBox .inner {font-size:12px;text-align:left;} .brandConceptWrap .section3_2018 .logoBi_txtBox .tit {/* padding:10px 20px 20px 10px; */} .brandConceptWrap .section3_2018 .logoBi_txtBox .tit > strong {font-size:14px;} /* .brandConceptWrap .section3_2018 .logoBi_txtBox .txt {position:inherit;top:inherit;left:inherit;margin-top:15px;-moz-transform:inherit;-webkit-transform:inherit;transform:inherit;} */ .brandConceptWrap .section3_2018 .logoBi_txtBox .txt {display:block;width:auto;margin:15px 0 0 0} } /* 브랜드 - 5 PROMISE */ .brandPromiseWrap {padding-bottom:150px;} .brandPromiseWrap .section1 {height:287px; text-align:center; background:#f5f5f5;} .brandPromiseWrap .section1 .txt {position:relative; max-width:1200px; margin:0 auto;} .brandPromiseWrap .section1 h3 {padding-top:62px;} .brandPromiseWrap .section1 h3 br {display:none;} .brandPromiseWrap .section1 h3 span {display:block; font-size:60px; font-weight:normal; color:#222222;} .brandPromiseWrap .section1 h3 strong {display:block; margin-top:10px; font-size:32px; color:#222222;} .brandPromiseWrap .section1 .brandDesc {margin-top:7px; font-size:16px; color:#222222;} .brandPromiseWrap .section1 .img {position:absolute; left:50%; top:79px; margin-left:-371px;} .brandPromiseWrap .section2 {max-width:1200px; margin:104px auto 0;} .brandPromiseWrap .section2 .inner {position:relative; width:990px; height:983px; margin-left:137px;} .brandPromiseWrap .section2 .img1 {overflow:hidden; position:absolute; left:0; top:368px;} .brandPromiseWrap .section2 .img2 {overflow:hidden; position:absolute; right:0; top:0; width:331px; height:606px;} .brandPromiseWrap .section2 .img2 img {width:640px; max-width:none; height:606px;} .brandPromiseWrap .section2 .img3 {overflow:hidden; position:absolute; left:331px; bottom:0; width:328px; height:306px;} .brandPromiseWrap .section2 .img3 img {max-width:none; height:100%;} .brandPromiseWrap .section2 .txt1 {width:300px; padding-top:29px;} .brandPromiseWrap .section2 .txt1 h4 {line-height:1.4; font-size:32px; font-weight:normal; color:#222222;} .brandPromiseWrap .section2 .txt1 .p {margin-top:10px; line-height:1.4; font-size:13px; color:#666666;} .brandPromiseWrap .section2 .txt2 {} .brandPromiseWrap .section2 .txt2 .t {font-size:18px; font-weight:bold; color:#222222;} .brandPromiseWrap .section2 .txt2 .list {} .brandPromiseWrap .section2 .txt2 .list li {line-height:1.8; font-size:13px; color:#666666;} .brandPromiseWrap .section2 .txt2 .list li span {text-decoration:underline; color:#024137;} .brandPromiseWrap .section2 .txt2 .txt2_1 {position:absolute; left:355px; top:18px; width:280px;} .brandPromiseWrap .section2 .txt2 .txt2_1 .list {margin-top:20px;} .brandPromiseWrap .section2 .txt2 .txt2_2 {position:absolute; left:703px; bottom:0;} .brandPromiseWrap .section2 .txt2 .txt2_2 .list {} .brandPromiseWrap .section2 .txt2 .txt2_2 .list li {margin-top:39px;} @media screen and (max-width: 1200px){ .brandPromiseWrap .section2 .inner {margin:0 auto;} } @media screen and (max-width: 1000px){ .brandPromiseWrap .section1 {height:345px;} .brandPromiseWrap .section1 h3 {padding-top:69px;} .brandPromiseWrap .section1 h3 br {display:block;} .brandPromiseWrap .section1 h3 strong {margin-top:0;} .brandPromiseWrap .section1 .brandDesc {margin-top:0;} .brandPromiseWrap .section1 .img {margin-left:-270px;} .brandPromiseWrap .section2 {margin:0;} .brandPromiseWrap .section2 .inner {max-width:640px; height:auto; margin:0 auto;} .brandPromiseWrap .section2 .img1 {position:static;} .brandPromiseWrap .section2 .img2 {position:static; width:auto; height:350px;} .brandPromiseWrap .section2 .img3 {position:static; width:auto; padding-left:30px;} .brandPromiseWrap .section2 .txt1 {padding:29px 0 55px 30px;} .brandPromiseWrap .section2 .txt2 {overflow:hidden; padding:20px 30px 45px;} .brandPromiseWrap .section2 .txt2 .t {display:none;} .brandPromiseWrap .section2 .txt2 .txt2_1 {position:static; float:left; width:320px;} .brandPromiseWrap .section2 .txt2 .txt2_1 .list {margin-top:0;} .brandPromiseWrap .section2 .txt2 .txt2_1 .list li {margin-top:10px;} .brandPromiseWrap .section2 .txt2 .txt2_2 {position:static; float:left; width:260px;} .brandPromiseWrap .section2 .txt2 .txt2_2 .list li {margin-top:10px;} } @media screen and (max-width: 640px){ .brandPromiseWrap {padding-bottom:50px;} .brandPromiseWrap .section1 {height:173px; margin-top:1px;} .brandPromiseWrap .section1 h3 {padding-top:30px;} .brandPromiseWrap .section1 h3 span {font-size:30px;} .brandPromiseWrap .section1 h3 strong {margin-top:3px; font-size:16px;} .brandPromiseWrap .section1 .brandDesc {margin-top:3px; font-size:12px;} .brandPromiseWrap .section1 .img {top:30px; width:65px; margin-left:-165px;} .brandPromiseWrap .section2 .inner {width:auto;} .brandPromiseWrap .section2 .img1 {} .brandPromiseWrap .section2 .img2 {position:static; width:auto; height:auto;} .brandPromiseWrap .section2 .img2 img {width:auto; max-width:100%; height:auto;} .brandPromiseWrap .section2 .img3 {padding:0 2.25%; height:auto;} .brandPromiseWrap .section2 .img3 img {max-width:100%; height:auto;} .brandPromiseWrap .section2 .txt1 {width:70%; padding:3% 2.25% 4%;} .brandPromiseWrap .section2 .txt1 h4 {font-size:16px;} .brandPromiseWrap .section2 .txt1 .p {margin-top:5px; font-size:12px;} .brandPromiseWrap .section2 .txt2 {padding:3% 2.25% 4%;} .brandPromiseWrap .section2 .txt2 .txt2_1 {float:none; width:70%;} .brandPromiseWrap .section2 .txt2 .txt2_2 {float:none; width:70%;} } /* 브랜드 - INNISFREE & JEJU */ .brandJejuWrap {padding-bottom:150px;} .brandJejuWrap .section1 {height:560px; text-align:center; background:url(../images/about/brand_jeju_section1.jpg) no-repeat center center; background-size:cover;} .brandJejuWrap .section1 h3 {padding-top:182px;} .brandJejuWrap .section1 h3 span {display:block; font-size:60px; font-weight:normal; color:#ffffff;} .brandJejuWrap .section1 h3 strong {display:block; margin-top:10px; font-size:32px; color:#ffffff;} .brandJejuWrap .section1 .brandDesc {margin-top:7px; font-size:16px; color:#ffffff;} .brandJejuWrap .section2 {max-width:1200px; margin:0 auto;} .brandJejuWrap .section2 .txt1 {text-align:center;} .brandJejuWrap .section2 .txt1 h4 {margin-top:55px; font-size:26px; color:#222222;} .brandJejuWrap .section2 .txt1 .p {margin-top:20px; line-height:1.6; font-size:16px; color:#666666;} .brandJejuWrap .section2 .img {overflow:hidden; margin-top:77px;} .brandJejuWrap .section2 .img .img1 {float:left; width:48.7%;} .brandJejuWrap .section2 .img .img2 {float:right; width:48.7%;} .brandJejuWrap .section2 .txt2 {text-align:center;} .brandJejuWrap .section2 .txt2 h5 {margin-top:50px; line-height:1.4; font-size:18px; font-weight:normal; color:#222222;} .brandJejuWrap .section2 .txt2 .p {margin-top:13px; line-height:1.6; font-size:13px; color:#666666;} .brandJejuWrap .section3 {height:560px; margin-top:118px; text-align:center; background:url(../images/about/brand_jeju_section3.jpg) no-repeat center center; background-size:cover;} .brandJejuWrap .section3 h4 {padding-top:265px; font-size:26px; color:#ffffff;} .brandJejuWrap .section4 {max-width:1200px; margin:0 auto;} .brandJejuWrap .section4 .txt {} .brandJejuWrap .section4 .txt .t {line-height:1.6; font-size:18px; color:#222222;} .brandJejuWrap .section4 .txt .s {margin-top:10px; line-height:1.4; font-size:26px; font-weight:bold; color:#222222;} .brandJejuWrap .section4 .txt .t2 {line-height:1.4; font-size:18px; font-weight:bold; color:#222222;} .brandJejuWrap .section4 .txt .s2 {margin-top:20px; line-height:1.6; font-size:13px; color:#666666;mm} .brandJejuWrap .section4 .section4_1 {overflow:hidden; margin-top:80px;} .brandJejuWrap .section4 .section4_1 .txt {float:right; width:21.6%;} .brandJejuWrap .section4 .section4_1 .img {float:left; width:75.8%;} .brandJejuWrap .section4 .section4_2 {overflow:hidden; margin-top:20px;} .brandJejuWrap .section4 .section4_2 .txt {float:left; width:32.5%; padding-top:7%;} .brandJejuWrap .section4 .section4_2 .img {float:right; width:54.6%;} .brandJejuWrap .section4 .section4_3 {overflow:hidden; margin-top:20px;} .brandJejuWrap .section4 .section4_3 .txt {float:right; width:36.9%;} .brandJejuWrap .section4 .section4_3 .img {float:left; width:60.5%;} .brandJejuWrap .section4 .section4_4 {overflow:hidden; margin-top:-17.6%;} .brandJejuWrap .section4 .section4_4 .txt {float:left; width:60.5%; padding-top:23.7%;} .brandJejuWrap .section4 .section4_4 .img {float:right; width:36.9%;} .brandJejuWrap .section4 .section4_5 {overflow:hidden; margin-top:120px;} .brandJejuWrap .section4 .section4_5 .txt {float:right; width:62.5%;} .brandJejuWrap .section4 .section4_5 .img {float:left; width:35%;} .brandJejuWrap .section4 .section4_6 {overflow:hidden; margin-top:-19.1%;} .brandJejuWrap .section4 .section4_6 .txt {float:left; width:35%; padding-top:24.6%;} .brandJejuWrap .section4 .section4_6 .img {float:right; width:62.5%;} @media screen and (max-width: 768px){ .brandJejuWrap .section1 {position:relative; height:auto; padding-top:67%; background-size:auto 100%;} .brandJejuWrap .section1 .txt {position:absolute; left:0; top:0; width:100%;} .brandJejuWrap .section1 h3 {padding-top:22%;} .brandJejuWrap .section2 {margin:0 2.25%;} .brandJejuWrap .section2 .img {margin-top:0;} .brandJejuWrap .section2 .img .img1 {float:none; width:auto; margin-top:50px;} .brandJejuWrap .section2 .img .img1 img {width:100%;} .brandJejuWrap .section2 .img .img2 {float:none; width:auto; margin-top:20px;} .brandJejuWrap .section2 .img .img2 img {width:100%;} .brandJejuWrap .section3 {position:relative; height:auto; margin-top:40px; padding-top:67%; background-size:auto 100%;} .brandJejuWrap .section3 h4 {position:absolute; left:0; top:50%; width:100%; margin-top:-15px; padding-top:0;} .brandJejuWrap .section4 {margin:0 2.25%;} .brandJejuWrap .section4 .section4_1 {margin-top:40px;} .brandJejuWrap .section4 .section4_1 .txt {float:none; width:auto;} .brandJejuWrap .section4 .section4_1 .img {float:none; width:auto; margin-top:20px;} .brandJejuWrap .section4 .section4_2 {margin-top:20px;} .brandJejuWrap .section4 .section4_2 .txt {float:none; width:auto; padding-top:0;} .brandJejuWrap .section4 .section4_2 .img {float:none; width:auto; margin-top:30px;} .brandJejuWrap .section4 .section4_2 .img img {width:100%;} .brandJejuWrap .section4 .section4_3 {margin-top:80px;} .brandJejuWrap .section4 .section4_3 .txt {float:none; width:auto;} .brandJejuWrap .section4 .section4_3 .img {float:none; width:auto; margin-top:30px;} .brandJejuWrap .section4 .section4_4 {margin-top:20px;} .brandJejuWrap .section4 .section4_4 .txt {float:none; width:auto; padding-top:0;} .brandJejuWrap .section4 .section4_4 .img {float:none; width:auto; margin-top:30px;} .brandJejuWrap .section4 .section4_5 {margin-top:80px;} .brandJejuWrap .section4 .section4_5 .txt {float:none; width:auto;} .brandJejuWrap .section4 .section4_5 .img {float:none; width:auto; margin-top:30px;} .brandJejuWrap .section4 .section4_6 {margin-top:20px;} .brandJejuWrap .section4 .section4_6 .txt {float:none; width:auto; padding-top:0;} .brandJejuWrap .section4 .section4_6 .img {float:none; width:auto; margin-top:20px;} } @media screen and (max-width: 640px){ .brandJejuWrap {padding-bottom:50px;} .brandJejuWrap .section1 {height:224px; padding-top:0;} .brandJejuWrap .section1 .txt {position:absolute; left:0; top:50%; width:100%; margin-top:-40px;} .brandJejuWrap .section1 h3 {padding-top:0;} .brandJejuWrap .section1 h3 span {font-size:30px;} .brandJejuWrap .section1 h3 strong {margin-top:5px; font-size:16px;} .brandJejuWrap .section1 .brandDesc {margin-top:3px; font-size:12px;} .brandJejuWrap .section2 .txt1 h4 {margin-top:20px; font-size:13px;} .brandJejuWrap .section2 .txt1 .p {margin-top:10px; line-height:1.4; font-size:12px;} .brandJejuWrap .section2 .txt2 h5 {margin-top:20px; font-size:13px;} .brandJejuWrap .section2 .txt2 .p {margin-top:7px; line-height:1.4; font-size:12px;} .brandJejuWrap .section3 {height:215px; padding-top:0;} .brandJejuWrap .section3 h4 {margin-top:-9px; font-size:13px;} .brandJejuWrap .section4 .txt .t {font-size:14px;} .brandJejuWrap .section4 .txt .s {font-size:13px;} .brandJejuWrap .section4 .txt .t2 {font-size:14px;} .brandJejuWrap .section4 .txt .s2 {font-size:13px;} .brandJejuWrap .section4 .section4_1 {margin-top:20px;} .brandJejuWrap .section4 .section4_1 .img {margin-top:10px;} .brandJejuWrap .section4 .section4_2 {margin-top:10px;} .brandJejuWrap .section4 .section4_2 .img {margin-top:15px;} .brandJejuWrap .section4 .section4_3 {margin-top:40px;} .brandJejuWrap .section4 .section4_3 .img {margin-top:15px;} .brandJejuWrap .section4 .section4_4 {margin-top:10px;} .brandJejuWrap .section4 .section4_4 .img {margin-top:15px;} .brandJejuWrap .section4 .section4_5 {margin-top:40px;} .brandJejuWrap .section4 .section4_5 .img {margin-top:15px;} .brandJejuWrap .section4 .section4_6 {margin-top:10px;} .brandJejuWrap .section4 .section4_6 .img {margin-top:10px;} } /* 브랜드 - HISTORY */ .brandHistoryWrap {padding-bottom:150px; background:#f5f5f5;} .brandHistoryWrap .inner {max-width:1200px; margin:0 auto;} .brandHistoryWrap h3 {padding-top:65px; text-align:center;} .brandHistoryWrap h3 span {display:block; font-size:60px; font-weight:normal; color:#222222;} .brandHistoryWrap h3 strong {display:block; font-size:32px; color:#222222;} .brandHistoryWrap .brandDesc {margin-top:7px; text-align:center; font-size:16px; color:#222222;} .brandHistoryWrap .list {overflow:hidden; padding-top:33px;} .brandHistoryWrap .list .li {float:left; width:25%; margin-top:50px;} .brandHistoryWrap .list .li .unit {margin:0 5px;} .brandHistoryWrap .list .li .thumb {} .brandHistoryWrap .list .li .year {margin:17px 0 12px 10px; font-size:18px; font-weight:bold; color:#222222;} .brandHistoryWrap .list .li .p {padding-left:10px; line-height:1.6; font-size:13px; color:#666666; background:url(../images/about/bar_brand_history.gif) no-repeat left 8px;} .brandHistoryWrap .list .li5 {/* clear:both; */} .brandHistoryWrap .list .li9 {/* clear:both; */} .brandHistoryWrap .list .li:nth-of-type(4n+1) {clear:both;} .brandHistoryWrap .list .li_leaf {width: 25%;position: relative;} .brandHistoryWrap .list .li_leaf .unit {padding-top:10px;} .brandHistoryWrap .list .li_leaf .thumb {display:inline-block;width: 100%;vertical-align:middle;position: relative;top: -15px;} .brandHistoryWrap .list .li_leaf .t {width: 147px;margin-left: 35px;vertical-align:middle;font-size:16px;color:#999999;position: absolute;top: 44%;/* position: relative; */} @media screen and (max-width: 900px){ .brandHistoryWrap .list .li {width:33.3%;} .brandHistoryWrap .list .li5 {clear:none;} .brandHistoryWrap .list .li9 {clear:none;} .brandHistoryWrap .list .li4 {/* clear:both; */} .brandHistoryWrap .list .li10 {/* clear:both; */} .brandHistoryWrap .list .li13 {/* clear:both; */} .brandHistoryWrap .list .li:nth-of-type(4n+1) {clear:none;} .brandHistoryWrap .list .li:nth-of-type(3n+1) {clear:both;} .brandHistoryWrap .list .li_leaf {width:66.6%;} } @media screen and (max-width: 640px){ .brandHistoryWrap {margin-top:1px; padding-bottom:50px;} .brandHistoryWrap .inner {padding:0 1.5%;} .brandHistoryWrap h3 {padding-top:30px;} .brandHistoryWrap h3 span {font-size:30px;} .brandHistoryWrap h3 strong {margin-top:3px; font-size:16px;} .brandHistoryWrap .brandDesc {margin-top:3px; font-size:12px;} .brandHistoryWrap .list {padding-top:15px;} .brandHistoryWrap .list .li {width:50%; margin-top:25px;} .brandHistoryWrap .list .li .year {margin:10px 0 5px 10px; font-size:14px;} .brandHistoryWrap .list .li .p {padding-left:10px; line-height:1.4; font-size:12px;} .brandHistoryWrap .list .li4 {clear:none;} .brandHistoryWrap .list .li10 {clear:none;} .brandHistoryWrap .list .li13 {clear:none;} .brandHistoryWrap .list .li3 {clear:both;} .brandHistoryWrap .list .li5 {clear:both;} .brandHistoryWrap .list .li7 {clear:both;} .brandHistoryWrap .list .li9 {clear:both;} .brandHistoryWrap .list .li11 {clear:both;} .brandHistoryWrap .list .li13 {clear:both;} .brandHistoryWrap .list .li:nth-of-type(3n+1) {clear:none;} .brandHistoryWrap .list .li:nth-of-type(2n+1) {clear:both;} .brandHistoryWrap .list .li_leaf .unit {padding-top:0;} .brandHistoryWrap .list .li_leaf .thumb {display:block;width:auto;top: 0;} .brandHistoryWrap .list .li_leaf .t {display:block;width:auto;margin:23px 0 0 0;text-align:center;font-size:14px;position: static;} } /* 브랜드 - INNIRANG */ .brandInnirangWrap {padding-bottom:200px; background:#f8f8f8;} .brandInnirangWrap .inner {max-width:1200px; margin:0 auto;} .brandInnirangWrap h3 {padding-top:65px; text-align:center;} .brandInnirangWrap h3 span {display:block; font-size:60px; font-weight:normal; color:#222222;} .brandInnirangWrap h3 strong {display:block; font-size:32px; color:#222222;} .brandInnirangWrap .brandDesc {margin-top:7px; text-align:center; font-size:16px; color:#222222;} .brandInnirangWrap .info_wrap {margin-top:76px; text-align:center;} .brandInnirangWrap .row:nth-child(n+2) {margin-top:100px;} .brandInnirangWrap .row ul{display:flex; justify-content:space-between; align-items:center;} .brandInnirangWrap .row ul li:nth-child(2){width:100%; max-width:547px; display: inline-block;} .brandInnirangWrap .row {text-align:left;} .brandInnirangWrap .row li p{color:#666666; font-size:16px;} .brandInnirangWrap .row .tit_innirang{color:#222222; font-size:32px; line-height: 1.3;} .brandInnirangWrap .row .txt_innirang{margin-top:21px; line-height: 1.8;} .brandInnirangWrap .db1200{display:none;} .brandInnirangWrap .icon_wrap{margin-top:161px; display:flex; justify-content:space-between; text-align:center;} .brandInnirangWrap .icon_wrap dl{width: 100%; max-width: 355px;} .brandInnirangWrap .icon_wrap dd{margin-top:30px; line-height: 1.8; color:#666666; font-size:16px; } .brandInnirangWrap .innirang_pic{margin-top:150px; text-align:center;} @media screen and (max-width: 1200px){ .brandInnirangWrap .row ul{display:block;} .brandInnirangWrap .row {text-align:center;} .brandInnirangWrap .row li:nth-child(n+2){margin-top:30px;} .brandInnirangWrap .dn1200{display:none;} .brandInnirangWrap .db1200{display:block; max-width:100%;} .brandInnirangWrap .icon_wrap{display:block;} .brandInnirangWrap .icon_wrap dl{margin:0 auto;} .brandInnirangWrap .icon_wrap dl:nth-child(n+2){margin-top:50px;} } @media screen and (max-width: 640px){ .brandInnirangWrap {margin-top:1px; padding-bottom:50px;} .brandInnirangWrap .inner {padding:0 1.5%;} .brandInnirangWrap h3 {padding-top:30px;} .brandInnirangWrap h3 span {font-size:30px;} .brandInnirangWrap h3 strong {margin-top:3px; font-size:16px;} .brandInnirangWrap .brandDesc {margin-top:3px; font-size:12px;} .brandInnirangWrap .info_wrap {margin-top:50px;} .brandInnirangWrap .row:nth-child(n+2) {margin-top:50px;} .brandInnirangWrap .row li p{font-size:12px;} .brandInnirangWrap .row li .tit_innirang{font-size:20px;} .brandInnirangWrap .row .txt_innirang br{display:none;} .brandInnirangWrap .icon_wrap{margin-top:50px;} .brandInnirangWrap .icon_wrap dt img{width:180px;} .brandInnirangWrap .icon_wrap dd{margin-top:20px; font-size:12px; } .brandInnirangWrap .innirang_pic{margin-top:50px;} } /* 브랜드 - HANDKERCHIEF */ .brandEcoWrap {padding-bottom:150px;} .brandEcoWrap .section1 {height:560px; text-align:center; background:url(../images/about/brand_eco_section1.jpg) no-repeat center top; background-size:cover;} .brandEcoWrap .section1 .txt {padding-top:210px;} .brandEcoWrap .section1 .txt h3 {font-size:32px; color:#ffffff;} .brandEcoWrap .section1 .txt .brandDesc {margin-top:9px; line-height:1.4; font-size:16px; color:#ffffff;} .brandEcoWrap .section2 {padding:100px 15px; background:#f5f5f5; text-align:center;} .brandEcoWrap .section2 h4 {padding-top:57px; font-size:26px; color:#222222; background:url(../images/about/BG_brand_eco.png) no-repeat center top;} .brandEcoWrap .section2 .p {margin-top:74px; line-height:1.6; font-size:13px; color:#666666;} .brandEcoWrap .section3 {margin-top:55px;} .brandEcoWrap .section3 h4 {margin-bottom:-40px; text-align:center; font-size:26px; color:#222222;} .brandEcoWrap .section3 h5 {margin-top:85px; text-align:center; line-height:1.4; font-size:13px; color:#666666;} .brandEcoWrap .section3 h5 strong {display:inline-block; width:110px; margin-bottom:8px; padding-top:15px; text-align:center; font-size:26px; color:#222222; border-top:2px solid #222222;} .brandEcoWrap .handkerchief_list1 {max-width:900px; margin:50px auto 0;} .brandEcoWrap .handkerchief_list1 ul {overflow:hidden;} .brandEcoWrap .handkerchief_list1 ul li {float:left; width:25%; text-align:center; line-height:1.4; font-size:13px; color:#666666;} .brandEcoWrap .handkerchief_list1 ul li .unit {margin:0 4px;} .brandEcoWrap .handkerchief_list1 ul li .thumb {margin-bottom:17px;} .brandEcoWrap .handkerchief_list1 ul li strong {display:block; margin-bottom:6px; color:#222222;} .brandEcoWrap .handkerchief_list2 ul li strong {display:block; margin-bottom:6px; color:#222222;} .brandEcoWrap .handkerchief_list2 {max-width:684px; margin:48px auto 0;} .brandEcoWrap .eco_first {max-width:900px;} .brandEcoWrap .eco_4 {max-width:900px;} .brandEcoWrap .handkerchief_list2 ul {overflow:hidden;} .brandEcoWrap .handkerchief_list2 ul li {float:left; width:33.3%; text-align:center; line-height:1.4; font-size:13px; color:#666666;} .brandEcoWrap .handkerchief_list2 ul li .unit {margin:0 4px;} .brandEcoWrap .handkerchief_list2 ul li .thumb {margin-bottom:17px;} .brandEcoWrap .handkerchief_list2 .p {text-align:center; line-height:1.4; font-size:13px; color:#666666;} @media screen and (max-width: 768px){ .brandEcoWrap .section1 {position:relative; height:auto; padding-top:67%; background-size:auto 100%;} .brandEcoWrap .section1 .txt {position:absolute; left:0; top:0; width:100%; padding-top:22%;} } @media screen and (max-width: 640px){ .brandEcoWrap {padding-bottom:50px;} .brandEcoWrap .section1 {height:224px; margin-top:0; padding-top:0;} .brandEcoWrap .section1 .txt {padding-top:66px;} .brandEcoWrap .section1 .txt h3 {font-size:16px;} .brandEcoWrap .section1 .txt .brandDesc {margin-top:3px; font-size:12px;} .brandEcoWrap .section2 {padding:40px 2.25%;} .brandEcoWrap .section2 h4 {padding-top:30px; font-size:14px; background-size:18px auto;} .brandEcoWrap .section2 .p {margin-top:35px; line-height:1.4; font-size:12px;} .brandEcoWrap .section3 {margin:25px 2.25% 0;} .brandEcoWrap .section3 h4 {margin-bottom:-20px; font-size:14px;} .brandEcoWrap .section3 h5 {margin-top:40px; font-size:12px;} .brandEcoWrap .section3 h5 strong {width:55px; margin-bottom:4px; padding-top:7px; font-size:14px; border-top:1px solid #222222;} .brandEcoWrap .handkerchief_list1 {margin:0;} .brandEcoWrap .eco_4 {max-width:200px; margin:0 auto;} .brandEcoWrap .handkerchief_list1 ul li {width:50%; font-size:12px; margin-top:20px;} .brandEcoWrap .handkerchief_list1 ul li .unit {margin:0 2px;} .brandEcoWrap .handkerchief_list1 ul li .thumb {margin-bottom:8px;} .brandEcoWrap .handkerchief_list1 ul li .thumb img {width:100%;} .brandEcoWrap .handkerchief_list1 ul li strong {margin-bottom:3px;} .brandEcoWrap .handkerchief_list1 ul li:nth-of-type(2n+1) {clear:both;} .brandEcoWrap .handkerchief_list2 {margin-top:24px;} .brandEcoWrap .handkerchief_list2 ul li {font-size:12px;} .brandEcoWrap .handkerchief_list2 ul li .unit {margin:0 2px;} .brandEcoWrap .handkerchief_list2 ul li .thumb {margin-bottom:8px;} .brandEcoWrap .handkerchief_list2 .p {font-size:12px;} } /* 브랜드 - RECYCLING */ .brandRecyclingWrap {padding-bottom:150px;} .brandRecyclingWrap .section1 {height:560px; text-align:center; background:url(../images/about/brand_recycling_section1.jpg) no-repeat center top; background-size:cover;} .brandRecyclingWrap .section1 .txt {padding:90px 30px 0;} .brandRecyclingWrap .section1 .txt h3 {font-size:32px; color:#ffffff;} .brandRecyclingWrap .section1 .txt .brandDesc {margin-top:9px; line-height:1.4; font-size:16px; color:#ffffff;} .brandRecyclingWrap .section1 .txt .box {display:inline-block;position:relative;max-width: 545px;margin-top:59px;padding:43px 100px 41px;border:1px solid #1e5e34;} .brandRecyclingWrap .section1 .txt .BG {position:absolute; left:50%; top:-21px; margin-left:-17px;} .brandRecyclingWrap .section1 .txt .box .p1 {line-height:1.4; font-size:26px; font-weight:bold; color:#ffffff;} .brandRecyclingWrap .section1 .txt .box .p2 {margin-top:13px; line-height:1.4; font-size:13px; color:#b8c3bb;} .brandRecyclingWrap .section2 {padding: 55px 0 70px;background:#f5f5f5;} .brandRecyclingWrap .section2 .inner {max-width: 595px;margin:0 auto;} .brandRecyclingWrap .section2 h4 {text-align:center; font-size:26px; color:#222222;} .brandRecyclingWrap .section2 .p {margin-top:5px; text-align:center; line-height:1.4; font-size:18px; color:#666666} .brandRecyclingWrap .section2 .msg {margin-top:55px; text-align:center; line-height:1.4; font-size:18px; color:#222222;} .brandRecyclingWrap .section2 .total {margin-top:18px; padding:27px 0 32px; text-align:center; font-size:26px; font-weight:bold; color:#222222; border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf;} .brandRecyclingWrap .section2 .total span {font-size:40px; font-weight:bold; color:#024137;} .brandRecyclingWrap .section2 .bottleList {margin-top:60px;} .brandRecyclingWrap .section2 .bottleList ul {overflow:hidden; text-align:center;} .brandRecyclingWrap .section2 .bottleList ul li {display:inline-block; width:73px; margin:0 20px; vertical-align:bottom; text-align:center;} .brandRecyclingWrap .section2 .bottleList ul li .num {padding-bottom:10px; font-size:16px; font-weight:bold; color:#222222; white-space:nowrap; background:url(../images/common/arrDown_7x4_222222.gif) no-repeat center bottom;} .brandRecyclingWrap .section2 .bottleList ul li .bottle {margin-top:10px;} .brandRecyclingWrap .section2 .bottleList ul li .year {margin-top:15px; font-size:16px; font-weight:bold; color:#222222;} .brandRecyclingWrap .section2 .recycling_from{text-align:center; margin-top:40px; font-size:13px; color:#999;} .brandRecyclingWrap .section3 {margin-top:88px;} .brandRecyclingWrap .section3 .cycle {max-width:700px; margin:0 auto;} .brandRecyclingWrap .section3 .cycle .chart {display:inline-block; position:relative;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle {overflow:hidden; position:absolute; left:34%; top:30%; width:38%; padding-top:38%; text-align:center; border-radius:50%; background:#f5f5f5; z-index:1;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle .txt {position:absolute; left:16%; top:50%; width:68%; margin-top:-65px; text-align:center;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle h4 {font-size:26px; color:#222222;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle .p {margin-top:15px; padding-top:15px; line-height:1.4; font-size:13px; color:#222222; border-top:1px solid #ababab;} .brandRecyclingWrap .section3 .cycle .chart .img {display:inline-block; position:relative;} .brandRecyclingWrap .section3 .cycle .chart .img ul {} .brandRecyclingWrap .section3 .cycle .chart .img ul li {position:absolute; text-align:center; line-height:1.6; font-size:13px; font-weight:bold; color:#666666;} .brandRecyclingWrap .section3 .cycle .chart .img ul li.li1 {left:38%; top:15%; width:28%;} .brandRecyclingWrap .section3 .cycle .chart .img ul li.li2 {right:-3%; top:56%; width:25%;} .brandRecyclingWrap .section3 .cycle .chart .img ul li.li3 {right:10%;top:98%;width: 29%;} .brandRecyclingWrap .section3 .cycle .chart .img ul li.li4 {left:9%; top:95%; width:27%;} .brandRecyclingWrap .section3 .cycle .chart .img ul li.li5 {left:1%; top:54%; width:24%;} .brandRecyclingWrap .section3 .howToCampaign {margin-top:110px; text-align:center;} .brandRecyclingWrap .section3 .howToCampaign h5 {font-size:18px; color:#222222;} .brandRecyclingWrap .section3 .howToCampaign ol {margin-top:20px;} .brandRecyclingWrap .section3 .howToCampaign ol li {line-height:1.6; font-size:16px; color:#222222;} .brandRecyclingWrap .section3 .howToCampaign ul {margin-top:35px;} .brandRecyclingWrap .section3 .howToCampaign ul li {line-height:1.6; font-size:13px; color:#666666;} .brandRecyclingWrap .section3 .howToCampaign ul li a.aLine{font-weight:bold; text-decoration:underline;} .brandRecyclingWrap .section3 .howToCampaign .p {margin-top:20px;} .brandRecyclingWrap .section3 .howToCampaign .p span {display:inline-block; padding:5px 0 5px 36px; line-height:1.6; font-size:13px; font-weight:bold; color:#222222; background:url(../images/about/BG_brand_recycling_green.png) no-repeat left top;} @media screen and (max-width: 768px){ .brandRecyclingWrap .section1 {height:auto; padding:65px 0; background-size:auto 100%;} .brandRecyclingWrap .section1 .txt {padding-top:0;} .brandRecyclingWrap .section1 .txt .box {padding:43px 40px 41px;} .brandRecyclingWrap .section3 {padding:0 30px} } @media screen and (max-width: 640px){ .brandRecyclingWrap {padding-bottom:50px;} .brandRecyclingWrap .section1 {margin-top:1px; padding:35px 0;} .brandRecyclingWrap .section1 .txt {padding:0 2.25%;} .brandRecyclingWrap .section1 .txt h3 {margin:0 20px; font-size:16px;} .brandRecyclingWrap .section1 .txt .brandDesc {margin:5px 20px 0; font-size:12px;} .brandRecyclingWrap .section1 .txt .box {display:block; margin:27px 2.25% 0; padding:20px 10px;} .brandRecyclingWrap .section1 .txt .BG {top:-12px; margin-left:-10px; width:20px;} .brandRecyclingWrap .section1 .txt .box .p1 {font-size:14px;} .brandRecyclingWrap .section1 .txt .box .p2 {margin-top:6px; font-size:12px;} .brandRecyclingWrap .section2 {padding:30px 2.25%;} .brandRecyclingWrap .section2 .inner {} .brandRecyclingWrap .section2 h4 {font-size:14px;} .brandRecyclingWrap .section2 .p {font-size:12px;} .brandRecyclingWrap .section2 .msg {margin-top:20px; font-size:12px;} .brandRecyclingWrap .section2 .total {margin-top:10px; padding:15px 0; font-size:13px;} .brandRecyclingWrap .section2 .total span {font-size:20px;} .brandRecyclingWrap .section2 .bottleList {margin-top:30px;} .brandRecyclingWrap .section2 .bottleList ul li {width:14%; margin:0 6px;} .brandRecyclingWrap .section2 .bottleList ul li .num {padding-bottom:7px; font-size:12px;} .brandRecyclingWrap .section2 .bottleList ul li .bottle {margin-top:5px;} .brandRecyclingWrap .section2 .bottleList ul li .year {margin-top:10px; font-size:12px;} .brandRecyclingWrap .section3 {margin-top:40px; padding:0 2.25%;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle {position:static; width:auto; padding-top:0; border-radius:0; background:none;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle .txt {position:static; width:auto; margin-top:0;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle h4 {font-size:14px;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle h4 br {display:none;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle .p {margin-top:10px; padding-top:0; font-size:12px; border-top:none;} .brandRecyclingWrap .section3 .cycle .chart .titleCircle .p br {display:none;} .brandRecyclingWrap .section3 .cycle .chart .img {margin-top:15px;} .brandRecyclingWrap .section3 .cycle .chart .img ul {} .brandRecyclingWrap .section3 .cycle .chart .img ul li {line-height:1.4; font-size:12px; font-weight:normal;} .brandRecyclingWrap .section3 .cycle .chart .img ul li.li2 {right:-1%;} .brandRecyclingWrap .section3 .howToCampaign {margin:100px 3% 0;} .brandRecyclingWrap .section3 .howToCampaign h5 {font-size:14px;} .brandRecyclingWrap .section3 .howToCampaign ol {margin-top:10px;} .brandRecyclingWrap .section3 .howToCampaign ol li {font-size:13px;} .brandRecyclingWrap .section3 .howToCampaign ul {margin-top:15px;} .brandRecyclingWrap .section3 .howToCampaign ul li {font-size:12px;} .brandRecyclingWrap .section3 .howToCampaign .p {margin-top:12px;} .brandRecyclingWrap .section3 .howToCampaign .p span {display:block; padding:23px 0 0; font-size:12px; background:url(../images/about/BG_brand_recycling_green.png) no-repeat center top; background-size:15px auto;} } /* 브랜드 - CLEAN EARTH */ .brandEarthWrap {padding-bottom:150px;} .brandEarthWrap .section1 {height:560px; text-align:center; background:url(../images/about/brand_earth_section1.jpg) no-repeat center top; background-size:cover;} .brandEarthWrap .section1 .txt {padding-top:139px;} .brandEarthWrap .section1 .txt h3 {font-size:32px; color:#222222;} .brandEarthWrap .section1 .txt .brandDesc {margin-top:9px; line-height:1.4; font-size:16px; color:#222222;} .brandEarthWrap .section1 .txt .box {display:inline-block; position:relative; margin-top:59px; padding:43px 150px 41px; border:1px solid #d5e5f6;} .brandEarthWrap .section1 .txt .BG {position:absolute; left:50%; top:-21px; margin-left:-17px;} .brandEarthWrap .section1 .txt .box .p1 {font-size:18px; font-weight:bold; color:#ffffff;} .brandEarthWrap .section1 .txt .box .p2 {margin-top:4px; line-height:1.2; font-size:26px; font-weight:bold; color:#ffffff;} .brandEarthWrap .section2 {max-width:1200px; margin:75px auto 0;} .brandEarthWrap .section2 h4 {text-align:center; line-height:1.2; font-size:26px; color:#222222;} .brandEarthWrap .section2 .section2_1 {position:relative; margin-top:55px;} .brandEarthWrap .section2 .section2_1:after {content:''; display:block; clear:both;} .brandEarthWrap .section2 .section2_1 .txt {float:left; position:relative; width:48.2%;} .brandEarthWrap .section2 .section2_1 .txt .img1 {position:absolute; left:-11%; top:20px; width:31%;} .brandEarthWrap .section2 .section2_1 .txt .p {position:relative; padding:6% 16% 6% 20%; line-height:1.8; font-size:13px; color:#666666; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;} .brandEarthWrap .section2 .section2_1 .img {float:right; width:48.2%;} .brandEarthWrap .section2 .section2_2 {position:relative; top:-30px; margin-bottom:-30px;} .brandEarthWrap .section2 .section2_2:after {content:''; display:block; clear:both;} .brandEarthWrap .section2 .section2_2 .img {float:left; width:48.2%;} .brandEarthWrap .section2 .section2_2 .txt {float:right; width:48.2%; padding-top:60px;} .brandEarthWrap .section2 .section2_2 .txt .img1 {float:left; width:51.3%; margin-right:3.2%;} .brandEarthWrap .section2 .section2_2 .txt .txt1 {} .brandEarthWrap .section2 .section2_2 .txt .txt1 .p {line-height:1.8; font-size:13px; color:#666666;} .brandEarthWrap .section2 .section2_2 .txt .txt1 .p1 {margin-top:24px;} .brandEarthWrap .section3 {max-width:1200px; margin:95px auto 0;} .brandEarthWrap .section3 h4 {text-align:center; line-height:1.2; font-size:26px; color:#222222;} .brandEarthWrap .section3 .section3_1 {overflow:hidden; margin-top:54px;} .brandEarthWrap .section3 .section3_1 .txt {float:left; width:48.2%;} .brandEarthWrap .section3 .section3_1 .txt .p {margin-left:20%; padding:6% 16% 6% 0; line-height:1.8; font-size:13px; color:#666666; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;} .brandEarthWrap .section3 .section3_1 .img {float:right; width:48.2%;} @media screen and (max-width: 1100px){ .brandEarthWrap .section2 .section2_2 {top:0; margin:30px 0 0;} .brandEarthWrap .section2 .section2_2 .txt {padding-top:0;} } @media screen and (max-width: 768px){ .brandEarthWrap .section1 {position:relative; height:auto; padding-top:67%; background-size:auto 100%;} .brandEarthWrap .section1 .txt {position:absolute; left:0; top:0; width:100%; padding-top:10%;} .brandEarthWrap .section2 .section2_1 {margin:0 2.25%;} .brandEarthWrap .section2 .section2_1 .txt {float:none; width:auto; margin-top:45px;} .brandEarthWrap .section2 .section2_1 .txt .img1 {left:-9%; top:6%;} .brandEarthWrap .section2 .section2_1 .img {float:none; position:relative; width:auto; margin-top:20px;} .brandEarthWrap .section2 .section2_1 .img img {width:100%;} .brandEarthWrap .section2 .section2_2 {margin:0 2.25%;} .brandEarthWrap .section2 .section2_2 .img {float:none; width:auto; margin-top:20px;} .brandEarthWrap .section2 .section2_2 .img img {width:100%;} .brandEarthWrap .section2 .section2_2 .txt {float:none; width:auto; margin-top:20px;} .brandEarthWrap .section2 .section2_2 .txt .img1 img {width:100%;} .brandEarthWrap .section3 .section3_1 {margin:54px 2.25% 0;} .brandEarthWrap .section3 .section3_1 .txt {float:none; width:auto;} .brandEarthWrap .section3 .section3_1 .txt .p {margin:0; padding:6% 0;} .brandEarthWrap .section3 .section3_1 .img {float:none; width:auto; margin-top:20px;} .brandEarthWrap .section3 .section3_1 .img img {width:100%;} } @media screen and (max-width: 640px){ .brandEarthWrap {padding-bottom:50px;} .brandEarthWrap .section1 {height:224px; margin-top:1px; padding-top:0;} .brandEarthWrap .section1 .txt {padding-top:30px;} .brandEarthWrap .section1 .txt h3 {font-size:14px;} .brandEarthWrap .section1 .txt .brandDesc {margin-top:2px; font-size:12px;} .brandEarthWrap .section1 .txt .box {display:block; margin:27px 2.25% 0; padding:20px 0;} .brandEarthWrap .section1 .txt .BG {top:-12px; margin-left:-10px; width:20px;} .brandEarthWrap .section1 .txt .box .p1 {font-size:12px; font-weight:normal;} .brandEarthWrap .section1 .txt .box .p2 {margin-top:0; font-size:15px;} .brandEarthWrap .section2 {margin-top:30px;} .brandEarthWrap .section2 h4 {font-size:16px;} .brandEarthWrap .section2 .section2_1 .txt {margin-top:25px;} .brandEarthWrap .section2 .section2_1 .txt .img1 {top:17px;} .brandEarthWrap .section2 .section2_1 .txt .p {font-size:12px; padding-top:20px; padding-bottom:20px;} .brandEarthWrap .section2 .section2_1 .img {margin-top:2.25%;} .brandEarthWrap .section2 .section2_2 .txt {margin-top:2.25%;} .brandEarthWrap .section2 .section2_2 .img {margin-top:2.25%;} .brandEarthWrap .section2 .section2_2 .txt .txt1 .p {font-size:12px;} .brandEarthWrap .section2 .section2_2 .txt .txt1 .p1 {margin-top:10px;} .brandEarthWrap .section3 {margin-top:50px;} .brandEarthWrap .section3 h4 {font-size:14px;} .brandEarthWrap .section3 .section3_1 {margin-top:22px;} .brandEarthWrap .section3 .section3_1 .txt .p {padding:20px 0;} .brandEarthWrap .section3 .section3_1 .img {margin-top:2.25%;} } /* 브랜드 - Opportunity */ .brandOpportunityWrap{padding-bottom:150px;} .brandOpportunityWrap .section1{height: 560px; text-align: center; background: url(../images/about/brand_opportunity_section1.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover;} .brandOpportunityWrap .section1 h3 {padding-top:182px;} .brandOpportunityWrap .section1 h3 span {display:block; font-size:60px; font-weight:normal; color:#222222;} .brandOpportunityWrap .section1 h3 strong {display:block; margin-top:10px; font-size:32px; color:#222222;} .brandOpportunityWrap .section1 .brandDesc {margin-top:7px; font-size:16px; color:#222222;} .brandOpportunityWrap .section2 {max-width: 1200px; margin: 0 auto; margin-top:5%;} .brandOpportunityWrap .section2 .selectBoxWrap{width: 1180px; margin: 4% auto 2% auto; border: 10px solid #F5F5F5; } .brandOpportunityWrap .section2 .selectBoxWrap .selectCon{margin: 3% 7%;} .brandOpportunityWrap .section2 .selectBoxWrap .selectCon:after{content:''; display: block; clear: both; } .brandOpportunityWrap .section2 .selectBoxWrap .selectCon > ul > li{float: left; width: 25%; margin: 0 4%; } .brandOpportunityWrap .section2 .selectBoxWrap .selectCon > ul > li > dl > dt{font-size: 16px; color: #222; text-align: left; margin-bottom: 22px;} .brandOpportunityWrap .section2 .selectBoxWrap .selectCon > ul > li > dl > dd > span > .select{width: 100%; border: none; border-bottom: 1px solid #aaaaaa;} .brandOpportunityWrap .section2 .selectBoxWrap .resultSelbtn{padding-bottom:1.5%; text-align: center;} .brandOpportunityWrap .section2 .selectBoxWrap .resultSelbtn a{display: inline-block;min-width: 113px;padding: 0 10px;text-align: center; border: 1px solid #222222; background: #222222; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .brandOpportunityWrap .section2 .selectBoxWrap .resultSelbtn a span{display: inline-block;line-height: 38px;font-size: 13px;color: #ffffff;} .brandOpportunityWrap .section2 .selectBoxWrap .resultSelbtn a.btnW{background: #ffffff;} .brandOpportunityWrap .section2 .selectBoxWrap .resultSelbtn a.btnW span{color: #222222;} .apply_re{text-align: center; padding: 1.5% 0; background-color: #FCFCFC; } .apply_re .AP_blackBtn{ display: inline-block; min-width: 274px; padding: 10px; text-align: center; border: 1px solid #171717; background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: pointer;} .apply_re .AP_blackBtn strong{font-size: 14px; color: #343434; } .apply_re .AP_blackBtn p{line-height: 1.5; color: #9c9c9c; font-size: 13px; } .brandOpportunityWrap .section3{max-width: 1200px; margin: 0 auto;} .brandOpportunityWrap .section3 .listTitle{font-size: 14px; color: #222; border-bottom: 1px solid #aaa; padding-bottom: 1.5%;} .listType_3 > ul > li{padding: 2% 0; border-bottom: 1px solid #E5E5E5;} .listType_3 > ul > li:after{content:''; display: block; clear: both;} .listType_3 > ul > li > .LT_L{float: left; padding-left: 25px; text-align: left;} .listType_3 > ul > li > .LT_L .LT_title{width: 360px; margin-bottom: 10px;} .listType_3 > ul > li > .LT_L .LT_title a{font-size: 16px; color: #222;} .listType_3 > ul > li > .LT_L .LT_subtitle{font-size: 13px; color: #999;} .listType_3 > ul > li > .LT_R{float: right;} .listType_3 > ul > li > .LT_R a{display: inline-block; min-width: 113px; padding: 0 10px; text-align: center; border: 1px solid #222222; background: #222222; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 3px;} .listType_3 > ul > li > .LT_R a span{display: inline-block; font-size: 13px; line-height: 38px; color: #fff;} .viewType01 dl dt{padding: 2% 0 2% 25px; border-bottom: 1px solid #E5E5E5;} .viewType01 dl dt .opView_title{ margin-bottom: 10px; font-size: 16px; color: #222;} .viewType01 dl dt .opView_subtitle{font-size: 13px; color: #999;} .viewType01 dl dd{padding: 3%; border-bottom: 1px solid #E5E5E5; line-height: 1.4; font-size: 14px; color: #666666;} .viewBtWrap{margin-top: 2%;} .viewBtWrap:after{content:''; display: block; clear: both;} .viewBtWrap .viewBL{float: left;} .viewBtWrap .viewBL a{font-size: 14px; color: #222;} .viewBtWrap .viewBR{float: right;} .viewBtWrap .viewBR a {display: inline-block; min-width: 113px; padding: 0 10px; text-align: center; border: 1px solid #222222; background: #222222; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 3px;} .viewBtWrap .viewBR a span {display: inline-block; font-size: 13px; line-height: 38px; color: #fff;} .popUpArea .popUpContainer.topC{margin-top: -350px;} .popUpArea.AP_On .popUpContainer.topC{margin-top: -325px;} .popUpArea.AP_On .popUpContainer .popUpCont .cont .in_text{padding-bottom:7%;} .popUpArea .popUpContainer .popUpCont.wC{max-width: 800px;} .popUpArea .popUpContainer .popUpCont .cont .in_text .registerBox_inner{padding: 0;} .popUpArea .popUpContainer .popUpCont .cont .in_text .registerBox_inner .dl dd .input-text{width: 93%;} .popUpArea .popUpContainer .popUpCont .cont .in_text .registerBox_inner .taR{text-align: right;} .popUpArea .popUpContainer .popUpCont .cont .in_text .registerBox_inner .taR .required {display: inline-block; margin-right: 10px; padding-left: 10px; background: url(../images/common/bul_required.gif) no-repeat left 6px;} .chkWrap{margin-top: 10px;} .chkWrap .input-check {-webkit-appearance: none; width: 17px; height: 17px; border: 1px solid #cccccc; background: #ffffff;} .chkWrap label {font-size: 13px; color: #666;} .chkWrap label a{color: #024137; padding-bottom: 2px;} .chkWrap .input-check:checked {box-shadow: 0 0 0 3px #ffffff inset; background: #454b51;} label.grayAline{color: #999;} button.popButton.btnW {display: inline-block; text-align: center; width: 133px; height: 40px; line-height: 24px; color:#222222; border:1px solid #222; background:#fff;} .chkWrap .unit .error{display: block; margin-top:10px; color:#c50000;} .text_quickZone{display:block !important;} .text_quickZone .text_Aboslute{position:fixed; top: 50%; right:0; } .text_quickZone .text_Aboslute .text_quick{ background:url(../images/about/quick_BGoff.png) 0 0 repeat; border-top-left-radius: 40px; -webkit-border-top-left-radius: 40px; -moz-border-top-left-radius: 40px; border-bottom-left-radius: 39px; -webkit-border-bottom-left-radius: 40px; -moz-border-bottom-left-radius: 40px; } .text_quickZone .text_Aboslute .text_quick:hover{background:url(../images/about/quick_BGon.png) 0 0 repeat;} .text_quickZone .text_Aboslute .text_quick a{display:inline-block;width:117px;padding:18px 0;padding-left:50px;font-size:13px;color:#025d24;background:url(../images/about/quick_leafOff.png) 18% center no-repeat;} .text_quickZone .text_Aboslute .text_quick:hover a{background:url(../images/about/quick_leafOn.png) 18% center no-repeat; color:#fff;} @media all and (max-width: 1260px){ .brandOpportunityWrap .section2 .selectBoxWrap{width: 90%;} .brandOpportunityWrap .section3{width: 91%;} } @media all and (max-width: 768px){ .brandOpportunityWrap .section1 {position: relative;height: auto;padding-top: 67%;background-size: auto 100%;} .brandOpportunityWrap .section1 .txt {position:absolute; left:0; top:0; width:100%;} .brandOpportunityWrap .section1 h3 {padding-top:22%;} .text_quickZone .text_Aboslute{top:80%;} .text_quickZone .text_Aboslute .text_quick{background:url(../images/about/quick_BGon.png) 0 0 repeat;} .text_quickZone .text_Aboslute .text_quick a{width:77px; background:url(../images/about/quick_leafOn.png) 18% center no-repeat; color:#fff;} } @media all and (max-width: 640px){ .brandOpportunityWrap {padding-bottom:50px;} .brandOpportunityWrap .section1 {height: 224px;padding-top: 0;} .brandOpportunityWrap .section1 .txt {position: absolute;left: 0;top: 50%;width: 100%;margin-top: -40px;} .brandOpportunityWrap .section1 h3 {padding-top:0;} .brandOpportunityWrap .section1 h3 span {font-size:30px;} .brandOpportunityWrap .section1 h3 strong {margin-top:5px; font-size:16px;} .brandOpportunityWrap .section1 .brandDesc {margin-top:3px; font-size:12px;} .popUpArea .popUpContainer.topC{margin-top: -295px;} .popUpArea.AP_On .popUpContainer.topC{margin-top:-260px;} .popUpArea .popUpContainer .popUpCont .cont .registerBox{margin: 0;} .popUpArea.AP_On .popUpContainer .popUpCont .cont .in_text{max-height:340px} .popUpArea.AP_On .popUpContainer.topC{margin-top:-192px} } @media all and (max-width: 580px){ .brandOpportunityWrap .section2 .selectBoxWrap{width: 80%;} .brandOpportunityWrap .section2 .selectBoxWrap .selectCon > ul > li{width: 90%; margin: 4%;} .brandOpportunityWrap .section2 .selectBoxWrap .selectCon > ul > li > dl > dt{margin-bottom: 5px; } .brandOpportunityWrap .section2 .selectBoxWrap .selectCon{margin: 7%;} .brandOpportunityWrap .section2 .selectBoxWrap .resultSelbtn a{min-width:75px;} .listType_3 > ul > li > .LT_L{width: 60%;} .listType_3 > ul > li > .LT_L .LT_title{width: 100%;} .listType_3 > ul > li > .LT_R a{min-width:53px;} .viewBtWrap .viewBR a{min-width:53px;} } @media all and (max-width: 360px){ .popUpArea .popUpContainer.topC{margin-top: -260px;} } /* 브랜드 - what we stand for */ .brandwwsfWrap{} .brandwwsfWrap .section1{height: 560px; text-align: center; background: url(../images/about/brand_wwsf_section1.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover;} .brandwwsfWrap .section1 h3 {padding-top:182px;} .brandwwsfWrap .section1 h3 span {display:block; font-size:60px; font-weight:normal; color:#222222;} .brandwwsfWrap .section1 h3 strong {display:block; margin-top:10px; font-size:32px; color:#222222;} .brandwwsfWrap .section1 .brandDesc {margin-top:7px; font-size:16px; color:#222222;} .brandwwsfWrap .section2{max-width:1200px; margin:0 auto; padding: 4%;} .brandwwsfWrap .section2 .sec2_top{position:relative; padding-bottom:8%;} .brandwwsfWrap .section2 .sec2_top .img{margin-left:10%;} .brandwwsfWrap .section2 .sec2_top .txt{position:absolute;bottom:22px;left:50%;margin-left: 4%;width: 45%;} .brandwwsfWrap .section2 .sec2_top .txt .bwwsf_sec2_dl dt{font-weight:bold; font-size:26px; color:#222; margin-bottom:27px;} .brandwwsfWrap .section2 .sec2_top .txt .bwwsf_sec2_dl dd{font-size:13px; color:#666; margin-bottom:27px; line-height:24px;} .brandwwsfWrap .section2 .sec2_top .txt .bwwsf_sec2_dl dd br{display:none;} .brandwwsfWrap .section2 .sec2_bt{position:relative;} .brandwwsfWrap .section2 .sec2_bt .sec2_bt_dot{position:absolute; top:-17px; left:50%; text-align:center;} .brandwwsfWrap .section2 .sec2_bt .sec2_bt_In{width:990px; margin:0 auto; padding:3.5% 0; border:1px solid #ccc; border-left:0; border-right:0;} .brandwwsfWrap .section2 .sec2_bt .sec2_bt_In > p{font-size:24px; color:#222; text-align:center; line-height:33px;} .brandwwsfWrap .section3 {background-color:#f9f9f9;} .brandwwsfWrap .section3 .sec3_in{max-width:1200px; margin:0 auto; padding-bottom:5%;} .brandwwsfWrap .section3 .sec3_in h4{padding:5% 0; font-weight:bold; text-align:center; color:#222; font-size:26px;} .brandwwsfWrap .section3 .sec3_in .sec3_list:after{content:''; display:block; clear:both;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li{float:left; width:33.3%; margin-bottom:4.6%; box-sizing:border-box; padding:0 10px} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul.listCon2{width:71%; margin:0 auto;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul.listCon2 > li{width:49.3%;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul.listCon2 > li:first-child{clear:both;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li .img{position:relative; text-align:center; margin-bottom:33px;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li .img > p{position:absolute; width:100%; margin:0 auto; top:46%; font-size:22px; color:#fff;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li .img > p.ff_C1{top:41%; font-size:32px;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li .txt dl dt{margin-bottom:5.3%; text-align:center; font-size:15px; font-weight:bold; color:#222; line-height:22px;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li .txt dl dd{text-align:center; font-size:13px; color:#666; line-height:22px;} .language_L015 .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li .txt dl dd{letter-spacing:-0.4px;} @media all and (max-width: 1200px){ .brandwwsfWrap .section2 .sec2_top .img{margin:0 auto; margin-bottom:5%;} .brandwwsfWrap .section2 .sec2_top .txt{position:static; width:90%; margin:0 auto;} .brandwwsfWrap .section2 .sec2_top .txt br{display:none;} .brandwwsfWrap .section2 .sec2_bt .sec2_bt_In{width:90%;} .brandwwsfWrap .section2 .sec2_bt .sec2_bt_In > p{font-size:18px;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li{width:49.3%; margin-bottom:8%;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li:nth-child(3){clear:both;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul.listCon2{width:100%;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul.listCon2 > li:first-child{clear:none;} } @media all and (max-width: 768px){ .brandwwsfWrap .section1 {position: relative; height: auto; padding-top: 67%; background-size: auto 100%;} .brandwwsfWrap .section1 .txt {position: absolute; left: 0; top: 0; width: 100%;} .brandwwsfWrap .section1 h3{padding-top:22%;} } @media all and (max-width: 640px){ .brandwwsfWrap {} .brandwwsfWrap .section1 {height: 224px; padding-top: 0;} .brandwwsfWrap .section1 .txt {position:absolute; left:0; top:50%; width:100%; margin-top:-65px;} .brandwwsfWrap .section1 h3 {padding-top:0;} .brandwwsfWrap .section1 h3 span {font-size:30px;} .brandwwsfWrap .section1 h3 strong {margin-top:5px; font-size:16px;} .brandwwsfWrap .section1 .brandDesc{font-size:13px;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul > li{width:100%;} .brandwwsfWrap .section3 .sec3_in .sec3_list > ul.listCon2 > li{width:100%;} .brandwwsfWrap .section2 .sec2_top .txt .bwwsf_sec2_dl dt{font-size:18px;} .brandwwsfWrap .section3 .sec3_in h4{font-size:18px;} .brandwwsfWrap .section2 .sec2_bt .sec2_bt_In > p{font-size:14px; line-height:20px;} } /* 브랜드 - what we do */ .brandwhatwedoWrap{padding-bottom:150px;} .brandwhatwedoWrap .section1{height: 560px; text-align: center; background: url(../images/about/brand_wwd_section1.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover;} .brandwhatwedoWrap .section1.section1_2018 {background: url(../images/about/brand_wwd_section1_2018.jpg) center no-repeat;} .brandwhatwedoWrap .section1 h3 {padding-top:182px;} .brandwhatwedoWrap .section1 h3 span {display:block; font-size:60px; font-weight:normal; color:#222222;} .brandwhatwedoWrap .section1 h3 strong {display:block; margin-top:10px; font-size:32px; color:#222222;} .brandwhatwedoWrap .section1 .brandDesc {margin-top:7px; font-size:16px; color:#222222;} .brandwhatwedoWrap .section2{max-width: 1200px; margin: 75px auto 0;} .brandwhatwedoWrap .section2 h4 {padding-bottom: 6%; text-align: center; line-height: 1.2; font-size: 26px; color: #222222;} .brandwhatwedoWrap .section2 .sec2_cont {border-bottom:1px solid #e5e5e5; padding-bottom:7%;} .brandwhatwedoWrap .section2 .sec2_box:after {content:''; display:block; clear:both;} .brandwhatwedoWrap .section2 .sec2_top {margin-bottom:5%;} .brandwhatwedoWrap .section2 .sec2_L {float:left; width:55%; margin-right:3%;} .brandwhatwedoWrap .section2 .sec2_R {float:right; width:42%;} .brandwhatwedoWrap .section2 .leafBg {text-align:right;} .brandwhatwedoWrap .section2 dl dt{margin: 4% 0 3%; font-weight:bold; font-size:22px; color:#222; text-align:left;} .brandwhatwedoWrap .section2 dl dd{font-size:13px; color:#666; text-align:left; line-height:24px;} .brandwhatwedoWrap .section2 .sec2_btn{margin-top:6%;} .brandwhatwedoWrap .section2 .applyStyle{display: inline-block; min-width: 148px; padding: 0 10px; text-align: center; border: 1px solid #222222; background: #222222; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 3px;} .brandwhatwedoWrap .section2 .applyStyle span {display: inline-block; font-size: 14px;line-height: 38px; color: #fff;} .brandwhatwedoWrap .section3{max-width: 1200px; margin: 75px auto 0;} .brandwhatwedoWrap .section3 h4 {padding-bottom: 6%; text-align: center; line-height: 1.2; font-size: 26px; color: #222222;} .brandwhatwedoWrap .section3 .sec3_worldMap {max-width:1186px; margin: 0 auto;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in{position:relative;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .PC_wdmap{display:block;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .M_wdmap{display:none;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3W_posA{position:absolute; background-color:#fff; border:1px solid #bfbfbf; width:166px; /* box-shadow:3px 3px 5px #F7F7F7; */} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3W_posA .posText{padding:13px; } .brandwhatwedoWrap .section3 .sec3_worldMap .sec3W_posA .posText dl dt{font-weight:bold; font-size:15px; color:#222;border-bottom:1px solid #aaa; padding-bottom:6px; margin-bottom:10px;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3W_posA .posText dl dd{font-size:13px; color:#444; margin-bottom:5px;} .brandwhatwedoWrap .section3 .sec3_worldMap .posHK{top: 9%; left: 28%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posKR{top: 17%; left: 49%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posTW{top: 35%; left: 49%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posVT{top: 53%; left: 49%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posSG{top: 71%; left: 49%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posMY{top: 83%; left: 7%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posTH{top: 65%; left: 7%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posIN{top: 47%; left: 7%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posCH{top: 29%; left: 15%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posUSA{top: 42%; right: 0;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .M_img{text-align:center;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .M_img img{padding-bottom:7%;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .M_wdTable{width:90%; margin:0 auto; border:1px solid #bfbfbf; background-color:#fff; box-shadow:3px 3px 5px #F7F7F7;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .M_wdTable table{width:90%; margin:2% auto; } .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .M_wdTable table th{font-size:14px; color:#222; font-weight:bold; text-align:center; border-bottom:1px solid #aaa; padding:4% 0;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .M_wdTable table td{font-size:13px; color:#666;text-align:center; padding:2% 0;} @media all and (max-width: 1024px){ .brandwhatwedoWrap .section2 .sec2_cont{width:95%; margin:0 auto;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3W_posA{width:122px;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3W_posA .posText{padding:5px;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3W_posA .posText dl dt{font-size:13px; padding-bottom:2px; margin-bottom:5px;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3W_posA .posText dl dd{font-size:12px; margin-bottom:3px;} .brandwhatwedoWrap .section3 .sec3_worldMap .posHK{top:11%;} } @media all and (max-width: 940px){ .brandwhatwedoWrap .section3 .sec3_worldMap .posCH{left:12%;} } @media all and (max-width: 830px){ .brandwhatwedoWrap .section3 .sec3_worldMap .posCH{left:10%;} .brandwhatwedoWrap .section3 .sec3_worldMap .posIN{left:5%;} } @media all and (max-width: 768px){ .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .PC_wdmap{display:none;} .brandwhatwedoWrap .section3 .sec3_worldMap .sec3_world_in .M_wdmap{display:block;} .brandwhatwedoWrap .section1 {position: relative; height: auto; padding-top: 67%; background-size: auto 100%;} .brandwhatwedoWrap .section1 .txt {position: absolute; left: 0; top: 0; width: 100%;} .brandwhatwedoWrap .section1 h3{padding-top:22%;} } @media all and (max-width: 640px){ .brandwhatwedoWrap {padding-bottom:50px;} .brandwhatwedoWrap .section1 {height: 224px; padding-top: 0;} .brandwhatwedoWrap .section1 .txt {position:absolute; left:0; top:50%; width:100%; margin-top:-65px;} .brandwhatwedoWrap .section1 h3 {padding-top:0;} .brandwhatwedoWrap .section1 h3 span {font-size:30px;} .brandwhatwedoWrap .section1 h3 strong {margin-top:5px; font-size:16px;} .brandwhatwedoWrap .section2 .sec2_top > div{float:none; width:95%; margin:0 auto; margin-bottom:8%;} .brandwhatwedoWrap .section2 .sec2_bt > div{float:none; width:95%; margin:0 auto;} .brandwhatwedoWrap .section2 .sec2_top > .sec2_R > div{text-align:center;} .brandwhatwedoWrap .section2 h4{font-size:18px;} .brandwhatwedoWrap .section2 dl dt{font-size:16px;} .brandwhatwedoWrap .section2 .sec2_btn{text-align:center;} .brandwhatwedoWrap .section2 .sec2_bt > div{position:relative; margin-bottom: 8%; text-align: center;} .brandwhatwedoWrap .section2 .leafBg{position:absolute; top:0; right:0;} .brandwhatwedoWrap .section2 .leafBg img{width:70%;} .brandwhatwedoWrap .section3 h4{font-size:18px;} } /* 이니스프리 리워드 */ .rewardsWrap .section_1{height: 274px; text-align: center; background: url(../images/customer/guide_rewards_section1.jpg) no-repeat center center; background-size: cover;} .rewardsWrap .section_1 .rew_se1Text{position: relative; top:35%;} .rewardsWrap .section_1 .rew_se1Text h3{display: inline; background:url(../images/about/BG_brand_recycling.png) left top no-repeat; padding-left: 60px; font-size: 38px; color: #fff; } .rewardsWrap .section_1 .rew_se1Text h3 span{text-indent: -999px; background:url(../images/customer/BG_brand_recycling_right.png) right 8px no-repeat; padding-right: 60px;} .rewardsWrap .section_1 .rew_se1Text > p{margin: 1%; font-size: 24px; color: #7ecc99;} .rewardsWrap .section_1 .rew_se1Text > p{color: #7cc2a8;} /* NEW로고 20181101 */ .rewardsWrap .section_2{} .rewardsWrap .section_2 .round3cont{width: 815px; margin: 3% auto;} .rewardsWrap .section_2 .round3cont:after{content:''; display: block; clear: both;} .rewardsWrap .section_2 .round3cont ul li{float: left; width: 25.3% ; padding-left: 12%; background: url(../images/customer/rew_se2_arrow.png) 12% center no-repeat;} .rewardsWrap .section_2 .round3cont.arrowR ul li{background: url(../images/customer/rew_se2_arrowR.png) 12% center no-repeat;} .rewardsWrap .section_2 .round3cont ul li:first-child{background: none; padding-left: 0;} .rewardsWrap .section_2 .round3cont ul li div{text-align: center; position: relative;} .rewardsWrap .section_2 .round3cont ul li div > span{position: absolute; display:block; width:100%; margin:0 auto; bottom:25%; font-weight: bold; font-size: 23px; color: #fff;} .rewardsWrap .section_2 .round3cont.jp ul li{width:44%;} .rewardsWrap .section_3{background-color: #FAFAFA;} .rewardsWrap .section_3 h3{padding-top: 2%; font-weight: normal; text-align: center; font-size: 23px; color: #555; } .rewardsWrap .section_3 .rew_se3Cont{width: 1200px; margin: 0 auto; padding-top: 3%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top{display:flex;width: 970px; margin: 0 auto; padding-bottom: 13px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top .pdC dd{padding-top: 7.3%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top:after{content:''; display: block; clear: both;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div{float: left; width: 313px; min-height: 300px; margin-left: 12px; background-color: #fff; border: 1px solid #D3D3D3; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div:first-child{margin-left: 0;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dt{padding: 8% 0; text-align: center;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dt .dtImg{position: relative; left: 10px; margin-bottom: 1%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dt .dtText{font-weight: bold;font-size: 17px;color: #222;text-align: center;width: 90%;margin: 0 auto;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd{padding: 0 4%; padding-top: 8%; background:url(../images/customer/rew_se3_dot.jpg) center top repeat-x;text-align: center; font-size: 16px; color: #333;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd:last-child{min-height: 65px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd:last-child strong{font-size:18px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC4_last{padding-top:7%; min-height:69px; font-size:14px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC3_last{padding-top:6%; padding-bottom:2%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC2_last{font-size:13px; padding-top:5%; min-height:76px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC1_last{padding-top:11%; min-height:56px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.minHC{min-height: 40px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.minHC .rangeBtn{margin-bottom: 6.8%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd .taR{text-align:right;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1{ min-height: 138px; padding-top:14%;} .rewardsWrap.id .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1{ min-height: 166px;} .rewardsWrap.id_loc .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1{ min-height: 138px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTyLong{ min-height: 158px; padding-top:8%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTyLong2{ min-height: 164px; padding-top:6%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTyLong3{ min-height: 158px; padding-top:8%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li{margin-bottom: 6%; text-align: left;} .rewardsWrap.id .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .m190806_1 li{margin-bottom: 10%;} .rewardsWrap.id_loc .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .m190806_1 li{margin-bottom: 8%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li:last-child{margin-bottom: 0;} .rewardsWrap.id .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .m190806_1 li:last-child{margin-bottom: 0;} .rewardsWrap.id_loc .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .m190806_1 li:last-child{margin-bottom: 0;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li:after{content:''; display: block; clear: both;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div{float: left; line-height: 20px; letter-spacing: -0.5px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div:first-child{margin-right: 4%;} .rewardsWrap.id .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div:first-child{margin-right: 0; padding-right:12px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy2{} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn{text-align: center; margin-top: 3%; margin-bottom: 7%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn > div{display: inline-block;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom{width: 970px; margin: 0 auto; padding-bottom: 3%;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li{margin-bottom: 12px; background-color: #fff; border: 1px solid #D3D3D3; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li:last-child{margin-bottom: 0;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div:after{content:''; display: block; clear: both;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dt{float: left; width: 313px; margin: 0 auto; padding: 2% 0; text-align: center; background:url(../images/customer/rew_se3_dotH.jpg) right center repeat-y;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dt .dtImg{margin-bottom: 1%;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dt .dtText{font-size: 17px; color: #222; text-align: center; font-weight:bold;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dd{float: right; width: 67%; margin: 0 auto; text-align: center; padding-top: 55px; line-height: 25px; font-size: 16px; color: #333;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dd.bt_pC1{padding-top:7%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn > div .wg_txt{font-size:15px; padding:5px 0 0 0;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn > div .wg_txt b{font-size:19px; margin-right:3px} /*20190214*/ .rewardsWrap .section_3.pt40 h3{padding-top: 60px;} .rewardsWrap .section_3.pt40 .rew_se3Cont{padding-top: 40px;} .rewardsWrap .section_3.pt60 .rew_se3Cont{padding-top: 60px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1.tw ul{max-width: 190px; margin:0 auto;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1.tw2 ul{max-width: 215px; margin:0 auto;} @media screen and (max-width: 640px){ .rewardsWrap .section_3.pt40 h3{padding:5%;} .rewardsWrap .section_3.pt40 .rew_se3Cont, .rewardsWrap .section_3.pt60 .rew_se3Cont{padding-top: 0;} } /* 20191201 */ .rewardsWrap .section_1 .rew_se1Text h3{padding-left:0; background:none} .rewardsWrap .section_1 .rew_se1Text h3 span{display:none} .rewardsWrap .section_1 .rew_se1Text > p{font-size:20px} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd{font-size:15px} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy2.twoLine{padding-top:3%} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd:last-child{min-height:80px} .rewardsWrap .section_3 .rew_btText dl{position:relative; padding:20px 0 0 0; max-width:980px; margin:0 auto} .rewardsWrap .section_3 .rew_btText dl dt{color:#222; font-size:18px; font-weight:bold; padding:20px 0 10px 0;} .rewardsWrap .section_3 .rew_btText dl dd{color:#666; font-size:15px; line-height:22px} @media screen and (max-width: 640px) { .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy2.twoLine{padding-top:5%} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.pb{padding-bottom:7%} .rewardsWrap .section_3 .rew_btText dl{padding:10px 0 0 0; max-width:none;} .rewardsWrap .section_3 .rew_btText dl dt{font-size:16px} .rewardsWrap .section_3 .rew_btText dl dd{font-size:14px; line-height:19px} } .rewardsWrap .new_section{position:relative; background:#fff} .rewardsWrap .new_section .get_banner{position:relative; padding:50px 0; text-align:center; background:url(../images/customer/new_section_bg.jpg) center center no-repeat; background-size:cover} .rewardsWrap .new_section .get_banner h3{font-size:38px; font-weight:bold; color:#fff; display:inline-block; position:relative;} .rewardsWrap .new_section .get_banner h3:before{content:''; width:35px; height:25px; display:inline-block; background:url(../images/about/BG_brand_recycling.png) no-repeat; position:absolute; left:-55px; top:0} .rewardsWrap .new_section .get_banner h3:after{content:''; width:35px; height:25px; display:inline-block; background:url(../images/customer/BG_brand_recycling_right.png) no-repeat; position:absolute; right:-55px; top:0} .rewardsWrap .new_section .get_banner > div{max-width:1000px; margin:0 auto; padding:0 20px} .rewardsWrap .new_section .get_banner .date{position:relative; padding:25px 0; font-size:21px; color:#fff} .rewardsWrap .new_section .get_banner .get_tail{position:relative; color:#fff; font-size:15px;} .rewardsWrap .new_section .get_banner .get_tail li{margin-bottom:5px;} .rewardsWrap .new_section .get_banner .get_tail li:nth-last-child(1){margin-bottom:0} .rewardsWrap .new_section .get_qr{position:relative; text-align:center; padding:30px 0 0 0} .rewardsWrap .new_section .get_wrap{position:relative; padding:60px 0; text-align:center} .rewardsWrap .new_section .get_tail{position:relative;} .rewardsWrap .new_section .get_tail dl{position:relative; padding:35px 0 0 0} .rewardsWrap .new_section .get_tail dl dt{font-size:15px; color:#333333; font-weight:bold; margin-bottom:5px} .rewardsWrap .new_section .get_tail dl dd{font-size:15px; color:#666; margin-bottom:5px} .rewardsWrap .new_section .get_box{position:relative;} .rewardsWrap .new_section .get_box:after{clear:both; content:''; display:block} .rewardsWrap .new_section .titBox{position:relative;} .rewardsWrap .new_section .titBox .mark{position:relative} .rewardsWrap .new_section .titBox .mark span{display:inline-block; padding:3px 10px; background:#83a48a; color:#fff; font-size:17px; border-radius:30px} .rewardsWrap .new_section .titBox .mtail{position:relative; padding:5px 0 0 0; font-size:14px; color:#666666;} .rewardsWrap .new_section .titBox .txt{position:relative; padding:10px 0 0 0; font-size:18px; color:#222; font-weight:bold;} .rewardsWrap .new_section .titBox .tail{position:relative; padding:5px 0 0 0; font-size:16px; color:#666666; } .rewardsWrap .new_section .kit_img{position:relative; padding:50px 0 0 0} .rewardsWrap .new_section .right_top{position:relative; padding:30px 0; background:#f5f5f5; box-sizing:border-box; min-height:140px} .rewardsWrap .new_section .get_box .leftBox{position:relative; padding:30px 0; text-align:center; height:550px; box-sizing:border-box; border:1px solid #d3d3d3; border-radius:4px; width:355px; vertical-align:middle; display:inline-block;} .rewardsWrap .new_section .get_box .rightBox{position:relative; text-align:center; height:550px; box-sizing:border-box; border:1px solid #d3d3d3; border-radius:4px; width:570px; vertical-align:middle; display:inline-block; overflow:hidden} .rewardsWrap .new_section .get_box .rightBox.dis{height:480px} .rewardsWrap .new_section .get_box .bullet{position:relative; display:inline-block; vertical-align:middle; padding:0 25px} .rewardsWrap .new_section .get_box .voucherCon{position:relative; font-size:0;} .rewardsWrap .new_section .get_box .voucherCon > div{display:inline-block; vertical-align:top; height:100%; position:relative; width:50%; box-sizing:border-box; padding:30px 0;} .rewardsWrap .new_section .get_box .voucherCon > div.midver{padding:90px 0} .rewardsWrap .new_section .get_box .voucherCon > div:nth-child(2):after{display:block; content:''; width:1px; height:1000px; background:#d3d3d3; position:absolute; left:0; top:0} .rewardsWrap .new_section .get_box .voucherCon .itit{font-size:18px; font-weight:bold; color:#222} .rewardsWrap .new_section .get_box .voucherCon .iicon{position:relative; padding:20px 0 0 0} .rewardsWrap .new_section .get_box .voucherCon .idl{position:relative; padding:20px 0 0 0} .rewardsWrap .new_section .get_box .voucherCon .idl .rangeBtn > div{display:inline-block; margin:0 2px} .rewardsWrap .new_section .get_box .voucherCon .rangeTail{position:relative; padding:10px 0 0 0; color:#333; font-size:15px;} .rewardsWrap .new_section .get_box .voucherCon .rangeTail span{font-size:20px; font-weight:bold} .rewardsWrap .new_section .get_box .voucherCon div.btnSt_sm span.long{width:auto; padding:0 5px} .rewardsWrap .new_section .get_box .voucherCon.dis > div:nth-child(2):after{width:21px; height:39px; background:url(../images/customer/get_bullet.png) no-repeat; top:50%; margin-top:-20px} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl .rangeTail{position:relative; padding:0 0 15px 0; color:#333;font-size:12px; line-height:18px} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl .rangeTail span{font-size:20px; font-weight:bold} @media screen and (max-width: 1020px) { .rewardsWrap .new_section .get_banner h3:before{display:none} .rewardsWrap .new_section .get_banner h3:after{display:none} .rewardsWrap .new_section .get_box{font-size:0; margin:0 20px} .rewardsWrap .new_section .get_box .leftBox{width:35%; margin-right:5%} .rewardsWrap .new_section .get_box .rightBox{width:60%} .rewardsWrap .new_section .get_box .bullet{display:none} } @media screen and (max-width: 768px) { .rewardsWrap .new_section .get_banner h3{font-size:22px} .rewardsWrap .new_section .get_banner .date{font-size:15px; padding:15px 0;} .rewardsWrap .new_section .get_banner .get_tail{font-size:13px} .rewardsWrap .new_section .get_box .voucherCon > div.midver{padding:30px 0} .rewardsWrap .new_section .get_box .leftBox{width:auto; display:block; margin-right:0; height:auto} .rewardsWrap .new_section .get_box .rightBox{width:auto; display:block; margin-top:30px; height:auto} .rewardsWrap .new_section .get_box .voucherCon > div{display:block; height:auto; width:auto;} .rewardsWrap .new_section .get_box .voucherCon > div:nth-child(2):after{width:100%; height:1px;} .rewardsWrap .new_section .get_tail dl dt{font-size:14px} .rewardsWrap .new_section .get_tail dl dd{font-size:13px} .rewardsWrap .new_section .get_box .rightBox.dis{height:auto} .rewardsWrap .new_section .get_box .voucherCon.dis > div:nth-child(2):after{display:none} } div.btnSt_sm span{display: inline-block; width: 75px; line-height: 20px; color: #fff; font-size: 12px; text-align: center; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} /* div.btnSt_sm span.yg_ST{background-color: #C2E15C;} div.btnSt_sm span.wd85{width:85px;} div.btnSt_sm span.wg_ST{background-color: #81C887;} div.btnSt_sm span.sg_ST{background-color: #08712F;} */ /* NEW로고 20181101 */ div.btnSt_sm span.yg_ST{background-color: #83a48a;} div.btnSt_sm span.wd85{width:85px;} div.btnSt_sm span.wg_ST{background-color: #41695e;} div.btnSt_sm span.sg_ST{background-color: #024137;} .rewardsWrap .section_3 .rew_btText{padding-bottom: 4%;text-align: center;} .rewardsWrap .section_3 .rew_btText p{margin-bottom: 5px; text-align: center; font-size: 15px; color: #666;} .rewardsWrap .section_4{background:url(../images/customer/movie_leaf.jpg) center repeat-x;} .rewardsWrap .section_4 .inner{width:1200px; margin:0 auto;} .rewardsWrap .section_4 .inner .movieYoutube{padding:143px 0;text-align:center;} .resp_movie { position: relative; padding-bottom: 40%; height: 0; overflow: hidden; max-width: 71%; margin: 0 auto;} .resp_movie iframe, .resp_movie object, .resp_movie embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rewardsWrap .section_5{background-color:#f8f8f8; width:100%; padding-bottom:80px;} .rewardsWrap .section_5 .faqWrap{width:1200px; margin:0 auto;} .rewardsWrap .section_5 .faqWrap .faqCategory{margin-top:0;} .rewardsWrap .section_5 .faqWrap .faqCategory .title{padding:59px 0; text-align:center; font-weight:normal; font-size:25px; } .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.id_font{font-size:14px; line-height:1.6; padding:5% 0;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1.in_listTyTC{padding-top:21px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .id_add_text{font-size:15px; padding:6% 0;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.id_lastC{font-size:15px; color:#666; line-height:1.4; padding-bottom:1%; padding-top:8%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.id_lastC2{padding-top:10%; padding-bottom:0; min-height:62px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.id_lastC strong{font-size:18px; color:#222;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.id_lastC3{padding:8% 0 1%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1.minh_C{min-height:141px;} .rewardsWrap.jp .section_1 .rew_se1Text h3{font-size:45px;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div{float:none; width:100%;text-align: center; margin-bottom:3%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1{padding:12% 0 8%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div{min-height:550px;} .rewardsWrap.jp .section_3 h3{padding-top:3%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div{min-height:450px;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd:last-child{font-size: 14px;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dt.dtcont01{padding:18% 0;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dt.dtcont02{padding: 8.9% 0 9%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dt.dtcont03{padding:18% 0;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1{padding:20% 0 0;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div:first-child{margin-right: 4%; margin-left: 6%; width: 25%; text-align:left;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div{width:63%; text-align:left; float:left;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC3_last{padding-top: 11.2%;padding-bottom:0;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dt .dtText{letter-spacing: -1px; width: 93%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dt .dtText span{font-size:16px;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn{margin-bottom: 9.7%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div:first-child dd:last-child{padding-top: 11.2%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.minHC{min-height: 46px;} .rewardsWrap.au .section_3 {} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 {padding-top:4%; padding-bottom:6%; margin-bottom:0;} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div {float:inherit; display:block; width:100%; margin-top:2%; text-align:center;} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div:first-child {margin-right:0;} /* .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC3_last {} */ .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd {margin-bottom:4%;} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy2 {padding-top:8.6%; margin-bottom:9%;} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy2:last-child {min-height:auto;} .rewardsWrap.id .section_3 .rew_se3Cont .rew_top {display:flex;} .rewardsWrap.id .section_3 .rew_se3Cont .rew_top > div > dl > dd.id_font {padding:5% 2%;} .rewardsWrap.id_loc .section_3 .rew_se3Cont .rew_top > div > dl > dd {font-size:15px;} .rewardsWrap.id_loc .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 {padding-top:7.5%;padding-bottom:7.5%;} .rewardsWrap.id_loc .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1.in_listTyTC {padding-bottom:0;} .rewardsWrap.id_loc .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dt .dtText {padding:0 2%;} .add_id190806 .container {width:100%; margin:0 auto; max-width:968px; position:relative; text-align:center;} .add_id190806 .container .padding{padding:50px 0 60px;} .add_id190806 .container .padding .title{color:#555555; font-size:23px; letter-spacing: -0.5px;} .add_id190806 .container .padding .qrcode{margin:50px auto 0;} .add_id190806 .container .padding .qrcode li{display:inline-block; border-right:1px solid #e5e5e5; box-sizing:border-box; padding: 0 8%;} .add_id190806 .container .padding .qrcode li:last-child{border-right:none;} .m190806{display:inline-block;} .rewardsWrap.id .section_4{background:url(../images/customer/id_youtube_bg.jpg) no-repeat center top / cover;} @media (min-width:641px) and (max-width:900px){ .rewardsWrap.id_loc .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .m190806_1 li div {float: none;} .rewardsWrap.id .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .m190806_2 li div {float: none;} .rewardsWrap.id_loc .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .m190806_1 li {text-align: center;} .rewardsWrap.id .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .m190806_2 li {margin-bottom: 6%; text-align: center;} } @media screen and (max-width: 1200px){ .rewardsWrap .section_4 .inner{width:100%;} .rewardsWrap .section_5 .faqWrap{width:95%;} .rewardsWrap .section_3 .rew_se3Cont{width: 100%;} } @media screen and (max-width: 1000px){ .rewardsWrap .section_2 .round3cont{width: 90%;} .rewardsWrap .section_2 .round3cont ul li div > span{font-size: 15px; } .rewardsWrap .section_2 .round3cont ul li{-webkit-background-size: 10%; background-size: 10%;} .rewardsWrap .section_2 .round3cont.arrowR ul li{-webkit-background-size: 10%; background-size: 10%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top{width: 100%;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom{width: 97%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div{width: 31%; margin-left: 1.6%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div:first-child{margin-left: 1.6%;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dt{width: 32%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn > div{display: block; margin-bottom: 3%;} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn > div{display: inline-block;} .rewardsWrap .section_3 .rew_btText{width:90%; margin: 0 auto;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div{min-height: 510px;} .rewardsWrap .section_4{background-size:cover;} .rewardsWrap .section_4 .inner .movieYoutube{padding:8%;} } @media screen and (max-width: 640px){ .rewardsWrap .section_1{height: 175px;} .rewardsWrap .section_1 .rew_se1Text{top:35%;} .rewardsWrap .section_1 .rew_se1Text h3{padding-left: 0; background: none; font-size: 25px;} .rewardsWrap .section_1 .rew_se1Text h3 span{padding-right: 0; background: none; } .rewardsWrap .section_1 .rew_se1Text > p{font-size: 15px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top {display:block;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dt.dtcont01{padding:1% 0 7%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dt.dtcont02{padding:4% 0 7%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dt.dtcont03{padding:7% 0 7%;} .rewardsWrap .section_2 .round3cont{margin:7% auto;} .rewardsWrap .section_2 .round3cont ul li div > span{ font-size: 12px;} .rewardsWrap .section_3 .rew_se3Cont{padding-top:0;} .rewardsWrap .section_3 h3{padding:5% 0; font-size: 16px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div{width: 96%; margin-bottom: 3%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dt{padding: 2% 0;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd:last-child{min-height:0;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC1_last{min-height:35px; padding-top:8%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div:first-child > dl > dd.in_listTy1 + dd{padding-bottom: 7%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC2_last{padding-top:7%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd{padding-top:7%; padding-bottom:4%; } .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC3_last{padding-top:10%; padding-bottom:10%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div {min-height: auto;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1{min-height: 124px; padding-bottom: 4%; padding-top:9%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1.minh_C{min-height:110px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn{margin-bottom: 1%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn > div{display: inline-block;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.minHC .rangeBtn{margin-bottom: 0.8%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd{font-size:14px;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dt .dtImg{width: 130px; margin: 0 auto;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dt{float:none; width: 100%; padding:6% 0 8%; background: url(../images/customer/rew_se3_dot.jpg) center bottom repeat-x;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dt .dtText{font-weight: bold; font-size: 16px; color: #222; text-align: center;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dd{float:none; width:100%; padding:8% 0; font-size: 14px; min-height:52px; } .rewardsWrap .section_3 .rew_se3Cont .rew_bottom{padding-bottom:8%;} .rewardsWrap .section_3 .rew_btText{padding-bottom:8%;} .resp_movie{max-width:100%; padding-bottom:56%;} .rewardsWrap .section_5 .faqWrap .faqCategory .title{padding:5% 0; font-size:18px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTyLong{padding-top:5%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTyLong2{padding-top:5%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTyLong3{padding-bottom:9%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.pd5p{padding-top:5%;} .rewardsWrap .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dd.bt_pC1{min-height:22px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.id_lastC{padding-top:7%; padding-bottom:7%; font-size:12px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.id_lastC strong{font-size:14px;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.id_font{padding:6% 0 5%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1.in_listTyTC{padding-top:9%;} .rewardsWrap .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .id_add_text{font-size:14px;} .rewardsWrap .section_3 .rew_btText p{font-size:14px; margin-bottom:15px;} .rewardsWrap.jp .section_3 h3{padding:5% 0;} .rewardsWrap.jp .section_1 .rew_se1Text h3{font-size: 30px;} .rewardsWrap.jp .section_2 .round3cont.jp ul li{width: 44%; background-position: 5% center;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC3_last{padding-top:10%; padding-bottom:10%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div{min-height: auto;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1{min-height: 100px;padding-bottom: 4%;padding-top:9%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1.minh_C{min-height:110px;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn{margin-bottom: 1%;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dt.dtcont01{padding:7% 0;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dt.dtcont02{padding:7% 0;} .rewardsWrap.jp .section_3 .rew_se3Cont .rew_top > div > dl > dt.dtcont03{padding:7% 0;} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 {padding-top:5%;} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div:first-child > dl > dd.in_listTy1 + dd {padding-bottom:4%;} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy2 {padding-top:auto; margin-bottom:auto;} .rewardsWrap.au .section_3 .rew_se3Cont .rew_top > div > dl > dd.pC3_last {padding-top:6%; padding-bottom:2%;} .rewardsWrap.id .section_3 .rew_se3Cont .rew_top {display:block;} .add_id190806 .container .padding .title{font-size:18px;} .add_id190806 .container .padding .qrcode{margin:50px auto 0;} .add_id190806 .container .padding .qrcode li{display:block; margin:0 auto; border-bottom:1px solid #e5e5e5; border-right:none; width:270px; padding: 0 8% 50px;} .add_id190806 .container .padding .qrcode li:last-child{border-bottom:none; padding: 50px 8% 0;} } /* 이니스프리 리워드 _ 2019 Ver (HK) */ .pcVer {display:block} .moVer {display:none} .rewardsWrap.rewardsWrap2019 .section_1 {display:table;width:100%;} .rewardsWrap.rewardsWrap2019 .section_1 .rew_se1Text {display:table-cell;vertical-align:middle;top:inherit;} .rewardsWrap.rewardsWrap2019 .section_1 .rew_se1Text h3 {padding-left:0;background:none;} .rewardsWrap.rewardsWrap2019 .section_1 .rew_se1Text > p {margin-bottom:0;} .rewardsWrap2019 .th_ico {width:121px;height:121px;margin:30px auto 30px;color:#fff;background-repeat:no-repeat;background-position:center top;background-size:100% 100%;} .rewardsWrap2019 .th_ico.ico1 {background-image:url('../images/customer/rew_se2_Icon01.png');} .rewardsWrap2019 .th_ico.ico2 {background-image:url('../images/customer/rew_se2_Icon02.png');} .rewardsWrap2019 .th_ico.ico3 {background-image:url('../images/customer/rew_se2_Icon03.png');} .rewardsWrap2019 .th_ico > span {display:block;padding-top:62%;} .rewardsWrap2019 .td_ico {display:block;width:100%;margin-bottom:10px;background-repeat:no-repeat;background-position:center top;background-size:auto 100%;} .rewardsWrap2019 .td_ico.ico1 {height:59px;background-image:url('../images/customer/memGuide_ico01_m.png');} .rewardsWrap2019 .td_ico.ico2 {height:60px;background-image:url('../images/customer/memGuide_ico02_m.png');} .rewardsWrap2019 .td_ico.ico3 {height:76px;background-image:url('../images/customer/memGuide_ico03_m.png');} .rewardsWrap2019 .td_ico.ico4 {height:77px;background-image:url('../images/customer/memGuide_ico04_m.png');} .rewardsWrap2019 .td_ico.ico5 {height:74px;background-image:url('../images/customer/memGuide_ico05_m.png');} .rewardsWrap2019 .td_ico.ico6 {height:82px;background-image:url('../images/customer/memGuide_ico06_m.png');} .rewardsWrap2019 .grade {display:inline-block;width:75px;line-height:20px;color:#fff;font-size:12px;text-align:center;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} .rewardsWrap2019 .grade.wel {background-color:#80a087} .rewardsWrap2019 .grade.pre {background-color:#40675c} .rewardsWrap2019 .grade.vip {background-color:#024036} .rewardsWrap2019 .cp_smBox {position:relative;width:44px;margin:0 auto;} .rewardsWrap2019 .cp_sm {display:block;position:relative;width:44px;height:27px;margin:0 auto 7px;line-height:27px;font-size:12px;font-weight:bold;color:#444;font-style:normal;background:url('../images/customer/sm_coupon.png') no-repeat 0 0 / 100% 100%;z-index:2;} .rewardsWrap2019 .cp_sm.backT {position:absolute;top:-7px;right:-8px;z-index:1;} .rewardsWrap2019 .cp_sm.backB {position:absolute;top:-4px;left:-8px;z-index:2;} .rewardsWrap2019 .section_4 {display:none;background:url(../images/customer/movie_leaf_gray.jpg) center center / cover;} /* pc */ .rewardsWrap2019 .memGuide {margin-top:50px;} .rewardsWrap2019 .memGuide .inner {max-width:968px;margin:0 auto;padding:0 2.5%;} .rewardsWrap2019 .memGuide table {border-bottom:1px solid #e5e5e5;border-collapse:collapse;text-align:center;} .rewardsWrap2019 .memGuide table tr {border-top:1px solid #e5e5e5;} .rewardsWrap2019 .memGuide table th {font-size:14px;font-weight:bold;} .rewardsWrap2019 .memGuide table th, .rewardsWrap2019 .memGuide table td {border-left:1px solid #e5e5e5;} .rewardsWrap2019 .memGuide table th:first-child, .rewardsWrap2019 .memGuide table td:first-child {border-left:0;} .rewardsWrap2019 .memGuide table tr.row2 td {border-left:1px solid #e5e5e5} .rewardsWrap2019 .memGuide table thead th {background-color:#fdfdfd;} .rewardsWrap2019 .memGuide table tbody th {padding:35px 0;color:#333;background-color:#f8f8f8;} .rewardsWrap2019 .memGuide table tbody th.big {padding:60px 0;} .rewardsWrap2019 .memGuide table tbody th.big2 {padding:45px 0;} .rewardsWrap2019 .memGuide table tbody td {font-size:16px;line-height:24px;color:#333;} .rewardsWrap2019 .memGuide table tbody td.tdFull {font-size:17px;} .rewardsWrap2019 .memGuide table tbody td strong.big {font-size:20px;} .rewardsWrap2019 .memGuide table tbody td strong.big2 {display:inline-block;vertical-align:bottom;font-size:24px;} .rewardsWrap2019 .memGuide table tbody tr.row2 {border-top:0;background:url('../images/customer/rew_se3_dot.jpg') repeat-x center top;} .rewardsWrap2019 .memGuide table tbody tr.row2 td, .rewardsWrap2019 .memGuide table tbody tr.row2 th {font-size:15px;color:#666} /* moblie */ .rewardsWrap2019 .memGuideM {text-align:center;} .rewardsWrap2019 .memGuideM .th_content {} .rewardsWrap2019 .memGuideM .th_content ul li {display:inline-block;width:25%;padding-left:9%;background:url('../images/customer/arrow_new.gif') no-repeat 9% center;background-size:10px 16px;} .rewardsWrap2019 .memGuideM.hkLocal .th_content ul li {font-size:14px;} .rewardsWrap2019 .memGuideM .th_content ul li:first-child {padding-left:0;background:none;} .rewardsWrap2019 .memGuideM .td_content {padding:6% 4% 0 4%;background-color:#f8f8f8;} .rewardsWrap2019 .memGuideM .td_content ul li {margin-top:15px;border:1px solid #d3d3d3;background-color:#fff;} .rewardsWrap2019 .memGuideM .td_content ul li:first-child {margin-top:0;} .rewardsWrap2019 .memGuideM .td_content ul li .topBox {padding:6% 2.5%;font-size:16px;font-weight:bold;color:#222} .rewardsWrap2019 .memGuideM .td_content ul li .middleBox {padding:5% 2.5%;border-top:1px dashed #d3d3d3;} .rewardsWrap2019 .memGuideM .td_content ul li .middleBox dl dt {display:block;margin-bottom:7px;} .rewardsWrap2019 .memGuideM .td_content ul li .middleBox dl dd {display:block;margin-bottom:13px;font-size:15px;color:#333;} .rewardsWrap2019 .memGuideM .td_content ul li .middleBox dl dd:last-child {margin-bottom:0;} .rewardsWrap2019 .memGuideM .td_content ul li .middleBox dl dd .txt2 {margin-top:2%;font-size:13px;color:#888} .rewardsWrap2019 .memGuideM .td_content ul li .middleBox dl dd strong.big {font-size:17px;} .rewardsWrap2019 .memGuideM .td_content ul li .bottomBox {padding:4% 2.5%;border-top:1px dashed #d3d3d3;line-height:1.4;font-size:14px;color:#666;} /* terms */ .rewardsWrap2019 .memGuide_terms {padding:30px 0 75px;text-align:left;} .rewardsWrap2019 .memGuide_terms .inner {max-width:948px;margin:0 auto;padding:0 2.5%;} .rewardsWrap2019 .memGuide_terms p {padding-left:25px;margin-bottom:10px;font-size:16px;font-weight:bold;color:#333;background:url('../images/customer/ico_i.png') no-repeat left center;background-size:15px 15px;} .rewardsWrap2019 .memGuide_terms ul li {display:block;margin-top:3px;padding-left:10px;font-size:15px;color:#666;line-height:1.5;} .rewardsWrap2019 .memGuide_terms ul li:first-child {margin-top:0;} .rewardsWrap2019 .memGuide_terms ul li > span {display:inline-block;width:10px;height:10px;margin:5px 0 0 -10px;vertical-align:top;} .rewardsWrap2019 .memGuide_terms ul li > span.top0 {margin-top:0;} @media screen and (max-width: 640px){ .pcVer {display:none} .moVer {display:block} /* .rewardsWrap.rewardsWrap2019 .section_1 {height:150px;} */ .rewardsWrap.rewardsWrap2019 .section_1 h3 {line-height:1.3;font-size:21px;} .rewardsWrap.rewardsWrap2019 .section_1 .rew_se1Text > p {margin-top:10px;font-size:14px;} .rewardsWrap2019 .th_ico {width:25vw;height:25vw;min-width:80px;min-height:80px;} .rewardsWrap2019 .memGuide_terms {padding:5% 4%;background-color:#f8f8f8} .rewardsWrap2019 .memGuide_terms p {font-size:13px;} .rewardsWrap2019 .memGuide_terms ul li {font-size:14px;} .rewardsWrap2019 .cp_smBox {width:36px;margin:10px auto 0;} .rewardsWrap2019 .cp_sm {width:36px;height:22px;margin:0 auto 5px;line-height:22px;font-size:11px;} .rewardsWrap2019 .cp_sm.backT {top:-3px;right:-3px;} .rewardsWrap2019 .cp_sm.backB {top:-3px;left:-4px;} } /* 이니스프리 리워드 CANADA */ .rewardsWrap.ca .section_3 {padding-top:0;background-color:#fff;line-height:22px;} .rewardsWrap.ca .section_3 .rew_se3Cont .vMiddle {display:table;width:100%;padding:0;} .rewardsWrap.ca .section_3 .rew_se3Cont .vMiddle > .inBox {display:table-cell;width:100%;vertical-align:middle;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn {margin-bottom:0;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div:nth-child(1) {} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div:nth-child(2) {} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div:nth-child(3) > dl > dd {height:95px;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div:nth-child(3) > dl > dd.last {height:103px;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 {height:200px;padding-top:0;padding-bottom:0;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .inBox ul {display:inline-block;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .inBox li {margin-bottom:0;margin-top:23px;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .inBox li:first-child {margin-top:0;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .inBox li p {} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .inBox li p em {color:#666;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .inBox div:first-child {margin-right:0;padding-right:10px;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 + dd {height:95px;color:#666} .rewardsWrap.ca .section_3 .rew_btText p {margin-bottom:0;} @media screen and (max-width: 1000px){ .rewardsWrap.ca .section_3 {line-height:1.4;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1, .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 + dd {width:94%;min-height:auto !important;height:auto !important;padding:7% 3%;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div:nth-child(3) > dl > dd.last {height:auto} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div:nth-child(3) > dl > dd {height:auto;padding:7% 0;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li {text-align:center;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div {float:none;display:block;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 li div:first-child {margin-bottom:3%;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .inBox div:first-child {padding-right:0;} } @media screen and (max-width: 640px){ .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd.in_listTy1 .inBox li {margin-top:13px;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_top > div > dl > dd .rangeBtn > div {margin-bottom:0;} .rewardsWrap.ca .section_3 .rew_se3Cont .rew_bottom > ul > li > div > dl > dd {min-height:auto;padding:7% 0;} .rewardsWrap.ca .section_3 .rew_btText p br {display:none} } /* ========== [UTIL] ========== */ /* 로그인 */ .memberWrap {min-height:820px; margin-bottom:-40px; padding-bottom:230px; background:url(../images/member/BG_member.jpg) no-repeat center center / cover;} .memberWrap .memberTitle {padding:75px 0 65px;} .memberWrap .memberTitle h2 {text-align:center; font-size:32px; color:#222222;} .memberWrap .loginBox {max-width:430px; margin:0 auto; border-radius:5px; background:#ffffff;} .memberWrap .loginBox .loginBox_inner {padding:57px 40px;} .memberWrap .loginBox .greet {text-align:center; font-size:18px; font-weight:bold; color:#024137;} .memberWrap .loginBox .loginTab {margin-top:20px; padding-bottom:10px;} .memberWrap .loginBox .loginTab ul {overflow:hidden;} .memberWrap .loginBox .loginTab ul li {float:left; width:50%;} .memberWrap .loginBox .loginTab ul li:first-child:nth-last-child(1), .memberWrap .loginBox .loginTab ul li:first-child:nth-last-child(1) ~ li{width:100%;} .memberWrap .loginBox .loginTab ul li a {display:block; text-align:center; line-height:44px; font-size:16px; font-weight:bold; color:#666666; border-bottom:2px solid #dddddd;} .memberWrap .loginBox .loginTab ul li.on {} .memberWrap .loginBox .loginTab ul li.on a {color:#2f2f2f; border-bottom:2px solid #454b51;} .memberWrap .loginBox .loginTabCont {display:none;} .memberWrap .loginBox #signin {display:block;} .memberWrap .loginBox .newMemChk {} .memberWrap .loginBox .newMemChk:after {content:''; display:block; clear:both;} .memberWrap .loginBox .newMemChk li {float:left; width:50%; padding:5px 0; text-align:center; line-height:1.4; font-size:13px; color:#666666;} .memberWrap .loginBox .newMemChk li .input-radio {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; border-radius:50%; background:#ffffff;} .memberWrap .loginBox .newMemChk li .input-radio:checked {box-shadow:0 0 0 4px #ffffff inset; background:#454b51;} .memberWrap .loginBox .section {position:relative; margin-top:25px;} .memberWrap .loginBox .section .dt {font-size:14px; font-weight:bold; color:#222222;} .memberWrap .loginBox .section .dd {position:relative; margin-top:10px; font-size:13px;} .memberWrap .loginBox .section .dd .input-text {width:100%; height:50px; line-height:50px; font-size:18px; color:#999999; border:none; border-bottom:1px solid #aaaaaa;} .memberWrap .loginBox .section .dd label.error {display:block; margin-top:10px;} .memberWrap .loginBox .section .dd .pwGuide {margin-top:15px; font-size:13px; color:#666666;} .memberWrap .loginBox .section .forgot {position:absolute; right:0; top:0;} .memberWrap .loginBox .section .forgot a {display:inline-block; font-size:13px; color:#024137; border-bottom:1px solid #779a81;} .memberWrap .loginBox .section .msg {margin-top:15px; font-size:13px; color:#222222;} .memberWrap .loginBox .staySigned {margin-top:18px; font-size:14px; color:#222222;} .memberWrap .loginBox .staySigned .input-check {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; background:#ffffff;} .memberWrap .loginBox .staySigned .input-check:checked {box-shadow:0 0 0 3px #ffffff inset; background:#454b51;} .memberWrap .loginBox .btnTypeB {margin-top:20px;} .memberWrap .loginBox .btnTypeB a {display:block; text-align:center; line-height:50px; font-size:16px; color:#ffffff; background:#222222;} .memberWrap .loginBox snsLoginMsg {} .memberWrap .loginBox snsLoginMsg2 {} .memberWrap .loginBox .btnSNS {overflow:hidden; margin-top:20px;} .memberWrap .loginBox .btnSNS a {display:block; text-align:center; line-height:50px; font-size:16px; color:#ffffff; background:#0054a6;} .memberWrap .loginBox .btnSNS a span {display:inline-block; padding-left:31px; line-height:50px; background:url(../images/member/BG_loginFacebook.png) no-repeat left center;} .memberWrap .loginBox .btnSNS .loginF {float:left; width:50%;} .memberWrap .loginBox .btnSNS .loginF a {display:block; margin-right:5px; text-align:center; line-height:50px; font-size:16px; color:#ffffff; border-radius:3px; background:#0054a6;} .memberWrap .loginBox .btnSNS .loginF a span {display:inline-block; padding-left:18px; line-height:50px; background:url(../images/member/BG_loginFacebook.gif) no-repeat left 15px;} .memberWrap .loginBox .btnSNS .loginG {float:left; width:50%;} .memberWrap .loginBox .btnSNS .loginG a {display:block; margin-left:5px; text-align:center; line-height:50px; font-size:16px; color:#ffffff; border-radius:3px; background:#db4437;} .memberWrap .loginBox .btnSNS .loginG a span {display:inline-block;padding-left: 18px;line-height:50px;background:url(../images/member/BG_loginGoogle.gif) no-repeat left 18px;} .memberWrap .loginBox .loginError {margin-top:8px; font-size:13px; color:#c50000;} @media screen and (max-width: 768px){ .memberWrap {min-height:700px; padding-bottom:12%;} .memberWrap .memberTitle {padding:40px 0 0;} .memberWrap .memberTitle h2 {display:none;} .memberWrap .loginBox {margin-top:9%;} .memberWrap .loginBox .loginBox_inner {padding:50px 20px;} .memberWrap .loginBox .loginTab {margin:20px -20px 0;} .memberWrap .loginBox .section .dd .input-text {height:40px; line-height:40px;} } @media screen and (max-width: 470px){ .memberWrap .loginBox {width:auto; margin:9% 20px 0;} .memberWrap .loginBox .loginBox_inner {padding:30px 20px;} } /* 회원가입 */ .registerBox {max-width:900px; margin:0 auto; background:#ffffff;} .registerBox .registerBox_inner {padding:70px 50px;} .registerBox .registerBox_inner .msg {overflow:hidden; padding-bottom:17px; border-bottom:1px solid #aaaaaa;} .registerBox .registerBox_inner .msg .please {float:left; font-size:13px; color:#666666;} .registerBox .registerBox_inner .msg .required {float:right; padding-left:10px; font-size:13px; color:#666666; background:url(../images/common/bul_required.gif) no-repeat left 5px;} .registerBox .registerBox_inner .dl {overflow:hidden; margin-top:35px;} .registerBox .registerBox_inner .dl dt {float:left; width:200px; padding:7px 5px 0 10px; font-size:14px; font-weight:bold; color:#222222;} .registerBox .registerBox_inner .dl.dlBtn {padding-top:12px;} .registerBox .registerBox_inner .dl dt .required {display:inline-block; padding-left:10px; background:url(../images/common/bul_required.gif) no-repeat left 6px;} .registerBox .registerBox_inner .dl dd {overflow:hidden; line-height:1.4; font-size:13px; color:#666666;} .registerBox .registerBox_inner .dl dd .btnEdit {display:inline-block; min-width:50px; margin-left:7px; padding:0 5px; text-align:center; line-height:18px; font-size:11px; color:#222222; border:1px solid #aaaaaa;} .registerBox .registerBox_inner .dl dd .btnSNS {} .registerBox .registerBox_inner .dl dd .btnSNS a {display:inline-block; width:240px; max-width:100%; text-align:center; font-size:16px; color:#ffffff; background:#0054a6;} .registerBox .registerBox_inner .dl dd .btnSNS a span {display:inline-block; padding-left:27px; line-height:40px; background:url(../images/member/BG_loginFacebook_22x22.png) no-repeat left center;} .registerBox .registerBox_inner .dl dd label.error {display:block; margin-top:8px;} .registerBox .registerBox_inner .dl dd label.mbMax {display:block;} .registerBox .registerBox_inner .dl dd .input-text {width:230px; max-width:100%; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .registerBox .registerBox_inner .dl dd .input-text.input-text_jp {width:220px;} .registerBox .registerBox_inner .dl dd .input-pw {width:350px; max-width:100%; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .registerBox .registerBox_inner .dl dd .pwGuide {margin-top:8px; font-size:13px; color:#666666;} .registerBox .registerBox_inner .dl dd .select {width:120px; margin-right:5px; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .registerBox .registerBox_inner .dl dd .input-radio {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; border-radius:50%; background:#ffffff;} .registerBox .registerBox_inner .dl dd .input-check {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; background:#ffffff;} .registerBox .registerBox_inner .dl dd .input-radio:checked {box-shadow:0 0 0 4px #ffffff inset; background:#454b51;} .registerBox .registerBox_inner .dl dd .input-check:checked {box-shadow:0 0 0 3px #ffffff inset; background:#454b51;} .registerBox .registerBox_inner .dl dd .label {vertical-align:middle;} .registerBox .registerBox_inner .dl dd .labelL {margin-right:35px;} .registerBox .registerBox_inner .dl dd .p {margin-top:10px;} .registerBox .registerBox_inner .dl dd.txt {padding-top:5px;} .registerBox .registerBox_inner .dl dd.unitWrap {margin-bottom:-15px; padding-top:5px;} .registerBox .registerBox_inner .dl dd.unitWrap .unit {display:inline-block; margin:0 10px 15px 0; vertical-align:top;} .registerBox .registerBox_inner .dl dd.unitWrap .unitTxt {padding-bottom:15px;} .registerBox .registerBox_inner .dl dd .link {display:inline-block; color:#024137; border-bottom:1px solid #779a81;} .registerBox .registerBox_inner .dl dd .text_memo{width: 92%; height: 130px; border: 1px solid #aaa;} .registerBox .registerBox_inner .dl dd .uploadArea {width: 93%;} .registerBox .registerBox_inner .dl dd .uploadArea ul {} .registerBox .registerBox_inner .dl dd .uploadArea ul li {position:relative; min-height:30px; padding-bottom:12px; padding-right:185px;} .registerBox .registerBox_inner .dl dd .uploadArea ul li .fileZone {min-height:18px; padding:6px 0; line-height:18px; border-bottom:1px solid #dddddd;} .registerBox .registerBox_inner .dl dd .uploadArea ul li .fileZone .fileName {display:inline-block; vertical-align:middle; font-size:13px; color:#666666; border-bottom:1px solid #9f9f9f;} .registerBox .registerBox_inner .dl dd .uploadArea ul li .fileZone .btnDelete {display:inline-block; padding:5px; vertical-align:middle;} .registerBox .registerBox_inner .dl dd .uploadArea ul li .uploadBtn {position:absolute; right:0; top:0;} .registerBox .registerBox_inner .dl dd .uploadArea ul li .uploadBtn .btnFile label{cursor:pointer;} .registerBox .registerBox_inner .dl dd .uploadArea ul li .uploadBtn .btnFile {display:inline-block; cursor:pointer; position:relative; width:81px; vertical-align:top; text-align:center; line-height:28px; font-size:13px; color:#222222; border:1px solid #aaaaaa;} .registerBox .registerBox_inner .dl dd .uploadArea ul li .uploadBtn .btnFile .input-file {position:absolute; left:0; top:0; width:100%; height:100%; display:none; opacity:0; filter:alpha(opacity=0); cursor:pointer;} .registerBox .registerBox_inner .dl dd .uploadArea ul li .uploadBtn .btnUpload {display:inline-block; width:83px; vertical-align:top; text-align:center; line-height:30px; font-size:13px; color:#ffffff; background:#aaaaaa;} .registerBox .registerBox_inner .dl dd .uploadArea .maxMb {margin-top:-10px; font-size:13px; color:#999999;} /* whatsApp 추가건 */ #verifying_wa {color:#c50000;} #whatsEm{color:#c50000;} #whatsApp_etc{padding-bottom : 8px;} .registerBox .registerBox_inner .dl dd .uploadArea .maxMb span {display:inline-block; border-bottom:1px solid #bcbcbc;} .registerBox .registerBox_inner .dl dd .uploadArea .formatMsg {margin-top:7px; font-size:13px; color:#c50000;} .registerBox .registerBox_inner .dl dd .pasteUrl {margin-top:10px; font-size:13px; color:#999999;} .registerBox .registerBox_inner .dl dd .pasteUrl .link {display:inline-block; color:#045321; border-bottom:1px solid #789580;} .registerBox .registerBox_inner .jp .dl dt{width:15%;} .registerBox .registerBox_inner .jp .dl dd{float:left; width:30%;} .registerBox .registerBox_inner .jp .dl .required_none{display:inline-block; padding-left:10px; } /* 2017-01-18 HK용 리스트 수정 */ .registerBox .registerBox_inner .dl.hk_newList{margin-top:0;} .registerBox .registerBox_inner .dl.hk_newList dt{padding:0 5px 0 10px;} .registerBox .registerBox_inner .dl.hk_newList dt a{display: inline-block; width: 170px; vertical-align: top; text-align: center; line-height: 30px; font-size: 13px; color: #ffffff; background: #aaaaaa;} /* .reviewWriteWrap .reviewWrite_form .section3 .upload_img {display:none; position:absolute; left:50%; top:0; width:170px; margin-left:-86px; border:1px solid #dddddd; background:#ffffff; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#cccccc,Positive=1,OffX=5,OffY=5); box-shadow:1px 1px 5px rgba(0,0,0,0.15); } */ .registerBox .registerBox_inner .btn {margin-top:30px; padding-top:30px; text-align:center; border-top:1px solid #e5e5e5;} .registerBox .registerBox_inner .btn a {display:inline-block; min-width:243px; padding:0 10px; text-align:center;} .registerBox .registerBox_inner .btn a span {display:inline-block; line-height:48px; font-size:13px;} .registerBox .registerBox_inner .btn a.btnB {border:1px solid #222222; background:#222222;} .registerBox .registerBox_inner .btn a.btnB span {color:#ffffff;} .registerBox .registerBox_inner .btn a.btnW {border:1px solid #222222; background:#ffffff;} .registerBox .registerBox_inner .btn a.btnW span {color:#222222;} .lastChktext{margin-top: 2%; text-align: center; color: #c50000; font-size: 13px;} @media screen and (max-width: 768px){ .registerBox {margin:9% 2.25% 0;} .registerBox .registerBox_inner {padding:20px 15px;} .registerBox .registerBox_inner .msg {padding-bottom:10px;} .registerBox .registerBox_inner .msg .please {float:none; font-size:14px;} .registerBox .registerBox_inner .msg .required {float:none; margin-top:6px; font-size:12px; background-position:left 4px;} .registerBox .registerBox_inner .dl {margin-top:20px;} .registerBox .registerBox_inner .dl dt {width:150px; padding-left:0; font-size:13px;} .registerBox .registerBox_inner .dl dt .required {background-position:left 5px;} .registerBox .registerBox_inner .dl dd {} .registerBox .registerBox_inner .dl dd .btnEdit {margin:10px 0 0 0;} .registerBox .registerBox_inner .dl dd .select {width:75px; font-size:12px;} .registerBox .registerBox_inner .dl dd .labelL {margin-right:20px;} .registerBox .registerBox_inner .dl dd.unitWrap {margin-bottom:-10px;} .registerBox .registerBox_inner .dl dd.unitWrap .unit {margin-bottom:10px;} .registerBox .registerBox_inner .btn a {display:block; width:auto;} } @media screen and (max-width: 480px){ .registerBox .registerBox_inner .dl dd .input-text.input-text_jp {width:80px;} .registerBox .registerBox_inner .dl dt {width:100px;} .registerBox .registerBox_inner .dl dd .select {width:100%; margin-bottom:3px;} } /* 비밀번호변경요청 */ .changePwBox {max-width:900px; margin:0 auto; background:#ffffff;} .changePwBox .greet {} .changePwBox .greet .hello {font-size:16px; font-weight:bold; color:#222222;} .changePwBox .greet .hello span {color:#024137;} .changePwBox .greet .msg {margin-top:8px; line-height:1.4; font-size:14px; color:#222222;} .changePwBox .reason {margin-top:30px; padding:30px 40px; background:#f5f5f5;} .changePwBox .reason .p {line-height:1.4; font-size:13px; color:#666666;} .changePwBox .reason .p2 {margin-top:30px; line-height:1.4; font-size:13px; color:#024137;} .changePwBox .reason .list {display:table; width:100%; margin-top:30px;} .changePwBox .reason .list li {display:table-cell; line-height:1.4; font-size:13px; color:#666666; border-left:1px solid #e0e0e0;} .changePwBox .reason .list li .cell {} .changePwBox .reason .list li span {display:block;} .changePwBox .reason .list li.li1 {width:31.5%; border-left:none;} .changePwBox .reason .list li.li1 .cell {padding-right:40px;} .changePwBox .reason .list li.li2 {width:37%;} .changePwBox .reason .list li.li2 .cell {padding:0 40px;} .changePwBox .reason .list li.li3 {width:31.5%;} .changePwBox .reason .list li.li3 .cell {padding-left:40px;} .changePwBox .dl {overflow:hidden; margin-top:35px;} .changePwBox .dl dt {float:left; width:220px; padding:7px 5px 0 10px; font-size:14px; font-weight:bold; color:#222222;} .changePwBox .dl dt .required {display:inline-block; padding-left:10px; background:url(../images/common/bul_required.gif) no-repeat left 6px;} .changePwBox .dl dd {overflow:hidden; line-height:1.4; font-size:13px; color:#666666;} .changePwBox .dl dd label.error {display:block; margin-top:8px;} .changePwBox .dl dd .input-pw {width:350px; max-width:100%; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .changePwBox .dl dd .pwGuide {margin-top:8px; font-size:13px; color:#666666;} .changePwBox .laterMsg {line-height:1.4; font-size:13px; color:#666666;} .changePwBox .laterCheck {margin-top:15px; line-height:1.4; font-size:13px; color:#222222;} .changePwBox .laterCheck .input-check {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; background:#ffffff;} .changePwBox .laterCheck .input-check:checked {box-shadow:0 0 0 3px #ffffff inset; background:#454b51;} .changePwBox .changePwBox_inner {padding:70px 50px 40px;} .changePwBox .changePwBox_inner .btn {margin-top:40px; text-align:center;} .changePwBox .changePwBox_inner .btn a {display:inline-block; min-width:128px; padding:0 10px; line-height:40px; font-size:13px;} .changePwBox .changePwBox_inner .btn a.btnB {color:#ffffff; border:1px solid #222222; background:#222222;} .changePwBox .changePwBox_inner .btn a.btnW {color:#222222; border:1px solid #222222; background:#ffffff;} .changePwBox .changePwBox_inner2 {padding:40px 50px 70px; border-top:1px solid #e5e5e5; background:#f5f5f5;} .changePwBox .changePwBox_inner2 .btn {margin-top:25px; text-align:center;} .changePwBox .changePwBox_inner2 .btn a {display:inline-block; padding:0 35px; line-height:40px; font-size:14px; color:#ffffff; border:1px solid #222222; background:#222222;} @media screen and (max-width: 768px){ .changePwBox {margin:9% 2.25% 0;} .changePwBox .greet {} .changePwBox .greet .hello {font-size:14px;} .changePwBox .greet .msg {margin-top:5px; font-size:12px;} .changePwBox .reason {margin-top:20px; padding:20px 15px;} .changePwBox .reason .p {font-size:12px;} .changePwBox .reason .p2 {margin-top:20px; font-size:12px;} .changePwBox .reason .list {display:block; margin-top:20px;} .changePwBox .reason .list li {display:block; width:auto !important; margin-top:8px; font-size:12px; color:#666666; border-left:none;} .changePwBox .reason .list li .cell {padding:0 !important;} .changePwBox .reason .list li span {display:inline;} .changePwBox .dl {margin-top:20px;} .changePwBox .dl dt {width:150px; padding-left:0; font-size:13px;} .changePwBox .dl dt .required {background-position:left 5px;} .changePwBox .dl dd {} .changePwBox .laterMsg {font-size:12px;} .changePwBox .laterCheck {margin-top:10px; font-size:12px;} .changePwBox .changePwBox_inner {padding:30px 15px 20px;} .changePwBox .changePwBox_inner .btn {overflow:hidden;} .changePwBox .changePwBox_inner .btn a {float:left; width:48%; min-width:inherit; padding:0;} .changePwBox .changePwBox_inner .btn a.btnL {margin-right:2%;} .changePwBox .changePwBox_inner2 {padding:20px 15px 30px;} .changePwBox .changePwBox_inner2 .btn {margin-top:25px;} .changePwBox .changePwBox_inner2 .btn a {padding:0 20px; font-size:13px;} } @media screen and (max-width: 480px){ .changePwBox .changePwBox_inner .dl dt {width:100px;} } /* 설문조사 */ .surveyBox {max-width:900px; margin:0 auto; background:#ffffff;} .surveyBox.jp{} .surveyBox .surveyBox_inner {padding:70px 50px;} .surveyBox .please {} .surveyBox .surveyBox_inner .please{padding-bottom:17px; font-size:13px; color:#666666; border-bottom:1px solid #aaaaaa;} .surveyBox .surveyBox_inner .surveyCont{padding:10px;} .surveyBox .surveyBox_inner .surveyCont .question {margin-top:46px;line-height:1.4;font-size:16px;font-weight:bold;color:#222222;} .surveyBox .surveyCont .question .subText{font-size:13px; color:#222222;} .surveyBox .surveyCont .answer {} .surveyBox .surveyCont .answer ul {overflow:hidden; margin:16px 0 -20px;} .surveyBox .surveyCont .answer ul li {float:left; margin:0 40px 20px 0; font-size:13px; color:#666666;} .surveyBox .surveyCont .answer ul li .input-check {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; background:#ffffff;} .surveyBox .surveyCont .answer ul li .input-check:checked {box-shadow:0 0 0 3px #ffffff inset; background:#454b51;} .surveyBox .surveyCont .answer ul li .textarea {width:100%; height:50px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .surveyBox .surveyCont .answer ul li.others {width:100%; margin-right:0;} .surveyBox .surveyCont label.error {display:block; margin-top:18px; font-size:13px; color:#c50000;} .surveyBox .surveyBox_inner .btn {margin-top:30px; padding-top:30px; text-align:center; border-top:1px solid #e5e5e5;} .surveyBox .surveyBox_inner .btn a {display:inline-block; min-width:218px; padding:0 10px;} .surveyBox .surveyBox_inner .btn a span {display:inline-block; line-height:38px; font-size:14px;} .surveyBox .surveyBox_inner .btn a.btnB {border:1px solid #222222; background:#222222;} .surveyBox .surveyBox_inner .btn a.btnB span {color:#ffffff;} @media screen and (max-width: 1000px){ .surveyBox {margin:0 5%;} } @media screen and (max-width: 768px){ .surveyBox {margin:9% 2.25% 0;} .surveyBox .surveyBox_inner {padding:20px 15px;} .surveyBox .please {padding-bottom:10px; font-size:14px;} } @media screen and (max-width: 640px){ .surveyBox .surveyCont .question {margin-top:25px;} .surveyBox .surveyCont .answer ul {margin-bottom:-15px;} .surveyBox .surveyCont .answer ul li {float:none; margin-bottom:15px;} .surveyBox .surveyCont .answer ul li.others {width:auto; margin-left:20px;} .surveyBox .surveyCont .error {margin-top:10px;} .surveyBox .surveyBox_inner .btn {margin-top:20px;} .surveyBox .surveyBox_inner .btn a {display:block; width:auto;} .registerBox .registerBox_inner .dl dd .uploadArea ul li {padding-bottom:10px; padding-right:0;} .registerBox .registerBox_inner .dl dd .uploadArea ul li .uploadBtn {position:static; margin-top:10px;} .registerBox .registerBox_inner .dl.hk_newList dt{width:90px; padding:0 5px 0 0;} .registerBox .registerBox_inner .dl.hk_newList dt a{width: 90%; line-height: 18px; font-size: 12px;} } /* ========== [마이페이지] ========== */ /* 마이페이지메뉴 */ .mypageContent .mypageMenu {position:relative; border-bottom:1px solid #e5e5e5;} .mypageContent .mypageMenuList {overflow:hidden;} .mypageContent .mypageMenuList ul {text-align:center;} .mypageContent .mypageMenuList ul li {display:inline-block;} .mypageContent .mypageMenuList ul li a {display:inline-block; height:39px; padding:21px 18px 0; line-height:1.4; font-size:13px; font-weight:bold; color:#999999;} .mypageContent .mypageMenuList ul li.on a {color:#222222;} .mypageContent .mypageMenuList ul + div {display:none;} @media screen and (max-width: 768px){ .mypageContent {} .mypageContent .pageTitle h2{display:none;} .mypageContent .mypageMenu {margin-top:40px;} .mypageContent .mypageMenuList ul {width:850px; margin:0 auto;} .mypageContent .mypageMenuList ul li a {height:29px; padding:11px 19px 0;} } /* 마이페이지메인상단 */ .mypageContent .mypageSummary {overflow:hidden; max-width:1200px; margin:60px auto 0;} .mypageContent .mypageSummary .aboutCard {float:right; position:relative; width:37%; height:277px;} .mypageContent .mypageSummary .aboutCard .gradeLogo {position:absolute; left:25px; top:27px;} .mypageContent .mypageSummary .aboutCard .gradeLogo .logo {} .mypageContent .mypageSummary .aboutCard .gradeLogo .grade {margin-top:5px; text-align:right; font-size:15px; letter-spacing:2px;} .mypageContent .mypageSummary .aboutCard .gradeTxt {position:absolute; right:10px; top:14px;} .mypageContent .mypageSummary .aboutCard .barcode {position:absolute; left:0; bottom:25px;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_img {padding:4px; background:#ffffff;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_img a {display:block;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_img img {max-width:185px; max-height:60px;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_img span {display:inline-block; vertical-align:middle;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_img span img {width:auto;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_num {margin-top:15px; padding-left:32px; font-size:15px; letter-spacing:2px;} .mypageContent .mypageSummary .aboutCard .currentPoint {position:absolute; right:35px; bottom:25px; text-align:right;} .mypageContent .mypageSummary .aboutCard .currentPoint .point {font-size:13px;} .mypageContent .mypageSummary .aboutCard .currentPoint .point strong {display:block; font-size:22px;} .mypageContent .mypageSummary .aboutCard .currentPoint .point em {display:block; font-size:18px;} .mypageContent .mypageSummary .aboutCard .currentPoint .name {margin-top:17px; font-size:15px; letter-spacing:2px;} .mypageContent .mypageSummary .aboutCard .getCard {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/mypage/BG_getCard.png) repeat left top;} .mypageContent .mypageSummary .aboutCard .getCard .msg {padding-top:90px; text-align:center; line-height:1.4; font-size:16px; font-weight:bold; color:#222222;} .mypageContent .mypageSummary .aboutCard .getCard .msg span {display:inline-block; padding-top:60px; background:url(../images/mypage/BG_getCard_icon.png) no-repeat center top;} .mypageContent .mypageSummary .aboutCard .getCard .msg2017 span {display:inline-block; padding-top:60px; background:url(../images/mypage/BG_getCard_icon_2017.png) no-repeat center top;} .mypageContent .mypageSummary .aboutCard .cardFront {position:relative; height:100%; transform:rotateY(0deg); -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); -o-transform:rotateY(0deg); -webkit-transition:transform 0.5s ease-in-out 0.5s; -moz-transition:transform 0.5s ease-in-out 0.5s; -o-transition:transform 0.5s ease-in-out 0.5s;} .mypageContent .mypageSummary .aboutCard .cardBack {position:absolute; left:10000px; top:0; width:100%; height:100%; transform:rotateY(90deg); -webkit-transform:rotateY(90deg); -moz-transform:rotateY(90deg); -o-transform:rotateY(90deg); -webkit-transition:transform 0.5s ease-in-out 0s , left 0s ease-in-out 0.5s; -moz-transition:transform 0.5s ease-in-out 0s , left 0s ease-in-out 0.5s; -o-transition:transform 0.5s ease-in-out 0s , left 0s ease-in-out 0.5s;} .mypageContent .mypageSummary .aboutCard .cardBack .btnClose {position:absolute; right:29px; top:37px; z-index:1;} .mypageContent .mypageSummary .aboutCard .cardBack .barcode {bottom:0; width:100%;} .mypageContent .mypageSummary .aboutCard .cardBack .barcode .barcode_img {padding:10px 0; text-align:center;} .mypageContent .mypageSummary .aboutCard .cardBack .barcode .barcode_img img {max-width:360px; max-height:120px;} .mypageContent .mypageSummary .aboutCard .cardBack .barcode .barcode_num {margin:0; padding:15px 0 15px 32px; font-size:15px;} .mypageContent .mypageSummary .aboutCard .cardBack .barcode .name {position:absolute; right:35px; bottom:15px; font-size:15px; letter-spacing:2px;} /*20180919 jp모바일 구매이력없는 고객 포인트 창*/ .mypageContent .mypageSummary .aboutCard .getCard2018{display: none;background:none;} .mypageContent .mypageSummary .aboutCard .getCard2018 .msg{color: #fff;} /* 마이페이지메인상단 - 등급별 카드색상관련 */ .mypageContent .mypageSummary .aboutCard.gradeBasic .gradeLogo .grade {color:#ffffff;} .mypageContent .mypageSummary .aboutCard.gradeBasic .barcode .barcode_num {color:#ffffff; background:url(../images/mypage/BG_barcodeNum_basic.gif) no-repeat 7px center;} .mypageContent .mypageSummary .aboutCard.gradeBasic .currentPoint .point {color:#ffffff;} .mypageContent .mypageSummary .aboutCard.gradeBasic .currentPoint .point a {color:#ffffff;} .mypageContent .mypageSummary .aboutCard.gradeBasic .currentPoint .name {color:#ffffff;} .mypageContent .mypageSummary .aboutCard.gradeBasic .cardFront {background:#115f36;} .mypageContent .mypageSummary .aboutCard.gradeBasic .cardBack {background:#115f36;} .mypageContent .mypageSummary .aboutCard.gradeBasic .cardBack .barcode .name {color:#ffffff;} .mypageContent .mypageSummary .aboutCard.gradeVip .gradeLogo .grade {color:#115f36;} .mypageContent .mypageSummary .aboutCard.gradeVip .barcode .barcode_num {color:#115f36; background:url(../images/mypage/BG_barcodeNum_vip.gif) no-repeat 7px center;} .mypageContent .mypageSummary .aboutCard.gradeVip .currentPoint .point {color:#115f36;} .mypageContent .mypageSummary .aboutCard.gradeVip .currentPoint .point a {color:#115f36;} .mypageContent .mypageSummary .aboutCard.gradeVip .currentPoint .name {color:#115f36;} .mypageContent .mypageSummary .aboutCard.gradeVip .cardFront {background:#bed8b6;} .mypageContent .mypageSummary .aboutCard.gradeVip .cardBack {background:#bed8b6;} .mypageContent .mypageSummary .aboutCard.gradeVip .cardBack .barcode .name {color:#115f36;} .mypageContent .mypageSummary .aboutCard.gradeVvip .gradeLogo .grade {color:#ffef6a;} .mypageContent .mypageSummary .aboutCard.gradeVvip .barcode .barcode_num {color:#ffef6a; background:url(../images/mypage/BG_barcodeNum_vvip.gif) no-repeat 7px center;} .mypageContent .mypageSummary .aboutCard.gradeVvip .currentPoint .point {color:#ffef6a;} .mypageContent .mypageSummary .aboutCard.gradeVvip .currentPoint .point a {color:#ffef6a;} .mypageContent .mypageSummary .aboutCard.gradeVvip .currentPoint .name {color:#ffef6a;} .mypageContent .mypageSummary .aboutCard.gradeVvip .cardFront {background:#484646;} .mypageContent .mypageSummary .aboutCard.gradeVvip .cardBack {background:#484646;} .mypageContent .mypageSummary .aboutCard.gradeVvip .cardBack .barcode .name {color:#ffef6a;} /* 마이페이지메인상단 - 등급별 카드색상관련 - 20181101 NEW logo 교체 */ .mypageContent .mypageSummary .aboutCard.aboutCard2018 .cardFront, .mypageContent .mypageSummary .aboutCard.aboutCard2018 .cardBack {background:#024137;} .mypageContent .mypageSummary .aboutCard.aboutCard2018 .barcode .barcode_num {color:#fff; background:url(../images/mypage/BG_barcodeNum_basic_2018.gif) no-repeat 7px center;} .mypageContent .mypageSummary .aboutCard.aboutCard2018 .gradeLogo .grade, .mypageContent .mypageSummary .aboutCard.aboutCard2018 .barcode .barcode_num, .mypageContent .mypageSummary .aboutCard.aboutCard2018 .currentPoint .point, .mypageContent .mypageSummary .aboutCard.aboutCard2018 .currentPoint .point a, .mypageContent .mypageSummary .aboutCard.aboutCard2018 .currentPoint .name, .mypageContent .mypageSummary .aboutCard.aboutCard2018 .cardBack .barcode .name {color:#fff;} /* 마이페이지메인상단 - 멤버십카드앞뒷면보기 */ .mypageContent .mypageSummary .aboutCard.back .cardFront {transform:rotateY(90deg); -webkit-transform:rotateY(90deg); -moz-transform:rotateY(90deg); -o-transform:rotateY(90deg); -webkit-transition:transform 0.5s ease-in-out 0s; -moz-transition:transform 0.5s ease-in-out 0s; -o-transition:transform 0.5s ease-in-out 0s;} .mypageContent .mypageSummary .aboutCard.back .cardBack {left:0; transform:rotateY(0deg); -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); -o-transform:rotateY(0deg); -webkit-transition:transform 0.5s ease-in-out 0.5s , left 0s ease-in-out 0s; -moz-transition:transform 0.5s ease-in-out 0.5s , left 0s ease-in-out 0s; -o-transition:transform 0.5s ease-in-out 0.5s , left 0s ease-in-out 0s;} /* 마이페이지메인상단 - 등급내용 */ .mypageContent .mypageSummary .aboutGrade {float:left; width:63%; text-align:center;} .mypageContent .mypageSummary .aboutGrade .inner {overflow:hidden; padding-right:25px;} .mypageContent .mypageSummary .aboutGrade .gradeRank {float:left; height:277px; width:66%; background:#454b51;} .mypageContent .mypageSummary .aboutGrade .gradeRank .cont {width:330px; margin:0 auto;} .mypageContent .mypageSummary .aboutGrade .gradeRank .who {height:79px; padding-top:62px; font-size:26px; font-weight:bold; color:#ffffff;} .mypageContent .mypageSummary .aboutGrade .gradeRank .who span {display:block; margin-top:2px; font-size:18px; font-weight:normal; color:#999999;} .mypageContent .mypageSummary .aboutGrade .gradeRank .status {padding-top:27px; font-size:16px; color:#ffffff; border-top:1px solid #6a6f74;} .mypageContent .mypageSummary .aboutGrade .gradeRank .expected {display:inline-block; margin-top:12px; padding:0 14px; line-height:32px; font-size:16px; color:#ffffff; border-radius:17px; border:1px solid #7d8186;} .mypageContent .mypageSummary .aboutGrade .gradeAmount {float:left; height:277px; width:34%; background:#40464b;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .cont {width:160px; margin:0 auto;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .amount {height:99px; padding-top:42px;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .amount .p {line-height:1.4; font-size:14px; color:#999999;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .amount .price {margin-top:9px; font-size:18px; color:#fefefe;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .amountNext {height:auto; padding-top:34px; border-top:1px solid #6a6f74;} /* 161128 수정 */ .mypageContent .mypageSummary .aboutGrade .gradeAmount .contNew{width: 90%;} .mypageContent .mypageSummary .aboutGrade .gradeRankNew{width: 56.6%;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew{width: 43.4%;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .amountNext:after{content:''; display: block; clear: both;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .amountNext > div:first-child{margin-right: 7%; padding-right: 6%; border-right: 1px solid #6a6f74;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .amountNext .amountLab{float: left; width: 43%; } .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .amount .p {line-height:1.4; font-size:13px; color:#999999;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .amountNext.Id_pdtC{padding-top:15px;} /* 마이페이지메인-VIP키트 */ .mypageContent .vipKit {margin-top:48px;} .mypageContent .vipKit .title {padding-bottom:18px; font-size:16px; font-weight:bold; color:#222222; border-bottom:1px solid #aaaaaa;} .mypageContent .vipKit .msg {margin:24px 0 0 40px} .mypageContent .vipKit .msg li {margin-top:9px; font-size:13px; color:#666666;} .mypageContent .vipKit .vipKitBox {margin-top:21px; border:1px solid #e9e9e9; background:url(../images/mypage/BG_vipkit.gif) repeat center top;} .mypageContent .vipKit .vipKitBox.registerYet {padding:44px 0 40px; text-align:center;} .mypageContent .vipKit .vipKitBox.registerYet .p {line-height:1.6; font-size:18px; color:#000000;} .mypageContent .vipKit .vipKitBox.registerYet .btn {margin-top:21px;} .mypageContent .vipKit .vipKitBox.registerYet .btn a {display:inline-block; width:226px; line-height:40px; font-size:15px; color:#ffffff; background:#222222;} .mypageContent .vipKit .vipKitBox.registerYet .btn a span {display:inline-block; padding-right:12px; background:url(../images/mypage/BG_btnVipkit.gif) no-repeat right center;} .mypageContent .vipKit .vipKitBox.vipKitView .group {overflow:hidden;} .mypageContent .vipKit .vipKitBox.vipKitView .group2 {margin-top:60px; border-top:1px solid #d7d7d7;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit {float:left; margin-top:25px;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit .cont {padding:0 8px;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit .subject {margin-bottom:13px; font-size:14px; color:#666666;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit .t {line-height:1.6; font-size:14px; font-weight:bold; color:#000000;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit .p {margin-top:6px; line-height:1.4; font-size:13px; color:#666666;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit .btn {margin-top:15px;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit .btn .b {display:inline-block; padding:0 13px; line-height:22px; font-size:13px; color:#ffffff; background:#454b51;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit .btn .c {display:inline-block; padding:0 14px; line-height:21px; font-size:13px; color:#ffffff; background:#024137;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit1 {width:19%;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit2 {width:38.4%;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit3 {width:22.4%;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit4 {width:20.2%;} .mypageContent .promotion_cp .msg {margin:24px 0 0 40px} .mypageContent .promotion_cp .msg li {margin-top:9px; font-size:13px; color:#666666;} .mypageContent .promotionBox {margin-top:21px; border:1px solid #e9e9e9; background:url(../images/mypage/BG_vipkit.gif) repeat center top;} .mypageContent .promotionBox.promotionView {padding: 5px 48px 45px 41px;} .mypageContent .promotionBox.promotionView .group {overflow:hidden;} .mypageContent .promotionBox.promotionView .group .unit {float:left; margin:25px 0 0;} .mypageContent .promotionBox.promotionView .group .unit .cont {padding:0 8px;} .mypageContent .promotionBox.promotionView .group .unit .subject {margin-bottom:13px; font-size:14px; color:#666666;} .mypageContent .promotionBox.promotionView .group .unit .t { line-height:1.6; font-size:14px; font-weight:bold; color:#000000;} .mypageContent .promotionBox.promotionView .group .unit .p {margin-top:6px; line-height:1.4; font-size:13px; color:#666666;} .mypageContent .promotionBox.promotionView .group .unit .btn {margin-top:15px;} .mypageContent .promotionBox.promotionView .group .unit .btn .b {display:inline-block; padding:0 13px; line-height:22px; font-size:13px; color:#ffffff; background:#454b51;} .mypageContent .promotionBox.promotionView .group .unit .btn .c {display:inline-block; padding:0 14px; line-height:21px; font-size:13px; color:#ffffff; background:#024137;} .mypageContent .promotionBox.promotionView .group .unit1 {width:19%;} .mypageContent .promotionBox.promotionView .group .unit2 {width:38.4%;} .mypageContent .promotionBox.promotionView .group .unit3 {width:22.4%;} .mypageContent .promotionBox.promotionView .group .unit4 {width:20.2%;} .mypageContent .couponTop{padding-top:40px;font-size: 13px; color: #222222;} /* 마이페이지메인 리스트 */ .mypageContent .mypageMobile {display:none;} .mypageContent .mypageMobile .btnReceiptNo {} .mypageContent .mypageMobile .btnReceiptNo a {display:block; text-align:center; line-height:48px; font-size:14px; font-weight:bold; color:#222222; border:1px solid #000000;} .mypageContent .mypageMobile .btnReceiptNo .msg {margin-top:10px; font-size:12px; color:#666666;} .mypageContent .mypageMobile .m_listType3 {margin-top:28px;} .mypageContent .mypageMobile .hr {height:10px; margin:25px -15px 0; border-top:1px solid #e5e5e5; background:#f5f5f5;} @media screen and (max-width: 1024px){ .mypageContent .mypageSummary {max-width:730px;} .mypageContent .mypageSummary .aboutCard {float:none; width:auto;} .mypageContent .mypageSummary .aboutGrade {float:none; width:auto; margin-top:25px;} .mypageContent .mypageSummary .aboutGrade .inner {padding-right:0;} .mypageContent .vipKit .msg {margin-left:4%} .mypageContent .vipKit .vipKitBox.registerYet {padding:4% 3% 4%;} .mypageContent .vipKit .vipKitBox.registerYet .p {font-size:14px;} .mypageContent .vipKit .vipKitBox.registerYet .btn {margin-top:15px;} .mypageContent .vipKit .vipKitBox.registerYet .btn a {line-height:35px; font-size:14px;} .mypageContent .vipKit .vipKitBox.vipKitView {padding:5px 4% 4% 4%;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit {} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit1 {width:35%;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit2 {width:65%;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit3 {width:35%;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit4 {width:65%;} .mypageContent .promotion_cp .msg {margin-left:4%} .mypageContent .promotionBox.promotionView {padding:5px 4% 4% 4%;} .mypageContent .promotionBox.promotionView .group .unit {} .mypageContent .promotionBox.promotionView .group .unit1 {width:35%;} .mypageContent .promotionBox.promotionView .group .unit2 {width:65%;} .mypageContent .promotionBox.promotionView .group .unit3 {width:35%;} .mypageContent .promotionBox.promotionView .group .unit4 {width:65%;} } @media screen and (max-width: 768px){ .mypageContent .mypageMobile {display:block; margin-top:2.25%;} .mypageContent .mypageSummary {margin-top:0;} .mypageContent .mypageSummary .aboutCard {height:220px;} .mypageContent .mypageSummary .aboutCard .gradeLogo {left:17px; top:20px; width:140px;} .mypageContent .mypageSummary .aboutCard .gradeLogo .logo img {width:135px;} .mypageContent .mypageSummary .aboutCard .gradeLogo .grade {margin-top:0; font-size:14px;} .mypageContent .mypageSummary .aboutCard .gradeTxt {right:8px; top:11px; width:11px;} .mypageContent .mypageSummary .aboutCard .barcode {bottom:20px;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_img {padding:2px;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_img img {max-width:140px; max-height:45px;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_img span img {width:15px;} .mypageContent .mypageSummary .aboutCard .barcode .barcode_num {margin-top:10px; padding-left:25px; font-size:12px; letter-spacing:1px;} .mypageContent .mypageSummary .aboutCard .currentPoint {right:25px; bottom:20px;} .mypageContent .mypageSummary .aboutCard .currentPoint .point {font-size:11px;} .mypageContent .mypageSummary .aboutCard .currentPoint .point strong {font-size:25px;} .mypageContent .mypageSummary .aboutCard .currentPoint .name {margin-top:10px; font-size:12px; letter-spacing:1px;} .mypageContent .mypageSummary .aboutCard .getCard {/* background:url(../images/mypage/BG_getCardM.png) repeat left top; */} .mypageContent .mypageSummary .aboutCard .getCard .msg {padding-top:55px; line-height:1.6; font-size:13px; color:#ffffff;} .mypageContent .mypageSummary .aboutCard .getCard .msg span {padding-top:55px; background:url(../images/mypage/BG_getCardM_icon.png) no-repeat center top;} .mypageContent .mypageSummary .aboutCard .cardBack .btnClose {right:10px; top:20px; width:15px; padding:5px;} .mypageContent .mypageSummary .aboutCard .cardBack .barcode .barcode_img img {max-width:300px; max-height:100px;} .mypageContent .mypageSummary .aboutCard .cardBack .barcode .barcode_num {padding:10px 0 10px 32px; font-size:15px;} .mypageContent .mypageSummary .aboutGrade {margin-top:0; padding:18px 0 22px; text-align:left; background:#f5f5f5;} .mypageContent .mypageSummary .aboutGrade .gradeRank {float:none; height:auto; width:auto; background:none;} .mypageContent .mypageSummary .aboutGrade .gradeRank .cont {width:auto; margin:0 15px; padding:0 5px;} .mypageContent .mypageSummary .aboutGrade .gradeRank .who {display:none;} .mypageContent .mypageSummary .aboutGrade .gradeRank .status {display:none;} .mypageContent .mypageSummary .aboutGrade .gradeRank .expected {display:block; margin-top:0; padding:0 ; line-height:1.4; font-size:13px; color:#666666; border:none;} .mypageContent .mypageSummary .aboutGrade .gradeRank .expected span {display:block; font-size:16px; font-weight:bold;} .mypageContent .mypageSummary .aboutGrade .gradeAmount {float:none; height:auto; width:auto; background:none;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .cont {overflow:hidden; width:auto; margin:16px 15px 0; padding:16px 5px 0; border-top:1px solid #e5e5e5;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .amount {float:left; width:55%; height:auto; padding-top:0;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .amount .p {width:130px; font-size:12px; color:#666666;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .amount .price {margin-top:2px; font-size:14px; font-weight:bold; color:#222222;} .mypageContent .mypageSummary .aboutGrade .gradeAmount .amountNext {width:45%; padding-top:0; border-top:none;} /*20180927 jp&au 멤버쉽 .mypageContent .mypageSummary .aboutCard .getCard2018{background: none;} */ .mypageContent .mypageSummary .aboutGrade .gradeRankNew {float:none; height:auto; width:auto; background:none;} .mypageContent .mypageSummary .aboutGrade .gradeRankNew .cont {width:auto; margin:0 15px; padding:0 5px;} .mypageContent .mypageSummary .aboutGrade .gradeRankNew .who {display:none;} .mypageContent .mypageSummary .aboutGrade .gradeRankNew .status {display:none;} .mypageContent .mypageSummary .aboutGrade .gradeRankNew .expected {display:block; margin-top:0; padding:0 ; line-height:1.4; font-size:13px; color:#666666; border:none;} .mypageContent .mypageSummary .aboutGrade .gradeRankNew .expected span {display:block; font-size:16px; font-weight:bold;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew {float:none; height:auto; width:auto; background:none;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .cont {overflow:hidden; width:auto; margin:16px 15px 0; padding:16px 5px 0; border-top:1px solid #e5e5e5;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .amount {float:left; width:55%; height:auto; padding-top:0;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .amount .p {width:130px; font-size:12px; color:#666666;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .amount .price {margin-top:2px; font-size:14px; font-weight:bold; color:#222222;} .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .amountNext {width:90%; margin-top: 5%; padding-top:0; border-top:none;} /* .mypageContent .mypageSummary .aboutGrade .gradeAmountNew .amountNext .amountLab{width: auto;} */ .mypageContent .vipKit .msg {margin:15px 0 0 10px} .mypageContent .vipKit .vipKitBox.vipKitView {padding:5px 15px 30px 5px;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit {width:100% !important; margin-top:20px;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit .subject {margin-bottom:8px;} .mypageContent .vipKit .vipKitBox.vipKitView .group .unit .p {} .mypageContent .promotion_cp .msg {margin:15px 0 0 10px} .mypageContent .promotionBox.promotionView {padding:5px 15px 30px 5px;} .mypageContent .promotionBox.promotionView .group .unit {width:100% !important; margin-top:20px;} .mypageContent .promotionBox.promotionView .group .unit .subject {margin-bottom:8px;} .mypageContent .promotionBox.promotionView .group .unit .p {} } /* 마이페이지 - 마이포인트 */ .mypageContent .myCurrentPoint {max-width:1200px; margin:0 auto; padding:43px 0 42px; background:url(../images/mypage/BG_mycurrentPoint.gif) no-repeat center center;} .mypageContent .myCurrentPoint.myCurrentPoint2018 {background:url(../images/mypage/BG_mycurrentPoint_2018.gif) no-repeat center center;} .mypageContent .myCurrentPoint .totalPoint {text-align:center;} .mypageContent .myCurrentPoint .totalPoint .icon {display:inline-block; vertical-align:middle;} .mypageContent .myCurrentPoint .totalPoint em {display:inline-block; margin:0 10px; vertical-align:middle; font-size:16px; color:#ffffff;} .mypageContent .myCurrentPoint .totalPoint strong {display:inline-block; vertical-align:middle; font-size:26px; color:#ffffff;} @media screen and (max-width: 768px){ .mypageContent .pageTitle {padding-top:0;} .mypageContent .myCurrentPoint {padding:24px 0; background-size:cover;} .mypageContent .myCurrentPoint .totalPoint .icon {display:block;} .mypageContent .myCurrentPoint .totalPoint .icon img {height:45px;} .mypageContent .myCurrentPoint .totalPoint em {display:block; margin:8px 0 0; font-size:12px;} .mypageContent .myCurrentPoint .totalPoint strong {display:block; margin-top:3px; font-size:25px;} } /* 마이페이지 - 비밀번호, 프로필변경 */ .mypageContent .mypageEditWrap {margin-bottom:-40px; padding-bottom:100px; background:#f5f5f5;} .mypageContent .mypageEditWrap .mypageEditBox {max-width:620px; margin:40px auto 0; padding:20px 50px 60px; box-shadow:1px 1px 5px rgba(0,0,0,0.2); background:#ffffff;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner {max-width:430px; margin:0 auto;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl {margin-top:40px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dt {font-size:14px; font-weight:bold; color:#222222;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dt .required {display:inline-block; padding-left:10px; background:url(../images/common/bul_required.gif) no-repeat left 6px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dt .btnEdit {display:inline-block; min-width:50px; margin-left:7px; padding:0 5px; text-align:center; line-height:18px; font-size:11px; color:#222222; border:1px solid #aaaaaa;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .jp .dl dd{margin-bottom: 30px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd {margin-top:20px; line-height:1.4; font-size:13px; color:#666666;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .input-pw {width:100%; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd label.error {display:block; margin-top:8px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .input-text {width:100%; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .input-text.input-text_jp {width:95%;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .cellWrap {overflow:hidden;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .cell {float:left; width:32%;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .cellM {margin:0 2%;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .cell .select {width:100%; height:29px; font-size:13px; color:#666666; border:none; border-bottom:1px solid #aaaaaa;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .input-radio {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; border-radius:50%; background:#ffffff;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .input-check {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; background:#ffffff;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .input-radio:checked {box-shadow:0 0 0 4px #ffffff inset; background:#454b51;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .input-check:checked {box-shadow:0 0 0 3px #ffffff inset; background:#454b51;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .label {vertical-align:middle;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .labelL {margin-right:35px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .msg {margin-top:10px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .msg.grayC {color: #C7C7C7;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .chkB {margin:7px 0 15px} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd.txt {padding:7px 0;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .link {display:inline-block; color:#024137; border-bottom:1px solid #779a81;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .pwGuide {margin-top:18px; font-size:13px; color:#666666;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .btn {margin-top:28px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .btn a {display:block; text-align:center;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .btn a.btnB {background:#222222; border:1px solid #222222;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .btn a.btnB span {display:inline-block; line-height:48px; font-size:13px; color:#ffffff;} .mypageContent .mypageEditWrap .mypageEditLeave {padding-top:50px; text-align:center;} .mypageContent .mypageEditWrap .mypageEditLeave .t {font-size:17px; font-weight:bold; color:#222222;} .mypageContent .mypageEditWrap .mypageEditLeave .p {margin-top:14px; line-height:1.4; font-size:16px; color:#222222;} .mypageContent .mypageEditWrap .mypageEditLeave .box {margin-top:40px; padding:20px 5px 25px; background:#f2f2f2;} .mypageContent .mypageEditWrap .mypageEditLeave .box .p2 {line-height:1.4; font-size:15px; color:#0d5929;} .mypageContent .mypageEditWrap .mypageEditLeave .box ul {display:inline-block; margin-top:10px; text-align:left;} .mypageContent .mypageEditWrap .mypageEditLeave .box ul li {margin-top:6px; font-size:13px; color:#666666;} .mypageContent .mypageEditWrap .mypageEditLeave .p3 {margin-top:20px; font-size:14px; color:#666666;} .mypageContent .mypageEditWrap .mypageEditLeave .p3 .input-check {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; background:#ffffff;} .mypageContent .mypageEditWrap .mypageEditLeave .p3 .input-check:checked {box-shadow:0 0 0 3px #ffffff inset; background:#454b51;} @media screen and (max-width: 768px){ .mypageContent .mypageEditWrap {padding-bottom:50px; background:none;} .mypageContent .mypageEditWrap .mypageEditBox {margin:0 auto; padding:0; box-shadow:none;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner {padding:0 15px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dt {font-size:13px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dt .required {background-position:left 5px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd {margin-top:5px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .select {font-size:12px;} .mypageContent .mypageEditWrap .mypageEditBox .mypageEditBox_inner .dl dd .labelL {margin-right:20px;} .mypageContent .mypageEditWrap .mypageEditLeave {padding-top:20px;} .mypageContent .mypageEditWrap .mypageEditLeave .p {margin-top:10px; font-size:15px;} .mypageContent .mypageEditWrap .mypageEditLeave .p br {display:none;} .mypageContent .mypageEditWrap .mypageEditLeave .box {margin-top:25px; padding:15px 0 20px;} .mypageContent .mypageEditWrap .mypageEditLeave .box .p2 {font-size:14px;} .mypageContent .mypageEditWrap .mypageEditLeave .box .list {} .mypageContent .mypageEditWrap .mypageEditLeave .box ul li {margin-top:6px; font-size:13px;} .mypageContent .mypageEditWrap .mypageEditLeave .p3 {margin-top:20px; font-size:13px;} } /* 1:1상담 */ .mypageContent .inquiryList {max-width:1200px; margin:0 auto;} .mypageContent .inquiryList .inquiryMsg {text-align:center; line-height:1.6; font-size:13px; font-weight:bold; color:#222222;} .mypageContent .inquiryList .inquiryMsg .btn {margin-top:13px;} .mypageContent .inquiryList .inquiryMsg .btn a {display:inline-block; padding:0 35px; line-height:40px; font-size:13px; color:#ffffff; background:#222222;} @media screen and (max-width: 1230px){ .mypageContent .inquiryList {padding:0 15px;} } @media screen and (max-width: 768px){ .mypageContent .inquiryList {padding:0 2.25%;} .mypageContent .inquiryList .inquiryMsg {padding:10px 10px 25px; border-bottom:1px solid #dddddd;} .mypageContent .inquiryList .inquiryMsg .btn a {display:block; padding:0; text-align:center;} } /* 1:1상담 상세 */ .inquiryDetail {} .inquiryDetail .inquiryTitle {padding-bottom:17px; line-height:1.4; font-size:18px; color:#222222; border-bottom:1px solid #aaaaaa;} .inquiryDetail .info {overflow:hidden;} .inquiryDetail .info .category {float:left; margin-top:20px; font-size:13px; color:#999999;} .inquiryDetail .info .date {float:right; margin-top:20px; padding-right:20px; font-size:13px; color:#999999;} .inquiryDetail .inquiryDetailCont {} .inquiryDetail .inquiryDetailCont .p {margin-top:35px; line-height:1.4; font-size:13px; color:#666666;} .inquiryDetail .inquiryAnswer {margin-top:50px; padding-top:20px; border-top:1px solid #e5e5e5;} .inquiryDetail .inquiryAnswer .answer_info {overflow:hidden;} .inquiryDetail .inquiryAnswer .answer_info .question {float:left; position:relative; margin-top:20px; padding-left:80px; line-height:20px; font-size:14px; font-weight:bold; color:#222222;} .inquiryDetail .inquiryAnswer .answer_info .question .icon {position:absolute; left:0; top:0; min-width:61px; height:20px; text-align:center; font-size:13px; font-weight:normal; color:#ffffff; background:#454b51;} .inquiryDetail .inquiryAnswer .answer_info .infoCont {float:right; margin-top:20px;} .inquiryDetail .inquiryAnswer .answer_info .infoCont .status {display:inline-block; margin-right:13px; padding-right:16px; vertical-align:middle; font-size:13px; color:#999999; background:url(../images/common/bar_1x12_cdd1cf.gif) no-repeat right center;} .inquiryDetail .inquiryAnswer .answer_info .infoCont .status em {} .inquiryDetail .inquiryAnswer .answer_info .infoCont .date {display:inline-block; vertical-align:middle; font-size:13px; color:#999999;} .inquiryDetail .inquiryAnswer .answer {margin-top:30px; padding-left:80px; line-height:1.4; font-size:13px; color:#666666;} .inquiryDetail .add_inquiry {margin-top:50px; padding-top:50px; border-top:1px solid #e5e5e5;} .inquiryDetail .add_inquiry .inquiryTitle {line-height:20px; font-size:14px;} .inquiryDetail .add_inquiry .inquiryTitle .icon {display:inline-block; margin-right:15px; padding:0 10px; font-weight:normal; color:#ffffff; background:#c50000;} .inquiryDetail .inquiryDetailBtn {overflow:hidden; margin-top:55px; border-top:1px solid #e5e5e5;} .inquiryDetail .inquiryDetailBtn .clickHere {float:left; margin-top:20px; font-size:13px; color:#666666;} .inquiryDetail .inquiryDetailBtn .clickHere a {color:#024137; border-bottom:1px solid #779a81;} .inquiryDetail .inquiryDetailBtn .btn {float:right; margin-top:20px;} .inquiryDetail .inquiryDetailBtn .btn a {display:inline-block; min-width:150px; padding:0 10px; text-align:center; background:#222222;} .inquiryDetail .inquiryDetailBtn .btn span {display:inline-block; line-height:40px; font-size:13px; color:#ffffff;} .inquiryDetail .inquiryWriteForm {margin-top:50px; padding:30px 30px 40px; border-bottom:1px solid #e5e5e5; background:#fafafa;} .inquiryDetail .inquiryWriteForm .t {margin-left:7px; font-size:13px; font-weight:bold; color:#222222;} .inquiryDetail .inquiryWriteForm .writeSecton {position:relative; margin-top:15px;} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont {min-height:110px; padding:10px; border:1px solid #adadad; background:#ffffff;} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont .plzLogin {padding:7px 0 0 5px; line-height:18px; font-size:13px; color:#999999;} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont .plzLogin .icon {} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont .plzLogin .icon img {width:18px;} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont .plzLogin a {display:inline-block; color:#222222; border-bottom:1px solid #818181;} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont .textarea {border:none; width:100%; height:110px; line-height:1.6; font-size:13px; color:#999999;} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont label.error {position:absolute; left:0; top:100%; margin-top:10px;} .inquiryDetail .inquiryWriteFormBtn {margin-top:20px; text-align:center;} .inquiryDetail .inquiryWriteFormBtn a {display:inline-block; min-width:148px; padding:0 10px; line-height:40px; font-size:13px;} .inquiryDetail .inquiryWriteFormBtn a.btnB {color:#ffffff; border:1px solid #222222; background:#222222;} .inquiryDetail .inquiryWriteFormBtn a.btnW {color:#222223; border:1px solid #222222; background:#ffffff;} @media screen and (max-width: 768px){ .inquiryDetail .inquiryTitle {padding-bottom:0; text-align:center; border-bottom:none;} .inquiryDetail .info {text-align:center;} .inquiryDetail .info .category {float:none; margin-top:17px; font-size:13px; color:#999999;} .inquiryDetail .info .category span {display:none;} .inquiryDetail .info .date {float:none; margin-top:5px; padding-right:0; font-size:13px; color:#999999;} .inquiryDetail .inquiryDetailCont {} .inquiryDetail .inquiryDetailCont .p {margin:17px 10px 0; font-size:12px;} .inquiryDetail .inquiryAnswer {margin-top:20px; padding:0 10px;} .inquiryDetail .inquiryAnswer .answer_info .question {float:none; padding-left:0; line-height:1.4; font-size:15px;} .inquiryDetail .inquiryAnswer .answer_info .question .icon {display:inline-block; position:static; min-width:inherit; height:18px; padding:0 8px; line-height:18px; font-size:12px;} .inquiryDetail .inquiryAnswer .answer_info .question em {display:block; margin-top:11px;} .inquiryDetail .inquiryAnswer .answer_info .infoCont {float:none; margin-top:18px;} .inquiryDetail .inquiryAnswer .answer_info .infoCont .status em {display:none;} .inquiryDetail .inquiryAnswer .answer {margin-top:15px; padding-left:0; font-size:12px;} .inquiryDetail .add_inquiry {margin-top:23px; padding:25px 10px 0;} .inquiryDetail .add_inquiry .inquiryTitle {text-align:left; line-height:20px; font-size:14px;} .inquiryDetail .add_inquiry .inquiryTitle .icon {display:inline-block; margin-right:15px; padding:0 10px; font-weight:normal; color:#ffffff; background:#c50000;} .inquiryDetail .add_inquiry .inquiryTitle em {display:block; margin-top:11px;} .inquiryDetail .add_inquiry .inquiryDetailCont .p {margin:17px 0 0;} .inquiryDetail .inquiryDetailBtn {margin-top:25px; padding:0 10px;} .inquiryDetail .inquiryDetailBtn .clickHere {float:none; margin-top:20px; font-size:13px;} .inquiryDetail .inquiryDetailBtn .btn {float:none; margin-top:25px;} .inquiryDetail .inquiryDetailBtn .btn a {display:block; padding:0;} .inquiryDetail .inquiryDetailBtn .btn span {line-height:50px; font-size:14px;} .inquiryDetail .inquiryWriteForm {margin:40px -2.3% 0; padding:0; border-top:1px solid #e5e5e5; border-bottom:none; background:#ffffff;} .inquiryDetail .inquiryWriteForm .t {margin-left:0; padding:50px 2.25% 0; font-weight:normal; border-top:10px solid #f5f5f5;;} .inquiryDetail .inquiryWriteForm .writeSecton {padding:0 2.25%;} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont {position:relative; padding:10px 0; border-left:none; border-right:none;} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont .plzLogin {padding-left:0;} .inquiryDetail .inquiryWriteForm .writeSecton .writeCont label.error {top:100%; margin-top:18px;} .inquiryDetail .inquiryWriteFormBtn {overflow:hidden; margin-top:40px;} .inquiryDetail .inquiryWriteFormBtn a {float:left; width:48%; min-width:inherit; padding:0; line-height:48px; font-size:16px;} .inquiryDetail .inquiryWriteFormBtn a.btnL {margin-right:2%;} } /* ========== [ERROR PAGE] ========== */ .errorPage {position:relative; height:100%; min-height:700px;} .errorPageArea {position:absolute; left:0; top:50%; width:100%; margin-top:-257px;} .errorPageBox {max-width:670px; margin:0 auto; padding:40px 65px 90px; text-align:center; background:#ffffff;} .errorPageBox .img {} .errorPageBox .errorTitle {font-size:50px; font-weight:bold; color:#222222;} .errorPageBox .errorDesc {margin-top:10px; font-size:18px; color:#222222;} .errorPageBox .errorCont {margin-top:25px; padding-top:30px; border-top:1px solid #d4d4d4;} .errorPageBox .errorCont .errorBecause {line-height:1.6; font-size:16px; color:#666666;} .errorPageBox .errorCont .btn {margin-top:22px;} .errorPageBox .errorCont .btn a {display:inline-block; min-width:260px; padding:11px 10px; line-height:1.4; font-size:13px; color:#ffffff; background:#222222;} @media screen and (max-width: 860px){ .errorPage {height:auto; min-height:100%;} .errorPageArea {position:static; margin-top:0 !important; padding:100px 0;} .errorPageBox {height:auto; margin:0 30px; padding:30px 60px 60px;} } @media screen and (max-width: 640px){ .errorPageBox {margin:0 2.25%; padding:15px 30px 30px;} .errorPageBox .img {} .errorPageBox .img img {width:60px;} .errorPageBox .errorTitle {font-size:25px;} .errorPageBox .errorDesc {margin-top:8px; font-size:14px;} .errorPageBox .errorCont {margin-top:15px; padding-top:15px;} .errorPageBox .errorCont .errorBecause {font-size:12px;} .errorPageBox .errorCont .btn {margin-top:10px;} .errorPageBox .errorCont .btn a {display:block; min-width:inherit; padding:11px 10px; font-size:12px;} } /* 페이지에러 */ .errorPageType1 {background:url(../images/error/BG_errorPageType1.jpg) no-repeat center center / cover;} .errorPageType1 .errorPageArea {margin-top:-257px;} /* 점검중 */ .errorPageType2 {background:url(../images/error/BG_errorPageType2.jpg) no-repeat center center / cover;} .errorPageType2 .errorPageArea {margin-top:-230px;} /* ========== [이메일설문] ========== */ #surveyEmail {position:relative; height:100%; min-height:800px; background:url(../images/survey/BG.jpg) no-repeat center center / cover;} #surveyEmail .emailFormBoxWrap {position:absolute; left:0; top:50%; width:100%; margin-top:-200px;} #surveyEmail .emailFormBox {overflow:hidden; max-width:650px; margin:0 auto; border-radius:3px; background:url(../images/survey/BG_box.png) repeat left top;} #surveyEmail .emailFormBox .inner {padding:50px 110px 75px;} #surveyEmail .emailFormBox .t {padding-bottom:16px; text-align:center; border-bottom:1px solid #659e78;} #surveyEmail .emailFormBox .msg {margin-top:30px; line-height:1.4; font-size:17px; color:#333333;} #surveyEmail .emailFormBox .choose {margin-top:15px;} #surveyEmail .emailFormBox .choose ul {overflow:hidden;} #surveyEmail .emailFormBox .choose ul li {float:left; margin-right:35px; padding-top:10px; font-size:16px; color:#666666;} #surveyEmail .emailFormBox .choose ul li .input-radio {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; border-radius:50%; background:transparent;} #surveyEmail .emailFormBox .choose ul li .input-radio:checked {box-shadow:0 0 0 4px #ffffff inset; background:#454b51;} #surveyEmail .emailFormBox .inputUnit {position:relative; margin-top:35px; padding-right:155px;} #surveyEmail .emailFormBox .inputUnit .input-text {width:100%; height:48px; border:none; font-size:18px; color:#999999; border-bottom:1px solid #aaaaaa; background:transparent;} #surveyEmail .emailFormBox .inputUnit .btn {position:absolute; right:0; top:0; width:145px; text-align:center; line-height:49px; font-size:22px; font-style:italic; color:#ffffff; border-radius:3px; background:#005e20;} #surveyEmail .popEmailScreen {display:none; position:fixed; left:0; top:0; width:100%; height:200%; opacity:0.4; filter:alpha(opacity=40); background:#000000; z-index:1000;} #surveyEmail .popEmailThx {display:none; position:absolute; left:50%; top:50%; width:500px; height:440px; margin:-220px 0 0 -250px; z-index:1001;} #surveyEmail .popEmailThx .inner {padding:60px 90px 0; text-align:center; border-radius:3px; background:#f4f1ed;} #surveyEmail .popEmailThx .icon {} #surveyEmail .popEmailThx .p {margin-top:20px; line-height:1.4; font-size:18px; color:#333333;} #surveyEmail .popEmailThx .p2 {margin-top:10px;} #surveyEmail .popEmailThx .btn {margin-top:35px;} #surveyEmail .popEmailThx .btn a {display:inline-block; width:195px; line-height:64px; font-size:32px; font-style:italic; color:#000000; border-radius:3px; border:1px solid #6c5a3f;} @media screen and (max-width: 768px){ #surveyEmail {position:relative; height:100%; min-height:600px;} #surveyEmail .emailFormBoxWrap {position:static; margin-top:0; padding:150px 0 150px;} #surveyEmail .emailFormBox {overflow:hidden; max-width:none; margin:0 15px;} #surveyEmail .emailFormBox .inner {padding:30px 15px 40px;} #surveyEmail .emailFormBox .t {padding:0 50px 10px;} #surveyEmail .emailFormBox .msg {margin-top:15px; font-size:14px;} #surveyEmail .emailFormBox .choose {margin-top:5px;} #surveyEmail .emailFormBox .choose ul {overflow:hidden;} #surveyEmail .emailFormBox .choose ul li {float:none; margin-right:0; padding-top:10px; font-size:14px;} #surveyEmail .emailFormBox .inputUnit {margin-top:20px; padding-right:95px;} #surveyEmail .emailFormBox .inputUnit .input-text {height:29px; font-size:14px;} #surveyEmail .emailFormBox .inputUnit .btn {width:90px; line-height:30px; font-size:16px;} #surveyEmail .popEmailThx {left:0; top:140px; width:100%; height:auto; margin:0;} #surveyEmail .popEmailThx .inner {max-width:480px; margin:0 auto; padding:40px 10px;} #surveyEmail .popEmailThx .icon {} #surveyEmail .popEmailThx .icon img {width:60px;} #surveyEmail .popEmailThx .p {margin-top:15px; font-size:14px;} #surveyEmail .popEmailThx .p2 {margin-top:3px;} #surveyEmail .popEmailThx .btn {margin-top:20px;} #surveyEmail .popEmailThx .btn a {width:150px; line-height:35px; font-size:18px;} } @media screen and (max-width: 540px){ #surveyEmail .popEmailThx .inner {max-width:none; margin:0 30px;} } /* ========== [추가] ========== */ /* 팝업 */ .mainEventPop {display:none; position:absolute; left:0; top:5%; width:100%; height:83%; margin-top:70px; text-align:center; z-index:10;} .mainEventPop img {width:100%;} .mainEventPop .popContArea {position:absolute; left:0; top:0; width:100%; height:100%;} .mainEventPop .popContArea .img {display:block;position:relative;max-width:796px;height:100%;max-height:733px;margin:0 auto;} .mainEventPop .popContArea .img .popW {width: [object Object]px; height: [object Object]px; background: #ffe1e9; box-shadow: 10px 17px 35px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 10px 17px 35px rgba(0, 0, 0, 0.08); -moz-box-shadow: 10px 17px 35px rgba(0, 0, 0, 0.08);} .mainEventPop .popContArea .img .popM {display:none;} .mainEventPop .popContArea .img .cont {position:absolute; left:0; top:0; width:100%; height:100%;} .mainEventPop .popContArea .img .cont .btnClose {position:absolute; right:1.2%; top:1%; width:8%; height:7.2%; background:url(../images/common/blank.gif) repeat left top;} .mainEventPop .popContArea .img .cont .btnClose span {line-height:0; font-size:0; opacity:0;} .mainEventPop .popContArea .img .cont .movie {position: absolute; left: 36.8%; top: 33.5%; width: 26.3%; height: 47.2%;} .mainEventPop .popContArea .img .cont .movie iframe {position:absolute; left:0; top:0; width:100%; height:100%;} .mainEventPop .popContArea .img .cont .btn {position:absolute; left:38%; top:84%; width:24%; height:6%; background:url(../images/common/blank.gif) repeat left top;} .mainEventPop .popContArea .img .cont .btn.VNbtn {top:80%; left: 34%;} .mainEventPop .popContArea .img .cont .btn span {line-height:0; font-size:0; opacity:0;} .mainEventPop .popContArea .img .cont .closeToday {position:absolute; left:1.2%; bottom:2%; width:16%; height:5%; background:url(../images/common/blank.gif) repeat left top;} .mainEventPop .popContArea .img .cont .closeToday.rightCloseToday {left:auto;right: 9.2%;} .mainEventPop .popContArea .img .cont .closeToday.VNCLToday {width:34%;} .mainEventPop .popContArea .img .cont .closeToday.TWCLToday {width:55%;} .mainEventPop .popContArea .img .cont .closeToday span {line-height:0; font-size:0; opacity:0;} .mainEventPop .popContArea .img .cont .closeToday .pop_form input {width: 90%; cursor: pointer; display: inline-block; background: transparent; opacity: 0;} .mainEventPop.pop1703{margin-top:7%;} .mainEventPop.pop1703 .popContArea .img{max-width:600px; } .mainEventPop.pop1703 .popContArea .img .cont .movie {position: absolute; left: 36.7%; top: 25.7%; width: 26.7%; height: 39.2%;} .mainEventPop.pop1703 .popContArea .img .cont .btn {position: absolute; left: 67.5%; top: 47%; width: 24%; height: 6%; background: url(../images/common/blank.gif) repeat left top;} .mainEventPop.pop1703 .popContArea .img .cont .closeToday.rightCloseToday{right:1.2%;} .mainEventPop.pop1703 .popContArea .img .cont .closeToday{bottom:18%;} .mainEventPop.mainEventPopID{margin-top:5%;} .mainEventPop.mainEventPopID .popContArea .img{max-width:577px; max-height:575px; } .mainEventPop.mainEventPopID .popContArea .img .cont .btnClose{right:3.2%; top:2%; height:9.2%;} .mainEventPop.mainEventPopID .popContArea .img .cont .closeToday.rightCloseToday{right:4.2%;} .mainEventPop.mainEventPopID .popContArea .img .cont .linkMove{position: absolute; font-size: 0; line-height: 0; left: 23%; top: 38%; width: 150px; height: 28%; margin: 0 auto;} .mainEventPop.mainEventPopID .popContArea .img .cont .linkMove2{position: absolute; font-size: 0; line-height: 0; left: 51%; top: 38%; width: 150px; height: 28%; margin: 0 auto;} .mainEventPop.pop170314 .popContArea .img{max-height:551px;} .mainEventPop.pop170314 .popContArea .img .cont .movie {position: absolute; left: 7.5%; top: 34.5%; width: 85.7%; height: 48%;} .mainEventPop.pop170314 .popContArea .img .cont .movie.movie2 {position: absolute; left: 9.7%; top: 37%; width: 80.7%; height: 44.5%;} .mainEventPop.pop170314 .popContArea .img .cont .closeToday.rightCloseToday {right:0; bottom:1%;} .mainEventPop.pop170626 .popContArea .img{max-height:551px;} .mainEventPop.pop170626 .popContArea .img .cont .closeToday.rightCloseToday {right:0; bottom:1%;} .mainEventPop.pop170626 .popContArea .img .cont .btnClose {right: 4.2%; top: 5%;} .mainEventPop.pop170626 .popContArea .img .cont .movie {position: absolute; left: 18%; top: 37.6%; width: 63.5%; height: 35.8%;} .mainEventPop.pop170626 .popContArea .img .cont .sample_link1{position: absolute; background: url(../images/common/blank.gif) repeat left top; font-size: 0;line-height: 0;left: 18.4%;bottom: 17%;width: 200px;height: 36px;margin: 0 auto;} .mainEventPop.pop170626 .popContArea .img .cont .sample_link2{position: absolute; background: url(../images/common/blank.gif) repeat left top; font-size: 0;line-height: 0;right: 12.3%; bottom: 17%;width: 176px; height: 36px; margin: 0 auto;} .mainEventPop.pop170703 .popContArea .img{max-height:551px;} .mainEventPop.pop170703 .popContArea .img .cont .closeToday.rightCloseToday {right:0; bottom:1%;} .mainEventPop.pop170703 .popContArea .img .cont .btnClose {right: 4.2%; top: 5%;} .mainEventPop.pop170703 .popContArea .img .cont .movie {position: absolute; left: 21.5%; top: 46.9%; width: 57.4%; height: 32.3%;} .mainEventPop.pop170703 .popContArea .img .cont .sample_link1{position: absolute;background: url(../images/common/blank.gif) repeat left top;font-size: 0;line-height: 0;left: 21.4%;bottom: 11.5%;width: 150px;height: 36px;margin: 0 auto;} .mainEventPop.pop170703 .popContArea .img .cont .sample_link2{position: absolute;background: url(../images/common/blank.gif) repeat left top;font-size: 0;line-height: 0;right: 22.3%;bottom: 11.5%;width: 130px;height: 36px;margin: 0 auto;} .mainEventPop.pop170901 .popContArea .img{max-height:551px;} .mainEventPop.pop170901 .popContArea .img .cont .closeToday.rightCloseToday {right:0;bottom: 1%;} .mainEventPop.pop170901 .popContArea .img .cont .closeToday.smallclose {right:0; bottom:5%;} .mainEventPop.pop170901 .popContArea .img .cont .closeToday.longClose {right:0; bottom:-10%;} .mainEventPop.pop170901 .popContArea .img .cont .btnClose {right: 4.2%; top: 4.5%;} .mainEventPop.pop170901 .popContArea .img .cont .btnClose.btnClosePos {right: 4.5%; top: 6.5%;} .mainEventPop.pop170901 .popContArea .img .cont .movie {position: absolute;left: 7.9%;top: 35.3%;width: 82.8%;height: 46.5%;} .mainEventPop.pop170901 .popContArea .img .cont .sample_link1{position: absolute;background: url(../images/common/blank.gif) repeat left top;font-size: 0;line-height: 0;left: 19.4%;bottom: 15.5%;width: 150px;height: 36px;margin: 0 auto;} .mainEventPop.pop170901 .popContArea .img .cont .sample_link2{position: absolute;background: url(../images/common/blank.gif) repeat left top;font-size: 0;line-height: 0;right: 22.3%;bottom: 15.5%;width: 130px;height: 36px;margin: 0 auto;} .mainEventPop.pop180305 .popContArea .img .cont .movie {position: absolute;left: 5.9%;top: 33.3%;width: 87.8%;height: 43.5%;} .mainEventPop.pop170901 .popContArea .img .cont.jp .sample_link1{left: 19.4%; bottom: 25.5%; width: 150px;} .mainEventPop.pop170901 .popContArea .img .cont.jp .sample_link2{right: 19.3%; bottom: 25.5%; width: 150px;} .mainEventPop.closePos .popContArea .img .cont .btnClose{right: 2.2%; top: 2.5%;} .mainEventPop.pop180323 .popContArea .img .cont .btnClose.btnClosePos{right:3.5%; top:3.5%} .mainEventPop.pop180323 .popContArea .img .cont .sample_link1{left: 36.4%; bottom: 9%; height: 39px;} .mainEventPop.pop170901.my_0330 .popContArea .img .cont .sample_link1 {left: 20.4%;} .mainEventPop.pop170901.my_0330 .popContArea .img .cont .sample_link2 {bottom: 9.5%;} @media screen and (max-width: 768px){ .mainEventPop.pop1703{top:14%;} .mainEventPop.pop1703 .popContArea .img {max-width: 560px; margin: 0 auto;} .mainEventPop.pop1703 .popContArea .img .cont .movie {left: 34.8%; top: 29.2%; width: 29.9%; height: 41%;} .mainEventPop.pop1703 .popContArea .img .cont .btn{display:none;} .mainEventPop {top:4%; height:80%; margin-top:40px; z-index:10;} .mainEventPop .popContArea .img {max-height:none;} .mainEventPop .popContArea .img .popW {display:none;} .mainEventPop .popContArea .img .popM {display:inline;} .mainEventPop .popContArea .img .cont .btnClose {right:1%; top:1%; width:13%; height:9%;} .mainEventPop.pop170901 .popContArea .img .cont .btnClose{right: 2.2%; top: 2.5%;} .mainEventPop.pop170901 .popContArea .img .cont .btnClose.btnClosePos {top: 3.5%;} .mainEventPop .popContArea .img .cont .movie {left:9.8%; top:39.8%; width:80.9%; height:35%;} .mainEventPop .popContArea .img .cont .btn {left:25%; top:79%; width:50%; height:9.3%;} .mainEventPop .popContArea .img .cont .closeToday {left:initial; right:1%; bottom:1%; width:23%; height:6%;} .mainEventPop .popContArea .img .cont .closeToday.VNCLToday {width:63%;} .mainEventPop .popContArea .img .cont .closeToday.TWCLToday {width:63%; bottom:10px;} .mainEventPop.pop170314 .popContArea .img .cont .movie{top:36.7%; height:44%;} .mainEventPop.pop170314 .popContArea .img .cont .movie.movie2 { position: absolute; left: 7.8%; top: 40.6%; width: 84.7%; height: 43%;} .mainEventPop.pop170314 .popContArea .img .cont .closeToday.rightCloseToday{bottom:-4%;} .mainEventPop.mainEventPopID{top:20%;} .mainEventPop.mainEventPopID .popContArea .img {max-height:none; width:68%;} .mainEventPop.mainEventPopID .popContArea .img .cont{height:87%;} .mainEventPop.mainEventPopID .popContArea .img .cont .linkMove{position: absolute; font-size: 0; line-height: 0; left: 23%; top: 38%; width: 23%; height: 28%; margin: 0 auto;} .mainEventPop.mainEventPopID .popContArea .img .cont .linkMove2{position: absolute; font-size: 0; line-height: 0; left: 54%; top: 38%; width: 23%; height: 28%; margin: 0 auto;} .mainEventPop.pop170626 .popContArea .img .cont .movie {position: absolute;left: 16.5% !important;top: 40.3% !important;width: 67.6% !important; height: 35% !important;} .mainEventPop.pop170626 .popContArea .img .cont .sample_link1{position: absolute;font-size: 0;line-height: 0;left: 9.4%;bottom: 14%;width: 47%;height: 6%;margin: 0 auto;} .mainEventPop.pop170626 .popContArea .img .cont .sample_link2{position: absolute;font-size: 0;line-height: 0;right: 9.3%;bottom: 14%;width: 32%;height: 6%;margin: 0 auto;} .mainEventPop.pop170626 .popContArea .img .cont .closeToday.rightCloseToday{bottom:-4%;} .mainEventPop.pop170703 .popContArea .img .cont .movie {position: absolute; left: 18.5% !important; top: 50% !important; width: 63.1% !important; height: 33% !important;} .mainEventPop.pop170703 .popContArea .img .cont .sample_link1{position: absolute; font-size: 0; line-height: 0; left: 18.4%; bottom: 8%; width: 30%; height: 6%; margin: 0 auto;} .mainEventPop.pop170703 .popContArea .img .cont .sample_link2{position: absolute; font-size: 0; line-height: 0; right: 21.3%; bottom: 8%; width: 25%; height: 6%; margin: 0 auto;} .mainEventPop.pop170703 .popContArea .img .cont .closeToday.rightCloseToday{bottom:-4%;} .mainEventPop.pop170901.mainEventPopID{top:4%; margin-top:40px;} .mainEventPop.pop170901 .popContArea .img .cont .movie {position: absolute;left: 7.1% !important;top: 45% !important;width: 86.1% !important;height: 51.6% !important;} .mainEventPop.pop180305 .popContArea .img .cont .movie {position: absolute;left: 5.1% !important;top: 34% !important;width: 90.1% !important;height: 43.6% !important;} .mainEventPop.pop170901 .popContArea .img .cont .closeToday.rightCloseToday{bottom: -18%;} .mainEventPop.pop170901 .popContArea .img .cont .sample_link1{position: absolute;font-size: 0;line-height: 0;left: 18.4%;bottom: 13%;width: 30%;height: 6%;margin: 0 auto;} .mainEventPop.pop170901 .popContArea .img .cont .sample_link2{position: absolute;font-size: 0;line-height: 0;right: 21.3%;bottom: 13%;width: 25%;height: 6%;margin: 0 auto;} .mainEventPop.pop170901 .popContArea .img .cont .closeToday.rightCloseToday{bottom:-4%;} .mainEventPop.pop170901 .popContArea .img .cont .closeToday.smallclose {bottom:-4%;} .mainEventPop.pop170901 .popContArea .img .cont .closeToday.longClose {bottom:-4%;} .mainEventPop.pop170901 .popContArea .img .cont.jp .sample_link1{bottom:25.5%;width: 80px;} .mainEventPop.pop170901 .popContArea .img .cont.jp .sample_link2{bottom:25.5%;width: 80px;} .mainEventPop.pop180323 .popContArea .img .cont .sample_link1{left: 35.4%; bottom: 8%; height: 6%;} .mainEventPop.pop180323 .popContArea .img .cont .sample_link1.idlink_C{bottom:-6%;} .mainEventPop.pop170901 .popContArea .img .cont .closeToday.rightCloseToday.idcl_C{bottom:-18%;} .mainEventPop.pop180323.my_0330 .popContArea .img .cont .sample_link1{left: 17.4%;} .mainEventPop.pop170901.my_0330 .popContArea .img .cont .sample_link2{bottom: 8%;} } /* 팝업-홍콩(그린크리스마스) 20161101 */ .mainEventPopHK {} .mainEventPopHK .popContArea .img .cont .closeToday {} @media screen and (max-width: 768px){ } /* 팝업-말레이시아(그린크리스마스) 20161101 */ .mainEventPopMY {} .mainEventPopMY .popContArea .img .cont .closeToday {width:37%;} @media screen and (max-width: 768px){ .mainEventPopMY .popContArea .img .cont .closeToday {width:63%;} } /* 팝업-싱가폴(그린크리스마스) 20161101 */ .mainEventPopSG {} .mainEventPopSG .popContArea .img .cont .closeToday {width:37%;} @media screen and (max-width: 768px){ .mainEventPopSG .popContArea .img .cont .closeToday {width:63%;} } /* 팝업-인도(그린크리스마스) 20161101 */ .mainEventPopIN {} .mainEventPopIN .popContArea .img .cont .closeToday {width:37%;} @media screen and (max-width: 768px){ .mainEventPopIN .popContArea .img .cont .movie {top:35.8%;} .mainEventPopIN .popContArea .img .cont .closeToday {width:63%;} } /* 팝업-타이완(그린크리스마스) 20161101 */ .mainEventPopTW {} .mainEventPopTW .popContArea .img .cont .closeToday {width:23%;} @media screen and (max-width: 768px){ .mainEventPopTW .popContArea .img .cont .movie {top:35.8%;} .mainEventPopTW .popContArea .img .cont .closeToday {width:37%;} } /* 팝업-태국(마이쿠션) 20161019 .mainEventPopTH {top:15%;} .pop1703.mainEventPopTH {top:5%;} .mainEventPopTH .popContArea {} .mainEventPopTH .popContArea .img .popW{width:586px;} .mainEventPopTH .popContArea .img .cont .btnClose {right: 11.2%;top: 2%;width:7%;height:7.2%;} .mainEventPopTH .popContArea .img .cont .closeToday {left:2.2%;bottom: 19.7%;width:36%;height:7%;} @media screen and (max-width: 768px){ .mainEventPopTH .popContArea .img .cont .closeToday {bottom:10.7%;} .mainEventPopTH {top:9%;} .mainEventPopTH .popContArea .img .cont .btnClose{right:4.2%;} .mainEventPopTH .popContArea .img .cont .closeToday.rightCloseToday{right:1.2%;} } */ /* 팝업-대만 20161019 .mainEventPopTW {top:13%;} .mainEventPopTW .popContArea {} .mainEventPopTW .popContArea .img .popW{width:624px;} .mainEventPopTW .popContArea .img .cont .btnClose {right: 11.2%;top: 4%;width:7%;height:7.2%;} .mainEventPopTW .popContArea .img .cont .closeToday {left:2.2%;bottom: 15.7% !important; width:45% !important; height:7%;} @media screen and (max-width: 768px){ .mainEventPopTW .popContArea .img .cont .closeToday {bottom:10.7% !important;} .mainEventPopTW {top:9.5%;} .mainEventPopTW .popContArea .img .cont .btnClose{right:4.2%;} .mainEventPopTW .popContArea .img .cont .closeToday.rightCloseToday{right:1.2%;} } @media screen and (max-width: 380px){ .mainEventPopTW {top:9.5%; margin-top:39px;} } @media screen and (max-width: 320px){ .mainEventPopTW {top:8.5%;} } */ /*2017 이니_글로벌 설문조사*/ body.svm_bg{background-color:#fbfefc;} .sv_wrap {overflow:visible;} .sv_wrap .sv_intro{max-width:2000px; /*margin-top:-5px;*/margin:-5px auto 0; background:url(../images/survey/sv_introBG.png) top center no-repeat; background-size:cover;} .sv_wrap .sv_intro .sv_introBox{width:440px;margin:0 auto;padding: 40px 0 37px;} .sv_wrap .sv_intro .sv_introBox .sv_title{padding: 14% 0 14%;border:7px solid #12b560;color:#12b560;text-align:center;font-size:58px;line-height:1.7;font-weight:bold;min-height: 180px;} .sv_wrap .sv_intro .sv_introBox .sv_title p{letter-spacing:5px;} .sv_wrap .sv_intro .sv_introBox .sv_title p:last-child{letter-spacing:24px; text-indent:20px;} .survey_header {width: 100%; height: 70px; padding-bottom: 14px; background: url(../images/layout/BG_gnbShadow.png) repeat-x left bottom; z-index: 1000;} .survey_header .surveyTop {margin:0 auto;} .survey_header .surveyTop h1 {padding:15px 0 0 32px;} .survey_header .surveyTop h1 a {display:inline-block;} .survey_header .surveyTop h1 span {display:inline-block; margin-left:20px; vertical-align:middle; font-size:14px; font-weight:normal; color:#999;} .sv_wrap .sv_intro .sv_introBox .sv_mid{text-align:center; padding-bottom:50px;} .sv_wrap .sv_intro .sv_introBox .sv_mid .svT1{border-bottom:1px solid #bfbcbc; font-size:20px; letter-spacing: -0.25px; color:#336633; line-height:24px; padding:40px 0 30px; margin-bottom:30px;} .sv_wrap .sv_intro .sv_introBox .sv_mid .svT2{font-size:17px; color:#7f7a7a; line-height:24px;} .sv_wrap .sv_intro .sv_introBox .sv_start{} .sv_wrap .sv_intro .sv_introBox .sv_start a{display:inline-block; background-color:#000; padding:20px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align:center; width:100%; height:100%; color:#fff; font-size:22px; font-weight:bold; text-decoration:none; } /*일본 nps*/ .language_L015 .sv_wrap .sv_intro .sv_introBox .sv_title{font-size: 30px;} /*20190826_마이파운데이션ver*/ .sv_wrap.myFoundation .sv_intro {background-image:url('../images/survey/sv_introBG_myFoundation.jpg');} .sv_wrap.myFoundation .sv_intro .sv_introBox .sv_title {border-color:#212121;color:#212121;} @media screen and (max-width: 500px){ .sv_wrap .sv_intro{background-size:cover;} .survey_header .surveyTop h1{padding-left:22px;} .sv_wrap .sv_intro .sv_introBox{width:285px;padding: 15% 0;} .sv_wrap .sv_intro .sv_introBox .sv_title{font-size: 32px;min-height: auto;} .sv_wrap .sv_intro .sv_introBox .sv_title p:last-child{letter-spacing:18px; text-indent:13px;} .sv_wrap .sv_intro .sv_introBox .sv_mid{padding-bottom:10%;} .sv_wrap .sv_intro .sv_introBox .sv_mid .svT1{padding:4% 0; margin-bottom:5%;} .sv_wrap .sv_intro .sv_introBox .sv_mid .svT2{font-size:14px;} .sv_wrap .sv_intro .sv_introBox .sv_start a{font-size:18px; padding:4% 0;} } .surveyContent {background: #FBFEFB url(../images/survey/sv_introSUB_BG.png) center bottom no-repeat; background-size: contain; margin-top: -5px;} .surveyContent .title {padding:100px 0; background-color:#f8f8f8; text-align:center; font-size:32px; font-weight:bold; color:#12b560; letter-spacing:2px;} .surveyContent .title span {font-style:italic;} .surveyContent .p {line-height:1.4; font-size:14px;} .surveyContent .msglist {margin-top:30px;} .surveyContent .msglist li {padding-left:17px; line-height:1.4; font-size:22px; background:url(../images/common/bul_5x5_888888.gif) no-repeat left 15px;} .surveyContent .msglist li strong {font-size:28px; color:#566c11;} .surveyContent .msglist li span {display:inline-block; font-style:italic; color:#8c1e1e;} .surveyContent .msglist li span.star {display:inline-block; padding-top:8px; font-style:italic; color:#8c1e1e; background:url(../images/common/BG_4star.gif) no-repeat 4px top;} .surveyList {width:946px;margin:0 auto;overflow:hidden;} /* 20170222 섹션 타이틀 숨김 요청 */ .surveyList h3 {/* background:url(../images/survey/h3_leaf_icon.png) left 7px no-repeat; border-bottom:1px solid #aaa; margin-top:65px; margin-bottom:18px; */ padding-left:30px; padding-bottom:15px; line-height:1.4; font-size:19px; color:#12b560;} .surveyList h4 {margin-left:13px; line-height:1.4; font-size:16px; font-weight:normal; color:#222;} .surveyList .ques {margin-left:13px; margin-bottom:3%;} .surveyList .ques ul {margin-top:20px;} .surveyList .ques ul li {width:100%; margin-top:15px;} .surveyList .ques ul li .input-radio{width:17px; height:17px;} .surveyList .ques ul li .label{font-size:13px; color:#666; padding-left:8px;} .surveyList .ques ul li .input_text{margin-left:10px; padding-left:10px; height:20px; line-height:20px; border:1px solid #d7d7d7;} .surveyList .ques ul li .num {float:left; width:40px; font-size:24px;} .surveyList .ques ul li .desc {float:left; width:904px;} .surveyList .ques ul li .desc .textarea {width:902px; height:133px; line-height:1.6; font-size:14px; color:#888888; background:#eeeeee;} .surveyList .ques ul li .desc .textarea.plzDesc {background:#eeeeee url(../images/event/BG_plzDesc.gif) no-repeat 15px 15px;} .surveyList .ques ul li.type2 .siteName {float:left; width:280px;} .surveyList .ques ul li.type2 .siteName .input-text {width:272px; height:43px; line-height:43px; font-size:14px; color:#888888;} .surveyList .ques ul li.type2 .siteName .input-text.plzSite {background:url(../images/event/BG_plzSite.gif) no-repeat 10px center;} .surveyList .ques ul li.type2 .desc {float:left; width:624px;} .surveyList .ques ul li.type2 .desc .textarea {width:622px;} .surveyList .article_sub {display:none;} .surveyList .article_sub.on {display:block;} .surveyList .article_sub.active {display:none;} .surveyList .article_sub.active.on {display:block;} /*활성화 가능 & 활성화*/ .surveyContent .btn {margin-top:2%; padding-bottom:3%; text-align:center} .surveyContent .btn a {display:inline-block; width:200px; text-align:center; line-height:51px; font-size:16px; color:#fff; background:#12b560; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .surveyContent .btn a.whiteBG_btn{margin-left:10px; background:#fff; color:#12b560;} .surveyContent .textareaWrap{position:relative; } .surveyContent .textareaWrap .textMax{position:absolute; top:0; right:0; font-size:13px; color:#333; font-weight:bold;} .ques textarea {width:99.6%; height:108px; margin-top:20px; padding:10px 0;text-indent:10px; border-color:#bbb;} .layerPopup .emailArea {text-align:center;padding-bottom:20px;padding-top:20px;border-bottom:1px solid #eee;} .layerPopup .btnArea {text-align:center} .layerPopup .btnArea p {padding-bottom:20px} .layerPopup {width: 415px; height: 216px; margin: -108px 0 0 -207px} .gl_survey {display:none;} .sv_wrap .intro p a img {width:946px;} .sv_wrap .intro p {text-align : center;} .chk_txt textarea {display : none; } /* 레이어 팝업 */ #caution .popBg {position:fixed; left:0; top:0; width:100%; height:200%; min-height:100%; opacity:0.5; filter:alpha(opacity=50); background:#000000; z-index:991;} #caution_cp .popBg {position:fixed; left:0; top:0; width:100%; height:200%; min-height:100%; opacity:0.5; filter:alpha(opacity=50); background:#000000; z-index:991;} .layerPopup {display:none; position:fixed;left:50%;top:50%;border:1px solid #303030;background:#ffffff;z-index:1001;} .layerPopup .popClose {position:absolute; right:10px; top:10px; z-index:1002;} .layerPopup .popClose button {width:27px; height:27px; border:none; background:none; cursor:pointer;} .layerPopBody {padding:30px; position: relative; z-index: 1002; background-color: #fff;} .layerPopBody h5 {padding:0 30px 5px 0; margin-bottom:15px; border-bottom:1px solid #303030; font-weight:bold; font-size:18px; color:#222222;} .layerPopBody .confirmMsg {line-height:18px;} .layerPopBody .confirmBtn {margin-top:18px; padding-top:20px; border-top:1px solid #e5e5e5; text-align:center;} .pop_completeWrap h4{font-size:16px; color:#000; border-bottom:1px solid #000; padding-bottom:5px; margin-bottom:5px;} .pop_completeWrap .btnArea p{font-size:14px; color:#000; line-height:25px;} /* 버튼 큰거 */ .layerPopBody .btnType1 {display:inline-block; padding:0 20px; vertical-align:top; line-height:29px; font-weight:bold; font-size:12px; color:#ffffff !important; cursor:pointer; border:none; background:#303030;} .layerPopBody .btnType1:hover {background:#045321;} .layerPopBody .btnType2 {display:inline-block; padding:0 19px; vertical-align:top; line-height:27px; font-weight:bold; font-size:12px; color:#222222 !important; cursor:pointer; border:1px solid #b2b2b2; background:#ffffff;} .layerPopBody .btnType2:hover {text-decoration:underline; background:#eeeeee;} .layerPopBody .btnArea {position:relative; width:100%; margin-top:20px; zoom:1;} .layerPopBody .btnArea:after {content:''; display:block; clear:both;} .layerPopBody .btnArea .btnArea_txt {position:absolute; left:0; top:0; font-size:11px;} /*PC/모바일 공통*/ .subject_r{display:none !important;} .m_style .m_title span{display:inline-block;margin-left:10px;font-size: 22px;letter-spacing: -1px;color:#666;} .m_style .m_subject span{display:inline-block;margin-left:10px; margin-top:5px; font-weight:normal; font-size:14px; color:#04533c;} .mobile_temp{display:none;} .tip_redText{padding-left:15px; font-size:14px; line-height:26px; color:#ff1408; } .q_text_r{text-align:right; font-size:12px; color:#000; margin-right:5%; margin-bottom:5%;} .textBoxSt{width: 98%; background-color:transparent; margin: 1% 20px 10px; padding: 10px 0; border: 0; border-bottom: 1px solid #939693;} .q_text_r {text-align: right; font-size: 12px; color: #000; margin-right: 0; margin-bottom: 0;} .horizontalRadio{position:relative;margin:4% 0 7%;width: 97%;margin-left:15px;} /* .horizontalRadio > div{display:inline-block !important;} */ .horizontalRadio:after{content:''; display:block; clear:both;} .horizontalRadio .text_low{display: inline-block;position:relative; color:#444; margin-bottom: 2%;font-size: 16px;color: #444;margin-top: 2%;top:5px; margin-right:20px;} .horizontalRadio .text_excelllent{display: inline-block;position:relative;top:5px;font-size:16px;color:#444;margin-top: 2%;} .horizontalRadio .hr_inWrap{display: inline-block;width: auto;} .horizontalRadio .hr_inWrap:after{content:''; display:block; clear:both;} .horizontalRadio .hr_inWrap ul{font-size: 0} .horizontalRadio .hr_inWrap li{text-align: left;margin-top: 15px; margin-right:20px; display:inline-block;} .horizontalRadio .hr_inWrap li input{width:17px; height: 17px;} .horizontalRadio .hr_inWrap li label{color:#444;font-size:16px;text-align:center;vertical-align: middle;padding-left: 8px;} .stepNumWrap{display:none;} .temp_img{max-width:930px;text-align:left;margin-bottom:2%; margin-left:13px;} .temp_img img{border:1px solid #d7d7d7;} #caution.layerPopup{height:auto;} #caution.layerPopup .layerPopBody h4{font-size:16px; line-height:1.6; color:#000; text-align:center;} #caution.layerPopup .emailArea{font-size:16px;} #caution.layerPopup .emailArea label{color:#000;} #caution.layerPopup .btnArea p{font-size:14px; color:#000;} #caution_cp.layerPopup{width:300px; height:auto;} @media screen and (max-width: 963px){ .surveyList{width:100%; margin:0 auto;} } @media screen and (max-width: 640px){ .temp_img img{border:none;} .subject_r{display:block !important;} .surveyContent{background:none;} .temp_img{width: 92%; margin: 0 auto;border: 1px solid #d7d7d7; text-align:center; background-color:#fff;} .layerPopup{width:393px;} #caution.layerPopup{width: 277px; margin: -170px -140px;} #caution.layerPopup .emailArea{font-size:13px;} #caution .layerPopBody .btnArea a{width:60px !important;} #caution.layerPopup .emailArea label{display: block; margin-bottom: 10px; } #caution.layerPopup .emailArea .emailTxt{height: 25px; width: 97%; padding-left: 1%;} #caution_cp.layerPopup{width:300px; height:auto; margin:-150px;} #caution_cp.layerPopup .pop_completeWrap .btnArea p br{display:none;} .web_sec{display:none;} .mobile_sec{display:block;} .mobile_temp{display:block; background: url(../images/survey/sv_introSUB_BG.png) center bottom no-repeat; background-size: cover; padding: 7% 0; position: relative; bottom: 0px; } .m_style .m_title{background-image:url(); margin:0; border:0; padding: 5% 0; background-color: #f8f8f8; text-align: left; text-indent:20px; font-size: 25px; font-weight: bold; color: #000; letter-spacing: -1px;} .m_style .m_title span{display: block; margin-left: 15px; text-indent: 0; font-size: 23px;letter-spacing: -1px; width: 73%;} .m_style .m_subject span{display:block; width:74%; text-indent:0; margin-left:15px;} .m_style .m_title{position:relative; min-height:51px;} .stepNumWrap{display:block;position:absolute;top:17px;right:10px;} .stepNumWrap .stepNum{width:50px; height:50px; line-height:50px; color:#025d24; font-size:17px; -webkit-border-radius: 130px;-moz-border-radius: 130px; border-radius: 130px; border:3px solid #025d24; text-indent:0; text-align:center;} /* 해상도 640px에서는 각 항목이 원페이지로 전환_맨하단 버튼으로 다음 항목 이동 */ .m_style .m_step{display:none;} .m_style .sec_1{display:block;} .m_style .in_ask_1{display:block;} .m_style .m_subject{font-size: 15px;color:#333;margin-left:20px;margin-top:15px;margin-bottom:25px;font-weight:bold;} .surveyList .ques{margin: 15px auto 10px;border:1px solid #d7d7d7;background-color:#fff;width: 92%;} .surveyList .ques ul{margin-top:0; padding-top:15px;} .surveyList .ques ul li{margin-top:0; margin-bottom:18px; padding-bottom:18px; text-indent:10px; border-bottom:1px dotted #d7d7d7; letter-spacing:-0.5px;} .surveyList .ques ul li:last-child{margin-bottom:0; border-bottom:0;} .surveyList .ques ul li .label{font-size:16px; vertical-align:middle;} .mobile_temp .btnBt{margin:15px 0; text-align:center;} .mobile_temp .btnBt a{display:inline-block; width:45%; margin:0 5px;height:40px; line-height:40px; font-size:15px; font-weight:bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mobile_temp .btnBt a.greenColor{background-color:#025d24; color:#fff;} .mobile_temp .btnBt a.whiteColor{background-color:#fff; color:#025d24;} .ques textarea{width:93%; margin-left:12px;} .textBoxSt{width:90%; margin:5% 20px 10px; padding:10px 0; border:0; border-bottom:1px solid #939693;} .q_text_r{margin-right:5%; margin-bottom:5%;} .surveyList .ques.bd0{border:0;} .surveyList .ques.bd0 textarea{width:95%; height:211px;} .horizontalRadio{position:relative;margin: 7% auto;width: 90%;min-height: 90px;} .horizontalRadio .text_low{font-size:16px;float: none;margin-bottom: 4%;text-align: left;display:block;} .horizontalRadio .text_excelllent{font-size:16px;float: none;margin-top: 6%;text-align: left;display:block;} .horizontalRadio .hr_inWrap{margin:0 5px;float: none;display:block;} .horizontalRadio .hr_inWrap:after{content:''; display:block; clear:both;} .horizontalRadio .hr_inWrap ul{background:none;height: auto;} .horizontalRadio .hr_inWrap li{text-align: left;width: auto;float: none;display: block;} .horizontalRadio .hr_inWrap li input{display: inline-block;text-align: left;width: 30px;height:30px;margin:0 auto;} .horizontalRadio .hr_inWrap li label{color:#444;font-size:16px;text-align:center;vertical-align: middle;padding-left: 10px;} } /* 2017-01-22 점검안내 페이지 */ .nsmWrap{overflow: hidden; min-width: 320px; width:100%; height:100%; background-color:#025d24; position:relative;} .nsmWrap .nsm_in{padding-top:220px; margin:0 auto; width:75%; text-align:center;} .nsmWrap .nsm_logo{padding-bottom:50px;} .nsmWrap .nsm_logo img{height:124px;} .nsmWrap .top_text{color:#fff; font-size:39px; line-height:1.2; padding-bottom:38px;} .nsmWrap .mid_text{color:#96dfb1; font-size:23px; line-height:1.2; padding-bottom:82px;} .nsmWrap .bottom_text{} .nsmWrap .bottom_text:after{content:''; display:block; clear:both;} .nsmWrap .bottom_text > ul{display:inline-block; text-align:center;} .nsmWrap .bottom_text > ul > li{display:inline-block; background:url(../images/main/nsm_bar.png) 0 5px no-repeat; margin-left:20px; padding-left:20px; font-size:23px; color:#fff;} .nsmWrap .bottom_text > ul > li:first-child{background:none; margin-left:0; padding-left:0;} @media screen and (max-width: 1024px){ .nsmWrap .nsm_in{padding-top:12%; width:98%;} .nsmWrap .mid_text{font-size:20px; line-height:1.4;} } @media screen and (max-width: 768px){ .nsmWrap .nsm_in{padding-top:38%; width:98%;} .nsmWrap .nsm_logo{padding-bottom:40px;} .nsmWrap .top_text{font-size:25px; padding-bottom:28px;} .nsmWrap .mid_text{font-size:16px; line-height:1.4; padding-bottom:55px;} .nsmWrap .bottom_text{width:450px;} .nsmWrap .bottom_text > ul > li{font-size:18px; margin-left: 3%; padding-left: 3%; background-position:0 2px;} } @media screen and (max-width: 736px){ .nsmWrap .nsm_in{padding-top:4%; width:98%;} } @media screen and (max-width: 640px){ .nsmWrap .nsm_in{padding: 28% 0 50%; width: 90%;} .nsmWrap .nsm_logo{padding-bottom:20px;} .nsmWrap .top_text{font-size:16px; padding-bottom:18px;} .nsmWrap .mid_text{font-size:14px; line-height:1.4; padding-bottom:35px;} .nsmWrap .bottom_text{width:100%;} .nsmWrap .bottom_text > ul > li{font-size:15px; margin-bottom:8px; margin-left: 0; padding-left: 0; background:none;} } /* 수신거부페이지 */ .rejectBody{background-color:#F5F5F5; } .rejectWrap{padding:220px 0 267px; margin-top:-7px;} .rejectWrap .reject_in{width:720px;min-height: 379px;margin:0 auto;background-color:#fff;box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2);} .rejectWrap .reject_in .reject_con{width:580px; margin:0 auto; } .rejectWrap .reject_in .reject_con .reject_top{ text-align:center; letter-spacing:-0.5px; border-bottom:1px solid #ccc; padding-bottom:38px; margin-bottom:38px;} .rejectWrap .reject_in .reject_con .reject_top .p1{font-size: 31px;color:#222;padding:80px 0 35px;line-height:1.4;letter-spacing: -0.5px;} .rejectWrap .reject_in .reject_con .reject_top .p1 strong{color:#0c5a28;} .rejectWrap .reject_in .reject_con .reject_top .p2{font-size:14px; color:#666;line-height:20px;} .rejectWrap .reject_in .reject_con .reject_bt{text-align:center;padding-bottom: 38px;} .rejectWrap .reject_in .reject_con .reject_bt a{display:inline-block; width:136px; font-size:14px; padding:13px 0; text-align:center;} .rejectWrap .reject_in .reject_con .reject_bt a.btn_G{background-color:#f2f2f2; color:#222;} .rejectWrap .reject_in .reject_con .reject_bt a.btn_B{background-color:#222; color:#fff;} /* 레이어 팝업 */ #reject_popLayer .popBg {position:fixed; left:0; top:0; width:100%; height:200%; min-height:100%; opacity:0.5; filter:alpha(opacity=50); background:#000000; z-index:991;} #reject_popLayer.layerPopup {display:none; position:fixed;left:50%;top:50%;border:0;background:#ffffff;z-index:1001; width: 520px; height:440px; margin:0;} #reject_popLayer.layerPopup .popClose {position:absolute; right:15px; top:15px; z-index:1002;} #reject_popLayer.layerPopup .popClose button {width:27px; height:27px; border:none; background:none; cursor:pointer;} #reject_popLayer .layerPopBody {padding:50px 30px; position: relative; z-index: 1002; background-color: #fff;} #reject_popLayer .layerPopBody h5 {padding:0 30px 5px 0; margin-bottom:15px; border-bottom:1px solid #303030; font-weight:bold; font-size:18px; color:#222222;} #reject_popLayer .layerPopBody .confirmMsg {} #reject_popLayer .layerPopBody .confirmBtn {margin-top:18px; padding-top:20px; border-top:1px solid #e5e5e5; text-align:center;} #reject_popLayer .pop_completeWrap h4{font-weight:normal; font-size:20px; color:#000; border-bottom:1px solid #000; padding-bottom:4%; margin-bottom:4%;} #reject_popLayer .pop_completeWrap .btnArea {margin-top:50px;} #reject_popLayer .pop_completeWrap .btnArea p{font-size:25px; color:#000; line-height:1.4;} #reject_popLayer .pop_completeWrap .btnArea p.psub{font-size:14px; color:#666; margin-bottom:25px;} #reject_popLayer .pop_completeWrap .btnArea p strong{color:#0c5a28;} #reject_popLayer .pop_completeWrap .btnArea .p2{border-bottom:1px solid #ddd; font-size:14px; color:#000; margin-bottom:27px; padding-bottom:48px; line-height:20px;} #reject_popLayer .layerPopBody .btnType1{font-size: 13px; padding: 6px 0px; font-weight: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} @media screen and (max-width: 726px){ .rejectWrap{padding:35% 0 61%;} .rejectWrap .reject_in{width:92%;height:100%;min-height: auto;} .rejectWrap .reject_in .reject_con{width:85%;} .rejectWrap .reject_in .reject_con .reject_top{padding-bottom:8%; margin-bottom:8%;} .rejectWrap .reject_in .reject_con .reject_top .p1{font-size:18px; padding: 10% 0 6%;} .rejectWrap .reject_in .reject_con .reject_bt{padding-bottom:10%;} #reject_popLayer.layerPopup{width:85%; margin:0;} } @media screen and (max-width: 640px){ #reject_popLayer .pop_completeWrap .btnArea p{font-size:20px;} #reject_popLayer .pop_completeWrap .btnArea .p2 br{display:none;} #reject_popLayer .pop_completeWrap .btnArea .p2{padding-bottom:27px;} .rejectWrap .reject_in .reject_con .reject_bt a{width:35%;} #reject_popLayer .pop_completeWrap .btnArea{margin-top:10%;} } /* 2017-03-02 */ .comingS{text-align:center; padding:107px 0 70px;} .comingS .commin_in span{background: url(../images/common/icon_notice.png) top left no-repeat; color: #999; font-size: 16px; padding-left: 40px; display: inline-block; height: 27px; line-height: 27px;} .privacy_btn{width:967px;margin:0 auto;margin-top:30px;margin-bottom:-80px;} .privacy_btn ul{overflow:hidden; display: flex; justify-content: center;} .privacy_btn ul li{width:120px;height:50px;line-height:50px;font-size:15px;text-align:center;border-right:1px solid #ddd;} .privacy_btn ul li.borN{border-right:none;} .privacy_btn ul li.on a{font-weight:bold;font-size:18px} .privacy_btn ul li a{display:block;} .privacy_btn ul li:last-child { border: none; } /* 2017 - 05 - 10 gnb 수정*/ #header .gnbSubWrap .gnbSubMenu1 .gnbSub.vnGnbSub{width:1067px;} /* #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate.gnbCate4 .inner{padding: 26px 0 26px 32px;} */ #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate.gnbCate4 .cateTitle.last-child a strong{position:relative;background-position:right 78%;padding-right: 15%;} #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate.gnbCate4 .cateTitle.last-child a strong .iconNew{display:inline-block;*zoom:1;width:15px;height:15px;position:absolute;bottom:2px;right: 7%;font-size:10px;line-height:15px;vertical-align:top;text-align:center;background:#024137;color:#fff;border-radius:3px;} .iconNew2{ display: inline-block; width: 15px; height: 15px; position: relative; bottom: -2px; right: 0; font-size: 10px; line-height: 15px; vertical-align: top; text-align: center; background: #024137; color: #fff; border-radius: 3px; margin-left:5px; font-style:normal; } @media screen and (max-width: 768px){ #header .gnbSubWrap .gnbSubMenu .gnbSub .gnbCate.gnbCate4 .cateTitle.last-child a strong{padding-right:10%;} } /* 2017-06-09 샘플쿠폰*/ .s_cpWrap{margin-bottom:-40px;} .s_cp_cont{background-color:#f5f5f5; padding:57px 0 90px;} .s_cp_cont .s_cp_box{max-width:722px; margin:0 auto; padding: 55px 0 45px; background-color:#fff; text-align:center; box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} .s_cp_cont .s_cp_box .s_cp_in{max-width:545px; margin:0 auto;} .s_cp_cont .s_cp_box .s_cp_in h2{font-size:32px; color:#5d231c; line-height:1.3;} .s_cp_cont .s_cp_box .s_cp_in .sub_text{margin-top:18px; font-size:17px; color:#5b5b5b; line-height:1.6;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_img{margin:31px 0;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox{max-width:420px; margin:0 auto; background-color:#f5f5f5; padding:13px 19px 2px; } .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn{text-align:left;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn th{vertical-align:top; font-size:16px; color:#333; padding-bottom: 11px; padding-top: 2px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn td{font-size:16px;color:#025d24; padding-bottom:11px; padding-left:17px; line-height:1.5;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_btn{margin:32px 0 16px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_btn .btn{border: 0; cursor:pointer; background-color: #222; color: #fff; padding: 2% 20px; width:331px; font-size: 18px; font-weight: bold;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_btn .btn.btn2{background-color: #b9b9b9;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_caution{width:100%; margin:0 auto;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_caution p{font-size:16px; font-weight:bold; color:#0e5122; line-height: 2;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_caution p span{display:inline-block; margin-right:10px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_direct{max-width:510px; margin:0 auto; margin-top:40px; text-align:left;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_direct .s_cp_title{font-size:17px; font-weight:bold; color:#666; margin-bottom:10px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_direct td{vertical-align:top; font-size: 14px; color: #666; padding-bottom: 8px; line-height: 1.6; padding-left:8px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_direct td:first-child{padding-left:0;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_logo{margin-top:43px;} .img_w{display:inline-block;} .img_m{display:none;} /*레이어*/ #sample_popLayer .popBg {position:fixed; left:0; top:0; width:100%; height:200%; min-height:100%; opacity:0.5; filter:alpha(opacity=50); background:#000000; z-index:991;} #sample_popLayer.layerPopup {display:none; position:fixed;left:50%;top:50%;border:0;background:#ffffff;z-index:1001; width: 663px; height:419px; margin:0;} #sample_popLayer.layerPopup .popClose {position:absolute; right: 5%; top: 9%; z-index:1002;} #sample_popLayer.layerPopup .popClose button {width:27px; height:27px; border:none; background:none; cursor:pointer;} #sample_popLayer .layerPopBody {padding:30px; position: relative; z-index: 1002; background-color: #fff;} #sample_popLayer .layerPopBody h5 {padding:0 30px 5px 0; margin-bottom:15px; border-bottom:1px solid #303030; font-weight:bold; font-size:18px; color:#222222;} #sample_popLayer .layerPopBody .confirmMsg {} #sample_popLayer .layerPopBody .confirmBtn {margin-top:18px; padding-top:20px; border-top:1px solid #e5e5e5; text-align:center;} #sample_popLayer .pop_completeWrap h4{font-weight:normal; font-size:26px; color:#000; border-bottom:1px solid #000; padding-bottom:4%; margin-bottom:4%;} #sample_popLayer .pop_completeWrap .btnArea {} #sample_popLayer .pop_completeWrap .btnArea p{font-size: 32px; color: #000; line-height: 1.4; margin: 13% 0 5%; padding-bottom: 13%; border-bottom: 1px solid #ddd;} #sample_popLayer .pop_completeWrap .btnArea p.pop2_p{margin: 8% 0 5%; padding-bottom: 8%; border-bottom: 1px solid #ddd;} #sample_popLayer .pop_completeWrap .btnArea p.psub{font-size:14px; color:#666; margin-bottom:25px;} #sample_popLayer .pop_completeWrap .btnArea p.fzC{font-size:34px;} #sample_popLayer .pop_completeWrap .btnArea p strong{color:#0c5a28;} #sample_popLayer .pop_completeWrap .btnArea p .pop_caution{display:inline-block; padding-top:4%; font-size:20px; font-weight:bold; color:#0e5122;} #sample_popLayer .pop_completeWrap .btnArea p .pop_caution span{display:inline-block; margin-right:10px;} #sample_popLayer .pop_completeWrap .btnArea .p2{border-bottom:1px solid #ddd; font-size:14px; color:#000; margin-bottom:27px; padding-bottom:48px; line-height:20px;} #sample_popLayer .layerPopBody .btnType1{font-size: 13px; padding: 6px 0px; font-weight: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} #sample_popLayer .layerPopBody .btnType1.btnType2{background-color:#fff; border:1px solid #060606; color:#222;} @media screen and (max-width: 768px){ .s_cp_cont{padding:17% 0 50px;} .s_cp_cont .s_cp_box{margin: 0 5%; padding: 6% 0;} .s_cp_cont .s_cp_box .s_cp_in{margin:0 5%;} .s_cp_cont .s_cp_box .s_cp_in h2{font-size:24px;} .s_cp_cont .s_cp_box .s_cp_in .sub_text{margin-top:4%; font-size:15px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_img{margin:5% 7%;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn th{font-size:14px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn td{font-size:14px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_direct .s_cp_title{font-size:15px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_direct td{font-size:13px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_btn{margin:7% 0 3%;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_direct{margin-top:8%;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_caution p{font-size:14px;} .img_w{display:none;} .img_m{display:inline-block;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_direct dd span:last-child{width:92%;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_logo{margin-top:7%;} } @media screen and (max-width: 478px){ .s_cp_cont .s_cp_box .s_cp_in h2{font-size: 17px; letter-spacing: -0.5px;} .s_cp_cont .s_cp_box .s_cp_in .sub_text{margin-top: 6%; letter-spacing: -0.5px; font-size:14px;} .s_cp_cont .s_cp_box .s_cp_in .sub_text br{display:none;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_img{margin: 6% 3%;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn p{margin-bottom:5%;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn p span{text-align:center; width:100%;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn p span{display:block; } .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn p span:last-child{margin-left:0; margin-top:2%;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_grayBox .s_cp_gbIn p:last-child span:last-child{width:100%;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_btn .btn{padding:3% 14%; font-size:15px; width: auto;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_caution p{background-position: 0%; text-indent: -5px; font-size: 13px; line-height:0.5;} } @media screen and (max-width: 340px){ .s_cp_cont .s_cp_box .s_cp_in .sub_text{font-size:14px;} .s_cp_cont .s_cp_box .s_cp_in .s_cp_caution p{line-height:0.5;} } @media screen and (max-width: 726px){ #sample_popLayer.layerPopup{width:85%; margin:0; height:auto;} #sample_popLayer.layerPopup .popClose{top:8%;} #sample_popLayer .pop_completeWrap h4{font-size:20px;} #sample_popLayer .pop_completeWrap .btnArea p{font-size:23px;} #sample_popLayer .pop_completeWrap .btnArea p .pop_caution{font-size:15px;} #sample_popLayer .pop_completeWrap .btnArea p.pop2_p{margin:8% 0;} } @media screen and (max-width: 478px){ #sample_popLayer .pop_completeWrap h4{font-size:18px;} #sample_popLayer .pop_completeWrap .btnArea p .pop_caution{font-size:13px; line-height: 0;} #sample_popLayer .pop_completeWrap .btnArea p{font-size:16px;} #sample_popLayer .pop_completeWrap .btnArea .p2 br{display:none;} #sample_popLayer .pop_completeWrap .btnArea .p2{padding-bottom:27px;} .rejectWrap .reject_in .reject_con .reject_bt a{width:35%;} #sample_popLayer .pop_completeWrap .btnArea{margin-top:10%;} #sample_popLayer .layerPopBody .btnType1{width:75px !important;padding: 3px 0px; } #sample_popLayer .pop_completeWrap .btnArea p .pop_caution span{width:10%;} #sample_popLayer .pop_completeWrap .btnArea p.pop2_p{padding-bottom:10%;} } @media screen and (max-width: 340px){ #sample_popLayer .pop_completeWrap .btnArea p.pop2_p{padding-bottom:15%;} } @media screen and (max-width: 768px){ /* ui ux 개선 about dropdown 메뉴 */ .brandSubTab {position:relative;border-bottom:1px solid #e5e5e5} .brandSubList {overflow:hidden;} .brandSubList ul {width:800px; margin:0 auto;text-align:center;} .brandSubList ul li {display:inline-block;padding-right:0;margin-right:0;background:none;} .brandSubList ul li a {height:29px; padding:11px 19px 0;display:inline-block;line-height:1.4;font-size:13px;font-weight:bold;color:#999;} .brandSubList ul + div {display:none;} .brandLifeList ul {width:520px;} .brandCareerList ul {width:420px;} } /* 플러그인 테마 */ /* slick */ .slick-slide:focus {outline:0 none;} .slick-slide a:focus {outline:0 none;} /* 20190110 - 멤버십로그인 */ .memberWrap .loginBox .section-none{display: none;} .memberWrap .loginBox .section .msGuide{margin-top: 15px; font-size: 13px; color: #666;} .memberWrap .loginBox .logintypeChk {} .memberWrap .loginBox .logintypeChk:after {content:''; display:block; clear:both;} .memberWrap .loginBox .logintypeChk li {float:left; width:50%; padding:5px 0; text-align:center; line-height:1.4; font-size:13px; color:#666666;} .memberWrap .loginBox .logintypeChk li:first-child:nth-last-child(3), .memberWrap .loginBox .logintypeChk li:first-child:nth-last-child(3) ~ li {text-align:left;} .memberWrap .loginBox .logintypeChk li .input-radio2 {-webkit-appearance:none; width:17px; height:17px; border:1px solid #cccccc; border-radius:50%; background:#ffffff;} .memberWrap .loginBox .logintypeChk li .input-radio-on {box-shadow:0 0 0 4px #ffffff inset; background:#454b51;} /* 20190718 캐나다 회원가입 recieve부분 문구 추가 */ .add_190718{font-size:12px; color:#222222; margin-bottom: 15px;} .add_190718 a{text-decoration:underline; color:#0000ff;} @media screen and (max-width: 340px){ .add_190718{font-size:11px;} .dn340{display:none;} } /* 20190718 캐나다 팝업 */ .pop_canada{width:100%; box-shadow: 0px -7px 7px rgba(58, 48, 92, 0.1); position:fixed; left:0; bottom:0; background:#ffffff; z-index:999999999;} .pop_canada .container{width:100%; margin:0 auto; max-width:1200px; position:relative;} .pop_canada .container .padding{padding:24px 3.08% 80px; position:relative;} .pop_canada p{font-size:12px; color:#666666; float:left;} .pop_canada p span{font-size:14px; color:#444444; display:block; font-weight:bold;} .pop_canada p a{text-decoration:underline; color:#094438;} .pop_canada .btn_acc{font-size:14px; color:#ffffff; display:inline-block; background:#094438; padding:10px 20px; border-radius:2px; font-weight:bold; float: right; margin: 1% 3%; box-sizing:border-box; } .pop_canada .btn_wrap2{float: right;text-align: center;margin: 10px 32px;} .pop_canada .btn_wrap2 a{font-size:14px; color:#ffffff; display:inline-block; background:#094438; border-radius:2px; font-weight:bold; width:96px; height:32px; line-height:32px; box-sizing:border-box; border:1px solid #094438;} .pop_canada .btn_wrap2 .btn_yes{color:#094438; background:#ffffff; margin-right:5px;} .pop_canada .img_x{position: absolute; top: 18px; right: 3%;} /* 프라이버시 */ .pop_canada .privacy_canada{font-size:14px; color:#666666; margin-top:20px;} @media screen and (max-width: 960px){ .pop_canada .container .padding{padding:24px 3.08% 30px;} .pop_canada .img_x{top: 20px; right: 20px;} .pop_canada .btn_wrap{text-align:center;} .pop_canada .btn_acc{float: none; margin: 20px auto;} .pop_canada .btn_wrap2{float: none; margin: 20px auto;} .pop_canada p{float:none;} } /* 왕벚꽃 댓글 이벤트 */ .cherry_banner{margin-bottom:25px;} .cherry_banner .cherry_pc{} .cherry_banner .cherry_m{display:none;} @media screen and (max-width: 1024px){ .cherry_banner .cherry_pc{display:none;} .cherry_banner .cherry_m{display:block;} } /* 팝업추가 20200204 */ .sign200204{font-size: 13px; color: #ff0000 !important; border-bottom: 1px solid #ff0000; margin-top:10px; display:inline-block;} #signUp200204 .popBody {max-width: 480px; width: 90%;} #signUp200204_2 .popBody {max-width: 480px; width: 90%;} #signUp200204 .popWirteForm .formArea .btn {margin-top: 0; border-top: none;} #signUp200204 .popWirteForm .formArea ul li {margin-top: 45px;} @media screen and (max-width: 768px){ #signUp200204 .popWirteForm .formArea ul li {margin-top: 20px;} #signUp200204 .popBody{margin: 0 auto; } #signUp200204_2 .popBody{margin: 0 auto; } } #signUp200204_2 .popWirteForm .formArea .confirmMsgL {color: #aaaaaa;} #signUp200204_2 .popWirteForm .formArea .btn {margin-top: 0; border-top: none;} #signUp200204_2 .popWirteForm .formArea ul li .dt{width:60px;} #signUp200204_2 .popWirteForm .formArea ul li .dt .resendBtn{display:inline-block; padding: 5px; border: 1px solid #000000; color:#000000;} /* ====================================== 리뉴얼 2023-02-20 ====================================== */ .memberWrap .loginBox .greet {color:#12b560} .memberWrap .loginBox .section .forgot a {color:#12b560; border-bottom: 1px solid #12b560;} .memberWrap .loginBox .loginTab ul li.on a {border-bottom:2px solid #12b560} .productListWrap .productLNB .concerns .list li.on a {color:#12b560} .brandConceptWrap .section3_2018 .logoBi_txtBox .tit {background: #12b560;} .changePwBox .greet .hello {color:#12b560} .changePwBox .greet .hello span {color:#12b560} .changePwBox .reason {background: #fff;} /* Cookie Pop */ .pop_canada .btn_acc {background: #12b560;} .mypageContent .mypageEditWrap .mypageEditLeave .box {background: #fff;} .mypageContent .mypageEditWrap .mypageEditLeave .box .p2 {color: #222;} .brandRecyclingWrap .section2 .total span {color:#12b560} .mypageContent .mypageSummary .aboutCard.aboutCard2018 .cardFront, .mypageContent .mypageSummary .aboutCard.aboutCard2018 .cardBack { background: #12b560; } .brandRecyclingWrap .section1 .txt .box .p2 {color:#fff; opacity:0.7} .brandRecyclingWrap .section2 h4 {font-size:25px} .brandConceptWrap .section3_2018 .logoBi_txtBox .tit {display:none} .brandConceptWrap .section3_2018 .logoBi_txtBox .txt { margin-left: 0px; text-align: center; } .brandConceptWrap .section3_2018 .logoBi_txtBox { padding: 35px 20px; max-width: 818px; margin: auto; } @media screen and (max-width: 640px) { .brandConceptWrap .section3_2018 .logoBi_txtBox .txt { margin: 0 0 0 0; } }