@charset "utf-8";

/* 공통 */
#sub #container .box {padding: 100px 0;}
#sub #container .inner_bx {max-width: 1200px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;}
#sub #container .ttl01 {text-align: center; margin-bottom: 54px;}
#sub #container .ttl01 strong {display: block; font-size: 40px; color: #111111; font-weight: 700; word-break: keep-all;}

#sub #container .tab01 {border-top: 2px solid #111111; border-bottom: 1px solid #dddddd; margin-bottom: 50px; padding: 27px 0 26px;}



/* 전체상품 */
#p_all .box1 .con_bx {/*background-color: #f9cd45; padding: 54px 0 41px;*/ margin-bottom: 60px;}
#p_all .box1 .con_bx img {max-width: 100%;}
#p_all .box1 .con_bx .con_w {max-width: 920px; width: 100%; margin: 0 auto; display: flex; flex-flow: wrap;}
#p_all .box1 .con_bx .con_w .l_bx {width: 450px; box-sizing: border-box; display:flex; justify-content:center; align-items:center; table-layout:fixed; padding-left: 39px;}
#p_all .box1 .con_bx .con_w .l_bx .txt_w {width: 100%;}
#p_all .box1 .con_bx .con_w .l_bx .txt_w .txt1 span {display: inline-block; font-size: 22px; color: #ffffff; word-break: keep-all; background-color: #111111; line-height: 40px; padding: 0 37px; border-radius: 100px;}
#p_all .box1 .con_bx .con_w .l_bx .txt_w .txt2 {font-size: 50px; color: #111; font-weight: 700; word-break: keep-all; line-height: 60px; margin-top: 12px;}
#p_all .box1 .con_bx .con_w .l_bx .txt_w .txt3 {font-size: 26px; color: #444444; font-weight: 500; line-height: 36px; word-break: keep-all; margin-top: 12px;}
#p_all .box1 .con_bx .con_w .r_bx {width: calc(100% - 450px); box-sizing: border-box; display:flex; justify-content:right; align-items:center; table-layout:fixed;}
#p_all .box1 .con_bx .con_w .r_bx img {max-width: 100%;}
#p_all #board .category_bx {margin-bottom: 84px;}



/* 구매하기 */
#p_buy #board .write_bx {margin-top: 56px;}



/* 상품문의 */
#contactUs.list .top_bx {height: 300px; display:flex; justify-content:center; align-items:center; table-layout:fixed; background: url(../images/sub/contactUs_list_01.jpg) no-repeat center; background-size: cover; margin-bottom: 70px;}
#contactUs.list .top_bx .txt_w {max-width: 846px; width: calc(100% - 40px);}
#contactUs.list .top_bx .txt_w strong {display: block; font-size: 30px; color: #ffffff; line-height: 40px; font-weight: 700; word-break: keep-all;}
#contactUs.list .top_bx .txt_w a {display: block; max-width: 240px; width: 100%; line-height: 70px; text-align: center; background-color: #ee3424; font-size: 18px; color: #ffffff; font-weight: 700; margin-top: 24px;}

#contactUs.list .popup_bx .pop_w .pop_inner .pop_con {max-width: 680px;}
#contactUs.list .popup_bx .f_bx {max-width: 500px; width: 100%; margin: 0 auto;}
#contactUs.list .popup_bx .f_bx input {width: 100%; border: none; border-bottom: 2px solid #eeeeee; height: 60px; font-size: 16px; color: #444; padding: 0 10px; box-sizing: border-box; outline: none;}
#contactUs.list .popup_bx .f_bx input::placeholder {color: #cccccc;}



