@charset "UTF-8";

/***** Fonts *****/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");


/***** reset *****/
* {box-sizing:border-box; margin:0; padding:0; font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
body,
h1, h2, h3, h4, h5, h6,
ul, ol, dl, dd,
p,
fieldset, legend {margin:0; padding:0;}
ul, ol {list-style:none;}
table {border-collapse:collapse;}
em {font-style:normal;}
a {color:inherit; text-decoration:none;}
img {vertical-align:top;}
body, input, textarea, select, button {font-size:14px; font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
fieldset, button {border:none; outline:none;}
button:hover {cursor:pointer;}

.hidden, .blind { position: absolute !important; top: auto !important; left: auto !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; text-indent: 0px !important;
}

html, html body {display:flex;width:100%;min-height:100%;}
.dis_table{display:table;width:100%;height:100%;}
.dis_table_cell{display:table-cell;width:100%;height:100%;font-size:0;}
.col{font-size:inherit;color:#1CABE2;letter-spacing:inherit;line-height:inherit;font-weight:inherit;vertical-align:baseline;}
.eg{font-size:inherit;color:inherit;letter-spacing:-1px;line-height:inherit;font-weight:inherit;vertical-align:baseline;}

.w_pc{display:block;}
.w_mobile{display:none;}

.wrap{
	width:100%;
	min-width:1280px;
	height: 100%;
}
.wrap .set01 {
	position:relative; display: flex; flex-direction: column;
	gap: 50px; width:100%; height: 100%; padding: 90px;
	background:#e8ecef url("../images/bracelet_pc.jpg") no-repeat center top; background-size:cover;
}

.wrap .logo_set {}
.wrap .logo_set a {display:block;width:111px;height: 59px;background: url("../images/logo_sky.png") no-repeat left top; background-size: contain;}

.wrap .tit_set {position: relative; z-index: 3;}
.wrap .tit_set .tit {color: #1CABE2;font-size: 41px;line-height: 140%;font-weight: 900;letter-spacing: -0.04em;margin: 0 0 32px;}
.wrap .tit_set .txt {color: #121212;font-size: 17px;line-height: 150%;font-weight: 700;}
.wrap .tit_set div p, .wrap .tit_set div span {color: inherit;font-size: inherit;line-height: inherit;font-weight: inherit;vertical-align: baseline;}

.wrap .tit_set .txt_bg {position: relative;z-index: 0;display: inline-block;color: #fff;padding: 0 5px;margin: 0 1px;}
.wrap .tit_set .txt_bg::before {content: '';position: absolute;top: 50%;left: 50%;z-index: -1;width: 100%;height: 54px;background: #1CABE2;
	-webkit-transform: translate(-50%, calc(-50%));
	-moz-transform: translate(-50%, calc(-50%));
	-o-transform: translate(-50%, calc(-50%));
	transform: translate(-50%, calc(-50%));
}
.wrap .size_set .tit {position: relative;padding-left: 43px;margin-bottom: 15px;}
.wrap .size_set .tit::before {content:'';position: absolute;left: 0;top: 50%;z-index: 1;width: 22px;height: 2px;background: #1CABE2;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.wrap .size_set .tit p {color: #1CABE2;font-size: 18px;line-height: 22px;font-weight: 700;}
.wrap .size_set .txt p {color: #121212;font-size: 16px;font-weight: 400;line-height: 150%;}
.wrap .size_set div p, .wrap .size_set div span {color: inherit;font-size: inherit;line-height: inherit;font-weight: inherit;vertical-align: baseline;}
.wrap .size_set .txt p > span {display: block;color: #121212;font-size: 16px;font-weight: 400;line-height: 150%;margin-bottom: 10px;}
.wrap .size_set .txt p > span:last-child {margin-bottom: 0;}
.wrap .size_set .txt .bold {font-weight: 700;}

.wrap .btn_set {display: block;}
.wrap .btn_set .btn_cta {display: inline-block;width: 297px;height: auto;background: #1CABE2;padding: 22px 28px 21px 27px;margin: 0;}
.wrap .btn_set .btn_cta span {display: block;color: #fff;font-size: 18px;font-weight: 500;line-height: 140%;}
.wrap .btn_set .btn_cta span:nth-child(1) {margin-bottom: 3px;}
.wrap .btn_set .btn_cta span:nth-child(2) {font-size: 27px;font-weight: 900;letter-spacing: -0.02em;background: url('data:image/svg+xml,<svg width="14" height="22" viewBox="0 0 14 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.69531 2L10.4987 10.8034L1.69531 19.6068" stroke="white" stroke-width="4"/></svg>') no-repeat right center;background-size: auto 22px;padding-right: 40px;}



@media all and (max-width:750px){
	html {font-size:2.666666666666667vw;}
	.wrap {min-width:100%;}
	.w_pc {display:none;}
	.w_mobile {display:block;}

	.wrap {height: auto; background-color: #e8ecef; }
	.wrap .set01 {
		gap: 0; height: auto; padding: 4rem 0 4rem 2.4rem;
		background: url("../images/bracelet_mo.jpg") no-repeat right top;background-size: 100%;
	}

	.wrap .logo_set a {width: 7.6rem;height: 4rem;}

	.wrap .tit_set .tit {font-size: 2.1rem;margin: 5.5rem 0 2.1rem;}
	.wrap .tit_set .txt {font-size: 1.3rem;line-height: 160%;font-weight: 500;}
	.wrap .tit_set .txt_bg {padding: 0 0.2rem;margin: 0 1px;}
	.wrap .tit_set .txt_bg::before {height: 2.8rem;}
	.wrap .tit_set .txt p > span {display: block;margin-bottom: 1.3rem;}
	.wrap .tit_set .txt p > span:last-child {margin-bottom: 0;}

	.wrap .size_set {margin: 3.3rem 0 0;}
	.wrap .size_set .tit {padding-left: 0;margin-bottom: 0.8rem;}
	.wrap .size_set .tit::before {content: none;}
	.wrap .size_set .tit p {font-size: 1.4rem;line-height: 160%;letter-spacing: -0.04em;}
	.wrap .size_set .txt p {font-size: 1.3rem;font-weight: 300;line-height: 160%;letter-spacing: -0.04em;}
	.wrap .size_set .txt p > span {font-size: 1.3rem;font-weight: 300;line-height: 160%;letter-spacing: -0.04em;margin-bottom: 1rem;}

	.wrap .btn_set { margin: 4rem 0;}
	/* .wrap .btn_set {display: none;} */
}