@charset "utf-8"; /* Guide ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Point Color mint #23c3d1 blue #0095ff purple #5f71de mint:hover{background:#16b5c3;} blue:hover{background:#0084ff;} purple:hover{background:#4a60e0;} black:hover{background:#2d3546;} line:hover{background:#f1faff;} */ /* Font ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* NotoSansKR - 기본 폰트 */ @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:100; src:url('/stylesheet/front/font/NotoSansKR-Thin.eot'); src:url('/stylesheet/front/font/NotoSansKR-Thin.eot?#iefix') format('eot'), url('/stylesheet/front/font/NotoSansKR-Thin.woff') format('woff'), url('/stylesheet/front/font/NotoSansKR-Thin.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:300; src:url('/stylesheet/front/font/NotoSansKR-Light.eot'); src:url('/stylesheet/front/font/NotoSansKR-Light.eot?#iefix') format('eot'), url('/stylesheet/front/font/NotoSansKR-Light.woff') format('woff'), url('/stylesheet/front/font/NotoSansKR-Light.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; src:url('/stylesheet/front/font/NotoSansKR-Regular.eot'); src:url('/stylesheet/front/font/NotoSansKR-Regular.eot?#iefix') format('eot'), url('/stylesheet/front/font/NotoSansKR-Regular.woff') format('woff'), url('/stylesheet/front/font/NotoSansKR-Regular.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:500; src:url('/stylesheet/front/font/NotoSansKR-Medium.eot'); src:url('/stylesheet/front/font/NotoSansKR-Medium.eot?#iefix') format('eot'), url('/stylesheet/front/font/NotoSansKR-Medium.woff') format('woff'), url('/stylesheet/front/font/NotoSansKR-Medium.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:700; src:url('/stylesheet/front/font/NotoSansKR-Bold.eot'); src:url('/stylesheet/front/font/NotoSansKR-Bold.eot?#iefix') format('eot'), url('/stylesheet/front/font/NotoSansKR-Bold.woff') format('woff'), url('/stylesheet/front/font/NotoSansKR-Bold.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:900; src:url('/stylesheet/front/font/NotoSansKR-Black.eot'); src:url('/stylesheet/front/font/NotoSansKR-Black.eot?#iefix') format('eot'), url('/stylesheet/front/font/NotoSansKR-Black.woff') format('woff'), url('/stylesheet/front/font/NotoSansKR-Black.ttf') format('truetype'); } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-style: normal; } /* 에스코어드림 */ @font-face { font-family: 'SCoreDream'; font-weight: 100; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 200; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 300; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 400; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 500; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 600; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 700; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-display: swap; } /* Reset ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- reset ------------- */ *, body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0; padding:0; box-sizing:border-box; word-break:auto-phrase;} fieldset,img{border:0 none;} dl,ul,ol,menu,li{list-style:none;} blockquote, q{quotes: none;} blockquote:before, blockquote:after,q:before, q:after{content:''; content:none;} input,select,textarea,button{vertical-align:middle;} table{table-layout:fixed; border-collapse:collapse; border-spacing:0;} button{display:inline-block; vertical-align:middle; padding:0; margin:0; border:0 none; background-color:transparent; cursor:pointer; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} button:focus{outline:0;} a{color:inherit; text-decoration:none; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} a:active, a:hover{text-decoration:none;} address,caption,cite,code,dfn,em,var{font-style:normal; font-weight:normal;} img{vertical-align:middle; max-width: 100%;} caption{text-indent:-9999em; overflow:hidden; font-size:0; line-height:0;} @media (max-width: 1920px) { body,th,td,input,select,textarea,button{font-family:'SCoreDream','Malgun Gothic','Dotum',sans-serif; font-weight: 400; font-size:18px; line-height:1.5; letter-spacing: -0.025rem; color:#000;} } @media (max-width: 1920px) { body,th,td,input,select,textarea,button{font-family:'SCoreDream','Malgun Gothic','Dotum',sans-serif; font-weight: 300; font-size:14px; line-height:1.5; letter-spacing: -1px; color:#000;} } /* Layout ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #wrap {position: relative; width: 100%; overflow: hidden;} #container{} #body_temp {position: fixed; width: 100%; margin: 0 auto; left: 0; right: 0;} body.lock {overflow-y: scroll;} .inner {width: 100%; max-width: 1440px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; position: relative;} .content {padding-top: 80px; padding-bottom: 160px;} .hidden {position:absolute; top:-9999px; left:-9999px; margin:0 !important; padding:0 !important; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden;} .ellipsis {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .mt0 {margin-top: 0 !important;} .mt10 {margin-top: 10px !important;} .mt20 {margin-top: 20px !important;} .mt30 {margin-top: 30px !important;} .mb0 {margin-bottom: 0 !important;} .pt0 {padding-top: 0 !important;} @media (max-width: 1920px) { .content { padding-top: 50px; } .content.gray{ padding-top: 135px; } } @media (max-width:1280px) { .content {padding-top: 60px; padding-bottom: 120px;} } @media (max-width:992px) { .content {padding-top: 40px; padding-bottom: 80px;} .addservice-wrap {justify-self: center;} .addservice-wrap .right-area {width:100% !important; max-width:100% !important;} } @media (max-width:768px) { .addservice-wrap {justify-self: normal;} } /* GNB */ @media (min-width:993px) { #gnb {position: fixed; left: 0; right: 0; top: 0; z-index: 100; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-logo {position: absolute; left: 100px; top: 50%; z-index: 101; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-logo a {display: block; width: 100px; height: 37px; text-indent: -9999px; background: url('/images/v3/common/gnb_logo.png')no-repeat center center / 100% auto; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-wrap {display: flex; justify-content: center;} .gnb-menu {display: flex; padding: 0 60px;} .gnb-menu > li {padding: 35px 0; position: relative; flex: auto; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-menu > li > a {display: flex; align-items: center; height: 20px; padding: 0 40px; font-size: 16px; position: relative; color: #fff; font-weight: 500; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-menu > li > button {display: none;} .gnb-menu > li > a.on {color: #f00;} .gnb-menu > li > ul, .gnb-menu > li.single > .dummy {visibility: hidden; opacity: 0; position: absolute; border: solid 1px #eaeaea; border-bottom: none; width: 180px; left: 50%; margin-left: -90px; top: 100%; z-index: 100; background: #fff; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-menu > li > ul > li {position: relative; border-bottom: solid 1px #eaeaea;} .gnb-menu > li > ul > li > a {font-size: 14px; display: block; padding: 15px 20px; position: relative; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; white-space: nowrap; position: relative;} .gnb-menu > li > ul > li:hover > a {color: #0066fe;} .gnb-menu > li > ul > li > button {display: none;} .gnb-menu > li > ul > li > button + a:after {content: ''; display: block; width: 6px; height: 6px; border-top: solid 1px #333; border-right: solid 1px #333; position: absolute; right: 20px; top: 50%; margin-top: -3px; box-sizing: border-box; transform:rotate(45deg);-webkit-transform:rotate(45deg);} .gnb-menu > li > ul > li > ul, .gnb-menu > li > ul > li.single > .dummy {visibility: hidden; opacity: 0; position: absolute; border: solid 1px #eaeaea; border-bottom: none; width: 180px; left: 100%; top: 0; margin-top: -1px; z-index: 100; background: #fff; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-menu > li > ul > li > ul > li {border-bottom: solid 1px #eaeaea;} .gnb-menu > li > ul > li > ul > li > a {font-size: 14px; display: block; padding: 15px 20px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; white-space: nowrap; position: relative;} .gnb-menu > li > ul > li > ul > li > a:hover {color: #0066fe;} .gnb-right {position: absolute; right: 100px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); display: flex; align-items: center; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-user {margin-right: 30px; display: flex; align-items: center;} .gnb-user li {display: flex; align-items: center;} .gnb-user li:after {content: ''; display: block; margin: 0 15px; width: 1px; height: 12px; background: rgba(255,255,255,0.2);} .gnb-user li:last-child:after {display: none;} .gnb-user li a {display: block; font-size: 16px; color: #fff; font-weight: 500; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-admin {background: #262626; color: #fff; font-size: 13px; height: 38px; padding: 0 20px; -webkit-border-radius: 8px; rborder-radius: 8px; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-overlay {display: none;} .gnb-toggle {display: none;} #gnb.hover {background: #fff; -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);} #gnb.hover .gnb-logo a {background: url('/images/v3/common/gnb_logo_on.png')no-repeat center center / 100% auto;} #gnb.hover .gnb-menu > li > a {color: #000;} #gnb.hover .gnb-menu > li > a:hover {color: #0066fe;} #gnb.hover .gnb-user li a {color: #000;} #gnb.hover .gnb-user li:after {background: #ccc;} #gnb.on {background: #fff; -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);} #gnb.on .gnb-logo a {background: url('/images/v3/common/gnb_logo_on.png')no-repeat center center / 100% auto;} #gnb.on .gnb-menu > li > a {color: #000;} #gnb.on .gnb-menu > li > a:hover {color: #0066fe;} #gnb.on .gnb-user li a {color: #000;} #gnb.on .gnb-user li:after {background: #ccc;} #gnb.sub {background: #fff; -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);} #gnb.sub .gnb-logo a {background: url('/images/v3/common/gnb_logo_on.png')no-repeat center center / 100% auto;} #gnb.sub .gnb-menu > li > a {color: #000;} #gnb.sub .gnb-menu > li > a:hover {color: #0066fe;} #gnb.sub .gnb-user li a {color: #000;} #gnb.sub .gnb-user li:after {background: #ccc;} #gnb.hover .gnb-menu > li:hover > ul, #gnb.hover .gnb-menu > li.single:hover > .dummy {visibility: visible; opacity: 1;} #gnb.hover .gnb-menu > li > ul > li:hover > ul {visibility: visible; opacity: 1;} #gnb .gnb-menu > li > a.on + ul {visibility: visible; opacity: 1;} #gnb .gnb-menu > li > ul > li > a.on + ul {visibility: visible; opacity: 1;} #gnb.scroll {background: #fff; -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);} #gnb.scroll .gnb-logo a {background: url('/images/v3/common/gnb_logo_on.png')no-repeat center center / 100% auto;} #gnb.scroll .gnb-menu > li > a {color: #000;} #gnb.scroll .gnb-user li a {color: #000;} #gnb.scroll .gnb-user li:after {background: #ccc;} } @media all and (min-width:1501px) and (max-width:1700px) { .gnb-logo {left: 40px;} .gnb-right {right: 40px;} } @media all and (min-width:1281px) and (max-width:1500px) { .gnb-logo {left: 20px;} .gnb-right {right: 20px;} .gnb-user li a {font-size: 14px;} .gnb-wrap {padding-left: 100px; padding-right: 280px;} .gnb-menu > li {padding: 30px 0;} .gnb-menu > li > a {padding: 0 30px;} } @media all and (min-width:993px) and (max-width:1280px) { .gnb-logo {left: 20px;} .gnb-right {right: 20px;} .gnb-user {margin-right: 20px;} .gnb-user li a {font-size: 13px;} .gnb-wrap {padding-left: 100px; padding-right: 220px;} .gnb-menu > li {padding: 25px 0;} .gnb-menu > li > a {padding: 0 25px; font-size: 14px;} .gnb-menu > li > ul, .gnb-menu > li.single > .dummy {width: 150px; margin-left: -75px;} .gnb-menu > li > ul > li > a {padding: 12px 15px; font-size: 13px;} .gnb-menu > li > ul > li > button + a:after {right: 15px;} .gnb-menu > li > ul > li > ul, .gnb-menu > li > ul > li.single > .dummy {width: 150px;} .gnb-menu > li > ul > li > ul > li > a {padding: 12px 15px; font-size: 13px;} .gnb-admin {padding: 0 10px; height: 30px; font-size: 12px;} } @media (max-width:992px) { #gnb {position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: 56px; display: flex; align-items: center; justify-content: space-between;} .gnb-logo {padding-left: 16px;} .gnb-logo a {display: block; width: 100px; height: 37px; text-indent: -9999px; background: url('/images/v3/common/gnb_logo.png')no-repeat center center / 100% auto; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-wrap {position: fixed; right: -100%; top: 0; bottom: 0; width: 300px; background: #fff; z-index: 99; padding-top: 115px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} #gnb.on .gnb-wrap {right: 0;} .gnb-toggle {display: block; width: 56px; height: 56px; background: none; text-indent: -9999px; padding: 18px 15px; position: relative; z-index: 102;} .gnb-toggle span, .gnb-toggle:before, .gnb-toggle:after {content: ''; display: block; height: 2px; background: #fff; margin-bottom: 6px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-toggle:after {margin-bottom: 0;} .gnb-toggle.on:before {margin-left:0px; transform:rotate(45deg);-webkit-transform:rotate(45deg); background: #000;} .gnb-toggle.on span {opacity:0;} .gnb-toggle.on:after {margin-top:-16px; margin-left:0px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg); background: #000;} .gnb-menu {height: 100%; padding: 0 15px; overflow-y: auto;} .gnb-menu > li {position: relative; border-bottom: solid 1px rgba(0,0,0,0.1);} .gnb-menu > li:first-child {border-top: solid 1px rgba(0,0,0,0.1);} .gnb-menu > li > a {display: none;} .gnb-menu > li > a.only, .gnb-menu > li > button {display: block; width: 100%; text-align: left; height: 50px; line-height: 50px; padding: 0 15px; font-size: 14px; background: none; position: relative;} .gnb-menu > li > button:before, .gnb-menu > li > button:after {content: ''; display: block; background: #000; width: 12px; height: 2px; position: absolute; right: 15px; top: 50%; margin-top: -1px;} .gnb-menu > li > button:after {transform: rotate(90deg); -webkit-transform: rotate(90deg);} .gnb-menu > li > button.open {background: #f5f5f5;} .gnb-menu > li > button.open:after {display: none;} .gnb-menu > li > button.open ~ ul {display: block;} .gnb-menu > li > ul {background: #f5f5f5; height: auto !important; display: none; padding: 0 15px 15px;} .gnb-menu > li > ul > li {margin-bottom: 6px;} .gnb-menu > li > ul > li:last-child {margin-bottom: 0;} .gnb-menu > li > ul > li > a {display: none; align-items: center; font-size: 13px; color: #444; font-weight: 300;} .gnb-menu > li > ul > li > a:before {content: ''; display: block; width: 4px; height: 1px; background: #444; margin-right: 5px;} .gnb-menu > li > ul > li > a.only {display: flex;} .gnb-menu > li > ul > li > button {font-size: 13px; padding: 4px 0; font-weight: 300; display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: none;} .gnb-menu > li > ul > li > button:after {content: ''; display: block; flex-shrink: 0; width: 5px; height: 5px; margin-right: 3px; border-right: solid 1px #444; border-bottom: solid 1px #444; margin-top: -3px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .gnb-menu > li > ul > li > button.open:after {margin-top: 2px; transform: rotate(225deg); -webkit-transform: rotate(225deg);} .gnb-menu > li > ul > li > button.open ~ ul {display: block;} .gnb-menu > li > ul > li > ul {padding: 10px; height: auto !important; display: none; border-top: solid 1px rgba(0,0,0,0.1); border-bottom: solid 1px rgba(0,0,0,0.1);} .gnb-menu > li > ul > li > ul > li {margin-bottom: 6px;} .gnb-menu > li > ul > li > ul > li:last-child {margin-bottom: 0;} .gnb-menu > li > ul > li > ul > li > a {display: flex; align-items: center; font-size: 13px; color: #444; font-weight: 300;} .gnb-menu > li > ul > li > ul > li > a:before {content: ''; display: block; width: 4px; height: 1px; background: #444; margin-right: 5px;} .gnb-overlay {visibility: hidden; opacity: 0; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 98; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} #gnb.on .gnb-overlay {visibility: visible; opacity: 1;} .gnb-user {position: absolute; left: 0; top: 0; height: 56px; padding: 0 20px; display: flex; align-items: center;} .gnb-user li {display: flex; align-items: center;} .gnb-user li:after {content: ''; display: block; margin: 0 15px; width: 1px; height: 12px; background: rgba(0,0,0,0.2);} .gnb-user li:last-child:after {display: none;} .gnb-user li a {display: block; font-size: 13px;} .gnb-admin {background: #0095ff; color: #fff; font-size: 13px; height: 40px; position: absolute; left: 15px; right: 15px; top: 56px; -webkit-border-radius: 4px; rborder-radius: 4px; display: flex; align-items: center; justify-content: center;} #gnb.scroll {background: #fff; -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);} #gnb.scroll .gnb-logo a {background: url('/images/v3/common/gnb_logo_on.png')no-repeat center center / 100% auto;} #gnb.scroll .gnb-toggle span, #gnb.scroll .gnb-toggle:before, #gnb.scroll .gnb-toggle:after {background: #000;} #gnb.sub {background: #fff; -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);} #gnb.sub .gnb-logo a {background: url('/images/v3/common/gnb_logo_on.png')no-repeat center center / 100% auto;} #gnb.sub .gnb-toggle span, #gnb.sub .gnb-toggle:before, #gnb.sub .gnb-toggle:after {background: #000;} } /* Banner ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .main-top {position: relative;} .main-slider {background: #000;} .main-slider .slick-track {} /* .main-slider .slick-slide {opacity: 1 !important;} */ /* .main-slider .slick-slide {transition: opacity 2000ms !important;} */ .main-slider__item {height: 100vh !important; position: relative; display: flex !important; align-items: center;} .main-slider__bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .main-slider__txt {position: relative; color: #fff;} .main-slider__txt h5 {opacity: 0; font-weight: 300; font-size: 64px; line-height: 1.3;} .main-slider__txt h5 strong {font-weight: 700;} .main-slider__txt p {opacity: 0; font-size: 22px; margin-top: 20px;} .main-slider__txt a {opacity: 0; padding: 0 40px; height: 52px; background: #262626; color: #fff; font-size: 16px; font-weight: 400; margin-top: 60px; -webkit-border-radius: 40px; rborder-radius: 40px; display: inline-flex; align-items: center; justify-content: center;} .main-slider .slick-active .main-slider__bg {animation: slideSize 4s 0s forwards ease-in-out alternate;} /* .main-slider .slick-active .main-slider__bg {animation-name: clipPathLeft; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 1s; animation-fill-mode: forwards;} .main-slider .slick-active .main-slider__bg > div {animation-name: leftFade; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 1.3s; animation-fill-mode: forwards;} */ .main-slider .slick-active .main-slider__txt h5 {animation: fadeInLeft 1s 0s forwards cubic-bezier(0.4, 0, 0.2, 1) alternate;} .main-slider .slick-active .main-slider__txt p {animation: fadeInRight 1s 0s forwards cubic-bezier(0.4, 0, 0.2, 1) alternate;} .main-slider .slick-active .main-slider__txt a {animation: fadeInRight 1s 0.2s forwards cubic-bezier(0.4, 0, 0.2, 1) alternate;} .main-slider__control {position: absolute; left: 0; right: 0; top: 50%; margin-top: 260px;} .main-slider__control .inner {display: flex; align-items: center;} .main-slider__arrows {display: flex;} .main-slider__arrows button {display: block; width: 20px; height: 20px; background: none; border: none; text-indent: -9999px; position: relative;} .main-slider__arrows button.slick-prev {margin-right: 10px;} .main-slider__arrows button:after {content: ''; display: block; width: 10px; height: 10px; position: absolute; left: 50%; top: 50%; margin-top: -5px; border-top: solid 1px #fff;} .main-slider__arrows button.slick-prev:after {margin-left: -2px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); border-left: solid 1px #fff;} .main-slider__arrows button.slick-next:after {margin-left: -8px; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-right: solid 1px #fff;} .main-slider__dots {} .main-slider__dots .slick-dots {display: flex;} .main-slider__dots .slick-dots li {display: flex; align-items: center; position: relative; margin-right: 20px;} .main-slider__dots .slick-dots li:before, .main-slider__dots .slick-dots li:after {content: ''; display: none; position: absolute; left: 40px; top: 50%; margin-top: -1px; height: 2px;} .main-slider__dots .slick-dots li:before {width: 100px; background: rgba(255,255,255,0.2);} .main-slider__dots .slick-dots li:after {background: #fff; width: 0;} .main-slider__dots .slick-dots li button {width: 20px; height: 20px; font-size: 14px; display: flex; align-items: center; background: none; color: #fff; border: none; font-family: "Inter", sans-serif; font-weight: 300; letter-spacing: 0rem;} .main-slider__dots .slick-dots li button::before {content: "0";} .main-slider__dots .slick-dots li:nth-child(n + 10) button::before {content: none;} .main-slider__dots .slick-dots li.slick-active {padding-right: 120px;} .main-slider__dots .slick-dots li.slick-active:before, .main-slider__dots .slick-dots li.slick-active:after {display: block;} .main-slider__dots .slick-dots li.slick-active:after {animation: slickPrgrs 4s both;} .main-slider__puase {display: block; width: 16px; height: 16px; background: none; text-indent: -9999px; position: relative; margin-left: 16px;} .main-slider__puase:before, .main-slider__puase:after {content: ''; display: block; width: 2px; height: 12px; background: #fff; position: absolute; top: 50%; margin-top: -6px;} .main-slider__puase:before {right: 50%; margin-right: 2px;} .main-slider__puase:after {left: 50%; margin-left: 2px;} .main-slider__puase.play:before {display: none;} .main-slider__puase.play:after {width: 0px; height: 0px; margin-left: -4px; background: none; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #fff; transform: rotate(0deg);} @keyframes slickPrgrs {0% {width: 0;} 100% {width: 100px;}} @media only screen and (max-width:1280px) { .main-slider__txt h5 {font-size: 56px;} .main-slider__txt p {font-size: 20px;} .main-slider__txt a {margin-top: 40px;} } @media only screen and (max-width:992px) { .main-slider__txt h5 {font-size: 42px;} .main-slider__txt p {font-size: 18px; margin-top: 10px;} .main-slider__txt a {margin-top: 30px;} } @media only screen and (max-width:768px) { .main-slider__txt h5 {font-size: 28px;} .main-slider__txt p {font-size: 14px;} .main-slider__txt a {margin-top: 20px; padding: 0 20px; height: 40px; font-size: 13px;} .main-slider__arrows button {width: 16px; height: 16px;} .main-slider__arrows button.slick-prev {margin-right: 8px;} .main-slider__arrows button:after {width: 8px; height: 8px; margin-top: -4px;} .main-slider__dots .slick-dots li {margin-right: 8px;} .main-slider__dots .slick-dots li:before, .main-slider__dots .slick-dots li:after {left: 20px;} .main-slider__dots .slick-dots li:before {width: 40px;} .main-slider__dots .slick-dots li.slick-active {padding-right: 50px;} .main-slider__dots .slick-dots li button {width: 15px; height: 15px; font-size: 12px;} .main-slider__puase {width: 16px; height: 16px; margin-left: 8px;} .main-slider__puase:before, .main-slider__puase:after {width: 2px; height: 12px; margin-top: -6px;} .main-slider__puase:before {margin-right: 2px;} .main-slider__puase:after {margin-left: 2px;} .main-slider__puase.play:after {width: 0px; height: 0px; margin-left: -4px; background: none; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #fff; transform: rotate(0deg);} @keyframes slickPrgrs {0% {width: 0;} 100% {width: 40px;}} } @keyframes slideSize { 0% {background-size: auto 140% ;} 100% {background-size: auto 120%;} } @keyframes clipPathLeft { 0% {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);} } @keyframes clipPathright { 0% {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);} } @keyframes fadeInLeft { 0% {opacity: 0; transform: translateX(-20px);} 100% {opacity: 1; transform: translateX(0);} } @keyframes fadeInRight { 0% {opacity: 0; transform: translateX(20px);} 100% {opacity: 1; transform: translateX(0);} } @keyframes fadeInUp { 0% {opacity: 0; transform: translateY(20px);} 100% {opacity: 1; transform: translateY(0);} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } /* Main ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .main-title {text-align: center;} .main-title h3 {font-size: 52px; font-weight: 700;} .main-title p {font-size: 22px; font-weight: 500; color: #555; margin-top: 10px;} .main-mall {padding-top: 140px;} .main-mall__wrap {margin-top: 60px; display: flex; align-items: center;} .main-mall__slider {width: 48%; padding-left: 40px; order: 1;} .main-mall__slider .slick-slide img {display: block; margin: 0 auto;} .main-mall__nav {width: 52%;} .main-mall__nav .slick-list, .main-mall__nav .slick-track {height: auto !important;} .main-mall__nav .slick-list {overflow: visible;} .main-mall__nav .slick-track {transform: translate3d(0px, 0px, 0px) !important;} .main-mall__item {border: none !important; cursor: pointer;} .main-mall__item dl {padding: 0 40px; border-bottom: solid 1px #ECECEC; background: #fff; display: flex; align-items: center; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .main-mall__item dl dt {display: flex; align-items: center; flex-shrink: 0; margin-right: 24px;} .main-mall__item dl dt em {opacity: 0; display: block; width: 6px; height: 102px; margin-right: 24px; background: #F2F2F2; position: relative; overflow: hidden; -webkit-border-radius: 3px; border-radius: 3px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .main-mall__item dl dt em:before {content: ''; display: none; width: 6px; background: #D5D5D5; position: absolute; left: 0; top: 0;} .main-mall__item.slick-current em:before {display: block; animation: slickPrgrs2 3s both;} .main-mall__item dl dt span {display: block; width: 30px; height: 30px; background: #ddd; -webkit-border-radius: 10px; border-radius: 10px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .main-mall__item dl dt span.ico1 {background: url('/images/v3/main/main_mall_ico_1.png')no-repeat center center / 30px auto;} .main-mall__item dl dt span.ico2 {background: url('/images/v3/main/main_mall_ico_2.png')no-repeat center center / 30px auto;} .main-mall__item dl dt span.ico3 {background: url('/images/v3/main/main_mall_ico_3.png')no-repeat center center / 30px auto;} .main-mall__item dl dt span.ico4 {background: url('/images/v3/main/main_mall_ico_4.png')no-repeat center center / 30px auto;} .main-mall__item dl dd {flex-grow: 1;} .main-mall__item dl dd h5 {font-size: 28px; font-weight: 500; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .main-mall__item dl dd p {font-size: 16px; font-weight: 300; margin-top: 10px; display: none;} .main-mall__item dl dd a {font-size: 14px; display: none; color: #3056FB; align-items: center; margin-top: 10px;} .main-mall__item dl dd a:after {content: ''; display: block; width: 4px; height: 4px; margin-left: 8px; border-top: solid 1px #3056FB; border-right: solid 1px #3056FB; transform:rotate(45deg);-webkit-transform:rotate(45deg);} .main-mall__item.slick-current {position: relative; z-index: 2;} .main-mall__item.slick-current dl {padding: 50px; margin: -2px -10px; border-bottom-color: #fff; box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.08); -webkit-border-radius: 20px; border-radius: 20px;} .main-mall__item.slick-current dl dt {} .main-mall__item.slick-current dl dt em {opacity: 1;} .main-mall__item.slick-current dl dt span {width: 80px; height: 80px; box-shadow: 0px 15px 15px 0px rgba(25, 84, 219, 0.2);} .main-mall__item.slick-current dl dt span.ico1 {background: #1954DB url('/images/v3/main/main_mall_ico_1_on.png')no-repeat center center / 40px auto;} .main-mall__item.slick-current dl dt span.ico2 {background: #1954DB url('/images/v3/main/main_mall_ico_2_on.png')no-repeat center center / 40px auto;} .main-mall__item.slick-current dl dt span.ico3 {background: #1954DB url('/images/v3/main/main_mall_ico_3_on.png')no-repeat center center / 40px auto;} .main-mall__item.slick-current dl dt span.ico4 {background: #1954DB url('/images/v3/main/main_mall_ico_4_on.png')no-repeat center center / 40px auto;} .main-mall__item.slick-current dl dd h5 {font-size: 32px; font-weight: 700;} .main-mall__item.slick-current dl dd p {display: block;} .main-mall__item.slick-current dl dd a {display: inline-flex;} @keyframes slickPrgrs2 {0% {height: 0;} 100% {height: 100%;}} .main-brand {padding-top: 180px; padding-bottom: 140px;} .main-brand__slider {margin-top: 60px; padding: 0 15px;} .main-brand__slider .slick-list {overflow: visible;} .main-brand__item {padding: 0 15px;} .main-brand__item a {display: block; position: relative; overflow: hidden; -webkit-border-radius: 20px; border-radius: 20px;} .main-brand__item img {display: block; width: 100%;} .main-brand__item h5 {font-size: 24px; color: #fff; font-weight: 500; position: absolute; left: 20px; bottom: 20px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .main-brand__item span {background: #fff; height: 50px; padding: 0 20px; font-weight: 500; opacity: 0; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 8px; border-radius: 8px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25); transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .main-brand__item a:before {content: ''; opacity: 0; display: block; background: rgba(221,120,51,0.8); position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .main-brand__item:hover a:before {opacity: 1;} .main-brand__item:hover h5 {opacity: 0;} .main-brand__item:hover span {opacity: 1;} .main-free { } .main-free a {aspect-ratio: 1905 / 340; width:100%; background: #E0EDFE; display: flex; align-items: center;} .main-free dl {padding: 0 100px; display: flex; align-items: center; justify-content: space-between;} .main-free dl dt {order: 2; max-width: 40%; flex-shrink: 0;} .main-free dl dt img {display: block; margin: -10px 0; height: 360px; width: auto; max-width: none;} .main-free dl dd h4 {font-size: 35px; font-weight: 300; line-height: 1.4;} .main-free dl dd h4 span {color: #094CCA; font-weight: 700;} .main-free dl dd p {height: 58px; background: #262626; color: #fff; font-size: 16px; font-weight: 500; position: relative; padding: 0 30px; margin-top: 20px; -webkit-border-radius: 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;} .main-free dl dd p:after {content: ''; display: block; width: 10px; height: 1px; background: #fff; margin-left: 10px;} .main-free dl dd p:before {content: ''; display: block; width: 6px; height: 6px; margin-left: 8px; position: absolute; right: 30px; top: 50%; margin-top: -4px; border-top: solid 1px #fff; border-right: solid 1px #fff; transform:rotate(45deg);-webkit-transform:rotate(45deg);} .main-free a img{width: 100%;height: 100%;object-fit: fill;display: block;} .main-add {padding-top: 140px;} .main-add__list {display: flex; margin: 0 -10px; padding-top: 60px;} .main-add__list li {width: 20%; padding: 0 10px;} .main-add__list li a {display: block; overflow: hidden; -webkit-border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;} .main-add__list li a img {display: block;} .main-add__list li a h5 {height: 100px; font-size: 24px; font-weight: 500; line-height: 1.3; text-align: center; border: solid 1px #ddd; border-top: none; -webkit-border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px; display: flex; align-items: center; justify-content: center;} .main-add__list li a h5 br {display: none;} .main-add__more {margin-top: 80px; display: flex; justify-content: center;} .main-add__more a {height: 58px; border: solid 1px #555; font-size: 16px; font-weight: 500; position: relative; padding: 0 30px; -webkit-border-radius: 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;} .main-cs {padding-top: 140px; padding-bottom: 160px;} .main-cs__wrap {display: flex; margin: 0 -10px;} .main-cs__wrap > div {padding: 0 10px;} .main-cs__wrap > div:first-child {width: 65%;} .main-cs__wrap > div:last-child {width: 35%;} .main-cs__info {height: 100%; padding: 60px 50px; background: #F6F8FA; display: flex; align-items: flex-start; -webkit-border-radius: 20px; border-radius: 20px;} .main-cs__info dt {font-size: 34px; margin-right: 20px; font-weight: 500; flex-shrink: 0; display: flex; align-items: flex-start;} .main-cs__info dt:before {content: ''; display: block; width: 118px; height: 118px; margin-right: 20px; flex-shrink: 0; background: #fff url('/images/v3/main/main_cs.png')no-repeat center center / auto 80px; -webkit-border-radius: 20px; border-radius: 20px; box-shadow:0 15px 15px 0 rgba(0,0,0,0.08);} .main-cs__info dd {flex-grow: 1;} .main-cs__info dd h5 {font-size: 44px; font-weight: 700; line-height: 1.2;} .main-cs__info dd h6 {font-size: 18px; font-weight: 400; margin-top: 10px;} .main-cs__info dd h6 br {display: none;} .main-cs__info p {font-size: 16px; color: #777; margin-top: 5px;} .main-cs__help {height: 100%; background: #E6F8FF; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-border-radius: 20px; border-radius: 20px;} .main-cs__help:before {content: ''; display: block; width: 66px; height: 47px; margin-bottom: 20px; background: url('/images/v3/main/main_help.png')no-repeat center center / auto 100%;} .main-cs__help h5 {font-size: 30px; font-weight: 600;} .main-cs__help a {font-size: 14px; display: flex; color: #333; align-items: center; margin-top: 10px;} .main-cs__help a:after {content: ''; display: block; width: 4px; height: 4px; margin-left: 8px; border-top: solid 1px #333; border-right: solid 1px #333; transform:rotate(45deg);-webkit-transform:rotate(45deg);} @media only screen and (max-width:1480px) { .main-title h3 {font-size: 48px;} .main-title p {font-size: 20px;} .main-mall {padding-top: 120px;} .main-mall__item dl {padding: 0 30px;} .main-mall__item dl dd h5 {font-size: 24px;} .main-mall__item.slick-current dl {padding: 30px;} .main-mall__item.slick-current dl dt span {width: 70px; height: 70px;} .main-mall__item.slick-current dl dd h5 {font-size: 28px;} .main-brand {padding-top: 120px; padding-bottom: 120px;} .main-free dl {padding: 0 40px;} .main-add {padding-top: 120px;} .main-add__list li a h5 {font-size: 20px; height: 80px;} .main-add__more {margin-top: 40px;} .main-cs {padding-top: 120px; padding-bottom: 120px;} .main-cs__info {padding: 50px 40px;} .main-cs__info dt {font-size: 30px;} .main-cs__info dt:before {width: 96px; height: 96px; background-size: auto 60px;} .main-cs__info dd h5 {font-size: 40px;} .main-cs__info dd h6 {font-size: 16px;} .main-cs__info p {font-size: 14px;} .main-cs__help h5 {font-size: 24px;} } @media only screen and (max-width:1280px) { .main-title h3 {font-size: 40px;} .main-title p {font-size: 18px;} .main-mall {padding-top: 100px;} .main-mall__wrap {margin-top: 60px;} .main-mall__item dl {padding: 0 20px;} .main-mall__item dl dt {margin-right: 16px;} .main-mall__item dl dt em {width: 4px; height: 64px; margin-right: 16px;} .main-mall__item dl dd h5 {font-size: 18px;} .main-mall__item dl dd p {font-size: 14px; margin-top: 5px;} .main-mall__item.slick-current dl {padding: 20px;} .main-mall__item.slick-current dl dt span {width: 50px; height: 50px;} .main-mall__item.slick-current dl dd h5 {font-size: 22px;} .main-brand {padding-top: 100px; padding-bottom: 100px;} .main-brand__slider {margin-top: 40px; padding: 0 10px;} .main-brand__item {padding: 0 10px;} .main-brand__item h5 {font-size: 20px; left: 16px; bottom: 16px;} .main-brand__item span {height: 40px; padding: 0 16px; font-size: 14px;} .main-free a {} .main-free dl {padding: 0;} .main-free dl dt img {height: 320px;} .main-free dl dd h4 {font-size: 30px;} .main-free dl dd p {height: 48px; font-size: 14px; padding: 0 20px;} .main-free dl dd p:before {right: 20px;} .main-add {padding-top: 100px;} .main-add__list {margin: 0 -5px; padding-top: 40px;} .main-add__list li {padding: 0 5px;} .main-add__list li a h5 {font-size: 16px; height: 60px;} .main-add__more a {height: 48px; font-size: 14px; padding: 0 20px;} .main-cs {padding-top: 100px; padding-bottom: 100px;} .main-cs__info {padding: 30px; display: block;} .main-cs__info dt {font-size: 26px; align-items: center;} .main-cs__info dt:before {width: 80px; height: 80px; background-size: auto 48px; -webkit-border-radius: 10px; border-radius: 10px;} .main-cs__info dd {margin-top: 20px;} .main-cs__info dd h5 {font-size: 34px;} } @media only screen and (max-width:992px) { .main-title h3 {font-size: 34px;} .main-title p {font-size: 16px;} .main-mall {padding-top: 80px;} .main-mall__wrap {margin-top: 40px; display: block;} .main-mall__slider {width: 100%; padding-left: 20%; padding-right: 20%;} .main-mall__nav {width: 100%;} .main-brand {padding-top: 80px; padding-bottom: 80px;} .main-brand__slider {margin-top: 30px; padding: 0 5px;} .main-brand__item {padding: 0 5px;} .main-brand__item h5 {font-size: 16px;} .main-brand__item span {height: 32px; padding: 0 12px; font-size: 13px;} .main-free a {} .main-free dl dt img {height: 260px;} .main-free dl dd h4 {font-size: 26px;} .main-free dl dd p {height: 40px; font-size: 13px; padding: 0 16px; margin-top: 10px;} .main-free dl dd p:before {right: 16px;} .main-add {padding-top: 80px;} .main-add__list {padding-top: 30px;} .main-add__list li a {-webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;} .main-add__list li a h5 {font-size: 14px; height: 48px; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;} .main-add__more {margin-top: 30px;} .main-add__more a {height: 40px; font-size: 13px; padding: 0 16px;} .main-cs {padding-top: 80px; padding-bottom: 80px; margin: 0 -5px;} .main-cs__wrap > div {padding: 0 5px;} .main-cs__wrap > div:first-child {width: 60%;} .main-cs__wrap > div:last-child {width: 40%;} .main-cs__info dt {font-size: 22px;} .main-cs__info dt:before {width: 60px; height: 60px; margin-right: 16px; background-size: auto 40px;} .main-cs__info dd h5 {font-size: 30px;} .main-cs__info dd h6 {font-size: 14px;} .main-cs__info p {font-size: 13px;} } @media only screen and (max-width:768px) { .main-title h3 {font-size: 24px;} .main-title p {font-size: 14px; margin-top: 5px;} .main-mall {padding-top: 64px;} .main-mall__wrap {margin-top: 30px;} .main-mall__nav {margin-top: 30px;} .main-mall__item dl {padding: 15px 20px;} .main-mall__item dl dt {margin-right: 16px;} .main-mall__item dl dt em {display: none;} .main-mall__item dl dt span {width: 20px; height: 20px; background-size: 20px auto !important;} .main-mall__item dl dd h5 {font-size: 15px;} .main-mall__item dl dd p {font-size: 13px;} .main-mall__item dl dd a {font-size: 12px;} .main-mall__item.slick-current dl {padding: 25px 30px;} .main-mall__item.slick-current dl dt {display: none;} .main-mall__item.slick-current dl dd h5 {font-size: 18px;} .main-brand {padding-top: 64px; padding-bottom: 64px;} .main-brand__slider {margin-top: 20px; padding: 0 10px; padding-right: 20%;} .main-brand__item {padding: 0 10px; opacity: 1;} .main-brand__item a {-webkit-border-radius: 15px; border-radius: 15px;} .main-brand__item a:before {display: none;} .main-brand__item span {display: none;} .main-free a {} .main-free dl {display: block;} .main-free dl dt {max-width: 100%; padding-left: 15%; padding-right: 10%;} .main-free dl dt img {height: auto; margin: 0; max-width: 100%;} .main-free dl dd {margin-top: 20px; text-align: center;} .main-free dl dd h4 {font-size: 20px;} .main-free dl dd p {margin-top: 20px;} .main-add {padding-top: 64px;} .main-add__list {margin: -5px; padding-top: 20px; flex-wrap: wrap; justify-content: center;} .main-add__list li {width: 33.3333%; padding: 5px;} .main-add__list li a h5 {font-size: 13px; height: 48px;} .main-add__list li a h5 br {display: block;} .main-add__more {margin-top: 20px;} .main-cs {padding-top: 64px; padding-bottom: 64px;} .main-cs__wrap {display: block; margin: 0;} .main-cs__wrap > div {padding: 0;} .main-cs__wrap > div:first-child {width: 100%;} .main-cs__wrap > div:last-child {width: 100%; margin-top: 10px;} .main-cs__info {padding: 20px;} .main-cs__info dt {font-size: 20px;} .main-cs__info dt:before {width: 48px; height: 48px; margin-right: 12px; background-size: auto 32px;} .main-cs__info dd h5 {font-size: 24px;} .main-cs__info dd h6 {font-size: 12px;} .main-cs__info p {font-size: 12px;} .main-cs__help {padding: 20px;} .main-cs__help:before {width: 66px; height: 40px; margin-bottom: 16px;} .main-cs__help h5 {font-size: 20px;} .main-cs__help a {font-size: 13px;} } /* Footer ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .bot-menu {padding: 80px 0; border-top: solid 1px #E6E6E6;} .bot-menu__list {display: flex; flex-wrap: wrap;} .bot-menu__list li {width: 16.6666%;} .bot-menu__list li dl dt {font-size: 22px; font-weight: 600; margin-bottom: 15px;} .bot-menu__list li dl dd {margin-bottom: 10px;} .bot-menu__list li dl dd:last-child {margin-bottom: 0;} .bot-menu__list li dl dd a {font-weight: 300; display: block;} .ft {padding: 80px 0; background: #181F29;} .ft-menu {display: flex; align-items: center; justify-content: center; flex-wrap: wrap;} .ft-menu li {display: flex; align-items: center;} .ft-menu li:after {content: ''; display: block; margin: 0 60px; width: 1px; height: 10px; background: rgba(255,255,255,0.1);} .ft-menu li:last-child:after {display: none;} .ft-menu li a {display: block; font-size: 18px; font-weight: 500; color: #fff;} .ft-info {margin: -2px 0; padding-top: 40px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;} .ft-info li {margin: 2px 15px; font-size: 14px; color: rgba(255,255,255,0.8); font-weight: 300; display: flex;} .ft-info li strong {font-weight: 300; color: rgba(255,255,255,0.3); margin-right: 8px; flex-shrink: 0;} .ft-copy {margin-top: 20px; font-weight: 300; text-align: center; letter-spacing: 0.025rem; color: rgba(255,255,255,0.2); font-size: 12px;} @media only screen and (max-width:1280px) { .bot-menu {padding: 60px 0;} .bot-menu__list li dl dt {font-size: 18px; margin-bottom: 10px;} .bot-menu__list li dl dd {margin-bottom: 5px;} .bot-menu__list li dl dd a {font-size: 14px;} .ft {padding: 60px 0;} .ft-menu li:after {margin: 0 30px;} .ft-menu li a {font-size: 16px;} .ft-info {padding-top: 30px;} .ft-info li {margin: 2px 10px; font-size: 13px;} } @media only screen and (max-width:992px) { .bot-menu {padding: 40px 0;} .bot-menu__list li dl dt {font-size: 16px; margin-bottom: 5px;} .bot-menu__list li dl dd a {font-size: 13px;} .ft {padding: 40px 0;} .ft-menu li:after {margin: 0 10px;} .ft-menu li a {font-size: 14px;} .ft-info {padding-top: 20px;} .ft-info li {font-size: 12px;} } @media only screen and (max-width:768px) { .bot-menu {padding: 20px 0;} .bot-menu__list li {width: 33.3333%; padding: 10px 0;} .bot-menu__list li dl dt {font-size: 14px;} .bot-menu__list li dl dd {margin-bottom: 2px;} .bot-menu__list li dl dd a {font-size: 12px;} .ft {padding: 30px 0;} .ft-menu {justify-content: flex-start;} .ft-menu li {padding: 2px 0;} .ft-menu li a {font-size: 13px;} .ft-info {display: block;} .ft-info li {font-size: 12px; margin: 0; margin-bottom: 4px;} .ft-info li:last-child {margin-bottom: 0;} .ft-info li strong {width: 90px;} .ft-copy {text-align: left; font-size: 11px;} } /* Quick menu ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .quick-menu {position: fixed; right: 40px; bottom: 60px; z-index: 90;} .quick-menu ul li {margin-bottom: 10px;} .quick-menu ul li:last-child {margin-bottom: 0;} .quick-menu ul li a {width: 76px; height: 76px; font-size: 0px; color: #fff; text-align: center; position: relative; background: rgba(0,0,0,0.6); -webkit-border-radius: 50%; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .quick-menu ul li a:after {content: ''; display: block; width: 31px; height: 31px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .quick-menu ul li:nth-child(1) a:after {background: url('/images/v3/common/quick_1.png')no-repeat center center / cover;} .quick-menu ul li:nth-child(2) a:after {background: url('/images/v3/common/quick_2.png')no-repeat center center / cover;} .quick-menu ul li:nth-child(3) a:after {background: url('/images/v3/common/quick_3.png')no-repeat center center / cover;} .quick-menu ul li:nth-child(4) a:after, .quick-menu ul li:nth-child(5) a:after {background: url('/images/v3/common/quick_4.png')no-repeat center center / cover;} .quick-menu ul li a.scr-bot:after {} .quick-menu ul li a.scr-top:after {transform: translate(-50%, -50%) rotate(180deg); -webkit-transform: translate(-50%, -50%) rotate(180deg);} .quick-menu ul li a:hover {font-size: 11px; background: #1954DB;} .quick-menu ul li a:hover:after {opacity: 0;} .quick-menu ul li a.scr-bot:hover, .quick-menu ul li a.scr-top:hover {font-size: 0;} .quick-menu ul li a.scr-bot:hover:after, .quick-menu ul li a.scr-top:hover:after {opacity: 1;} @media only screen and (max-width:1280px) { .quick-menu {right: 30px; bottom: 30px;} .quick-menu ul li {margin-bottom: 8px;} .quick-menu ul li a {width: 64px; height: 64px;} .quick-menu ul li a:after {width: 26px; height: 26px;} .quick-menu ul li a:hover {font-size: 10px;} } @media only screen and (max-width:992px) { .quick-menu {right: 20px; bottom: 20px;} .quick-menu ul li {margin-bottom: 4px;} .quick-menu ul li a {width: 56px; height: 56px;} .quick-menu ul li a:after {width: 22px; height: 22px;} } @media only screen and (max-width:768px) { .quick-menu {right: 10px; bottom: 10px;} .quick-menu ul li a {width: 40px; height: 40px;} .quick-menu ul li a:after {width: 18px; height: 18px;} .quick-menu ul li a:hover {font-size: 0px;} .quick-menu ul li a:hover:after {opacity: 1;} } /* Form - style ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- input ------------- */ input{-webkit-appearance:none; -moz-appearance:none; appearance:none;} input::-ms-clear{display:none;} input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; -moz-appearance:none;appearance:none;} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; -moz-appearance:none; appearance:none;} input[type=number]{-moz-appearance:textfield;} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{-webkit-box-shadow: 0 0 0 30px #fff inset !important; -webkit-text-fill-color:#555 !important;} input[type="text"], input[type="password"], input[type="number"] {outline:none; display: block; width: 100%; padding: 0 20px; height: 60px; font-size: 16px; background: #fff; border: 1px solid #ddd; border-radius: 8px;} input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder {color: #999; font-weight: 300;} /* ------------- select ------------- */ select {-webkit-appearance:none; -moz-appearance:none; appearance:none;} select::-ms-expand{display:none;} select{display: block; padding:0 31px 0 12px; height:40px; font-size:16px; font-weight:300; background:#fff url('/images/v2/common/select_arrow.png') no-repeat right 12px center; border:1px solid #ddd; border-radius:5px;} select{padding:0 0 0 10px \0/IE9;} /* ------------- checkbox ------------- */ input[type="checkbox"] {-webkit-appearance:none; -moz-appearance:none; appearance:none;} input[type="checkbox"] {display: inline-block; vertical-align: middle; width: 26px; height: 26px; cursor: pointer; border: solid 1px #ddd; position: relative; -webkit-border-radius: 4px; border-radius: 4px;} input[type="checkbox"] + label {display: inline-block; vertical-align: middle; font-size: 14px; margin-left: 10px; cursor: pointer;} input[type="checkbox"]:checked {background: #1954DB; border-color: #1954DB;} input[type="checkbox"]:checked:after {content: ''; display: block; width: 6px; height: 12px; border-right: solid 2px #fff; border-bottom: solid 2px #fff; box-sizing: border-box; position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -7px; transform:rotate(45deg);} /* ------------- ridio ------------- */ input[type="radio"] {display: inline-block; vertical-align: middle; position: relative; width: 26px; height: 26px; border: solid 1px #ddd; position: relative; cursor: pointer; -webkit-border-radius: 50%; border-radius: 50%;} input[type="radio"]:after {content: ''; display: block; width: 10px; height: 10px; background: #ddd; position: absolute; left: 50%; top: 50%; margin-left: -5px; margin-top: -5px; -webkit-border-radius: 50%; border-radius: 50%;} input[type="radio"]:checked {border-color: #1954DB;} input[type="radio"]:checked:after {background: #1954DB;} input[type="radio"] + label {vertical-align: middle; font-size: 14px; margin-left: 8px; cursor: pointer;} /* ------------- textarea ------------- */ textarea {padding:10px; width:100%; min-height:220px; border:1px solid #ddd; border-radius:5px; resize: none;} /* -------------div(contenteditable:true) ------------- */ .mpg-form #content {overflow-y:scroll; padding:10px; width:100%; min-height:220px; max-height:550px; border:1px solid #ddd; border-radius:5px; resize: none;outline:none;} @media only screen and (max-width:768px) { input[type="text"], input[type="password"], input[type="number"] {padding: 0 15px; height: 50px; font-size: 13px;} input[type="checkbox"] {width: 20px; height: 20px;} input[type="checkbox"] + label {font-size: 12px; margin-left: 8px;} input[type="radio"] {width: 20px; height: 20px;} input[type="radio"]:after {width: 8px; height: 8px; margin-left: -4px; margin-top: -4px;} } /* Member ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Login */ #container.mem {min-height: 100vh; padding: 80px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;} .mem-inner {width: 100%; max-width: 590px; padding-left: 20px; padding-right: 20px; margin: 0 auto;} .mem-logo {display: block; width: 190px; height: 70px; margin: 0 auto 60px; text-indent: -9999px; background: url('/images/v3/sub/member_logo.png')no-repeat center center / cover;} .mem-title {margin-bottom: 20px; font-size: 32px; font-weight: 500; text-align: center;} .mem-desc {margin-bottom: 30px; font-size: 16px; color: #555; text-align: center;} .mem-desc br {display: none;} .mem-desc span {display: block;} .mem-group {margin-top: 30px;} .mem-group:first-child {margin-top: 0;} .mem-group.pass2 {margin-top: 20px;} .mem-label {font-weight: 600; font-size: 16px; margin-bottom: 10px; display: inline-flex;} .mem-label .required {display: block; text-indent: -9999px; margin-left: 5px; margin-top: 5px; width: 5px; height: 5px; margin-right: 5px; background: #DB2853; -webkit-border-radius: 50%; border-radius: 50%;} .mem-error {font-size: 12px; color: #FF0000; margin-top: 10px;} .mem-submit {background: #FFD900; margin-top: 30px; width: 100%; height: 66px; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 8px; border-radius: 8px;} .mem-submit.disabled {background: #cdcdcd; margin-top: 30px; width: 100%; height: 66px; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 8px; border-radius: 8px; cursor:no-drop; color:#fff} .mem-submit.default{background: #808080; color: #fff;} .mem-submit.on {background: #1954DB; color: #fff;} .mem-submit.bk {background: #262626; color: #fff;} .mem-lgn__ipt {position: relative; width: 100%;} .mem-lgn__ipt input[type="text"], .mem-lgn__ipt input[type="password"] {outline:none; display: block; padding-right: 60px;} .mem-lgn__ipt input[type="password"] {padding-right: 110px;} .mem-lgn__ipt input[type="text"].error, .mem-lgn__ipt input[type="password"].error {border-color: #f00;} .mem-lgn__reset {display: block; width: 30px; height: 30px; text-indent: -9999px; position: absolute; top: 50%; margin-top: -15px; right: 20px; background: none; position: absolute;} .mem-lgn__reset:before, .mem-lgn__reset:after {content: ''; display: block; width: 17px; height: 1px; background: #000; position: absolute; left: 50%; top: 50%; margin-left: -8px; margin-top: -1px;} .mem-lgn__reset:before {transform:rotate(-45deg);} .mem-lgn__reset:after {transform:rotate(45deg);} .mem-lgn__ipt input[type="password"] + .mem-lgn__reset {right: 60px;} .mem-lgn__show {display: block; width: 30px; height: 30px; text-indent: -9999px; position: absolute; top: 50%; margin-top: -15px; right: 20px; background: url('/images/v3/sub/input_change.png')no-repeat left center / auto 100%; -webkit-transition: none; transition: none;} .mem-lgn__show.active {background-position: right center;} .mem-lgn__save {margin-top: 20px; display: flex; align-items: center; justify-content: space-between;} .mem-lgn__save dd ul {display: flex; align-items: center;} .mem-lgn__save dd ul li {display: flex; align-items: center;} .mem-lgn__save dd ul li:after {content: ''; display: block; width: 1px; height: 16px; background: rgba(0,0,0,0.08); margin: 0 20px;} .mem-lgn__save dd ul li:last-child:after {display: none;} .mem-lgn__save dd ul li a {font-size: 14px;} .mem-lgn__join {margin-top: 40px; display: flex; align-items: center; justify-content: space-between;} .mem-lgn__join dt {font-size: 18px; font-weight: 400;} .mem-lgn__join dd a {height: 58px; padding: 0 30px; border: solid 1px #555; font-size: 16px; font-weight: 600; -webkit-border-radius: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center;} @media only screen and (max-width:1280px) { .mem-title {font-size: 28px;} } @media only screen and (max-width:992px) { .mem-title {font-size: 24px;} .mem-desc {margin-top: -10px; font-size: 14px;} .mem-group:first-child {margin-top: 40px;} } @media only screen and (max-width:768px) { #container.mem {padding: 60px 0;} .mem-logo {width: 136px; height: 50px; margin: 0 auto 30px;} .mem-title {font-size: 20px; margin-bottom: 20px;} .mem-desc {font-size: 13px; margin-bottom: 20px;} .mem-desc br {display: block;} .mem-desc span {display: inline;} .mem-label {font-size: 14px; margin-bottom: 5px;} .mem-error {margin-top: 5px;} .mem-group {margin-top: 10px; max-width: 100% !important;} .mem-group:first-child {margin-top: 10px;} .mem-group.pass2 {margin-top: 10px;} .mem-submit {margin-top: 20px; height: 56px; font-size: 16px;} .mem-lgn__ipt input[type="text"], .mem-lgn__ipt input[type="password"] {padding-right: 50px;} .mem-lgn__ipt input[type="password"] {padding-right: 80px;} .mem-lgn__reset {right: 10px;} .mem-lgn__ipt input[type="password"] + .mem-lgn__reset {right: 40px;} .mem-lgn__show {right: 10px;} .mem-lgn__save {margin-top: 10px;} .mem-lgn__save dd ul li:after {height: 10px; margin: 0 10px;} .mem-lgn__save dd ul li a {font-size: 12px;} .mem-lgn__join {margin-top: 20px;} .mem-lgn__join dt {font-size: 13px;} .mem-lgn__join dd a {height: 40px; font-size: 13px; padding: 0 20px;} } /* join */ .mem-join__desc {font-size: 12px; color: #555; display: flex; align-items: center; justify-content: flex-end;} .mem-join__desc:before {content: ''; display: block; width: 5px; height: 5px; margin-right: 5px; background: #DB2853; -webkit-border-radius: 50%; border-radius: 50%;} .mem-join__ipt {display: flex;} .mem-join__btn {width: 124px; height: 60px; color: #fff; font-size: 16px; font-weight: 500; margin-left: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 8px; border-radius: 8px;} .mem-join__btn.default {background: #808080;} .mem-join__btn.active {background: #424242;} .mem-join__btn.disabled {background: #ccc; cursor: no-drop;} .mem-join__btn.success {background: #1954DB; cursor: auto;} .mem-join__btn.success:before {content: ''; display: block; width: 6px; height: 12px; border-bottom: solid 3px #fff; border-right: solid 3px #fff; margin-right: 10px; margin-top: -5px; transform:rotate(45deg);} .mem-join__time {font-size: 16px; font-weight: 500; letter-spacing: 0rem; position: absolute; right: 20px; top: 50%; transform:translateY(-50%);} .mem-join__safery {font-size: 16px; font-weight: 500; position: absolute; right: 60px; top: 50%; transform:translateY(-50%);} .mem-join__safery.lv1 {color: #ff1818;} .mem-join__safery.lv2 {color: #fdc909;} .mem-join__safery.lv3 {color: #1954DB;} .mem-join__safery.lv4 {color: #00cb2c;} .mem-join__level {margin-top: 10px; display: flex; align-items: center;} .mem-join__level dt {width: 160px; height: 12px; margin-right: 10px; background: #d9d9d9; overflow: hidden; position: relative; -webkit-border-radius: 10px; border-radius: 10px;} .mem-join__level dt:after {content: ''; display: block; position: absolute; left: 0; top: 0; height: 12px;} .mem-join__level dd {font-size: 12px;} .mem-join__level.lv1 dt:after {width: 25%; background: #ff1818;} .mem-join__level.lv2 dt:after {width: 50%; background: #fdc909;} .mem-join__level.lv3 dt:after {width: 75%; background: #1954DB;} .mem-join__level.lv4 dt:after {width: 100%; background: #00cb2c;} .mem-join__level.lv1 dd span {color: #ff1818;} .mem-join__level.lv2 dd span {color: #fdc909;} .mem-join__level.lv3 dd span {color: #1954DB;} .mem-join__level.lv4 dd span {color: #00cb2c;} .mem-join__agree {margin-top: 10px;} .mem-join__agree dt {padding: 0 20px;} .mem-join__agree dt label {font-size: 16px; font-weight: 500;} .mem-join__agree dt p {font-size: 12px; color: #555; margin-top: 5px; padding-left: 40px;} .mem-join__agree dd {border-top: solid 2px #555; margin-top: 20px;} .mem-join__agree dd ul li {padding: 20px; border-bottom: solid 1px #eee; display: flex; align-items: center;} .mem-join__agree dd ul li p {flex-grow: 1; display: flex; align-items: center;} .mem-join__agree dd ul li p input[type="checkbox"] {flex-shrink: 0;} .mem-join__agree dd ul li a {width: 68px; height: 34px; margin-left: 10px; border: solid 1px #aaa; font-size: 12px; -webkit-border-radius: 8px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;} .mem-join__file {display: flex; align-items: center;} .mem-join__file .filename {border: none; font-size: 16px; flex-grow: 1; letter-spacing: 0rem; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .mem-join__file .filename:focus {outline: none;} .mem-join__file label {margin-right: 20px; width: 120px; height: 60px; font-size: 15px; font-weight: 500; cursor: pointer; border: solid 1px #555; -webkit-border-radius: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} .mem-join__file input[name="mall_file"] {display: none;} .mem-join__file input[name="business_file"] {display: none;} .mem-pop {display: none; padding: 30px 20px; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; background: rgba(0,0,0,0.5); align-items: center; justify-content: center;} .mem-pop__box {background: #fff; width: 100%; max-width: 820px; margin: 0 auto; max-height: 100%; overflow: hidden; -webkit-border-radius: 20px; border-radius: 20px; display: flex; flex-direction: column; box-shadow:0 2px 20px 0 rgba(0,0,0,0.25);} .mem-pop__head {height: 80px; padding: 0 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;} .mem-pop__head h4 {font-size: 26px; font-weight: 600;} .mem-pop__head button {display: block; width: 30px; height: 30px; text-indent: -9999px; position: relative;} .mem-pop__head button:before, .mem-pop__head button:after {content: ''; display: block; width: 30px; height: 2px; background: #000; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -1px;} .mem-pop__head button:before {transform:rotate(-45deg);} .mem-pop__head button:after {transform:rotate(45deg);} .mem-pop__body {padding: 30px; flex-grow: 1; background: #F6F8FA; overflow-y: auto; max-height: calc(100vh - 60px - 80px - 70px);} .mem-pop__content {background: #fff; padding: 20px; font-size: 16px; -webkit-border-radius: 8px; border-radius: 8px;} .mem-pop__foot {flex-shrink: 0;} .mem-pop__foot button {width: 100%; height: 70px; background: #262626; color: #fff; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center;} @media only screen and (max-width:768px) { .mem-join__btn {width: 80px; height: 50px; font-size: 13px; margin-left: 5px;} .mem-join__btn.success:before {display: none;} .mem-join__time {font-size: 14px; right: 15px;} .mem-join__safery {display: none;} .mem-join__level {margin-top: 5px;} .mem-join__level dt {width: 100px; height: 8px;} .mem-join__agree {margin-top: 0;} .mem-join__agree dt {padding: 0;} .mem-join__agree dt label {font-size: 13px;} .mem-join__agree dt p {font-size: 11px; padding-left: 35px;} .mem-join__agree dd {margin-top: 10px;} .mem-join__agree dd ul li {padding: 10px 0;} .mem-join__agree dd ul li a {width: 60px; height: 30px; font-size: 11px; -webkit-border-radius: 4px; border-radius: 4px;} .mem-join__file label {height: 50px; width: 80px; margin-right: 10px;} .mem-join__file .filename {font-size: 13px;} .mem-pop {padding: 20px 10px;} .mem-pop__box {-webkit-border-radius: 10px; border-radius: 10px;} .mem-pop__head {height: 60px; padding: 0 15px;} .mem-pop__head h4 {font-size: 18px;} .mem-pop__head button:before, .mem-pop__head button:after {width: 20px; margin-left: -10px;} .mem-pop__body {padding: 15px; max-height: calc(100vh - 40px - 60px - 50px);} .mem-pop__content {padding: 15px; font-size: 13px;} .mem-pop__foot button {height: 50px; font-size: 14px;} } /* 회원가입 */ .join-main__info {text-align: center;} .join-main__info dt {font-size: 20px; font-weight: 500;} .join-main__info dd {font-size: 14px; color: #555; margin-top: 16px;} .join-main__btn {margin: 0 -60px; padding-top: 60px; display: flex;} .join-main__btn li {width: 50%; padding: 0 10px;} .join-main__btn li a {height: 100%; padding: 35px 0; text-align: center; border: solid 1px #ddd; -webkit-border-radius: 20px; border-radius: 20px; display: flex; flex-direction: column; align-items: center;} .join-main__btn li a img {display: block; width: 124px;} .join-main__btn li a h5 {font-size: 24px; font-weight: 500; margin-top: 20px;} .join-main__btn li a p {font-size: 16px; color: #555; margin-top: 10px;} .join-main__btn li a p br {display: none;} .join-cpt__title {text-align: center;} .join-cpt__title dt {font-size: 28px; font-weight: 600;} .join-cpt__title dt:before {content: ''; display: block; width: 124px; height: 124px; margin: 0 auto 60px; background: url('/images/v3/sub/join_complete.png')no-repeat center center / cover;} .join-cpt__title dt br {display: none;} .join-cpt__title dd {margin-top: 30px;} .join-cpt__title dd h5 {font-size: 20px; font-weight: 500;} .join-cpt__title dd h5 br {display: none;} .join-cpt__title dd p {font-size: 16px; color: #555; margin-top: 8px;} .join-cpt__title dd p strong {color: #000; font-weight: 600;} .join-cpt__title dd p br {display: none;} .join-cpt__btn {margin-top: 60px;} .join-cpt__btn li {margin-bottom: 10px;} .join-cpt__btn li:last-child {margin-bottom: 0;} .join-cpt__btn li a {border: solid 1px #555; width: 100%; height: 62px; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 8px; border-radius: 8px;} .join-cpt__btn li:first-child a {background: #FFD900; border-color: #FFD900;} @media only screen and (max-width:992px) { .join-main__btn {padding-top: 40px;} .join-main__btn li a h5 {font-size: 20px;} .join-main__btn li a p {font-size: 14px; margin-top: 5px;} .join-cpt__title dt {font-size: 24px;} .join-cpt__title dt:before {width: 100px; height: 100px; margin: 0 auto 40px;} .join-cpt__title dd {margin-top: 20px;} .join-cpt__title dd h5 {font-size: 18px;} .join-cpt__title dd p {font-size: 14px;} .join-cpt__btn {margin-top: 40px;} } @media only screen and (max-width:768px) { .join-main__info dt {font-size: 15px;} .join-main__info dd {font-size: 13px; margin-top: 8px;} .join-main__btn {padding-top: 20px; margin: 0 -5px;} .join-main__btn li {padding: 0 5px;} .join-main__btn li a {padding: 20px 0; -webkit-border-radius: 10px; border-radius: 10px;} .join-main__btn li a img {width: 100px;} .join-main__btn li a h5 {font-size: 18px; margin-top: 10px;} .join-main__btn li a p {font-size: 12px;} .join-main__btn li a p br {display: block;} .join-cpt__title dt {font-size: 20px;} .join-cpt__title dt:before {width: 80px; height: 80px; margin: 0 auto 20px;} .join-cpt__title dd {margin-top: 16px;} .join-cpt__title dd h5 {font-size: 14px;} .join-cpt__title dd h5 br {display: block;} .join-cpt__title dd p {font-size: 13px; margin-top: 16px;} .join-cpt__title dd p br {display: block;} .join-cpt__btn {margin-top: 30px;} .join-cpt__btn li a {height: 56px; font-size: 16px;} } /* 아이디찾기 */ .find-tab {display: flex; margin-bottom: 40px;} .find-tab li {width: 50%;} .find-tab li a {height: 60px; font-size: 18px; color: #707070; background: #F6F8FA; display: flex; align-items: center; justify-content: center;} .find-tab li a.active {background: #1954DB; color: #fff; font-weight: 500;} .find-tab li:first-child a {border-top-left-radius: 8px;} .find-tab li:last-child a {border-top-right-radius: 8px;} .find-result {border-top: solid 2px #222;} .find-result dl {display: flex; padding: 24px 0; border-bottom: solid 1px #ddd;} .find-result dl dt {width: 30%; text-align: center; font-size: 18px; font-weight: 600;} .find-result dl dd {width: 70%; text-align: center; font-size: 20px;} .find-result dl dd strong {font-weight: 700;} @media only screen and (max-width:992px) { .find-tab {margin-bottom: 30px;} .find-tab li a {height: 50px; font-size: 16px;} .find-result dl {padding: 20px 0;} .find-result dl dt {font-size: 16px;} .find-result dl dd {font-size: 18px;} } @media only screen and (max-width:768px) { .find-tab {margin-bottom: 20px;} .find-tab li a {height: 46px; font-size: 14px;} .find-result dl {padding: 16px 0;} .find-result dl dt {font-size: 14px;} .find-result dl dd {font-size: 16px;} } /* 비밀번호변경 */ .mem-reset__txt {width: 100%; height: 60px; padding: 0 20px; display: flex; align-items: center; background: #f7f7f7; -webkit-border-radius: 8px; border-radius: 8px;} .mem-reset__id {font-size: 24px; color: #1954DB;} @media only screen and (max-width:768px) { .mem-reset__txt {height: 50px; padding: 0 15px; font-size: 13px;} } /* Sub Common ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #wrap.sub {padding-top: 90px;} .sub-title {text-align: center; padding-top: 64px; padding-bottom: 80px;} .sub-title h2 {font-size: 52px; font-weight: 600;} .sub-title p {font-size: 18px; color: #555; margin-top: 15px;} .sub-title p br {display: none;} .sub-tab {display: flex; border-bottom: solid 3px #F0F0F0;} .sub-tab li {width: 50%; margin: 0 auto;} .sub-tab li:first-child:nth-last-child(2), .sub-tab li:first-child:nth-last-child(2) ~ li {width: 50%;} .sub-tab li:first-child:nth-last-child(3), .sub-tab li:first-child:nth-last-child(3) ~ li {width: 33.3333%;} .sub-tab li:first-child:nth-last-child(4), .sub-tab li:first-child:nth-last-child(4) ~ li {width: 25%;} .sub-tab li:first-child:nth-last-child(5), .sub-tab li:first-child:nth-last-child(5) ~ li {width: 20%;} .sub-tab li:first-child:nth-last-child(6), .sub-tab li:first-child:nth-last-child(6) ~ li {width: 16.6666%;} .sub-tab li a {height: 80px; font-size: 24px; color: #707070; position: relative; display: flex; align-items: center; justify-content: center;} .sub-tab li a.active {font-weight: 600; color: #1954DB;} .sub-tab li a.active:after {content: ''; display: block; height: 5px; background: #1954DB; position: absolute; left: 0; right: 0; top: 100%;} .sub-btn {height: 60px; padding: 0 30px; border: solid 1px #555; font-size: 18px; font-weight: 500; -webkit-border-radius: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center;} .sub-btn.bk {background: #262626; border-color: #262626; color: #fff;cursor: pointer;} .sub-btn.gr {background: #ccc; border-color: #ccc; color: #fff; cursor:no-drop;} .sub-dots li {font-size: 14px; color: #555; margin-bottom: 0; display: flex;} .sub-dots li:last-child {margin-bottom: 0;} .sub-dots li:before {content: ''; flex-shrink: 0; display: block; width: 3px; height: 3px; background: #555; margin: 8px 10px; -webkit-border-radius: 50%; border-radius: 50%;} /*부가서비스 및 기존 서브탭 레이아웃*/ .sub-tab-v2{height:80px; border-bottom:1px solid #e5e5e5;} .sub-tab-v2 ul{text-align:center; line-height:0; font-size:0; display: flex; justify-content: center;} .sub-tab-v2 li{margin-left:50px;} .sub-tab-v2 li:first-child{margin-left:0;} .sub-tab-v2 li a{position:relative; line-height: 1.4; display:flex; align-items: center; justify-content: center; padding:0 10px; height: 80px; letter-spacing:-2px; font-size:large; font-weight:500; color:#999;} .sub-tab-v2 li a:after{position:absolute; bottom:0; left:0; right:0; content:""; display:block; margin:0 auto; width:100%; height:4px; background:#333; transition:.2s all linear; transform:scaleX(0);} .sub-tab-v2 li:hover a, .sub-tab-v2 li.on a{font-weight:500; color:#333;} .sub-tab-v2 li:hover a:after, .sub-tab-v2 li.on a:after{transform:scaleX(1);} @media (max-width:1500px) { #wrap.sub {padding-top: 80px;} } @media (max-width:1280px) { #wrap.sub {padding-top: 70px;} .sub-title {padding-top: 48px; padding-bottom: 64px;} .sub-title h2 {font-size: 40px;} .sub-title p {font-size: 16px; margin-top: 10px;} .sub-tab {margin: 0 -20px;} .sub-tab li a {height: 70px; font-size: 20px;} .sub-btn {height: 52px; padding: 0 25px; font-size: 16px;} .sub-dots li {font-size: 13px;} } @media (max-width:992px) { #wrap.sub {padding-top: 56px;} .sub-title {padding-top: 40px; padding-bottom: 40px;} .sub-title h2 {font-size: 34px;} .sub-title p {font-size: 14px;} .sub-tab li a {height: 60px; font-size: 16px;} .sub-btn {height: 48px; padding: 0 20px; font-size: 14px;} } @media (max-width:768px) { .sub-title {padding-top: 24px; padding-bottom: 24px;} .sub-title h2 {font-size: 26px;} .sub-title p {font-size: 13px;} .sub-title p br {display: block;} .sub-tab {border-bottom-width: 1px;} .sub-tab li a {height: 40px; font-size: 13px;} .sub-tab li a.active:after {height: 2px;} .sub-btn {padding: 0 20px; height: 40px; font-size: 13px;} .sub-dots li {font-size: 12px;} .sub-tab-v2{height:50px;} .sub-tab-v2 ul {padding-left: 0; padding-right: 0;} .sub-tab-v2 li {margin-left: 0;} .sub-tab-v2 li a {font-size: 13px; height: 50px;} } /* pagenation */ .pagenation {margin-top: 60px; display: flex; justify-content: center;} .pagenation a {width: 52px; height: 52px; border: solid 1px #ddd; margin: 0 5px; font-size: 18px; -webkit-border-radius: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center;} .pagenation > a {flex-shrink: 0;} .pagenation .arrow {display: block; text-indent: -9999px; width: 17px; height: 17px;} .pagenation .arrow.first {background:url('/images/v2/common/pagenav_first.png') no-repeat center center / auto 100%;} .pagenation .arrow.last {background:url('/images/v2/common/pagenav_last.png') no-repeat center center / auto 100%;} .pagenation .arrow.prev {background:url('/images/v2/common/pagenav_prev.png') no-repeat center center / auto 100%;} .pagenation .arrow.next {background:url('/images/v2/common/pagenav_next.png') no-repeat center center / auto 100%;} .pagenation ol {display: flex; justify-content: center;} .pagenation ol li a {color: #4F4F4F;} .pagenation ol li.on a {color: #1954DB; border-color: #1954DB; font-weight: 700;} @media (max-width:1280px) { .pagenation {margin-top: 50px;} .pagenation a {width: 44px; height: 44px; font-size: 16px;} } @media (max-width:992px) { .pagenation {margin-top: 40px;} .pagenation a {width: 40px; height: 40px; font-size: 14px;} } @media (max-width:768px) { .pagenation {margin-top: 30px;} .pagenation a {width: 34px; height: 34px; font-size: 12px; margin: 0 2px;} .pagenation .arrow {width: 12px; height: 12px;} } /* board */ .brd-top {padding-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between;} .brd-top__cnt {} .brd-top__cnt strong {color: #1954DB;} .brd-top__sch {width: 330px; position: relative;} .brd-top__sch input[type="text"] {padding-right: 80px; background: #F5F5F5; border-color: #F5F5F5;} .brd-top__sch input[type="text"]:focus {background: #fff;} .brd-top__sch button {width: 60px; height: 60px; position: absolute; right: 0; top: 0; text-indent: -9999px;} .brd-top__sch button:before {content: ''; display: block; width: 22px; height: 22px; border: solid 2px #222; box-sizing: border-box; position: absolute; left: 50%; top: 50%; margin-left: -13px; margin-top: -13px; -webkit-border-radius: 50%; border-radius: 50%;} .brd-top__sch button:after {content: ''; display: block; box-sizing: border-box; width: 8px; height: 2px; background: #222; position: absolute; left: 50%; top: 50%; margin-top: 7px; margin-left: 3px; transform:rotate(45deg); -webkit-border-radius: 2px; border-radius: 2px;} .brd-top__date {display: flex; align-items: center;} .brd-top__date li {width: 240px; position: relative;} .brd-top__date li:nth-child(2) {width: auto; margin: 0 16px;} .brd-top__date li input[type="text"] {background: #F5F5F5; border-color: #F5F5F5; cursor: pointer;} .brd-top__date li img {width: 30px; height: 30px; position: absolute; right: 20px; top: 50%; margin-top: -15px; cursor: pointer;} .brd-list__scr {} .brd-list {width: 100%; border-top: solid 2px #222; border-left: solid 2px #fff; border-right: solid 2px #fff;} .brd-list th, .brd-list td {border: solid 1px #ddd;} .brd-list th {background: #FCFCFC; padding: 25px 10px; font-weight: 600;} .brd-list td {font-size: 20px; padding: 20px 10px; text-align: center;} .brd-list td.domain {overflow: hidden; text-overflow: ellipsis;} .brd-list td.no-data {text-align: center; padding: 60px 20px; color: #999;} .brd-list td.tal {text-align: left;} .brd-list td.tal a {display: inline-block; max-width: 85%; vertical-align: middle;} .brd-list td .cmt {vertical-align: middle;} .brd-list td .new {margin-left: 10px; vertical-align: middle;} .brd-bot__btn {margin-top: 20px; display: flex; justify-content: flex-end;} .brd-bot__desc {margin-top: 30px;} .ui-datepicker .ui-datepicker-title select {width: 100px;} @media (max-width:1280px) { .brd-top__cnt {font-size: 16px;} .brd-list th {padding: 20px 10px; font-size: 16px;} .brd-list td {font-size: 16px; padding: 15px 5px;} .brd-bot__desc {margin-top: 20px;} } @media (max-width:992px) { .brd-list__scr {overflow-x: auto; margin: 0 -20px; padding: 0 20px;} .brd-list__scr .brd-list {width: 1000px;} .brd-list th {padding: 15px 10px; font-size: 14px;} .brd-list td {font-size: 14px; padding: 10px 5px;} } @media (max-width:768px) { .brd-top {padding-bottom: 10px; display: block;} .brd-top__cnt {font-size: 14px;} .brd-top__sch {width: auto; margin-top: 10px;} .brd-top__sch input[type="text"] {height: 40px; padding-right: 55px;} .brd-top__sch button {width: 40px; height: 40px;} .brd-top__sch button:before {width: 16px; height: 16px; margin-left: -8px; margin-top: -8px;} .brd-top__sch button:after {width: 6px; margin-left: 4px;} .brd-top__date {margin-top: 10px;} .brd-top__date li {width: 45%;} .brd-top__date li:nth-child(2) {width: 10%; margin: 0; text-align: center;} .brd-top__date li img {width: 20px; height: 20px; margin-top: -10px; right: 15px;} .brd-list__scr .brd-list {width: 800px;} .brd-list th {padding: 10px 5px; font-size: 13px;} .brd-list td {font-size: 13px; padding: 10px 5px;} } /* Mypage ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 공통 */ .mpg-info {display: inline-block; flex-shrink: 0; margin-left: 5px; vertical-align: middle; margin-top: -4px; position: relative;} .mpg-info > button {display: block; width: 20px; height: 20px; text-indent: -9999px; background: url('/images/v3/sub/important.png')no-repeat center center / cover;} .mpg-info dl {text-align: left; display: none; width: 328px; padding: 24px; margin-left: 16px; z-index: 1; position: absolute; left: 100%; top: 50%; transform:translateY(-50%); background: #fff; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 0px 2px 8px 0px #0000001F;} .mpg-info dl:before {content: ''; display: block; position: absolute; right: 100%; top: 50%; margin-top: -8px; margin-right: -8px; width: 16px; height: 16px; background: #fff; transform:rotate(45deg); box-shadow: 0px 2px 8px 0px #0000001F;} .mpg-info dl:after {content: ''; display: block; width: 16px; height: 30px; background: #fff; position: absolute; left: 0; top: 50%; margin-top: -15px;} .mpg-info dl button {display: block; width: 20px; height: 30px; text-indent: -9999px; position: absolute; right: 24px; top: 24px; background: none;} .mpg-info dl button:before, .mpg-info dl button:after {content: ''; display: block; width: 20px; height: 2px; background: #000; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -1px;} .mpg-info dl button:before {transform:rotate(45deg);} .mpg-info dl button:after {transform:rotate(-45deg);} .mpg-info dl dt {font-size: 20px; font-weight: 600;} .mpg-info dl dd {margin-top: 16px; padding-top: 16px; border-top: solid 2px #555; font-size: 16px; font-weight: 400;} .mpg-form {width: 100%; table-layout: fixed; border-top: solid 2px #222;} .mpg-form th, .mpg-form td {border-bottom: solid 1px #ddd;} .mpg-form th {width: 240px; background: #FCFCFC; font-weight: 600; text-align: left; padding-left: 80px;} .mpg-form th .request {display: inline-block; width: 5px; height: 5px; text-indent: -9999px; vertical-align: top; margin-top: 5px; margin-left: 5px; background: #DB2853; -webkit-border-radius: 50%; border-radius: 50%;} .mpg-form td {padding: 10px 20px; } .mpg-form .mem-group {max-width: 560px;} .mpg-form__radio {min-height: 60px; display: flex; flex-wrap: wrap; align-items: center;} .mpg-form__radio li {margin-right: 40px; padding: 5px 0;} .mpg-form__radio li:last-child {margin-right: 0;} .mpg-form__add {margin: -10px -20px;} .mpg-form__add > dl {display: flex; align-items: center; border-bottom: solid 1px #ddd;} .mpg-form__add > dl:last-child {border-bottom: none;} .mpg-form__add > dl > dt {width: 280px; padding: 10px 20px; font-weight: 600; background: #FCFCFC; flex-shrink: 0;} .mpg-form__add > dl > dd {padding: 10px 20px; flex-grow: 1; min-height: 80px; display: flex; flex-direction: column; justify-content: center;} .mpg-form__file {display: flex; align-items: center;} .mpg-form__file input[type="file"] {display: none;} .mpg-form__file label {height: 48px; padding: 0 20px; font-size: 16px; background: #808080; color: #fff; -webkit-border-radius: 4px; border-radius: 4px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;} .mpg-form__file p {margin-left: 20px;} .mpg-form__agree {margin-top: 25px; display: flex; border-top: solid 2px #555;} .mpg-form__agree dl {width: 33.3333%; border-right: solid 1px #ddd; display: flex; flex-direction: column;} .mpg-form__agree dl:last-child {border-right: none;} .mpg-form__agree dl dt {background: #E9EBEC; border-bottom: solid 1px #ddd; height: 60px; text-align: center; font-weight: 600; flex-shrink: 0; display: flex; align-items: center; justify-content: center;} .mpg-form__agree dl dd {padding: 20px; flex-grow: 1; text-align: center; border-bottom: solid 1px #ddd; display: flex; align-items: center; justify-content: center;} .mpg-btn {margin-top: 60px; position: relative; display: flex; align-items: center; justify-content: center;} .mpg-btn li {margin: 0 5px;} .mpg-btn li a.left {position: absolute; left: 0; top: 0;} @media (max-width:1280px) { .mpg-form__add > dl > dt {width: 160px;} .mpg-form__agree {margin-top: 15px;} .mpg-form__agree dl dt {height: 50px; font-size: 16px;} .mpg-form__agree dl dd {font-size: 16px; padding: 15px;} .mpg-btn {margin-top: 50px;} } @media (max-width:992px) { .mpg-form th, .mpg-form td {font-size: 16px;} .mpg-form th {width: 160px; padding-left: 40px;} .mpg-form__agree {margin-top: 10px;} .mpg-form__agree dl dt {height: 40px; font-size: 14px;} .mpg-form__agree dl dd {font-size: 14px; padding: 10px;} .mpg-btn {margin-top: 40px;} } @media (max-width:768px) { .mpg-info dl {width: 280px; padding: 16px; margin-left: 0; left: 50%; top: 50%; position: fixed; transform:translate(-50%, -50%);} .mpg-info dl:before {display: none;} .mpg-info dl:after {display: none;} .mpg-info dl button {right: 16px; top: 16px; height: 24px;} .mpg-info dl dt {font-size: 16px;} .mpg-info dl dd {margin-top: 8px; padding-top: 8px; border-top-width: 1px; font-size: 14px;} .mpg-form, .mpg-form tbody, .mpg-form tr, .mpg-form th, .mpg-form td {display: block; width: 100%;} .mpg-form {border-top: none;} .mpg-form th, .mpg-form td {font-size: 14px; border-bottom: none; padding: 0;} .mpg-form th {width: 100%; text-align: left; margin-top: 24px; padding-bottom: 8px; background: none;} .mpg-form__radio {min-height: 50px;} .mpg-form__radio li {padding: 2px 0; margin-right: 20px;} .mpg-form__add {margin: 0;} .mpg-form__add > dl {display: block; border-bottom: none; margin-bottom: 20px;} .mpg-form__add > dl:last-child {margin-bottom: 0;} .mpg-form__add > dl > dt {width: 100%; padding: 0; background: none;} .mpg-form__add > dl > dd {padding: 0; min-height: 0; margin-top: 10px;} .mpg-form__file label {height: 34px; padding: 0 15px; font-size: 12px;} .mpg-form__file p {margin-left: 10px; font-size: 13px;} .mpg-form__agree dl dt {height: 30px; font-size: 12px;} .mpg-form__agree dl dd {font-size: 12px; padding: 5px;} .mpg-btn {margin-top: 30px;} .mpg-btn li {margin: 0 4px;} } /* 모달팝업 */ .mpg-modal {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 2000;} .mpg-modal > div {display: table; width: 100%; height: 100%; padding: 30px 20px;} .mpg-modal > div > div {display: table-cell; width: 100%; vertical-align: middle;} .mpg-modal__box {width: 100%; max-width: 820px; margin: 0 auto; background: #fff; overflow: hidden; -webkit-border-radius: 20px; border-radius: 20px;} .mpg-modal__top {height: 80px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between;} .mpg-modal__top h4 {font-size: 26px; font-weight: 600;} .mpg-modal__top button {display: block; width: 30px; height: 30px; text-indent: -9999px; position: relative;} .mpg-modal__top button:before, .mpg-modal__top button:after {content: ''; display: block; width: 30px; height: 2px; background: #000; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -1px;} .mpg-modal__top button:before {transform:rotate(45deg);} .mpg-modal__top button:after {transform:rotate(-45deg);} .mpg-modal__cont {padding: 40px 30px 60px; background: #FAFBFC;} .mpg-modal__txt h5 {font-size: 30px; font-weight: 600;} .mpg-modal__txt p {font-size: 20px; margin-top: 20px;} .mpg-modal__txt span {display: block; font-size: 18px; color: #555; margin-top: 15px;} .mpg-modal__form {margin-top: 40px; width: 100%; border-top: solid 2px #555;} .mpg-modal__form th, .mpg-modal__form td {padding: 10px; border-bottom: solid 1px #ddd;} .mpg-modal__form th {width: 180px; background: #E9EBEC; font-size: 15px; font-weight: 600;} .mpg-modal__form td input {height: 44px; font-size: 14px; -webkit-border-radius: 4px; border-radius: 4px;} .mpg-modal__find {margin-top: 20px; display: flex; align-items: center; justify-content: space-between;} .mpg-modal__find dt {font-size: 15px; color: #1954DB; font-weight: 400;} .mpg-modal__find dd a {height: 48px; padding: 0 20px; font-size: 14px; font-weight: 600; border: solid 1px #555; -webkit-border-radius: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center;} .mpg-modal__btn {width: 100%; height: 70px; background: #262626; color: #fff; font-size: 18px; line-height: 1.0; font-weight: 600; display: flex; align-items: center; justify-content: center;} .mpg-modal__btn.disabled{background:#ccc;cursor: no-drop;color: #fff;} @media (max-width:1280px) { .mpg-modal__cont {padding: 30px;} .mpg-modal__txt h5 {font-size: 26px;} .mpg-modal__txt p {font-size: 18px; margin-top: 15px;} .mpg-modal__txt span {font-size: 16px; margin-top: 10px;} } @media (max-width:992px) { .mpg-modal__txt h5 {font-size: 22px;} .mpg-modal__txt p {font-size: 16px;} .mpg-modal__txt span {font-size: 14px;} .mpg-modal__form {margin-top: 30px;} } @media (max-width:768px) { .mpg-modal__box {-webkit-border-radius: 10px; border-radius: 10px;} .mpg-modal__top {height: 60px; padding: 0 20px;} .mpg-modal__top h4 {font-size: 20px;} .mpg-modal__top button {width: 20px; height: 20px;} .mpg-modal__top button:before, .mpg-modal__top button:after {width: 20px; margin-left: -10px;} .mpg-modal__cont {padding: 20px;} .mpg-modal__txt h5 {font-size: 18px;} .mpg-modal__txt p {font-size: 14px; margin-top: 10px;} .mpg-modal__txt span {font-size: 12px;} .mpg-modal__form, .mpg-modal__form tbody, .mpg-modal__form tr, .mpg-modal__form th, .mpg-modal__form td {display: block; width: 100%;} .mpg-modal__form {border-top: none; margin-top: 20px;} .mpg-modal__form th, .mpg-modal__form td {font-size: 14px; border-bottom: none; padding: 0;} .mpg-modal__form th {width: 100%; text-align: left; margin-top: 24px; padding-bottom: 8px; background: none;} .mpg-modal__find {margin-top: 10px;} .mpg-modal__find dt {font-size: 13px;} .mpg-modal__find dd a {height: 36px; padding: 0 10px; font-size: 12px; -webkit-border-radius: 4px; border-radius: 4px;} .mpg-modal__btn {height: 50px; font-size: 16px;} } /* 정보수정 */ .mpg-pw__title {text-align: center; margin-bottom: 60px;} .mpg-pw__title h3 {font-size: 38px; font-weight: 500;} .mpg-pw__title p {color: #555; margin-top: 12px;} .mpg-mdf__title {font-size: 32px; font-weight: 500; padding-bottom: 24px;} .mpg-mdf__name {height: 60px; display: flex; align-items: center;} .mpg-mdf__type {position: relative;} .mpg-mdf__type p {margin-right: 20px; display: inline; vertical-align: middle;} .mpg-mdf__type span {height: 40px; padding: 0 14px; vertical-align: middle; border: solid 1px #ddd; font-size: 14px; position: relative; -webkit-border-radius: 4px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;} .mpg-mdf__pw {display: flex;} .mpg-mdf__pw a {height: 48px; padding: 0 20px; font-size: 16px; background: #808080; color: #fff; -webkit-border-radius: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;} .mpg-mdf__chk {margin-top: 16px; margin-bottom: -10px;} @media (max-width:1280px) { .mpg-pw__title {margin-bottom: 50px;} .mpg-mdf__title {font-size: 26px; padding-bottom: 16px;} } @media (max-width:992px) { .mpg-pw__title {margin-bottom: 40px;} .mpg-pw__title h3 {font-size: 34px;} .mpg-pw__title p {margin-top: 8px; font-size: 14px;} .mpg-mdf__title {font-size: 22px; padding-bottom: 8px;} } @media (max-width:768px) { .mpg-pw__title {margin-bottom: 30px;} .mpg-pw__title h3 {font-size: 26px;} .mpg-pw__title p { font-size: 13px;} .mpg-mdf__title {font-size: 18px;} .mpg-mdf__name {height: 50px;} .mpg-mdf__chk {margin-bottom: 0;} .mpg-mdf__type > p {margin-right: 10px;} .mpg-mdf__type > a {height: 34px; padding: 0 10px; font-size: 13px;} .mpg-mdf__pw a {height: 40px; padding: 0 10px; font-size: 14px;} } /* 쇼핑몰관리 */ .mpg-shop__domain {padding: 0 10px; display: flex; align-items: center;} .mpg-shop__domain dt {flex-grow: 1; text-align: left;} .mpg-shop__domain dt a {word-break: break-word;} .mpg-shop__domain dd {flex-shrink: 0; margin-left: 20px;} .mpg-shop__domain dd a {height: 40px; font-size: 14px; border: solid 1px #ddd; padding: 0 10px; -webkit-border-radius: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;} .mpg-shop__domain dd a:after {content: ''; display: block; box-sizing: border-box; width: 6px; height: 6px; border-top: solid 1px #222; border-right: solid 1px #222; margin-left: 8px; transform:rotate(45deg);} .mpg-shop__extd {height: 48px; padding: 0 20px; background: #808080; color: #fff; font-size: 16px; -webkit-border-radius: 4px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;} .mpg-shop__status.blu {color: #1954DB;} .mpg-shop__status.gry {color: #aaa;} .mpg-shop__status.red {color: #FF0000;} @media (max-width:1280px) { .mpg-shop__domain dd a {height: 36px; font-size: 13px; padding: 0 8px;} .mpg-shop__extd {height: 40px; padding: 0 10px; font-size: 14px;} } @media (max-width:768px) { .mpg-shop__domain dd a {height: 30px; font-size: 11px; padding: 0 6px;} .mpg-shop__extd {height: 32px; padding: 0 8px; font-size: 12px;} } /* 결제내역 */ .mpg-pay__receipt {margin-top: 8px; display: flex; align-items: center; justify-content: center;} .mpg-pay__receipt li {margin: 0 2px;} .mpg-pay__receipt li a {height: 40px; padding: 0 12px; font-size: 14px; text-align: center; border: solid 1px #ddd; -webkit-border-radius: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;} .mpg-pay__receipt li button {height: 40px; padding: 0 12px; font-size: 14px; text-align: center; border: solid 1px #ddd; -webkit-border-radius: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;} @media (max-width:1280px) { .mpg-pay__receipt li a {height: 34px; padding: 0 8px; font-size: 13px;} } @media (max-width:768px) { .mpg-pay__receipt li a {height: 30px; padding: 0 4px; font-size: 12px;} .mpg-pay__receipt li button {height: 30px; padding: 0 4px; font-size: 12px;} } /* 문의내역 */ .mpg-dtl__title h4 {display: inline; font-size: 32px; font-weight: 500; vertical-align: middle;} .mpg-dtl__title span {height: 40px; border: solid 1px #1954DB; font-size: 16px; color: #1954DB; vertical-align: middle; font-weight: 600; margin-left: 20px; padding: 0 10px; -webkit-border-radius: 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;} .mpg-dtl__desc {margin-top: 40px; display: flex; align-items: center;} .mpg-dtl__desc dl {font-size: 14px; display: flex; align-items: center;} .mpg-dtl__desc dl:after {content: ''; width: 1px; height: 16px; margin: 0 20px; background: #ddd;} .mpg-dtl__desc dl:last-child:after {display: none;} .mpg-dtl__desc dl dt {color: #aaa; margin-right: 10px;} .mpg-dtl__desc dl dd {color: #555;} .mpg-dtl__content {margin-top: 20px; border-top: solid 2px #222; border-bottom: solid 1px #ddd; padding: 40px 0; min-height: 360px;} .mpg-dtl__info {border-bottom: solid 1px #ddd; min-height: 80px; display: flex; align-items: center;} .mpg-dtl__info > dt {width: 260px; padding-left: 70px; font-size: 18px; font-weight: 600; flex-shrink: 0;} .mpg-dtl__info > dd {padding: 30px; flex-grow: 1;} .mpg-dtl__user {width: 100%; table-layout: fixed; border-top: solid 2px #222;} .mpg-dtl__user th, .mpg-dtl__user td {border-bottom: solid 1px #ddd;} .mpg-dtl__user th {width: 240px; background: #FCFCFC; font-weight: 600; text-align: left; padding-left: 80px;} .mpg-dtl__user td {padding: 20px; } .mpg-cmt__ipt {display: flex; margin-right: -30px;} .mpg-cmt__ipt textarea {flex-grow: 1; height: 100px; min-height: auto; -webkit-border-radius: 8px; border-radius: 8px;} .mpg-cmt__ipt button {flex-shrink: 0; width: 200px; height: 100px; margin-left: 10px; border: solid 1px #555; font-size: 18px; font-weight: 500; -webkit-border-radius: 8px; border-radius: 8px;} .mpg-cmt__ipt button.active {background: #1954DB; border-color: #1954DB; color: #fff;} .mpg-cmt__file {margin-top: 10px; display: flex; align-items: center;} .mpg-cmt__file dt {flex-shrink: 0; margin-right: 20px;} .mpg-cmt__file dd {flex-grow: 1;} .mpg-chat {border-bottom: solid 1px #ddd; padding: 20px 0;} .mpg-chat__group {margin: 20px 0; display: flex; align-items: center;} .mpg-chat__profile {width: 84px; height: 84px; background: #aaa; flex-shrink: 0; -webkit-border-radius: 30px; border-radius: 30px;} .mpg-chat__box {width: 400px; padding: 24px; margin-left: 24px; background: #fff; position: relative; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 0px 2px 8px 0px #0000001F;} .mpg-chat__box:before {content: ''; display: block; position: absolute; right: 100%; top: 50%; margin-top: -8px; margin-right: -8px; width: 16px; height: 16px; background: #fff; transform:rotate(45deg); box-shadow: 0px 2px 8px 0px #0000001F;} .mpg-chat__box:after {content: ''; display: block; width: 16px; height: 30px; background: #fff; position: absolute; left: 0; top: 50%; margin-top: -15px;} .mpg-chat__title {font-size: 20px; font-weight: 600;} .mpg-chat__cont {margin-top: 16px; font-size: 16px;} .mpg-chat__cont textarea {height: 80px; min-height: auto; font-size: 16px; -webkit-border-radius: 8px; border-radius: 8px;outline:none;} .mpg-chat__file {margin-top: 16px;} .mpg-chat__file a {font-size: 16px;} .mpg-chat__file a:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 8px; width: 24px; height: 26px; background: url('/images/v3/sub/comment_file.png')no-repeat center center / cover;} .mpg-chat__upload {margin-top: 16px; display: flex; align-items: center;} .mpg-chat__upload input[type="file"] {display: none;} .mpg-chat__upload label {height: 40px; padding: 0 14px; font-size: 14px; background: #808080; color: #fff; -webkit-border-radius: 4px; border-radius: 4px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;} .mpg-chat__upload p {margin-left: 8px; font-size: 16px;} .mpg-chat__info {border-top: solid 2px #555; margin-top: 16px; padding-top: 16px; display: flex; align-items: center; justify-content: flex-end;} .mpg-chat__info li {font-size: 14px; color: #aaa; display: flex; align-items: center;} .mpg-chat__info li:after {content: ''; display: block; width: 1px; height: 12px; background: #ddd; margin: 0 8px;} .mpg-chat__info li:last-child:after {display: none;} .mpg-chat__btn {margin-top: 16px; display: flex; align-items: center; justify-content: flex-end;} .mpg-chat__btn li {margin-right: 8px;} .mpg-chat__btn li:last-child {margin-right: 0;} .mpg-chat__btn li button {padding: 0 12px; height: 36px; font-size: 14px; border: solid 1px #ddd; -webkit-border-radius: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;} .mpg-chat__btn li button.bk {background: #262626; border-color: #262626; color: #fff;} .mpg-chat__group.my-cmt .mpg-chat__profile {background: #FFD9F1 url('/images/v3/sub/comment_profile_my.png')no-repeat center center / 42px auto;} .mpg-chat__group.whois-cmt {justify-content: flex-end;} .mpg-chat__group.whois-cmt .mpg-chat__profile {order: 2; background: #DBE4FF url('/images/v3/sub/comment_profile_whois.png')no-repeat center center / 42px auto;} .mpg-chat__group.whois-cmt .mpg-chat__box {margin-left: 0; margin-right: 24px;} .mpg-chat__group.whois-cmt .mpg-chat__box:before {right: auto; left: 100%; margin-right: 0; margin-left: -8px;} .mpg-chat__group.whois-cmt .mpg-chat__box:after {left: auto; right: 0;} .mpg-chat__group.next-cmt {justify-content: flex-end;} .mpg-chat__group.next-cmt .mpg-chat__profile {order: 2; background: #DBE4FF url('/images/v3/sub/comment_profile_whois.png')no-repeat center center / 42px auto;} .mpg-chat__group.next-cmt .mpg-chat__box {margin-left: 0; margin-right: 24px;} .mpg-chat__group.next-cmt .mpg-chat__box:before {right: auto; left: 100%; margin-right: 0; margin-left: -8px;} .mpg-chat__group.next-cmt .mpg-chat__box:after {left: auto; right: 0;} @media (max-width:1280px) { .mpg-dtl__title h4 {font-size: 28px;} .mpg-dtl__title span {height: 36px; font-size: 14px; margin-left: 16px; padding: 0 8px;} .mpg-dtl__desc {margin-top: 24px;} .mpg-dtl__desc dl:after {margin: 0 16px;} .mpg-dtl__content {margin-top: 16px; padding: 32px 0; font-size: 16px;} .mpg-dtl__info {min-height: 60px;} .mpg-dtl__info > dt {width: 200px; padding-left: 60px; font-size: 16px;} .mpg-dtl__info > dd {padding: 20px; font-size: 16px;} .mpg-dtl__user th {width: 200px; padding-left: 60px; font-size: 16px;} .mpg-dtl__user td {padding: 15px; font-size: 16px;} .mpg-cmt__ipt {margin-right: -20px;} .mpg-cmt__ipt textarea {height: 100px;} .mpg-cmt__ipt button {width: 120px;} .mpg-chat__title {font-size: 18px;} .mpg-chat__cont {font-size: 14px;} .mpg-chat__cont textarea {font-size: 14px;} .mpg-chat__file a {font-size: 14px;} .mpg-chat__upload p {font-size: 14px;} } @media (max-width:992px) { .mpg-dtl__title h4 {font-size: 22px;} .mpg-dtl__title span {height: 30px; font-size: 13px; margin-left: 8px; -webkit-border-radius: 4px; border-radius: 4px;} .mpg-dtl__desc {margin-top: 16px;} .mpg-dtl__desc dl {font-size: 13px;} .mpg-dtl__content {margin-top: 8px; padding: 24px 0; font-size: 14px;} .mpg-dtl__info {min-height: 50px;} .mpg-dtl__info > dt {width: 120px; padding-left: 20px; font-size: 14px;} .mpg-dtl__info > dd {padding: 15px; font-size: 14px;} .mpg-dtl__user th {width: 120px; padding-left: 20px; font-size: 14px;} .mpg-dtl__user td {padding: 10px; font-size: 14px;} .mpg-cmt__ipt {margin-right: -15px;} .mpg-cmt__ipt textarea {font-size: 14px;} .mpg-cmt__ipt button {width: 100px; font-size: 16px;} .mpg-chat__profile {width: 64px; height: 64px; background-size: 32px auto !important; -webkit-border-radius: 24px; border-radius: 24px;} .mpg-chat__box {width: 400px; padding: 20px;} } @media (max-width:768px) { .mpg-dtl__title h4 {font-size: 18px;} .mpg-dtl__title span {height: 24px; font-size: 11px; margin-left: 4px;} .mpg-dtl__desc dl {font-size: 11px;} .mpg-dtl__content {font-size: 13px;} .mpg-dtl__info {min-height: auto; display: block; padding: 16px 0;} .mpg-dtl__info > dt {width: 100%; padding-left: 0; font-size: 13px;} .mpg-dtl__info > dd {padding: 0; font-size: 13px; margin-top: 4px;} .mpg-dtl__user th {width: 100px; padding-left: 10px; font-size: 13px;} .mpg-dtl__user td {padding: 8px; font-size: 13px;} .mpg-cmt__ipt {margin-right: 0;} .mpg-cmt__ipt textarea {font-size: 13px; height: 80px; border-right: none; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;} .mpg-cmt__ipt button {width: 70px; height: 80px; font-size: 14px; margin-left: 0; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;} .mpg-chat__profile {width: 40px; height: 40px; background-size: 24px auto !important; -webkit-border-radius: 16px; border-radius: 16px;} .mpg-chat__box {padding: 16px;} .mpg-chat__title {font-size: 14px;} .mpg-chat__cont {font-size: 13px; margin-top: 8px;} .mpg-chat__cont textarea {font-size: 13px;} .mpg-chat__info {margin-top: 8px; padding-top: 8px; border-top-width: 1px;} .mpg-chat__info li {font-size: 12px;} .mpg-chat__file {margin-top: 8px;} .mpg-chat__file a {font-size: 13px;} .mpg-chat__file a:before {width: 18px; height: 20px;} .mpg-chat__upload {margin-top: 8px;} .mpg-chat__upload label {height: 32px; padding: 0 8px; font-size: 12px;} .mpg-chat__upload p {font-size: 13px;} .mpg-chat__btn li {margin-right: 4px;} .mpg-chat__btn li button {height: 32px; font-size: 12px;} } /* dashboard */ .mpg-dsh__top {display: flex; margin: -80px -10px 0;} .mpg-dsh__top > div {width: 50%; padding: 0 10px;} .mpg-dsh__btn {background: #262626; color: #fff; font-size: 16px; font-weight: 500; height: 60px; padding: 0 30px; -webkit-border-radius: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center;} .mpg-dsh__user {padding: 40px 60px; height: 100%; background: #F6F8FA; -webkit-border-radius: 20px; border-radius: 20px; display: flex; align-items: center;} .mpg-dsh__user dt {flex-grow: 1;} .mpg-dsh__user dt h5 {font-size: 32px; font-weight: 600;} .mpg-dsh__user dt h5 span {color: #1954DB;} .mpg-dsh__user dt ul {margin-top: 16px; display: flex; align-items: center;} .mpg-dsh__user dt ul li {margin-right: 24px; display: flex; align-items: center;} .mpg-dsh__user dt ul li:last-child {margin-right: 0;} .mpg-dsh__user dt ul li:before {content: ''; display: block; width: 30px; height: 30px; margin-right: 8px;} .mpg-dsh__user dt ul li:nth-child(1):before {background: url('/images/v3/sub/dashboard_mail.png')no-repeat center center / cover;} .mpg-dsh__user dt ul li:nth-child(2):before {background: url('/images/v3/sub/dashboard_call.png')no-repeat center center / cover;} .mpg-dsh__user dd {flex-shrink: 0;} .mpg-dsh__sos {padding: 40px 60px; height: 100%; background: #E6F8FF; -webkit-border-radius: 20px; border-radius: 20px; display: flex; align-items: center;} .mpg-dsh__sos > dt {flex-grow: 1; display: flex; align-items: center;} .mpg-dsh__sos > dt:before {content: ''; display: block; flex-shrink: 0; width: 74px; height: 74px; margin-right: 16px; background: #fff url('/images/v3/sub/dashboard_sos.png')no-repeat center center / auto 46px; -webkit-border-radius: 10px; border-radius: 10px; box-shadow: 0px 7.5px 7.5px 0px #00000014;} .mpg-dsh__sos > dt h5 {font-size: 26px; font-weight: 500;} .mpg-dsh__sos > dt .mpg-info button {margin-left: 4px; margin-top: 6px;} .mpg-dsh__sos > dd {flex-shrink: 0;} .mpg-dsh__half {display: flex; margin: 0 -10px; padding-top: 20px;} .mpg-dsh__half > div {width: 50%; padding: 0 10px;} .mpg-dsh__box {padding: 40px; border: solid 1px #ddd; height: 100%; overflow: hidden; -webkit-border-radius: 20px; border-radius: 20px; display: flex; flex-direction: column;} .mpg-dsh__title {display: flex; flex-shrink: 0;} .mpg-dsh__title a {font-size: 26px; font-weight: 500; display: flex; align-items: center;} .mpg-dsh__title a:after {content: ''; display: block; width: 10px; height: 10px; margin-left: 8px; border-top: solid 2px #333; border-right: solid 2px #333; transform:rotate(45deg);} .mpg-dsh__list {margin-top: 20px; flex-grow: 1;} .mpg-dsh__list .brd-list th {padding: 15px 10px; font-size: 16px;} .mpg-dsh__list .brd-list td { padding: 15px 10px; font-size: 18px;} .mpg-dsh__list .brd-list td a {word-break: break-all;} .mpg-dsh__cs {height: 100%; padding: 30px 0; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; background: url('/images/v3/sub/dashboard_cs.png')no-repeat center center / cover; -webkit-border-radius: 20px; border-radius: 20px;} .mpg-dsh__cs dt {font-size: 26px; font-weight: 400;} .mpg-dsh__cs dd:before {content: ''; display: block; width: 40px; height: 3px; background: #fff; margin: 40px auto;} .mpg-dsh__cs dd h5 {font-size: 38px; font-weight: 500;} .mpg-dsh__cs dd h4 {font-size: 54px; font-weight: 700; margin-top: 8px;} .mpg-dsh__cs dd p {font-size: 22px; margin-top: 20px;} .mpg-dsh__cs dd span {display: block; font-size: 16px; margin-top: 8px; color: rgba(255,255,255,0.6);} .mpg-dsh__none {padding: 120px 0; background: #FAFBFC; margin: 40px -40px -40px; flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;} .mpg-dsh__none p {color: #555;} .mpg-dsh__none a {padding: 0 30px; height: 46px; background: #262626; color: #fff; font-size: 16px; margin-top: 20px; -webkit-border-radius: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center;} @media (max-width:1280px) { .mpg-dsh__top { margin: -64px -10px 0;} .mpg-dsh__btn {font-size: 14px; height: 50px; padding: 0 16px;} .mpg-dsh__user {padding: 30px;} .mpg-dsh__user dt h5 {font-size: 24px;} .mpg-dsh__user dt ul {display: block; margin-top: 8px;} .mpg-dsh__user dt ul li {margin-right: 0; font-size: 16px;} .mpg-dsh__sos {padding: 30px;} .mpg-dsh__sos > dt:before {width: 60px; height: 60px; background-size: auto 36px;} .mpg-dsh__sos > dt h5 {font-size: 24px;} .mpg-dsh__box {padding: 30px;} .mpg-dsh__title a {font-size: 22px;} .mpg-dsh__title a:after {width: 8px; height: 8px;} .mpg-dsh__list {margin-top: 15px;} .mpg-dsh__list .brd-list th {padding: 5px; font-size: 14px;} .mpg-dsh__list .brd-list td {padding: 15px 5px; font-size: 14px;} .mpg-dsh__cs dt {font-size: 18px;} .mpg-dsh__cs dd:before {height: 2px; margin: 20px auto;} .mpg-dsh__cs dd h5 {font-size: 24px;} .mpg-dsh__cs dd h4 {font-size: 36px;} .mpg-dsh__cs dd p {font-size: 18px; margin-top: 15px;} .mpg-dsh__cs dd span {font-size: 14px;} .mpg-dsh__none {padding: 100px 0; margin: 30px -30px -30px;} .mpg-dsh__none p {font-size: 16px;} } @media (max-width:992px) { .mpg-dsh__top {margin: -40px 0 0; display: block;} .mpg-dsh__top > div {width: 100%; padding: 0; margin-bottom: 20px;} .mpg-dsh__top > div:last-child {margin-bottom: 0;} .mpg-dsh__half {display: block; margin: 0; padding-top: 20px;} .mpg-dsh__half > div {width: 100%; padding: 0; margin-bottom: 20px;} .mpg-dsh__half > div:last-child {margin-bottom: 0;} .mpg-dsh__cs {padding: 60px 0;} } @media (max-width:768px) { .mpg-dsh__btn {font-size: 12px; height: 40px; padding: 0 10px;} .mpg-dsh__top > div {margin-bottom: 10px;} .mpg-dsh__user {padding: 20px; -webkit-border-radius: 10px; border-radius: 10px;} .mpg-dsh__user dt h5 {font-size: 16px;} .mpg-dsh__user dt ul li {font-size: 12px;} .mpg-dsh__user dt ul li:before {width: 20px; height: 20px;} .mpg-dsh__sos {padding: 20px; -webkit-border-radius: 10px; border-radius: 10px;} .mpg-dsh__sos > dt:before {width: 40px; height: 40px; background-size: auto 20px; margin-right: 8px;} .mpg-dsh__sos > dt h5 {font-size: 16px;} .mpg-dsh__sos > dt .mpg-info button {margin-left: 2px; margin-top: 3px; width: 16px; height: 16px;} .mpg-dsh__box {padding: 0; border: none; -webkit-border-radius: 0px; border-radius: 0px;} .mpg-dsh__title a {font-size: 18px;} .mpg-dsh__title a:after {width: 6px; height: 6px;} .mpg-dsh__list .brd-list th {padding: 5px 0; font-size: 12px;} .mpg-dsh__list .brd-list td {padding: 10px 5px; font-size: 12px;} .mpg-dsh__cs {-webkit-border-radius: 10px; border-radius: 10px;} .mpg-dsh__cs dt {font-size: 14px;} .mpg-dsh__cs dd:before {width: 30px;} .mpg-dsh__cs dd h5 {font-size: 20px;} .mpg-dsh__cs dd h4 {font-size: 22px;} .mpg-dsh__cs dd p {font-size: 14px; margin-top: 10px;} .mpg-dsh__cs dd span {font-size: 12px; margin-top: 4px;} .mpg-dsh__none {padding: 60px 0; margin: 10px 0 0;} .mpg-dsh__none p {font-size: 14px;} .mpg-dsh__none a {padding: 0 20px; height: 40px; font-size: 14px; margin-top: 10px;} } /* Common ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 콘텐츠 너비 가운데 정렬 */ .inner-s{margin:0 auto; max-width:1000px; width:60%} /* 마크업은 읽히고, 보이지 않게 */ /* 컬러강조 */ .strong{color:#0095ff;} .mint{color:#23c3d1;} .blue{color:#0095ff;} .purple{color:#5f71de;} /* 기울임체 */ .oblique{font-style:oblique;} /* 라인지우기 */ .l-through{text-decoration:line-through;} /* 말줄임 - width는 따로 지정 */ /* 링크 */ .link{display:inline-block; vertical-align:middle; font-weight:400; font-size:16px; line-height:1; color:#0095ff;} .link img{margin:-3px 0 0 5px; transition:.3s all;} .link:hover img{margin-left:8px;} .link-small{display:inline-block; vertical-align:middle; font-weight:400; font-size:14px; line-height:1; color:#0095ff;} .link-small img{margin:-2px 0 0 5px; transition:.3s all;} .link-small:hover img{margin-left:7px;} /* 링크위치 */ .check-block .link{margin-left:20px;} /* 다운로드 */ .download{display:inline-block; text-decoration:underline; font-weight:400; font-size:16px; line-height:1; color:#0095ff;} .download:hover{text-decoration:underline;} .download img{margin:-2px 5px 0;} /* 설명 */ .desc{margin-top:7px; font-size:14px; line-height:1.4; letter-spacing:-0.5px; color:#4089bd;} .notice-desc{margin-top:7px; font-size:14px; line-height:1.2; letter-spacing:-0.5px; color:#ff3131;} .desc + .notice-desc{margin-top:3px;} /* 제출/이동 버튼 */ .btn-submit{display:block; margin:0 auto; text-align:center; vertical-align:middle; height:60px; line-height:58px; font-size:20px; font-weight:500; border-radius:30px;} .btn-submit.mint{color:#fff; background:#23c3d1;} .btn-submit.mint:hover{background:#00b9ca;} .btn-submit.blue{color:#fff; background:#0095ff;} .btn-submit.blue:hover{background:#0084ff;} .btn-submit.purple{color:#fff; background:#5f71de;} .btn-submit.purple:hover{background:#4a60e0;} .btn-submit.black{color:#fff; background:#2d3546;} .btn-submit.black:hover{background:#2d3546;} .btn-submit.line{color:#0095ff; border:1px solid #0095ff;} .btn-submit.line:hover{background:#f1faff;} .btn-submit img{margin-left:15px;} /* 끝 버튼 */ .end-btn-area{margin-top:60px; text-align:center; line-height:0; font-size:0;} .end-btn-area button, .end-btn-area a{display:inline-block; text-align:center; vertical-align:middle; width:calc(50% - 5px); height:60px; line-height:58px; font-size:20px; font-weight:500; border-radius:30px;} .end-btn-area button:first-child, .end-btn-area a:first-child{margin-right:10px;} .end-btn-area .blue{color:#fff; background:#0095ff;} .end-btn-area .blue:hover{background:#0084ff;} .end-btn-area .line{color:#0095ff; border:1px solid #0095ff;} .end-btn-area .line:hover{background:#f1faff;} .end-btn-area .black{color:#fff; background:#2d3546;} .end-btn-area .black:hover{background:#2d3546;} .end-btn-area img{margin-left:15px;} @media (max-width: 1920px) { /* 서브 타이틀 */ .sub-tit{margin-bottom:50px; text-align:center;} .sub-tit h3{font-size:45px; font-weight:300; line-height:1; letter-spacing:-3px; color:#000;} .sub-tit h3 strong{font-weight:500;} .sub-tit h3 strong.black{font-weight:900;} .sub-tit h3 + p{margin-top:10px; font-size:16px; font-weight:300; line-height:1.4;} .sub-tit h3 + p strong{font-weight:400;} .sub-tit h4{font-size: 19px; margin-top: 15px; font-weight: 400;} .sub-tit .copy{margin-top:20px; font-size:18px; font-weight:300; line-height:1.6;} .sub-tit .copy.mint{color:#23c3d1;} .sub-tit .copy.blue{color:#0095ff;} .sub-tit .copy.purple{color:#5f71de;} /* table */ .table-tit{margin-top:80px; padding-bottom:15px;} .table-tit:first-of-type{margin-top:0;} .table-tit h4{font-size:30px; font-weight:400; line-height:1; letter-spacing:-2px; color:#000;} .table-tit span{font-size:20px; color:#0095ff;} .table-tit h4 + p{margin-top:10px; font-size:16px; line-height:1.3; color:#666;} .table-tit h4 + p.desc{margin-top:7px; font-size:13px; line-height:1.2; color:#4089bd;} /* table row */ .table-row{width:100%; border-top:2px solid #555; border-bottom:1px solid #555;} .table-row th{padding:15px; text-align:left; line-height:1.3; font-weight:400; color:#000; border-top:1px solid #ddd;} .table-row td{padding:15px; text-align:left; line-height:1.3; word-break:keep-all; border-top:1px solid #ddd;} .table-row tr:first-child th, .table-row tr:first-child td{border-top:0} .table-row .td-price{margin-top:5px; font-weight:400; color:#0095ff;} .table-row .list dt{margin-bottom:3px; font-weight:400; color:#000;} .table-row .list dd, .table-row .list li{line-height:1.6;} .table-row .list + .list{margin-top:12px;} /* table col */ .table-col{width:100%; border-top:2px solid #555; border-bottom:1px solid #555;} /* .table-col tbody tr{transition:0.3s all;} .table-col tbody tr:hover{background:#f9f9f9;} .table-col tbody tr.no-data:hover{background:none;} */ .table-col thead th{padding:20px 10px; text-align:center; font-size:16px; font-weight:400; color:#000; border-bottom:1px solid #aaa;} .table-col tbody th{padding:20px 10px; text-align:center; font-size:16px; font-weight:400; color:#000; border-bottom:1px solid #ddd;} .table-col td{padding:20px 10px; text-align:center; font-size:16px; font-weight:300; word-break:keep-all; color:#555; border-bottom:1px solid #ddd;} .table-col tr.no-data td{padding:80px 20px; color:#999;} .table-col td.cate{font-weight:400; color:#6b9abb;} .table-col td.tit{text-align:left;} .table-col td.tit a{display:inline-block; vertical-align:middle; max-width:calc(100% - 40px);} .table-col td.tit a:hover{color:#000;} .table-col td.tit span{vertical-align:middle; margin-left:3px;} .table-col .state{display:inline-block; padding:0 14px; margin-right:10px; height:24px; line-height:24px; font-size:13px; color:#fff; border-radius:12px;} .table-col .state.ing{background:#6b9abb;} .table-col .state.end{background:#999;} /* 게시판 리스트 버튼 */ .table-col .btn-board{display:inline-block; padding:0 50px; height:40px; line-height:38px; font-size:16px; font-weight:400; text-align:center; color:#0095ff; border:1px solid #0095ff; border-radius:25px;} .table-col .btn-board:hover{background:#f1faff;} /* sub visual */ .sub-visual{position:relative; width:100%; height:350px;} .sub-visual.design{background:url('/images/v2/sub/designcenter_bg.jpg') no-repeat center center;} .sub-visual.myshop{background:url('/images/v2/sub/myshop_bg.jpg') no-repeat center center;} .sub-visual.center{background:url('/images/v2/sub/center_bg.jpg') no-repeat center center;} .sub-visual.addservice{background:url('/images/v2/sub/addservice/addservice_bg.jpg') no-repeat center center;} .sub-visual .txt-area{position:absolute; top:55%; left:0; right:0; padding-left:10%; transform:translateY(-50%);} .sub-visual .txt-area h2{font-size:45px; font-weight:400; letter-spacing:-2px; line-height:1; color:#fff;} .sub-visual .txt-area p{margin-top:15px; font-size:16px; font-weight:300; line-height:1.4; color:#fff;} .sub-visual .txt-area p br {display: none;} .img-responsive {max-width: 100%;} .info-visual{background: #5D91F5 url('/images/v2/sub/visual_info01.png') no-repeat right 20% center / auto 100%; position: relative; width: 100%; height: 350px;} .info-visual .txt-area{position: absolute; top: 140px; left: 0; right: 0; padding-left: 120px; margin: auto;} .info-visual .txt-area h2{font-size: 45px; font-weight: 400; letter-spacing: -3px; line-height: 1; color: #fff;} .info-visual .txt-area p{margin-top: 15px; font-size: 21px; font-weight: 300; line-height: 1.4; color: #fff;} .info-tab{border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center;} .info-tab ul{display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 18px;} .info-tab ul li {flex: 1;} .info-tab ul li.active{border-bottom: 3px solid #5D91F5;} .info-tab ul li.active a {color: #5D91F5;} .info-tab ul li a {padding: 15px 0; display: block; font-weight: 400;} } @media (max-width:1280px) { .sub-tit h3{font-size: 36px;} .sub-tit .copy {font-size: 16px;} } @media (max-width:992px) { /* 서브 타이틀 */ .sub-tit{margin-bottom:25px; text-align:center; word-break:keep-all;} .sub-tit h3{font-size:25px; font-weight:300; line-height:1.4; letter-spacing:-2px; color:#000;} .sub-tit h3 strong{font-weight:500;} .sub-tit h3 strong.black{font-weight:900;} .sub-tit h3 + p{margin-top:5px; font-size:14px; font-weight:300; line-height:1.6;} .sub-tit h3 + p strong{font-weight:400;} .sub-tit h4{font-size:17px; font-weight:300; line-height:1.3; letter-spacing:-1px; color:#000; margin-top: 10px;} .sub-tit .copy{margin-top:10px; font-size:14px; font-weight:300;} .sub-tit .copy.mint{color:#23c3d1;} .sub-tit .copy.blue{color:#0095ff;} .sub-tit .copy.purple{color:#5f71de;} .sub-tit2 {margin:15px 0 50px; padding:0 2%; word-break:keep-all;} .sub-tit2 h3{font-size: 18px; line-height: 1.2; margin-bottom: 10px; display: block;} .sub-tit2 h3 strong{font-weight:500;} /* table */ .table-tit{margin:50px 0 10px;} .table-tit:first-of-type{margin-top:0;} .table-tit h4{font-size:20px; font-weight:400; line-height:1; letter-spacing:-2px; color:#000;} .table-tit span{font-size:20px; color:#0095ff;} .table-tit h4 + p{margin-top:5px; padding-bottom:5px; font-size:14px; line-height:1.4; color:#666;} .table-tit h4 + p.desc{font-size:12px; line-height:1.2; color:#6b9abb;} /* table row */ .table-row{width:100%; border-top:2px solid #555; border-bottom:1px solid #555;} .table-row th{padding:10px; text-align:left; line-height:1.3; font-size:13px; font-weight:400; color:#000; border-top:1px solid #ddd;} .table-row td{padding:10px; text-align:left; line-height:1.3; font-size:13px; word-break:keep-all; border-top:1px solid #ddd;} .table-row tr:first-child th, .table-row tr:first-child td{border-top:0} .table-row .td-price{margin-top:5px; font-weight:400; color:#0095ff;} table .list dt{margin-bottom:3px; font-weight:400; color:#000;} table .list dd, table .list li{position:relative; padding-left:8px; margin-top:4px; line-height:1.3;} table .list dd:first-child, table .list li:first-child{margin-top:0;} table .list dd:before, table .list li:before{position:absolute; top:8px; left:0; content:""; display:inline-block; width:4px; height:1px; background:#555;} table .list + .list{margin-top:12px;} /* table col */ .table-col{width:100%; border-top:2px solid #555; border-bottom:1px solid #555;} .table-col + .table-col{margin-top:15px;} .table-col thead th{padding:10px 5px; text-align:center; line-height:1.3; font-size:13px; font-weight:400; color:#000; border-bottom:1px solid #aaa;} .table-col tbody th{padding:10px 5px; text-align:center; line-height:1.3; font-size:13px; font-weight:400; color:#000; border-bottom:1px solid #ddd;} .table-col td{padding:10px 5px; text-align:center; line-height:1.3; font-size:13px; font-weight:300; word-break:keep-all; color:#555; border-bottom:1px solid #ddd;} .table-col tr.no-data td{padding:80px 20px; color:#999;} .table-col td.cate{font-weight:400; color:#6b9abb;} .table-col td.tit{text-align:left;} .table-col td.tit a:hover{color:#000;} .table-col .state{display:inline-block; padding:0 14px; margin-right:10px; height:24px; line-height:24px; font-size:13px; color:#fff; border-radius:12px;} .table-col .state.ing{background:#6b9abb;} .table-col .state.end{background:#999;} .table-scroll {margin: 0 -5%; padding: 0 5%; overflow-x: auto;} .table-scroll table {width: 600px;} } @media (max-width:768px) { .sub-tit h3 span {display: block;} .sub-tit h3 span + br {display: none;} .desc{font-size:12px;} .notice-desc{font-size:12px;} .check-block label {font-size: 13px;} .check-block .link{margin-left:10px; font-size: 13px;} .sub-visual{height:240px;} .sub-visual.center {background-position: 57% center !important; background-size: auto 100% !important;} .sub-visual .txt-area{padding-left:20px; top: 60%; padding-right: 50%;} .sub-visual .txt-area h2{font-size:30px;} .sub-visual .txt-area p{font-size:14px; line-height:1.6;} .sub-visual .txt-area p br {display: block;} .info-visual{height: 240px; background-position: right -100% top 80%; background-size: auto 70%;} .info-visual .txt-area{padding-left:20px; top: 40%; padding-right: 40%;} .info-visual .txt-area h2{font-size:30px;} .info-visual .txt-area p{font-size:13px; line-height:1.6;} .info-tab{border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center;} .info-tab ul{display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 18px;} .info-tab ul li {flex: 1;} .info-tab ul li.active{border-bottom: 3px solid #5D91F5;} .info-tab ul li.active a {color: #5D91F5;} .info-tab ul li a {padding: 15px 0; display: block; font-weight: 400;} .table-row th{font-size:12px;} .table-row td{font-size:12px;} .table-col thead th{font-size:12px; padding: 5px 2px;} .table-col tbody th{font-size:12px;} .table-col td{font-size:12px;} } @media (max-width:340px) { .check-block label {font-size: 12px;} } /* ------------- 폼 영역 ------------- */ .form-wrap{margin:0 auto; max-width:700px;} .form-tit{margin:80px 0 10px;} .form-tit:first-of-type{margin-top:0;} .form-tit h4{display:inline-block; font-size:30px; font-weight:400; line-height:1; letter-spacing:-2px; color:#000;} .form-tit span{font-size:20px; color:#0095ff;} .form-tit h4 + p{margin-top:5px; padding-bottom:5px; font-size:15px; line-height:1.4; letter-spacing:-0.5px; color:#666;} .form-tit h4 + p.desc{display:inline-block; margin-left:15px; padding-bottom:0; font-size:13px; line-height:1.2; color:#4089bd;} /* 하얀 박스 */ .form-wrap .data-area{padding:30px 40px; background:#fff; border-radius:10px;} .form-wrap .data-area > .tit{display:block; margin-bottom:10px; width:100%; line-height:1; font-size:16px; font-weight:500; color:#000;} /* submit btn */ .form-wrap .btn-submit{margin-top:60px; width:400px;} /* ------------- 폼 블럭 ------------- */ .form-block{margin-top:20px;} .form-block.pd5{padding:5px 0;} .form-block:first-of-type{margin-top:0;} .form-block .tit{display:block; margin-bottom:7px; line-height:1; font-size:16px; font-weight:500; color:#000;} .form-block .tit span{font-size:14px; color:#888;} .form-block .tit span.required{color:#0095ff;} .form-block{/* line-height:0; font-size:0; */} .form-block:after{content:""; display:block; clear:both;} .form-block .col1{float:left; width:100%;} .form-block .col2{float:left; width:calc(50% - 5px);} .form-block .col2 + .col2{margin-left:10px;} .form-block input[type="text"], .form-block input[type="password"], .form-block select, .form-block textarea{width:100%; height: 50px;} .form-block.search{display:flex; align-items: center;} /* 선택된 */ .form-block .selected{} /* 보기 페이지 */ .form-wrap.view .form-tit{padding-bottom:10px; border-bottom:2px solid #555;} .form-wrap.view .form-block{padding:0 15px;} /* 선택시 노출되는 폼 */ .depth2-form-block{margin-top:20px;} .depth2-form-block .form-block{position:relative; padding-left:40px;} .depth2-form-block .form-block:before{position:absolute; top:5px; left:0; content:""; display:inline-block; width:40px; height:40px; background:url('/images/v2/sub/depth2_form_block.png') no-repeat 0 0;} /* form btn */ .btn-form{display:inline-block; text-align:center; vertical-align:middle; padding:0 20px; width:130px; height:40px; line-height:38px; font-size:16px; font-weight:400; color:#0095ff; border:1px solid #0095ff; border-radius:5px;} .btn-form.blue{color:#fff; background:#0095ff;} /* 버튼이랑 같이 */ .form-block.with-btn input[type="text"], .form-block.with-btn select{float:left; margin-right:5px; width:calc(100% - 135px);} /* 검색 */ .form-block.search select{margin-top:-1px; margin-right:5px; width:25%; height:40px;} .form-block.search input[type="text"]{margin-top:-1px; margin-right:5px; width:70%; height:40px;} #btn_search {width:20%; padding:0;} /* 등록 */ .form-block.register input[type="text"]{margin-top:-1px; margin-right:5px; width:calc(100% - 135px);} /* 도메인 */ .form-block.domain{line-height:40px; font-size:16px;} .form-block.domain input[type="text"]{float:right; margin-left:10px; width:calc(100% - 90px);} /* ------------- 신청하기 ------------- */ /* 폼 옵션 블럭 */ .option-area{margin-top:30px;} .form-tit + .option-area{margin-top:0;} .option-area > .tit{display:block; margin-bottom:10px; width:100%; line-height:1; font-size:16px; font-weight:500; color:#000;} .option-area > .tit span{font-size:14px; color:#888;} /* 고정값 */ .option-area .selected-block span{vertical-align:middle; color:#000;} .option-area .selected-block .btn-form{margin-left:20px;} .option-area .selected-block .pop-txt{position:relative; display:inline-block; text-align:center; margin-left:20px; width:120px; height:30px; line-height:30px; font-size:14px; letter-spacing:0; color:#fff; background:#ff5c2b; border-radius:4px;} .option-area .selected-block .pop-txt:after{position:absolute; top:50%; left:-7px; content:""; margin-top:-4px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:8px solid #ff5c2b;} /* 결과부분 */ .option-area .result-block{margin-top:15px; padding-top:10px; text-align:right; border-top:1px dashed #d5d5d5;} .option-area .result-block:after{content:""; display:block; clear:both;} .option-area .result-block .selected{float:left; font-weight:400; color:#000;} .option-area .result-block .selected img{margin-right:10px;} .option-area .result-block .selected + dl{float:right;} .option-area .result-block dt{display:inline-block; margin-right:20px; vertical-align:middle; font-size:14px; font-weight:400; line-height:1; color:#555;} .option-area .result-block dd{display:inline-block; vertical-align:middle; line-height:1; font-size:18px; font-weight:500; color:#0095ff;} .option-area .result-block dd.price .num{font-size:20px; font-weight:700;} .option-area .result-block dd.price .unit{font-size:14px; font-weight:400;} /* 항목 합계 */ .total-area{margin-top:30px; padding-top:30px; border-top:1px dashed #555;} .total-area:after{content:""; display:block; clear:both;} .total-area dl{position:relative; float:left; text-align:center; width:calc(100%/3);} .total-area dl:before{content:""; display:block; position:absolute; top:50%; left:-15px; margin-right:-15px; width:30px; height:30px;} .total-area dl.minus:before{background:url('/images/v2/sub/sum_minus.png') no-repeat center center;} .total-area dl.equel:before{background:url('/images/v2/sub/sum_equel.png') no-repeat center center;} .total-area dt{margin-bottom:15px; font-size:16px; font-weight:400; line-height:1; color:#000;} .total-area dt span{font-size:14px; font-weight:300; color:#666;} .total-area dd{line-height:20px; font-size:18px; font-weight:400; color:#5d6576;} .total-area dd.price .num{font-size:28px; font-weight:600; letter-spacing:-2px;} .total-area dd.price .unit{font-size:20px; font-weight:400;} .total-area dl.equel dd{color:#5f71de;} /* 총 금액 */ .total-price{margin-top:20px; text-align:right;} .total-price dt{display:inline-block; vertical-align:middle; margin-right:15px; line-height:30px; font-size:16px; font-weight:400; color:#000;} .total-price dt span{font-size:14px; font-weight:300; color:#666;} .total-price dd.price{display:inline-block; vertical-align:middle; line-height:30px; color:#5f71de;} .total-price dd.price .num{font-size:28px; font-weight:600; letter-spacing:-1.5px;} .total-price dd.price .unit{font-size:20px; font-weight:400;} /* 신청 프로세스 */ .app-process{margin:0 auto 80px; max-width:700px; line-height:0; font-size:0; display: flex; justify-content: center; gap: 5px;} .app-process li{width: calc(100% / 3); padding:20px 0 19px; height:80px; text-align:center; font-size:16px; line-height:1.3; color:#fff; background:#a5b7c4; border-radius:5px;} .app-process li > div{display:inline-block; vertical-align:middle; text-align:left;} .app-process li > img{display:inline-block; margin-right:15px;} .app-process li span{display:block; font-weight:700; font-size:15px;} .app-process li.on{position:relative; background:#0095ff;} .app-process li.on:after{position:absolute; bottom:-12px; left:50%; content:""; width:0; height:0; margin-left:-8px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:12px solid #0095ff;} /* 신청 완료 페이지 */ .app-finish{margin:-30px 0 50px; padding:50px; text-align:center; background:#fff; border:1px solid #e5e5e5; border-radius:10px;} .app-finish img{margin:0 auto 30px; display:block;} .app-finish .main-copy{font-size:30px; letter-spacing:-2px; line-height:1.2; color:#000;} .app-finish .main-copy strong{font-weight:500; color:#0095ff;} .app-finish .sub-copy{margin-top:20px; font-size:16px; line-height:1.3; color:#555;} @media (max-width:768px) { .form-tit{margin:60px 0 10px;} .form-tit h4{font-size:20px;} .form-tit span{font-size:16px;} .form-tit h4 + p{font-size:14px;} .form-tit h4 + p.desc{font-size:12px; margin-left: 10px;} .form-wrap .data-area{padding:20px 0;} .form-wrap .data-area > .tit{font-size:14px;} .form-wrap .btn-submit{width: 200px; margin-top:30px; height: 50px; line-height: 48px; font-size: 16px;} .form-wrap .btn-submit img {width: 20px;} .form-block .col2{float: none; width: 100%;} .form-block .col2 + .col2{margin-left:0; margin-top: 5px;} .form-block input[type="text"], .form-block input[type="password"], .form-block select, .form-block textarea{height: 40px; font-size: 14px; border-radius: 4px;} .form-block .tit {font-size: 14px;} .form-block.with-btn input[type="text"], .form-block.with-btn select {width: calc(100% - 85px);} .btn-form{padding:0; width:80px; font-size:14px; border-radius:4px;} .option-area{margin-top:0;} .option-area .result-block dt {margin-right: 10px; font-size: 13px;} .total-area{margin-top:20px; padding-top:0;} .total-area dl {float: none; width: 100%; padding: 10px 0; border-bottom: dotted 1px #ddd; text-align: left; display: flex; align-items: center; justify-content: space-between;} .total-area dl:before{display: none;} .total-area dt{margin-bottom:0; font-size:13px; flex-grow: 1;} .total-area dt span{font-size:12px; margin-left: 5px;} .total-area dd.price .num{font-size:20px;} .total-area dd.price .unit{font-size:12px; margin-left: 5px;} .app-process{margin:0 auto 40px;} .app-process li {font-size: 13px; height: 60px; padding: 10px 0;} .app-process li > div {display: block; text-align: center;} .app-process li span{font-size:14px;} .app-process li > img {display: none;} } /* Header ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 상단배너 */ #topBanner{display:block; width:100%; height:100px; background:url('/images/v2/main/top_banner.jpg') no-repeat center center/cover;} #topBanner .banner-link{display:block; width:100%; height:100%; text-indent:-9999em; overflow:hidden;} #topBanner .inner{position:relative; height:100px;} #topBanner .btn-close{position:absolute; top:10px; right:0; display:inline-block; vertical-align:middle; width:18px; height:18px;} #topBanner .btn-close span{position:absolute; top:50%; left:0; right:0; display:inline-block; vertical-align:middle; margin:-1px auto 0; width:20px; height:2px; background:#fff; border-radius:1px;} #topBanner .btn-close span:first-child{transform:rotate(-45deg);} #topBanner .btn-close span:last-child{transform:rotate(45deg);} /* 후이즈 메뉴 */ #whoisGnb #commonHead{background:#fff; border-bottom:1px solid #eee;} #whoisGnb .common_head_wrap{width:1440px;} /* Quick menu ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #quickMenu{z-index:888; position:fixed; top:50%; right:50px;} #quickMenu ul{padding:10px 0; width:94px; background:#2d3546; border-radius:10px; box-shadow:0 0 10px 0 rgba(0,0,0,0.2);} #quickMenu li{text-align:center; border-top:1px solid #575a61;} #quickMenu li:first-child{border-top:0;} #quickMenu li img{display:block; margin:0 auto 10px;} #quickMenu li a{display:block; padding:18px 0; width:100%; height:100%; font-weight:300; line-height:1.4; font-size:11.5px; font-family:'맑은 고딕','MalgunGothic'; color:#fff; background:#2d3546;} #quickMenu .btn-top{display:block; margin:15px auto 0; text-align:center; padding-top:20px; width:70px; height:70px; font-size:13px; font-weight:500; letter-spacing:0; color:#fff; background:#5d6576; border-radius:50%; box-shadow:0 0 10px 0 rgba(0,0,0,0.2);} #quickMenu .btn-top img{display:block; margin:0 auto 3px;} /* 원격지원 서비스 */ .remote-intro{position:relative; width:100%; height:500px; background:url('/images/v2/sub/remote_bg.jpg') no-repeat center center;} .remote-intro .txt-area{padding-top:140px; text-align:center;} .remote-intro .txt-area h2{margin-bottom:50px; line-height:1; font-size:55px; font-weight:500; letter-spacing:-2px; color:#fff;} .remote-intro .txt-area .main-copy{margin-bottom:10px; font-size:25px; font-weight:400; color:#fff;} .remote-intro .txt-area .sub-copy{line-height:1.7; font-size:16px; font-weight:300; color:#fff;} .remote-intro .btn-area{position:absolute; left:0; right:0; top:calc(100% - 30px); margin:auto; text-align:center; width:400px;} .remote-intro .btn-area a{display:block; width:100%; height:60px; text-align:center; line-height:60px; font-size:20px; font-weight:500; color:#fff; background:#0095ff; border-radius:30px;} .remote-list li{margin-top:80px;} .remote-list li:first-child{margin-top:0;} .remote-list .tit{padding:0 30px; width:100%; height:50px; line-height:50px; font-size:18px; font-weight:400; color:#000; border-radius:25px; background:#f5f5f5;} .remote-list .tit strong{font-weight:500; color:#0095ff;} .remote-list .tit span{display:inline-block; margin:-2px 10px 0 0; width:27px; height:27px; text-align:center; vertical-align:middle; line-height:27px; font-size:14px; font-weight:700; color:#fff; background:#2d3546; border-radius:50%;} .remote-list .num{margin-top:30px; text-align:center; line-height:35px;} .remote-list .num div{display:inline-block; vertical-align:middle;} .remote-list .num div:first-child{padding-top:5px; font-size:30px; color:#000;} .remote-list .num div:last-child{margin-left:15px; letter-spacing:-2px; font-weight:500; font-size:35px; color:#0095ff;} .remote-list .num div:last-child strong{display:inline-block; vertical-align:middle; font-size:45px; font-weight:700;} .remote-list .num div:last-child span{display:inline-block; vertical-align:middle;} .remote-list .info_time {text-align:center; color:#000; margin-top:10px;} /* Layer popup ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .pop-wrap{display:none; z-index:999; position:fixed; top:0; left:0; width:100%; height:100%;} .pop-bg1, .pop-bg{z-index:998; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);} .pop-box{z-index:999; position:absolute; top:50%; left:0; right:0; margin:0 auto; width: 90%; max-width:700px; background:#fff; border-radius:20px; box-shadow:0 0 20px 0 rgba(0,0,0,0.2);} .pop-box.big{max-width:1100px;} .pop-head{padding:50px 50px 30px;} .pop-head h2{display:inline-block; font-size:30px; font-weight:500; letter-spacing:-2px; color:#000;} .pop-head h2 strong{font-weight:500; color:#0095ff;} .pop-head p{display:inline-block; margin-left:20px; font-size:18px; font-weight:300; color:#000;} .pop-head p.block{display:block; margin:0;} .pop-head p strong{font-weight:300; color:#0095ff;} .pop-head p.copy{display:block; margin:10px 0 0 0;} .pop-con{padding:50px;} .pop-head + .pop-con{padding:0 50px 50px;} .pop-box.big .pop-con{width: 100%; max-width:1100px; height:512px; overflow-x:hidden; overflow-y:auto;} .pop-con .scroll-box{/*padding:30px;*/ height:300px; font-size:14px; overflow-x:hidden; overflow-y:scroll; white-space:pre-line; border:1px solid #eee;} .pop-foot{line-height:0; font-size:0;} .pop-foot .btn-area{padding:0 50px 50px;} .pop-foot a, .pop-foot button{display:inline-block; text-align:center; height:50px; line-height:50px; font-size:18px; font-weight:500; border-radius:25px;} .pop-foot .bad{margin-right:10px; width:180px; color:#0095ff; background:#d7eeff;} .pop-foot .good{width:410px; color:#fff; background:#0095ff;} .pop-foot .normal{width:100%; height:60px; line-height:60px; color:#0095ff; border-top:1px solid #ddd; border-radius:0;} .pop-table{width:100%; border-top:2px solid #555; border-bottom:1px solid #555;} .pop-table thead th{padding:15px 10px; text-align:center; font-size:16px; font-weight:400; color:#000; border-bottom:1px solid #aaa;} .pop-table tbody th{padding:10px; text-align:center; font-size:16px; font-weight:400; color:#000; border-bottom:1px solid #ddd;} .pop-table td{padding:10px; text-align:center; font-size:16px; font-weight:300; color:#555; border-bottom:1px solid #ddd;} .pop-wrap#thirdInformation .pop-box{width: 800px;} .pop-wrap#thirdInformation .pop-head{padding-bottom: 20px;} .pop-wrap#thirdInformation .pop-head .block strong{font-weight: revert;} .pop-wrap#thirdInformation .pop-head>div{border: 1px solid #0095ff; padding: 5px;} .pop-wrap#thirdInformation .pop-head div div{color: #0095ff; text-align: center; padding: 20px 0 10px 0; font-size: 13px; font-weight: bold;} .pop-wrap#thirdInformation .pop-head div table{border: 1px solid lightgray; width: 100%;} .pop-wrap#thirdInformation .pop-head div table th{padding: 5px 20px 5px 20px; text-align: center; background-color:#2222; font-weight: 500; font-size: 13px; border-right: 1px solid lightgray;} .pop-wrap#thirdInformation .pop-head div table th:nth-child(3){width: 155px;} .pop-wrap#thirdInformation .pop-head div table th:nth-child(4){width: 135px;} .pop-wrap#thirdInformation .pop-head div table td{font-size: 13px; border-right: 1px solid lightgray; padding: 10px} .pop-wrap#thirdInformation .pop-head div table td:nth-child(4){font-size: 13px; padding: 10px; border: none;} .pop-wrap#thirdInformation .pop-con{padding-bottom: 20px;} .pop-wrap#thirdInformation .pop-con label input{display: revert; width: 15px; height: 15px; border: 1px solid black; appearance: revert;} .pop-wrap#thirdInformation .pop-foot .btn-area {text-align-last: justify; width: 530px; margin: auto;} .pop-wrap#thirdInformation .pop-foot .btn-area button{width: 150px; text-align-last: center; border-radius: 10px;} @media (max-width:768px) { .pop-box {height: 100%; width: 100%; margin-top: 0 !important; border-radius: 0; top: 0;} .pop-head {padding: 0 20px; height: 70px; display: flex; flex-direction: column; justify-content: center;} .pop-head h2 {font-size: 18px;} .pop-head p {margin-left: 0; font-size: 14px;} .pop-head + .pop-con {padding:0 20px 20px; height: calc(100% - 130px) !important;} .pop-con .scroll-box {height: 100%; white-space: normal;} .pop-head + .pop-con .content {padding-top: 0; padding-bottom: 0;} .pop-head + .pop-con .sub-tit {margin-bottom: 15px; padding-top: 20px;} .pop-head + .pop-con .sub-tit h3 {font-size: 18px;} .pop-head + .pop-con .stip {font-size: 14px; line-height: 1.6;} .pop-head + .pop-con .inner {padding: 20px;} .pop-head + .pop-con .stip .inner h4 {font-size: 16px;} .pop-table thead th{padding:5px; font-size:12px;} .pop-table tbody th{padding:5px; font-size:12px;} .pop-table td{padding:5px; font-size:12px;} } /* Main page ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 메인 비주얼 --------------------------------------------------------------------------------------- */ #mainVisual{width:100%; height:574px; background:url('/images/v2/main/main_visual01.jpg') no-repeat center center/cover;} #mainVisual .inner{position:relative; height:574px;} #mainVisual .txt-area{position:absolute; top:0; bottom:0; left:184px; margin:auto; height:313px;} #mainVisual .copy-area{position:relative; width:460px;} #mainVisual .copy-area:before{position:absolute; top:-5px; left:-43px; content:""; display:block; width:28px; height:22px; background:url('/images/v2/main/visual_mark_l.png') no-repeat center center;} #mainVisual .copy-area:after{position:absolute; bottom:35px; right:-43px; content:""; display:block; width:28px; height:22px; background:url('/images/v2/main/visual_mark_r.png') no-repeat center center;} #mainVisual .copy-area p{color:#fff; text-shadow:0 0 15px rgba(69,117,181,0.5);} #mainVisual .sub-copy1{margin-bottom:15px; font-size:36px; font-weight:500; letter-spacing:-2px; line-height:1;} #mainVisual .sub-copy2{margin-bottom:25px; font-size:19px; font-weight:300; line-height:1.4;} #mainVisual .sub-copy2 strong{font-weight:500;} #mainVisual .main-copy{font-size:54px; font-weight:300; letter-spacing:-3px; line-height:1;} #mainVisual .main-copy em{font-weight:500;} #mainVisual .btn-area{margin-top:80px;} #mainVisual .btn-area a{display:inline-block; margin-left:10px; width:180px; height:50px; text-align:center; line-height:48px; font-weight:400; font-size:17px; color:#fff; border:1px solid #fff; border-radius:25px; text-shadow:0 0 15px rgba(69,117,181,0.5);} #mainVisual .btn-area a:first-child{margin-left:0;} #mainVisual .btn-area a:after{content:""; display:inline-block; margin-left:15px; width:35px; height:11px; background:url('/images/v2/common/btn_arrow_w.png') no-repeat center center;} #mainVisual .btn-area a:hover{background:#fff; text-shadow:none;} #mainVisual .btn-area a.mint:hover{color:#23c3d1;} #mainVisual .btn-area a.blue:hover{color:#0095ff;} #mainVisual .btn-area a.violet:hover{color:#6171e0;} #mainVisual .btn-area a.mint:hover:after{background:url('/images/v2/common/btn_arrow_m.png') no-repeat center center;} #mainVisual .btn-area a.blue:hover:after{background:url('/images/v2/common/btn_arrow_b.png') no-repeat center center;} #mainVisual .btn-area a.violet:hover:after{background:url('/images/v2/common/btn_arrow_p.png') no-repeat center center;} /* 메인 타이틀 */ .main-tit{text-align:center;} .main-tit h2{position:relative; display:inline-block; line-height:1.3; font-size:45px; font-weight:300; letter-spacing:-2px; color:#000;} .main-tit h2:before{position:absolute; top:0; left:-43px; content:""; display:block; width:28px; height:22px; background:url('/images/v2/main/tit_mark_l.png') no-repeat center center;} .main-tit h2:after{position:absolute; top:0; right:-43px; content:""; display:block; width:28px; height:22px; background:url('/images/v2/main/tit_mark_r.png') no-repeat center center;} .main-tit strong{font-weight:500;} /* 어떤 쇼핑몰이 필요하세요? --------------------------------------------------------------------------------------- */ #mainItem .main-tit{margin-top:60px;} #mainItem .item-list li:nth-child(2){background:#f1faff;} #mainItem .item-list li .inner{display:table; table-layout:fixed; height:700px;} #mainItem .item-list .img-area{display:table-cell; width:50%; text-align:center; vertical-align:middle;} #mainItem .item-list .txt-area{display:table-cell; width:50%; text-align:left; vertical-align:middle;} #mainItem .item-list li:nth-child(1) .txt-area, #mainItem .item-list li:nth-child(3) .txt-area{padding:0 75px 0 180px;} #mainItem .item-list li:nth-child(2) .txt-area{padding:0 180px 0 50px;} /* 서비스명 */ #mainItem .item-list .title{position:relative;} #mainItem .item-list h3{margin-bottom:20px; font-size:40px; font-weight:300; letter-spacing:-2px; color:#000;} #mainItem .item-list h3 strong{font-weight:500;} #mainItem .item-list h3 span{display:inline-block; margin:-4px 12px 0 0; width:36px; height:36px; text-align:center; vertical-align:middle; line-height:34px; font-size:18px; font-weight:600; border:1px solid #999; border-radius:4px;} /* 말풍선 카피 */ #mainItem .item-list .pop-txt{position:absolute; top:-50px; left:48px; display:inline-block; padding:0 20px; height:40px; line-height:40px; font-size:17px; font-weight:400; color:#fff; background:#2d3546; border-radius:4px;} #mainItem .item-list .pop-txt strong{font-weight:400;} #mainItem .item-list li:nth-child(1) .pop-txt strong{color:#00ebff;} #mainItem .item-list li:nth-child(2) .pop-txt strong{color:#64bfff;} #mainItem .item-list li:nth-child(3) .pop-txt strong{color:#b0a5ff;} #mainItem .item-list .pop-txt:after{position:absolute; bottom:-10px; left:15px; content:""; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:13px solid #2d3546;} /* 서브 카피 */ #mainItem .item-list .sub-txt{margin-bottom:20px; font-size:17px; font-weight:300; color:#666;} /* 태그 */ #mainItem .item-list .tag{font-weight:17px; font-weight:400;} #mainItem .item-list li:nth-child(1) .tag{color:#23c3d1;} #mainItem .item-list li:nth-child(2) .tag{color:#0095ff;} #mainItem .item-list li:nth-child(3) .tag{color:#5f71de;} /* 가격 상자 */ #mainItem .item-list .price-box{margin-top:20px; padding:23px 40px; border:1px dashed #d5d5d5; border-radius:15px;} #mainItem .item-list .price-box > dl > dt{display:inline-block; vertical-align:middle; width:90px; font-weight:500; font-size:15px; color:#000;} #mainItem .item-list li:nth-child(2) .price-box > dl > dt{display:block; width:100%;} #mainItem .item-list .price-box > dl > dd{display:inline-block; vertical-align:middle;} #mainItem .item-list .price .term{font-size:20px; font-weight:300;} #mainItem .item-list .price .num{font-size:24px; font-weight:600;} #mainItem .item-list .price .unit{font-size:16px; font-weight:400;} /* 할인 전 금액 */ #mainItem .item-list .price-box .no-discount{display:inline-block; vertical-align:middle; color:#999;} #mainItem .item-list .no-discount .price{position:relative;} #mainItem .item-list .no-discount .price:after{position:absolute; top:55%; content:""; display:block; width:100%; height:1px; background:#999;} /* 할인 금액 */ #mainItem .item-list .price-box .discount{position:relative; display:inline-block; vertical-align:middle; padding-left:45px; margin-left:10px;} #mainItem .item-list .price-box .discount:before{position:absolute; top:50%; left:0; content:""; display:inline-block; vertical-align:middle; width:35px; height:11px;} #mainItem .item-list li:nth-child(1) .price-box .discount:before{background:url('/images/v2/main/price_arrow_m.png') no-repeat center center;} #mainItem .item-list li:nth-child(2) .price-box .discount:before{background:url('/images/v2/main/price_arrow_b.png') no-repeat center center;} #mainItem .item-list li:nth-child(1) .price-box .discount{color:#23c3d1;} #mainItem .item-list li:nth-child(2) .price-box .discount{color:#0095ff;} #mainItem .item-list li:nth-child(3) .price-box .discount{color:#5f71de;} #mainItem .item-list .btn-area{margin-top:30px;} #mainItem .item-list .btn-area a{display:inline-block; width:calc(50% - 5px); height:50px; text-align:center; vertical-align:middle; line-height:48px; font-weight:400; font-size:17px; border-radius:25px;} #mainItem .item-list .btn-area a.btn-sub{margin-right:10px;} #mainItem .item-list li:nth-child(1) .btn-area a.btn-sub{color:#23c3d1; border:1px solid #23c3d1;} #mainItem .item-list li:nth-child(1) .btn-area a.btn-main{color:#fff; background:#23c3d1;} #mainItem .item-list li:nth-child(2) .btn-area a.btn-sub{color:#0095ff; border:1px solid #0095ff;} #mainItem .item-list li:nth-child(2) .btn-area a.btn-main{color:#fff; background:#0095ff;} #mainItem .item-list li:nth-child(3) .btn-area a.btn-sub{color:#5f71de; border:1px solid #5f71de;} #mainItem .item-list li:nth-child(3) .btn-area a.btn-main{color:#fff; background:#5f71de;} /* 후이즈몰의 다양한 서비스를 경험해보세요. --------------------------------------------------------------------------------------- */ #mainService{padding:100px 0;} #mainService .main-tit{margin-bottom:50px;} #mainService .service-list:after{content:""; display:block; clear:both;} #mainService .service-list li{float:left; margin-top:-1px; margin-left:-1px; width:20%; height:180px; text-align:center; border:1px solid #ddd; transition:0.3s all;} #mainService .service-list li img{display:block; margin:40px auto 30px;} #mainService .service-list li a{display:block; padding-top:130px; width:100%; height:100%; font-size:15px; font-weight:400; color:#000;} #mainService .service-list li:hover{position:relative; border-color:#0095ff;} #mainService .service-list li:hover a{color:#0095ff;} #mainService .btn-submit{margin-top:50px; width:400px;} /* 쇼핑몰 창업 많이 궁금하시죠? 전문가와 직접 상담해보세요. --------------------------------------------------------------------------------------- */ #mainCs{padding:100px 0; background:url('/images/v2/main/main_cs_bg.jpg') no-repeat center center/cover;} #mainCs .main-tit{margin-bottom:50px;} #mainCs .main-tit h2{color:#fff;} #mainCs .main-tit h2:before{background:url('/images/v2/main/tit_mark_w_l.png') no-repeat center center;} #mainCs .main-tit h2:after{top:60px; background:url('/images/v2/main/tit_mark_w_r.png') no-repeat center center;} #mainCs .cs-box:after{content:''; display:block; clear:both;} #mainCs .cs-box > div{float:left; margin-left:45px; padding-top:40px; width:450px; height:230px; text-align:center; border-radius:20px; box-shadow:0 0px 20px 0px rgba(0,0,0,0.15);} #mainCs .cs-box > div:first-child{margin-left:0;} #mainCs .cs-box > div:nth-child(1){background:#fff url('/images/v2/main/main_cs_icon01.png') no-repeat 0 0 ;} #mainCs .cs-box > div:nth-child(2){background:#fff url('/images/v2/main/main_cs_icon02.png') no-repeat 0 0;} #mainCs .cs-box > div:nth-child(3){background:#fff url('/images/v2/main/main_cs_icon03.png') no-repeat 0 0;} #mainCs .cs-box h3{font-size:24px; font-weight:300; color:#000;} #mainCs .cs-box > div:nth-child(1) h3{margin-bottom:40px;} #mainCs .cs-box > div:nth-child(1) .main-copy{line-height:1; letter-spacing:-1.8px; font-size:21px; font-weight:400; color:#000;} #mainCs .cs-box > div:nth-child(1) .main-copy strong{font-weight:600;} #mainCs .cs-box > div:nth-child(1) .main-copy .day365{font-size:28px; color:#5f71de;} #mainCs .cs-box > div:nth-child(1) .main-copy .day365 span{position:relative;} #mainCs .cs-box > div:nth-child(1) .main-copy .day365 span:before{position:absolute; top:0; left:50%; content:""; margin-left:-2px; display:inline-block; width:4px; height:4px; border-radius:50%; background:#5f71de;} #mainCs .cs-box > div:nth-child(1) .sub-copy{margin-top:5px; font-size:15px; color:#111;} #mainCs .cs-box > div:nth-child(2) h3{margin-bottom:42px;} #mainCs .cs-box > div:nth-child(2) p{font-size:45px; font-weight:700; line-height:1; letter-spacing:-2.5px; color:#0095ff;} #mainCs .cs-box > div:nth-child(2) p span{display:inline-block; margin-top:-10px; vertical-align:middle; font-size:30px; font-weight:400;} #mainCs .cs-box > div:nth-child(3) h3{margin-bottom:25px;} #mainCs .cs-box > div:nth-child(3) .notice{font-size:13px; color:#ff3131;} #mainCs .cs-box > div:nth-child(3) .sub-copy{margin-top:8px; font-size:15px; color:#111;} #mainCs .cs-box > div:nth-child(3) .btn{display:block; margin:0 auto; text-align:center; width:280px; height:40px; line-height:40px; font-size:17px; font-weight:500; color:#fff; background:#23c3d1; border-radius:20px;} #mainCs .btn-submit{margin-top:50px; width:400px; color:#fff; background:#004063;} /* 공지사항/업데이트 --------------------------------------------------------------------------------------- */ #mainBoard{padding:100px 0;} #mainBoard:after{content:""; display:block; clear:both;} #mainBoard > div{position:relative; float:left; width:calc(50% - 30px);} #mainBoard > div:first-child{margin-right:60px;} #mainBoard h2{margin-bottom:40px; letter-spacing:-2px; font-size:45px; font-weight:300; line-height:1; color:#000;} #mainBoard .btn-more{position:absolute; top:8px; right:0;} /* Reset ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 비밀번호 초기화 */ .resetpw-box{margin:60px auto 0; padding:60px 140px; width:600px; overflow:hidden; box-shadow:0 0px 20px 0px rgba(0,0,0,0.1); border-radius:20px 20px 20px 20px;} .resetpw-box .btn-login{display:block; margin:25px auto 0; text-align:center; width:100%; height:50px; line-height:50px; font-size:20px; font-weight:500; color:#fff; border-radius:25px; background:#0095ff;} .resetpw-box .btn-form{width:40%; float:right} .save_id{margin-top:10px; font-size:0; line-height:0;} .save_id input[type="checkbox"] + label + label{font-size:15px;} .login-other-way{margin-top:15px; line-height:0; font-size:0; text-align:center;} .login-other-way li{display:inline-block; padding-left:12px; margin-left:12px; border-left:1px solid #ddd;} .login-other-way li:first-child{padding-left:0; margin-left:0; border-left:0;} .login-other-way li a{line-height:12px; font-size:14px; font-weight:400; color:#000;} .sns-login-area{margin-top:40px;} .sns-login-area li{margin-top:5px;} .sns-login-area li:first-child{margin-top:0;} /* 로그아웃 */ .logout-box{padding:60px; width:600px; margin:100px auto; text-align:center; box-shadow:0 0px 20px 0px rgba(0,0,0,0.1); border-radius:20px 20px 20px 20px;} .logout-box img{margin-bottom:20px;} .logout-box h3{margin-bottom:30px; font-size:35px; font-weight:300; letter-spacing:-2px; color:#000;} .logout-box h3 strong{font-weight:500;} .logout-box p strong{font-weight:400; color:#0095ff;} /* Login ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 로그인 */ .login-box{margin:60px auto 0; padding:60px 90px; width:600px; overflow:hidden; box-shadow:0 0px 20px 0px rgba(0,0,0,0.1); border-radius:20px 20px 20px 20px;} .login-box .btn-login{display:block; margin:25px auto 0; text-align:center; width:100%; height:50px; line-height:50px; font-size:20px; font-weight:500; color:#fff; border-radius:25px; background:#1954DB;} .save_id{margin-top:10px; font-size:0; line-height:0;} .save_id input[type="checkbox"] + label + label{font-size:15px;} .login-other-way{margin-top:15px; line-height:0; font-size:0; text-align:center;} .login-other-way li{display:inline-block; padding-left:12px; margin-left:12px; border-left:1px solid #ddd;} .login-other-way li:first-child{padding-left:0; margin-left:0; border-left:0;} .login-other-way li a{line-height:12px; font-size:14px; font-weight:400; color:#000;} .sns-login-area{margin-top:40px;} .sns-login-area li{margin-top:5px;} .sns-login-area li:first-child{margin-top:0;} .alert_text {color:red; margin-left:5px;} /* 로그아웃 */ .logout-box{padding:60px; width:600px; margin:100px auto; text-align:center; box-shadow:0 0px 20px 0px rgba(0,0,0,0.1); border-radius:20px 20px 20px 20px;} .logout-box img{margin-bottom:20px;} .logout-box h3{margin-bottom:30px; font-size:35px; font-weight:300; letter-spacing:-2px; color:#000;} .logout-box h3 strong{font-weight:500;} .logout-box p strong{font-weight:400; color:#0095ff;} @media (max-width:767px) { .login-box {margin: 20px auto 0; width: calc(100vw - 40px); padding: 30px 20px;} } /* Join ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 회원가입 */ .join-box{margin:60px auto 0; padding:60px 130px; width:800px; overflow:hidden; box-shadow:0 0px 20px 0px rgba(0,0,0,0.1); border-radius:20px 20px 20px 20px; background:white} .join-box .btn-login{display:block; margin:25px auto 0; text-align:center; width:40%; height:50px; line-height:50px; font-size:20px; font-weight:500; color:#fff; border-radius:25px; background:#0095ff;} .save_id{margin-top:10px; font-size:0; line-height:0;} .save_id input[type="checkbox"] + label + label{font-size:15px;} .login-other-way{margin-top:15px; line-height:0; font-size:0; text-align:center;} .login-other-way li{display:inline-block; padding-left:12px; margin-left:12px; border-left:1px solid #ddd;} .login-other-way li:first-child{padding-left:0; margin-left:0; border-left:0;} .login-other-way li a{line-height:12px; font-size:14px; font-weight:400; color:#000;} .sns-login-area{margin-top:40px;} .sns-login-area li{margin-top:5px;} .sns-login-area li:first-child{margin-top:0;} .have_btn{width:75% !important} /* 로그아웃 */ .logout-box{padding:60px; width:600px; margin:100px auto; text-align:center; box-shadow:0 0px 20px 0px rgba(0,0,0,0.1); border-radius:20px 20px 20px 20px;} .logout-box img{margin-bottom:20px;} .logout-box h3{margin-bottom:30px; font-size:35px; font-weight:300; letter-spacing:-2px; color:#000;} .logout-box h3 strong{font-weight:500;} .logout-box p strong{font-weight:400; color:#0095ff;} /* 쇼핑몰 창업 신청 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .startup-app-intro{width:100%; height:500px; background:url('/images/v2/sub/startup_app_bg.jpg') no-repeat center center;} .startup-app-intro .txt-area{padding-top:160px; text-align:center;} .startup-app-intro .txt-area h3{position:relative; display:inline-block; margin-bottom:40px; line-height:1.3; font-size:45px; font-weight:300; letter-spacing:-2px; color:#fff;} .startup-app-intro .txt-area h3:before{position:absolute; top:0; left:-43px; content:""; display:block; width:28px; height:22px; background:url('/images/v2/main/tit_mark_w_l.png') no-repeat center center;} .startup-app-intro .txt-area h3:after{position:absolute; top:0; right:-43px; content:""; display:block; width:28px; height:22px; background:url('/images/v2/main/tit_mark_w_r.png') no-repeat center center;} .startup-app-intro .txt-area strong{font-weight:500;} .startup-app-intro .txt-area p{font-size:25px; font-weight:400; color:#fff; text-shadow:0,0,5px,0,rgba(0,0,0,0.15);} .startup-banner{height:300px; background:url('/images/v2/sub/startup_banner.jpg') no-repeat center center;} .startup-banner .txt-area{padding:60px 0 0 130px;} .startup-banner h4{margin-bottom:10px; font-size:37px; font-weight:500; line-height:1; color:#fff;} .startup-banner p{font-size:18px; line-height:1.4; font-weight:300; color:#fff;} .startup-banner p strong{font-weight:500; color:#d2ff00;} .startup-banner .btn-go{display:inline-block; margin:30px 0 0 0; width:340px; text-align:center; vertical-align:middle; height:50px; line-height:48px; font-size:18px; font-weight:500; color:#fff; border-radius:30px; background:rgba(0,0,0,0.2);} .startup-banner .btn-go img{margin-left:15px;} /* 디자인 센터 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* side menu */ .side-menu{width:228px;} .side-menu .side-tit{display:table; table-layout:fixed; width:100%;} .side-menu .side-tit h3{display:table-cell; width:100%; height:80px; vertical-align:middle; text-align:center; line-height:1.3; font-size:20px; font-weight:500; letter-spacing:-2px; color:#000;} .side-menu ul{padding-bottom:20px;} .side-menu a{position:relative; display:block; width:100%; text-align:center; line-height:50px; font-weight:400; font-size:16px; color:#666;} .side-menu li:hover a{background:#f5f5f5;} .side-menu li.on a{color:#fff; background:#2d3546;} .side-menu li.on a:after{position:absolute; top:50%; right:-9px; display:inline-block; content:""; margin-top:-4.5px; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #2d3546;} @media (max-width:992px) { .addservice-wrap .left-area {margin-bottom: 30px; position: static !important; width: 100% !important; border: none !important;} .side-menu {width: 100%;} .side-menu .side-tit {display: none;} .side-menu ul {padding-bottom: 0; display: flex; justify-content: center; flex-wrap: wrap;} .side-menu li {margin: 2px;} .side-menu a {line-height: 32px; font-size: 12px; padding: 0 10px; border-radius: 20px; border: solid 1px #e5e5e5;} .side-menu li.on a {border-color: #2d3546;} .side-menu li.on a:after {display: none;} } /* -------------------- 리스트 -------------------- */ .design-list-wrap:after{content:""; display:block; clear:both;} .design-list-wrap .left-area{float:left; margin-right:110px; width:230px; border-radius:10px; background:#fff; border:1px solid #ddd;} .design-list-wrap .left-area.scroll{z-index:666; position:fixed; position:fixed; top:110px;} .design-list-wrap .right-area{float:right; width:1100px;} /* 디자인 스킨 리스트 */ .skin-list{overflow:hidden;} .skin-list ul{margin:-40px -27.5px; font-size:0; line-height:0;} .skin-list li{display:inline-block; vertical-align:top; margin:40px 27.5px; width:330px;} .skin-list .img-frame{width:330px; border:1px solid #eee; border-radius:5px; overflow:hidden;} .skin-list .img-frame img{width:100%; transition:1s all; transform:scale(1);} .skin-list .img-frame a:hover img{transform:scale(1.05);} .skin-list .txt-frame{position:relative; margin-top:20px; line-height:1;} .skin-list .txt-frame .tit{margin-bottom:15px;} .skin-list .txt-frame .tit a{font-size:20px; font-weight:400; color:#000;} .skin-list .txt-frame .price{margin-bottom:7px; font-size:14px; color:#666;} .skin-list .txt-frame .price b{font-weight:400; color:#000;} .skin-list .skin-view{position:absolute; bottom:0; right:0; line-height:0; font-size:0;} .skin-list .skin-view dd{display:inline-block; margin-left:7px;} .skin-list .skin-view a{display:inline-block; width:40px; height:40px; text-indent:-9999em; overflow:hidden; border-radius:50%;} .skin-list .skin-view .mobile a{background:url('/images/v2/sub/view_mobile.png') no-repeat center center; border:1px solid #23c3d1;} .skin-list .skin-view .pc a{background:url('/images/v2/sub/view_pc.png') no-repeat center center; border:1px solid #0095ff;} .skin-list .skin-view .mobile a:hover{background:#23c3d1 url('/images/v2/sub/view_mobile_on.png') no-repeat center center;} .skin-list .skin-view .pc a:hover{background:#0095ff url('/images/v2/sub/view_pc_on.png') no-repeat center center;} /* -------------------- 상세 -------------------- */ .design-detail-wrap:after{content:""; display:block; clear:both;} /* 상세 좌측 */ .design-detail-wrap .left-area{float:left; margin-right:110px; width:400px; border-radius:10px; background:#fff; border:1px solid #ddd;} .design-detail-wrap .left-area.scroll{z-index:666; position:fixed; position:fixed; top:110px;} .design-detail-wrap .left-area:after{content:""; display:block; clear:both;} .design-detail-wrap .side-menu{float:left; border-right:1px solid #ddd;} .design-detail-wrap .today-skin{float:left; width:calc(100% - 230px);} .design-detail-wrap .today-skin .tit{display:table; table-layout:fixed; width:100%;} .design-detail-wrap .today-skin .tit h4{display:table-cell; width:100%; height:80px; vertical-align:middle; text-align:center; line-height:1.3; font-size:18px; font-weight:500; color:#5d6576;} .design-detail-wrap .today-skin-list{margin:0 auto 20px; width:100px; height:400px; overflow:hidden;} .design-detail-wrap .today-skin-list .scroll-area{width:120px; height:400px; overflow-x:hidden; overflow-y:scroll;} .design-detail-wrap .today-skin ul{width:100px;} .design-detail-wrap .today-skin li{position:relative; margin:20px auto 0; text-align:center;} .design-detail-wrap .today-skin .shopping li{ width:100px; height:136px;} .design-detail-wrap .today-skin .homepage li{ width:100px; height:68px;} .design-detail-wrap .today-skin li:first-child{margin-top:0;} .design-detail-wrap .today-skin li.no-data{padding-top:160px; height:400px; font-size:14px; color:#999;} .design-detail-wrap .today-skin li img{width:100%;} .design-detail-wrap .today-skin li a{position:relative; display:block;} .design-detail-wrap .today-skin li a:after{position:absolute; top:0; left:0; content:""; display:block; width:100%; height:100%; box-sizing:border-box; border:2px solid #2d3546; transition:0.3s all; opacity:0;} .design-detail-wrap .today-skin li:hover a:after{opacity:1;} /* 상세 우측 */ .design-detail-wrap .right-area{float:right; width:930px;} .design-detail-wrap .right-area:after{content:""; display:block; clear:both;} /* 이미지 슬라이드 */ .design-detail-wrap .img-frame{float:left; width:402px;} .design-detail-wrap .detail-img{width:402px;} .design-detail-wrap .detail-img .slide{box-sizing:content-box; border:1px solid #eee; border-radius:10px; overflow:hidden;} .design-detail-wrap .slick-arrow{z-index:555; position:absolute; top:50%; margin-top:-25px; width:35px; height:50px; text-indent:-9999em; overflow:hidden; opacity:0.3;} .design-detail-wrap .slick-arrow.slick-prev{left:0; background:url('/images/v2/sub/slide_prev.png') no-repeat center center;} .design-detail-wrap .slick-arrow.slick-next{right:0; background:url('/images/v2/sub/slide_next.png') no-repeat center center;} .design-detail-wrap .slick-arrow:hover{opacity:1;} .design-detail-wrap .slick-dots{margin-top:20px; text-align:center; line-height:0; font-size:0;} .design-detail-wrap .slick-dots li{display:inline-block;} .design-detail-wrap .slick-dots li button{display:inline-block; margin:0 2.5px; width:30px; height:14px; text-indent:-9999em; overflow:hidden; background:#d5d5d5; border-radius:7px;} .design-detail-wrap .slick-dots li.slick-active button{background:#0095ff;} /* 정보 */ .design-detail-wrap .txt-frame{float:right; width:468px;} .design-detail-wrap .txt-frame .skin-location{margin-bottom:10px; font-size:14px; color:#666;} .design-detail-wrap .txt-frame .skin-location span{display:inline-block; padding:0 10px; background:url('/images/v2/sub/location_arrow.png') no-repeat left center;} .design-detail-wrap .txt-frame .skin-location span:first-child{padding-left:0; background:none;} .design-detail-wrap .txt-frame .tit{margin-bottom:30px; font-size:35px; font-weight:500; letter-spacing:-2px; line-height:1; color:#000;} .design-detail-wrap .txt-frame table{margin-bottom:30px;} .design-detail-wrap .txt-frame th{padding:4px 0; text-align:left; vertical-align:middle; font-size:17px; font-weight:400; color:#000;} .design-detail-wrap .txt-frame td{padding:4px 0; text-align:left; vertical-align:middle; font-size:17px; font-weight:300; color:#666;} .design-detail-wrap .txt-frame td.price{font-weight:400; color:#0095ff;} .design-detail-wrap .skin-view-btn{margin-top:50px;} .design-detail-wrap .skin-view-btn .btn-submit:first-child{margin-bottom:10px;} .design-detail-wrap .skin-view{font-size:0; line-height:0;} .design-detail-wrap .skin-view dd{display:inline-block; width:170px;} .design-detail-wrap .skin-view dd a:before{content:""; display:inline-block; vertical-align:middle; margin-right:7px; width:40px; height:40px; border-radius:50%; transition:0.3s all;} .design-detail-wrap .skin-view .mobile a:before{background:url('/images/v2/sub/view_mobile.png') no-repeat center center; border:1px solid #23c3d1;} .design-detail-wrap .skin-view .pc a:before{background:url('/images/v2/sub/view_pc.png') no-repeat center center; border:1px solid #0095ff;} .design-detail-wrap .skin-view .mobile a:hover:before{background:#23c3d1 url('/images/v2/sub/view_mobile_on.png') no-repeat center center;} .design-detail-wrap .skin-view .pc a:hover:before{background:#0095ff url('/images/v2/sub/view_pc_on.png') no-repeat center center;} .design-detail-wrap .skin-view a{display:inline-block; vertical-align:middle; font-weight:400; font-size:16px;} .design-detail-wrap .skin-view .mobile a{color:#23c3d1;} .design-detail-wrap .skin-view .pc a{color:#0095ff;} .design-detail-wrap .skin-view a img{margin:-3px 0 0 5px; transition:.3s all;} .design-detail-wrap .skin-view a:hover img{margin-left:8px;} .design-detail-wrap .detail-frame{float:left; margin-top:50px; padding:90px; width:100%; border:1px solid #eee; border-radius:10px;} .design-detail-wrap .detail-guide-list + img{margin-top:50px;} .design-detail-wrap .detail-guide-list li{position:relative; margin-top:10px; padding-left:15px;} .design-detail-wrap .detail-guide-list li:first-child{margin-top:0;} .design-detail-wrap .detail-guide-list li:before{position:absolute; top:10px; left:0; content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:#0095ff;} /* -------------------- 디자인 스킨 선택 팝업 -------------------- */ #designPopWrap{width:1457px; height:820px; box-sizing:content-box; overflow-y:auto; overflow-y:scroll; overflow-x:hidden;} #designPopWrap .title{position:relative; padding:0 50px; width:100%; height:60px; background:#2d3546;} #designPopWrap .title h2{line-height:60px; font-size:22px; font-weight:500; color:#fff;} #designPopWrap .title .btn-back{position:absolute; top:21px; left:20px; margin-right:30px; vertical-align:middle; line-height:1; font-weight:400; color:#000;} #designPopWrap .design-list-wrap{padding:50px;} #designPopWrap .design-list-wrap .right-area{width:1000px;} /* 스킨 탭 */ #designPopWrap .skin-tab{padding:0 50px; height:60px; background:#f5f5f5; border-bottom:1px solid #ddd;} #designPopWrap .skin-tab:after{content:""; display:block; clear:both;} #designPopWrap .tab-area{float:left; text-align:left; line-height:0; font-size:0;} #designPopWrap .tab-area li{display:inline-block; margin-left:30px;} #designPopWrap .tab-area li:first-child{margin-left:0;} #designPopWrap .tab-area li a{position:relative; display:inline-block; padding:0 10px; line-height:60px; font-size:18px; font-weight:500; color:#999;} #designPopWrap .tab-area li a:after{position:absolute; bottom:0; left:0; right:0; content:""; display:block; margin:0 auto; width:100%; height:3px; background:#333; transition:.2s all linear; transform:scaleX(0);} #designPopWrap .tab-area li:hover a, #designPopWrap .tab-area li.on a{font-weight:500; color:#333;} #designPopWrap .tab-area li:hover a:after, #designPopWrap .tab-area li.on a:after{transform:scaleX(1);} /* 스킨 검색 */ #designPopWrap .search-area{float:right; padding:10px 0;} #designPopWrap .search-area input[type="text"]{margin-right:5px; width:250px;} /* 스킨 리스트 */ #designPopWrap .skin-list ul{margin:-20px -25px;} #designPopWrap .skin-list li{display:inline-block; vertical-align:top; margin:20px 25px; width:300px;} #designPopWrap .skin-list .img-frame{width:300px;} #designPopWrap .skin-list + .pagenation{margin-top:50px;} #designPopWrap .design-detail-wrap{padding:50px;} #designPopWrap .design-detail-wrap .right-area{width:calc(100% - 510px);} #designPopWrap .design-detail-wrap .img-frame{width:402px;} #designPopWrap .design-detail-wrap .txt-frame{width:368px;} #designPopWrap .design-detail-wrap .detail-frame{padding:50px 40px;} /* -------------------- 맞춤 디자인 -------------------- */ .customize-list{padding-top:30px; display: flex;} .customize-list > li{position:relative; padding:60px 20px 40px; margin-left:-1px; width:calc(20% + 1px); text-align:center; border:1px solid #ddd; display: flex; flex-direction: column;} .customize-list > li:first-child{margin-left:0; width:20%; border-radius:10px 0 0 10px;} .customize-list > li:last-child{border-radius:0 10px 10px 0;} .customize-list > li:after{z-index:444; position:absolute; top:-1px; left:-1px; content:""; display:block; width:calc(100% - 2px); height:calc(100% - 2px); border-width:2px; border-style:solid; opacity:0; transition:.3s;} .customize-list > li:first-child:after{border-radius:10px 0 0 10px;} .customize-list > li:last-child:after{border-radius:0 10px 10px 0;} .customize-list .skin:after{border-color:#23c3d1;} .customize-list .custom:after{border-color:#0095ff;} .customize-list .consult:after{border-color:#5f71de;} .customize-list > li:hover:after{opacity:1;} .customize-list > li >.label{z-index:555; position:absolute; top:-25px; left:50%; margin-left:-25px; text-align:center; padding-top:15px; width:50px; height:50px; font-size:22px; line-height:1; font-weight:900; color:#fff; border-radius:50%;} .customize-list .skin > .label{background:#23c3d1;} .customize-list .custom > .label{background:#0095ff;} .customize-list .consult > .label{background:#5f71de;} .customize-list h4{height:160px; padding-bottom:30px; font-size:24px; font-weight:400; line-height:1; color:#000;border-bottom:1px dashed #ddd;} .customize-list h4 img{display:block; margin:0 auto 15px;} .customize-list h4 span{display:block; margin-top:5px; font-size:14px; font-weight:300; letter-spacing:0;} .customize-list .con-area{padding:30px 0 40px; flex-grow: 1;} .customize-list .con-area li{margin-top:20px;} .customize-list .con-area li:first-child{margin-top:0;} .customize-list .con-area li, .customize-list .con-area dt{margin-bottom:3px; line-height:1.3; font-size:15px; font-weight:500; color:#000;} .customize-list .con-area dd{line-height:20px; font-size:14px; font-weight:300; color:#666;} .customize-list .con-area p{line-height:1.7; font-size:15px; font-weight:300; color:#666;} .customize-list .price{width:100%; height:50px; text-align:center; line-height:48px; color:#fff; border-radius:25px;} .customize-list .price .num{font-size:27px; font-weight:700;} .customize-list .price .unit{font-size:20px; font-weight:400;} .customize-list .skin .price{background:#23c3d1;} .customize-list .custom .price{background:#0095ff;} .customize-list .consult .price{background:#5f71de;} .customize-list + .vat{margin-top:10px; text-align:right; color:#888;} @media (max-width:1280px) { .customize-list > li{padding:60px 10px 40px;} .customize-list .price .num{font-size:24px;} .customize-list .price .unit{font-size:16px;} } @media (max-width:992px) { .customize-list{padding-top:0; display: block;} .customize-list > li{margin-top: 20px; padding:20px; margin-left:0; width:100%; border:1px solid #ddd; display: block; border-radius:10px;} .customize-list > li:first-child{width:100%; border-radius:10px;} .customize-list > li:last-child{border-radius: 10px;} .customize-list > li:after{display: none;} .customize-list > li >.label{position:static; margin-left:auto; margin-right: auto; text-align:center; padding-top:0; width:50px; height:50px; font-size:20px; display: flex; align-items: center; justify-content: center;} .customize-list h4{height:auto !important; padding-top: 20px; padding-bottom:20px !important; font-size:20px !important;} .customize-list .price {width: 70%; margin-left: auto; margin-right: auto;} .customize-list .con-area {padding: 20px 0;} .customize-list + .vat {font-size: 12px;} .customize-list ~ .end-btn-area {margin-top: 30px;} .customize-list ~ .end-btn-area a {width: 240px; height: 50px; margin-top: 20px; line-height: 48px; font-size: 16px;} .customize-list ~ .end-btn-area a img {width: 20px;} } /* 내 쇼핑몰 관리 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .myshop-list li{position:relative; display:table; table-layout:fixed; margin-top:15px; padding:30px 50px; width:100%; background:#fff; border:1px solid #ddd; border-radius:20px; transition:.3s;} .myshop-list li:first-child{margin-top:0;} .myshop-list li:hover{background:#f9f9f9;} .myshop-list li.no-data{padding:80px 50px; text-align:center; color:#999; border:0; background:#f9f9f9;} .myshop-list dl{display:table-cell; vertical-align:middle; width:calc(100% - 200px); padding-right:50px;} .myshop-list dt, .myshop-list dd{display:inline-block; vertical-align:middle;} .myshop-list dt{margin-right:30px; font-size:20px; font-weight:500; color:#000;} .myshop-list dd:before{display:inline-block; content:""; margin:0 20px; vertical-align:middle; width:1px; height:14px; background:#d5d5d5;} .myshop-list dt + dd:before, .myshop-list dd:first-of-type:before{display:none;} .myshop-list dd b{margin-right:8px; font-weight:400; color:#000;} .myshop-list dd .domain{text-decoration:underline; color:#0095ff;} .myshop-list dd .state{display:inline-block; padding:0 15px; margin-right:10px; height:26px; line-height:24px; font-size:14px; color:#fff; border-radius:13px;} .myshop-list dd .state.ing{background:#6b9abb;} .myshop-list dd .state.end{background:#999;} .myshop-list dd .date{font-size:14px; color:#999;} .myshop-list .btn-access{display:table-cell; vertical-align:middle; width:150px; font-size:0; line-height:0;} .myshop-list .btn-access a{display:inline-block; width:150px; height:40px; line-height:38px; font-size:16px; font-weight:400; text-align:center; color:#fff; border-radius:25px;} .myshop-list .btn-access a.line{color:#0095ff; border:1px solid #0095ff;} .myshop-list .btn-access a.line:hover{background:#f1faff;} .myshop-list .btn-access a.blue{color:#fff; background:#0095ff;} .myshop-list .btn-access a.blue:hover{background:#0084ff;} /* 상담정보 */ .qna-info{margin-bottom:50px; padding:40px 50px 30px; background:#f5f5f5; border-radius:10px;} .qna-info dt{margin-bottom:30px; text-align:center; font-size:18px; font-weight:500; line-height:1; color:#000;} .qna-info dd{margin-top:10px;} .qna-info dt + dd{margin-top:0;} .qna-info dd b{display:inline-block; margin-right:5px; width:120px; font-weight:400; color:#000;} .qna-info dd .state{display:inline-block; padding:0 14px; margin-right:10px; height:26px; line-height:26px; font-size:14px; color:#fff; border-radius:13px;} .qna-info dd .state.ing{background:#6b9abb;} .qna-info dd .state.end{background:#999;} .qna-info .btn-board{display:block; margin-top:20px; width:100%; height:40px; line-height:38px; font-size:16px; font-weight:400; text-align:center; color:#fff; background:#0095ff; border-radius:25px;} .qna-info .btn-board:hover{background:#0084ff;} /* 댓글 목록 */ .comment-area{margin-top:30px; border-top:1px solid #555;} .comment-list{padding:0 15px; margin-bottom:40px;} .comment-list li{position:relative; margin-top:20px; width:calc(100% - 100px); border-radius:15px;} .comment-list li.my-cmt{margin-left:100px; padding:20px 100px 20px 25px; background:#f5f5f5;} .comment-list li.whois-cmt{margin-right:100px; padding:20px 25px; border:1px solid #e5e5e5;} .comment-list li.no-data{display:none; padding:50px 0; width:100%; text-align:center; font-size:16px; color:#999;} .comment-list .cmt-tit{margin-bottom:3px; font-weight:500; font-size:14px;} .comment-list .cmt-date{margin-left:20px; font-weight:300; font-size:13px; letter-spacing:0;} .comment-list .cmt-con{font-size:16px;} .comment-list .cmt-tit{color:#000;} .comment-list .cmt-date{color:#999;} .comment-list .cmt-con{color:#555;} .comment-list .cmt-uploaded{margin-top:5px;} .comment-list .cmt-uploaded img{margin-right:5px;} .comment-list .cmt-uploaded a{font-size:14px; font-size:13px; text-decoration:underline; color:#0095ff;} .comment-list .cmt-btn-area{position:absolute; top:20px; right:20px; line-height:0; font-size:0;} .comment-list .cmt-btn-area button{margin-left:10px; line-height:14px; font-weight:400; font-size:14px; color:#0095ff;} .comment-list .cmt-btn-area button:first-child{margin-left:0;} /* 댓글 입력 */ .comment-form-wrap{padding:30px 25px; background:#f5f5f5; border-radius:10px;} .comment-form-wrap > .tit{display:inline-block; vertical-align:middle; margin-right:5px; font-size:14px; font-weight:400; color:#555;} .comment-form-wrap .input-area{margin-bottom:8px;} .comment-form-wrap .input-area textarea{max-width:calc(100% - 90px); min-width:calc(100% - 90px); max-height:90px; min-height:90px; width:calc(100% - 90px); height:90px; font-size:16px; border-radius:5px 0 0 5px;} .comment-form-wrap .input-area .btn-cmt-ok{text-align:center; width:90px; height:90px; line-height:90px; font-size:16px; color:#fff; background:#0095ff; border-radius:0 5px 5px 0;} /* 댓글 첨부 파일 */ .comment-form-wrap > .file-area{display:inline-block; vertical-align:middle;} .comment-form-wrap .file-area .btn-file{display:inline-block; text-align:center; vertical-align:middle; padding:0 12px; height:26px; line-height:24px; font-size:14px; font-weight:400; color:#0095ff; border:1px solid #0095ff; border-radius:3px; cursor:pointer;} .comment-form-wrap .file-area .upload-name{font-size:14px;} /* 댓글 수정 */ .comment-list .comment-form-wrap{padding:0; width:calc(100% + 80px); background:none;} /* 쿠폰 사용법 팝업 */ #couponPopWrap{width:1000px; height:500px; box-sizing:content-box;} #couponPopWrap .title{position:relative; padding:20px 50px; width:100%; height:90px; background:#2d3546;} #couponPopWrap .title h2{margin-bottom:5px; line-height:1; font-size:22px; font-weight:500; color:#fff;} #couponPopWrap .title h2 + p{font-size:16px; color:#ddd;} #couponPopWrap .coupon-area{padding:30px 50px; height:410px; overflow-y:scroll; overflow-x:hidden;} /* 게시판 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 게시판 현황 */ .board-state{margin-bottom:10px; font-size:16px; font-weight:300; line-height:1; color:#666;} .board-state strong{font-weight:500; color:#0095ff;} /* 리스트 */ .board-list{border-top:2px solid #555;} .board-list li{padding:20px; width:100%; border-bottom:1px solid #ddd; transition:0.3s all;} .board-list li:hover{background:#f9f9f9;} .board-list li.no-data{padding:80px 20px; text-align:center; color:#999;} .board-list li.no-data:hover{background:none;} .board-list dt{margin-bottom:5px; width:100%; line-height:1.3; font-weight:300; font-size:16px; color:#000;} .board-list dt .tit{display:block; width:100%; line-height:1.3; font-weight:300; font-size:16px; color:#000;} .board-list dd{display:inline-block; line-height:14px; font-size:14px; color:#888;} .board-list dd:before{display:inline-block; content:""; margin:0 10px; vertical-align:middle; width:1px; height:12px; background:#d5d5d5;} .board-list dt + dd:before, .board-list dd:first-of-type:before{display:none;} .board-list dd b{margin-right:5px; font-weight:400; color:#666;} .board-list dd.cate{font-weight:400; color:#6b9abb;} /* 게시판 안내 */ .board-guide{margin-bottom:50px; padding:50px 75px; background:#f1faff; border-radius:20px;} .board-guide h4{margin-bottom:20px; line-height:1; font-size:18px; font-weight:400; color:#000;} .board-guide h4 img{margin:-2px 7px 0 0;} .board-guide ul{padding-bottom:20px; margin-bottom:20px; border-bottom:1px dashed #c1d8e4;} .board-guide li{position:relative; margin-top:5px; padding-left:15px;} .board-guide li:first-child{margin-top:0;} .board-guide li:before{position:absolute; top:11px; left:0; content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:#666;} .board-guide .other-service span{display:inline-block; margin-right:20px; vertical-align:middle; font-weight:400; color:#2d3546;} .board-guide .other-service span img{margin:-2px 7px 0 0;} /* 게시판 사이드 버튼 */ .board-side-btn{margin-top:20px;} .board-side-btn:after{content:""; display:block; clear:both;} .board-side-btn .left-area{float:left; text-align:left;} .board-side-btn .right-area{float:right; text-align:right;} .board-side-btn a, .board-side-btn button{display:inline-block; text-align:center; padding:0 50px; min-width:200px; height:50px; line-height:50px; font-size:18px; font-weight:500; border-radius:25px;} .board-side-btn img{margin-left:15px;} .board-side-btn .line{color:#0095ff; border:1px solid #0095ff;} .board-side-btn .line:hover{background:#f1faff;} .board-side-btn .blue{color:#fff; background:#0095ff;} .board-side-btn .blue:hover{background:#0084ff;} .board-side-btn .black{color:#fff; background:#2d3546;} .board-side-btn .black:hover{background:#2d3546;} /* 게시판 리스트 내 폼 */ .board-list-form{margin-bottom:50px; padding:35px; background:#f5f5f5; border-radius:20px;} .board-list-form .form-area{margin:0 auto; width:100%;} .board-guide + .board-list-form{margin-top:-30px;} /* 게시판 카테고리 */ @media (max-width: 1920px) { .board-category{margin-bottom:30px; text-align:center;} .board-category ul{display:inline-block; text-align:center; height:40px; line-height:0; font-size:0; background:#eee; border-radius:20px;} .board-category li{display:inline-block;} .board-category li a{display:inline-block; text-align:center; padding:0 30px; height:40px; line-height:40px; font-size:16px; font-weight:400; color:#888; border-radius:20px;} .board-category li:hover a{background:#ddd;} .board-category li.on a{color:#fff; background:#6b9abb;} } @media (max-width:767px) { .board-category{background: none;} .board-category ul{height:auto; background: none; display:flex; flex-wrap: wrap; justify-content: center;} .board-category li{display:block; margin: 3px;} .board-category li a{display:inline-block; text-align:center; padding:0 15px; height:30px; line-height:30px; font-size:13px; font-weight:400; background: #f5f5f5; color:#888; border-radius:20px;} .board-category li.on a{color:#fff; background:#6b9abb;} /* .category-tab-scroll{overflow-y:hidden; overflow-y:auto;} .category-tab-scroll::-webkit-scrollbar{display:none;} .category-tab-scroll::-webkit-scrollbar{-webkit-appearance:none;} .category-tab-scroll::-webkit-scrollbar:vertical{width:0;} .category-tab-scroll::-webkit-scrollbar:horizontal{height:0;} .category-tab-scroll::-webkit-scrollbar-thumb{width:0; height:0;} .category-tab-scroll::-webkit-scrollbar-track{width:0; height:0;} */ } /* 게시판 읽기 */ .board-view-wrap{border-top:2px solid #555;} .board-view-wrap .btn-submit{margin:60px auto 0; width:300px;} .board-view-wrap .end-btn-area a{ width:300px;} .board-view-head{padding:20px; border-bottom:1px solid #ddd;} .board-view-head dt{margin-bottom:7px; font-size:20px; font-weight:400; color:#000;} .board-view-head dd{display:inline-block; line-height:14px; font-size:16px; color:#888;} .board-view-head dd:before{display:inline-block; content:""; margin:0 10px; vertical-align:middle; width:1px; height:14px; background:#d5d5d5;} .board-view-head dt + dd:before, .board-view-head dd:first-of-type:before{display:none;} .board-view-head dd b{margin-right:5px; font-weight:400; color:#666;} .board-view-head dd.cate{font-weight:400; color:#6b9abb;} .board-view-head dd .state{display:inline-block; padding:0 14px; margin-right:10px; height:26px; line-height:26px; font-size:14px; color:#fff; border-radius:13px;} .board-view-head dd .state.ing{background:#6b9abb;} .board-view-head dd .state.end{background:#999;} .board-view-con{border-bottom:1px solid #555;} .board-view-con *{word-break:break-all;} .view-con{padding:30px 20px 50px;} .view-con *{word-break:break-all;} /* 첨부된 파일 */ .board-view-con .uploaded-file{padding:15px 20px; font-size:16px; font-weight:400; color:#000; border-top:1px solid #ddd;} .board-view-con .uploaded-file img{margin:-2px 5px 0 0; height:16px;} .board-view-con .uploaded-file a{margin-left:8px; text-decoration:underline; font-weight:300; color:#0095ff;} @media (max-width:992px) { .board-list-form{margin-bottom: 30px; padding:20px;} } @media (max-width:768px) { .board-state{font-size:12px;} .board-list-form{margin-bottom:20px; padding:10px; border-radius: 5px;} .board-list-form .form-area{margin:0 auto; width:100%;} .board-guide + .board-list-form{margin-top:-30px;} .board-list li{padding:15px 0;} .board-list li.no-data{padding:30px 20px;} .board-list dt{font-size:14px;} .board-list dt .tit{font-size:14px;} .board-list dd{line-height:12px; font-size:12px;} .board-view-wrap .btn-submit{margin:30px auto 0; width:160px;} .board-view-wrap .end-btn-area {margin-top: 30px;} .board-view-wrap .end-btn-area a{width:160px; height: 50px; line-height: 48px; font-size: 16px;} .board-view-head{padding:15px 0;} .board-view-head dt{font-size:16px; margin-bottom: 5px;} .board-view-head dd{line-height:12px; font-size:12px;} .board-view-head dd .state{padding:0 10px; margin-right:5px; height:20px; line-height:20px; font-size:12px;} .view-con{padding:20px 0 40px;} } /* 상품 소개 페이지 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 공통 --------------------------------------------------------------------------------------- */ /* 비주얼 */ .item-visual{position:relative; width:100%; height:540px;} .item-visual .txt-area{position:absolute; top:140px; left:0; right:0; padding-left:10%; margin:auto;} .item-visual .txt-area h2{font-size:55px; font-weight:400; letter-spacing:-3px; line-height:1; color:#fff;} .item-visual .txt-area p{margin-top:15px; font-size:16px; font-weight:300; line-height:1.6; color:#fff;} .item-visual .btn-area{margin-top:40px; text-align:left; line-height:0; font-size:0;} .item-visual .btn-area a{display:inline-block; margin-right:10px; text-align:center; vertical-align:middle; width:180px; height:50px; line-height:48px; font-size:16px; font-weight:400; border-radius:25px;} .item-visual .btn-area .line{color:#fff; border:1px solid #fff;} .item-visual .btn-area .line:hover{color:#2d3546; background:#fff;} .item-visual .btn-area .black{color:#fff; background:#2d3546;} .item-visual .btn-area .black:hover{background:#2d3546;} /* ~이란? */ .sec-define{margin-top:80px; text-align:center; font-size:18px;} .sec-define .sub-tit{margin-bottom:20px;} .sec-define p{margin-top:10px ;line-height:1.6;} .sec-define p:first-child{margin-top:0;} .sec-define strong{font-weight:400;} .sec-define .btn-submit{margin-top:40px; width:400px;} /* 지원 서비스 */ .support-list{line-height:0; font-size:0; display: flex; justify-content: center; gap: 60px;} .support-list li{text-align:center;} .support-list li img{display:block; margin:0 auto 30px;} .support-list li div{font-size:22px; font-weight:300; line-height:1.3; color:#000;} .support-list li div strong{font-weight:500;} /* 추천 리스트 */ .recommend-list{line-height:0; font-size:0; display: flex; justify-content: center; flex-wrap: wrap; gap: 60px;} .recommend-list li{text-align:center;} .recommend-list li:last-child {width: 100%;} .recommend-list li img{display:block; margin:0 auto 30px;} .recommend-list li h4{margin-bottom:15px; font-size:25px; font-weight:400; line-height:1.3; color:#000;} .recommend-list li p{font-size:16px; line-height:1.4; color:#555;} .recommend-list li div{font-size:22px; line-height:1.3; color:#000;} /* 가격 비교 테이블 - col */ .item-table{width:100%;} .item-table thead th{padding:0 20px 20px; text-align:center; font-size:22px; font-weight:500; color:#000; border-bottom:2px solid #555;} .item-table thead th img{margin:-5px 7px 0 0;} .item-table tbody th{padding:20px; text-align:center; font-size:18px; font-weight:500; color:#000; border-bottom:1px solid #ddd;} .item-table tbody th span{font-weight:300; font-size:14px; color:#000;} .item-table td{padding:20px; text-align:center; font-size:18px; font-weight:300; color:#555; border-bottom:1px solid #ddd;} .item-table td strong{font-weight:500;} .item-table .price-box > dl > dt{display:inline-block; vertical-align:middle; width:90px; font-weight:500; font-size:15px; color:#000;} .item-table .price-box > dl > dd{display:inline-block; vertical-align:middle;} .item-table .price .num{font-size:24px; font-weight:600;} .item-table .price .unit{font-size:16px; font-weight:400;} .item-table .no-discount{display:inline-block; vertical-align:middle; color:#999;} .item-table .no-discount .price{position:relative;} .item-table .no-discount .price:after{position:absolute; top:55%; content:""; display:block; width:100%; height:1px; background:#999;} .item-table .discount{position:relative; display:inline-block; vertical-align:middle; padding-left:45px; margin-left:10px;} .item-table .discount:before{position:absolute; top:50%; left:0; content:""; display:inline-block; vertical-align:middle; width:35px; height:11px;} .item-table + .table-desc{margin-top:10px; text-align:right; color:#888;} /* 가격 비교 테이블 - row */ .item-table.row{border-top:2px solid #555;} .item-table.row td{text-align:left;} .item-table.row div.price-box{display:inline-block; vertical-align:middle;} .item-table .pop-txt{position:relative; display:inline-block; padding:0 20px; margin-left:20px; vertical-align:middle; height:40px; line-height:40px; font-size:17px; font-weight:400; color:#fff; background:#2d3546; border-radius:4px;} .item-table .pop-txt strong{font-weight:400;} .item-table .pop-txt strong.mint{color:#00ebff;} .item-table .pop-txt strong.blue{color:#64bfff;} .item-table .pop-txt strong.purple{color:#b0a5ff;} .item-table .pop-txt:after{position:absolute; top:50%; left:-9px; content:""; width:0; height:0; margin-top:-5px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-right:10px solid #2d3546;} /* 임대형 맞춤형 입점형 비교 popup */ #compareDetail .pop-table th + td{color:#23c3d1;} #compareDetail .pop-table th + td + td{color:#0095ff;} #compareDetail .pop-table th + td + td + td{color:#5f71de;} @media (max-width:1280px) { .support-list li div{font-size:18px;} .item-table thead th {padding: 0 10px 10px; font-size: 18px;} .item-table tbody th {padding: 15px; font-size: 16px;} .item-table td {padding: 15px; font-size: 16px;} .item-table .price .num{font-size:20px;} .item-table .price .unit{font-size:14px;} .recommend-list li h4 {font-size: 22px;} } @media (max-width:992px) { .item-visual .txt-area {padding-left: 20px;} .item-visual .txt-area h2{font-size:48px;} .support-list li div{font-size:16px;} .item-table .price .num{font-size:18px;} .item-table .price .unit{font-size:13px;} .recommend-list li h4 {font-size: 20px;} .recommend-list li p {font-size: 14px;} .item-table .pop-txt{padding:0 15px; margin-left:10px; height:34px; line-height:34px; font-size:14px;} } @media (max-width:768px) { .item-visual {height: 480px;} .item-visual .txt-area h2 {font-size:34px;} .item-visual .txt-area p {font-size: 14px;} .item-visual .btn-area {margin-top: 20px;} .item-visual .btn-area a {width: 120px; height: 44px; line-height: 42px; font-size: 13px; margin-right: 5px; margin-bottom: 5px;} .sec-define {margin-top: 40px; font-size: 14px;} .sec-define p br {display: none;} .sec-define .btn-submit {width: 240px; height: 50px; margin-top: 20px; line-height: 48px; font-size: 16px;} .sec-define .btn-submit img {width: 20px;} .support-list {flex-wrap: wrap; gap: 0; margin: 0;} .support-list li {width: 50%; padding: 20px 10px; display: flex; flex-direction: column;} .support-list li span {flex-grow: 1; display: flex; align-items: center;} .support-list li div {flex-shrink: 0; font-size: 14px;} .support-list li img {margin: 0 auto 10px; max-width: 80%;} .item-table thead th {padding: 0 0px 5px; font-size: 12px;} .item-table tbody th {padding: 10px 5px; font-size: 12px;} .item-table tbody th span {display: block;} .item-table td {padding: 10px 5px; font-size: 12px;} .item-table td .desc {font-size: 12px;} .item-table .price .num{font-size:13px;} .item-table .price .unit{font-size:10px;} .item-table .discount {padding-left: 40px;} .recommend-list li {width: 100%;} .recommend-list li img {max-width: 70%;} .recommend-list li h4 {font-size: 18px;} .item-table + .table-desc {font-size: 12px;} .item-table .pop-txt{padding:0 10px; margin-left:5px; height:24px; line-height:24px; font-size:11px;} } /* 임대형 쇼핑몰 소개 --------------------------------------------------------------------------------------- */ #itemRentWrap .item-visual{background:url('/images/v2/sub/rent/visual_rent.jpg') no-repeat center center;} /* 서비스 이용료 */ #itemRentWrap .sec-pricecard{margin-top:150px; background:url('/images/v2/sub/bg_mint_top.jpg') no-repeat center bottom;} #itemRentWrap .sec-pricecard .inner:after{content:""; display:block; clear:both;} #itemRentWrap .price-card{display: flex; justify-content: center; gap: 40px;} #itemRentWrap .price-card li{width:300px; height:345px; overflow:hidden; border-radius:20px; box-shadow:0 0 30px rgba(67,82,112,0.1);} #itemRentWrap .price-card li:first-child{margin-left:0;} #itemRentWrap .price-card .percent-area{padding:30px 0; height:180px; text-align:center; background:#23c3d1;} #itemRentWrap .price-card .percent-area h4{margin-bottom:20px; font-size:20px; line-height:1; font-weight:700; color:#fff;} #itemRentWrap .price-card .percent-area .percent{font-style:italic; line-height:1; letter-spacing:-2px; font-size:80px; font-weight:900; color:#fff;} #itemRentWrap .price-card .percent-area .percent span{font-size:55px; font-weight:300;} #itemRentWrap .price-card .percent-area .percent img{margin-top:-25px;} #itemRentWrap .price-card .price-area{padding:30px; text-align:right; background:#fff;} #itemRentWrap .price-area .no-discount{color:#999;} #itemRentWrap .price-area .discount{color:#23c3d1;} #itemRentWrap .price-area .num{font-weight:600; line-height:1; letter-spacing:-2px;} #itemRentWrap .price-area .unit{font-weight:400; line-height:1;} #itemRentWrap .price-area .no-discount .num{font-size:26px; text-decoration:line-through;} #itemRentWrap .price-area .no-discount .unit{font-size:18px;} #itemRentWrap .price-area .discount .num{font-size:35px;} #itemRentWrap .price-area .discount .unit{font-size:24px;} #itemRentWrap .price-area > p{margin-top:20px; font-size:13px; font-weight:300; color:#999;} #itemRentWrap .price-card-msg{margin:20px auto 0; max-width: 980px; text-align:right; color:#888;} /* 17년 노하우~ */ #itemRentWrap .sub-tit h3{line-height:1.4;} #itemRentWrap .sec-support{padding:200px 0 150px; background:#ecfdff;} #itemRentWrap .support-list{padding-top:40px;} /* 서비스 사양 비교 */ #itemRentWrap .sec-spec{padding-top:150px; background:url('/images/v2/sub/bg_mint_bottom.jpg') no-repeat center top;} #itemRentWrap .spec-common{margin-top:80px;} #itemRentWrap .spec-common h4{text-align:center; font-size:22px; font-weight:500; color:#000;} #itemRentWrap .spec-common ul{line-height:0; font-size:0; display: flex; justify-content: center; flex-wrap: wrap;} #itemRentWrap .spec-common li{margin-top:40px; text-align:center; width: calc(100% / 5);} #itemRentWrap .spec-common li img{display:block; margin:0 auto 10px;} #itemRentWrap .spec-common li div{font-size:16px; font-weight:300; line-height:1.3; color:#000;} /* 서비스 이용료 비교 */ #itemRentWrap .sec-price{padding:300px 0 150px; background:#f4f8ff; background:#f4f8ff url('/images/v2/sub/bg_purple.gif') no-repeat center top;} #itemRentWrap .sec-price .btn-submit{margin-top:80px; width:400px;} #itemRentWrap .sec-price .item-table thead th{position:relative;} #itemRentWrap .sec-price .item-table td:nth-child(2).price-box .price{color:#23c3d1;} #itemRentWrap .sec-price .item-table td:nth-child(3).price-box .price{color:#5f71de;} #itemRentWrap .sec-price .item-table td:nth-child(2).price-box .discount:before{background:url('/images/v2/sub/price_arrow_m.png') no-repeat center center;} #itemRentWrap .sec-price .item-table td:nth-child(3).price-box .discount:before{background:url('/images/v2/sub/price_arrow_p.png') no-repeat center center;} #itemRentWrap .sec-price .item-table td:nth-child(2).price-box .no-discount .price, #itemRentWrap .sec-price .item-table td:nth-child(3).price-box .no-discount .price{color:#999;} #itemRentWrap .sec-price .price-notice{margin-top:20px;} #itemRentWrap .sec-price .price-notice li{line-height:1.8;} @media (max-width:1280px) { #itemRentWrap .price-card {gap: 20px;} } @media (max-width:992px) { #itemRentWrap .price-card .percent-area .percent {font-size: 70px;} #itemRentWrap .price-area .no-discount .num {font-size: 22px;} #itemRentWrap .price-area .no-discount .unit {font-size: 16px;} #itemRentWrap .price-area .discount .num {font-size: 30px;} #itemRentWrap .price-area .discount .unit {font-size: 20px;} #itemRentWrap .spec-common li div{font-size:14px;} } @media (max-width:768px) { #itemRentWrap .sec-pricecard{margin-top:120px;} #itemRentWrap .price-card {flex-direction: column; align-items: center; gap: 30px;} #itemRentWrap .price-card li {width: 240px; height: auto;} #itemRentWrap .price-card .percent-area {padding: 20px 0; height: 120px;} #itemRentWrap .price-card .percent-area h4 {font-size: 18px; margin-bottom: 10px;} #itemRentWrap .price-card .percent-area .percent {font-size: 60px;} #itemRentWrap .price-card .percent-area .percent img {margin-top: -15px;} #itemRentWrap .price-card .percent-area .percent span {font-size: 40px;} #itemRentWrap .price-card .price-area {padding: 20px;} #itemRentWrap .price-area .no-discount .num {font-size: 18px;} #itemRentWrap .price-area .no-discount .unit {font-size: 14px;} #itemRentWrap .price-area .discount .num {font-size: 28px;} #itemRentWrap .price-area .discount .unit {font-size: 20px;} #itemRentWrap .price-area > p {font-size: 12px; margin-top: 10px;} #itemRentWrap .price-card-msg {text-align: center; font-size: 13px;} #itemRentWrap .sec-support{padding:120px 0 80px;} #itemRentWrap .support-list{padding-top:20px;} #itemRentWrap .sec-spec {padding-top: 80px;} #itemRentWrap .spec-common li {width: calc(100% / 3);} #itemRentWrap .spec-common li div{font-size:13px;} #itemRentWrap .sec-price {padding: 240px 0 120px;} #itemRentWrap .sec-price .price-notice {font-size: 13px;} #itemRentWrap .sec-price .btn-submit {width: 240px; height: 50px; margin-top: 20px; line-height: 48px; font-size: 16px;} #itemRentWrap .sec-price .btn-submit img {width: 20px;} } /* 맞춤형 쇼핑몰 소개 --------------------------------------------------------------------------------------- */ /* 맞춤형 비주얼 */ #itemCustomWrap .item-visual{background:url('/images/v2/sub/custom/visual_custom.jpg') no-repeat center center;} /* 맞춤형 사양 및 설치환경 */ #itemCustomWrap .sec-solution{margin-top:150px;} #itemCustomWrap .sec-solution .item-table.row .price-box .price{color:#0095ff;} #itemCustomWrap .sec-solution .item-table.row .price-box .discount:before{background:url('/images/v2/sub/price_arrow_p.png') no-repeat center center;} #itemCustomWrap .sec-solution .item-table.row .price-box .no-discount .price{color:#999;} #itemCustomWrap .sec-recommend{margin-top:60px; padding-top:240px; background:#eef8ff; background:#eef8ff url('/images/v2/sub/bg_blue_top.jpg') no-repeat center top;} #itemCustomWrap .sec-support{padding-top:100px; background:#eef8ff; background:#eef8ff url('/images/v2/sub/bg_blue_bottom.jpg') no-repeat center bottom;} #itemCustomWrap .sec-support .support-list{padding:50px 0; background:#fff; border-radius:20px; box-shadow:0 0 30px rgba(67,82,112,0.1);} /* 맞춤형 호스팅 서비스 */ #itemCustomWrap .sec-hosting{margin-top:150px;} /* 호스팅 서비스 */ .hosting-service{width:100%; height:400px; background:url('/images/v2/sub/custom/hosting_bg.png') no-repeat center center;} .hosting-service ul:after{content:""; display:block; clear:both;} .hosting-service li{float:left; padding-top:70px; width:50%; height:200px; text-align:center; line-height:1.3; font-size:22px; font-weight:300; color:#000;} .hosting-service li:nth-child(1), .hosting-service li:nth-child(3){padding-right:50px;} .hosting-service li:nth-child(2), .hosting-service li:nth-child(4){padding-left:50px;} .hosting-service li span{font-size:16px; color:#6b9abb;} /* 호스팅 서비스 이용료 */ #itemCustomWrap .item-table.hosting .price-box, #itemCustomWrap .item-table.hosting tr:nth-child(5) th, #itemCustomWrap .item-table.hosting tr:nth-child(6) th, #itemCustomWrap .item-table.hosting tr:nth-child(7) th, #itemCustomWrap .item-table.hosting tr:nth-child(8) th{background:#eef8ff;} #itemCustomWrap .item-table.hosting th + td .price{color:#5dbcff;} #itemCustomWrap .item-table.hosting th + td + td .price{color:#41b0ff;} #itemCustomWrap .item-table.hosting th + td + td + td .price{color:#20a2ff;} #itemCustomWrap .item-table.hosting th + td + td + td + td .price{color:#0095ff;} /* 호스팅 유의사항 */ .hosting-notice{margin-top:50px; padding:50px; border:1px dashed #ddd; border-radius:10px;} .hosting-notice > div{margin-top:30px;} .hosting-notice > div:first-child{margin-top:0;} .hosting-notice h4{margin-bottom:10px; font-size:16px; font-weight:400; color:#000;} .hosting-notice li{position:relative; padding-left:15px; margin-top:5px; line-height:1.3; font-size:14px;} .hosting-notice li:first-child{margin-top:0;} .hosting-notice li:before{position:absolute; top:7px; left:0; display:inline-block; margin-right:15px; vertical-align:middle; content:""; width:5px; height:5px; background:#555; border-radius:50%;} .hosting-notice .notice-desc{margin:0 0 10px 0;} /* 호스팅 추가 혜택 */ .sec-benefit{margin-top:150px;} .sec-benefit .sub-tit{margin-bottom:30px;} .sec-benefit .card-area{margin:20px auto 0; padding:20px; text-align:center; width:600px; height:280px; background:url('/images/v2/sub/custom/benefit_card.jpg') no-repeat center center;} .sec-benefit .card-area .tit{display:block; line-height:103px; font-size:30px; font-weight:500; color:#fff;} .sec-benefit .card-area .price{display:block; line-height:120px; font-weight:400; letter-spacing:-2px; font-size:45px; color:#3e7399;} .sec-benefit .card-area .price .num{font-weight:700; font-size:60px;} .sec-benefit .btn-submit{margin-top:40px; width:400px;} /* 맞춤 개발 서비스 */ .sec-customdev{margin-top:30px; padding-top:90px; background:#f4f8ff; background:#f4f8ff url('/images/v2/sub/bg_purple.gif') no-repeat center top;} .sec-customdev > section{text-align:center;} .sec-customdev:after{content:""; display:block; margin-top:80px; width:100%; height:491px; background:url('/images/v2/sub/compare_img.jpg') no-repeat center center;} .customdev-intro > img{margin-bottom:80px;} .customdev-intro .sub-tit{margin-bottom:15px;} .customdev-intro p{font-size:24px; font-weight:300; color:#000;} .customdev-intro p strong{font-weight:500;} .customdev-define{margin-top:150px;} .customdev-define > img{margin-bottom:20px;} .customdev-define p{margin-top:10px; font-size:18px; line-height:1.5;} .customdev-define p:first-child{margin-top:0;} .customdev-define strong{font-weight:400;} .customdev-process{margin-top:150px;} .customdev-process ol{position:relative; padding-top:20px; width:100%; height:624px; background:url('/images/v2/sub/custom_dev_img03.png') no-repeat center 20px;} .customdev-process li{position:absolute;} .customdev-process li:nth-child(1){top:0; left: 0; right: 50%; padding-right: 30px; text-align:right;} .customdev-process li:nth-child(3){top:345px; left: 0; right: 50%; padding-right: 140px; text-align:right;} .customdev-process li:nth-child(2){top:110px; left:50%; right: 0; padding-left: 140px; text-align:left;} .customdev-process li:nth-child(4){top:460px; left:50%; right: 0; padding-left: 40px; text-align:left;} .customdev-process li .num{display:block; margin-bottom:20px; font-weight:900; font-size:80px; line-height:60px; letter-spacing:-2px; color:#a2b7ff;} .customdev-process li h4{margin-bottom:15px; font-size:30px; font-weight:400; line-height:1; color:#000;} .customdev-process li h4 + p{font-size:16px; font-weight:300; line-height:1.3; color:#555;} .customdev-end{margin-top:150px;} .customdev-end .btn-submit{width:540px;} .customdev-end .btn-submit + .btn-submit{margin-top:15px;} .customdev-end .btn-submit + .btn-submit span{font-size:15px; font-weight:300;} @media (max-width:1280px) { .hosting-service li {font-size: 18px;} .customdev-intro p {font-size: 22px;} .customdev-define > img {max-width: 40%;} } @media (max-width:992px) { .hosting-service li {font-size: 16px;} .customdev-intro p {font-size: 18px;} .customdev-define p {font-size: 16px;} .customdev-process li h4 {font-size: 22px;} .customdev-process li h4 + p {font-size: 14px;} } @media (max-width:768px) { #itemCustomWrap .sec-recommend {padding-top: 120px;} .hosting-service {background-size: auto 220px; height: 260px;} .hosting-service li {height: 130px; padding-top: 50px; font-size: 14px;} .hosting-service li:nth-child(1), .hosting-service li:nth-child(3){padding-right:60px;} .hosting-service li:nth-child(2), .hosting-service li:nth-child(4){padding-left:60px;} .hosting-service li span {font-size: 12px;} #itemCustomWrap .sec-hosting {margin-top: 120px;} .hosting-notice {padding: 20px;} .hosting-notice li {font-size: 13px; padding-left: 12px;} .hosting-notice li:before {top: 4px;} .customdev-intro p {font-size: 14px;} .customdev-define {margin-top: 80px;} .customdev-define p {font-size: 14px;} .customdev-process{margin-top:120px;} .customdev-process ol{height:auto; background: none;} .customdev-process li{position:static; margin-bottom: 40px; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important;} .customdev-process li:last-child {margin-bottom: 0;} .customdev-process li .num{margin-bottom:20px; font-size:50px; line-height:60px;} .customdev-process li h4{font-size:20px;} .customdev-process li h4 + p{line-height: 1.6;} .customdev-end {margin-top: 120px;} .customdev-end .btn-submit {width: 100%; height: 50px; line-height: 48px; font-size: 16px;} .customdev-end .btn-submit.black img {display: none;} } /* 입점형 쇼핑몰 소개 --------------------------------------------------------------------------------------- */ /* 입점형 비주얼 */ #itemMallinWrap .item-visual{background:url('/images/v2/sub/mallin/visual_mallin.jpg') no-repeat center center;} /* 입점형 사양 및 설치환경 */ #itemMallinWrap .sec-solution{margin-top:150px;} #itemMallinWrap .sec-solution .item-table.row .price-box .price{color:#5f71de;} #itemMallinWrap .sec-solution .item-table.row .price-box .discount:before{background:url('/images/v2/sub/price_arrow_p.png') no-repeat center center;} #itemMallinWrap .sec-solution .item-table.row .price-box .no-discount .price{color:#999;} #itemMallinWrap .sec-recommend{margin-top:60px; padding-top:240px; background:#f4f8ff; background:#f4f8ff url('/images/v2/sub/bg_purple_top.jpg') no-repeat center top;} #itemMallinWrap .sec-support{padding-top:100px; background:#f4f8ff; background:#f4f8ff url('/images/v2/sub/bg_purple_bottom.jpg') no-repeat center bottom;} #itemMallinWrap .sec-support .support-list{padding:50px 0; background:#fff; border-radius:20px; box-shadow:0 0 30px rgba(67,82,112,0.1);} /* 입점형 호스팅 서비스 */ #itemMallinWrap .sec-hosting{margin-top:150px;} #itemMallinWrap .hosting-service{background:url('/images/v2/sub/mallin/hosting_bg.png') no-repeat center center;} /* 호스팅 서비스 이용료 */ #itemMallinWrap .item-table.hosting .price-box, #itemMallinWrap .item-table.hosting tr:nth-child(5) th, #itemMallinWrap .item-table.hosting tr:nth-child(6) th, #itemMallinWrap .item-table.hosting tr:nth-child(7) th, #itemMallinWrap .item-table.hosting tr:nth-child(8) th{background:#f4f8ff;} #itemMallinWrap .item-table.hosting th + td .price{color:#8491df;} #itemMallinWrap .item-table.hosting th + td + td .price{color:#7281de;} #itemMallinWrap .item-table.hosting th + td + td + td .price{color:#5f71de;} /* 호스팅 추가 혜택 */ .sec-hosting .btn-submit{margin-top:60px; width:400px; box-shadow:0 0 30px rgba(67,82,112,0.1);} .hosting-benefit{text-align:center;} .hosting-benefit .benefit-plus{display:inline-block; margin:0 44px; vertical-align:middle;} .hosting-benefit > div{display:inline-block; vertical-align:middle; width:300px; overflow:hidden; border-radius:20px; box-shadow:0 0 30px rgba(67,82,112,0.1);} .hosting-benefit h4{padding:30px 0; text-align:center; font-size:30px; font-weight:400; color:#fff; background:#5f71de;} .hosting-benefit h4 span{display:block; font-size:22px; font-weight:500; color:#4df5ff;} .hosting-benefit .con-area{padding:50px 0; line-height:1.3; text-align:center; background:#fff;} .hosting-benefit .con-area .tit{font-weight:300; font-size:24px; color:#555;} .hosting-benefit .con-area .price{color:#5f71de;} .hosting-benefit .con-area .price .num{font-size:45px; font-weight:600; letter-spacing:-2px;} .hosting-benefit .con-area .price .unit{font-size:35px; font-weight:400;} /* 입점형 쇼핑몰 관련 상담 */ #itemMallinWrap .sec-qna{position:relative; margin-top:170px;} #itemMallinWrap .sec-qna .btn-submit{width:400px;} #itemMallinWrap .sec-qna .call-balloon{position:absolute; top:-70px; left:50%; padding:115px 0 0 35px; margin-left:267px; width:281px; height:270px; line-height:1; letter-spacing:-2px; color:#fff; background:url('/images/v2/sub/mallin/call_bg.png') no-repeat center center;} #itemMallinWrap .sec-qna .call-balloon h4{margin-bottom:5px; font-size:20px; font-weight:400;} #itemMallinWrap .sec-qna .call-balloon .phone{font-size:33px; font-weight:500;} #itemMallinWrap .sec-qna .call-balloon .phone span{font-weight:300;} @media (max-width:1280px) { .hosting-benefit .benefit-plus {margin: 0 32px; width: 64px;} .hosting-benefit h4{padding:20px 0; font-size:24px;} .hosting-benefit .con-area{padding:40px 0;} .hosting-benefit .con-area .tit{font-size:20px;} .hosting-benefit .con-area .price .num{font-size:40px;} .hosting-benefit .con-area .price .unit{font-size:30px;} } @media (max-width:992px) { .hosting-benefit .benefit-plus {margin: 0 24px; width: 56px;} .hosting-benefit > div {width: 240px;} .hosting-benefit h4{padding:15px 0; font-size:20px;} .hosting-benefit .con-area{padding:30px 0;} .hosting-benefit .con-area .tit{font-size:18px;} .hosting-benefit .con-area .price .num{font-size:34px;} .hosting-benefit .con-area .price .unit{font-size:26px;} } @media (max-width:768px) { #itemMallinWrap .sec-solution{margin-top:120px;} #itemMallinWrap .sec-recommend {padding-top: 120px;} #itemMallinWrap .hosting-service {background-size: auto 220px; height: 260px;} #itemMallinWrap .sec-hosting {margin-top: 120px;} .hosting-benefit .benefit-plus {margin: 10px 0; width: 48px;} .hosting-benefit > div {display: block; width: 240px; margin: 0 auto;} .hosting-benefit h4{padding:10px 0; font-size:18px;} .hosting-benefit h4 span {font-size: 16px;} .hosting-benefit .con-area{padding:25px 0;} .hosting-benefit .con-area .tit{font-size:16px;} .hosting-benefit .con-area .price .num{font-size:26px;} .hosting-benefit .con-area .price .unit{font-size:20px;} #itemMallinWrap .sec-qna {margin-top: 120px;} #itemMallinWrap .sec-qna .btn-submit {width: 240px; height: 50px; margin-top: 20px; line-height: 48px; font-size: 16px;} #itemMallinWrap .sec-qna .btn-submit img {width: 20px;} } /* 창업패키지 소개 페이지 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 공통 --------------------------------------------------------------------------------------- */ /* 비주얼 */ .startup-visual{position:relative; width:100%; height:540px;} .startup-visual .txt-area{position:absolute; top:150px; left:0; right:0; margin:0 auto; text-align:center;} .startup-visual .txt-area h2{font-size:55px; font-weight:400; letter-spacing:-4px; line-height:1; color:#fff;} .startup-visual .txt-area p{margin-top:25px; font-size:18px; font-weight:300; line-height:1.4; color:#fff;} .startup-visual .txt-area p strong{font-weight:500;} /* ~란? */ .sec-startup-define{display:table; table-layout:fixed; margin:60px auto; width:900px; text-align:center; font-size:18px;} .sec-startup-define .sub-tit{margin-bottom:20px;} .sec-startup-define p{margin-top:10px ;line-height:1.5;} .sec-startup-define p:first-child{margin-top:0;} .sec-startup-define p strong{font-weight:400;} .sec-startup-define .btn-submit{margin:30px auto 0; width:400px;} /* 창업패키지 --------------------------------------------------------------------------------------- */ /* 비주얼 */ #startupRentWrap .startup-visual{background:url('/images/v2/sub/startup/visual_rent.jpg') no-repeat center center;} #startupCustomWrap .startup-visual{background:url('/images/v2/sub/startup/visual_custom.jpg') no-repeat center center;} /* ~하나부터 열까지 */ #startupRentWrap .sec-support{margin-top:150px;} #startupCustomWrap .sec-support{margin-top:150px;} /* 정말 다해드림 */ .sec-startup > section{margin-top:150px;} .sec-startup > section:first-child{margin-top:0;} #startupRentWrap .sec-startup{margin-top:100px; padding-top:150px; background:#ecfdff; background:#ecfdff url('/images/v2/sub/startup/bg_mint_top.jpg') no-repeat center top;} #startupRentWrap .sec-startup:after{content:""; display:block; margin-top:100px; width:100%; height:200px; background:url('/images/v2/sub/startup/bg_mint_bottom.jpg') no-repeat center top;} #startupCustomWrap .sec-startup{margin-top:100px; padding-top:150px; background:#eef8ff; background:#eef8ff url('/images/v2/sub/startup/bg_blue_top.jpg') no-repeat center top;} #startupCustomWrap .sec-startup:after{content:""; display:block; margin-top:100px; width:100%; height:200px; background:url('/images/v2/sub/startup/bg_blue_bottom.jpg') no-repeat center top;} .sec-startup > .btn-submit{margin-top:30px; width:400px;} .startup-process{margin:0 auto;} #startupRentWrap .startup-process{width:800px;} #startupCustomWrap .startup-process{width:680px;} .startup-process > li{position:relative; padding-bottom:50px;} .startup-process > li:after{content:""; display:block; clear:both;} .startup-process > li:before{position:absolute; top:0; left:84px; content:""; display:block; width:1px; height:100%;} #startupRentWrap .startup-process > li:before{background:#23c3d1;} #startupCustomWrap .startup-process > li:before{background:#0095ff;} .startup-process > li:last-child{padding-bottom:0;} .startup-process > li:last-child:before{display:none;} .startup-process .title{float:left; position:relative; padding-top:55px; width:168px; height:168px; text-align:center; background:#fff; border-radius:50%;} .startup-process .title > span{display:block; margin-bottom:5px; font-size:35px; font-weight:900; line-height:1; color:#2d3546;} .startup-process .title > h4{font-size:17px; font-weight:300; line-height:1; color:#2d3546;} #startupRentWrap .startup-process > li:nth-child(1) .title{background:#fff url('/images/v2/sub/startup/part_rent01.png') no-repeat center center/cover;} #startupRentWrap .startup-process > li:nth-child(2) .title{background:#fff url('/images/v2/sub/startup/part_rent02.png') no-repeat center center/cover;} #startupRentWrap .startup-process > li:nth-child(3) .title{background:#fff url('/images/v2/sub/startup/part_rent03.png') no-repeat center center/cover;} #startupRentWrap .startup-process > li:nth-child(4) .title{background:#fff url('/images/v2/sub/startup/part_rent04.png') no-repeat center center/cover;} #startupCustomWrap .startup-process > li:nth-child(1) .title{background:#fff url('/images/v2/sub/startup/part_custom01.png') no-repeat center center/cover;} #startupCustomWrap .startup-process > li:nth-child(2) .title{background:#fff url('/images/v2/sub/startup/part_custom02.png') no-repeat center center/cover;} #startupCustomWrap .startup-process > li:nth-child(3) .title{background:#fff url('/images/v2/sub/startup/part_custom03.png') no-repeat center center/cover;} .startup-process .spec-list{position:relative; float:left; padding:25px 0 0 20px; width:calc(100% - 168px); font-size:0; line-height:0;} .startup-process .spec-list li{display:inline-block; vertical-align:top; text-align:center; margin-top:20px;} #startupRentWrap .spec-list li{width:20%;} #startupCustomWrap .spec-list li{width:25%;} .startup-process .spec-list .img{position:relative; margin:0 auto 8px; width:56px; height:47px;} .startup-process .spec-list .img img{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;} .startup-process .spec-list .txt{font-size:14px; line-height:1.3; word-break:keep-all;} /* 호스팅 혜택 - 맞춤형만 */ #startupCustomWrap .startup-hosting{margin-top:50px;} #startupCustomWrap .startup-hosting:before{content:""; display:block; margin:0 auto 30px; width:71px; height:71px; background:url('/images/v2/sub/startup/icon_plus_blue.png') no-repeat center center;} #startupCustomWrap .startup-hosting .item-table .price{color:#0095ff;} #startupCustomWrap .startup-hosting .btn-submit{margin-top:60px; width:400px; color:#fff; background:#6a899e;} /* 호스팅 팝업 */ #hostingDetail #itemCustomWrap .sec-hosting{margin-top:100px;} #hostingDetail #itemCustomWrap .sec-hosting:first-child{margin-top:0;} /* 내 창업 비용 */ .startup-total-price{margin:0 auto; padding-top:60px; width:589px; height:252px; text-align:center; color:#fff;} #startupRentWrap .startup-total-price{background:url('/images/v2/sub/startup/total_price_mint.png') no-repeat center center;} #startupCustomWrap .startup-total-price{background:url('/images/v2/sub/startup/total_price_blue.png') no-repeat center center;} .startup-total-price h4{margin-bottom:5px; font-weight:400; font-size:26px; color:#fff;} .startup-total-price .price{font-style:italic; line-height:1; font-size:54px; font-weight:400;} #startupRentWrap .startup-total-price .price{color:#b1fffc;} #startupCustomWrap .startup-total-price .price{color:#bbecff;} .startup-total-price .price em{font-style:italic; font-size:73px; font-weight:700; letter-spacing:-2px;} /* 프리미엄 */ .sec-premium .inner:after{content:""; display:block; clear:both;} .premium-default{float:left; padding-top:170px; width:340px; height:420px; text-align:center; line-height:1.3; font-size:30px; font-weight:400; background:#f5f5f5; border-radius:20px;} #startupRentWrap .premium-default{color:#23c3d1;} #startupCustomWrap .premium-default{color:#0095ff;} .premium-default strong{font-weight:900;} .premium-list{position:relative; float:left; margin-left:60px;} .premium-list:before{position:absolute; top:50%; left:-23.5px; content:""; display:block; margin-top:-23.5px; width:47px; height:47px;} #startupRentWrap .premium-list:before{background:url('/images/v2/sub/startup/icon_plus_mint.png') no-repeat center center;} #startupCustomWrap .premium-list:before{background:url('/images/v2/sub/startup/icon_plus_blue.png') no-repeat center center;} .premium-list:after{content:""; display:block; clear:both;} .premium-list li{float:left; padding-top:60px; margin-left:10px; width:340px; height:420px; text-align:center; background:#f5f5f5; border-radius:20px;} .premium-list li:first-child{margin-left:0;} .premium-list h4{margin-bottom:40px; letter-spacing:-2px; font-size:24px; font-weight:500; color:#000;} .premium-list h4 .num{display:inline-block; margin:-4px 12px 0 0; padding:0 8px; height:32px; text-align:center; vertical-align:middle; line-height:30px; font-size:16px; font-weight:500; letter-spacing:-1px; border:1px solid #999; border-radius:4px;} .premium-list p{margin-top:25px; font-size:18px;} .premium-msg{float:left; margin-top:40px; padding-top:40px; width:100%; text-align:center; line-height:1; font-weight:400; font-size:24px; color:#2d3546; border-top:1px dashed #ddd;} .premium-msg em{font-weight:500;} #startupRentWrap .premium-msg em{color:#23c3d1;} #startupCustomWrap .premium-msg em{color:#0095ff;} /* ~어렵지 않습니다 */ .sec-startup-end{padding-bottom:150px; text-align:center;} .sec-startup-end:before{content:""; display:block; width:100%; height:348px;} #startupRentWrap .sec-startup-end{background:#ecfdff;} #startupCustomWrap .sec-startup-end{background:#eef8ff;} #startupRentWrap .sec-startup-end:before{background:url('/images/v2/sub/startup/bg_mint_top2.jpg') no-repeat center top;} #startupCustomWrap .sec-startup-end:before{background:url('/images/v2/sub/startup/bg_blue_top2.jpg') no-repeat center top;} .sec-startup-end p{margin-top:10px; line-height:1.5; font-size:18px;} .sec-startup-end p:first-child{margin-top:0;} .sec-startup-end p strong{font-weight:400;} .sec-startup-end .btn-submit{margin-top:60px; width:400px;} /* 유의사항 */ .sec-startup-notice{margin-top:100px; padding:40px; text-align:center; border-radius:20px;} #startupRentWrap .sec-startup-notice{background:#d8f0f3;} #startupCustomWrap .sec-startup-notice{background:#d5eeff;} .sec-startup-notice h4{margin-bottom:20px; font-size:24px; font-weight:500; color:#000;} .sec-startup-notice li{line-height:1.8;} /* 회사소개 */ .company_wrap {padding:5% 0; background: #f4f8ff url(/images/v2/sub/bg_purple.gif) no-repeat center top; text-align: center;} .company_wrap .sub-tit h4{font-weight: 300; margin-top: 20px; font-size: 25px; color: #000} .company_wrap .sub-tit2{margin: 30px 20px; text-align: center;} .company_wrap .sub-tit2 h3{font-size: 33px; margin-bottom: 20px; color: #000; letter-spacing: -2px; line-height: 1.3;} .company_wrap .sub-tit2 h3 > strong{font-weight: 500;} .company_wrap .sub-tit2 p{font-size: 22px; margin-top: 10px; color: #333;} .company_wrap .box {margin: 0 0 100px;} .company_wrap .box:last-child{margin: 0;} .company_wrap .box .img-area{margin:0 50px;} .history{padding: 100px 0 0; font-family: 'Pretendard';} .history .sub-tit h3{letter-spacing: 0; font-weight: 500;} .history .big_tab ul{margin: auto; border-bottom: 1px solid #ddd; display: flex; justify-content: center;} .history .big_tab ul li{text-align: center; padding: 15px 0; font-size: 20px; background: #fff; width: 25%; position: relative;} .history .big_tab ul li a{font-weight:300;} .history .big_tab ul li.activeClass::before {content: ''; display: block; height:12px; width:12px ;background:#5D91F5; position: absolute; left: 50%; margin-left: -6px; bottom: -6px; opacity: 0; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} .history .big_tab ul li.activeClass a{color:#5D91F5; font-weight:400;} .history .big_tab ul li.activeClass::before {opacity: 1;} .history_detail {max-width:880px; margin:auto; padding: 50px 0 0;} .history_detail .year{margin: 0 30px 60px;} .history_detail .year:last-child{margin: 0 30px 0} .history_detail .year dl {display: table;} .history_detail .year dl > dt{font-size: 60px; line-height: 60px; padding: 0; color: #777; display: inline-block; width: 300px; margin-top: 10px;} .history_detail .year dl > dd{font-size: 20px; color: #444; font-weight: 300; letter-spacing: -0.3px; text-align: left; display: table-cell; vertical-align: middle;} .history_detail .year dl > dd ul li {display: flex; margin-bottom: 10px;} .history_detail .year dl > dd ul li:last-child {margin-bottom: 0;} .history_detail .year dl > dd ul li strong{flex-shrink: 0; margin-right: 25px; color: #5D91F5;} .history_detail .year dl > dd ul li p {display: inline-block; font-family: 'Roboto', 'Noto Sans KR', sans-serif; letter-spacing: -1px;} /* 이용약관 */ .stip{max-width: 1200px; margin:auto; display: block; background: #f8f8f8; text-align: left; color: #666; font-size: 16px; line-height: 24px; letter-spacing: -0.5px; word-break: keep-all; word-wrap: break-word;} .stip .inner {padding: 50px; width: auto;} .stip .inner h4{font-size: 20px; font-weight: 400; margin-bottom: 20px;} .stip .inner pre{line-height: 24px; font-family: 'Roboto', 'Noto Sans KR', sans-serif; word-break: keep-all; word-wrap: break-word; white-space: pre-wrap; letter-spacing: -0.5px; font-weight: 300;} .stip .inner pre > strong{font-weight: 500;} .stip .inner pre > h5{display: initial; font-size: 18px; font-weight: 400; color: #333;} .stip pre table.tb_style02 {border-collapse: collapse; border: solid 1px #e0e0e0; background: #fff; padding: 10px; display: inline-table;} .stip pre table.tb_style02 th {font-size: 15px; vertical-align: middle; padding: 10px; background: #eee; border: solid 1px #e0e0e0; text-align: center;} .stip pre table.tb_style02 td {font-size: 15px; padding: 10px 10px 10px 20px; border: solid 1px #e0e0e0; vertical-align: baseline;} @media (max-width:992px) { .history_detail .year{margin: 0 0 40px;} .history_detail .year:last-child{margin: 0;} .history_detail .year dl > dt{font-size: 50px; line-height: 50px; width: 200px; margin-top: 0;} .history_detail .year dl > dd{font-size: 18px;} } @media (max-width:768px) { .company_wrap .sub-tit h3 {font-size: 20px;} .company_wrap .sub-tit h4 {font-size: 20px;} .company_wrap .sub-tit2 {margin: 30px 0;} .company_wrap .sub-tit2 h3 {font-size: 20px;} .company_wrap .sub-tit2 p {font-size: 14px;} .history{padding: 60px 0 0;} .history .big_tab ul li{padding: 15px 0; font-size: 20px; width: calc(100% / 3);} .history .big_tab ul li a{font-size: 15px;} .history_detail .year{margin: 0 0 40px;} .history_detail .year:last-child{margin: 0;} .history_detail .year dl {display: block;} .history_detail .year dl > dt {font-size: 30px; line-height: 30px; width: 100%;} .history_detail .year dl > dd {font-size: 14px; margin-top: 10px; display: block;} .history_detail .year dl > dd ul li {margin-bottom: 5px;} .history_detail .year dl > dd ul li strong {margin-right: 10px;} .stip{font-size: 14px; line-height: 1.6;} .stip .inner {padding: 20px;} .stip .inner h4{font-size: 16px;} .stip .inner pre{line-height: 1.6;} .stip .inner pre > h5{font-size: 16px;} .stip pre table.tb_style02 {padding: 5px; width: 100% !important;} .stip pre table.tb_style02 th {font-size: 12px; padding: 5px; width: auto;} .stip pre table.tb_style02 td {font-size: 12px; padding: 5px;} } /* 모바일,관리자앱 소개 페이지 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 모바일 --------------------------------------------------------------------------------------- */ #itemMobileWrap{padding-bottom:150px;} #itemMobileWrap .item-visual{background:url('/images/v2/sub/mobile/visual_mobile.jpg') no-repeat center center;} .item-visual .mobile-address{margin-top:25px;} .item-visual .mobile-address dt{margin-bottom:7px; font-size:18px; font-weight:400; color:#fff;} .item-visual .mobile-address dd{width:350px; height:50px; text-align:center; line-height:50px; font-size:18px; letter-spacing:0; color:#fff; background:#004a7e; border-radius:25px;} .item-visual .mobile-address dd em{color:#00ffb4;} #itemMobileWrap .sub-tit{margin-top:80px;} .sec-mobile > section{margin-top:150px; text-align:center;} .sec-mobile > section:after{content:""; display:block; clear:both;} .sec-mobile > .sub-tit + section{margin-top:0;} .sec-mobile .img-area, .sec-mobile .txt-area{display:inline-block; padding:0 50px; max-width:620px; vertical-align:middle;} .sec-mobile .txt-area{text-align:left;} #itemMobileWrap .sec-mobile h4{margin-bottom:20px; font-size:30px; font-weight:400; line-height:1.3; letter-spacing:-2px; color:#000;} #itemMobileWrap .sec-mobile h4:before{content:""; display:inline-block; margin-right:10px; vertical-align:middle; width:15px; height:29px; background:url('/images/v2/sub/mobile/label.png') no-repeat center center;} .sec-mobile .location{margin-top:20px; padding:20px 30px; background:#f1faff; border-radius:10px;} .sec-mobile .location h5{margin-top:20px; font-size:16px; font-weight:400; color:#5f71de;} .sec-mobile .location h5:first-of-type{margin-top:0;} .sec-mobile .location div{font-size:14px; word-break:keep-all;} .sec-mobile .one-list > li > p{position:relative; line-height:1.8; font-size:16px; color:#555;} .sec-mobile .one-list > li > p:before{content:""; position:absolute; top:13px; left:0; display:inline-block; width:5px; height:5px; background:#555; border-radius:50%;} .sec-mobile .one-list > li{position:relative; padding-left:15px; line-height:1.8; font-size:16px; color:#555;} .sec-mobile .one-list > li:before{content:""; position:absolute; top:13px; left:0; display:inline-block; width:5px; height:5px; background:#555; border-radius:50%;} .sec-mobile .depth1-list h5{margin-bottom:3px; font-size:18px; font-weight:400; color:#0078cd;} .sec-mobile .depth1-list > li{margin-top:15px;} .sec-mobile .depth1-list > li:first-child{margin-top:0;} .sec-mobile .depth1-list > li > p{position:relative; margin-left:16px; padding-left:10px; line-height:1.7; font-size:15px; color:#555;} .sec-mobile .depth1-list > li > p:before{content:""; position:absolute; top:11px; left:0; display:inline-block; width:4px; height:4px; background:#555; border-radius:50%;} .sec-mobile .depth2-list{padding-left:16px;} .sec-mobile .depth2-list > li{position:relative; padding-left:10px; line-height:1.7; font-size:15px; color:#555;} .sec-mobile .depth2-list > li:before{content:""; position:absolute; top:11px; left:0; display:inline-block; width:4px; height:4px; background:#555; border-radius:50%;} /* 모바일 관리자 앱 --------------------------------------------------------------------------------------- */ #itemMobileAdminWrap{padding-bottom:150px;} #itemMobileAdminWrap .item-visual{background:url('/images/v2/sub/mobile/visual_mobile_admin.jpg') no-repeat center center;} #itemMobileAdminWrap .item-visual .txt-area{padding-top:30px;} #itemMobileAdminWrap .item-visual h2 span{font-size:45px; font-weight:300;} /* 관리자 앱 다운로드 */ .sec-download{margin-top:80px;} .download-area{text-align:center; line-height:0; font-size:0;} .download-area > ul{display:inline-block; vertical-align:middle;} .download-area > ul > li{position:relative; display:inline-block; vertical-align:top;} .download-area > ul > li:first-child{padding-right:50px; margin:0 100px 0 50px;} .download-area > ul > li:first-child:after{position:absolute; top:50%; left:100%; content:"OR"; display:inline-block; vertical-align:middle; margin-top:-20px; width:65px; line-height:1; letter-spacing:-2px; font-size:45px; font-weight:700; color:#ccc;} .download-area h5{margin-bottom:10px; font-size:30px; font-weight:300; color:#000;} .download-area h5 em{font-weight:500;} .download-area h5 .num{display:inline-block; margin:-4px 12px 0 0; width:36px; height:36px; text-align:center; vertical-align:middle; line-height:34px; font-size:18px; font-weight:600; border:1px solid #999; border-radius:4px;} .download-area p{margin-bottom:30px; line-height:1.4; font-size:16px; color:#555;} .download-area p + p{margin:-30px 0 30px;} .download-area .store-list li{display:inline-block; font-size:16px; line-height:1; color:#000;} .download-area .store-list li:first-child{margin-right:10px;} .download-area .store-list li a{font-size:16px; line-height:1; color:#000;} .download-area .store-list li span{font-size:14px; color:#888;} .download-area .store-list li img{display:block; margin:0 auto 10px;} .download-area .qr{margin:0 auto; padding:20px; width:110px; height:110px; text-align:center; border:1px solid #ddd; border-radius:10px;} /* 관리자 앱이란? */ #itemMobileAdminWrap .sec-support:before{content:""; display:block; width:100%; height:160px; background:url('/images/v2/sub/bg_blue_top.jpg') no-repeat center top;} #itemMobileAdminWrap .sec-support{background:#eef8ff;} #itemMobileAdminWrap .sec-support .sub-tit{margin-top:80px;} #itemMobileAdminWrap .sec-support .support-list{padding:40px 0 150px;} #itemMobileAdminWrap .sec-support .support-list li{margin-left:100px;} #itemMobileAdminWrap .sec-support .support-list li:first-child{margin-left:0;} #itemMobileAdminWrap .sec-mobile{margin-top:0; padding-top:150px; background:url('/images/v2/sub/bg_blue_bottom.jpg') no-repeat center top;} #itemMobileAdminWrap .sec-mobile h4{margin-bottom:20px; font-size:30px; font-weight:400; line-height:1.3; letter-spacing:-2px; color:#000;} #itemMobileAdminWrap .sec-mobile h4 span{display:block; margin-bottom:5px; width:100px; height:24px; text-align:center; line-height:24px; font-size:12px; font-weight:500; letter-spacing:0; color:#fff; background:#0078cd; border-radius:12px;} /* 부가서비스 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 공통 --------------------------------------------------------------------------------------- */ .addservice.content{width: 100%; margin: auto; padding-left: 5%; padding-right: 5%;} .addservice-wrap{} .addservice-wrap:after{content:""; display:block; clear:both;} .addservice-wrap .left-area{float:left; /*margin-right:110px;*/ width:230px; border-radius:10px; background:#fff; border:1px solid #ddd;} .addservice-wrap .left-area.scroll{z-index:666; position:fixed; position:fixed; top:110px;} .addservice-wrap .right-area{float:right; width:100%; max-width: calc(100% - 260px);} @media (max-width: 1920px) { /* 콘텐츠 영역 */ .addservice.content{max-width:1440px;} .addservice-con h4{margin:80px 0 15px; line-height:1; font-weight:500; font-size:28px; color:#000;} .addservice-con h4 img{margin:-2px 10px 0 0;} .addservice-con h4 + p{margin: 0 0 15px;} .addservice-con .desc{margin-top:15px;} .addservice-con .notice-desc{margin-top:15px; font-size:14px;} .addservice-con .desc + .desc{margin-top:5px;} .addservice-con .desc + .notice-desc{margin-top:5px;} .addservice-con .notice-desc + .desc{margin-top:5px;} .addservice-con table .desc{margin-top:7px;} .addservice-con .box{padding:30px; border:1px solid #ddd; border-radius:20px;} .addservice-con .box .img-area{text-align:center;} /* ~란? 정의 박스 */ .addservice-con .define-box{padding:30px 50px 30px 70px; background:#f0f3f5; border-radius:20px;} .addservice-con .define-box:after{content:""; display:block; clear:both;} .addservice-con .define-box h4{margin:0 0 10px;} .addservice-con .define-box h4 + p{margin:0; word-break:keep-all;} .addservice-con .define-box .img-area{display:table-cell; vertical-align:middle;} .addservice-con .define-box .txt-area{display:table-cell; vertical-align:middle; padding-left:50px;} /* 블릿 리스트 */ .addservice-con .depth1-list > li{margin-top:50px;} .addservice-con .depth1-list > li:first-child{margin-top:0;} .addservice-con .depth1-list.small > li{margin-top:20px;} .addservice-con .depth1-list > li > h5{position:relative; padding-left:28px; line-height:1.3; font-size:18px; font-weight:400; color:#000;} .addservice-con .depth1-list > li > h5 span{position:absolute; top:1px; left:0; display:inline-block; margin-top:2px; text-align:center; vertical-align:middle; width:20px; height:20px; line-height:20px; font-size:13px; font-weight:700; color:#fff; background:#2d3546; border-radius:3px;} .addservice-con .depth1-list > li > h5 + p{margin-top:7px; padding-left:28px;} .addservice-con .depth1-list > li > img{display:block; margin-top:20px;} .addservice-con .depth1-list > li > .depth2-list{margin-top:7px; padding-left:28px;} .addservice-con .depth1-list > li > .advantage-list{margin-top:20px; padding-left:28px;} .addservice-con .depth1-list > li > .desc{padding-left:28px; margin-top:5px;} .addservice-con .depth1-list > li > .notice-desc{padding-left:28px; margin-top:5px;} .addservice-con .depth2-list > dt{font-weight:500; color:#000;} .addservice-con .depth2-list > dd, .addservice-con .depth2-list > li{position:relative; margin-top:7px; padding-left:15px;} .addservice-con .depth2-list > li:first-child{margin-top:0;} .addservice-con .depth2-list > dd:before, .addservice-con .depth2-list > li:before{position:absolute; top:11px; left:0; content:""; display:inline-block; vertical-align:middle; width:5px; height:5px; background:#555; border-radius:50%;} .addservice-con .depth2-list > li > .desc{margin-top:5px;} .addservice-con .depth2-list > li > .notice-desc{margin-top:5px;} .addservice-con .depth3-list{margin-top:5px;} .addservice-con .depth3-list > li{position:relative; padding-left:10px; margin-top:5px; font-size:14px;} .addservice-con .depth3-list > li:first-child{margin-top:0;} .addservice-con .depth3-list > li:before{position:absolute; top:10px; left:0; content:""; display:inline-block; vertical-align:middle; width:5px; height:1px; background:#555; border-radius:50%;} /* 절차 */ .addservice-con .process-list{padding:30px; line-height:0; font-size:0; border:1px solid #ddd; border-radius:20px; display: flex; gap: 40px;} .addservice-con .process-list li{flex: 1; position:relative; text-align:center; line-height:1.3; font-size:16px; font-weight:400; word-break:keep-all;} .addservice-con .process-list li:before{position:absolute; top:50%; left:-27px; content:""; margin-top:-13px; width:15px; height:27px; background:url('/images/v2/sub/process_arrow.png') no-repeat center center;} .addservice-con .process-list li:first-child:before{display:none;} .addservice-con .process-list li > img{display:block; margin:0 auto 20px;} .addservice-con .process-list li > span{display:block; font-size:14px; color:#888;} .addservice-con .process-list li h5{margin-bottom:5px; line-height:1.3; font-size:17px; font-weight:400; color:#000;} .addservice-con .process-list li h5 + p{line-height:1.5; font-size:14px; font-weight:300;} .addservice-con .process-list li h5 + p span{display:block; font-size:14px;} .addservice-con .process-list .link-small{margin-top:15px;} /* 절차 세로 */ .addservice-con .process-row-list{padding:30px 50px; text-align:center; line-height:0; font-size:0; border:1px solid #ddd; border-radius:20px;} .addservice-con .process-row-list > li{display:table; margin:20px 0; width:100%; text-align:left; vertical-align:middle; line-height:1.5; font-size:16px;} .addservice-con .process-row-list .img-area{display:table-cell; width:155px; vertical-align:middle;} .addservice-con .process-row-list .txt-area{display:table-cell; padding-left:50px; width:calc(100% - 155px); vertical-align:middle;} .addservice-con .process-row-list .txt-area h5{position:relative; padding-left:28px; margin-bottom:10px; line-height:1.3; font-size:18px; font-weight:400; color:#000;} .addservice-con .process-row-list .txt-area h5 span{position:absolute; top:1px; left:0; display:inline-block; margin-top:2px; text-align:center; vertical-align:middle; width:20px; height:20px; line-height:20px; font-size:13px; font-weight:700; color:#fff; background:#2d3546; border-radius:3px;} .addservice-con .process-row-list .desc{margin-top:5px;} .addservice-con .process-row-list .notice-desc{margin-top:5px;} /* 특징 */ .addservice-con .advantage-list{font-size:0; line-height:0; display: flex; gap: 20px;} .addservice-con .advantage-list > li{flex: 1; text-align:center; padding:40px 30px; line-height:1.5; font-size:15px; word-break:keep-all; border:1px solid #ddd; border-radius:20px;} .addservice-con .advantage-list > li > img{display:block; margin:0 auto 20px;} .addservice-con .advantage-list > li > h5{margin-bottom:5px; line-height:1.3; font-size:17px; font-weight:400; color:#000;} /* 제휴사 리스트 */ .addservice-con .company-list{font-size:0; line-height:0; display: flex; gap: 20px; flex-wrap: wrap;} .addservice-con .company-list li{flex: 1; text-align:center; padding:15px; line-height:1.5; font-size:16px; border:1px solid #ddd; border-radius:10px; display: flex; flex-direction: column; justify-content: center; align-items: center;} .addservice-con .company-list li img{display:block; margin:0 auto 5px;} /* 제휴사 */ .addservice-con .company img{margin:20px 0;} .addservice-con .company dd.num{margin-top:5px; font-weight:400; color:#0095ff;} /* 결제 페이지 --------------------------------------------------------------------------------------- */ .radio-txt-list{display: flex; justify-content: space-around; margin-bottom: 20px;} .tax_business_field{display: flex; justify-content: space-between; align-items: center;} /* 신용카드 결제 --------------------------------------------------------------------------------------- */ .creditcard-wrap .table-col td{padding:10px;} .creditcard-wrap .table-col tbody th span{display:block; margin-top:5px; font-weight:300; font-size:13px; color:#888;} .creditcard-wrap .table-row th{text-align:center;} .creditcard-wrap .table-row td{letter-spacing:0;} /* 휴대폰 결제 --------------------------------------------------------------------------------------- */ .phone-wrap .process-list.col6{padding-bottom:80px;} .phone-wrap .process-list li{position:relative;} .phone-wrap .process-list .pop-txt{position:absolute; bottom:-50px; left:40%; white-space: nowrap; padding: 0 10px; height:30px; line-height:30px; font-size:13px; color:#fff; background:#6b9abb; border-radius:4px;} .phone-wrap .process-list .pop-txt:after{position:absolute; top:-8px; left:10px; content:""; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:10px solid #6b9abb;} .phone-wrap .table-row th{text-align:center;} /* 에스크로 --------------------------------------------------------------------------------------- */ .escrow-wrap .table-row{margin-top:-1px;} .escrow-wrap .table-row th{text-align:center; background:#f8f8f8; border-right:1px solid #ddd;} /* 이미지 호스팅 --------------------------------------------------------------------------------------- */ .imghosting-wrap .copy-box{padding:30px; margin-bottom:20px; text-align:center; color:#fff; border:2px solid #0095ff; border-radius:10px;} .imghosting-wrap .main-copy{font-size:20px;} .imghosting-wrap .main-copy strong{font-weight:500;} .imghosting-wrap .sub-copy{font-weight:300;} .imghosting-wrap .table-col th, .imghosting-wrap .table-col td{padding:10px; text-align:center; border-right:1px solid #ddd;} .imghosting-wrap .table-col thead th{border-color:#ddd; background:#f1f1f1;} .imghosting-wrap .table-col tbody th{background:#f8f8f8;} .imghosting-wrap .table-col td strong{font-weight:400; color:#000;} .imghosting-wrap .table-col td.noline{border-right:0;} .imghosting-wrap .table-col td.td-bg{background:#fffdec;} .imghosting-wrap .table-col th span, .imghosting-wrap .table-col td span{display:block; font-size:14px; color:#0095ff;} .imghosting-wrap .box{display:table; margin-top:10px; width:100%;} .imghosting-wrap .box .img-area{display:table-cell; vertical-align:middle; width:755px;} .imghosting-wrap .box .txt-area{display:table-cell; vertical-align:middle; padding-left:30px; width:calc(100% - 755px);} /* 채팅상담 서비스 --------------------------------------------------------------------------------------- */ .chatservice-wrap .depth1-list:after{content:""; display:block; clear:both;} .chatservice-wrap .depth1-list:last-child li{float:left; margin-top:0;} .chatservice-wrap .depth1-list:last-child li:first-child{margin:0 70px 0 0;} .chatservice-wrap .depth1-list:last-child li:last-child{width:100%; margin-top:50px;} /* 맞춤 디자인 --------------------------------------------------------------------------------------- */ .addservice-con .customize-list h4{margin:0; height:160px; padding-bottom:30px; font-size:24px; font-weight:400; line-height:1; color:#000; border-bottom:1px dashed #ddd;} .addservice-con .customize-list h4 img{display:block; margin:0 auto 15px;} .addservice-con .customize-list h4 span{display:block; margin-top:5px; font-size:14px; font-weight:300; letter-spacing:0;} /* 오픈 도우미 서비스 --------------------------------------------------------------------------------------- */ .open-wrap .process-row-list > li{margin:30px 0; padding-bottom:30px; border-bottom:1px dashed #ddd;} .open-wrap .process-row-list > li:last-child{padding-bottom:0; border-bottom:0;} .open-wrap .process-row-list .img-area{vertical-align:top;} /* 전자세금계산서 --------------------------------------------------------------------------------------- */ .etax-wrap .table-row th{background:#f8f8f8;} /* 택배박스 --------------------------------------------------------------------------------------- */ .deliverybox-wrap{} /* 아이핀 --------------------------------------------------------------------------------------- */ .ipin-wrap .table-row th{text-align:center;} /* 휴대폰 본인 확인 --------------------------------------------------------------------------------------- */ .phoneauth-wrap .table-row th{text-align:center;} /* 네이버 페이 --------------------------------------------------------------------------------------- */ .naverpay-wrap{} /* 네이버 버튼 */ .naver-btn-area{margin-top:80px; text-align:center; line-height:0; font-size:0;} .naver-btn-area a{display:inline-block; text-align:center; vertical-align:middle; width:300px; height:60px; line-height:58px; font-size:20px; font-weight:500; border-radius:30px;} .naver-btn-area a:first-child{margin-right:10px;} .naver-btn-area .color{color:#fff; background:#03cf5d;} .naver-btn-area .line{color:#03cf5d; border:1px solid #03cf5d;} .naver-btn-area img{margin-left:15px;} /* 네이버 톡톡 --------------------------------------------------------------------------------------- */ .navertalk-wrap{} /* 카카오 알림톡 --------------------------------------------------------------------------------------- */ .kakaonotice-wrap .box{display:table; padding:30px 40px; width:100%;} .kakaonotice-wrap .box .img-area{display:table-cell; vertical-align:middle; width:380px;} .kakaonotice-wrap .box .depth1-list{display:table-cell; vertical-align:middle; padding-left:40px; width:calc(100% - 380px);} .kakaonotice-wrap .table-row th, .kakaonotice-wrap .table-row td{padding:15px 30px;} /* 카카오 상담톡 --------------------------------------------------------------------------------------- */ .kakaocounselor-wrap .advantage-list > li{} .kakaocounselor-wrap .table-col thead th{border-color:#ddd; background:#f1f1f1;} .kakaocounselor-wrap .table-col tbody th{background:#f8f8f8;} .kakaocounselor-wrap .table-col th, .kakaocounselor-wrap .table-col td{border-right:1px solid #ddd;} .kakaocounselor-wrap .table-col th:last-child, .kakaocounselor-wrap .table-col td:last-child{border-right:0;} /* 문자 발송 --------------------------------------------------------------------------------------- */ .sms-wrap .advantage-list > li{} /* 이메일 마케팅 --------------------------------------------------------------------------------------- */ .emailmarketing-wrap .advantage-list > li{} /* 로그 분석 --------------------------------------------------------------------------------------- */ .loganalyze-wrap{} /* 이전 혜택 및 절차 --------------------------------------------------------------------------------------- */ .datamove-wrap .advantage-list > li{} .datamove-wrap .process-row-list > li{margin:30px 0; padding-bottom:30px; border-bottom:1px dashed #ddd;} .datamove-wrap .process-row-list > li:last-child{padding-bottom:0; border-bottom:0;} .datamove-wrap .process-row-list .img-area{vertical-align:top;} .datamove-wrap .btn-area{margin-top:30px;} .datamove-wrap .btn-area a{display:inline-block; text-align:center; vertical-align:middle; width:180px; height:40px; text-align:center; vertical-align:middle; line-height:40px; font-weight:400; font-size:16px; border-radius:25px;} .datamove-wrap .datamove-wrap .btn-area a:first-child{margin-right:10px;} .datamove-wrap .btn-area .mint{margin-right:5px; color:#fff; background:#23c3d1;} .datamove-wrap .btn-area .blue{color:#fff; background:#0095ff;} /* 블루리본 무료 이전 --------------------------------------------------------------------------------------- */ .blueribbon-wrap .process-row-list > li{margin:30px 0; padding-bottom:30px; border-bottom:1px dashed #ddd;} .blueribbon-wrap .process-row-list > li:last-child{padding-bottom:0; border-bottom:0;} .blueribbon-wrap .process-row-list .img-area{vertical-align:top;} .blueribbon-wrap .table-row th{text-align:center; background:#f8f8f8;} .blueribbon-wrap .table-row td{line-height:1.5;} .blueribbon-wrap .table-col th{background:#f8f8f8;} .blueribbon-wrap .table-col th, .blueribbon-wrap .table-col td{border-right:1px solid #ddd;} .blueribbon-wrap .table-col th:last-child, .blueribbon-wrap .table-col td:last-child{border-right:0;} .blueribbon-wrap .pop-con h4{margin-top:0;} .blueribbon-wrap .pop-con h5{margin:80px 0 10px; line-height:1; font-weight:500; font-size:22px; color:#000;} .blueribbon-wrap .pop-con h5:first-of-type{margin-top:0;} .blueribbon-wrap .pop-con h5 span{display:inline-block; text-align:center; vertical-align:middle; margin:-3px 8px 0 0; width:25px; height:25px; line-height:25px; font-size:15px; color:#fff; background:#2d3546; border-radius:3px;} .blueribbon-wrap .pop-con h6{margin:50px 0 10px; line-height:1; font-weight:500; font-size:18px; color:#000;} .blueribbon-wrap .pop-con h5 + h6{margin-top:0;} } @media (max-width:992px) {/* 콘텐츠 영역 */ .addservice-con h4{margin:50px 0 10px; text-align:center; line-height:1.4; font-weight:500; font-size:20px; color:#000;} .addservice-con h4 img{margin:-2px 10px 0 0;} .addservice-con h4 + p{margin:-5px 0 15px; text-align:center; line-height:1.6; font-size: 13px;} .addservice-con .desc{margin-top:5px;} .addservice-con .notice-desc{margin-top:5px; font-size: 12px;} .addservice-con .desc + .desc{margin-top:5px;} .addservice-con .desc + .notice-desc{margin-top:5px;} .addservice-con .notice-desc + .desc{margin-top:5px;} .addservice-con .box{padding:20px; border:1px solid #ddd; border-radius:20px;} .addservice-con .box .img-area{text-align:center;} /* ~란? 정의 박스 */ .addservice-con .define-box{padding:30px; text-align:center; background:#f0f3f5; border-radius:20px;} .addservice-con .define-box h4{margin:0 0 10px;} .addservice-con .define-box h4 + p{margin:0; word-break:keep-all;} .addservice-con .define-box .img-area { vertical-align: middle; max-width: 100%;display:block;} .addservice-con .define-box img{display:block; margin:0 auto 20px; width:100px;} /* 블릿 리스트 */ .addservice-con .depth1-list > li{margin-top:30px;} .addservice-con .depth1-list > li:first-child{margin-top:0;} .addservice-con .depth1-list.small > li{margin-top:20px;} .addservice-con .depth1-list > li > h5{position:relative; padding-left:22px; line-height:1.3; font-size:14px; font-weight:400; color:#000;} .addservice-con .depth1-list > li > h5 span{position:absolute; top:0; left:0; display:inline-block; text-align:center; vertical-align:middle; width:18px; height:18px; line-height:18px; font-size:10px; font-weight:700; color:#fff; background:#2d3546; border-radius:3px;} .addservice-con .depth1-list > li > h5 + p{margin-top:7px; padding-left:22px;} .addservice-con .depth1-list > li > img{display:block; margin-top:10px;} .addservice-con .depth1-list > li > .depth2-list{margin-top:7px; padding-left:22px;} .addservice-con .depth1-list > li > .advantage-list{margin-top:20px; padding-left:22px;} .addservice-con .depth1-list > li > .desc{padding-left:22px; margin-top:5px;} .addservice-con .depth1-list > li > .notice-desc{padding-left:22px; margin-top:5px;} .addservice-con .depth2-list > dt{font-weight:400; color:#000;} .addservice-con .depth2-list > dd, .addservice-con .depth2-list > li{position:relative; margin-top:5px; padding-left:7px; font-size: 13px; line-height: 1.6;} .addservice-con .depth2-list > li:first-child{margin-top:0;} .addservice-con .depth2-list > dd:before, .addservice-con .depth2-list > li:before{position:absolute; top:8px; left:0; content:""; display:inline-block; vertical-align:middle; width:3px; height:3px; background:#555; border-radius:50%;} .addservice-con .depth2-list > li > .desc{margin-top:5px;} .addservice-con .depth2-list > li > .notice-desc{margin-top:5px;} .addservice-con .depth3-list{margin-top:5px;} .addservice-con .depth3-list > li{position:relative; padding-left:10px; margin-top:3px; font-size:13px;} .addservice-con .depth3-list > li:first-child{margin-top:0;} .addservice-con .depth3-list > li:before{position:absolute; top:10px; left:0; content:""; display:inline-block; vertical-align:middle; width:5px; height:1px; background:#555; border-radius:50%;} /* 절차 */ .addservice-con .process-list{padding:5px 20px; display: block; text-align:left; line-height:0; font-size:0; border:1px solid #ddd; border-radius:20px;} .addservice-con .process-list li{font-size:15px; border-bottom: dashed 1px #e5e5e5; text-align: left; padding: 15px 0 15px 80px; min-height: 90px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;} .addservice-con .process-list li:last-child {border-bottom: none;} .addservice-con .process-list li:before{width: 50px; height: 50px; left: 50%; margin-left: -25px; top: 0; margin-top: -25px; background-color: #fff; transform:rotate(90deg) scale(0.6);-webkit-transform:rotate(90deg) scale(0.6); border: solid 1px #ddd; border-radius: 50%;} .addservice-con .process-list li > img{width: 60px; margin:0; position: absolute; left: 0; top: 50%; margin-top: -30px;} .addservice-con .process-list li > span{font-size:12px;} .addservice-con .process-list li h5{font-size:15px; font-weight: 500;} .addservice-con .process-list li h5 + p{font-size:12px;} .addservice-con .process-list li h5 + p br {display: none;} .addservice-con .process-list li h5 + p span{font-size:12px;} .addservice-con .process-list .link-small{margin-top:10px; font-size: 12px; display: block;} /* 절차 세로 */ .addservice-con .process-row-list ol{margin:-15px 0;} .addservice-con .process-row-list ol > li{position:relative; display:table; padding:20px 0; width:100%; text-align:left; vertical-align:middle; line-height:1.3; font-size:14px;} .addservice-con .process-row-list ol > li:before{position:absolute; bottom:0; left:50%; content:""; display:inline-block; margin:-8px 0 -5px 0; width:16px; height:9px; background:url('/images/mobile/sub/addservice/process_arrow2.png') no-repeat center center/cover;} .addservice-con .process-row-list ol > li:last-child:before{display:none;} .addservice-con .process-row-list{padding:20px;} .addservice-con .process-row-list > li {margin-top: 0;} .addservice-con .process-row-list > li:last-child {margin-bottom: 0;} .addservice-con .process-row-list .img-area{display:table-cell; width:60px; vertical-align:top;} .addservice-con .process-row-list .txt-area{display:table-cell; padding-left:20px; width:calc(100% - 80px); vertical-align:middle;} .addservice-con .process-row-list .txt-area h5{margin-bottom:5px; line-height:1.3; font-size:15px; font-weight:400; color:#000;} .addservice-con .process-row-list .txt-area p {font-size: 12px;} .addservice-con .process-row-list .desc{margin-top:5px;} .addservice-con .process-row-list .notice-desc{margin-top:5px;} /* 특징 */ .addservice-con .advantage-list {display: block;} .addservice-con .advantage-list > li{text-align: left; position: relative; margin-bottom: 10px; padding:20px 20px 20px 100px; line-height:1.5; font-size:15px; word-break:keep-all; border:1px solid #ddd; border-radius:20px;} .addservice-con .advantage-list > li:last-child {margin-bottom: 0;} .addservice-con .advantage-list > li > img{margin:0; width: 60px; position: absolute; left: 20px; top: 50%; margin-top: -30px;} .addservice-con .advantage-list > li > h5{font-size:15px;} .addservice-con .advantage-list > li > p{font-size:12px;} .addservice-con .advantage-list > li > ul li {font-size: 12px;} .addservice-con .advantage-list .img-area{display:table-cell; vertical-align:top; width:80px;} .addservice-con .advantage-list .txt-area{display:table-cell; vertical-align:middle; padding-left:20px; width:calc(100% - 80px);} .addservice-con .advantage-list .txt-area li{position:relative; padding-left:10px; margin-top:3px; line-height:1.3; font-size:14px;} .addservice-con .advantage-list .txt-area li:before{position:absolute; top:10px; left:0; display:inline-block; content:""; width:4px; height:1px; background:#555;} /* 제휴사 리스트 */ .addservice-con .company-list{gap: 5px;} .addservice-con .company-list li{font-size:12px; width: calc(100% / 3);} /* 제휴사 */ .addservice-con .company img{display:block; margin:0 auto 20px; width:120px;} .addservice-con .company dd.num{margin-top:5px; font-weight:400; color:#0095ff;} /* 신용카드 결제 --------------------------------------------------------------------------------------- */ .creditcard-wrap .table-col td{padding:10px;} .creditcard-wrap .table-col tbody th span{display:block; font-weight:300; font-size:12px; color:#888;} .creditcard-wrap .table-col .list li{padding:0;} .creditcard-wrap .table-col .list li:before{display:none;} .creditcard-wrap .table-row th{text-align:center;} .creditcard-wrap .table-row td{letter-spacing:0;} .creditcard-wrap .table-row .list li{word-break:break-word;} /* 휴대폰 결제 --------------------------------------------------------------------------------------- */ .phone-wrap .process-list.col6{padding-bottom:0;} .phone-wrap .process-list li{position:relative;} .phone-wrap .process-list .pop-txt {position: static; white-space: normal; height: auto; margin-top: 5px; font-size: 12px; line-height: 1.4; padding: 5px;} .phone-wrap .process-list .pop-txt:after {display: none;} .phone-wrap .table-row th{text-align:center;} /* 에스크로 --------------------------------------------------------------------------------------- */ .escrow-wrap .table-row{margin-top:-1px;} .escrow-wrap .table-row th{text-align:center; background:#f8f8f8; border-right:1px solid #ddd;} /* 이미지 호스팅 --------------------------------------------------------------------------------------- */ .imghosting-wrap .copy-box{padding:30px; margin-bottom:20px; text-align:center; color:#fff; border:2px solid #0095ff; border-radius:10px;} .imghosting-wrap .main-copy{font-size:20px;} .imghosting-wrap .main-copy strong{font-weight:500;} .imghosting-wrap .sub-copy{font-weight:300;} .imghosting-wrap .table-col th, .imghosting-wrap .table-col td{text-align:center; border-right:1px solid #ddd;} .imghosting-wrap .table-col thead th{border-color:#ddd; background:#f1f1f1;} .imghosting-wrap .table-col tbody th{background:#f8f8f8;} .imghosting-wrap .table-col td strong{font-weight:400; color:#000;} .imghosting-wrap .table-col td.noline{border-right:0;} .imghosting-wrap .table-col td.td-bg{background:#fffdec;} .imghosting-wrap .table-col th span, .imghosting-wrap .table-col td span{display:block; font-size:12px; color:#0095ff;} .imghosting-wrap .box{margin-top:10px;} .imghosting-wrap .box .txt-area{margin-top:10px;} /* 채팅상담 서비스 --------------------------------------------------------------------------------------- */ .chatservice-wrap{} /* 맞춤 디자인 --------------------------------------------------------------------------------------- */ .add-design-wrap .customize-list h4{margin:0;} .add-design-wrap .customize-list h4 img{display:block; margin:0 auto 10px;} .add-design-wrap .btn-submit{margin-top:20px; width:260px;} /* 오픈서비스 --------------------------------------------------------------------------------------- */ .open-wrap .advantage-list{line-height:0; font-size:0;} .open-wrap .advantage-list li{display:inline-block; padding:10px; margin:0; width:50%; text-align:center; vertical-align:top; border-top:0;} .open-wrap .advantage-list li:first-child{padding:10px;} .open-wrap .advantage-list li .img-area{display:block; width:100%;} .open-wrap .advantage-list li .img-area img{margin:0 auto; width:80px;} .open-wrap .advantage-list li .txt-area{display:block; padding:10px 0 0 0; width:100%;} .open-wrap .btn-submit{margin-top:20px; width:260px;} /* 전자세금계산서 --------------------------------------------------------------------------------------- */ .etax-wrap .table-row th{background:#f8f8f8;} /* 택배박스 --------------------------------------------------------------------------------------- */ .deliverybox-wrap{} /* 아이핀 --------------------------------------------------------------------------------------- */ .ipin-wrap .table-row th{text-align:center;} /* 휴대폰 본인 확인 --------------------------------------------------------------------------------------- */ .phoneauth-wrap .table-row th{text-align:center;} .phoneauth-wrap .company-list li{border-bottom:0;} /* 네이버 페이 --------------------------------------------------------------------------------------- */ .naverpay-wrap{} /* 네이버 버튼 */ .naver-btn-area{margin-top:30px; text-align:center; line-height:0; font-size:0;} .naver-btn-area a {width: 140px; font-size: 13px; height: 44px; line-height: 42px;} .naver-btn-area a:first-child {margin-right: 5px;} /* 네이버 톡톡 --------------------------------------------------------------------------------------- */ .navertalk-wrap{} /* 카카오 알림톡 --------------------------------------------------------------------------------------- */ .kakaonotice-wrap .box {display: block;} .kakaonotice-wrap .box .img-area {display: block; width: 100%;} .kakaonotice-wrap .box .depth1-list{display:block; padding-left:0; width: 100%;} /* 카카오 상담톡 --------------------------------------------------------------------------------------- */ .kakaocounselor-wrap .table-col thead th{border-color:#ddd; background:#f1f1f1;} .kakaocounselor-wrap .table-col tbody th{background:#f8f8f8;} .kakaocounselor-wrap .table-col th, .kakaocounselor-wrap .table-col td{border-right:1px solid #ddd;} .kakaocounselor-wrap .table-col th:last-child, .kakaocounselor-wrap .table-col td:last-child{border-right:0;} .kakaocounselor-wrap .table-col .list{text-align:left;} /* 문자 발송 --------------------------------------------------------------------------------------- */ .sms-wrap{} /* 이메일 마케팅 --------------------------------------------------------------------------------------- */ .emailmarketing-wrap{} /* 로그 분석 --------------------------------------------------------------------------------------- */ .loganalyze-wrap{} /* 이전 혜택 및 절차 --------------------------------------------------------------------------------------- */ .datamove-wrap .process-row-list .txt-area h5{font-size:16px; font-weight:500;} .datamove-wrap .btn-area{margin-top:10px; font-size:0; line-height:0;} .datamove-wrap .btn-area a{display:inline-block; text-align:center; vertical-align:middle; width:calc(50% - 2.5px); height:30px; text-align:center; vertical-align:middle; line-height:30px; font-weight:400; font-size:12px; border-radius:25px;} .datamove-wrap .datamove-wrap .btn-area a:first-child{margin-right:5px;} .datamove-wrap .btn-area .mint{margin-right:5px; color:#fff; background:#23c3d1;} .datamove-wrap .btn-area .blue{color:#fff; background:#0095ff;} /* 블루리본 무료 이전 --------------------------------------------------------------------------------------- */ .blueribbon-wrap .process-row-list .txt-area h5{font-size:16px; font-weight:500;} .blueribbon-wrap .btn-submit{margin-top:30px;} .blueribbon-wrap .table-row th{text-align:center; background:#f8f8f8;} .blueribbon-wrap .table-row td{line-height:1.5;} .blueribbon-wrap .table-col th{background:#f8f8f8;} .blueribbon-wrap .table-col th, .blueribbon-wrap .table-col td{border-right:1px solid #ddd;} .blueribbon-wrap .table-col th:last-child, .blueribbon-wrap .table-col td:last-child{border-right:0;} .blueribbon-wrap .pop-con h4{margin-top:0;} .blueribbon-wrap .pop-con h5{position:relative; margin:50px 0 5px; padding-left:25px; line-height:1.3; font-size:16px; font-weight:500; color:#000;} .blueribbon-wrap .pop-con h5:first-of-type{margin-top:0;} .blueribbon-wrap .pop-con h5 span{position:absolute; top:1px; left:0; display:inline-block; text-align:center; vertical-align:middle; width:20px; height:20px; line-height:20px; font-size:10px; font-weight:700; color:#fff; background:#2d3546; border-radius:3px;} .blueribbon-wrap .pop-con h6{margin:30px 0 5px; line-height:1.3; font-weight:400; font-size:15px; color:#000;} .blueribbon-wrap .pop-con h5 + h6{margin-top:0;} .addservice-con .define-box .txt-area{display:block; vertical-align: middle; padding: 0;} } /* 샵핏 소개 --------------------------------------------------------------------------------------- */ #itemShopfitWrap .item-visual{background:url('/images/v2/sub/shopfit/visual_shopfit.jpg') no-repeat center center;} /* 서비스 이용료 */ #itemShopfitWrap .sec-pricecard{margin-top:150px; background:url('/images/v2/sub/bg_mint_top.jpg') no-repeat center bottom;} #itemShopfitWrap .sec-pricecard .inner:after{content:""; display:block; clear:both;} #itemShopfitWrap .price-card{text-align:center;} #itemShopfitWrap .price-card li{display:inline-block; margin-left:50px; width:300px; height:345px; overflow:hidden; border-radius:20px; box-shadow:0 0 30px rgba(67,82,112,0.1);} #itemShopfitWrap .price-card li:first-child{margin-left:0;} #itemShopfitWrap .price-card .percent-area{padding:30px 0; height:180px; text-align:center; background:#23c3d1;} #itemShopfitWrap .price-card .percent-area h4{margin-bottom:20px; font-size:20px; line-height:1; font-weight:700; color:#fff;} #itemShopfitWrap .price-card .percent-area .percent{font-style:italic; line-height:1; letter-spacing:-2px; font-size:80px; font-weight:900; color:#fff;} #itemShopfitWrap .price-card .percent-area .percent span{font-size:55px; font-weight:300;} #itemShopfitWrap .price-card .percent-area .percent img{margin-top:-25px;} #itemShopfitWrap .price-card .price-area{padding:30px; text-align:right; background:#fff;} #itemShopfitWrap .price-area .no-discount{text-decoration:line-through; color:#999;} #itemShopfitWrap .price-area .discount{color:#23c3d1;} #itemShopfitWrap .price-area .num{font-weight:600; line-height:1; letter-spacing:-2px;} #itemShopfitWrap .price-area .unit{font-weight:400; line-height:1;} #itemShopfitWrap .price-area .no-discount .num{font-size:26px;} #itemShopfitWrap .price-area .no-discount .unit{font-size:18px;} #itemShopfitWrap .price-area .discount .num{font-size:35px;} #itemShopfitWrap .price-area .discount .unit{font-size:24px;} #itemShopfitWrap .price-area > p{margin-top:20px; font-size:13px; font-weight:300; color:#999;} #itemShopfitWrap .price-card-msg{margin:20px auto 0; width:1000px; text-align:right; color:#888;} /* 17년 노하우~ */ #itemShopfitWrap .sub-tit h3{line-height:1.3;} #itemShopfitWrap .sec-support{padding:100px 0 150px; background:#ffffff;} #itemShopfitWrap .support-list{padding-top:40px;} /* 서비스 사양 비교 */ #itemShopfitWrap .sec-spec{padding-top:150px; background:url('/images/v2/sub/bg_mint_bottom.jpg') no-repeat center top;} #itemShopfitWrap .spec-common{margin-top:80px;} #itemShopfitWrap .spec-common h4{text-align:center; font-size:22px; font-weight:500; color:#000;} #itemShopfitWrap .spec-common ul{text-align:center; line-height:0; font-size:0;} #itemShopfitWrap .spec-common li{display:inline-block; margin-top:40px; text-align:center; vertical-align:top; width:166.66px;} #itemShopfitWrap .spec-common li img{display:block; margin:0 auto 10px;} #itemShopfitWrap .spec-common li div{font-size:16px; font-weight:300; line-height:1.3; color:#000;} /* 서비스 이용료 비교 */ #itemShopfitWrap .sec-price{padding:100px 0 150px;} #itemShopfitWrap .sec-price .btn-submit{margin-top:80px; width:400px;} #itemShopfitWrap .sec-price .item-table thead th{position:relative;} #itemShopfitWrap .sec-price .item-table td:nth-child(2).price-box .price{color:#23c3d1;} #itemShopfitWrap .sec-price .item-table td:nth-child(3).price-box .price{color:#5f71de;} #itemShopfitWrap .sec-price .item-table td:nth-child(2).price-box .discount:before{background:url('/images/v2/sub/price_arrow_m.png') no-repeat center center;} #itemShopfitWrap .sec-price .item-table td:nth-child(3).price-box .discount:before{background:url('/images/v2/sub/price_arrow_p.png') no-repeat center center;} #itemShopfitWrap .sec-price .item-table td:nth-child(2).price-box .no-discount .price, #itemShopfitWrap .sec-price .item-table td:nth-child(3).price-box .no-discount .price{color:#999;} #itemShopfitWrap .sec-price .price-notice{margin-top:20px;} #itemShopfitWrap .sec-price .price-notice li{line-height:1.8;} #itemShopfitWrap .img_area{text-align: center;} /*#itemShopfitWrap .img_area img{width:1920px; height:1136px;}*/