/* 로그인 */
#login {background-color: #fafafa;}
#login .inner_bx {max-width: 580px!important;}
#login .con_bx {box-shadow: 0 20px 60px rgba(0,0,0,0.06); background-color: #ffffff; padding: 54px 30px 60px; border-radius: 20px;}
#login .con_bx .ttl_link {font-size: 0; text-align: center; margin-bottom: 65px;}
#login .con_bx .ttl_link li {display: inline-block; vertical-align: middle; margin-right: 40px;}
#login .con_bx .ttl_link li:last-child {margin-right: 0;}
#login .con_bx .ttl_link li a {display: inline-block; line-height: 42px; border-bottom: 2px solid transparent; font-size: 20px; color: #aaaaaa; font-weight: 700; cursor: pointer;}
#login .con_bx .ttl_link li.on a {color: #111111; border-color: #111111;}
#login .con_bx .f_bx .f_w input[type=text], #login .con_bx .f_bx .f_w input[type=email], #login .con_bx .f_bx .f_w input[type=password], #login .con_bx .f_bx .f_w input[type=tel] {width: 100%; margin-bottom: 9px; font-size: 18px; color: #444; letter-spacing: -0.03em; word-break: keep-all; padding: 0 20px; box-sizing: border-box; height: 60px; border: 1px solid #dddddd; outline: none;}
#login .con_bx .f_bx .f_w input[type=text]:last-child, #login .con_bx .f_bx .f_w input[type=email]:last-child, #login .con_bx .f_bx .f_w input[type=password]:last-child, #login .con_bx .f_bx .f_w input[type=tel]:last-child {margin-bottom: 0;}
#login .con_bx .f_bx .f_w input[type=text]::placeholder, #login .con_bx .f_bx .f_w input[type=email]::placeholder, #login .con_bx .f_bx .f_w input[type=password]::placeholder, #login .con_bx .f_bx .f_w input[type=tel]::placeholderd {color: #aaaaaa;}
#login .con_bx .f_bx .chk_bx {padding-left: 26px; position: relative; margin-top: 7px; padding-bottom: 8px;}
#login .con_bx .f_bx .chk_bx input {appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #dfdfdf; border-radius: 2px; box-sizing: border-box; width: 20px; height: 20px; outline: none; cursor: pointer; margin-right: 0; border-radius: 50%; position: absolute; left: 0; top: 2px; cursor: pointer; background: url(../images/icon/chk2.png) no-repeat center;}
#login .con_bx .f_bx .chk_bx input:checked {background: url(../images/icon/chk1.png) no-repeat center #ee3424; border-color: #ee3424;}
#login .con_bx .f_bx .chk_bx label {font-size: 16px; color: #444444; letter-spacing: -0.03em; word-break: keep-all; display: inline-block; line-height: 24px; cursor: pointer;}
#login .con_bx .f_bx .btm_btn {font-size: 0; margin-top: 30px;}
#login .con_bx .f_bx .btm_btn a {display: block; width: 100%; background-color: #ee3424; text-align: center; margin-bottom: 10px; line-height: 70px; font-size: 20px; color: #ffffff; font-weight: 700; letter-spacing: -0.03em;}
#login .con_bx .f_bx .btm_btn a:last-child {margin-bottom: 0;}
#login .con_bx .f_bx .btm_btn a.col2 {background-color: #333333;}
#login .con_bx .f_bx .imp_txt {margin-top: 10px; min-height: 70px; box-sizing: border-box; font-size: 0;}
#login .con_bx .f_bx .imp_txt .txt_w {min-height: 70px; box-sizing: border-box; padding: 5px 10px; background-color: #eeeeee;font-size: 0; font-size: 18px; color: #111111; font-weight: 700; letter-spacing: -0.03em; word-break: keep-all; text-align: center; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#login .con_bx .f_bx .imp_txt .txt_w span {color: #ee3424;}
#login .con_bx .link_bx {font-size: 0; text-align: center; margin-top: 35px;}
#login .con_bx .link_bx li {display: inline-block; position: relative; margin-right: 40px;}
#login .con_bx .link_bx li:last-child {margin-right: 0;}
#login .con_bx .link_bx li::before {content: ''; width: 1px; height: 14px; background-color: #aaaaaa; position: absolute; right: -22px; top: 50%; margin-top: -7px;}
#login .con_bx .link_bx li:last-child::before {display: none;}
#login .con_bx .link_bx li a {font-size: 16px; color: #444444; letter-spacing: -0.03em; word-break: break-all; display: inline-block; line-height: 24px;}
#login .con_bx .sns_bx {margin-top: 70px;}
#login .con_bx .sns_bx .ttl {text-align: center; position: relative;}
#login .con_bx .sns_bx .ttl::before {content: ''; width: 100%; height: 1px; background-color: #eeeeee; position: absolute; left: 0; top: 50%;}
#login .con_bx .sns_bx .ttl span {display: inline-block; background-color: #fff; font-size: 18px; color: #aaaaaa; font-weight: 600; letter-spacing: -0.03em; word-break: break-all; position: relative; z-index: 1; padding: 0 15px;}
#login .con_bx .sns_bx ul {font-size: 0; text-align: center; margin-top: 28px;}
#login .con_bx .sns_bx ul li {display: inline-block; margin-right: 20px;}
#login .con_bx .sns_bx ul li:last-child {margin-right: 0;}
#login .con_bx .sns_bx ul li a {font-size: 0; width: 60px; height: 60px; border-radius: 50%; display: block;}
#login .con_bx .sns_bx ul li.icon1 a {background: url(../images/icon/sns1.png) no-repeat center;}
#login .con_bx .sns_bx ul li.icon2 a {background: url(../images/icon/sns2.png) no-repeat center;}



