@charset "utf-8";
@import url('j-pro-modern.css');
@import url('../mobile/skin/shop/basic/style.css');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap');

/* === sub === 맥앤맥스 by.Joanne */

/* j-pro-modern custom */

.j-pro > * { font-family: "Noto Sans KR", AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, 돋움, sans-serif; }
.j-pro { box-shadow: none; /*border: 1px solid rgba(0, 0, 0, 0.15);*/ border:none; }
.j-pro .j-label { font-weight: 600; }
.j-pro .j-header { background-color: #f05858; border-top: 1px solid #f05858; box-shadow: none; }
.j-pro .j-icon-right { border-left: 1px solid rgba(0, 0, 0, 0.32); }
.j-pro .j-icon-left { border-right: 1px solid rgba(0, 0, 0, 0.32); }
.j-pro .j-footer { background-color: #fff; border-top: 1px dashed #f05858; padding: 20px 25px; position: inherit; }
.j-pro .j-footer button { margin-bottom: 0; float: right; }
.j-pro .j-divider-text span { color: #222; }
.j-pro input[type="text"], .j-pro input[type="password"], .j-pro input[type="email"], .j-pro input[type="search"], .j-pro input[type="url"], .j-pro textarea, .j-pro select { border: 1px solid rgba(0, 0, 0, 0.15); font-size:12px; }
.j-pro input[type="text"]:hover, .j-pro input[type="password"]:hover, .j-pro input[type="email"]:hover, .j-pro input[type="search"]:hover, .j-pro input[type="url"]:hover, .j-pro textarea:hover, .j-pro select:hover,
.j-pro input[type="text"]:focus, .j-pro input[type="password"]:focus, .j-pro input[type="email"]:focus, .j-pro input[type="search"]:focus, .j-pro input[type="url"]:focus, .j-pro textarea:focus, .j-pro select:focus,
.j-pro .j-file-button:hover + input { border: 1px solid #f05858; }
.j-pro .j-radio-toggle, .j-pro .j-checkbox-toggle, .j-pro .j-inline-group .j-radio-toggle, .j-pro .j-inline-group .j-checkbox-toggle { padding: 9px 0 18px 0; }
.j-pro .j-tooltip, .j-pro .j-tooltip-image { background-color: #f05858; }
.j-pro .j-tooltip:before, .j-pro .j-tooltip-image:before { border-color: #f05858 transparent; }
.j-pro .j-primary-btn, .j-pro .j-file-button, .j-pro .j-secondary-btn, .j-pro .j-widget .j-addon-btn { background-color: #f05858; }
.j-pro .j-primary-btn:hover, .j-pro .j-file-button:hover, .j-pro .j-secondary-btn:hover, .j-pro .j-widget .j-addon-btn:hover { background-color: #ff3a3a; }
.j-pro .j-ratings input + label:hover, .j-pro .j-ratings input + label:hover ~ label, .j-pro .j-ratings input:checked + label, .j-pro .j-ratings input:checked + label ~ label { color: #f05858; }
.j-unit .checkbox-fade { display: block; margin-top: 20px; }

.j-pro .j-prepend-big-btn .j-file-button, .j-pro .j-append-big-btn .j-file-button { width: 70px; font-size:12px; }
.j-pro .j-append-big-btn input[type="text"] { padding-right:80px; }
.j-pro span.j-hint { font-size:12px; }


.list-img { display:flex; flex-wrap:wrap; justify-content:space-between; margin:-5px; }
.list-img li { width:calc(50% - 10px); margin:5px; }
.list-img li a { display:block; width:100%; height:125px; border:1px solid #ddd; border-radius: 3px; background:#fff; display:flex; justify-content:center; align-items:center; }
.list-img li a img { max-width: 100%; max-height: 100%; object-fit:contain; object-position: 50% 50%; }

.select-color li {display:inline-block; margin:0 5px 5px 0;}
.select-color .radio { position: relative; width:30px; height:30px; overflow: hidden; }
.select-color .radio label { display: block; width: inherit; height: inherit; cursor: pointer; border: 1px solid #ddd; border-radius: 3px; }
.select-color .radio label span { display: block; position:relative; width:100%; height:100%; border: 3px solid #fff; border-radius: 3px; }
.select-color .radio label[for="color-wh"] span { background-color:white; }
.select-color .radio label[for="color-iv"] span { background-color:ivory; }
.select-color .radio label[for="color-lv"] span { background-color:lavender; }
.select-color .radio label[for="color-bk"] span { background-color:black; }
.select-color .radio input[type="radio"] { position: absolute; top: 0; left: -9999em; }
.select-color .radio input[type="radio"]:checked + label { border: 1px solid #f05858; }

.en { font-family: 'Shippori Mincho B1', serif; font-weight:800; }

#container { margin:0 !important; padding-top:75px !important; width:100%; max-width:100%; }
#container > * { box-sizing:border-box; }

/* about 시작 */

.sub_wrap { width:100%; }
.sub_wrap .inner { width:100%; max-width:1200px; margin:0 auto; height:inherit; padding:50px 20px; }
.sub_wrap .inner h3 { font-size:48px; margin:30px 0; font-weight:400; letter-spacing:-1px; }
.sub_wrap .inner h4 { font-size:24px; font-weight:400; margin-bottom:20px; }
.sub_wrap .inner h4 span { display:inline-block; }
.sub_wrap .inner ul { display:flex; margin:0 -30px 30px; }
.sub_wrap .inner li { flex:1; margin:0 30px; }
.sub_wrap .inner p { font-size:16px; line-height:2; letter-spacing:-0.5px; font-weight:300; word-break:keep-all; }
.sub_wrap .inner p.tit { font-size:20px; text-align:center; font-weight:500; }
.sub_wrap .inner p.img { margin:15px 0; text-align:center; }
.sub_wrap .inner p.img img { max-width:100%; }
.sub_wrap .full_bg { height:900px; background: no-repeat center center; background-size:auto; }
.sub_wrap .full_bg .inner { padding-top:240px; }
.sub_wrap .full_bg.bright { color:#222; }
.sub_wrap .full_bg.dark { color:#fff; }
.sub_wrap .full_bg h3 { font-size:60px; line-height:1.1; font-weight:400; letter-spacing:-1px; } 
.sub_wrap .full_bg h3 strong { font-weight:700; }
.sub_wrap .full_bg p { font-size:18px; line-height:2; }

.play { width:100%; }
.play .player { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background: #000; margin-bottom:30px; }
.play .player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }

@media only screen and (max-width: 1200px) {
	.sub_wrap .inner h3 { font-size:24px; }
	.sub_wrap .inner h4 { font-size:18px; }
	.sub_wrap .inner p { font-size:14px; font-weight:400; }
	.sub_wrap .inner p.tit { font-size:16px; }
	.sub_wrap .full_bg { height:800px; background-size:cover; }
	.sub_wrap .full_bg h3 { font-size:28px; }
	.sub_wrap .full_bg p { font-size:14px; }
}

@media only screen and (max-width: 969px) {
	br.pc {display:none;}
	#container { padding-top:55px !important; }
	.sub_wrap .inner ul { display:block; margin:0; }
	.sub_wrap .inner li { margin:20px 0; }
	.sub_wrap .full_bg { height:auto; }
	.sub_wrap .full_bg .inner { padding:80px 20px; }
}