/* layout-! v_2202 */
@charset "utf-8";
@import "reset.css";
/* common
--------------------------------------------------------------------------------------- */
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
font-weight: 400;
color: #252628;
overflow: overlay;
/* letter-spacing: -0.72px; */
}
body.noneScroll {height:100vh; overflow:hidden;}
@media (max-width: 980px) {
body {
font-size: 15px;
}
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
@media (max-width: 480px) {
body {
font-size: 13px;
}
}
h1 {
font-size: 3.750em; /*60px*/
font-weight: 600;
}
h2 {
font-size: 2.500em; /*40px*/
font-weight: 500;
}
h3 {
font-size: 1.688em; /*27px*/
font-weight: 600;
}
h4 {
font-size: 1.438em; /*23px*/
font-weight: 500;
}
h5 {
font-size: 1.188em; /*19px*/
font-weight: 600;
}
h6 {
font-size: 1.125em; /*18px*/
font-weight: 500;
}
/* checkbox -basic
--------------------------------------------------------------------------------------- */
.checkbox_wrap{
overflow: hidden;
}
.checkbox{
position: relative;
height: 20px;
width: auto;
display:flex;
}
.checkbox [type="checkbox"]:checked,
.checkbox [type="checkbox"]:not(:checked){
position: fixed;
left: -9999px;
}
.checkbox [type="checkbox"]:checked + label,
.checkbox [type="checkbox"]:not(:checked) + label{
display: table;
cursor:pointer;
padding-left: 21px;
display: inline-block;
line-height: 20px;
}
.checkbox [type="checkbox"]:checked + label:before,
.checkbox [type="checkbox"]:not(:checked) + label:before{
content: '';
position: absolute;
left: 0px;
top: 50%;
width: 10px;
height: 10px;
transform: translateY(-50%);
border: 2px solid #555;
border-radius: 3px;
}
.checkbox [type="checkbox"]:hover + label:before{
background: #F6F7F9;
}
.checkbox [type="checkbox"]:checked + label:before{
background: #000000;
}
.checkbox [disabled]:hover + label:before{
background: rgb(0,0,0,0);
}
.checkbox [type="checkbox"]:checked + label:after,
.checkbox [type="checkbox"]:not(:checked) + label:after{
content: "";
position: absolute;
display: block;
top: 5px;
left: 5px;
width: 3px;
height: 6px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
border-radius: 1px;
transform: rotate(45deg);
transition: all .3s ease-out;
text-align:center;
color: #FFF;
}
.checkbox [type="checkbox"]:checked + label,
.checkbox [type="checkbox"]:checked + label:before{
border-color: #000000;
color: #000000 !important;
border-radius: 5px;
}
.checkbox [type="checkbox"]:not(:checked) + label:after{
opacity: 0;
}
.checkbox [type="checkbox"]:checked + label:after{
opacity: 1;
}
.checkbox [type="checkbox"]:disabled + label:after{
opacity:.5;
}
/* radio - basic */
.radio_wrap{
overflow: hidden;
}
.radio_wrap .radio{
float: left;
margin-right: 20px;
}
.radio{
position: relative;
height: 20px;
width: auto;
margin-right: 10px;
}
.radio [type="radio"]:checked,
.radio [type="radio"]:not(:checked){
position: fixed;
left: -9999px;
}
.radio [type="radio"]:checked + label,
.radio [type="radio"]:not(:checked) + label{
display: table;
cursor:pointer;
padding-left: 27px;
display: inline-block;
color: #666;
line-height: 20px;
}
.radio [type="radio"]:checked + label:before,
.radio [type="radio"]:not(:checked) + label:before{
content: '';
position: absolute;
left: 0px;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #000000;
border-radius: 100%;
}
.radio [type="radio"]:hover + label:before{
background: #F6F7F9;
}
.radio [disabled]:hover + label:before{
background: rgb(0,0,0,0);
}
.radio [type="radio"]:checked + label:after,
.radio [type="radio"]:not(:checked) + label:after{
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 12px;
height: 12px;
background: #000000;
border-radius: 100%;
transition: all .3s ease-out;
text-align:center;
color: #FFF;
}
.radio [type="radio"]:not(:checked) + label:after{
opacity: 0;
-webkit-transform:scale(0);
transform:scale(0);
}
.radio [type="radio"]:checked + label:after{
opacity: 1;
-webkit-transform:scale(1);
transform:scale(1);
}
.radio [type="radio"]:disabled + label:after{
opacity:.5;
}
/* Buttons
--------------------------------------------------------------------------------------- */
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="number"],
button,
.btn{
font-family: inherit;
display: inline-block;
height: 42px;
line-height: 27px;
min-width: 100px;
padding: 5px 0;
border: 0;
color: #000;
background-color: transparent;
border-radius: 6px;
box-shadow: none;
cursor: pointer;
/* font-size: 1.125em; */
font-weight: normal;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
transition: background .3s ease-out;
border: 1px solid #000;
}
@media all and (max-width:767px) {
/* input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="number"],
button,
.btn{
width: 100%;
padding: 5px;
}*/
}
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="number"]:focus,
button:focus,
.btn:focus{
outline: none !important;
transition: all .3s ease-out;
}
input[type="submit"].disabled, input[type="submit"]:disabled,
input[type="reset"].disabled, input[type="reset"]:disabled,
input[type="button"].disabled, input[type="button"]:disabled,
input[type="number"].disabled, input[type="number"]:disabled,
button.disabled, button:disabled,
.btn.disabled, .btn:disabled{
pointer-events: none;
}
.btn.full{
width: 100%;
}
.btn.icon{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 25px 5px 30px;
}
.btn.icon img{
margin: 0 5px;
}
.btn.large{
height: 50px;
font-size: 1.250em;
padding: 5px 15px 5px 25px;
border-radius: 5px;
}
/* normal button design */
.btn.main,
.icon_btn.main{
background: #000;
color: #fff;
border: none;
transition: box-shadow .3s ease-out;
}
.btn.main2,
.icon_btn.main{
background: #00000099;
color: #fff;
border: none;
transition: box-shadow .3s ease-out;
}
.btn.main:hover,
.btn.main:active,
.btn.main:focus,
.icon_btn.main:hover,
.icon_btn.main:active,
.icon_btn.main:focus{
transition: box-shadow .3s ease-out;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
}
.btn.main:disabled,
.icon_btn.main:disabled{
background: #999;
}
.btn.sub,
.icon_btn.sub{
background: #FEBD17;
color: #000;
border: none;
transition: box-shadow .3s ease-out;
}
.btn.sub:hover,
.btn.sub:active,
.btn.sub:focus,
.icon_btn.sub:hover,
.icon_btn.sub:active,
.icon_btn.sub:focus{
transition: box-shadow .3s ease-out;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}
.btn.gray,
.icon_btn.gray{
background: #999;
color: #fff;
border: none;
transition: box-shadow .3s ease-out;
}
.btn.gray:hover,
.btn.gray:active,
.btn.gray:focus,
.icon_btn.gray:hover,
.icon_btn.gray:active,
.icon_btn.gray:focus{
transition: box-shadow .3s ease-out;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}
.btn.main:disabled,
.icon_btn.main:disabled{
background: #666;
}
.btn.ghost,
.icon_btn.ghost{
border: 1px solid #000;
color: #000;
transition: box-shadow .3s ease-out;
}
.btn.ghost:hover,
.btn.ghost:active,
.btn.ghost:focus,
.icon_btn.ghost:hover,
.icon_btn.ghost:active,
.icon_btn.ghost:focus{
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
transition: box-shadow .3s ease-out;
}
.btn.naver{
background: #5EC43A;
color: #fff;
border: none;
}
.btn.naver:hover{
background: #2DB400;
}
.btn.kakao{
background: #FAE74D;
border: none;
}
.btn.kakao:hover{
background: #FDE102;
}
.select{
min-width: 115px;
width: 115px;
height: 40px;
line-height: 40px;
padding: 0 20px;
font-size: 1.125em;
transition: all .4s ease-out;
color: #fff;
background: url(../img/comm/bl_form_w.png) no-repeat right 15px center #000;
border-radius: 10px;
}
.file_upload{
width: 100%;
height: 60px;
line-height: 60px;
padding-left: 10px;
position: relative;
border: 40px;
overflow: hidden;
}
.file_upload_btn{
position: absolute;
top: 10px;
right: 0;
width: 115px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
transition: 200ms all ease;
background: #000000;
border-radius: 10px;
color: #fff;
}
.file_upload label{
color: #555;
font-size: 1.125em;
}
.file_upload_select{
font-family: inherit;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 40px;
opacity: 0;
cursor: pointer;
}
.file_txt{
display: flex;
margin-left: 40px;
}
.file_txt_name{
display: flex;
align-items: center;
padding: 0 20px 0 12px;
}
.file_txt button{
width: auto;
min-width: auto;
height: auto;
line-height: 0;
border: none;
padding: 0;
margin-left: 10px;
}
/* input common */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="time"],
input[type="date"],
input,
select,
textarea{
font-family: inherit;
display: block;
width: 100%;
padding: 0 12px;
border: solid 1px var(--grey200);
outline: 0;
font-size: 1.1em;
color: inherit;
font-weight: 400;
text-decoration: none;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
transition: all .3s ease-out;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus{
border-color: var(--grey800);
cursor: auto;
transition: all .3s ease-out;
}
input::placeholder {
color: #999;
font-size:1em;
}
.from .checkbox label{
margin: 0;
}
.input{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 20px 0;
}
.input_line{
width: 100%;
border-bottom: 1px solid #000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
}
.input_line.col_2{
display: flex;
}
.input_line.col_2 > *{
width: 50%;
}
.input_line.w50{
width: calc(50% - 20px);
}
.input_line input{
width: 100%;
height: 60px;
}
.input .warn{
padding: 15px 10px;
width: 100%;
font-size: 0.938em;
}
.input .btn{
height: 40px;
line-height: 40px;
width: auto;
/* min-width: 70px; */
padding: 0 5px;
}
button.top_bt {line-height: 38px;height:40px;font-size:1em;width:auto;min-width:auto;padding: 0 12px;border-radius: 4px;}
button.top_bt.on {background:#000; color:#fff}
.select.top_bt {font-size:1em;/* border:1px solid #000; */border-radius: 4px;/* color: #fff; *//* line-height: 38px; */}
#searchArea .service_search {margin-right:10px;}
#searchArea .searchText1,
#searchArea .btn {height:40px;font-size: 1em !important;font-weight: 500;}
#searchArea .btn {width:80px;}
/* Pagination
-------------------------------------------------------------------- */
.pagination{
padding: 30px 0 10px;
overflow: hidden;
display: table;
margin: auto;
}
.pagination ul{
margin: 0 auto;
display: flex;
align-items: center;
}
.pagination ul li{
list-style: none;
display: block;
float: left;
line-height: 29px;
margin: 0 3px;
font-weight: 500;
}
.pagination a{
text-decoration: none;
}
.pagination ul li a, .pagination ul li span{
display: flex;
width: 40px;
height: 40px;
padding: 12.5px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12.5px;
border-radius: 3.75px;
border: 1.25px solid #000;
background: #FFF;
}
.pagination ul li a:hover{
color: #2D3748;
}
.pagination ul li.current span{
background: #2D3748;
color: #fff;
}
.pagination ul li.btn_prev a:hover,
.pagination ul li.btn_next a:hover{
border-color: #fff;
color: #455EEE;
box-shadow: 0 2px 12px 0 rgba(69, 94, 238, 0.15);
transition: all .3s ease-out;
}
.pagination ul li.btn_prev.none a,
.pagination ul li.btn_next.none a{
opacity: 0.5;
cursor: unset;
}
.pagination ul li.btn_prev.none a:hover,
.pagination ul li.btn_next.none a:hover{
border-color: #E8EBF0;
color: #9BA6B9;
box-shadow: none;
}
/* skip_menu
-------------------------------------------------------------------- */
#skip_menu a {
position: fixed;
top: -50px;
width: 100%;
height: 50px;
line-height: 50px;
overflow: hidden;
text-align: center;
background: #000;
color: #fff;
z-index: 9999;
}
#skip_menu a:focus {
top: 0;
}
/* header & footer
-------------------------------------------------------------------- */
#header {
/* width: 100%; */
/* height: auto; */
/* padding: 25px 60px; */
}
#header header {
display: flex;
justify-content: space-between;
align-items: center;
}
.header_logo {
display: block;
max-width: 130px;
font-size: 0px;
}
.header_logo img{
width: 100%
}
.header_title{
display: none;
}
.header_gnb {
width: 70%;
max-width: 800px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
transition: all 0.3s ease-out;
}
.header_gnb li a {
display: block;
font-size: 1.188em; /*19px*/
transition: all 0.2s ease-out;
font-weight: 500;
}
.header_gnb li a:hover {
color: #FEBC18;
}
.header_gnb li a.on {
color: #FEBC18;
font-weight: 600;
}
.header_util{
display: flex;
align-items: center;
}
.header_util li{
margin: 0 10px;
}
.header_util li a{
display: flex;
height: 40px;
align-items: center;
padding: 10px 10px 10px 25px;
font-size: 0.938em;
color: #666;
white-space: nowrap;
}
.header_util_login{
background: url("../img/comm/btn_login.png") no-repeat top 7px left;
}
.header_util_register{
background: url("../img/comm/btn_register.png") no-repeat top 7px left 2px;
}
.header_util_logout{
background: url("../img/comm/btn_logout.png") no-repeat top 7px left;
}
.header_util_my{
background: url("../img/comm/btn_my.png") no-repeat top 7px left;
}
.header_util li.header_util_my a,
.header_util li.header_util_logout a{
color: #000;
}
.header_util_fullGnb_btn{
font-size: 0;
width: 30px;
min-width: auto;
padding: 10px;
height: 40px;
background: url("../img/comm/btn_allmenu.png") no-repeat center;
border:none;
border-radius: 0;
background-size: contain;
}
.header_fullGnb{
display: none;
}
#contents{
width: 100%;
overflow: hidden;
}
#footer {
width: 100%;
/* text-align: center; */
background: #000;
color: #a6a6a6;
}
.footer_link{
max-width: 1540px;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
padding: 30px 70px;
color: #a6a6a6;
}
.footer_link ul{
display: flex;
align-items: center;
}
.footer_link li{
min-width: 40px;
}
.footer_link_navigation li{
display: flex;
align-items: center;
white-space: nowrap;
}
.footer_link_navigation li:not(:first-child):before{
content: "";
display: block;
width: 1px;
height: 15px;
background: #a6a6a6;
margin: 0 20px;
}
.footer_link_navigation li.important{
color: #fff;
}
.footer_link_sns{
width: 200px;
justify-content: space-between;
}
.footer_info{
max-width: 1540px;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin: auto;
padding: 50px 70px;
border-top: 1px solid #808080;
color: #808080;
text-align: left;
line-height: 170%;
font-size: 1.063em;
}
.footer_info_inner{
display: flex;
align-items: flex-start;
}
.footer_info_inner div{
margin-right: 60px;
}
.footer_info_logo{
display: block;
font-size: 0px;
}
/* main
-------------------------------------------------------------------- */
/* sub
-------------------------------------------------------------------- */
.sub_visual{
width: 100%;
height: 200px;
padding: 55px 0 40px 0;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
}
.sub_visual.tab{
height: 270px;
}
.sub_visual_bg{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover !important;
}
.sub_visual_title{
transform: translateY(50px);
opacity: 0;
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.sub_visual_title:before{
content: "";
display: block;
width: 42px;
height: 1px;
margin: 0 auto 20px;
background: #fff;
}
.sub_visual_txt{
font-size: 1.125em;
font-weight: 400;
margin-top: 8px;
transform: translateY(50px);
opacity: 0;
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
transition-delay: .3s;
}
.sub_visual_btn{
position: absolute;
left: 0;
right: 0;
top: 130px;
width: 100%;
max-width: 1500px;
padding: 0 30px;
margin: auto;
display: flex;
justify-content: end;
}
.sub_visual_btn .kakao{
width: fit-content;
height: 40px;
display: flex;
align-items: center;
padding: 0 20px;
background: #FEE500;
border-radius: 100px;
color: #392020;
font-weight: 500;
opacity: 0;
transition: opacity 0.8s ease-out;
}
.sub_visual_btn .kakao:hover{
background: #FDE102;
color: #392020;
}
.sub_visual_btn .kakao img{
margin-right: 5px;
}
.sub_visual_bg{
background-color: #3f3f3f;
background-position: center;
background-size: cover;
transform: translateZ(0) scale(1.2) rotate(0.2deg);
transition: 2.5s;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.sub_visual_tab{
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 1500px;
padding: 0 30px;
margin: auto;
}
.sub_visual_tab ul{
display: flex;
align-items: center;
margin: auto;
}
.sub_visual_tab ul li{
width: 25%;
}
.sub_visual_tab ul li:first-child:nth-last-child(2),
.sub_visual_tab ul li:first-child:nth-last-child(2) ~ li{
width: 50%;
}
.sub_visual_tab ul li:first-child:nth-last-child(3),
.sub_visual_tab ul li:first-child:nth-last-child(3) ~ li{
width: 33.3333%;
}
.sub_visual_tab ul li a{
width: 100%;
height: 63px;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid rgba(255, 255, 255, 0.20);
border-right: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(0, 0, 0, 0.20);
backdrop-filter: blur(15px);
font-size: 1.125em;
opacity: 0;
}
.sub_visual_tab ul li:first-child a{
border-radius: 5px 0 0 0;
}
.sub_visual_tab ul li:last-child a{
border-radius: 0 5px 0 0;
}
.sub_visual_tab ul li a.on{
background: #FEBD17;
color: #000;
font-weight: 500;
}
.sub_visual_tab ul li a:not(.on):hover{
opacity: 0.8;
}
.active .sub_visual_bg{
transform: translate3d(0px, 0px, 0px) scale(1);
}
.active .sub_visual_title{
transform: translateY(0);
opacity: 1;
padding: 0 30px;
}
.active .sub_visual_txt{
transform: translateY(0);
opacity: 1;
padding: 0 30px;
}
.active .sub_visual_btn .kakao{
opacity: 1;
transition: opacity 0.8s ease-out;
transition-delay: .5s;
}
.active .sub_visual_tab ul li a{
opacity: 1;
transition: opacity 0.8s ease-out;
transition-delay: .8s;
}
.contents_wrap{
max-width: 1500px;
margin: auto;
padding: 80px 30px 160px;
opacity: 0;
}
.contents_title_mobile{
display: none;
font-weight: 500;
font-size: 1.43em;
position: relative;
padding: 10px;
text-align: center;
margin-top: 40px;
}
.contents_title_mobile::before{
content: "";
width: 28px;
height: 2px;
background: #FEBD17;
display: block;
position: absolute;
top: 0;
left: calc(50% - 14px);
}
.contents_title_s{
text-align: center;
font-size: 1.500em;
margin-top: 20px;
}
.active .contents_wrap{
opacity: 1;
transition: opacity 1.5s ease-out;
transition-delay: .2s;
}
.bottom_btn{
display: flex;
justify-content: center;
padding-top: 30px;
}
.bottom_btn .btn{
height: auto;
min-width: 210px;
margin: 0 5px;
padding: 13px 20px;
font-size: 1.250em;
font-weight: 600;
align-items: center;
}
.bottom_btn .btn:first-child:nth-last-child(2),
.bottom_btn .btn:first-child:nth-last-child(2) ~ .btn{
max-width: calc(50% - 10px);
min-width: auto;
}
/* register */
.sub_visual_bg.register{
background: url("../img/sub/register/visual.jpg") no-repeat center;
}
.register_tab{
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0 40px;
}
.register_tab li{
width: calc(25% - 7.5px);
display: flex;
align-items: center;
padding: 15px 20px;
border-radius: 4px;
border: 1px dashed rgba(0, 0, 0, 0.20);
/* font-size: 1.250em; */
font-weight: 500;
white-space: nowrap;
}
.register_tab li span{
font-size: 0.750em;
margin-right: 10px;
font-weight: 600;
}
.register_tab li:not(.active) span{
color: #FEBD17;
}
.register_tab li.active{
background: #FEBD17;
border: none;
position: relative;
}
.register_tab li.active:after{
content: "";
position: absolute;
bottom: -12px;
right: calc(50% - 3px);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-top: 6px solid transparent;
border-bottom: 6px solid #FEBD17;
border-right: 6px solid transparent;
transform: rotate(180deg);
}
.register_content{
position: relative;
border: 10px solid #F2F1EE;
padding: 0 30px;
}
.register_content_item{
max-width: 840px;
margin: 100px auto;
display: none;
}
.register_content_item.index{
text-align: center;
}
.register_content_item.index h4{
line-height: 150%;
font-size: 1.625em;
margin-bottom: 30px;
}
.register_content_item.index p{
color: #666;
font-size: 1.125em;
word-break: keep-all;
margin-top: 10px;
}
.register_content .file_upload{
width: calc(50% - 3.5px);
padding: 0;
}
.register_content .file_upload_select{
padding: 0;
}
.register_content .file_upload_btn{
width: 100%;
height: 50px;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 1.250em;
font-weight: 400;
}
.register_content .left_file{
position: relative;
width: 322px;
}
.left_file .left_file_img{
position: relative;
width: 100%;
height: 400px;
background: url(../img/sub/register/bg_img.png) no-repeat center #F5F5F5;
text-align: center;
border-radius: 8px;
overflow: hidden;
}
.register_content #step2 .left_file_img{
height: 330px;
}
.register_content .left_file_img img{
height: 100%;
}
.register_content .left_file_img_delect{
position: absolute;
bottom: 12px;
right: 12px;
width: 35px;
height: 35px;
padding: 0;
min-width: 35px;
border-radius: 100%;
background: url(../img/comm/bl_delete_b.png) no-repeat center #FEBD17;
font-size: 0;
border: 0;
}
.register_content .register_input_item{
width: 455px;
margin-top: 35px;
}
.register_content .register_input_title{
position: relative;
font-size: 1.125em;
text-align: center;
font-weight: 400;
width: fit-content;
margin: auto;
}
.register_content .register_input_title::before{
position: absolute;
content: "";
left: -5px;
right: -5px;
bottom: -2px;
height: 10px;
opacity: 0.2;
background: #FEBD17;
}
.register_content .register_input_help{
position: relative;
/* cursor: pointer; */
}
.register_content #step2 .register_input_help{
margin: 10px 0;
/* border-top:1px dotted #ccc; */
gap: 10px;
padding: 0 10px;
}
.register_content .register_input_help_btn,
.register_content .register_input_help_btn2{
display: flex;
align-items: center;
justify-content: center;
/* margin: 10px 0 20px; */
font-size: 1.125em;
text-decoration: underline;
gap: 5px;
color: #777;
cursor: pointer;
}
#step2 .register_input_btn_wrap {
gap: 5px;
}
.register_content #step2 .register_input_help .register_input_help_btn{
margin:10px 5px;
}
.register_content .register_input_help_btn img,
.register_content .register_input_help_btn2 img{
width:23px;
}
.register_input_help_content,
.register_input_help_content2{
display: none;
position: absolute;
width: 370px;
/* top: -100px; */
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
border: 5px solid #FEBD17;
background: #FFF;
box-shadow: 0px 13px 10px 0px rgba(0, 0, 0, 0.10);
text-align: center;
padding: 50px 25px 20px;
z-index: 1;
}
.xy_center {
position: fixed;
left: 50% !important;
top: 50% !important;
transform: translateX(-50%) translateY(-30%) !important;
z-index: 10;
padding: 10p;
}
.xy_center .btn_wrap .btn {
height: 36px;
line-height: 26px;
padding: 0px 10px 2px;
min-width: 80px;
font-size: 16px;
border-radius: 5px;
margin: 2px;
}
.register_input_help_content h5,
.register_input_help_content2 h5{
font-size: 1em;
font-weight: 600;
margin-bottom: 15px;
}
.register_input_help_content_close{
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
padding: 0;
min-width: 35px;
border-radius: 100%;
background: url(../img/comm/bl_delete_w.png) no-repeat center #FEBD17;
font-size: 0;
border: 0;
}
.register_input_help_content select,
.register_input_help_content2 select{
width: 100%;
height: 42px;
display: flex;
align-items: center;
padding: 0 10px;
border: 2px solid #000;
color: #000;
border-radius: 5px;
margin: 10px 0;
font-size: 1em;
background: url(../img/comm/bl_form_b.png) no-repeat right 10px center;
}
.register_content .register_input_help_content img{
margin: 20px 0 0;
max-width: 100%;
margin: 0 auto;
}
.register_content .register_input_help img{
/* margin: 5px; */
/* margin: 0 auto; */
}
.register_content > div.active{
display: block;
}
.register_input_item .input_basic{
display: flex;
align-items: center;
justify-content: space-between;
}
.register_input_item .input_basic label{
width: 100px;
height: 57px;
display: flex;
align-items: center;
padding: 0px 5px;
border-bottom: 1px dashed #999;
color: #666;
}
.register_input_item .input_basic input{
width: calc(100% - 100px);
height: 57px;
display: flex;
align-items: center;
padding: 0 10px;
border-bottom: 1px solid #000;
color: #000;
font-size: 1.125em;
background: #fff;
}
.register_input_item .input_basic input.date{
background: url(../img/sub/register/bl_calender.png) no-repeat right 10px center;
}
.register_input_item .input_basic input.agency{
background: url(../img/sub/register/bl_agency.png) no-repeat right 10px center;
background: none;
}
.register_input_item .input_basic input.important{
border: 3px solid #000;
}
.register_input_item .input_basic select{
/* width: calc(100% - 100px); */
height: 50px;
display: flex;
align-items: center;
padding: 0 10px;
border-bottom: 1px solid #000;
color: #000;
/* font-size: 1.125em; */
/* background: url(../img/comm/bl_form_b.png) no-repeat right 10px center; */
}
.register_input_item .input_basic.rowspan{
position: relative;
}
.register_input_item .input_basic.rowspan label{
border: none;
}
.register_input_item .input_basic.rowspan > div{
width: calc(100% - 100px);
}
.register_input_item .input_basic.rowspan > div input{
width: 100%;
}
.register_input_item .input_basic.rowspan::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 95px;
height: 1px;
border-bottom: 1px dashed #999;
}
.register_input_btn{
/* width: 100%; */
margin-top: 40px;
font-weight: 500;
background: url(../img/comm/bl_right_b.png) no-repeat center right 20px #FEBD17 !important;
padding: 5px 60px 5px 30px !important;
}
.register_input_btn_left{
background: url(../img/comm/bl_left_b.png) no-repeat center left 20px #FEBD17 !important;
}
.register_input_btn_wrap .register_input_btn.prev {background:url(/resources/img/comm/bl_left_b.png) no-repeat center right 20px #FEBD17 !important;}
.register_input_btn_wrap .register_input_btn.next {background:url(/resources/img/comm/bl_right_b.png) no-repeat center right 20px #FEBD17 !important;}
.register_input_btn_wrap .register_input_btn.plus {background:url(/resources/img/comm/bl_plus_b.png) no-repeat center right 20px #000 !important; color:#FEBD17;}
.register_input_cover{
opacity: 0;
transform: translateY(60px);
transition: transform 0.65s ease-out, opacity 0.65s ease-out;
}
.register_input_cover.active{
opacity: 1;
transform: translateY(0);
transition: transform 0.65s ease-out, opacity 0.65s ease-out;
}
.register_input_cover.col{
display: flex;
justify-content: space-between;
border-bottom: 1px dotted #ccc;
padding-bottom: 10px;
padding-top: 20px;
}
.register_input_cover.col.has-set-product-notice{
flex-wrap: wrap;
}
.register_input_cover.col .set_product_upload_notice,
.event_prod .register_input_cover .set_product_upload_notice,
.set_product_upload_notice{
flex: 0 0 100%;
width: 100%;
max-width: 100%;
order: 99;
box-sizing: border-box;
margin: 12px 0 0;
line-height: 1.5;
clear: both;
}
.register_input_cover.col .file_upload {
width: 100%;
margin-top: 10px;
}
.register_content_item.index .btn_wrap{
max-width: 750px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 30px auto;
gap: 5px;
}
.register_content_item.index .btn_wrap .btn{
width: calc(50% - 3.5px);
height: 54px;
font-size: 1.1em;
display: flex;
align-items: center;
justify-content: space-between;
border-width: 2px;
font-weight: 500;
padding: 0 20px;
}
.register_input_item.confirm{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.register_input_item.confirm .input_basic{
width: calc(50% - 7.5px);
}
.register_input_table{
display: table;
width: 100%;
margin-top: 40px;
}
.register_input_table .item{
display: table-row;
}
.register_input_table .item > div{
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 2px;
}
.register_input_table .item > div span{
border-bottom: 1px solid #000;
display: block;
font-size: 1.125em;
}
.register_input_table .item > div:first-child span{
border-bottom: 1px dashed #999;
text-align: center;
}
.register_input_table .item.header{
background: #1F1F1F;
text-align: center;
color: #fff;
}
.register_input_table .item.header div{
position: relative;
}
.register_input_table .item.header span{
border: none !important;
}
.register_input_table .item.header > div:not(:first-child):before{
content: "";
width: 1px;
height: 18px;
background: #fff;
position: absolute;
left: 0;
top: 15px;
display: block;
}
.register_content_control > button{
position: absolute;
top: 30%;
font-size: 0;
border: 0;
min-width: 50px;
height: 50px;
padding: 0;
}
.register_content_control > button.prev{
background: url(../img/sub/register/btn_left.png) no-repeat center;
left: 10px;
}
.register_content_control > button.next{
background: url(../img/sub/register/btn_right.png) no-repeat center;
right: 1vw;
}
.register_confirm_btn{
margin: 40px auto 0;
max-width: 360px;
width: 100%;
font-weight: 500;
text-align: left;
background: url(../img/comm/bl_check_b.png) no-repeat center right 20px #FEBD17 !important;
display: flex;
align-items: center;
}
/* product */
.sub_visual_bg.product{
background: url("../img/sub/product/visual.jpg") no-repeat center;
}
.product_item{
display: flex;
flex-wrap: wrap;
}
.product_item li{
width: calc(25% - 18px);
padding: 20px;
margin-top: 35px;
}
.product_item li:not(:nth-child(4n)) {
margin-right: 24px;
}
.product_item li .img{
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
overflow: hidden;
margin-bottom: 27px;
}
.product_item li .img img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease-out;
}
.product_item li:hover .img img{
width: 105%;
transition: width 0.3s ease-out;
}
.product_item li .title{
font-size: 1.375em;
font-weight: 500;
margin: 15px 0 30px;
word-break: keep-all;
}
.product_item li .btn{
font-size: 1.063em;
}
@media screen and (max-width:980px) {
#contentWrap .register_content #step2 .left_file {
width:100%;
}
.register_content #step2 .register_input_help {
flex-direction:column;
padding-top: 20px;
}
.register_input_help flex .serial_noti {margin-top: 10px;}
}
/* community */
.sub_visual_bg.community{
background: url("../img/sub/community/visual.jpg") no-repeat center;
}
.community_top{
display: flex;
align-items: center;
justify-content: space-between;
}
.community_top_total{
display: flex;
align-items: center;
font-size: 1.13em;
}
.community_top_total:before{
content: "";
display: block;
width: 20px;
height: 20px;
margin-right: 8px;
background: url("../img/comm/bl_info.png") no-repeat center;
}
.community_top_search{
width: calc(100% - 335px);
display: flex;
align-items: center;
justify-content: flex-end;
}
.community_top_search select{
width: 150px;
height: 56px;
display: flex;
align-items: center;
padding: 0 10px;
border: 1px solid #000;
border-radius: 4px;
color: #000;
font-size: 1.1em;
background: url(../img/comm/bl_form_b.png) no-repeat right 10px center;
}
.community_top_search input[type=text]{
width: calc(100% - 470px);
min-width: 650px;
height: 56px;
margin: 0 10px;
display: flex;
align-items: center;
padding: 0 10px;
border: 1px solid #000;
border-radius: 4px;
font-size: 1.1em;
}
.community_top_search .btn{
width: 126px;
height: 56px;
font-size: 1.1em;
font-weight: 500;
border-radius: 4px;
}
.community_item{
width: 100%;
margin-top: 40px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.community_item .item{
display: table;
width: 100%;
padding: 5px 0;
}
.community_item .item:not(:first-child){
border-top: 1px dashed #CECECE;
}
.community_item .item_cover{
width: 100%;
display: table-row;
border-radius: 10px;
transition: background 0.3s ease-out;
}
.community_item .item_cover:hover{
background: #000000;
color: #fff;
transition: background 0.3s ease-out;
}
.community_item .item_cover > div{
display: table-cell;
height: 75px;
line-height: 75px;
padding: 0 2px;
font-size: 1.125em;
font-weight: 500;
}
.community_item .item_cover > div.item_no{
min-width: 20px;
width: 80px;
text-align: center;
}
.community_item .item_cover > div.item_title{
font-size: 1.375em;
}
.community_item .item_cover > div.item_title a{
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.community_item .item_cover > div.item_user{
width: 140px;
padding-left: 30px;
background: url(../img/sub/community/icon_user_b.png) no-repeat center left;
}
.community_item .item_cover > div.item_view{
width: 100px;
padding-left: 30px;
background: url(../img/sub/community/icon_view_b.png) no-repeat center left;
}
.community_item .item_cover > div.item_comment{
width: 75px;
padding-left: 30px;
background: url(../img/sub/community/icon_comment_b.png) no-repeat center left;
}
.community_item .item_cover > div.item_date{
width: 120px;
}
.community_item .item_cover:hover > div.item_user,
.community_item.detail .item_cover > div.item_user{
background: url(../img/sub/community/icon_user_w.png) no-repeat center left;
}
.community_item .item_cover:hover > div.item_view,
.community_item.detail .item_cover > div.item_view{
background: url(../img/sub/community/icon_view_w.png) no-repeat center left;
}
.community_item .item_cover:hover > div.item_comment,
.community_item.detail .item_cover > div.item_comment{
background: url(../img/sub/community/icon_comment_w.png) no-repeat center left;
}
.community_item .item_cover .badge{
border-radius: 1.665px;
border: 0.832px solid #000;
font-size: 0.77em;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
height: 35px;
width: 55px;
}
.community_item .item_cover:hover .badge{
border-color: #fff;
}
.community_item.detail{
border: 0;
}
.community_item.detail .item_cover{
background: #000000;
color: #fff;
transition: background 0.3s ease-out;
}
.community_item .item_content_file{
padding: 10px 85px;
border-bottom: 1px dashed #B4B4B4;
}
.community_item .item_content_file a{
text-decoration: underline;
}
.community_item .item_content_text{
padding: 50px;
min-height: 200px;
border-bottom: 2px solid #000;
}
.community_item .item_content_commen li{
display: flex;
padding: 30px 10px;
border-bottom: 1px dashed #CECECE;
position: relative;
}
.community_item .item_content_commen_icon{
width: 50px;
height: 50px;
border-radius: 100%;
background: url(../img/sub/community/icon_comment_b.png) no-repeat center #FEBD17;
}
.community_item .item_content_commen_txt{
margin-left: 30px;
}
.community_item .item_content_commen_txt .user{
font-size: 1.188em;
font-weight: 500;
}
.community_item .item_content_commen_txt .detail{
padding: 10px 0 0 0;
}
.community_item .item_content_commen_btn{
display: flex;
position: absolute;
right: 20px;
top: 20px;
}
.community_item .item_content_commen_btn button{
font-size: 0;
width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
margin: 4px;
border-radius: 100%;
border: none;
background-size: 12px !important;
}
.community_item .item_content_commen_btn button.edit{
background: url(../img/sub/community/icon_pen.png) no-repeat center #FEBD17;
}
.community_item .item_content_commen_btn button.delete{
background: url(../img/sub/community/icon_delete.png) no-repeat center #000;
}
.item_content_commen_write{
width: 100%;
margin-left: 30px;
}
.community_item .item_content_commen_write .user{
font-size: 1.188em;
font-weight: 500;
border-radius: 5px;
background: #F1F1F1;
width: 330px;
padding: 11px 12px;
}
.community_item .item_content_commen_write textarea{
width: 100%;
border-radius: 5px;
border: 1px solid #000;
height: 213px;
padding: 17px 20px;
margin: 10px 0 15px;
}
.community_item .item_content_commen_write .btn{
border-radius: 5px;
}
.community_item_btn{
margin-top: 30px;
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: row-reverse;
}
.community_item_btn_login{
display: flex;
align-items: center;
color: #555;
letter-spacing: -0.8px;
}
.community_item_btn_login .btn{
margin-right: 5px;
}
.community_item_btn .btn{
min-width: 140px;
border-radius: 5px;
padding: 0 12px;
font-weight: 500;
}
.community_bottom{
position: relative;
padding: 20px 0 0;
}
.community_bottom .btn{
position: absolute;
right: 0;
bottom: 0;
border-radius: 5px;
min-width: 190px;
font-weight: 500;
}
.community_write{
border-bottom: 2px solid #000;
}
.community_write_item{
display: flex;
align-items: center;
border-radius: 5px;
border: 2px solid #000;
background: #FFF;
padding: 12px 20px;
margin-bottom: 10px;
}
.community_write_item_content{
min-height: 460px;
width: 100%;
}
.community_write_item_content textarea{
width: 100%;
height: 450px;
}
.community_write_item .icon{
width: 40px;
height: 40px;
border-radius: 100%;
background: url(../img/sub/community/icon_comment_b.png) no-repeat center #FEBD17;
}
.community_write_addition{
display: flex;
align-items: center;
border-top: 1px dashed #000;
padding: 10px 0;
}
.community_write_addition .file_upload{
width: 448px;
padding: 0;
height: 47px;
}
.community_write_addition .file_txt{
margin-left:0;
}
.community_write_addition .file_txt_name{
width: 448px;
height: 47px;
background: #FFF;
color: #666;
}
.community_write_addition .file_txt_name:before{
content:"";
display: block;
width: calc(100% - 126px);
height: 43px;
border-radius: 5px;
border: 2px solid #000;
color: #666;
position: absolute;
left: 0;
}
.community_write_addition .file_title{
padding: 0 20px;
color: #666666;
font-size: 1.13em;
}
.community_write_addition .file_title_delete{
font-size: 0;
width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
margin-left: 10px;
border-radius: 100%;
border: none;
background-size: 12px !important;
background: url(../img/sub/community/icon_delete.png) no-repeat center #000;
}
.community_write_addition .file_upload_btn{
right: 0;
top: 0;
height: 47px;
border-radius: 5px;
color: #FEBD17;
font-weight: 500;
}
.community_write_addition input{
width: 326px;
padding: 11px 12px;
border-radius: 5px;
}
.community_write_addition input:disabled{
background: #F1F1F1;
color: #696969;
}
.community_write_btn{
display: flex;
justify-content: flex-end;
margin-top: 46px;
}
.community_write_btn .btn{
border-radius: 5px;
margin-left: 10px;
font-weight: 500;
}
.community_write_btn .btn.sub{
width: 190px;
}
/* service */
.sub_visual_bg.service{
background: url("../img/sub/service/visual.jpg") no-repeat center;
}
.service_toggle{
max-width: 380px;
margin: auto;
height: 50px;
}
.service_toggle_switch {
position: relative;
height: 50px;
text-align: center;
transition: all 0.2s ease;
}
.service_toggle_switch span {
position: absolute;
width: 42px;
height: 20px;
top: calc(50% - 7px);
left: calc(50% - -20px);
margin: -2px 0px 0px -4px;
background: #000000;
display: block;
border-radius: 40px;
transition: all 0.2s ease;
}
.service_toggle_switch span:after {
content: "";
display: block;
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
background: #FEBD17;
border-radius: 100%;
transition: all 0.2s ease;
}
.service_toggle input[type=radio] {
display: none;
}
.service_toggle_switch label {
cursor: pointer;
color: #000;
line-height: 50px;
transition: all 0.2s ease;
opacity: 0.5;
display: flex;
align-items: center;
font-size: 1.500em;
font-weight: 500;
}
.service_toggle_switch label img{
margin-right: 5px;
}
.service_toggle label[for=position] {
position: absolute;
left: 0px;
}
.service_toggle label[for=map] {
position: absolute;
right: 0px;
}
#map:checked ~ .service_toggle_switch span:after {
margin-left: 21px;
}
#position:checked ~ .service_toggle_switch label[for=position],
#map:checked ~ .service_toggle_switch label[for=map] {
opacity: 1;
}
#position:checked ~ .service_toggle_switch label[for=position]:before,
#map:checked ~ .service_toggle_switch label[for=map]:before{
content: "";
display: flex;
position: absolute;
left: -2px;
right: -5px;
bottom: 0;
height: 2px;
background: #000;
}
.service_top{
margin: 45px 0 20px;
}
.service_top > div{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.service_top.agency > div{
flex-wrap: nowrap;
}
.service_help{
position: relative;
display: flex;
align-items: center;
justify-content: end;
}
.service_help_btn{
display: flex;
align-items: center;
justify-content: end;
font-size: 1.125em;
text-decoration: underline;
}
.service_help_btn > img{
margin-right: 5px;
}
.service_help_content{
display: none;
position: absolute;
width: 370px;
top: 40px;
right: 0;
border-radius: 10px;
border: 5px solid #FEBD17;
background: #FFF;
box-shadow: 0px 13px 10px 0px rgba(0, 0, 0, 0.10);
text-align: center;
padding: 50px 25px 20px;
z-index: 2;
}
.on .service_help_content{
display: block;
}
.service_help_content h5{
font-size: 1.188em;
font-weight: 500;
margin-bottom: 15px;
}
.service_help_content_close{
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
padding: 0;
min-width: 35px;
border-radius: 100%;
background: url(../img/comm/bl_delete_w.png) no-repeat center #FEBD17;
font-size: 0;
border: 0;
}
.service_help_content_item{
border-top: 1px dashed #D6D6D6;
padding: 15px;
text-align: left;
}
.service_search{
width: calc(100% - 335px);
display: flex;
align-items: center;
justify-content: flex-end;
}
.service_search select{
width: 150px;
height: 66px;
display: flex;
align-items: center;
padding: 0 10px;
border: 1px solid #000;
border-radius: 4px;
color: #000;
font-size: 1.25em;
background: url(../img/comm/bl_form_b.png) no-repeat right 10px center;
}
.service_search select:first-child{
margin-right: 10px;
}
.service_search input[type=text]{
width: calc(100% - 470px);
min-width: 650px;
height: 56px;
margin: 0 10px;
display: flex;
align-items: center;
padding: 0 10px;
border: 1px solid #000;
border-radius: 4px;
font-size: 1.25em;
}
.service_search .btn{
width: 126px;
height: 56px;
font-size: 1.250em;
font-weight: 700;
border-radius: 4px;
}
.agency .service_search{
width: 100%;
}
.service_search select{
width: 260px;
}
.agency .service_search input[type=text]{
width: calc(100% - 675px);
}
.service_tab{
width: 100%;
margin-top: 30px;
}
.service_tab ul{
display: flex;
align-items: center;
justify-content: space-between;
}
.service_tab li{
width: calc(25% - 7.5px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px 30px;
border-radius: 4px;
border: 1px dashed rgba(0, 0, 0, 0.20);
font-size: 1.250em;
font-weight: 500;
cursor: pointer;
transition: background 0.3s ease-out;
}
.service_tab li:not(.active) span{
color: #FEBD17;
}
.service_tab li:hover{
background: #F5F5F5;
transition: background 0.3s ease-out;
}
.service_tab li.active{
background: #000;
color: #fff;
border: none;
position: relative;
}
.service_tab li.active:after{
content: "";
position: absolute;
bottom: -12px;
right: calc(50% - 3px);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-top: 6px solid transparent;
border-bottom: 6px solid #000;
border-right: 6px solid transparent;
transform: rotate(180deg);
}
.service_tab.mobile{
width: 100%;
position: relative;
}
.service_tab_select{
display: none;
}
.service_map{
position: relative;
}
.service_map_cover{
width: 100%;
height: 400px;
border: 10px solid #000;
margin-top: 20px;
overflow: hidden;
transition: height 0.3s ease-out;
}
.wide .service_map_cover{
height: 700px;
transition: height 0.3s ease-out;
}
.service_map_btn{
position: absolute;
right: 0;
bottom: -40px;
padding: 15px;
min-width: 160px;
display: flex;
align-items: center;
border-radius: 0 0 5px 5px;
color: #fff;
background: url("../img/sub/service/icon_wide.png") no-repeat center right 10px #000;
}
.service_list_total{
text-align: center;
margin: 45px 0 35px;
color: #666666;
font-size: 1.125em;
}
.service_list.agency .service_list_total{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 18px;
}
.service_list.agency .service_list_total_count{
text-align: center;
}
.online_store_toggle{
display: inline-flex;
align-items: center;
gap: 12px;
margin-left: auto;
cursor: pointer;
user-select: none;
color: #000;
font-size: 1em;
font-weight: 500;
}
.online_store_toggle_label{
line-height: 1.2;
}
.online_store_toggle_switch{
position: relative;
display: inline-block;
width: 42px;
height: 20px;
flex-shrink: 0;
}
.online_store_toggle_switch input{
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.online_store_toggle_track{
position: absolute;
inset: 0;
background: #c8c8c8;
border-radius: 40px;
transition: all 0.2s ease;
}
.online_store_toggle_track:after{
content: "";
display: block;
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
background: #ffffff;
border-radius: 100%;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.online_store_toggle_switch input:checked + .online_store_toggle_track{
background: #000000;
}
.online_store_toggle_switch input:checked + .online_store_toggle_track:after{
margin-left: 21px;
background: #FEBD17;
box-shadow: none;
}
.service_list ul{
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.service_list li{
position: relative;
width: calc(25% - 18px);
border: 2px solid #000;
padding: 16px 14px;
min-height: 260px;
margin-top: 35px;
border-radius: 4px;
}
.service_list li:not(:nth-child(4n)){
margin-right: 24px;
}
.service_list li:hover{
background: #F5F5F5;
}
.service_list.service li{
background: url("../img/sub/service/icon_cog.png") no-repeat top 30px right 20px;
background-size: 30px;
}
.service_list.agency li{
background: url("../img/sub/service/icon_drill.png") no-repeat top 14px right 16px;
background-size: 37px;
min-height: 300px;
}
.service_list li .title{
font-size: 1.2em;
font-weight: 600;
margin: 0;
width: 100%;
padding: 0 5px;
overflow: hidden;
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
}
.service_list li .option{
color: #666;
line-height: 170%;
padding: 15px 6px 10px;
word-break: keep-all;
line-height: 1.4;
}
.service_list .contact{
padding-left: 36px;
color: #161718;
line-height: 170%;
background: url("../img/sub/service/icon_call.png") no-repeat center left 7px;
background-size: 20px 21px;
}
.service_list a.contact.online_store{
display: block;
margin-top: 4px;
background-image: url("../img/sub/service/icon_store.png");
background-size: 20px 21px;
text-decoration: none;
cursor: pointer;
}
.service_list a.contact.online_store:hover{
text-decoration: underline;
}
.service_list .btn_wrap{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 27px;
position: absolute;
bottom: 14px;
width: calc(100% - 30px);
}
.service_list .btn_wrap .btn{
width: calc(50% - 4.5px);
min-width: auto;
height: 40px;
font-size: 1em;
padding: 0;
border-radius: 5px;
letter-spacing: -0.9px;
bottom: 14px;
}
.service_list.agency .btn_wrap .btn:only-child{
width: 100%;
}
.bottom_banner{
width: 100%;
background: #FFC329;
overflow: hidden;
position: fixed;
bottom: -90px;
}
.bottom_banner.active{
bottom: 0;
transition: bottom 0.5s ease-out;
}
.bottom_banner_cover{
display: flex;
align-items: center;
max-width: 1440px;
margin: auto;
}
.bottom_banner_title{
width: calc(100% - 1130px);
font-size: 0;
height: 90px;
display: flex;
align-items: center;
}
.bottom_banner_link{
height: 90px;
display: flex;
align-items: center;
min-width: 480px;
background: #F1B00B;
color: #342E1F;
font-size: 1.375em;
font-weight: 500;
padding: 0 30px;
}
.bottom_banner_link img{
margin-left: 40px;
}
.bottom_banner_info{
position: relative;
height: 90px;
min-width: 650px;
display: flex;
align-items: center;
justify-content: end;
background: #302302;
color: #fff;
}
.bottom_banner_info:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 100%;
bottom: 0;
width: 100%;
background: #302302;
}
.bottom_banner_info img{
max-width: 70px;
}
.bottom_banner_info h6{
margin: 0 30px 0 10px;
}
.bottom_banner_info span{
font-size: 1.125em;
}
.bottom_banner_info span:last-child{
font-size: 1.063em;
}
.bottom_banner_info i{
margin: 0 15px;
}
.bottom_banner_area{
height: 90px;
width: 100%;
display: block;
background: #000;
}
/* benefit */
.sub_visual_bg.benefit{
background: url("../img/sub/benefit/visual.jpg") no-repeat center;
}
/* brand */
.sub_visual_bg.brand{
background: url("../img/sub/brand/visual.jpg") no-repeat center;
}
/*mypage*/
.mypage_index{
width: 100%;
max-width: 600px;
margin: auto;
text-align: center;
}
.mypage_index_icon{
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
background: #FBF2F2;
border-radius: 100%;
margin: 0 auto 15px;
}
.mypage_index_txt{
font-size: 1.125em;
color: #666;
line-height: 150%;
}
.mypage_index_input{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.mypage_index_input .input{
height: 60px;
width: calc(100% - 200px);
border: 2px solid #161718;
border-radius: 10px;
}
.mypage_index_input .btn{
height: 60px;
min-width: 193px;
padding: 5px 20px 5px 25px;
font-weight: 600;
font-size: 1.250em;
border-radius: 10px;
}
.mypage_index_find{
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mypage_index_find a{
font-size: 1.1em;
padding-left: 25px;
font-weight: 500;
background: url("../img/comm/btn_register.png") no-repeat center left;
background-size: 20px;
}
.mypage_index_find .util a{
margin-right: 10px;
background: url("../img/sub/member/icon_check.png") no-repeat center left;
/**
* Eric Meyer's Reset CSS v2.0 (http: //meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html{overflow-y:scroll;}
*{
-webkit-box-sizing:border-box;
-moz-box-size:border-box;
box-sizing:border-box;}
body{font-family: "Noto Sans KR", "留묒�怨좊뵓", "Malgun Gothic", "dotum", sans-serif;
font-size:13px;
font-weight:normal;
color:#666;
letter-spacing:-1px;
line-height:1.5;
/* overflow-y: scroll; */
-webkit-overflow-scrolling: touch;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content: "";
content:none;}
table{border-collapse:collapse;
border-spacing:0;}
a{text-decoration:none;}
select, input, button, textarea{display:block;
box-sizing:border-box;
font-size:13px;
font-weight:normal;
color:#666;}
embed, object{position:absolute;}
button{cursor:pointer;}
img{display:block;}
strong{font-weight:bold;}
.c-both:
after{content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;}
.inblock{
display:inline-block}
.relative{
position:relative;}
.none-border{
border:none !important}
.none-padding{
padding:0 !important}
.mt3 {
margin-top: 2px;}
/* �떒�쐞 */
.mt8{
margin-top:8px}
.mt10{
margin-top:10px}
.mt20{
margin-top:20px}
.mt30{
margin-top:30px}
.mt40{
margin-top:40px}
.mt50{
margin-top:50px}
.mt60{
margin-top:60px}
.mt70{
margin-top:70px !important;}
.mt75{
margin-top:75px}
.ml10{
margin-left:10px}
.mt-m{
margin:-44px 0 0;}
/* font */
.f18{
font-size:18px !important;}
.txt_ellip{
display:block;
overflow:hidden;
white-space:nowrap;
word-break:break-all;
text-overflow:ellipsis;}
.hide{
display:none;}
.blind{
text-indent: -99999em;
overflow: hidden;
font-size:0}
.relative{
position:relative;}
/* **************************************** */
/* 硫붿씤, �꽌釉� 怨듯넻 */
/* **************************************** */
#main-wrap, #sub-wrap{
width:100%;
height:100%;
min-width:980px;}
#main-wrap #header{
position:absolute;
width:100%;
z-index:9;
/* transition:all 0.4s; */
overflow:hidden;}
#header{
width:100%;
background:#000;
height:110px;}
#header .wrapper{
position:relative;
width: 1400px;
margin:0 auto;
padding:37px 0 0;}
/*navigation*/
#header .wrapper
h1.logo{position:relative;
float:left;
margin:0 168px 0 0;
z-index:99;}
#header .wrapper .nav {
float: left;
padding:6px 0 0;}
#header .wrapper .nav >
ul > li:first-child{margin:0}
#header .wrapper .nav >
ul > li {float: left;
margin:0 0 0 54px;}
#header .wrapper .nav >
ul .depth1 > a{color:#ccc;
font-size:16px;
letter-spacing:0px;}
#header .wrapper .nav >
ul .depth1 > a:hover{color:#febd17;
border-bottom:2px solid #febd17;
padding:0 0 5px;}
#header .wrapper .nav >
ul .depth1.on .sub_menu{display:block;}
#header .wrapper .nav >
ul .depth1.on > a{color:#febd17;
border-bottom:2px solid #febd17;
padding:0 0 5px;}
#header .wrapper .nav #main-search{
position:absolute;
right:0;
top:37px;
width:140px;
z-index:9;}
#header .wrapper .nav #main-search .header_search{
position:relative;
border-bottom:2px solid #aaa;}
#header .wrapper .nav #main-search .header_search .search_bar{
border:0;
width:79%;
height:34px;
background:#000;
font-size:16px;
color:#ccc;
font-family:"NanumBareunGothicLight";}
#header .wrapper .nav #main-search .header_search .search_btn{
position:absolute;
right:0;
top:0;
background: url(/resources/www/images/common/searchBar.png?ver.01) no-repeat 100% center;
border:0;
width:35px;
height:35px;
cursor:pointer;}
/*#main-wrap .depth2_bg{position:absolute; left:0; top:0; width:100%; background:#000; height:110px; z-index:9; min-width:980px;} */
#sub-wrap .depth2_bg{
position:absolute;
left:0;
top:0px;
width:100%;
background:#000;
height:140px;
z-index:9;
min-width:980px;
/* transition: 300ms; */}
.depth1{
position:relative;
z-index:99;}
.sub_menu{
display:none;
position:absolute;
left:0;
top:65px;
height:auto;
width:640px;}
.sub_menu .depth2
a{font-size:14px;
color:#949494 !important;
letter-spacing:0;
font-family: "NanumBareunGothicLight";}
.sub_menu.menu1{
top:53px;
left:-100px;}
.sub_menu.menu1 .depth2{
float:left;
margin:0 25px 0 0}
.sub_menu.menu1 .depth2
a:hover, .sub_menu.menu1 .depth2 a.on{border-bottom:none !important;
color:#febd17 !important;}
.sub_menu.menu2{
left:-448px;
width:1080px;
--dewalt-pnav-gap:20px;
--dewalt-pnav-icon-w:60px;
--dewalt-pnav-icon-h:48px;}
.sub_menu.menu2 .depth2{
float:left;
margin:0 20px 0 0;}
.sub_menu.menu2 .depth2:last-child{
margin-right:0;}
.sub_menu.menu2 .depth2
a{
box-sizing:border-box;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:var(--dewalt-pnav-gap);
float:none;
color:#848484 !important;
text-align:center;
width:auto;
min-width:60px;
white-space:nowrap;
min-height:calc(1.25em + var(--dewalt-pnav-gap) + var(--dewalt-pnav-icon-h));
line-height:1.25;
overflow:visible;
font-size:14px;
background:none;
padding:0;
}
.sub_menu.menu2 .depth2 a::before{
content:"";
display:block;
flex:0 0 auto;
order:2;
width:var(--dewalt-pnav-icon-w,60px);
height:var(--dewalt-pnav-icon-h,48px);
min-width:60px;
min-height:48px;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.sub_menu.menu2 .depth2.menu2-1 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_01.svg);}
.sub_menu.menu2 .depth2.menu2-1 a:hover::before,
.sub_menu.menu2 .depth2.menu2-1 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_01_on.svg);}
.sub_menu.menu2 .depth2.menu2-2 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_02.svg);}
.sub_menu.menu2 .depth2.menu2-2 a:hover::before,
.sub_menu.menu2 .depth2.menu2-2 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_02_on.svg);}
.sub_menu.menu2 .depth2.menu2-3 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_03.svg);}
.sub_menu.menu2 .depth2.menu2-3 a:hover::before,
.sub_menu.menu2 .depth2.menu2-3 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_03_on.svg);}
.sub_menu.menu2 .depth2.menu2-4 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_07.svg);}
.sub_menu.menu2 .depth2.menu2-4 a:hover::before,
.sub_menu.menu2 .depth2.menu2-4 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_07_on.svg);}
.sub_menu.menu2 .depth2.menu2-5 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_05.svg);}
.sub_menu.menu2 .depth2.menu2-5 a:hover::before,
.sub_menu.menu2 .depth2.menu2-5 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_05_on.svg);}
.sub_menu.menu2 .depth2.menu2-6 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_06.svg);}
.sub_menu.menu2 .depth2.menu2-6 a:hover::before,
.sub_menu.menu2 .depth2.menu2-6 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_06_on.svg);}
.sub_menu.menu2 .depth2.menu2-7 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_08.svg);}
.sub_menu.menu2 .depth2.menu2-7 a:hover::before,
.sub_menu.menu2 .depth2.menu2-7 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_08_on.svg);}
.sub_menu.menu2 .depth2.menu2-8 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_09.svg);}
.sub_menu.menu2 .depth2.menu2-8 a:hover::before,
.sub_menu.menu2 .depth2.menu2-8 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_09_on.svg);}
.sub_menu.menu2 .depth2.menu2-9 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_13_extra.svg);}
.sub_menu.menu2 .depth2.menu2-9 a:hover::before,
.sub_menu.menu2 .depth2.menu2-9 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_13_extra_on.svg);}
.sub_menu.menu2 .depth2.menu2-10 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_11.svg);}
.sub_menu.menu2 .depth2.menu2-10 a:hover::before,
.sub_menu.menu2 .depth2.menu2-10 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_11_on.svg);}
.sub_menu.menu2 .depth2.menu2-11 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_12.svg);}
.sub_menu.menu2 .depth2.menu2-11 a:hover::before,
.sub_menu.menu2 .depth2.menu2-11 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_12_on.svg);}
.sub_menu.menu2 .depth2.menu2-12 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_10.svg);}
.sub_menu.menu2 .depth2.menu2-12 a:hover::before,
.sub_menu.menu2 .depth2.menu2-12 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_10_on.svg);}
.sub_menu.menu2 .depth2.menu2-13 a::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_04.svg);}
.sub_menu.menu2 .depth2.menu2-13 a:hover::before,
.sub_menu.menu2 .depth2.menu2-13 a.on::before{background-image:url(/resources/www/images/common/sub2_nav/sub2_nav_04_on.svg);}
/* Optional: same SVGs as ![]()
inside .dewalt-pnav-ico (clip-path in SVG breaks many CSS background cases) */
.sub_menu.menu2 .depth2 a:has(.dewalt-pnav-ico)::before{
content: none !important;
display: none !important;
}
.sub_menu.menu2 .depth2 a .dewalt-pnav-ico{
position: relative;
display: block;
flex: 0 0 auto;
order: 2;
width: var(--dewalt-pnav-icon-w, 60px);
height: var(--dewalt-pnav-icon-h, 48px);
}
.sub_menu.menu2 .depth2 a .dewalt-pnav-ico img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
pointer-events: none;
}
.sub_menu.menu2 .depth2 a .dewalt-pnav-ico-hov{
opacity: 0;
transition: opacity 0.15s ease;
}
.sub_menu.menu2 .depth2 a .dewalt-pnav-ico-def{
transition: opacity 0.15s ease;
}
.sub_menu.menu2 .depth2 a:hover .dewalt-pnav-ico-hov,
.sub_menu.menu2 .depth2 a.on .dewalt-pnav-ico-hov{
opacity: 1;
}
.sub_menu.menu2 .depth2 a:hover .dewalt-pnav-ico-def,
.sub_menu.menu2 .depth2 a.on .dewalt-pnav-ico-def{
opacity: 0;
}
.sub_menu.menu2 .depth2
a:hover,
.sub_menu.menu2 .depth2 a.on{border-bottom:none !important;
color:#febd17 !important;}
/*
.sub_menu.menu3{top:53px; left:-313px;}
.sub_menu.menu3 .depth2{float:left; margin:0 25px 0 0;}
.sub_menu.menu3 .depth2 a:hover, .sub_menu.menu4 .depth3 a.on{border-bottom:none !important; color:#febd17 !important;}
.sub_menu.menu3{width:780px;}
*/
.sub_menu.menu3{
top:53px;
left:-13px;}
.sub_menu.menu3 .depth2{
float:left;
margin:0 25px 0 0;}
.sub_menu.menu3 .depth2
a:hover, .sub_menu.menu3 .depth2 a.on{border-bottom:none !important;
color:#febd17 !important;}
.sub_menu.menu4{
top:53px;
left:-528px;
width:730px;}
.sub_menu.menu4 .depth2
a{float:left;
color:#848484;
margin:0 24px 0 0;}
.sub_menu.menu4 .depth2
a:hover, .sub_menu.menu4 .depth2 a.on{border-bottom:none !important;
color:#febd17 !important;}
/* **************************************** */
/* footer */
/* **************************************** */
#sub-wrap #footer{
margin:40px 0 0;
padding-bottom: 100px;}
#footer{
width:100%;
background:#111;
padding:50px 0 26px;}
#footer .wrapper{
max-width: 1020px;
margin:0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;}
#footer .wrapper .footer_static{
width:341px;}
#footer .wrapper .footer_static .sns{
margin:60px 0 0;}
#footer .wrapper .footer_static .sns
a{display:inline-block;
margin-right:2px;}
#footer .wrapper .footer_static .newsLetter{
display:inline-block;}
#footer .wrapper .footer_static .infor{
margin:16px 0 0;
letter-spacing:0}
#footer .wrapper .footer_static .infor .addr{
/*color:#555; font-family: 'NanumBareunGothicLight';*/
font-size:13px;
line-height:1.7;}
#footer .wrapper .footer_static .infor .copyRight{
margin:12px 0 0;
color: #777;
font-size:13px;}
#footer .wrapper .siteWrap:
after{content: ".";
display:block;
height:0;
overflow:hidden;
clear:both;}
#footer .wrapper .siteWrap
h4 a{color:#888;
font-size:14px;}
#footer .wrapper .siteWrap >
li{float:left;
width: 150px;}
#footer .wrapper .siteWrap >
li:nth-child(2n){width: 120px;}
#footer .wrapper .siteWrap >
li.last{width:150px;}
#footer .wrapper .siteWrap
li > ul{/*font-family: 'NanumBareunGothicLight';*/ margin:22px 0 0;}
#footer .wrapper .siteWrap
li > ul > li{display:block;
padding:0 0 3px}
#footer .wrapper .siteWrap
li > ul > li a{color:#555;
font-size:14px;}
#footer .wrapper .familySite {
position:relative;
margin:16px 0 0;
width:145px;}
#footer .wrapper .familySite .img{
display:inline-block;
background:url(/resources/www/images/common/btnFamilyGroup.png) no-repeat;
width:145px;
height:29px;
text-indent:-9999em;
position: relative;}
#footer .wrapper .familySite .img.on{
background-position:0 bottom;}
#footer .wrapper .familySite>
a{line-height:0;
display:inline-block}
#footer .wrapper .familySite
ul.site {overflow:visible;
display:none;
position:absolute;
bottom:29px;
left:0;
height:auto;
margin:0;
padding:0 0 0;
background:#222;
width:100%;}
#footer .wrapper .familySite
ul.site li{float:none;
margin:0;
padding:0;
background:none;}
#footer .wrapper .familySite
ul.site li a{display:block;
margin-top:-1px;
padding:5px 10px 5px 10px;
border-bottom:1px solid #000;
color:#4e4e4e;}
#footer .wrapper .familySite
ul.site li a:hover{color:#777;}
#footer .wrapper .footerBn{
position:absolute;
top:25px;
right:0}
#contentWrap{
width:100%;}
.d-bg{
background: url(/resources/www/images/common/deBg.png?ver.01) no-repeat;
overflow:hidden;}
/* .cont_body{position:relative; width:980px; margin:123px auto 0; overflow:hidden;} */
.cont_body{
position:relative;
width:980px;
margin:66px auto 0;
overflow:hidden;}
/* location */
.location{
font-family: 'NanumBareunGothicLight';
overflow:hidden;
display: flex;}
.location:
after{content: ".";
display:block;
height:0;
overflow:hidden;
clear:both;}
.location
li{display: flex;
padding:0 0 0 8px;
margin:0 0 0 8px;
background:url(/resources/www/images/common/ico-location.png) no-repeat 0 5px;}
.location
li:first-child{padding:0;
margin:0;
background:none;}
.location
li a{font-size:13px;
color:#999;}
.location
li.on a{color:#666}
/* �젙�젹 */
.middle.left{
margin-right:2px;
color:#777;}
.middle.mleft{
/* margin-left:-4px; */}
.middle.left.search{
margin-right:15px;}
.middle{
display:inline-block;
vertical-align:middle;}
.left-float.left.group{
margin-right:20px;}
.left-float{
float:left;}
.mt-m3{
margin-top:-3px}
/* color */
.em-yellow{
color:#ffba00;
font-size:24px;
vertical-align:middle;}
/* select */
.select-wrapper{
min-width:76px;
position:relative;
cursor:pointer;}
.select-wrapper .select{
border:1px solid #ddd;
background:#fff;
position:relative;
font-weight:normal;}
.select-wrapper .select .label{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin:0 25px 0 10px;
font-size:14px;
line-height:34px;
color:#999;
height:34px;}
.select-wrapper .select .label.big{
height:42px;
line-height:42px;}
.select-wrapper .select .label.narrow{
margin:0 25px 0 5px;}
.select-wrapper .select .button{
display:block;
position:absolute;
right:0;
top:0;
bottom:0;
margin:auto;
width:25px;
height:36px;
color:#999;
text-align:center;
font:0/0 a; *
font: 36px/36px Lucida Sans Unicode, Arial Unicode MS, Arial;}
.select-wrapper .select .button:
after{content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:0;
height:0;
border:4px solid transparent;
border-top-color:#bbb;
border-bottom:none;}
.select-wrapper .select-items{
display:none;
width:100%;
position:absolute;
top:100%;
left:0;
background:#fff;
border:1px solid #ddd;
z-index:90;
box-shadow:0 0 10px -6px;
box-sizing:border-box;
overflow:auto;
max-height:192px;}
.select-wrapper .select-items.on{
display:block;}
.select-wrapper .select-items .select-scroll{
height:100%;
overflow:auto;}
.select-wrapper .select-above .select-items{
top:auto;
bottom:100%;}
.select-wrapper .select-items
ul, .select-items li{list-style:none;
padding:0;
margin:0;
font-size:14px;
line-height:20px;
min-height:20px;
font-weight:normal;}
.select-wrapper .select-items
li{display:block;
padding:8px;
border-top:1px solid #fff;
border-bottom:1px solid #eee;
color:#999;
cursor:pointer;}
.select-wrapper .select-items
li.selected{background:#efefef;
color:#999;}
.select-wrapper .select-items
li:hover{background:#f0f0f0;
color:#999;}
.select-wrapper .select-items .disabled{
filter:alpha(opacity=50);
opacity:0.5;
cursor:default !important;
background:none !important;
color:#999 !important;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;}
/* select0.s02 */
.select-wrapper.s02 .select .label{
color:#444;}
.select-wrapper.s02 .select .button:
after{border-top-color:#444;}
.select-wrapper.s02 .select-items
li{display:block;
padding:8px;
border-top:1px solid #fff;
border-bottom:1px solid #eee;
color:#444;
cursor:pointer;}
.select-wrapper.s02 .select-items
li.selected{color:#444;}
.select-wrapper.s02 .select-items
li:hover{color:#444;}
/* check */
.check-wrap{
position:relative;
display:inline-block;}
.check-box{
position:absolute;
top:5px;
left: 5px;
margin:0;}
.check-label.blind{
padding-left: 15px;
width:0;
text-indent: -99999em;
overflow:hidden;
line-height:1;}
.check-label{
display:block;
height:auto;
line-height:22px;
padding-left:27px;
font-size:14px;
color:#777;
font-weight:500;}
.check-label:
after{content: "";
display: block;
width: 22px;
height: 22px;
position: absolute;
top: 0;
left: 0;
background: url(/resources/www/images/common/checkBoxBg.png) no-repeat 0 0;}
.check-box:
checked + .check-label:before{content: "";
display: block;
position: absolute;
z-index: 7;
top: 0px;
left: 0px;
width: 22px;
height: 22px;
background: url(/resources/www/images/common/checkBoxBg.png) no-repeat 0 -22px;}
/* textarea */
.textarea{
width:100%;
min-height:96px;
padding:10px;
color: #999;
border:1px solid #ddd;
font-weight:500;}
/* input */
.input{
min-width:76px;
color:#999;
font-size:14px;
font-weight:500;
height:36px;
padding-left:10px;
border:1px solid #ddd;}
/* table */
.tbl{
border-top:2px solid #222;
border-bottom:1px solid #222;
padding:25px 0;}
.hr-table01{
width:100%;
table-layout:fixed;}
.hr-table01
th{font-size:15px;
color:#222;
text-align:left;
padding:0 0 0 36px;
border-left:1px solid #fff;
background:#fff;}
.hr-table01
th:first-child{border-left:0;}
.hr-table01
td{padding:7px 10px 7px 36px;
font-weight:bold;
color:#666;
border-left:1px solid #fff;}
.hr-table01
td.center{padding:0;
text-align:center;}
.hr-table02{
width:100%;
table-layout:fixed;
border:1px solid #ddd;
border-top:0;}
.hr-table02
th{font-size:14px;
color:#222;
text-align:center;
padding:12px 0;
border-left:1px solid #fff;
background:#f9f9f9;
border-right:1px solid #ddd;
border-top:1px solid #ddd;
font-weight:500;}
.hr-table02
th:first-child{border-left:0;}
.hr-table02
td{padding:7px 10px;
font-weight:bold;
color:#666;
border-left:1px solid #fff;
border-top:1px solid #ddd;
font-weight:500;}
.hr-table02
td.center{padding:0;
text-align:center;}
.hr-table03{
width:99.8%;
table-layout:fixed;
margin:0 0 0 1px}
/* .hr-table03 tbody tr:hover td{border-top:1px solid #febd17; border-bottom:1px solid #febd17}
.hr-table03 tbody tr:hover td:first-child{border-left:1px solid #febd17;}
.hr-table03 tbody tr:hover td.last{border-right:1px solid #febd17;} */
.hr-table03
th{font-size:16px;
color:#222;
text-align:center;
padding:18px 0;
border-bottom:1px solid #000;
background:#fff;}
.hr-table03
th.left{text-align:left;
padding-left:38px;}
.hr-table03
td{padding:18px 23px;
font-size:14px;
color:#777;
border-top:1px solid #ddd;
font-weight:500;}
.hr-table03
td a{color:#777;}
.hr-table03
td.center{padding:0;
text-align:center;}
.noti{
margin:0 0 0 12px;
color:#999;
font-size:14px;
vertical-align:middle;
font-weight:500;}
.topTxt{
text-align:right;
font-size:15px;}
/* submit-btns */
.submit-btns.center{
text-align:center;}
.submit-btns{
margin:30px 0 0;}
.btn-fill.yellow{
background:#febd17;
border:2px solid #febd17;
color:#222;}
.submit-btns .btn-fill{
display: inline-block;
margin:0 2px;}
.btn-fill{
width:102px;
height: 44px !important;
font-size:15px;
font-weight: bold !important;
color: #222;
line-height: 39px !important;
border:2px solid #dadada;
background:#fff;
text-align:center;
box-sizing:border-box;
cursor: pointer;
display:inline-block;
padding: 0 !important;}
/* TAB */
.tab.w-2
li{width:50%;}
.tab.w-3
li{width:33.3%;}
.tab.w-5
li{width:20%;}
.tab.w-6
li{width:16.66%;}
.tab.w-7
li{width:14.28%;}
.tab.w-8
li{width:11.11%;}
.tab.w-9
li{width:11.11%;}
.tab.w-10
li{width: 9.09%}
.tab.h02.w-4
li{width:15.2%;}
.tab{
height:58px;
border-bottom:1px solid #ddd;
margin:0 0 40px;}
.tab
li{position:relative;
float:left;
z-index:1;
display: table;}
.tab
li a{display: table-cell;
vertical-align: middle;
width:100%;
height:57px;
line-height:1.2;
font-size:16px;
color:#555;
background:#f8f8f8;
border-top:1px solid #ddd;
border-right:1px solid #ddd;
text-align:center;}
.tab
li:first-child a{border-left:1px solid #d0d0d0;}
.tab
li:first-child.on{margin:0 0 0 0}
.tab
li.on{margin:0 0 0 -1px;}
.tab
li.on a{color:#222;
border:1px solid #bbb;
border-bottom:0;
background:#fff;
height:58px;}
.tab.h02
li:first-child{margin:0 0 0 192px;}
/* tab */
.tab.acc {
border-bottom:0;
border-left:1px solid #ddd;
height:auto;
overflow:hidden;
padding-top:1px;}
.tab.acc
li {width:16.666%;
margin:-1px 0 0 -1px;}
.tab.acc
li a {border:1px solid #ddd; }
.tab.acc
li:first-child.on{margin:-1px 0 0 -1px;}
.tab.acc
li.on a {height:57px; }
/* radio */
.radio{
position:absolute;
top:3px;
left:3px;
margin:0;}
.radio-wrap{
position:relative;}
.radio-wrap.center{
display:inline-block;}
.radio-label{
display:block;
height:20px;
line-height:19px;
padding-left:26px;
font-size:14px;
color:#777;
font-weight:500;}
.radio-label.blind{
padding-left:20px;
width:0;
text-indent: -99999em;
overflow:hidden;}
.radio-label:
after{content: "";
display:block;
width:20px;
height:20px;
position:absolute;
top:0;
left:0;
border:1px solid #cbcbcb;
border-radius:50%;
background:#fff;
box-sizing: border-box;}
.radio-label.gray:
after{background:#f8f8f8;}
.radio-label-blank{
width:0;
padding-left:20px;
text-indent:-9999px;}
.radio:
checked + .radio-label:before{content: "";
display:block;
position:absolute;
width:8px;
height:8px;
z-index:10;
top:6px;
left:6px;
border-radius:50%;
background:#ff7d01;}
.radio:
disabled + .radio-label:after{background:#ddd;}
/* page */
.page{
margin:30px 0 0;
text-align:center;
font-size:0;}
.page-item{
display:inline-block;
margin:0 2px;
width:28px;
height:28px;
line-height:26px;
color:#888;
font-size:13px;
vertical-align:middle;
border:1px solid #ddd;
font-family:"Tahoma Regular";
background:#fff;}
.page-item:
hover{background:#f8f8f8;}
.page-item.on{
color:#000;
background:#f8f8f8;}
.page-item.prev{
margin:0 10px 0 0}
.page-item.next{
margin:0 0 0 10px}
.page-item.prev, .page-item.next{
text-indent:-9999px;
background: url(/resources/www/images/common/bg_arrow_page.png) no-repeat;
width:54px;}
.page-item.prev{
background-position:0 0;}
.page-item.prev:
hover{background-position:0 -26px;}
.page-item.next{
background-position:-51px 0;}
.page-item.next:
hover{background-position:-51px -26px;}
/* popup */
#dim{
display:none;
position:fixed;
top:0;
left:0;
background:url(/resources/www/images/common/popBg.png) repeat;
width:100%;
height:100%;
z-index: 100;}
#dim.on{
display:block;}
#popupNewsletter{
display:none;
position:fixed;
z-index: 200;
min-width:490px;}
#popupNewsletter.on{
display:block;}
#popupNewsletter .sectionTop{
position:relative;
background:#febd17;
min-height:75px;
width:100%;
padding:0 0 0 23px;
display:table;}
#popupNewsletter .sectionTop .title{
color:#222;
font-size:30px;
display: table-cell;
vertical-align: middle; }
#popupNewsletter .sectionTop .close{
position:absolute;
right:0;
top:0;
border:0;
background:url(/resources/www/images/common/popClose.png) no-repeat center center;
width:75px;
height:75px;
text-indent:-9999em;}
#popupNewsletter .sectionMiddle{
background:#fff;
width:100%;
text-align:center;
padding:50px 0}
#popupNewsletter .sectionMiddle .NewsLetterTxt{
position:relative;
display:inline-block;
padding:80px 0 0;
color:#444;
font-size:17px;}
#popupNewsletter .sectionMiddle .NewsLetterTxt:
after{position:absolute;
left:50%;
top:0;
margin:0 0 0 -65px;
content:"";
background:url(/resources/www/images/common/popNewsLetterBg.png) no-repeat;
width:130px;
height:55px;}
/* search */
.txt_search{
position:relative;
width:354px;
margin:35px auto 0;}
.txt_search .search_bar{
border:0;
width:256px;
height:45px;
padding:0 18px;
background:#f3f3f3;
font-size:15px;
color:#777;}
.txt_search .search_bar::
-webkit-input-placeholder{color:#777;} /* Webkit */
.txt_search .search_bar:
-moz-placeholder{color:#777;} /* Firefox 4-18 */
.txt_search .search_bar::
-moz-placeholder{color:#777;} /* Firefox 19+ */
.txt_search .search_bar:
-ms-input-placeholder{color:#777;} /* IE10+ */
.txt_search .search_btn{
position:absolute;
right:0;
top:0;
background:#febd17;
color:#222;
border:0;
font-size:17px;
border:0;
width:96px;
height:45px;
cursor:pointer;
font-family: "NotoSans-Regular"}
/* privacy */
.privacy_link {
margin:15px 0 10px;
font-size:14px;}
.privacy_link:
after {clear:both;
display:block;
content:"";}
.privacy_link
li {float:left;
padding-right:20px;}
.privacy_link
li a {color:#888;}
.privacy_wrap .privacy_box {
padding:30px;
border:1px solid #ddd;
font-size:15px;
line-height:27px;
color:#888;}
.privacy_wrap .privacy_box
p {font-size:18px;
color:#333;
padding:0 0 30px;}
.privacy_step {
color:#888;
font-size:15px;
line-height:27px;}
.privacy_wrap .step01 {
color:#333;
font-size:18px;
font-weight:bold;
padding:30px 0 0;}
.privacy_wrap .step02 {
padding:10px 0 0 20px;}
.privacy_wrap .copy01 {
margin-left:-20px;
color:#555;
font-size:16px;
padding:15px 0 0;}
.privacy_wrap .copy02 {
color:#666;
padding:10px 0 0;}
.privacy_wrap
table {width:100%;
border-top:2px solid #222;
text-align:center;
margin:20px 0;}
.privacy_wrap
table thead td {background-color:#f8f8f8;
padding:25px 35px;
font-size:16px;
color:#555;
border-bottom:1px solid #ccc;}
.privacy_wrap
table tbody td {padding:25px 35px;
border-bottom:1px solid #ccc;
color:#888;}
.privacy_wrap
table tbody td em {text-decoration:underline;
color:#333;}
.privacy_wrap
ul li {padding:0 0 0 30px;}
.privacy_wrap
ul li strong {color:#555;}
.privacy_wrap .caution {
color:#222;
padding:40px 0 0;}
.privacy_step2 {
color:#888;
font-size:15px;
line-height:27px;
margin:30px 0 0;}
.privacy_step2
strong {color:#555;}
.event_more_view{
position:absolute;
z-index:2;
width:100%;
max-width:980px;
left:50%;
transform:translateX(-50%);
top:20px; }
.event_more_view >
a{display:inline-block;}
/* 2020-11-10 */
#contentWrap {
margin: 170px 0 0 0;}
#header.on.long + #contentWrap {
margin:200px 0 0 0;}
#main-wrap #contentWrap {
margin:0 0 0 0;}
#main-wrap #header {
position:static;}
#main-wrap #header.on.long + #contentWrap {
margin:0 0 0 0;}
#main-wrap #header.on.long2 + #contentWrap {
margin: 0 0 0 0;}
.main_slide {
padding-top:0 !important;}
/* 20220803 */
/* 20240316 responsive */
/*layout------------------------------*/
#header.on.long2 + #contentWrap {
margin : 180px 0 0 0;
}
#header .dewaltAllSearchOpen{
display: none;
}
#header .dewaltMember{
position: absolute;
right: 220px;
display: flex;
font-size: 0;
}
#header .dewaltMember
a{
display: block;
width: 40px;
height: 40px;
cursor: pointer;
}
#header .dewaltMember .login{
background: url(/resources/www/images/common/icon_login_w.svg) no-repeat center;
}
#header .dewaltMember .join{
background: url(/resources/www/images/common/icon_join_w.svg) no-repeat 2px center;
}
#header .dewaltMember .logout{
background: url(/resources/www/images/common/icon_logout_w.svg) no-repeat center left;
}
#header .dewaltMember .mypage{
background: url(/resources/www/images/common/icon_mypage_w.svg) no-repeat center left;
}
#header .dewaltAllSearchClose,
#header .dewaltMenu{
display: none;
}
#header .dewaltAllip{
font-size: 14px;
color: #ccc;
width: 160px;
padding: 0;
}
#header .dewaltHasIcon{
left: 213px;
}
/* Dewalt product row (GNB): flex + ::after icon — tokens only here / mobile override below */
#header .dewaltDep02.dewaltHasIcon{
--dewalt-pnav-gap: 20px;
--dewalt-pnav-icon-w: 60px;
--dewalt-pnav-icon-h: 48px;
}
#header .dewaltDep02.dewaltHasIcon > li{
margin: 0 0 0 20px;
}
@media screen and (min-width: 1025px) {
#header .dewaltDep02.dewaltHasIcon > li:first-child{
margin-left: 0;
}
}
#header .dewaltDep02.dewaltHasIcon > li > a{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--dewalt-pnav-gap);
width: auto;
min-width: 60px;
white-space: nowrap;
min-height: calc(1.25em + var(--dewalt-pnav-gap) + var(--dewalt-pnav-icon-h));
line-height: 1.25;
font-size: 14px;
text-align: center;
background: none;
padding: 0;
overflow: visible;
}
/* SVGs use clip-path / internal styles — render via ![]()
(gnb.jsp), not CSS background on ::before */
#header .dewaltDep02.dewaltHasIcon > li > a .dewalt-pnav-ico{
position: relative;
display: block;
flex: 0 0 auto;
order: 2;
width: var(--dewalt-pnav-icon-w, 60px);
height: var(--dewalt-pnav-icon-h, 48px);
}
#header .dewaltDep02.dewaltHasIcon > li > a .dewalt-pnav-ico img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
pointer-events: none;
}
#header .dewaltDep02.dewaltHasIcon > li > a .dewalt-pnav-ico-hov{
opacity: 0;
transition: opacity 0.15s ease;
}
#header .dewaltDep02.dewaltHasIcon > li > a .dewalt-pnav-ico-def{
transition: opacity 0.15s ease;
}
#header .dewaltDep02.dewaltHasIcon > li > a:hover .dewalt-pnav-ico-hov,
#header .dewaltDep02.dewaltHasIcon > li > a.on .dewalt-pnav-ico-hov{
opacity: 1;
}
#header .dewaltDep02.dewaltHasIcon > li > a:hover .dewalt-pnav-ico-def,
#header .dewaltDep02.dewaltHasIcon > li > a.on .dewalt-pnav-ico-def{
opacity: 0;
}
#header .dewaltDep02_mobile{
display: none;
}
#footer{
text-align: left;
}
/*main -------------------------------*/
#main-wrap #contentWrap .sli_wrap .slick-dots{
width: 100% !important;
max-width: 980px !important;
}
#main-wrap #contentWrap .sli_array .inner{
width: 100% !important;
max-width: 980px;
padding: 0 30px;
}
#main-wrap #contentWrap .sli_array .tit
img{
max-width: 40vw;
}
#main-wrap #contentWrap .nl_wrap .inner{
width: 100% !important;
max-width: 980px;
padding: 100px 30px 0;
}
#main-wrap #contentWrap .wrapper04 .inBox{
width: 100% !important;
max-width: 980px;
}
#main-wrap .section-title
img{
max-width: 75vw;
}
#main-wrap #contentWrap .wrapper05{
height: auto !important;
padding-bottom: 30px;
}
#main-wrap #contentWrap .wrapper05 .inBox{
width: 100% !important;
max-width: 980px;
}
#main-wrap #contentWrap .wrapper05 .inBox .item-box{
display: flex;
width: 100%;
}
/*content common----------------------*/
#contentWrap .tab{
margin-bottom: 20px;
height: auto;
display: flex;
flex-wrap: wrap;
background: #fbfbfb;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 0;
border-bottom: 0;
position: relative;
}
#contentWrap .wr .tab{
display: none;
}
#contentWrap .tab:
after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
#contentWrap .tab
li a{
border: 0;
border-bottom: 1px solid #ddd;
}
#contentWrap .tab
li{
float: none;
border-right: 1px solid #ddd;
}
#contentWrap .tab
li.on,
#contentWrap .tab.acc li{
margin: 0;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(2),
#contentWrap .tab li:nth-child(1):nth-last-child(2) ~ li{
width: 50%;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(3),
#contentWrap .tab li:nth-child(1):nth-last-child(3) ~ li{
width: 33.33333%;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(4),
#contentWrap .tab li:nth-child(1):nth-last-child(4) ~ li{
width: 25%;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(5),
#contentWrap .tab li:nth-child(1):nth-last-child(5) ~ li{
width: 20%;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(6),
#contentWrap .tab li:nth-child(1):nth-last-child(6) ~ li{
width: 16.66666%;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(7),
#contentWrap .tab li:nth-child(1):nth-last-child(7) ~ li{
width: 14.28571%;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(8),
#contentWrap .tab li:nth-child(1):nth-last-child(8) ~ li{
width: 12.5%;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(9),
#contentWrap .tab li:nth-child(1):nth-last-child(9) ~ li{
width: 11.1114%;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(10),
#contentWrap .tab li:nth-child(1):nth-last-child(10) ~ li{
width: 20%;
}
#contentWrap .tab
li:nth-child(1):nth-last-child(11),
#contentWrap .tab li:nth-child(1):nth-last-child(11) ~ li{
width: 16.667%;
}
#contentWrap .datepicker
input{
width: 102px !important;
border: 1px solid #ddd !important;
}
#contentWrap .page{
width: 100%;
}
#contentWrap .page{
width: 100%;
justify-content: center;
}
.dewaltAllSearch .search_btn{
min-width: auto;
padding: 0;
}
.searchAllWrap .select-wrapper .select{
height: 36px;
border-radius: 0;
padding: 0;
font-size: 1em;
}
.searchAllWrap .input{
border: 1px solid #ddd;
}
.hr-table02
td{
padding: 0 10px !important;
}
.hr-table02.goods_view
th{
width: 370px;
}
.input_wrap .input{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 20px 0;
border: none;
color: #121212;
font-size: 1em;
height: auto;
padding: 0;
font-weight: 400;
}
#contentWrap .img_mobile{
display: none;
}
#contentWrap
img{
max-width: 100%;
/* display: none;*/
}
#contentWrap .page{
padding: 30px 0 10px;
overflow: hidden;
display: table;
margin: auto;
}
#contentWrap .page{
margin: 0 auto;
display: flex;
align-items: center;
}
#contentWrap .page
li{
list-style: none;
display: block;
float: left;
line-height: 29px;
margin: 0 3px;
font-weight: 500;
}
#contentWrap .page
a{
text-decoration: none;
}
#contentWrap .page
li a, #contentWrap .page li span{
display: flex;
width: 40px;
height: 40px;
padding: 12.5px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12.5px;
border-radius: 3.75px;
border: 1.25px solid #000;
background: #FFF;
font-size: 14px;
}
#contentWrap .page
li a:hover{
color: #2D3748;
}
#contentWrap .page
li.current span{
background: #2D3748;
color: #fff;
}
#contentWrap .page
li.btn_prev a:hover,
#contentWrap .page li.btn_next a:hover{
border-color: #fff;
color: #455EEE;
box-shadow: 0 2px 12px 0 rgba(69, 94, 238, 0.15);
transition: all .3s ease-out;
}
#contentWrap .page
li.btn_prev.none a,
#contentWrap .page li.btn_next.none a{
opacity: 0.5;
cursor: unset;
}
#contentWrap .page
li.btn_prev.none a:hover,
#contentWrap .page li.btn_next.none a:hover{
border-color: #E8EBF0;
color: #9BA6B9;
box-shadow: none;
}
/*sub---------------------------------*/
.solution_wrap{
width: 100% !important;
}
.solution_wrap .solution_list
ul li{
width: calc( (100% - 30px) / 3) !important;
}
.solution_wrap .solution_list.view
ul li + li{
margin-left: 10px !important;
}
.productVeiw{
display: flex;
justify-content: space-between;
min-height: auto !important;
}
.productVeiw .product-img{
float: none !important;
width: 50%;
padding-bottom: 50%;
}
.productVeiw .product-img
img{
width: 100%;
}
.productVeiw .product-info{
float: none !important;
width: calc(50% - 100px) !important;
}
#contentWrap .productComponent02
ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
#contentWrap .productComponent02 .itemWrap{
width: calc(25% - 15px);
margin: 0 0 45px 0;
}
#contentWrap .productComponent02 .itemWrap:not(:nth-child(4n)){
margin-right: 20px;
}
.btnProductDown{
width: 100%;
display: flex;
flex-flow: row-reverse;
}
.btnProductDown > *{
max-width: calc(33.33333333% - 2.5px) !important;
}
.btnProductDown
a,
.btnProductDown span{
display: flex !important;
flex-flow: row-reverse;
align-items: center;
padding: 0 !important;
justify-content: center;
margin: 0 !important;
}
.btnProductDown
a{
margin-left: 5px !important;
}
.btnProductDown
a:after,
.btnProductDown span:after{
position: static !important;
margin: 5px;
display: block;
}
.register_input_item .input_basic .complex{
width: calc(100% - 100px);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #000;
}
.register_input_item .input_basic .complex
input{
width: calc(100% - 100px);
border: 0;
}
.register_input_item .input_basic .complex .btn{
min-width: 80px;
border-radius: 5px;
height: 46px;
line-height: 46px;
padding: 0;
}
.register_input_btn_wrap{
display: flex;
justify-content: space-between;
}
.register_input_btn_wrap .register_input_btn{
width: calc(50% - 4px) !important;
padding: 5px 25px 5px 25px !important;
background-image: none !important;
}
/* .register_input_btn_wrap .register_input_btn{
background: url(../img/comm/bl_left_b.png) no-repeat center right 20px #FEBD17;
padding: 5px 25px 5px 50px !important;
} */
.register_input_help_content
img{
display: block !important}
.infoBottom{
display: flex;
}
.infoBottom
dl{
max-width: calc(100% - 80px);
word-break: keep-all;
}
.searchAllWrap{
display: flex;
align-items: center;
max-width: calc(100vw - 60px);
}
.searchAll .middle.left{
padding: 0;
font-size: 1em;
margin: 0;
max-width: calc(100% - 340px) !important;
}
.searchAllWrap > *:not(:
last-child){
margin-right: 5px !important;
}
.searchAll .searchAllWrap .search_btn{
line-height: normal;
min-width: auto;
padding: 0;
border-radius: 0;
}
.warranty-titie-p,
.warranty-titie-span{
line-height: 1.8;
}
/*sub01*/
#contentWrap .root_daum_roughmap_landing{
width: 100% !important;
}
/*sub02*/
#contentWrap.goods{
margin-top: 200px;
}
#contentWrap .option
form{
display: flex;
align-items: center;
justify-content: space-between;
}
#contentWrap .option_filter{
display: flex;
align-items: center;
min-width: 480px;
justify-content: space-between;
}
#contentWrap .option_filter .select-wrapper{
width: calc(25% - 4px);
margin: 0;
}
#contentWrap .option_filter
div.select{
width: 100%;
}
#contentWrap .option_filter_btn{
display: none;
}
#contentWrap
div.select{
border-radius: 0;
padding: 0;
height: 42px;
}
#contentWrap .product_search{
height: 42px;
width: calc(100% - 485px);
}
#contentWrap .product_search
input{
height: 40px;
}
#contentWrap .product_search .search_btn{
padding: 0;
min-width: auto;
}
#contentWrap .productComponent
ul{
width: 100%;
}
#contentWrap .productComponent.pro-list .itemWrap{
width: calc(33.33333% - 20px);
margin: 45px 0 0 0;
}
#contentWrap .productComponent.pro-list .itemWrap:not(:nth-child(3n)){
margin: 45px 30px 0 0;
}
#contentWrap .productComponent.pro-list .itemWrap
img{
width: 100%;
max-width: 280px;
margin: auto;
}
#contentWrap .productComponent .itemWrap .item-over .tit{
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/*sub04*/
#contentWrap .service_help_content{
left: 0;
right: auto;
}
#contentWrap .service_search{
width: calc(100% - 300px);
}
#contentWrap .service_search
input[type=text]{
width: calc(100% - 150px);
min-width: auto;
font-size: 1em;
}
#contentWrap .agency .service_search
input[type=text]:not(:first-child){
width: calc(100% - 460px);
min-width: auto;
}
#contentWrap .service_search .btn{
width: 130px;
}
#contentWrap .service_search
select{
width: 130px;
height: 56px;
font-size: 1em;
}
#contentWrap .agency .service_search
input[type=text]{
width: calc(100% - 140px);
}
#contentWrap .agency .service_search
input[type=text]:first-child{
margin-left: 0;
}
#contentWrap .agency .service_search
input[type=text]:not(:first-child){
width: calc(100% - 460px);
min-width: auto;
}
#contentWrap .service_search .btn{
width: 130px;
padding: 0;
font-size: 1.1em;
}
#contentWrap .service_list.service
li{
background-position: top 15px right 15px;
}
#contentWrap .service_list
li .title{
width: calc(100% - 30px);
}
#contentWrap .manual .searchAllWrap{
max-width: 650px;
width: 100%;
justify-content: flex-start;
float: none;
}
#contentWrap .manual .tbl{
width: 100%;
}
#contentWrap .manual
table{
width: 100%;
}
#contentWrap .manual
tbody tr:hover{
background:#febd1612;
}
#contentWrap .manual
table .code{
display:flex;
align-items: center;
justify-content: space-between;
}
#contentWrap .manual
table .code_no{
width: calc(100% - 100px);
}
#contentWrap .manual
table .thumbnail_img{
padding: 10px;
width: 100px !important;
}
#contentWrap .manual
table .thumbnail_img img{
width: 100%;
}
#contentWrap .manual
table .title{
position: relative;
padding-right: 120px;
}
#contentWrap .manual
table .title .btnDownload{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
line-height: 30px;
border-radius: 0;
}
#contentWrap.warranty{
margin-top: 200px;
}
#contentWrap.warranty .tab{
display: none;
}
/*member*/
#contentWrap .contents_wrap{
padding: 0;
}
#contentWrap .member_register_type
li > a{
padding: 130px 45px 90px;
background-position: right 55px bottom 50px;
}
#contentWrap .member_register_type
h4{
font-size: 2.2em;
margin: 0;
}
#contentWrap .member_register_type
p{
padding: 10px 0 0;
}
#contentWrap .member_register_inner
h5{
margin: 15px 0 10px;
font-size: 1.2em;
font-weight: 400;
}
#contentWrap .member_register_inner .cover{
flex-flow: column;
align-items: flex-start;
padding-left: 40px;
}
#contentWrap .member_register_inner .btn.large{
height: 59px;
font-size: 1.2em;
font-weight: 500;
}
#contentWrap .member_register_agree .checkbox{
width: fit-content;
}
#contentWrap .member_register_input{
width: calc(100% - 450px);
}
#contentWrap .member_register_agree{
width: 380px;
}
#contentWrap .member_register_agree .agree_txt{
text-align: left;
font-size: 1em;
}
#contentWrap .register_content_control >
button{
top: 50%;
transform: translateY(-50%);
}
#contentWrap .register_content_control >
button.next{
right: 5px;
}
#contentWrap .register_content_control >
button.prve{
left: 5px;
}
#contentWrap .register_content_btn{
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20px 0;
}
#contentWrap .profile_form_box{
padding: 40px 30px 40px 20px;
}
#contentWrap .profile_form_box .txt
li{
font-size: 1em;
align-items: stretch;
}
#contentWrap .profile_form_box .txt
li:before{
margin: 10px;
}
#contentWrap .profile_form_box .radio_wrap
fieldset{
padding: 10px 0;
}
#contentWrap .profile_form_box .radio [
type="radio"]:checked + label,
#contentWrap .profile_form_box .radio [type="radio"]:not(:checked) + label{
font-size: 1.05em;
white-space: nowrap;
font-weight: 500;
padding: 0 10px 0 50px;
}
#contentWrap .profile_form_box .radio [
type="radio"]:checked + label:before,
#contentWrap .profile_form_box .radio [type="radio"]:not(:checked) + label:before,
#contentWrap .profile_form_box .radio [type="radio"]:checked + label:after,
#contentWrap .profile_form_box .radio [type="radio"]:not(:checked) + label:after{
left: 15px;
}
#contentWrap .join{
padding: 50px 30px;
text-align: center;
border: 10px solid #eee;
}
#contentWrap .join_box .title
strong{
font-size: 2em;
display: block;
}
#contentWrap .join_box .title
div{
line-height: 1.5;
font-size: 1.1em;
font-weight: 300;
margin: 20px 0;
}
#contentWrap .join .btn{
font-weight: 500;
font-size: 1.1em;
}
#contentWrap .my_product_item
li .option,
#contentWrap.my_product_transfer_item .option{
height: 50px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.layerPopup{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #00000073;
z-index: 9999999;
}
.layerPopup_wrap{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
width: 500px;
max-width: 80vw;
}
.layerPopup_btn{
background: url(/resources/www/images/common/icon_X_w.svg)no-repeat center right 15px #111;
background-size: 12px;
width: 100%;
border-radius: 0;
text-align: right;
color: #fff;
padding: 0 35px;
}
/*regist*/
.left_file .file_noti{
text-align: left;
font-size: 0.89em;
margin-top: 10px;
word-break: keep-all;
color: #666;
}
.file_list{
margin-top: 20px;
}
.file_list
li{
padding: 5px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.file_list
li button{
border: 0;
font-size: 0;
padding: 0;
min-width: auto;
height: 25px;
width: 25px;
border-radius: 5px;
position: relative;
background: #efefef;
}
.file_list
li button:before, .file_list li button:after {
position: absolute;
left: 50%;
top: 50%;
margin-top: -6px;
margin-left: -1px;
content: ' ';
height: 11px;
width: 2px;
background-color: #828282;
}
.file_list
li button:before {
transform: rotate(45deg);
}
.file_list
li button:after {
transform: rotate(-45deg);
}
#contentWrap .register_tab
li{
width: calc(25% - 7.5px);
font-size: 0.95em;
letter-spacing: -1.4px;
}
#contentWrap .register_tab
li:last-child{
/* width: calc(30% - 7.5px); */}
.register_progress{
position: relative;
width: calc(100% - 25px);
height: 5px;
z-index: 9;
transform: translateY(7px);
}
.register_progress_bar{
position: relative;
height: 100%;
background: #FEBD17 url(/resources/img/sub/product/drill_line.gif) no-repeat;
background-size: 980px;
z-index: 9;
}
.register_progress_bar .txt{
po;
position: absolute;
width: 40px;
height: 24px;
border-radius: 15px;
background: #000000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
right: 0;
top: 50%;
transform: translate(+50%, -150%);
}
.register_progress_bar .txt
small{
font-size: 9px;
margin-left: 1px;
}
.register_progress_bar .txt:
before{
position: absolute;
display: none;
content: "";
width: 30px;
height: 30px;
top: 50%;
left: 50%;
background: transparent;
border-radius: 100%;
opacity: 0.2;
transform: translate(-50%, -50%);
animation-name: bounce;
animation-timing-function: ease-in-out;
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
z-index: 1;
}
.register_progress_noti .img{
position:relative;
margin: -5px;
}
.register_progress_noti .img:
before{
display:block;
position:absolute;
width: 65px;
height: 65px;
border-radius:100%;
background:#FEBD17;
content:"";
transform: translate(-50%, -50%);
opacity: 0.6;
}
.register_progress_noti .img:
after{
display:block;
position:absolute;
width: 75px;
height: 75px;
border-radius:100%;
background:#FEBD17;
content:"";
transform: translate(-50%, -50%);
opacity: 0.6;
animation-duration: 1s;
animation-name: cir-mt;
animation-iteration-count: infinite;
}
@keyframes cir-mt {
from {
width: 65px;
height:65px;
opacity:1;
}
to {
width: 100px;
height:100px;
opacity:0;
}
}
.register_progress_noti .img:
after{}
.register_progress_noti
img{
position: absolute;
display: block;
top: 0;
left: 0;
transform: translate(-50%, -21%);
z-index: 10;
}
.register_progress_noti .step_tip{
opacity: 0;
transform: translateY(10px);
transition: all 0.5s;
position: absolute;
top: 20px;
/* right: 50%; */
height: 50px;
display: flex;
align-items: center;
text-align: center;
border: 2px solid #F4B81F;
padding: 0 15px 0 50px;
border-radius: 100px;
background: #fff url(/resources/img/sub/product/smile.png) no-repeat 10px 50%;
white-space: nowrap;
font-size: 15px;
color: #F4B81F;
font-weight: 500;
}
.register_progress_noti .step_tip.on{
opacity: 1;
transform: translateY(0);
}
.register_progress_noti .tip {
display:flex;
justify-content:center;}
.register_progress_noti .step_tip:
before{
/* position: absolute; */
/* right: 40px; */
/* bottom: -20px; */
/* content: ""; */
width: 0;
height: 0;
/* border-top: 10px solid #F4B81F; */
/* border-bottom: 10px solid transparent; */
/* border-left: 9.5px solid transparent; */
/* border-right: 10px solid transparent; */
}
#contentWrap .register_progress_noti .step_tip:
after{
/* position: absolute; */
/* right: 43px; */
bottom: -14px;
/* content: ""; */
width: 0;
height: 0;
border-top: 7.5px solid #ffffff;
border-bottom: 7.5px solid transparent;
border-left: 7.5px solid transparent;
border-right: 7.5px solid transparent;
}
#contentWrap .register_content_item{
max-width: 800px;
}
#contentWrap .register_content .left_file{
width: 300px;
}
#contentWrap .register_content_item.index
h4{
font-size: 1em;
}
#contentWrap .register_content .file_upload_btn,
#contentWrap .register_content_item .btn.large{
font-size: 1.1em;
}
@keyframes bounce{
0%{
border: 1px solid #FEBD17;
opacity: 0.2;
}
50%{
opacity: 0.2;
}
100%{
border: 12px solid #FEBD17;
opacity: 0;
}
}
@media screen and (max-width:1440px) { /*!-------------------------------------------------------- 1440px*/
#header .wrapper{
max-width: 100%;
}
#header .wrapper h1.logo{
padding-left: 20px;
height: 40px;
display: flex;
align-items: center;
}
#topsearchForm{
margin-right: 20px;
}
#header .dewaltDep01 > li{
/* margin-left: 30px; */
}
}
@media screen and (max-width:1240px) { /*!-------------------------------------------------------- 1240px*/
/*layout------------------------------*/
#header .wrapper h1.logo img{
max-width: 130px;
}
#header .dewaltNav{
left: 160px;
}
#header .dewaltDep01 > li{
margin-left: 25px;
}
#header .dewaltDep02{
left: 190px;
}
#header .dewaltHasIcon{
left: 0;
right: 0;
margin: auto;
}
/*content common----------------------*/
/*sub---------------------------------*/
/*member*/
#contentWrap .member_register_input{
width:100%;
}
#contentWrap .member_register_agree{
width:100%;
}
}
@media screen and (max-width: 1024px) { /*!-------------------------------------------------------- 1024px*/
.register_progress_bar .txt,
.register_progress_noti .img {display:none;}
.register_progress_noti .tip {
display:flex;
justify-content: end;
position: absolute;
top: -13px;
width: 100%;}
/*layout------------------------------*/
#header{
position: fixed !important;
background: #fff;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
height: auto !important;
z-index: 99999;
}
#header.sticky{
top: 0 !important;
}
#header .wrapper{
display: flex;
height: 55px;
top: 0;
align-items: center;
padding: 7px 20px 7px;
}
#header .wrapper h1.logo{
padding-left: 0;
width: calc(100% - 220px);
}
#header .wrapper h1.logo img{
max-height: 24px;
height: 5vw;
}
#header .dewaltNav{
display: none;
}
#header.open .dewaltNav{
display: block;
position: fixed;
top: 50px;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: scroll;
background: #000;
}
#header .dewaltNav ul{
width: fit-content;
height: 45vw;
display: flex;
flex-flow: column;
align-items: center;
padding: 5vh 10px 20px 30px;
margin: 0;
}
#header.open .dewaltNav ul.move{
max-width: 47vw;
margin: 0;
}
#header .dewaltDep01 > li{
height: 60px;
line-height: 60px;
width: 210px;
max-width: 80%;
margin: 0 auto !important;
display: block;
}
#header .dewaltDep01 > li > a{
font-weight: 500;
color: #fff;
padding: 0;
}
#header .dewaltDep01 > li > a:
hover, .dewaltDep01 > li > a.on{
border-bottom: 0 !important;
color: #febd17 !important;
display: flex;
align-items: center;
}
.dewaltDep01 > li > a.on:
after{
display: block;
content: "";
width: 7px;
height: 7px;
border-radius: 100%;
background: #febd17;
margin-left: 10px;
}
#header .dewaltDep02{
display: none;
position: fixed;
width: 55vw;
top: 50px;
bottom: 0;
right: 0;
height: calc(100vh - 70px);
overflow: scroll;
left: auto;
padding: 5vh 0 90px;
z-index: 9;
}
#header .dewaltDep02 > li{
height: 60px;
line-height: 60px;
display: block;
float: none;
text-align: left;
margin: 0 0 0 30px;
}
#header .dewaltDep02_mobile{
display: block;
}
#header .dewaltDep02.dewaltHasIcon li{
margin-left: 20px;
}
#header .dewaltDep02.dewaltHasIcon{
--dewalt-pnav-gap:16px;
--dewalt-pnav-icon-w:48px;
--dewalt-pnav-icon-h:34px;
}
#header .dewaltDep02.dewaltHasIcon li a{
width: auto;
min-width: 0;
min-height: 0;
height: auto;
padding: 0;
line-height: inherit;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: var(--dewalt-pnav-gap);
background: none;
display: flex;
overflow: visible;
white-space: nowrap;
font-size: 1.2em;
}
#header .dewaltDep02.dewaltHasIcon li a .dewalt-pnav-ico{
order: -1;
flex-shrink: 0;
width: var(--dewalt-pnav-icon-w, 48px);
height: var(--dewalt-pnav-icon-h, 34px);
}
#header .dewaltDep02 > li a{
font-size: 1.2em;
color: #fff;
font-weight: 300;
}
#header .dewaltDep02 > li a.on{
color: #febd17;
}
#header.select .dewaltNav ul{
margin: 150px 0 0 0;
}
#header.select .dewaltDep01 > li{
width: 45vw;
max-width: 45vw;
padding: 0 0 0 50px;
}
#header .dewaltMember{
position: absolute;
right: 100px;
}
#header .dewaltMember .login{
background: url(/resources/www/images/common/icon_login.svg) no-repeat center;
}
#header .dewaltMember .join{
background: url(/resources/www/images/common/icon_join.svg) no-repeat 2px center;
}
#header .dewaltMember .logout{
background: url(/resources/www/images/common/icon_logout.svg) no-repeat 2px center;
}
#header .dewaltMember .mypage{
background: url(/resources/www/images/common/icon_mypage.svg) no-repeat center left;
}
#header #topsearchForm{
margin-right: 0;
top: auto !important;
right: 60px !important;
}
#header .dewaltAllSearchOpen{
display: block;
width: 40px;
height: 40px;
padding: 0;
border-radius: 0;
min-width: auto;
border: none;
background: url(/resources/www/images/common/icon_search.svg) no-repeat center;
transition: none;
}
#header.open .dewaltAllSearchOpen{
background: url(/resources/www/images/common/icon_search_w.svg) no-repeat center;
transition: none;
}
#header .dewaltAllSearch{
display: none;
}
#header .open .dewaltAllSearchOpen{
position: fixed;
top: 7px;
background: url(/resources/www/images/common/icon_X_y.svg)no-repeat center #fff;
z-index: 9999999;
}
#header .open .dewaltAllSearch{
display: block;
position: fixed;
left: 0;
right: 0;
top: 0;
height: 56px;
background: #fff;
z-index: 9999;
display: flex;
align-items: center;
padding: 0 100px 0 30px;
border: none;
border-bottom: 1px solid #ddd;
box-shadow: 0 0 50px #00000011;
}
#header .open .dewaltAllip{
width: calc(100vw - 160px);
}
#header .open .dewaltAllSearch .search_btn{
height: 40px;
width: 40px;
top: 8px;
right: 60px;
background: url(/resources/www/images/common/icon_search_y.svg)no-repeat center #FFF;
}
#header .dewaltMenu{
position: absolute;
right: 20px;
display: block;
width: 40px;
height: 40px;
background: url(/resources/www/images/common/icon_menu.svg)no-repeat center;
font-size: 0;
cursor: pointer;
}
#header .dewaltMenu button{
border: 0;
padding: 0;
min-width: 40px;
height: 40px;
font-size: 0;
background: transparent;
}
#header.open{
background: #000;
z-index: 999999;
}
#header.open .dewaltDep01 > li{
width: 100%;
max-width: 100%;
}
#header.open .dewaltDep02:before{
content: "";
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 45vw;
width: 1px;
background: #292929;
}
#header.open .dewaltMenu{
background: url(/resources/www/images/common/icon_X_w.svg)no-repeat center;
}
#header.open .dewaltMember .login{
background: url(/resources/www/images/common/icon_login_w.svg) no-repeat center;
}
#header.open .dewaltMember .join{
background: url(/resources/www/images/common/icon_join_w.svg) no-repeat 2px center;
}
#header.open .dewaltMember .logout{
background: url(/resources/www/images/common/icon_logout_w.svg) no-repeat 2px center;
}
#header.open .dewaltMember .mypage{
background: url(/resources/www/images/common/icon_mypage_w.svg) no-repeat 2px center;
}
#main-wrap, #sub-wrap{
min-width: 100%;
}
#footer .wrapper .footer_static .sns{
margin-top: 20px;
display: none;
}
#footer .wrapper .footer_static{
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
text-align: center;
}
#footer .wrapper .familySite{
margin: 20px auto 0;
}
#footer .wrapper .siteWrap{
display: none;
}
#contentWrap{
margin-top: 50px !important;
}
.mtm_chat_agree_wrap{
background: #111111 !important;
width: calc(100% - 20px) !important;
height: auto !important;
left: 10px;
right: 10px !important;
border-radius: 25px 25px 0 0;
}
.mtm_chat_agree_inner{
width: 100% !important;
padding: 35px 40px 20px !important;
}
.m_chat_popup_ul{
align-items: center;
flex-wrap: wrap;
text-align: left;
}
.mtm_chat_agree_wrap .txt_pou-title{
padding: 0 !important;
color: #FEBD17 !important;
font-size: 1.2em;
max-width: 80vw;
width: 80vw;
text-align: left;
margin-bottom: 5px}
.mtm_chat_agree_wrap .txt_pou-title br{
display: none;
}
.mtm_chat_agree_wrap .ag_txt_group,
.mtm_agree_btn_group{
margin: 0 !important;
}
.mtm_chat_agree_wrap .ag_txt_group > div{
color: #898989;
font-size: 1em;
}
.mtm_chat_agree_wrap .txt_ch3{
padding-bottom: 0;
}
.mtm_chat_agree_wrap .mtm_agree_btn{
height: auto;
}
.mtm_chat_agree_wrap .align_btn_ag{
padding: 0;
height: fit-content;
}
.top_event{
display: none;
}
.event_more_view{
display: none;
}
#contentWrap .img_mobile{
display: block;
}
#contentWrap .img_web{
display: none;
}
/*main -------------------------------*/
#main-wrap #contentWrap .sli_array .inner-fir{
background: none;
}
#main-wrap #contentWrap .sli_array .inner-fir:
before{
content:"";
position: absolute;
top: 80px;
right: 0;
left: 0;
bottom: 80px;
background: rgba( 0, 0, 0, 0.7 );
}
.main_slide .sli_statbtn_wrap{
width: 100% !important;
margin: 0 !important;
left: 30px !important;
}
#main-wrap #contentWrap .sli_wrap .slick-dots{
left: 30px;
margin: 0 !important;
max-width: 80vw !important;
}
#main-wrap #contentWrap .wrapper04 .inBox .item-box li{
width: 33.333% !important;
}
#main-wrap #contentWrap .wrapper05 .inBox .item-box{
margin-top: 20px !important;
flex-wrap: wrap;
}
#main-wrap #contentWrap .wrapper05 .inBox .item-box > li{
width: 50% !important;
}
#main-wrap #contentWrap .wrapper05 .inBox .item-box > li:
first-child{
padding: 20px;
width: 100% !important;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
/*content common----------------------*/
#contentWrap .cont_body{
width: 100%;
padding: 0 30px;
}
#contentWrap.cont_body img{
max-width: 100%;
}
#contentWrap h2.sub-title{
margin-bottom: 30px;
font-size: 2.582em;
}
/*tab*/
#contentWrap .tab li a{
padding: 0 6px;
height: 46px;
font-size: 1em;
}
#contentWrap .tab li.on a{
background: #f9be18;
font-weight: 500;
}
/*sub---------------------------------*/
.item-banner{
display: flex;
width: 100%;
justify-content: space-between;
margin: 60px 0 0 !important;
}
.item-banner a{
width: calc(50% - 10px);
display: block;
}
.item-banner a img{
width: 100%;
}
.history_day dl,
.history_day dd,
.groble_net dl,
.groble_net dd{
width: 100% !important;
border-color: #febd16 !important;
}
.history_day dl:
first-child{
margin: 0 !important;
}
.history_day dt,
.groble_net dt{
width: 100% !important;
padding: 10px 0 !important;
font-size: 1.6em !important;
color: #febd16 !important;
border-color: #FEBD17 !important;
}
.history_day li{
display: flex !important;
padding: 20px 10px !important;
}
.history_day li span.month{
text-align: left !important;
}
.history_day li span.txt{
width: calc(100% - 88px);
word-break:keep-all;
}
.exp_wrap .map_wrap{
margin-top: 40px !important;
padding-top: 40px !important;
}
.map_area{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.exp_wrap .map_wrap .map_area .map,
.root_daum_roughmap .wrap_map{
width: 100% !important;
}
.map_area .img{
margin-top: 20px;
width: 100% !important;
position: relative;
overflow: hidden;
}
.map_area .img img{
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.exp_wrap .map_wrap .add_wrap{
margin-top: 30px !important;
}
.exp_wrap .map_wrap .add_wrap dl dt{
width: 100% !important;
}
.root_daum_roughmap_landing{
width: 100%}
.wr{
height: 0 !important;
padding-bottom: 46% !important;
transform: scale(1.1);
margin-top: 50px;
}
.groble_net li{
display: flex !important;
flex-wrap: wrap;
padding: 15px 10px !important;
}
.groble_net li span{
width: 50% !important;
padding: 3px 0px !important;
white-space: nowrap;
}
.middle.left.search{
margin-right: 0;
}
.productComponent.pro-list,
.productComponent ul{
width: 100% !important;
}
.productComponent .itemWrap{
width: 33.33333% !important;
margin: 40px 0 !important;
padding: 0 20px;
}
.productComponent .itemWrap .item-over{
padding: 20px 15px !important;
}
.productComponent .itemWrap .item-over .tit{
font-size:1.2em !important;
}
.productComponent .itemWrap .item-over .info dt{
min-width: 80px !important;
}
.hr-table02.goods_view th{
width: 30%;
}
.thumnail_list ul li{
width: calc(50% - 10px) !important;
}
.thumnail_list ul li .cate_date{
padding: 0 !important;
}
.thumnail_list ul li .tit{
padding: 0 !important;
font-size: 1.3em !important;
word-break: keep-all}
.thumnail_list ul li .img{
width: 100%;
height: 0;
padding-bottom: 37.5%;
position: relative;
overflow: hidden;
}
.thumnail_list ul li .img img{
width: 100% !important;
height: auto !important;
max-height: 180px;
}
.searchAll{
margin-top: 0 !important;
}
.noticeDetail .top-info,
.noticeDetail .bottom-info ul{
padding: 15px 10px !important;
}
.noticeDetail .bottom-info .veiw{
width: 60px !important;
}
.noticeDetail .middle-dec{
padding: 20px 0 !important;
}
.noticeDetail .bottom-info .tit{
width: calc(100% - 150px);
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.datepicker_wrap{
width: calc(100vw - 60px);
display: flex;
align-items: center;
margin-bottom: 12px;
}
.datepicker_wrap .datepicker{
width: 50%;
}
#contentWrap .datepicker input{
width: calc(100% - 30px) !important;
}
#contentWrap .solution_wrap .solution_visual .desc{
font-size: 1.1em !important;
word-break: keep-all;
}
#contentWrap .solution_wrap .solution_list .list_tit{
word-break: keep-all;
}
#contentWrap .service_map_cover{
width:100% !important;
}
#contentWrap .productComponent02 .itemWrap{
width: calc(33.3333% - 13.333333333333333px);
margin: 0 0 35px 0;
}
#contentWrap .productComponent02 .itemWrap:not(:nth-child(4n)){
margin-right: 0;
}
#contentWrap .productComponent02 .itemWrap:not(:nth-child(3n)){
margin-right: 20px;
}
#contentWrap .productComponent02 .itemWrap:nth-child(n+7){
display: none;
}
/*sub04*/
#contentWrap .centerBox{
display: flex;
flex-wrap: wrap;
padding: 40px 40px 40px 200px;
background-position: 0 20px;
background-color: #febd16;
height: auto;
}
#contentWrap .centerBox .info{
width: 100%;
}
#contentWrap .centerBox .btn_area{
position: static;
width: auto;
height: fit-content;
display: flex;
align-items: center;
margin-top: 20px;
}
#contentWrap .centerBox .btn_area a{
display: block;
position: static;
margin: 0 10px 0 0;
}
#contentWrap .manual .searchAllWrap{
width: 100%;
}
#contentWrap .manual .select-wrapper{
max-width: 40vw !important;
width: 40vw !important;
min-width: 180px !important;
}
#contentWrap .manual table .title{
position: relative;
padding: 10px;
text-align: left;
}
#contentWrap .manual table .title .btnDownload{
position: static;
transform: translateY(0);
margin-top: 10px;
}
#contentWrap.warranty{
margin-top: 0;
}
#contentWrap.warranty .tab{
display: flex;
margin-bottom: 40px;
}
/*member*/
#contentWrap .member_register_type li > a{
padding: 70px 45px 80px;
}
/*registe*/
#contentWrap .register_progress_bar{
display: none;
}
.register_progress_bar.mobile{
display: block;
position: fixed;
top: 57px;
left: 0;
max-width: calc(100% - 25px);
z-index: 999;
height: 4px;
}
#contentWrap .register_progress_noti{
bottom: 20px;
width: 85px;
}
#contentWrap .register_progress_noti .step_tip{
font-size: 12px;
height: 41px;
/* top: -50px; */
}
#contentWrap .register_content_item.index h4{
margin-top: 20px;
}
#contentWrap .register_input_cover.col .file_upload{
width: 100%;
display: block !important;
}
#contentWrap .register_content .file_upload_btn{
background: url(/resources/www/images/common/icon_phone_w.png) no-repeat right 30px center #111;
}
#contentWrap .register_input_cover.col .file_upload img{
display: none;
}
}
@media screen and (max-width:980px) {
/*!-------------------------------------------------------- 980px*/
/*content common----------------------*/
/*tab*/
#contentWrap .tab li:nth-child(1):nth-last-child(9),
#contentWrap .tab li:nth-child(1):nth-last-child(9) ~ li{
width: 20%;
}
/*sub---------------------------------*/
/*sub05*/
#contentWrap .service_top{
margin: 0 0 60px;
}
#contentWrap .service_help{
top: auto;
bottom: -40px;
right: 0;
left: auto;
transform: translateX(0);
}
#contentWrap .service_tab ul{
z-index: 999999;
}
/*member*/
#contentWrap .member_register_inner .cover{
padding: 0;
}
#contentWrap .profile_form .value_wrap .input.col_3{
height: 90px;
}
/*registe*/
#contentWrap .register_tab li{
width: 100% !important;
}
#contentWrap .register_content .left_file{
width: 100%;
}
}
@media screen and (max-width:768px) { /*!-------------------------------------------------------- 768px*/
/*layout------------------------------*/
#footer .wrapper .footer_static .logo img{
max-width: 20vw;
}
/*main--------------------------------*/
#main-wrap .main_slide,
#main-wrap .sli_wrap,
#main-wrap .sli_array{
height: calc(100vh - 140px) !important;
}
#main-wrap #contentWrap .sli_array .inner{
top: 50%;
transform: translateY(-50%);
}
#main-wrap .nl_wrap{
height: 600px;
}
#main-wrap .nl_grid .tit{
font-size: 2.5em;
}
#main-wrap .nl_grid .desc{
font-size: 1.5em;
}
#main-wrap #contentWrap .nl_wrap .inner{
padding: 60px 20px 0px;
}
#main-wrap #contentWrap .sli_array .tit{
font-size: 3em;
line-height: 1.25;
}
#main-wrap #contentWrap .sli_array .desc{
font-size: 1.2em;
margin-top: 20px;
}
#main-wrap #contentWrap input.agchk[type=
"checkbox"] + label{
font-size: 1em;
padding-right: 40px;
word-break: keep-all;
}
#main-wrap #contentWrap input.agchk[type=
"checkbox"] + label br{
display: none;
}
.mtm_agree_btn_group .agree_btxt{
margin: 25px 0 0 0;
}
.searchResult{
font-size: 2.5em !important;
}
#main-wrap #contentWrap .main-best .item-box li{
width: 50% !important;
margin-bottom: 20px;
}
#main-wrap #contentWrap .main-best .item-box li .item{
height: auto !important;
}
#main-wrap #contentWrap .main-best .item-box li .item .thumb{
margin: auto;
display: flex !important;
justify-content: center;
height: fit-content !important;
width: 100% !important;
margin-bottom: 10px;
}
#main-wrap #contentWrap .main-best .item-box li .item .thumb img{
max-width: 30vw;
}
/*content common----------------------*/
#contentWrap .cont_body{
padding: 0 20px;
}
/*tab*/
#contentWrap .tab li a{
height: 40px;
}
#contentWrap .tab.h02 li{
width: 100% !important;
}
/*sub---------------------------------*/
.item-banner{
flex-wrap: wrap;
margin-top: 20px !important;
}
.item-banner a{
width: 100% !important;
}
.item-banner a:
last-child{
margin: 10px 0 0 0 !important;
}
.history_day dt{
padding: 8px 0 !important;
}
.history_day li{
padding: 12px 10px !important;
}
.come-home .top-info .tit,
.come-home .top-info .other{
width: 100%;
max-width: 100% !important;
}
.come-home .top-info .other span:
first-child{
margin: 0 !important;
}
.come-home .middle-dec dt{
width: 100%;
margin-bottom: 5px;
}
.product_search{
width: auto !important;
min-width: 100%;
margin-top: 5px;
}
.productComponent .itemWrap{
width: 50% !important;
}
.solution_wrap .solution_list .list_tit{
font-size: 1.5em !important;
}
.solution_wrap .solution_list ul li{
width: calc(50% - 5px) !important;
margin-left: 10px !important;
margin-top: 10px !important;
}
.solution_wrap .solution_list ul li:nth-child(3n + 1){
margin-left: 10px !important;
}
.solution_wrap .solution_list ul li:nth-child(2n + 1){
margin-left: 0 !important;
}
.solution_wrap .solution_list.view ul li,
.solution_wrap .solution_list.view ul li + li{
margin: 0 !important;
}
.productVeiw{
flex-wrap: wrap;
}
.productVeiw .product-img{
width: 100%;
padding-bottom: 100%;
}
.productVeiw .product-info{
width: 100% !important;
}
.searchAll{
margin-top: 10px;
}
.searchAllWrap{
width: calc(100vw - 40px);
}
.customer-wrap .banner{
margin-bottom: 0 !important;
}
.customer-wrap .cs-service > *{
width: 100% !important;
border-bottom: 1px solid #ddd !important;
height: auto !important;
padding: 30px 0;
}
.customer-wrap .cs-service > *:
after{
display: none;
}
.service-wrap .info .sort-item{
padding: 30px 30px 30px 130px !important;
}
.service-wrap .info .sort-item.bg:
after{
left: 38px !important;
transform: scale(0.8) !important;
}
.pay-warranty .scroll-x table{
min-width: 100% !important;
}
.tb_row table th{
font-size: 0.8em !important;
}
.tb_row table td{
padding: 10px !important;
}
.noticeDetail.news .top-info .tit{
margin-top: 10px;
}
.noticeDetail.mt60{
margin-top: 20px;
}
/*sub02*/
#contentWrap .option form{
flex-wrap: wrap;
}
#contentWrap .option_filter{
width: 100%;
min-width: auto;
flex-wrap: wrap;
}
#contentWrap .product_search{
height: 42px;
}
/*sub04*/
#contentWrap .centerBox{
padding: 100px 40px 40px;
background-size: 1184px;
background-position: -55px -50px;
}
#contentWrap .centerBox .tit{
font-size: 1.5em;
margin-bottom: 5px}
#contentWrap .manual table .code{
flex-flow: column;
padding: 10px;
}
#contentWrap .manual table .code_no{
width: 100%;
}
#contentWrap .icon_e + .input_line.w50{
width: calc(100% - 30px);
}
/*register*/
#contentWrap .register_tab li{
margin: 0;
}
#contentWrap .register_progress_noti .step_tip{
top: auto;
bottom: -55px;
}
#contentWrap .register_progress_noti .step_tip:
before{
transform: rotate(180deg);
bottom: auto;
top: -20px;
}
#contentWrap .register_progress_noti .step_tip:
after{
transform: rotate(180deg);
bottom: auto;
top: -14px;
right: 42px;
}
}
@media screen and (max-width:680px) { /*!-------------------------------------------------------- 680px*/
/*layout------------------------------*/
.cont_body{
padding: 0 20px;
}
/*main -------------------------------*/
#main-wrap #contentWrap .sli_array .tit{
font-size: 2.5em;
line-height: 1.25;
}
#main-wrap #contentWrap .sli_array .desc{
font-size: 1.1em;
margin-top: 20px;
}
#main-wrap #contentWrap .sli_array .tit img{
max-width: 40vw;
min-width: 260px;
}
#main-wrap #contentWrap .nl_wrap .inner .nl_grid{
width: 100%;
}
#main-wrap #contentWrap .wrapper04 .inBox .item-box li{
width: 50% !important;
}
#main-wrap #contentWrap .wrapper05 .inBox .item-box{
flex-wrap: wrap;
}
#main-wrap #contentWrap .wrapper05 .inBox .item-box > li{
width: 100% !important;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
}
#main-wrap #contentWrap .wrapper05 .inBox .item-box li .item{
border: none !important;
}
/*content common----------------------*/
/*tab*/
#contentWrap .tab li:nth-child(1):nth-last-child(5),
#contentWrap .tab li:nth-child(1):nth-last-child(5) ~ li{
width: 33.3333%;
}
#contentWrap .tab li:nth-child(1):nth-last-child(11),
#contentWrap .tab li:nth-child(1):nth-last-child(11) ~ li{
width: 25%;
}
/*select*/
#contentWrap .select-wrapper,
#contentWrap .select-wrapper .select,
#contentWrap .middle.mleft{
width: 100% !important;
min-width: 100% !important;
margin: 2px 0 0;
}
#contentWrap .option_filter .select-wrapper{
margin: 2px 0 0;
}
#contentWrap .page{
justify-content: center;
}
#contentWrap .page li{
margin: 0;
}
#contentWrap .page li a,
#contentWrap .page li span{
width: 25px;
height: 25px;
border: 0;
padding: 0;
gap: 0;
}
#contentWrap .productComponent02 .itemWrap{
width: calc(50% - 10px);
margin: 0 0 20px 0;
}
#contentWrap .productComponent02 .itemWrap:not(:nth-child(3n)){
margin-right: 0;
}
#contentWrap .productComponent02 .itemWrap:not(:nth-child(2n)){
margin-right: 20px;
}
/*sub---------------------------------*/
.map_area .img{
width: 100% !important;
position: relative;
overflow: hidden;
}
.map_area .img img{
position: sticky;
transform: translateY(0);
}
.come-home .top-info .other span{
display: block;
width: 100% !important;
margin: 0 !important;
}
.btnProductDown{
flex-wrap: wrap;
}
.btnProductDown > *{
max-width: 100% !important;
width: 100% !important;
}
.btnProductDown a{
margin: 0 0 5px 0 !important;
}
.thumnail_list ul li{
width: 100% !important;
margin: 0 0 20px 0 !important;
}
.thumnail_list ul li .img img{
width: 100% !important;
height: auto !important;
}
#contentWrap .option_filter{
display: none;
}
#contentWrap .option_filter_btn{
display: block;
width: 100%;
padding: 10px 15px;
background: url(/resources/www/images/common/icon_filter.png) no-repeat center right 10px #fbfbfb;
border: 1px solid #ddd;
cursor: pointer;
color: #666;
}
/*member*/
#contentWrap .member_register_type li > a{
padding: 70px 40px 50px;
height: fit-content;
}
}
@media screen and (max-width:640px) { /*!-------------------------------------------------------- 640px*/
#contentWrap .register_input_cover.col .file_upload{
width: 100%;
margin: 10px 0 0 0;
}
#footer .wrapper .footer_static .infor .addr {
color: #777;}
}
@media screen and (max-width:560px) { /*!-------------------------------------------------------- 560px*/
/*layout------------------------------*/
/*content common----------------------*/
/*sub---------------------------------*/
.groble_net li span{
width: 100% !important;
}
.productComponent .itemWrap{
width: 100% !important;
}
.service-wrap .info .sort-item{
padding: 20px 20px 20px 75px !important;
}
.service-wrap .info .sort-item.bg:
after{
left: 9px !important;
transform: scale(0.6) !important;
}
.service-wrap .info .sort-item dt{
font-size: 1.2em !important;
padding: 0 !important;
}
.service-wrap .info .sort-item dd{
font-size: 1em !important;
line-height: 1.5 !important;
}
.location {
justify-content:center;}
#contentWrap h2.sub-title{
text-align:center; }
}
@media screen and (max-width:480px) { /*!-------------------------------------------------------- 480px*/
/*content common----------------------*/
/*tab*/
#contentWrap .tab li{
width: 50% !important;
}
}';;
;;;;background-size: 20px;;;;;
}
.mypage_title{
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.mypage_title.right{justify-content: flex-end;}
.mypage_title h5{
font-size: 41px;
margin: 0;
line-height: 60px;
letter-spacing: -0.045em;
}
.mypage_title.line{
border-bottom: 2px solid #000;
padding: 0 0 12px;
position: relative;
}
.mypage_title_control{
display: none;
align-items: center;
color: #666;
margin-bottom: 50px;
}
.mypage_title_control.on{
display: flex;
}
.mypage_title_control .btn{
height: 50px;
min-width: 170px;
margin-left: 30px;
}
.mypage_title_control.active span{
color: #DEA40F;
display: flex;
align-items: center;
}
.mypage_title_control.active span:before{
content: "";
display: block;
margin-right: 10px;
width: 36px;
height: 36px;
border-radius: 100%;
background: url(../img/comm/btn_register.png) no-repeat center #FEBD17;
}
.mypage_title_control.active .btn{
padding-left: 80px;
border-width: 2px;
background: url(../img/comm/btn_back.png) no-repeat center left 55px;
}
.profile_form .value_wrap,
.profile_form .input_wrap{
display: flex;
flex-wrap: wrap;
margin-bottom: 60px;
}
.profile_form .input{
width: 33.3333%;
height: 60px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 2px 0;
}
.profile_form .input.col_2{
width: 66.6666%
}
.profile_form .input.col_3{
width: 100%
}
.profile_form .input > label{
width: 126px;
display: flex;
align-items: center;
color: #666;
}
.profile_form .input > input{
width: calc(100% - 126px);
background: #fff;
}
.profile_form .input .file_txt{
font-size: 1.125em;
margin: 0;
}
.profile_form .input .file_upload{
width: 160px;
}
.profile_form .input .file_upload_btn{
top: 5px;
width: 150px;
height: 48px;
padding: 0 20px 0 25px;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
}
.profile_form .value_wrap .input{
/* height: 80px; */
border: none;
border-bottom: 1px solid #B3B3B3;
}
.profile_form .value_wrap .input a{
padding-left:12px;
}
.profile_form .value_wrap .input > label:before{
content: "";
width: 4px;
height: 4px;
margin: 0 10px;
background: #666;
border-radius: 100%;
}
.profile_form .input_wrap .input{
width: calc(33.3333% - 26.666666666666667px);
}
.profile_form .input_wrap .input:not(:nth-child(3n)){
margin-right: 40px;
}
.profile_form .input_wrap .input.col_2{
width: calc(66.666% - 13px);
}
.profile_form .input_wrap .input.col_3{
width: 100%;
}
.profile_form .input_wrap .input > label{
width: 116px;
height: 100%;
padding: 0 10px;
margin-right: 10px;
border-bottom: 1px dashed #999;
}
.profile_form .input_wrap .input > input{
height: 100%;
border-bottom: 1px solid #000;
}
.profile_form .input_wrap .phone{
width: calc(100% - 126px);
height: 60px;
display: flex;
align-items: center;
border-bottom: 1px solid #000;
}
.profile_form .input_wrap .phone select{
width: 80px;
height: 48px;
background: url(../img/comm/bl_form_b.png) no-repeat right 15px center #fff;
}
.profile_form .input_wrap .phone input{
width: calc(100% - 80px);
background: #fff;
padding-left: 0;
}
.profile_form .input_wrap .addr{
width: calc(100% - 126px);
height: 60px;
display: flex;
align-items: center;
border-bottom: 1px solid #000;
}
.profile_form .input_wrap .addr input{
width: calc(100% - 150px);
background: #fff;
}
.profile_form .input_wrap .addr .btn{
width: 150px;
height: 48px;
}
.profile_form .input_wrap .email{
width: calc(100% - 126px);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.profile_form .input_wrap .email input{
width: calc(50% - 114px);
height: 100%;
border-bottom: 1px solid #000;
}
.profile_form .input_wrap .email input:first-child{
width: calc(50% - 80px);
}
.profile_form .input_wrap .email select{
width: 140px;
height: 100%;
background: url(../img/comm/bl_form_b.png) no-repeat right 15px center #fff;
border-bottom: 1px solid #000;
color: #000;
border-radius: 0;
}
.profile_form .input_wrap .full{
width: 100%;
}
.profile_form_box{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 50px 60px;
margin-top: 26px;
border: 10px solid #f2f1ee;
}
.profile_form_box .txt li{
display: flex;
align-items: center;
font-size: 1.125em;
color: #666;
line-height: 165%;
}
.profile_form_box .txt li:before{
content: "";
width: 4px;
height: 4px;
margin: 0 10px;
background: #666;
border-radius: 100%;
}
.profile_form_box .radio_wrap,
.profile_form_box .radio_wrap fieldset{
display: flex;
align-items: center;
}
.profile_form_box .radio{
height: 50px;
margin: 0 5px;
}
.profile_form_box .radio [type="radio"]:checked + label,
.profile_form_box .radio [type="radio"]:not(:checked) + label{
font-size: 1.250em;
border: 2px dashed #000;
height: 50px;
padding: 0 15px 0 60px;
line-height: 50px;
border-radius: 10px;
color: #000;
font-weight: 600;
}
.profile_form_box .radio [type="radio"]:checked + label{
border: 2px solid #000;
}
.profile_form_box .radio [type="radio"]:checked + label:before,
.profile_form_box .radio [type="radio"]:not(:checked) + label:before{
border-radius: 100%;
height: 19px;
width: 19px;
left: 25px;
top: 50%;
transform: translateY(-50%);
border-width: 2px;
}
.profile_form_box .radio [type="radio"]:checked + label:after,
.profile_form_box .radio [type="radio"]:not(:checked) + label:after{
width: 22px;
height: 22px;
top: 50%;
left: 25px;
transform: translateY(-50%);
}
.my_product_item{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.my_product_item.my_product_review {
justify-content:space-between;
}
.my_product_item.my_product_review .review{
padding: 20px 25px;
}
.my_product_item.my_product_review .review .btn_wrap{
margin-top:30px;
}
.line {border:2px solid #000;}
textarea.line {padding:10px; border-radius:5px;}
#myform .flex h3 {display:flex;align-items: center;}
#myform h3 span.tip {font-size: 0.6em;color:#999;margin-left: 15px;font-weight: 400;}
#myform fieldset{
margin-top:20px;
display: inline-block; /* 하위 별점 이미지들이 있는 영역만 자리를 차지함.*/
border: 0; /* 필드셋 테두리 제거 */
}
#myform input[type=radio]{
display: none; /* 라디오박스 감춤 */
}
#myform label{
font-size: 2.8em; /* 이모지 크기 */
color: transparent; /* 기존 이모지 컬러 제거 */
text-shadow: 0 0 0 #f0f0f0; /* 새 이모지 색상 부여 */
}
#myform label:hover{
text-shadow: 0 0 0 #FEBD17; transition: .3s;
}
#myform label:hover ~ label{
text-shadow: 0 0 0 #FEBD17; transition: .3s;
}
#myform fieldset{
display: inline-block; /* 하위 별점 이미지들이 있는 영역만 자리를 차지함.*/
direction: rtl; /* 이모지 순서 반전 */
border: 0; /* 필드셋 테두리 제거 */
}
#myform fieldset legend{
text-align: left;
}
#myform input[type=radio]:checked ~ label{
text-shadow: 0 0 0 #FEBD17; /* 마우스 클릭 체크 */
}
#myform input[type=file] {margin-top:20px;}
.flex_img {display:flex; gap:0.5%}
.flex_img li {max-width:24.5%;position:relative;border-radius: 3px;overflow: hidden;border: 1px solid #eee;}
.flex_img li img {width:100%;}
.flex_img .close {position:absolute;background: #333 url(../img/comm/bl_delete_w.png) no-repeat 50%;width:24px;height:24px;border-radius: 24px;right: 5px;top: 5px;cursor:pointer}
.login_ch {border:5px solid #FEBD17; padding:20px; text-align:center;}
.login_ch h3,
.login_ch h6 {margin:20px;}
.product_review .my_product_transfer_info .cover > div:not(:last-child) {margin:20px 0;}
.product_review .my_product_transfer_item {border:none;}
.product_review .my_product_transfer_info .find_user {margin:0;}
.review_register {margin-top: 40px; text-align: center;}
.review_register img {display: inline-block;}
.my_product_item li{
position: relative;
width: 100%;
border: 2px solid #000;
padding: 14px 12px;
margin-top: 10px;
border-radius: 4px;
}
.my_product_item li:not(:nth-child(3n)){
/* margin-right: 20px; */
}
.my_product_item li.none{
border-style: dashed;
}
.my_product_item li.none .img img{
opacity: 40%;
}
.my_product_item li .img{
width: 130px;
height: 130px;
padding: 15px;
overflow: hidden;
margin-top: 0;
top: 0;
}
.my_product_transfer_item .img {
width: 270px;
max-width: 100%;
padding: 10px;
/* border: 5px solid #ddd; */
}
.my_product_item li .img {
position: absolute;
}
.my_product_transfer_item .img img{
width: 100%;
}
.my_product_item li:hover .img img{
width: 105%;
transition: width 0.3s ease-out;
}
.my_product_transfer_item .title{font-size: 1.375em;font-weight: 600;padding-bottom: 10px;text-align: center;background: #eee;padding-top: 10px;border-radius: 50px;margin-bottom: 11px;}
.my_product_item li .title{
font-size: 1.375em;
font-weight: 600;
/* margin: 5px; */
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 150px;
}
.my_product_item li .option,
.my_product_transfer_item .option{
color: #666;
line-height: 160%;
/* margin: 5px 5px 10px 5px; */
}
.my_product_item li dt,
.my_product_transfer_item dt{
display: flex;
align-items: center;
color: #161718;
line-height: 170%;
}
.my_product_item li dt:before,
.my_product_transfer_item dt:before{
content: "";
width: 4px;
height: 4px;
margin: 0 10px;
background: #161718;
border-radius: 100%;
}
.my_product_item li .option {
height: auto !important;
margin-left: 150px;
}
.my_product_item li dl{
margin-left: 146px;
}
.my_product_item .btn_wrap{
display: flex;
align-items: center;
/* justify-content: left; */
flex-wrap: wrap;
margin-top: 15px;
margin-left: 150px;
gap: 3px;
}
.my_product_item .btn_wrap .btn{
max-width: 150px;
min-width: 90px;
height: 40px !important;
font-size: 0.97em;
padding: 0 7px;
border-radius: 5px;
letter-spacing: -0.9px;
}
.my_product_item .btn_wrap .btn.no_link{
opacity: 0.15; cursor: default;
}
.my_product_item .btn_wrap .btn.full{
/* width: 100%; */
height: 100%;
opacity: 1;
overflow: hidden;
/* text-align: left; */
/* padding: 0 15px; */
/* background: url(../img/comm/btn_register.png) no-repeat center right 15px #FEBD17; */
transition: height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.1s ease-out;
}
.my_product_item.on .btn_wrap .btn.full{
height: 40px;
/* margin-top: 10px; */
opacity: 1;
transition: height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.1s ease-out;
}
.my_product_item .badge{
position: absolute;
top: 5px;
right: 5px;
width: 90px;
height: 90px;
display: flex;
flex-flow: column;
align-items: center;
text-align: center;
justify-content: center;
border-radius: 100%;
background: #FEBD17;
color: #252628;
font-weight: 600;
line-height: 110%;
filter: drop-shadow(2px 6px 0px rgba(0, 0, 0, 0.20));
transform: scale(0.8);
}
.my_product_item .badge.black{
background: #252628;
color: #fff;
}
.my_product_item .badge img{
margin-bottom: 5px;
}
.my_product_transfer{
border: 10px solid #F2F1EE;
padding: 20px 30px 65px;
margin-top: 40px;
}
.my_product_transfer_cover{
max-width: 1170px;
margin: auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.my_product_transfer_item{
width: 340px;
border: 2px solid #000;
padding: 20px;
border-radius: 4px;
max-width: 100%;
}
.my_product_transfer_info{
width: calc(100% - 380px);
max-width: 700px;
}
.my_product_transfer_info .cover{
min-height: 400px;
display: flex;
flex-flow: column;
justify-content: center;
}
.my_product_transfer_info .cover > div:not(:last-child){
margin: 20px 0 50px;
}
.my_product_transfer_info h4{
font-size: 1.313em;
}
.my_product_transfer_info p{
font-size: 1.125em;
color: #666666;
margin-top: 12px;
}
.my_product_transfer_info .find_user{
display: flex;
align-items: center;
justify-content: start;
margin: 20px 0 40px;
}
.my_product_transfer_info .find_user input{
max-width: 380px;
width: calc(100% - 115px);
height: 54px;
border-radius: 10px;
border: 2px solid #161718;
margin-right: 5px;
}
.my_product_transfer_info .find_user button{
width: 110px;
height: 54px;
}
.my_product_transfer_info .info_user div{
display: flex;
align-items: center;
position: relative;
width: fit-content;
font-size: 1.313em;
font-weight: 500;
}
.my_product_transfer_info .info_user div::before{
position: absolute;
content: "";
left: -5px;
right: -5px;
bottom: -2px;
height: 10px;
opacity: 0.2;
background: #FEBD17;
}
.my_product_transfer_info .info_user div span:first-child{
display: flex;
align-items: center;
}
.my_product_transfer_info .info_user div span:first-child:after{
content: "";
display: block;
width: 2px;
height: 20px;
background: #252628;
margin: 0 20px;
}
.my_product_transfer_info .info_user p{
font-size: 1.250em;
margin-top: 15px;
}
.my_product_transfer_info .transfer_btn{
display: flex;
align-items: center;
justify-content: center;
padding-top: 50px;
border-top: 2px solid #000;
}
.my_product_transfer_info .transfer_btn .btn{
min-width: 210px;
text-align: left;
font-weight: 500;
background: url(../img/comm/bl_check_b.png) no-repeat center right 20px #FEBD17;
}
.my_product_transfer_info.complete{
display: none;
text-align: center;
}
.my_product_transfer_info.complete .info_user div{
margin: auto;
}
/* member */
.sub_visual_bg.member{
background: url("../img/sub/member/visual.jpg") no-repeat center;
}
.member_login{
max-width: 480px;
width: 100%;
margin: auto;
}
.member_login .input_line input{
height: 45px;
border: none;
}
.member_login .input{
margin: 30px 0 10px;
border: none;
}
.input_check{
display: flex;
justify-content: flex-end;
margin: 20px 0;
}
.input_check .checkbox{
min-width: fit-content;
}
.input_check .checkbox label{
font-size: 0.9em;
padding-left: 35px !important;
}
.input_check .checkbox [type="checkbox"]:checked + label:before,
.input_check .checkbox [type="checkbox"]:not(:checked) + label:before{
top: 10px;
left: 10px;
border-color: #555;
}
.input_check .checkbox [type="checkbox"]:checked + label:after,
.input_check .checkbox [type="checkbox"]:not(:checked) + label:after{
top: 12px;
left: 16px;
border-color: #fff;
}
.member_login_option{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
}
.member_login_option a{
font-size: 1.1em;
padding-left: 25px;
font-weight: 500;
background: url(/resources/www/images/common/icon_join.svg) no-repeat -7px center;
background-size: 40px;
}
.member_login_option .util a{
margin-right: 10px;
background: url("../img/sub/member/icon_check.png") no-repeat center left;
background-size: 20px;
}
.member_input_sns{
margin-top: 100px;
}
.member_input_sns h5{
position: relative;
margin-bottom: 20px;
}
.member_input_sns h5:before{
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
height: 6px;
border-top: 1px dashed #CDCDCD;
}
.member_input_sns span{
background: #fff;
padding-right: 15px;
z-index: 1;
position: inherit;
}
.member_input_sns p{
text-align: center;
color: #666;
margin-top: 30px;
}
.member_input_sns .naver{
margin-bottom: 10px;
}
.member_register_type{
position: relative;
display: flex;
justify-content: space-between;
margin-top: 50px;
flex-wrap: wrap;
}
.member_register_type:after{
content: "";
width: 130px;
height: 400px;
position: absolute;
left: -210px;
top: 20px;
background: url("../img/sub/member/bg_register.png") no-repeat center left;
}
.member_register_type::before{
content: "";
width: 120%;
height: 100%;
background: #f2f2f2;
position: absolute;
top: 45px;
left: 70px;
z-index: -1;
}
.member_register_type li{
position: relative;
width: calc(33.333% - 16.6666px);
display: flex;
flex-flow: column;
justify-content: center;
height: 360px;
/*padding: 80px;*/
border-radius: 10px;
transform: translateY(100px);
opacity: 0;
transition: transform 0.65s ease-out, opacity 0.65s ease-out;
}
.member_register_type li:not(last-child) a:hover{
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.10);
}
.active .member_register_type li{
transform: translateY(0);
opacity: 1;
}
.member_register_type li:nth-child(1){
transition-delay: .4s;
z-index: 10;
}
.member_register_type li:nth-child(2){
transition-delay: .8s;
}
.member_register_type li:nth-child(3){
transition-delay: 1.2s;
}
.member_register_type li > a{
width: 100%;
height: 100%;
padding: 80px;
border-radius: 10px;
}
.member_register_type li.on > a{
border-radius: 10px 0 0 10px;
cursor: initial !important;
}
.member_register_type li.individual > a{
cursor: pointer;
background: url(../img/sub/member/img_register_type01.png) no-repeat right 80px bottom 60px #FEBD17;
}
.member_register_type li.business > a{
cursor: pointer;
background: url(../img/sub/member/img_register_type02.png) no-repeat right 80px bottom 60px #FEBD17;
}
.member_register_type li.img{
background: url(../img/sub/member/img_register_type.png) no-repeat center !important;
}
.member_register_type h4{
font-size: 2.875em;
}
.member_register_type p{
padding: 15px 0;
}
.member_register_inner{
overflow: hidden;
position: absolute;
width: 0%;
height: 100%;
z-index: 1;
left: 100%;
color: #fff;
background: #000;
transition: width 0.5s ease-out;
border-radius: 0 10px 10px 0;
}
.on .member_register_inner{
width: calc(200% + 50px);
transition: width 0.5s ease-out;
}
.member_register_inner > *{
opacity: 0;
height: 100%;
padding: 0 30px;
}
.member_register_inner .cover{
display: none;
}
.member_register_inner .sns{
opacity: 0;
}
.member_register_inner .sns.on{
opacity: 1;
transition: opacity 0.5s ease-out;
transition-delay: 1s;
}
.on .member_register_inner > *{
opacity: 1;
transition: opacity 0.5s ease-out;
transition-delay: 0.6s;
}
.on .member_register_inner:before{
content: "";
position: absolute;
left: 0;
top: 33%;
height: 0px;
border-left: 15px solid #FEBD17;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.member_register_inner h5{
font-size: 2.063em;
font-weight: 600;
margin: 10px 0 45px;
}
.member_register_inner a{
background: #fff;
color: #000;
font-weight: 600;
}
.member_register_inner a img{
max-width: 40px;
max-height: 40px;
}
.member_register_inner .cover{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.member_register_inner .sns_cover{
display: flex;
}
.member_register_inner button{
width: 236px;
font-weight: 500;
cursor: pointer;
font-weight: 600;
}
.member_register_inner .naver{
margin-right: 10px;
}
.member_register_inner .close{
position: absolute;
top: 38px;
right: 38px;
width:50px;
height: 50px;
font-size: 0;
cursor: pointer;
z-index: 9999;
}
.member_register_inner .close:before,
.member_register_inner .close:after{
position: absolute;
left: 15px;
content:' ';
height: 47px;
width: 1px;
background-color: #fff;
}
.member_register_inner .close:before {
transform: rotate(45deg);
}
.member_register_inner .close:after {
transform: rotate(-45deg);
}
.member_register_form{
display: flex;
justify-content: space-between;
}
.member_register_form .title{
font-size: 1.938em;
margin: 0;
}
.member_register_form .title:not(:first-child){
margin-top: 30px;
}
.member_register_input{
width: calc(100% - 600px);
}
.member_register_input .input_wrap{
margin-top: 50px;
}
.member_register_agree{
width: 460px;
}
.member_register_agree_top{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
}
.member_register_input .btn{
font-size: 1.05em;
letter-spacing: -.7px;
padding: 0 5px;
}
.member_register_input .select{
font-size: 1.05em;
padding: 0 15px;
}
.member_register_agree .agree_txt{
width: 100%;
height: 300px;
overflow: auto;
border: 6px solid #000;
padding: 20px 30px;
margin: 10px 0 30px;
font-size: 1.125em;
color: #666;
}
.member_register_agree .agree_txt.short{
height: 280px;
}
.member_btn_bottom{
display: flex;
justify-content: center;
border-top: 3px solid #000;
padding-top: 50px;
margin-top: 70px;
}
.member_btn_bottom .btn{
font-size: 1.250em;
height: 60px;
margin: 0 5px;
font-weight: 600;
border-width: 2px;
}
.member_btn_bottom .ghost{
min-width: 140px;
}
/*modal*/
.modal{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.modal_wrap{
max-width: 80vw;
width: fit-content;
padding: 60px 50px 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
border: 5px solid #FEBD17;
background: #FFF;
box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.20);
}
.modal_header{text-align: center;font-weight: 700;line-height: 130%; /* 36.4px */letter-spacing: -1.4px;font-size: 1.75em;}
.modal_header_close{
font-size: 0;
width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
margin: 4px;
border-radius: 100%;
border: none;
background-size: 12px !important;
position: absolute;
top: 20px;
right: 20px;
background: url(../img/comm/bl_delete_w.png) no-repeat center #FEBD17;
}
.modal_wrap .member_login{
width: 480px;
max-width: 100%;
}
.my_product_item.stemp_mall li .img {/* background: #f1f1f1; */width: 280px;max-width:100%;height: 280px;max-height: 50vw;padding: 15px;text-align:center}
.my_product {min-height:600px;}
.my_product_item.stemp_mall li .img {position:static;}
.my_product_item.stemp_mall {justify-content:space-between}
.my_product_item.stemp_mall li{width: calc(33.3333% - 16px);height: 426px;}
.my_product_item.stemp_mall li .title,
.my_product_item.stemp_mall li .option.stemp_su,
.my_product_item.stemp_mall li .btn_wrap{margin-left:0;}
/* Responsive
-------------------------------------------------------------------- */
@media (max-width: 1400px) {
/* header & footer ----------------------------------------------- */
.header_util li{
background-position: center;
height: 25px;
}
.header_util li a{
font-size: 0;
}
.header_util_fullGnb_btn{
width: 25px;
height: 25px;
}
}
@media (max-width: 1240px) {
/* header & footer ----------------------------------------------- */
#header{
/* padding: 20px 30px; */
}
.header_gnb{
max-width: fit-content;
}
.header_gnb li{
margin: 0 1.2rem;
}
.header_gnb li a{
font-size: 1.1em;
white-space: nowrap;
}
/* sub ----------------------------------------------------------- */
.contents_wrap{
padding: 30px 30px 100px;
}
/*mypage*/
.profile_form .input,
.profile_form .input.col_2{
width: 100% !important;
}
.profile_form .value_wrap .input{
height: 50px;
margin: 5px 0 0 0;
}
.profile_form .input_wrap .input:not(:nth-child(3n)){
margin: 5px 0 0 0;
}
.profile_form .input .file_upload_btn{
height: 40px;
font-size: 1em;
font-weight: 400;
width: 120px;
padding: 0 15px 0 17px;
}
.profile_form .input_wrap .addr input{
width: calc(100% - 120px);
}
.profile_form .input_wrap .addr .btn{
width: 120px;
height: 40px;
}
.profile_form .input_wrap .input:not(:nth-child(3n)){
margin: 0px 0;
}
.profile_form_box{
flex-flow: column;
align-items: flex-start;
padding: 10px 5px 0 !important;
border: 5px solid #f2f1ee;
margin-top: 10px;
}
.profile_form_box .txt li{
font-size: 1em;
}
.profile_form_box .radio [type="radio"]:checked + label,
.profile_form_box .radio [type="radio"]:not(:checked) + label{
font-size: 1em;
padding: 0 10px 0 37px !important;
height: 40px;
line-height: 36px;
border-width: thin;
}
.profile_form_box .radio [type="radio"]:checked + label:after,
.profile_form_box .radio [type="radio"]:not(:checked) + label:after{
width: 14px;
height: 14px;
left: 20px;
top: 40%;
}
.radio [type="radio"]:checked + label:before,
.radio [type="radio"]:not(:checked) + label:before{
width: 14px !important;
height: 14px !important;
left: 13px !important;
top: 40% !important;
}
.profile_form_box .radio{
margin: 5px 5px 0 0;
}
.my_product_item li{
/* width: calc(33.3333% - 16px); */
}
.my_product_item li:not(:nth-child(4n)){
margin-right: 0;
}
.my_product_item li:not(:nth-child(3n)){
/* margin-right: 24px; */
}
.my_product_item.stemp_mall li .title {margin-left:0;}
.my_product_transfer{
padding: 60px 20px;
}
.my_product_transfer_info .cover{
min-height: auto;
}
.my_product_transfer_info .cover > div:not(:last-child){
margin: 0 0 40px;
}
.my_product_transfer_info h4{
font-size: 1.2em;
}
.my_product_transfer_info p{
font-size: 1em;
}
/*member*/
.member_register_type li{
width: calc(50% - 20px);
height: auto;
}
.member_register_type li > a{
padding: 110px 60px;
display: flex;
flex-flow: column;
justify-content: center;
}
.member_register_type li.img{
display: none;
}
.member_register_type h4{
font-size: 2.3em;
}
.member_register_type li{
transition: width 0.5s ease-out;
}
.member_register_type li.on{
width: 33.33333%;
transition: width 0.5s ease-out;
}
.on .member_register_inner{
width: calc(190% + 40px);
}
.member_register_inner .cover{
flex-flow: column;
align-items: flex-start;
padding-left: 40px;
}
.member_register_inner h5{
margin: 20px 0 15px;
font-size: 1.5em;
font-weight: 600;
}
.member_register_form{
display: block;
}
.member_register_input{
width: 100%;
}
.member_register_agree{
width: 100%;
margin-top: 100px;
}
/**/
.product_item li{
width: calc(33.333% - 7px);
}
.product_item li:not(:nth-child(4n)){
margin-right: 0;
}
.product_item li:not(:nth-child(3n)){
margin-right: 10px;
}
.register_tab{
margin-top: 10px;
}
.service_list.service li,
.service_list.agency li{
width: calc(33.333% - 7px);
}
.service_list.service li:not(:nth-child(4n)),
.service_list.agency li:not(:nth-child(4n)){
margin-right: 0;
}
.service_list.service li:not(:nth-child(3n)),
.service_list.agency li:not(:nth-child(3n)){
margin-right: 10px;
}
.community_top_search input[type=text]{
width: 30vw;
min-width: 350px;
}
}
@media (max-width: 1024px) {
#stamp_list_bt {right: 30px !important;}
}
@media (min-width: 981px) {
.mobile{
display: none;
}
.service_tab ul{
display: flex !important;
}
}
@media (max-width: 980px) {
.mobile{
display: block;
}
.input_line.col_2{
flex-wrap: wrap;
}
.input_line.col_2 > *{
width: 100%;
}
.file_txt{
margin: 12px 0;
color: #b8b8b8;
font-size: 1.15em;
}
/* header & footer ----------------------------------------------- */
#header{
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.header_logo{
/* display: none; */
}
.header_title{
/* display: block; */
}
.header_gnb{
display: none;
}
.footer_link{
padding: 10px 30px;
}
.footer_info{
flex-flow: column;
padding: 20px 30px 40px;
font-size: 1em;
}
.footer_info_inner{
flex-flow: column;
}
.footer_info_inner div{
margin: 20px 0 0;
}
.footer_info_logo{
opacity: 0.3;
text-align: center;
margin: 30px auto 0;
}
.footer_info_logo img{
width: 110px;
}
/* sub ----------------------------------------------------------- */
.sub_visual,
.sub_visual.tab{
padding: 0;
height: auto;
}
.sub_visual_bg,
.sub_visual_title,
.sub_visual_txt,
.sub_visual_btn{
display: none;
}
.sub_visual_tab{
position: initial;
padding: 0;
}
.sub_visual_tab ul li a{
background: #161718;
height: 50px;
font-size: 1em;
}
.sub_visual_tab ul li:first-child a,
.sub_visual_tab ul li:last-child a{
border-radius: 0;
}
.contents_title_mobile{
display: block;
}
/*service*/
.service_tab_select{
display: block;
width: 100%;
height: 46px;
display: flex;
align-items: center;
padding: 0 20px;
background: url(../img/comm/bl_form_w.png) no-repeat right 15px center #000;
color: #fff;
border-radius: 7.5px;
}
.service_tab ul{
display: none;
position: absolute;
left: 0;
right: 0;
top: 50px;
background: #ffffff;
z-index: 1;
border-radius: 10px;
padding: 4px;
box-shadow: 0px 13px 10px 0px rgba(0, 0, 0, 0.10);
}
.service_tab li{
padding: 10px 0 10px 18px;
width: 100%;
font-size: 1em;
font-weight: 400;
justify-content: flex-start;
border: 0;
}
.service_tab li.active{
background: #4b4b4b;
}
.service_tab li.active:after{
display: none;
}
/*member*/
.contents_title_s{
display: none;
}
.member_register_type li{
width: 100%;
border-radius: 15px;
}
.member_register_type li > a{
width: 100%;
height: 170px;
margin-bottom: 10px;
background-size: 50px !important;
background-position: top 40px right 40px !important;
}
.member_register_type li.on{
width: 100%;
}
.member_register_type li > a{
border-radius: 15px !important;
}
.member_register_inner{
transition: width 0s ease-out;
}
.on .member_register_inner{
position: initial;
width: 100%;
border-radius: 15px;
margin-bottom: 10px;
transition: width 0s ease-out;
}
.on .member_register_inner:before{
display: none;
}
.on .member_register_inner > *{
position: relative;
margin: 0;
padding: 30px;
transition-delay: 0.3s;
}
.on .member_register_inner > * > *{
width: 100%;
}
.member_register_inner .sns.on{
transition-delay: 0.6s;
}
.member_register_inner .close{
width: 50px;
right: 20px;
top: 20px;
}
.member_register_inner .cover{
flex-wrap: wrap;
padding: 0;
}
.member_register_inner .cover div{
width: 100%;
flex-wrap: wrap;
}
.member_register_inner a,
.member_register_inner button{
width: 100%;
margin: 0 0 10px 0 !important;
}
.member_register_agree_top{
position: relative;
}
.member_register_form .title{
font-size: 1.25em;
font-weight: 500;
padding: 15px 0;
margin-top: 20px;
border-bottom: 1px dashed #ccc;
border-top: 2px solid #121212;
width: 100%;
}
.member_register_agree_top .checkbox{
position: absolute;
right: 0;
top: 35px;
}
.member_register_input .input_wrap{
margin-top: 20px;
}
.member_btn_bottom{
margin-top: 40px;
padding-top: 20px;
}
/*mypage*/
.mypage_title h5{
display: none;
}
.mypage_index_icon{
margin-top: 10vw;
}
.mypage_index_input{
flex-flow: column;
margin-top: 5vw;
}
.mypage_index_input .input,
.mypage_index_input .btn{
width: 100%;
margin: 5px 0;
height: 50px;
font-size: 1.07em;
}
.mypage_title_control.on{
border-top: 2px solid #000000;
width: 100%;
margin-top: 20px;
padding-top: 15px;
justify-content: space-between;
margin-bottom: 0px;
}
.mypage_title_control .btn,
.mypage_title.line .btn{
border-radius: 10px;
border: 1px solid #161718;
background: none;
color: #161718;
padding: 5px 20px;
width: auto;
min-width: auto;
height: auto;
line-height: normal;
font-size: 1em;
margin-left: 15px;
}
.mypage_title.line .btn{
position: absolute;
top: -40px;
right: 0;
}
.mypage_title_control.active .btn{
padding-left: 40px;
background-position: left 17px center;
background-size: 15px;
}
.my_product_item {
justify-content: space-between;
}
.my_product_item li{
/* width: calc(50% - 12px); */
/* margin-top: 60px; */
}
.my_product_item li:not(:nth-child(3n)){
margin-right: 0;
}
.my_product_transfer_cover{
flex-flow: column;
justify-content: center;
align-items: center;
}
.my_product_transfer_info .cover > div:not(:last-child){
margin: 0 0 60px 0;
}
.my_product_transfer_info{
margin-top: 60px;
text-align: center;
min-width: auto;
width: 100%;
}
.my_product_transfer_info .find_user{
justify-content: center;
}
.my_product_transfer_info .info_user div{
margin: auto;
}
.my_product_transfer_info .transfer_btn{
padding-top: 20px;
}
.my_product_transfer_info .transfer_btn .btn{
width: 100%;
}
.profile_form .input > label,
.profile_form .input_wrap .input > label{
width: 100px;
font-size: 0.98em;
padding: 0;
}
.profile_form .value_wrap .input > label:before{
margin: 0 6px;
}
.profile_form .input > input{
width: calc(100% - 110px);
}
/**/
.community_item .item{
display: flex;
}
.community_item .item_cover{
flex-wrap: wrap;
display: flex;
align-items: center;
padding: 0 10px 17px 10px;
justify-content: end;
}
.community_item .item_cover > div{
height: auto;
line-height: normal;
font-weight: 300;
font-size: 1em;
width: auto !important;
margin: 0 6px;
background-size: 17px !important;
background-position: left 7px center !important;
}
.community_item .item_cover > div.item_title{
width: calc(100% - 50px) !important;
height: 60px;
line-height: 60px;
}
.community_item.detail{
margin-top: 10px;
}
.community_item .item_content_text{
padding: 20px 0;
}
.community_item .item_content_commen li{
padding: 20px 10px;
}
.community_item .item_content_commen_icon{
width: 40px;
height: 40px;
}
.community_item .item_content_commen_txt{
margin-left: 20px;
}
/**/
.product_item li{
width: 50%;
}
.product_item li:not(:nth-child(3n)){
margin-right: 0;
}
/**/
.register_tab{
margin: 0;
}
.register_tab li{
display: none;
}
.register_tab li.active{
background: none;
width: 100%;
border: 1px dashed rgba(0, 0, 0, 0.20);
justify-content: center;
display: flex;
margin-top: 26px;
}
.register_tab li.active:after{
display: none;
}
.register_tab li span{
color: #FEBD17;
}
.register_content{
margin-top: 20px;
border: 0;
padding: 0;
border: none;
}
.register_content .file_upload{
width: 100%;
margin-bottom: 8px;
font-size: 1em;
}
.register_content .file_upload:not(.mobile){
display: none;
}
.register_content > div.active{
margin: 60px auto 0;
}
.register_input_cover.col{
flex-flow: column-reverse;
gap: 3vw;
flex-direction: column;
}
.register_content #step2 .left_file_img {
height: 40vw;
}
.register_content_control{
display: none;
}
.register_content .left_file,
.register_content .register_input,
.register_content .register_input_item{
width: 100%;
}
.register_content .register_input {
margin-top: 5vw;
padding-top: 5vw;
border-top: 1vw solid #eee;
}
.register_content .register_input_btn {
width:100%;
}
.register_content_item.index .btn_wrap{
flex-wrap: wrap;
}
.register_input_btn_wrap{
display: flex;
justify-content: space-between;
}
.register_input_btn_wrap .file_upload{
width: calc(50% - 4px);
margin-bottom: 20px;
}
.register_content_item.index .btn_wrap .btn{
width: 100%;
margin-bottom: 10px;
}
.register_content .register_input_title::before{
display: none;
}
.register_input_item.confirm{
flex-wrap: wrap;
}
.register_input_item.confirm .input_basic{
width: 100%;
}
.contents_title_mobile.service{
padding-bottom: 100px;
}
.online_store_toggle{
margin-left: auto;
}
.service_toggle{
max-width: 350px;
}
.service_toggle_switch label{
font-size: 1.25em;
}
.service_toggle_switch span{
left: calc(50% - -10px);
}
.service_top{
position: relative;
margin-top: 0;
}
.service_help{
position: absolute;
top: -130px;
left: 50%;
transform: translateX(-50%);
}
.service_search{
display: none;
}
.service_list.service ul,
.service_list.agency ul{
justify-content: space-between;
}
.service_list.service li,
.service_list.agency li{
width: calc(50% - 10px);
}
.service_list.service li:not(:nth-child(3n)),
.service_list.agency li:not(:nth-child(3n)){
margin-right: 0;
}
.community_top{
flex-flow: column-reverse;
}
.community_top_total{
width: 100%;
text-align: left;
margin-top: 30px;
}
.community_top_search{
width: 100%;
margin-top: 20px;
justify-content: space-between;
}
.community_top_search input[type=text]{
width: 100%;
height: 50px;
}
.community_top_search select,
.community_top_search .btn{
height: 50px;
}
.community_item{
margin-top: 20px;
}
.community_item_btn{
flex-flow: column-reverse;
align-items: normal;
}
.community_item_btn_login{
margin-bottom: 20px;
}
.community_write{
margin-top: 30px;
}
.community_write_addition .file_txt{
margin: 0;
}
#stamp_list_bt { right:0 !important; }
/* .my_product_item.stemp_mall li .img {height:27vw;}*/
}
@media (max-width: 768px) {
/* header & footer ----------------------------------------------- */
.footer_link{
flex-flow: column;
border: none;
padding: 0;
}
#footer { text-align: center;}
.footer_link_navigation{
justify-content: center;
width: 100%;
padding: 20px 30px;
border-bottom: 1px solid #595959;
margin-bottom: 30px;
}
.footer_link_navigation li:last-child{
display: none;
}
.footer_link_navigation li:not(:first-child):before{
margin: 0 15px;
}
.footer_info{
border: none;
}
/* sub ----------------------------------------------------------- */
.input{
position: relative;
}
.input_line.w50{
width: 100%;
}
.input_line.w50.email{
width: calc(100% - 20px);
}
.service_list.service li,
.service_list.agency li{
width: 100%;
margin-top: 20px;
min-height: auto;
padding-bottom: 70px;
}
.my_product_item.stemp_mall li{
width:calc(50% - 12px);
}
.my_product_item.stemp_mall li:not(:nth-child(2n)){
margin-right:0;
}
}
@media (max-width: 640px) {
.my_product_item li{
width: 100%;
}
.my_product_transfer{
padding: 20px;
}
/**/
.product_item li{
width: 100%;
padding: 0;
margin-bottom: 30px;
}
.register_input_btn_wrap{
/* flex-wrap: wrap; */
margin-bottom: 20px;
}
.register_input_btn_wrap .file_upload{
width: 100%;
margin-bottom: 8px;
}
.my_product_item li .img,
.my_product_transfer_item .img{
width: 130px;
height: 130px;
position: static;
overflow: hidden;
margin: 0 auto;
top: 0;
}
.my_product_item li .title, .my_product_transfer_item .title,
.my_product_item li .option,
.my_product_item li dl, .my_product_transfer_item dl,
.my_product_item .btn_wrap {
margin-left:0;
}
.my_product_item .badge {transform:scale(0.7);top: -5px;right: -5px;}
}
@media (max-width: 570px) {
/* sub ----------------------------------------------------------- */
.member_register_type h4{
margin-top: 40px
}
.member_register_inner a,
.member_register_inner button{
width: 100%;
}
.my_product_item.stemp_mall li{
width:100%;
}
.my_product_item.stemp_mall li .img {max-height:100vw; height:auto;}
}
/* font align
--------------------------------------------------------------------------------------- */
.t_left {
text-align: left;
}
.t_right {
text-align: right;
}
.t_center {
text-align: center;
}
/* etc
--------------------------------------------------------------------------------------- */
::selection {
background: rgba(255, 169, 40, 0.9);
color: #fff;
}
.flex {display:flex;align-items:center;gap: 5px;margin: 10px 0 35px;}
/*안내,경고 레이어팝업*/
.layer_popup{
display: none;
position: absolute;
width: 360px;
top: 150px;
left: 50%;
margin-left: -180px;
border-radius: 10px;
border: 5px solid #FEBD17;
background: #FFF;
box-shadow: 0px 13px 10px 0px rgba(0, 0, 0, 0.10);
text-align: center;
padding: 50px 25px 20px;
z-index: 2;
}
.on.layer_popup{
display: block;
}
.layer_popup h4{
font-size: 1.2em;
font-weight: 500;
margin-bottom: 15px;
}
.layer_popup h5{
font-size: 1.1em;
font-weight: 500;
margin-bottom: 15px;
}
.bt_layer_close{
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
padding: 0;
min-width: 35px;
border-radius: 100%;
background: url(../img/comm/bl_delete_w.png) no-repeat center #FEBD17;
box-shadow: 5px 5px 10px #0000005e;
font-size: 0;
border: 0;
}
.layer_popup_item{
border-top: 1px dashed #D6D6D6;
padding: 15px;
text-align: left;
}
.layer_popup .bt_area{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 20px 0 0;
}
.layer_popup .bt_area .btn{
height: 36px;
line-height: 34px;
width: auto;
min-width: 100px;
padding: 0 10px;
margin: 0 2px;
border-radius: 5px;
background: #000;
color: #fff;
font-size: 1em;
}
.layer_popup .bt_area .btn.line{
background: #fff; border: 1px solid #000; color: #000;
}
.layer_notice {position: fixed;top: 0;width: 100%;margin: 0 auto;padding: 0;text-align: right;height: auto;}
.layer_notice .inner {display:flex;max-width: 1850px;justify-content: right;gap: 30px;padding: 0 50px;margin: 0;}
.layer_notice .layer_popup {padding: 0;border: 0;left: 0;margin: 0;position: relative;background: #fff;border-radius: 5px;overflow: hidden;width: 450px;height: auto;}
.layer_notice .layer_popup .img {margin: 0; padding: 0; outline: none; font-size: 0;}
.layer_notice .layer_popup .img a {margin: 0; padding: 0; outline: none; font-size: 0;}
.layer_notice .layer_popup .img img {max-width: 100%;}
.layer_notice .layer_popup .day_close {border-top: 1px solid #333;display: flex;align-items: center;justify-content: center;padding: 8px;background: #000;color: #999;font-weight: 600;}
.layer_notice .layer_popup .day_close .bt_close_day {font-size: 0.88em; cursor: pointer;}
@media (max-width: 1024px) {
.layer_notice {position: absolute;text-align: center;margin-bottom: 50px;}
.layer_notice .inner {flex-direction: column;width: 100%;align-items: center;margin-bottom: 50px;}
.layer_notice .layer_popup {max-width: 100%;}
}
@media (max-width: 800px) {
.flex {/* display:block; */}
}
.cont_body .modify_info {/* display: none; */background: #111;color: #fff;border-radius: 0;padding: 20px;margin-bottom: 20px;}
.cont_body .modify_info .register_content_item {margin:60px auto 100px;}
.cont_body.modify .modify_info {display: block;}
.popup_wrap.no_click {position:fixed;top: 0;left: 0;width:100vw;height:100vh;text-align:center;z-index: 9999999;}
.popup_wrap.no_click:after {position:absolute;content: "";display:block;width:100vw;height:100vh;background: #ffffffaa;}
.popup_layer{
/* display: none; */
position: absolute; width: 370px;
max-width:94vw;
top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);
border-radius: 10px;
border: 5px solid #FEBD17;
background: #FFF;
box-shadow: 0px 13px 10px 0px rgba(0, 0, 0, 0.10);
text-align: center;
padding: 50px 25px 20px;
z-index: 999999;
}
.popup_layer .popup_info {margin:20px 0;padding: 6px 22px;background: #f7f3e8;justify-content: space-between;gap: 20px;}
.minus_num {color: #f1412d !important;}
.popup_layer .btn_wrap {margin-top:15px; display:flex; justify-content:center; gap:4px;}
.popup_layer .btn_wrap .sub_line {border:1px solid #000; }
.popup_layer .btn_wrap .main {border:1px solid #000; }
/*.popup_layer div h5, .popup_layer div p{text-align:left;}*/
/*app setting*/
.all_setting {padding-bottom:160px;width: 980px;max-width:90vw;margin:0 auto}
.app_tit {display:block;position: relative;margin-top: 20px;text-align:center;font-size: 22px;padding-top:5px;}
.app_tit:after {display:block; position:absolute; content=""; width:20px; height:3px; top: 0; left:50%; transform:translateX(-50%); background:#febd17;}
.all_setting_option {/* border-top:2px solid #222; */margin-top: 15px;margin-bottom: 10vw;}
.all_setting_option ul {display:flex;justify-content: space-between;border-bottom:1px solid #ddd;padding:20px;text-align: left;}
.all_setting_option li:first-child {width: calc(100% - 100px);}
.all_setting_option p {color:#999;word-break: keep-all;}
.all_setting_option .bt_onoff {width: 70px;position:absolute;right: 20px;}
.bt_onoff input {display:none}
.bt_onoff input[type="checkbox"] + label {position:relative;display: block;border-radius: 30px;width:60px;height: 30px;background: #ddd;transition:0.3s}
.bt_onoff input[type="checkbox"]:checked + label {position:relative;display: block;border-radius: 30px;width: 59px;height: 30px;background: #febd17;transition:0.3s}
.bt_onoff input[type="checkbox"] + label:after {position:absolute; display: block; content: ""; left:3px; top:3px; width:24px; height:24px; border-radius:24px; background: #fff; transition:0.3s}
.bt_onoff input[type="checkbox"]:checked + label:after {position:absolute; display: block; content: ""; left: 32px; top:3px; width:24px; height:24px; border-radius:24px; background: #fff; transition:0.3s}
.all_setting_option .tip {font-size:14px; padding:20px 20px 50px 20px;}
.all_setting_option .ic_img {width:34px; max-width:7vw;}
.all_setting_option .bt {display:inline-block;padding:6px;border-radius: 30px;background:#febd17;width: 120px;min-width: 8vw;text-align: center;}
.app_f_link {display: none;position:fixed;border-radius:15px 15px 0 0;border-top:1px solid #eee;padding: 7px 5px 3px;align-items: center;justify-content: space-evenly;z-index: 9999999;bottom: 0;background: #fff;width: 100vw;box-shadow: 0 0 10px #00000012;}
.app_f_link a {display:block;width: 20%;text-align:center;font-size: 12px;color:#666;padding: 30px 0 5px 0;}
.app_f_link a.ft_icon01 {background: url(/resources/img/comm/ft_icon01.png) no-repeat center top; background-size:28px;}
.app_f_link a.ft_icon02 {background: url(/resources/img/comm/ft_icon02.png) no-repeat center top; background-size:28px;}
.app_f_link a.ft_icon03 {background: url(/resources/img/comm/ft_icon03.png) no-repeat center top; background-size:28px;}
.app_f_link a.ft_icon04 {background: url(/resources/img/comm/ft_icon04.png) no-repeat center top; background-size:28px;}
.app_f_link a.ft_icon05 {background: url(/resources/img/comm/ft_icon05.png) no-repeat center top; background-size:28px;}
.app_f_link a.ft_icon01:hover,
.app_f_link a.ft_icon01.on {background: url(/resources/img/comm/ft_icon01_on.png) no-repeat center top; background-size:28px;}
.app_f_link a.ft_icon02:hover,
.app_f_link a.ft_icon02.on {background: url(/resources/img/comm/ft_icon02_on.png) no-repeat center top; background-size:28px;}
.app_f_link a.ft_icon03:hover,
.app_f_link a.ft_icon03.on {background: url(/resources/img/comm/ft_icon03_on.png) no-repeat center top; background-size:28px;}
.app_f_link a.ft_icon04:hover,
.app_f_link a.ft_icon04.on {background: url(/resources/img/comm/ft_icon04_on.png) no-repeat center top; background-size:28px;}
.app_f_link a.ft_icon05:hover,
.app_f_link a.ft_icon05.on {background: url(/resources/img/comm/ft_icon05_on.png) no-repeat center top; background-size:28px;}
.delivery_bt {color:#222;font-size: 15px;height:30px;line-height:18px;width:74px;min-width:74px;max-width:74px;}
.deli_state1 {background:#E4A400;border: none;}
.deli_state2 {background:#fff; color: #999; border: none;}
.delivery_list {background:#777;}
.delivery_list td{color:#fff;}
.delivery_list span {color:#fff; padding-left:10px;}
.delivery_list td button {
position: static;
width: 30px;
height: 30px;
min-width: 30px;
background: url(../img/comm/bl_delete_w.png) no-repeat center;
border: 0;
font-size: 0;
}
@media (max-width: 1024px) {
.app_f_link {display: flex;}
.mtm_chat_agree_wrap {bottom: 40px !important;width: 100% !important;left: 0;background: #000000dd !important;}
.my_product {margin-top:30px;}
}
@media (max-width: 600px) {
.mypage_index_txt{ width:250px; text-align:center; margin:0 auto; }
.mypage_title {justify-content:center;}
}
#ui-id-1 {max-height:300px; overflow-x: hidden; overflow-y:scroll;}
.register_input_item .input_basic label span.tip_text {position: absolute; top:50%; margin-top: 12px; font-size:12px; color:#999;}
.productComponent01_re {border-top:1px solid #ddd;}
.productComponent01_re ul {border-bottom:1px solid #ddd; padding:15px 10px;}
.productComponent01_re .review_photo {display: none;}
.productComponent01_re .review_list {position:relative; align-items: flex-start; gap: 20px;}
.productComponent01_re .review_list .bt {position:absolute;display: flex;right: 0;top: 0;background:#febd17;width: 27px;height: 27px;align-items: center;justify-content: center;cursor:pointer;font-size: 19px;}
.productComponent01_re .review_list .bt.bt_close {display:none}
.productComponent01_re .review_list .bt.bt_show {position:absolute;display: flex;right: 0;top: 0;background:#febd17;width: 27px;height: 27px;text-align: center;align-items: center;justify-content: center;cursor:pointer;font-size: 19px;}
.productComponent01_re .review_list .no,
.productComponent01_re .review_list .data {color:#999;margin-right: 5px;display:inline-block;}
.productComponent01_re .review_list div {width: 815px;max-width:90%;}
.productComponent01_re .review_list div .cont {font-size:16px; color: #888; margin-top:10px;
display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:2;}
.productComponent01_re .review_list .thumnail {width: 90px;max-width:20%;border:1px solid #eee;}
.productComponent01_re .review_list .thumnail img {font-size:0; padding:0; margin:0; width: 100%;}
.productComponent01_re .review_list div .cont.open {}
.productComponent01_re .review_photo {gap: 1.5%;margin-top: 20px;}
#contentWrap .productComponent01_re .review_photo p {max-width: 33%;border: 1px solid #eee;}
.review_star {position:relative;display: flex;justify-content: center; margin-right:3px;}
.review_star:before {display:block;content:"⭐";color:#febd17;margin-right:3px;}
.productComponent01_re .open_review .review_photo {display: flex;}
.productComponent01_re .open_review .review_list div .cont { display:block; -webkit-box-orient: inherit;}
.my_product_transfer_info .find_user {position:relative}
.my_product_transfer_info .find_user .textLengthWrap
{ position: absolute; top: -26px; right: 6px; color: #999;}
.bigImage {position: fixed;width: 100%;height:100%;background: #000000aa;z-index:999999;top: 0;}
.bigImage_content {position: fixed;display: block;height: auto !important;max-height: 90vh !important;max-width: 96% !important;text-align: center;margin: 0 auto;z-index: 999999;left: 50%;top: 50%;transform: translate(-50%, -50%);box-shadow: 0px 40px 50px #00000026;}
.bigImage_content:before {position:absolute; content: "";display:block; left:0; right: 0; width:100%; width: 100vw; height:100vh; background:#000000aa;}
.bigImage:after {}
@media (max-width: 1024px) {
.productComponent01_re .review_list div {max-width:100%;}
.productComponent01_re .review_list .thumnail {display: none !important;}
}
#popup_addr_input {width: 600px;}
#popup_addr_input .member_login {max-width: 100%;}
#popup_addr_input .input_line label {min-width:100px; outline: none;}
#stamp_chok h5 {font-size: 1em;}
.table_basic { width:100%; margin-top: 10px;}
.table_basic thead {border-top: 2px solid #000;}
.table_basic tr {border-bottom: 1px solid #ccc;}
.table_basic td,.table_basic th {padding: 5px 0;}
.table_basic td.t_date,.table_basic th.t_date {width: 110px;}
.table_basic td.t_su,.table_basic th.t_su {width: 50px;}
.event_input .input {height:auto;border:none;display: block;}
.event_input .input input[type="text"],
.event_input .input input[type="date"],
.event_input .input input[type="file"] {border:1px solid #ddd;padding:10px;margin-top: 5px;border-radius: 5px;border: 1px solid #ccc;}
.event_input .tabled_name {display:flex;}
.event_input label {color:#666;font-size: .9rem;font-weight: 400;}
.event_input label b {color:#333; font-size:1rem;}
.event_input select {/* background:#f3f3f3; *//* border-radius:5px; *//* border:1px solid #ccc; *//* font-size: 1rem; */padding:10px;/* margin-bottom: 5px; */letter-spacing: -0.04em;cursor:pointer}
.event_input .select {position:relative;height: auto;width: 100%;max-width: 82%;background: #fff;color: #333;}
.event_input .select::before {position:absolute;display: block;right: 20px;content:"▼";font-size:0.6rem;z-index:1;}
.event_input2 {margin-top:20px;max-height:75vh; overflow-x: hidden; overflow-y:scroll;}
.event_input2 h3{text-align:center;}
.event_input2 p {text-align:center;}
.event_input2 .my_product_item .ch {position:absolute;top: 10px;right: 10px;background: #f3f3f3;width: 40px;height: 40px;}
.event_input2 .my_product_item .ch input[type="checkbox"] {display:none;}
.event_input2 .my_product_item .ch label {
width: 40px;
height: 40px;
display: block;
background: url('/resources/img/comm/chbox.png') no-repeat 50%;
background-size: 100%; transition:.3s;
cursor:pointer;
}
.event_input2 .my_product_item .ch input[type=checkbox]:checked + label {
background: url('/resources/img/comm/chbox_ch.png') no-repeat 50%;
background-size: 100%; transition:.3s;
}
.event_input2 .my_product_item .ch input[type=checkbox]:disabled + label {
background: url('/resources/img/comm/chbox.png') no-repeat 50%;
background-size: 100%; transition:.3s;
};
#stamp_list .popup_layer {width:600px;}
.popup_wrap .page{
padding: 30px 0 10px;
overflow: hidden;
display: table;
margin: auto;
}
.popup_wrap .page{
margin: 0 auto;
display: flex;
align-items: center;
}
.popup_wrap .page li{
list-style: none;
display: block;
float: left;
line-height: 29px;
margin: 0 3px;
font-weight: 500;
}
.popup_wrap .page a{
text-decoration: none;
}
.popup_wrap .page li a, .popup_wrap .page li span{
display: flex;
width: 30px;
height: 30px;
padding: 12.5px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12.5px;
border-radius: 3.75px;
border: 1.25px solid #000;
background: #FFF;
font-size: 14px;
}
.popup_wrap .page li a:hover{
color: #2D3748;
}
.popup_wrap .page li.current span{
background: #2D3748;
color: #fff;
}
.popup_wrap .page li.btn_prev a:hover,
.popup_wrap .page li.btn_next a:hover{
border-color: #fff;
color: #455EEE;
box-shadow: 0 2px 12px 0 rgba(69, 94, 238, 0.15);
transition: all .3s ease-out;
}
.popup_wrap .page li.btn_prev.none a,
.popup_wrap .page li.btn_next.none a{
opacity: 0.5;
cursor: unset;
}
.popup_wrap .page li.btn_prev.none a:hover,
.popup_wrap .page li.btn_next.none a:hover{
border-color: #E8EBF0;
color: #9BA6B9;
box-shadow: none;
}
.popup_wrap .page.jc_center {justify-content:center;}
.popup_wrap .page.jc_center li.num { cursor:pointer;}
.popup_wrap .page.jc_center .dotdot {padding: 0;border: none;width: 10px;}
.flex_lr {justify-content: space-between;}
.event_bt_line {text-align:right; margin-top:10px;}
.event_bt_line .bt {padding:10px; font-size: 1rem; background:#333; border-radius: 5px; color:#fff; cursor:pointer;}
.layer_summary {position: fixed;top: 200px;background: #FEBD17;border-radius: 10px;width: 250px;margin-left: -280px;box-shadow: 3px 7px 12px #0000001f;}
.layer_summary .label_t {font-size:16px;background: #d37d0e;border-radius: 8px;padding: 5px 6px;color: #fff;display: inline-block;position: absolute;text-align: center;right: 10px;top: 10px;}
.layer_summary h4 {text-align: center;line-height: 1.2;margin: 25px 0 10px;display: block;}
.layer_summary p {color:#222;font-size:16px;padding: 6px;}
.layer_summary p.line {border: none;margin: 0 20px;border-bottom: 1px solid #0000004f;}
.layer_summary p span {}
.layer_summary p b {font-weight: 600}
.layer_summary p.a_area {text-align: center;}
.layer_summary p.a_area a {border-radius: 4px;margin: 8px 2px;padding-left: 7px;padding-right: 7px;font-size: 15px;}
@media (max-width: 1024px) {
.event_bt_line .bt {font-size:14px; text-align:center; width:100%;}
.popup_wrap .page li {margin:0 1.5px;}
.popup_wrap .page li a, .popup_wrap .page li span { width:26px; height:26px; }
}
@media (max-width: 768px) {
.popup_wrap .page li.btn_prev.bt-m {margin-right: 10px;}
.popup_wrap .page li.btn_next.bt-m {margin-left: 10px;}
.popup_wrap .page li.num,
.popup_wrap .page li.num span {width: 6px;height:6px;border-radius:6px;font-size:0;overflow: hidden;background: #ccc;margin: 0 3px;border: none;}
.popup_wrap .page li.num.current,
.popup_wrap .page li.num.current span {background:#000; border:#000}
.bottom_btn .btn {min-width:auto; padding:8px 15px; font-size:1.1em}
#contentWrap .profile_form_box .radio [type="radio"]:checked + label, #contentWrap .profile_form_box .radio [type="radio"]:not(:checked) + label {font-size:1em}
#popup_addr_input .input_line {flex-direction:column;align-items:self-start;margin-top: 10px;}
#popup_addr_input .input_line label {min-width: auto;font-size: 1.1em;}
#popup_addr_input .input_line.woo_num {flex-direction: row;}
#popup_addr_input .input_line.woo_num .pc {display: none;}
.bt_b2b { display:none !important; }
}
@media (max-width: 420px) {
.popup_wrap .page li.num,
.popup_wrap .page li.num span {width: 4px;height:4px;border-radius:4px;font-size:0;overflow: hidden;background: #ccc;margin: 0 2px;border: none;}
}
.event_prod_bta { background:#F8F8F8; display:flex; justify-content: center; gap: 15px; padding:10px; margin:10px 0; align-items:center;}
.event_prod_bta span { color:#666; }
.event_prod .bt,
.event_prod_bta span.bt {cursor:pointer;background:#000;color:#fff;border-radius:4px;padding: 5px 20px;min-width: 115px;min-height: 38px;line-height: 1.8;}
.event_prod_bta input[type="text"].event_prod_bta input[type="password"].event_prod_bta input[type="email"].event_prod_bta input[type="tel"].event_prod_bta input[type="search"].event_prod_bta input[type="url"].event_prod_bta input[type="number"].event_prod_bta input[type="time"].event_prod_bta input.event_prod_bta select.event_prod_bta textarea
{ letter-spacing: -0.045em; font-size: 1em;}
.event_prod .flex {margin: 0; align-items: center;}
.event_prod .event_h3 {margin-top:40px; padding:0 10px 10px; border-bottom:2px solid #333;}
.event_prod p.tip {padding: 3px 0;}
.event_prod .input .flex .bt,
.event_prod .input select {margin-top: 5px;}
.flex.align_left {align-content: flex-start;}
.event_prod .event_h3.event_input2,
.event_prod .event_h3.event_input3 {margin-top: 60px;}
.event_prod .inline_tit {min-width: 100px;}
.event_prod .register_content .file_upload_btn {position: static; margin-top: 5px;}
.event_prod .register_content_item {max-width:100% !important;padding: 0 10px;margin: 30px 0;}
.event_prod .file_upload_btn {position: static;display: flex;margin-top: 5px;width:100%;padding: 0;}
.event_prod .register_input {width:540px;}
.event_prod .register_input_cover { opacity: 1; }
#buy_online { /* display:none; */}
#step1 h5{margin-bottom:8px;}
.event_prod #step1 .left_file {width: 360px;}
.event_prod .left_file {width: 250px;}
.event_prod .left_file.left_file_1p {width: 520px;max-width: 100%;}
.event_prod .register_input_cover { gap: 20px; }
.event_prod .file_upload {padding-left:0;}
.event_prod .register_input_help {margin: 10px 0 30px;gap: 15px;}
.event_prod .register_input_cover {transform:translateY(0px);}
.event_prod .register_input_item .input_basic .complex .btn {background:#000000; color:#fff;}
.event_prod .register_input_btn_wrap .register_input_btn {padding:5px 30px !important;}
.event_prod .submit-btns .btn-fill {font-size: 1.1em;padding: 7px 70px !important;width: auto;height: auto !important;}
.event_prod .register_input_help .flex {cursor:pointer; text-decoration:underline;}
.event_input .register_input_help_content select,
.event_input .register_input_help_content2 select {
width: 100%;
height: 42px;
display: flex;
align-items: center;
padding: 0 10px;
border: 2px solid #000;
color: #000;
border-radius: 5px;
margin: 10px 0;
font-size: 1em;
background: url(../img/comm/bl_form_b.png) no-repeat right 10px center;
}
.prod_close.pointer {position: absolute; top: 0; right: 0;}
.no_cl img {opacity: 0.4 !important;filter: grayscale(100%);}
/*제품등록 전*/
#prod_info_layer {position: fixed;top: 0px;z-index: 99999;display: block;width: 100vw;height: 100vh;background: #ffffffee;}
#prod_info_layer .inner {position: absolute;width:980px;max-width: 92vw;left: 50%;transform: translateX(-50%);top:150px;justify-content:center;background:#fff;border: 5px solid #FEBD17;border-radius: 8px;padding: 45px;}
#prod_info_layer .inner .tit {display: flex;text-align: center;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 15px;}
#prod_info_layer .inner .tit div {text-align: center;}
#prod_info_layer .inner .tit h3 {font-weight: 600;}
#prod_info_layer .inner .text li {margin-bottom: 10px;position: relative;padding-left: 10px;}
#prod_info_layer .inner .text li:after {position: absolute;display: block;content:"";width: 5px;height: 5px;background: #333;border-radius: 5px;left: 0;top: 10px;}
#prod_info_ch {display: none;}
#prod_info_layer .btn_wrap form {display: flex;align-items: center;gap: 5px;justify-content: center; margin-top: 20px;}
#prod_info_layer .btn_wrap form .register_input_btn {margin-top:0}
/* off */
#prod_info_ch+label{
background: #fff url('/resources/img/sub/checkbox_off.png') no-repeat left 5px top 50%;
padding-top: 7px;
padding-left: 30px;
border: 2px dashed #000;
box-shadow: none;
}
/* on */
#prod_info_ch:checked+label{
background: #fff url('/resources/img/sub/checkbox_on.png') no-repeat left 5px top 50%;
padding-top: 7px;
padding-left: 30px;
border: 2px solid #000;
box-shadow: none;
}
@media (max-width: 1240px) {
.radio [type="radio"]:checked + label:before, .radio [type="radio"]:not(:checked) + label:before {
left: 2px !important; top: 2px !important;
}
}
@media (max-width: 980px) {
.left_file .left_file_img { max-height:25vh; }
.event_prod .register_input {width:100%;}
#prod_info_layer .inner {padding: 3%; max-height: calc(100vh - 100px); top: 2vh; overflow-y: auto;}
#prod_info_layer .inner .tit div img {max-width: 10vw;}
#prod_info_layer .inner .tit h3 {font-size: 1.3em;}
#prod_info_layer .inner .text li {margin-bottom: 5px; line-height: 1.2;}
#prod_info_layer .btn_wrap form { flex-direction:column; }
#prod_info_layer .btn_wrap form span,
#prod_info_layer .btn_wrap form label,
#prod_info_layer .btn_wrap form button {width: 100%;}
}
.mtm_chat_agree_wrap {z-index: 1000000 !important;}
#ot-sdk-btn-floating.ot-floating-button {z-index: 999999 !important; bottom: 70px !important;}