/* 회원가입 */
#join.join1 .con_bx .con_w.all_bx {border-bottom: 1px solid #dddddd;}
#join.join1 .con_bx .con_w .chk_bx {height: 70px; display:flex; justify-content:left; align-items:center; table-layout:fixed; position: relative;}
#join.join1 .con_bx .con_w .chk_bx::before {content: ''; width: 11px; height: 8px; background: url(../images/icon/arrow1.png) no-repeat center; position: absolute; right: 20px; top: 50%; margin-top: -4px; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
#join.join1 .con_bx .con_w.on .chk_bx::before {transform: rotate(180deg);}
#join.join1 .con_bx .con_w.all_bx .chk_bx::before {display: none;}
/*#join.join1 .con_bx .con_w .chk_bx .btn {position: absolute; width: 50px; height: 70px; top: 0; right: 0; cursor: pointer; font-size: 0;}*/
#join.join1 .con_bx .con_w .chk_bx .chk_w {position: relative; padding-left: 28px;}
#join.join1 .con_bx .con_w .chk_bx input {appearance: none; -webkit-appearance: none; -moz-appearance: none; visibility: hidden; position: absolute; margin: 0; padding: 0;}
#join.join1 .con_bx .con_w .chk_bx label {display: inline-block; font-size: 16px; color: #000000; letter-spacing: -0.03em; word-break: keep-all; line-height: 26px; cursor: pointer;}
#join.join1 .con_bx .con_w .chk_bx input+label::before {content: ''; border: 1px solid #dfdfdf; border-radius: 2px; box-sizing: border-box; width: 20px; height: 20px; outline: none; cursor: pointer; margin-right: 0; border-radius: 50%; position: absolute; left: 0; top: 3px; cursor: pointer; background: url(../images/icon/chk2.png) no-repeat center;}
#join.join1 .con_bx .con_w .chk_bx input:checked+label::before {background: url(../images/icon/chk1.png) no-repeat center #ee3424; border-color: #ee3424;}
#join.join1 .con_bx .con_w.all_bx .chk_bx label {font-size: 18px; font-weight: 700;}
#join.join1 .con_bx .con_w .chk_bx label span {font-size: 14px; color: #ee3424;}
#join.join1 .con_bx .con_w .txt_bx {background-color: #fafafa; padding: 18px 20px; height: 200px; overflow-y: auto; box-sizing: border-box; font-size: 14px; color: #444; line-height: 24px; word-break: keep-all; height: 200px; display: none;}



