/*
Theme Name:   Breek Child
Theme URI:    https://1.envato.market/wp-breek-preview
Author: EstudioPatagon
Author URI: https://1.envato.market/ep-portfolio-themes
Description:  Child theme, based on Breek
Template: breek

*/

/* Add your custom code just below */

<style>
a { text-decoration:none; }
.cp-box { max-width:1000px; margin:0 auto;}
.cp-product { position: relative; clear:both; width:100%; border:1px solid #eee; display:flex; height:130px; background:#fff; }
.cp-btn { 
	background:deeppink; 
	color:#fff; 
	text-align:center; 
	border-radius:5px; 
	padding:5px 10px; 
	margin:35px auto;
	width:70%;
}
.cp-row {  width:30%; text-align:center; vertical-align:middle; padding:10px; }
.cp-image .cp-img { height:100%; }
.cp-desc { font-weight:bold; color: #222; 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cp-title { color:#7a7af3; 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
.cp-info { margin-top:30px; text-align:center; }
.cp-product:hover { cursor:pointer; transform: scale(1.05); transition: .2s; z-index:1;}
.cp-product:hover .cp-btn { background:#fff; color:deeppink; border:2px solid deeppink;transition: .4s; }

@media(max-width:496px) {
	.cp-product { display:block; width:90%; height:auto; margin:0 20px; }
	.cp-image .cp-img { height:180px; }
	.cp-row { width:auto; margin:5px; }
	.cp-btn { margin:0 auto; }
}

.tagdiv-type ul li:not(.blocks-gallery-item), .tagdiv-type ol li:not(.blocks-gallery-item) {
    line-height: 1;
    margin-bottom: 10px;
}

.tagdiv-type a:hover {
    text-decoration: unset;
}

.warp .container {
    margin: 0 auto;
    width: 100% !important;
}

.tdb-block-inner .container, .td-post-content .container{
    width: 100% !important;
}

.productWrap ul li .detail dt {
    line-height: 1;
}


@media (max-width: 720px){
  .productWrap ul li figure {
    height: 40.06vw !important;
}
  
.productWrap ul li figure img {
    width: auto;
    height: 130px;
}
  
.productWrap.style3 ul li .detail .sub .won {
    font-size: 3.89vw;
    position: relative;
    top: -25px;
}
}


   

@media (max-width: 520px){
.productWrap.style2 ul li .detail .sub .won {
    top: -25px;
    position: relative;
  font-size: 2.89vw!important;
}
}

@media screen and (min-width: 769px) {
.productWrap ul li{
  display: inline-block; 
  margin: 30px 30px 0 0;
  width: calc(33.33% - 20px);
  border: 2px solid #ddd; 
  border-radius: 10px; 
  vertical-align: top;
  }

}


.td-pb-span8 .productWrap ul li{
    width: 48%;
    margin-right: 13px !important;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

html { font-size: 10px; }
html[lang="ko-KR"], html[lang="ko"] { font-family: "Noto Sans KR", sans-serif !important; }
html[lang="ko-KR"] body, html[lang="ko"] body { font-size: 16px!important;  font-weight: 400!important;  line-height: 1.2!important;  color: #000!important;  }
html[lang="en"], html *[lang="en"] { font-family: "Noto Sans KR", Arial, sans-serif, serif!important;  }
html[lang="en"] body, html *[lang="en"] body { font-size: 18px!important; font-weight: 400!important;  }

/* reset */
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
a { background-color: transparent; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: 0.67em 0; }
mark { background: #ff0; color: inherit; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; -webkit-appearance: none; appearance: none; margin: 0; }
input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, figure, legend, input, textarea, button, p, blockquote, th, td, form, fieldset, blockquote, iframe { margin: 0; padding: 0; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }
html * { -webkit-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; }
article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr { display: inline; }
img { vertical-align: top; border: 0; }
fieldset { border: 0; }
ul, ol, li { list-style: none; }
hr { display: none; border: 0; }
pre { white-space: pre-wrap; }
legend, caption { display: none; clear: both; }
a { color: inherit; cursor: pointer; }
a:link { text-decoration: none; }
a:hover, a:focus, a:active, a:visited { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; word-break: keep-all; }
em, i, address, cite { font-style: normal; font-weight: normal; }
input, textarea, select, button, table { font-size: inherit; font-family: inherit; *font-size: inherit; border: 0; background-color: transparent; }
button, select { cursor: pointer; }
textarea, input, select { outline-color: -moz-use-text-color; outline-style: none; outline-width: medium; }
textarea { resize: none; }
label { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
label img { pointer-events: none; }
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
th, td { border-collapse: collapse; }
progress[value] { appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; background-size: auto; }
progress[value][role][aria-valuenow] { appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; background-size: auto; }
progress[value][role][aria-valuenow]:after { background-image: none; }
progress[value][role][aria-valuenow]:before { display: table; }
progress[value][role][aria-valuenow] strong { display: none; }
progress[value][role][aria-valuenow]::-webkit-progress-value, progress[value][role][aria-valuenow]::-webkit-progress-inner-element { display: table; }
progress[value][role][aria-valuenow]::-webkit-progress-bar { display: table-cell; }
progress[value][role][aria-valuenow]::-moz-progress-bar, progress[value][role][aria-valuenow]::-webkit-progress-value { display: table; }
textarea { color: inherit; }
textarea:focus::-webkit-input-placeholder { color: transparent; }
textarea:focus:-moz-placeholder { color: transparent; }
textarea:focus::-moz-placeholder { color: transparent; }
textarea:focus:-ms-input-placeholder { color: transparent; }
input[type="reset"], input[type="button"], input[type="submit"] { line-height: normal !important; cursor: pointer; }
input[type="button"], input[type="text"], input[type="image"], input[type="submit"] { -webkit-appearance: none; }
input:checked[type="checkbox"] { background-color: #fff; -webkit-appearance: checkbox; }
input { color: inherit; }
input::-webkit-input-placeholder { color: inherit; }
input::-moz-placeholder { color: inherit; }
input:-ms-input-placeholder { color: inherit; }
input:-moz-placeholder { color: inherit; }
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent; }
input:focus:-ms-input-placeholder { color: transparent; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0px 1000px white inset; box-shadow: 0 0 0px 1000px white inset; }
select::-ms-expand { display: none; }
input[type="date"]::-webkit-clear-button { display: none; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-calendar-picker-indicator { color: #343434; background: #fff; }
input[type="date"] { -moz-appearance: none; appearance: none; -webkit-appearance: none; display: inline-block !important; visibility: visible !important; }
input[type="date"], input:focus { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }

@media print {
	code[class*="language-"],
	pre[class*="language-"] { text-shadow: none; }
	html * { color: #000; background: #fff; }
}

/* clearfix */
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { content: ''; display: block; }
.clearfix:after { clear: both; }

/* common */
.ta-left { text-align: left !important; }
.ta-center { text-align: center !important; }
.ta-right { text-align: right !important; }

/* 청소기 장단점 */
.pointWrap{}
.pointWrap .points{margin-top: 80px;}
.pointWrap .points h2{font-size: 48px; font-weight: 300;}
.pointWrap .points ul{position: relative; margin-top: 40px; padding: 60px; border: 1px solid #ddd; border-top: none;}
.pointWrap .points ul::after{content:""; z-index: 10; position: absolute; left: -1px; top: 0; width: calc(100% + 2px); height: 4px;}
.pointWrap .points.blue ul::after{background-color: #1372f0;}
.pointWrap .points.pink ul::after{background-color: #c92a6a;}
.pointWrap .points ul li{position: relative; margin-bottom: 25px; padding-left: 10px; font-size: 20px; color: #666;}
.pointWrap .points ul li:last-of-type{margin-bottom: 0;}
.pointWrap .points ul li::before{content:""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background-color: #666;}

/* 제품 리스트 */
.productWrap{}
.productWrap ul{font-size: 0; border-top: 2px solid #222;}
/*.productWrap ul li{display: inline-block; margin: 30px 30px 0 0; width: calc(33.33% - 20px); border: 2px solid #ddd; border-radius: 10px; vertical-align: top;}*/
productWrap ul li{display: inline-block; border: 2px solid #ddd; border-radius: 10px; vertical-align: top;}
.productWrap ul li:nth-of-type(3n){margin-right: 0;}
.productWrap ul li figure{overflow: hidden; position: relative; height: 238px; background-color: #f8f8f8; border-radius: 10px 10px 0 0;}
.productWrap ul li figure img{position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); width: 180px;}
.productWrap ul li .detail{padding: 30px 28px; width: 100%; height: 238px;}
.productWrap ul li .detail dt{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 20px; height: 26px; font-size: 24px; font-weight: 700;}
.productWrap ul li .detail dd.txt{overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 50px; font-size: 20px; font-weight: 500; color: #666; line-height: 1.2;}
.productWrap ul li .detail dd.more{margin-top: 22px;}
.productWrap ul li .detail dd.more a{display: block; width: 100%; height: 60px; font-size: 20px; font-weight: 700; line-height: 58px; text-align: center; color: #e91971; border: 1px solid #e91971; transition: all ease-in-out .3s; border-radius: 30px;}
.productWrap ul li .detail dd.more a:hover{color: #fff; background-color: #e91971;}

.productWrap.style2 ul li{position: relative;}
.productWrap.style2 ul li .number{z-index: 10; position: absolute; left: 20px; top: -2px; width: 52px; height: 67px; line-height: 67px; text-align: center; font-size: 18px; font-weight: 700; color: #fff; background:url("http://saleon.co.kr/wp-content/uploads/2020/11/ico_mark_pink.png") no-repeat center center; background-size:52px auto;}
.productWrap.style2 ul li .detail{height: 280px;}
.productWrap.style2 ul li .detail .sub{margin-top: 14px; height: 28px; font-size: 0;}
.productWrap.style2 ul li .detail .sub .basong{float: left; width: 70px; height: 28px; line-height: 28px; font-size: 16px; font-weight: 700; text-align: center; color: #222; border-radius: 4px;}
.productWrap.style2 ul li .detail .sub .basong img{width: 85px;}
.productWrap.style2 ul li .detail .sub .won{float: right; font-size: 20px; font-weight: 500; color: #666; letter-spacing: -0.025em;}

.productWrap.style3 ul li{position: relative;}
.productWrap.style3 ul li .number{z-index: 10; position: absolute; left: 20px; top: -2px; width: 52px; height: 67px; line-height: 67px; text-align: center; font-size: 18px; font-weight: 700; color: #fff; background:url("http://saleon.co.kr/wp-content/uploads/2020/11/ico_mark_pink.png") no-repeat center center; background-size:52px auto;}
.productWrap.style3 ul li .detail{height: 280px;}
.productWrap.style3 ul li .detail .sub{margin-top: 14px; height: 28px; font-size: 0;}
.productWrap.style3 ul li .detail .sub .basong{float: left; font-size: 16px; font-weight: 700; line-height: 20px; border-radius: 5px;}
.productWrap.style3 ul li .detail .sub .basong br{display: none;}
.productWrap.style3 ul li .detail .sub .basong img{width: 85px;}
.productWrap.style3 ul li .detail .sub .won{float: right; font-size: 20px; font-weight: 500; color: #666; letter-spacing: -0.025em;}

/* 장점 & 단점 */
.content3{margin-top: 0px!important; font-size: 0;}
.content3 .column2 div{overflow: hidden; display: inline-block; margin-right: 20px; width: calc(50% - 10px); border-radius: 20px; vertical-align: top;}
.content3 .column2 div:last-of-type{margin-right: 0;}
.content3 .column2 div h2{width: 100%; height: 100px; line-height: 100px; text-align: center; font-size: 32px; font-weight: 700; color: #fff;}
.content3 .column2 div.advantage h2{background-color: #1372f0;}
.content3 .column2 div.disadvantage h2{background-color: #e91971;}
.content3 .column2 div ul{padding: 50px; height: 255px; border: 2px solid #ddd; border-top: none; border-radius: 0 0 20px 20px;}
.content3 .column2 div ul li{margin-bottom: 40px; font-size: 24px; font-weight: 700;}
.content3 .column2 div ul li:last-of-type{margin-bottom: 0;}
.content3 .more{display: block; margin: 80px auto; width: 400px; height: 90px; line-height: 90px; font-size: 28px; font-weight: 700; text-align: center; color: #fff; background-color: #e91971; border-radius: 45px;}


@media all and (max-width: 1280px){
	.container{width: 100%;}
}

@media all and (max-width: 768px){
	.container{width: 100%;}
}

@media all and (max-width: 1000px){
	.productWrap ul li{width: calc(50% - 15px);}
	.productWrap ul li:nth-of-type(3n){margin-right: 30px;}
	.productWrap ul li:nth-of-type(2n){margin-right: 0;}

	.content3 .column2 div{display: block; margin: 0 auto; max-width: 640px; width: 100%;}
	.content3 .column2 div:last-of-type{margin: 30px auto 0;}
	.content3 .column2 div ul{height: auto;}
}

@media all and (max-width: 720px){
	.pointWrap .points{margin-top: 11.11vw;}
	.pointWrap .points h2{font-size: 8.33vw;}
	.pointWrap .points ul{margin-top: 5.56vw; padding: 8.33vw; border-width: 0.28vw;}
	.pointWrap .points ul::after{left: -0.28vw; width: calc(100% + 0.56vw); height: 0.83vw;}
	.pointWrap .points ul li{font-size: 3.89vw;}
	.pointWrap .points ul li::before{top: 1.81vw; width: 1.11vw; height: 1.11vw;}

	.pointWrap .points.blue ul,
	.pointWrap .points.pink ul{border-top-width: 0.83vw;}

	.productWrap{}
	.productWrap ul{padding-top: 1.39vw; border-top-width: 0.42vw;}
	.productWrap ul li{margin:4.17vw 0 0 0; width: 100%; border-radius: 1.39vw;}
	.productWrap ul li:nth-of-type(3n){margin-right: 0;}
	.productWrap ul li figure{height: 33.06vw; border-radius: 1.39vw 1.39vw 0 0;}
	.productWrap ul li figure img{width: 25.00vw;}
	.productWrap ul li .detail{padding: 5.56vw 6.94vw 6.94vw; min-height: 41.67vw; height: auto;}
	.productWrap ul li .detail dt{margin-bottom: 2.78vw; height: 5.56vw; font-size: 5.00vw;}
	.productWrap ul li .detail dd.txt{display: block; min-height: 6.67vw; font-size: 3.89vw; line-height: 1.4;}
	.productWrap ul li .detail dd.more{margin-top: 3.06vw;}
	.productWrap ul li .detail dd.more a{height: 11.11vw; line-height: 11.11vw; font-size: 4.17vw; color: #fff; border-radius: 5.56vw; background-color: #e91971; border: none;}

	.productWrap.style2 ul li .number{left: 4.17vw; width: 10.83vw; height: 13.75vw; font-size: 3.89vw; line-height: 10.83vw; background-size: 10.83vw auto;}
	.productWrap.style2 ul li .detail{height: auto;}
	.productWrap.style2 ul li .detail .sub{margin-top: 1.94vw; height: 5.28vw; font-size: 0;}
	.productWrap.style2 ul li .detail .sub .basong{width: 12.5vw; height: 5vw; line-height: 5vw; font-size: 2.78vw; border-radius: 0.56vw;}
	.productWrap.style2 ul li .detail .sub .basong.normal{line-height: 4.72vw;}
	.productWrap.style2 ul li .detail .sub .basong img{width: 18.47vw;}
	.productWrap.style2 ul li .detail .sub .won{font-size: 3.89vw;}

	.productWrap.style3 ul li .number{left: 4.17vw; width: 10.83vw; height: 13.75vw; font-size: 3.89vw; line-height: 10.83vw; background-size: 10.83vw auto;}
	.productWrap.style3 ul li .detail{height: auto;}
	.productWrap.style3 ul li .detail .sub{height: 5.28vw;}
	.productWrap.style3 ul li .detail .sub .basong{font-size: 3.33vw;}
	.productWrap.style3 ul li .detail .sub .basong img{width: 18.47vw;}
	.productWrap.style3 ul li .detail .sub .won{font-size: 3.89vw;}

	.content3 .column2 div{border-radius: 2.78vw;}
	.content3 .column2 div h2{height: 16.67vw; font-size: 5.56vw; line-height: 16.67vw;}
	.content3 .column2 div ul{padding: 8.33vw 6.94vw; border-radius:0 0 2.78vw 2.78vw;}
	.content3 .column2 div ul li{margin-bottom: 5.56vw; font-size: 4.44vw; }
	.content3 .more{margin: 11.11vw 0; width: 100%; height: 15.28vw; line-height: 15.28vw; font-size: 5.00vw; border-radius: 7.64vw;}
}


</style>