/* 마이페이지 회원정보수정 */
#mypage.mypage05 .popup_bx .pop_w .pop_inner .pop_con {max-width: 680px;}
#mypage.mypage05 .popup_bx .f_bx {max-width: 500px; width: 100%; margin: 0 auto;}
#mypage.mypage05 .popup_bx .f_bx input {width: 100%; border: none; border-bottom: 2px solid #eeeeee; height: 60px; font-size: 16px; color: #444; padding: 0 10px; box-sizing: border-box; outline: none;}
#mypage.mypage05 .popup_bx .f_bx input::placeholder {color: #cccccc;}



/* 전자상거래 표준약관 */
.yg{font-size:14px; line-height:24px; word-break:keep-all}
.yg h2{margin-top:70px; font-size:22px; font-weight:700; color:#333;}
.yg h3{margin-top:40px; margin-bottom:5px; font-size:18px; font-weight:700; color:#444;}
.yg h4{margin-top:20px; margin-bottom:5px; font-size:16px; font-weight:500; color:#555;}
.yg p{margin:5px 0;}

.fly_w{margin-top:10px; background:#f2f2f2; box-sizing:border-box; padding:20px;}
.fly_w > li:first-child{margin-top:0;}
.fly_w > li > ul{margin-top:0; padding:0 0 0 15px; background:none;}
.fly_w > li > ul > li{padding:0; margin:0;}
.fly_w > li > ul > li:before{display:none;}
.fly_w > li > ol{margin-top:0; padding:0 0 0 15px; background:none;}
.fly_w > li > ol > li{padding:0; margin:0;}
.fly_w > li > ol > li:before{display:none;}

ul.fly_w > li{position:relative; padding-left:10px; margin-top:5px; color:#777;}
ul.fly_w > li:before{content:'-'; position:absolute; top:0; left:0;}
ol.fly_w > li{position:relative; margin-top:5px; color:#777;}

.yg_table{overflow:hidden; margin-top:15px;}
.yg_table div{float:right; width:calc(50% - 10px);}
.yg_table div:first-child{float:left;}
.yg_table div > strong{display:block; text-align:center; background:#333; color:#fff; font-size:15px; font-weight:500; padding:15px 0;}
.yg_table div table{width:100%; box-sizing:border-box;}
.yg_table div table thead th{text-align:center; color:#333; font-weight:700; border-bottom:1px solid #ddd; padding:10px 0; background:#f2f2f2;}
.yg_table div table tbody th{text-align:center; border-bottom:1px solid #ddd; color:#333; padding:10px 0; font-weight:500; background:#f9f9f9}
.yg_table div table tbody td{border-bottom:1px solid #ddd; padding:5px 20px; border-left:1px solid #ddd;}

#privacy_box select { padding-left:10px; margin-top: 20px; width: 320px; height: 40px; font-size: 14px; border-color: #bbb;}


/* PC */
@media all and (min-width:1025px){
    /* 공통 */
    #sub #container .tab01 ul li a {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
    #sub #container .tab01 ul li a:hover {color: #111;}
}

@media all and (min-width:768px){
    /* 공통 */
    #sub #container .tab01 .on_txt {display: none!important;}
    #sub #container .tab01 ul {display: block!important;}
    #sub #container .tab01 ul {font-size: 0; text-align: center; margin-bottom: -10px;}
    #sub #container .tab01 ul li {display: inline-block; vertical-align: middle; margin: 0 20px 10px;}
    #sub #container .tab01 ul li a {font-size: 16px; color: #666666; font-weight: 700; word-break: keep-all;}
    #sub #container .tab01 ul li.on a {color: #ee3424!important;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	/* 공통 */
    #sub #container .box {padding: 50px 0;}
    #sub #container .ttl01 {margin-bottom: 26px;}
    #sub #container .ttl01 strong {font-size: 25px; line-height: 30px;}
    
    #sub #container .tab01 {border-width: 1px; margin-bottom: 15px; padding: 15px 0 14px;}
    #sub #container .tab01 ul {margin-bottom: -5px;}
    #sub #container .tab01 ul li {margin: 0 10px 5px;}
    #sub #container .tab01 ul li a {font-size: 12px;}



    /* 전체상품 */
    #p_all .box1 .con_bx {padding: 0; text-align: center; margin-bottom: 30px;}
    #p_all .box1 .con_bx .con_w {display: none;}
    #p_all .box1 .con_bx .m_img {width: 100%;}
    #p_all #board .category_bx {margin-bottom: 41px;}



    /* 구매하기 */
    #p_buy #board .write_bx {margin-top: 47px;}



    /* 상품문의 */
    #contactUs.list .top_bx {height: 170px; margin-bottom: 30px;}
    #contactUs.list .top_bx .txt_w {max-width: 600px;}
    #contactUs.list .top_bx .txt_w strong {font-size: 20px; line-height: 25px;}
    #contactUs.list .top_bx .txt_w a {margin-top: 11px; font-size: 13px; max-width: 120px; line-height: 45px;}
    
    #contactUs.list .popup_bx .ttl {font-size: 15px; line-height: 20px;}
    #contactUs.list .popup_bx .f_bx {max-width: 250px;}
    #contactUs.list .popup_bx .f_bx input {height: 45px; font-size: 12px; padding: 0 6px; border-width: 1px;}



    /* 로그인 */
    #login .inner_bx {max-width: 400px!important;}
    #login .con_bx {box-shadow: 0 10px 30px rgba(0,0,0,0.06); padding: 45px 15px 40px; border-radius: 10px;}
    #login .con_bx .ttl_link {margin-bottom: 40px;}
    #login .con_bx .ttl_link li {margin-right: 20px;}
    #login .con_bx .ttl_link li a {font-size: 15px; line-height: 25px; border-width: 1px;}
    #login .con_bx .f_bx .f_w input[type=text], #login .con_bx .f_bx .f_w input[type=email], #login .con_bx .f_bx .f_w input[type=password], #login .con_bx .f_bx .f_w input[type=tel] {height: 40px; padding: 0 15px; margin-bottom: 5px; font-size: 12px; border-radius: 5px;}
    #login .con_bx .f_bx .chk_bx {margin-top: 9px; padding-left: 20px; padding-bottom: 14px;}
    #login .con_bx .f_bx .chk_bx input {width: 15px; height: 15px; background-size: 8px auto!important;}
    #login .con_bx .f_bx .chk_bx label {font-size: 12px; line-height: 15px;}
    #login .con_bx .f_bx .btm_btn {margin-top: 15px;}
    #login .con_bx .f_bx .btm_btn a {font-size: 13px; line-height: 50px; border-radius: 5px; margin-bottom: 5px;}
    #login .con_bx .f_bx .imp_txt {margin-top: 5px; min-height: 50px;}
    #login .con_bx .f_bx .imp_txt .txt_w {min-height: 50px; font-size: 13px; line-height: 18px; border-radius: 5px;}
    #login .con_bx .link_bx {margin-top: 10px;}
    #login .con_bx .link_bx li {margin-right: 20px;}
    #login .con_bx .link_bx li::before {right: -11px; height: 7px; margin-top: -4px;}
    #login .con_bx .link_bx li a {font-size: 12px; line-height: 20px;}
    #login .con_bx .sns_bx {margin-top: 21px;}
    #login .con_bx .sns_bx .ttl span {font-size: 12px; line-height: 20px; padding: 0 14px;}
    #login .con_bx .sns_bx ul {margin-top: 10px;}
    #login .con_bx .sns_bx ul li {margin-right: 15px;}
    #login .con_bx .sns_bx ul li a {width: 45px; height: 45px; background-size: 45px 45px!important;}



    /* 회원가입 */
    #join.join1 .con_bx .con_w .chk_bx {height: 35px;}
    #join.join1 .con_bx .con_w .chk_bx::before {width: 8px; background-size: 8px auto; right: 10px;}
    #join.join1 .con_bx .con_w .chk_bx .chk_w {padding-left: 20px;}
    #join.join1 .con_bx .con_w .chk_bx label {font-size: 12px;}
    #join.join1 .con_bx .con_w.all_bx .chk_bx label {font-size: 12px;}
    #join.join1 .con_bx .con_w .chk_bx label span {font-size: 12px;}
    #join.join1 .con_bx .con_w .chk_bx input+label::before {width: 15px; height: 15px; background-size: 8px auto!important; top: 5px;}
    #join.join1 .con_bx .con_w .txt_bx {height: 100px; font-size: 11px; line-height: 17px; padding: 12px 15px;}



    /* 마이페이지 회원정보수정 */
    #mypage.mypage05 .popup_bx .ttl {font-size: 15px; line-height: 20px;}
    #mypage.mypage05 .popup_bx .f_bx {max-width: 250px;}
    #mypage.mypage05 .popup_bx .f_bx input {height: 45px; font-size: 12px; padding: 0 6px; border-width: 1px;}
    
    
    
    /* 전자상거래 표준약관 */
    .yg{font-size:12px; line-height:18px;}
    .yg h2{margin-top:50px; font-size:18px;}
    .yg h3{margin-top:20px; margin-bottom:5px; font-size:15px;}
    .yg h4{margin-top:10px; margin-bottom:5px; font-size:14px;}
    .yg p{margin:5px 0;}

    .fly_w{margin-top:5px; padding:10px;}
    .fly_w > li > ul{padding:0 0 0 5px;}
    .fly_w > li > ol{padding:0 0 0 5px;}

    ul.fly_w > li{padding-left:10px; margin-top:3px;}
    ol.fly_w > li{margin-top:3px;}

    .yg_table{margin-top:10px;}
    .yg_table div{width:100%; margin-top:10px;}
    .yg_table div:first-child{margin-top:0;}
    .yg_table div > strong{font-size:12px; padding:8px 0;}
    .yg_table div table{ table-layout:fixed; }
    /* .yg_table div table colgroup col:nth-of-type(1){width:80px !important;}
    .yg_table div table colgroup col:nth-of-type(2){width:calc(100% - 80px) !important;} */
    .yg_table div table thead th{padding:5px 0;}
    .yg_table div table tbody th{padding:5px 0;}
    .yg_table div table tbody td{padding:0 10px}
    #privacy_box select { margin-top: 15px; width: 300px; height: 30px; font-size: 12px; }
}

/* 모바일 */
@media all and (max-width:768px){
    /* 공통 */
    #sub #container .tab01 {position: relative; padding: 0;}
    #sub #container .tab01 .on_txt {position: relative; font-size: 12px; color: #ee3424; font-weight: 500; min-height: 40px; padding: 5px 25px; box-sizing: border-box; display:flex; justify-content:center; align-items:center; table-layout:fixed; cursor: pointer;}
    #sub #container .tab01 .on_txt::before {content: ''; width: 7px; height: 6px; top: 50%; margin-top: -3px; right: 10px; position: absolute; background: url(../images/icon/arrow2.png) no-repeat center; background-size: 7px 6px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #sub #container .tab01 .on_txt.on::before {transform: rotate(180deg);}
    #sub #container .tab01 ul {position: absolute; width: 100%; box-sizing: border-box; padding: 0 15px; left: 0; background-color: #ee3424; z-index: 10; margin: 0; display: none;}
    #sub #container .tab01 ul li {margin: 0; margin-bottom: 5px; text-align: center;}
    #sub #container .tab01 ul li:first-child {padding-top: 10px;}
    #sub #container .tab01 ul li:last-child {margin-bottom: 0; padding-bottom: 10px;}
    #sub #container .tab01 ul li a {font-size: 12px; line-height: 20px; color: #fff; display: inline-block;}
    
    
    
	/* 상품문의 */
    #contactUs.list .top_bx .txt_w {text-align: center;}
    #contactUs.list .top_bx .txt_w a {margin: 11px auto 0;}
}