.top_black header > div {background-color:#fff;  border:1px solid #333; }
.top_black header ul li a {color:#333}
.top_black header > div > div > span a {color:#333; }
 
.top_black header svg {fill:#333}

#container {position:relative}



/********************/

#sub_vi {background:url('/common/img/sub_vi.png') no-repeat center; background-size:cover; width:100%; display:inline-block; height:100%; position:relative;   }
#sub_vi div.text_box {position:absolute; width:500px;  text-align:center; left:30%; top:50%; transform: translate(-50%, -50%);  color:#fff; font-size:1.5em; line-height:1.6}
#sub_vi div.text_box  h3 {font-size:3em; margin-bottom:20px; font-weight:400}

.sub_con {width:90%;  margin:0 auto; padding-top:280px; font-size:17px;    }
.sub_con.brand_section1 {  padding-top:127px;     }
.sub_con.product {max-width:1400px; padding-top:80px}
.sub_con.product_view { padding-top:190px}
.sub_con.record {max-width:1400px; padding-top:80px}
.sub_con.support {max-width:1400px; padding-top:80px}
.sub_con.member {max-width:1400px;  padding-top:150px}

@media all and (max-width:1400px) {
			.sub_con {width:90%}
			#sub_vi div.text_box {  font-size:1.3em; }
			#sub_vi div.text_box  h3 {font-size:2em;  }

 }


@media all and (max-width:900px) {
				.sub_con {padding-top:100px; font-size:16px}
				.sub_con.brand_section1 {padding-top:40px;}
				.sub_con.product {  padding-top:40px}
				.sub_con.product_view { padding-top:100px}
				.sub_con.record {  padding-top:40px}
				.sub_con.support { padding-top:40px}
				.sub_con.member {  padding-top:100px}

			#sub_vi {background:url('/common/img/sub_vi_m.png') no-repeat right; margin-bottom:20px; background-size:cover}

			#sub_vi div.text_box {font-size:1.05em; width:90%; left:5%; top:auto; bottom:20%; transform: none}
			#sub_vi div.text_box  h3 {font-size:8vw;  margin-bottom:10px }
		 
}


#product_vi {background:url('/common/img/product_vi.png') no-repeat center; background-size:cover; width:100%; display:inline-block; height:70%; position:relative; margin-bottom:0 }
#record_vi {background:url('/common/img/record_vi2.png') no-repeat bottom; background-size:cover; width:100%; display:inline-block; height:90%; position:relative; margin-bottom:0 }
#support_vi {background:url('/common/img/support_vi.png') no-repeat center; background-size:cover; width:100%; display:inline-block; height:70%; position:relative; margin-bottom:0 }


.guide  {font-size:5em; margin-bottom:20px}
.guide span {font-size:1em}

.sub_hr  {height:50px}
.sub_hr2  {height:100px}


@media all and (max-width:900px) {
	.guide  {font-size:2.5em; margin-bottom:15px;  justify-content:flex-start; }
	.sub_hr  {height:30px}
	.sub_hr2  {height:35px}


}

/**브랜드**/


.brand_section1 .flex_ul {width:100%; max-width:1300px; margin:0 auto;  display:flex; justify-content:space-between}
.brand_section1  .flex_ul li {width:48%; text-align:center;  line-height:1.5; font-size:1em }
.brand_section1  .flex_ul li h3 {font-size:1.8em; line-height:1.2; margin-top:15px;  font-weight:400; font-family: 'Sawarabi Mincho', serif;}
.brand_section1  .flex_ul li p:nth-child(3) {font-size:1.1em; margin-bottom:20px  }
.brand_section1  .flex_ul li p:nth-child(4) {font-size:1.1em;   }
.brand_section1  .flex_ul  .brand_frame_box {width:100%; padding-bottom:96.8%;   position:relative; }
.brand_section1  .flex_ul  .brand_frame_box iframe {border-radius:80px; }
.brand_section2  .h3_ani {font-size:3vw;  }
 

.brand_section2 .sub_heart {width:100%; background:url('/common/img/sub_heart.png') no-repeat center;  height:25vw;  background-size:55%; display:flex; align-items:center}
.brand_section2 .bottom_text_box {width:100%; display:flex;  justify-content:space-between; text-align:Center; max-width:1200px; margin:0 auto; margin-top:-5vw}
.brand_section2 .bottom_text_box div {width:27%;  font-size:1.1em; line-height:1.6}
.brand_section2 .bottom_text_box div:nth-child(2) {margin-top:200px; width:45% }
.brand_section2 .bottom_text_box div b {font-family: 'Sawarabi Mincho', serif; display:block; margin-bottom:5px; font-weight:400; font-size:1.1em}


.brand_section3 .text_box {font-size:1.2em; line-height:1.6; }
.brand_section3 .border_text {border:1px solid #333; font-size:1.7em;  padding:6px 50px; width:auto; display:inline-block; border-radius:50px }

.brand_section3 .photo_wrap {background-color:#fdfbee; border:1px solid #7e7e7e; border-radius:80px;  margin-top:50px; overflow:hidden; }
.brand_section3 .photo_wrap ul {display:flex;  justify-content:space-between;  width:100%; max-width:1200px; margin:0 auto; line-height:0;}
.brand_section3 .photo_wrap ul li {width:31.6%;  display:flex; flex-wrap:wrap}
.brand_section3 .photo_wrap ul li img:nth-child(1) {margin-bottom:30px}
.brand_section3 .photo_wrap ul li img:nth-child(2) {align-self:flex-end }
.brand_section3 .h3_ani span {font-style:italic}
 

@media all and (max-width:900px) {
			 


			.brand_section1 .flex_ul {flex-wrap:wrap}
			.brand_section1 .flex_ul li {width:100%;   }
 			.brand_section1 .flex_ul li  img {width:100%}
			.brand_section1 .flex_ul li:nth-child(2) {margin-top:30px}
			.brand_section1 .flex_ul li p:nth-child(3) {margin-bottom:10px; }
			.brand_section1  .flex_ul li p:nth-child(5) {font-size:.9em;    }
			
			
			.brand_section2 .h3_ani {font-size:6vw;  }
			.brand_section2 .sub_heart {height:40vw;  background-size:90%}
			.brand_section2 .bottom_text_box {flex-wrap:wrap; margin-top:30px}
			.brand_section2 .bottom_text_box div {width:100%;  font-size:.85em; margin-top:10px; }
			.brand_section2 .bottom_text_box div:nth-child(2) {margin-top:10px; width:100%}
			.brand_section2 .bottom_text_box div b {font-size:1.2em}

 			.brand_section3 .text_box {font-size:.9em;   }
			.brand_section3 .photo_wrap { border-radius:20px;  }

			.brand_section3 .border_text { font-size:1.15em; font-weight:500; padding:6px 20px;  margin:15px 0 20px 0 !important }
 
}


/***제품****/

ul.product_list {width:100%; display:flex;  flex-wrap:wrap; margin-top:70px; }
ul.product_list li { line-height:0;  position:relative;  overflow:hidden; box-sizing:border-box; width:31%; margin-right:3.5%}
ul.product_list li:nth-child(3n) {margin-right:0} 
ul.product_list li:nth-child(n + 4) {margin-top:2%}

ul.product_list li div.img {width:100%; padding-bottom:100%; display:inline-block;  background-color:#fff; text-align:center; position:relative; border:1px solid #333; border-radius:50px; overflow:hidden; box-sizing:border-box;  }
ul.product_list li div.img img {width:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);   transition: all 0.3s ease-out;} 

ul.product_list li div.img img:hover {max-width:none; width:110%}

 




ul.product_list li div.text {width:100%; line-height:1.3;  box-sizing:border-box; margin-top:20px;  font-size:1em; }
ul.product_list li div.text h4 { font-size:1.3em;}
ul.product_list li div.text span.info {width:100%; display:inline-block; margin-top:5px}
ul.product_list li a  {color:#222}

.label  {display:inline-block;  color:#333; border:1px solid #333; padding:4px 30px; border-radius:50px; font-size:1em; margin-top:10px;  transition: all 0.3s ease-out; }
.label:hover  {background-color:#333;  color:#fff; border:1px solid #333; }
.label.ver2 {background-color:#333; color:#fff }

.label a {width:100%; display:inline-block}


ul.product_list.view_type {margin-top:0}
ul.product_list.view_type li { border-radius:80px ; border:1px solid #7e7e7e; text-align:center; padding:20px;}
ul.product_list.view_type li div.img  {border:none; border-radius:0;  }
ul.product_list.view_type li div.text { margin-top:0;   }

ul.product_list.view_type li div.img img:hover {max-width:none; width:100%}


@media all and (max-width:900px) {
			ul.product_list {justify-content:space-between; margin-top:30px}
			ul.product_list li {  width:48%; margin-right:0; }
			ul.product_list li:nth-child(n + 3) {margin-top:20px}
			ul.product_list li div.text h4 { font-size:1.1em;}
			ul.product_list li div.text span.info {font-size:.9em}
			ul.product_list li div.img { border-radius:30px;   }

			ul.product_list.view_type li { border-radius:30px;  padding:15px;}
			.label  {  padding:3px 19px;  }


}


.view_info {width:100%; display:flex}
.view_info div.img {width:50%; padding-bottom:45%; display:inline-block;  text-align:center; position:relative; border:1px solid #333; border-radius:50px; overflow:hidden; box-sizing:border-box; }
 
.view_info div.text {width:47%; margin-left:auto}
.view_info div.text h3 {font-size:2em; display:block; margin-bottom:15px; margin-top:30px}
.view_info div.text p.pay {margin:20px 0; font-size:1.4em; font-weight:500}
.view_info div.text {line-height:1.4}

.view_info div.text a {text-align:center; width:300px; background-color:var(--main_c); display:inline-block;  color:#000;  line-height:40px; border-radius:50px; font-size:1.2em; font-family: 'Lexend', sans-serif; font-weight:500; margin-top:50px; transition: all 0.5s ease-out; }
.view_info div.text a:hover {background-color:#333; color:#fff}


@media all and (max-width:900px) {
	.view_info {flex-wrap:wrap}
	.view_info div.img {width:100%;  padding-bottom:90%;  border-radius:30px;  }
	.view_info div.text {width:100%; margin-top:30px}
	.view_info div.text h3 {font-size:1.3em;  margin-bottom:0; margin-top:20px}
	.view_info div.text p.pay {margin:10px 0; font-size:1.3em; }
   .view_info div.text a {width:100%; margin-top:30px }


}


/*****record****/

#record_vi {position:relative; }
#record_vi .h3_ani {font-size:3.2em;  color:var(--main_c);}
#record_vi .h3_ani span {text-transform:uppercase }
#record_vi .vi_text {text-align:center; position:absolute; left:50%; width:100%;  top:50%; transform: translate(-50%, -58%); }
#record_vi .vi_text img {margin:20px 0}
#record_vi  p {color:#fff; position:absolute; width:100%; left:0; bottom:10%; font-size:1.1em; line-height:1.5; text-align:center; }

@media all and (max-width:900px) {
		#record_vi .vi_text { transform: translate(-50%, -50%); }
		#record_vi .h3_ani {font-size:7vw;  color:var(--main_c);}
		#record_vi   p {display:none}

 
}


.record_bg {width:100%; height:45%; position:absolute; display:inline-block; top:0; background: linear-gradient( to bottom, #fbea92, #fff);}
.record_bg + .record_bg  {bottom:0; top:auto; background: linear-gradient( to top, #fbea92, #fff);}

.notice_bar {border:1px solid #333; background-color:#fff;  padding:15px 30px; border-radius:50px; box-sizing:border-box; width:100%; transition: all 0.3s ease-out;}
.notice_bar a {color:#111; width:100%; display:inline-block}
.notice_bar:hover {background-color:#59b26d; border:1px solid #59b26d}
.notice_bar:hover a {color:#fff}



ul.record_list {width:100%; display:flex; flex-wrap:wrap;  align-items:flex-start;  margin-top:35px;}
ul.record_list li { line-height:0;  position:relative;  overflow:hidden; box-sizing:border-box; width:31%; border:1px solid #333; background-color:#fff; border-radius:50px; padding:20px; box-shadow:2px 2px 3px rgba(0,0,0,.2); margin-right:3.5%;  transition: all 0.5s ease-out; }
ul.record_list li:nth-child(3n) {margin-right:0} 
ul.record_list li:nth-child(n + 4) {margin-top:3.5%}
ul.record_list li:hover {box-shadow:3px 3px 5px rgba(0,0,0,.3);}

ul.record_list li div.img {width:100%; padding-bottom:110%;  display:inline-block;    text-align:center; position:relative;  overflow:hidden; box-sizing:border-box; border-radius:50px; }
ul.record_list li div.img p {width:100%; height:100%; display:inline-block; position:absolute; left:50%; top:50%;   transition: all 0.5s ease-out; transform: translate(-50%, -50%); } 
ul.record_list li div.img p.none_img {background:url('/common/img/logo.png') no-repeat center; background-size:60%; background-color:#fff}
ul.record_list li:hover div.img p {width:115%; height:115%}
ul.record_list li:hover div.img p.none_img {width:100%; height:100%}


ul.record_list li div.text {width:100%; line-height:1.3;  box-sizing:border-box;   font-size:1em; padding:15px 10px }
ul.record_list li div.text h4 { font-size:1.2em; 
		width:100%; 
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-wrap: break-word; margin-top:10px}


ul.record_list li div.text span.info {font-size:.9em; box-sizing:border-box;  width:100%; color:#555; display:inline-block; margin-top:5px}


@media all and (max-width:900px) {
		ul.record_list {justify-content:space-between}
		ul.record_list li { background:none; width:48%; border:none; padding:0; box-shadow:none;    border-radius:30px;   margin-right:0}
		ul.record_list li div.img { border-radius:30px;   }
		ul.record_list li div.text h4 { font-size:1.1em;}
		ul.record_list li div.text span.info {font-size:.6em;  margin-top:0}

		ul.record_list li:nth-child(n + 3) {margin-top:20px}
		ul.record_list li:hover {box-shadow:none}

 

}

/*****record view****/

#record_wrap {width:100%; display:inline-block;  position:relative}


.sub_con.record {position:relative; z-index:99}

.record_view { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start} 
.record_view  .view_content {width:100%; max-width:1100px; margin:0 auto; margin-bottom:50px;}
.record_view  .view_content p {margin-bottom:30px}

.record_view  .write_box {width:48%; border:none; padding:0;  }
.record_view  .write_box .w_box {width:100%; border:1px solid #333; background-color:#fff; border-radius:20px; box-sizing:border-box; padding:20px}
.record_view  .write_box  textarea {width:100%; height:100px; font-size:1em; border:none; box-sizing:border-box;}
.record_view  .re_box {width:49%; border:1px solid #333; background-color:#fff; border-radius:20px; box-sizing:border-box; padding:30px 0}
.record_view  .re_box ul li {border-bottom:1px solid #ddd; padding:13px 20px; box-sizing:border-box;  color:#555; font-size:1em }
.record_view  .re_box ul li:first-child {padding-top:0}
.record_view  .re_box ul li:last-child {padding-bottom:0; border-bottom:none}
.record_view  .re_box ul li p {color:#111; margin-bottom:5px}
.record_view  .re_box ul li div {width:100%; display:flex; align-items:flex-start;}
.record_view  .re_box ul li div p {margin-left:auto; width:150px; border:1px solid #fff; flex-shrink:0; text-align:right; display:flex; justify-content:flex-end}
.record_view  .re_box ul li div p a {white-space:nowrap; margin-left:5px}


.record_view  .write_box  .no_mem_area {width:100%; margin-top:20px; display:flex; flex-wrap:wrap;  justify-content:space-between;  align-items:center; }
.record_view  .write_box  .no_mem_area input[type="text"] {width:49%; height:40px; border-radius:50px; padding-left:20px; font-size:1em; box-sizing:border-box; border:1px solid #333}
.record_view  .write_box  .no_mem_area input[type="password"] {width:49%; height:40px; border-radius:50px; padding-left:20px; font-size:1em; box-sizing:border-box; border:1px solid #333  }

.record_view  .write_box .no_mem_area div.agree_area {width:100%; box-sizing:border-box; border:1px solid #333; padding:20px; margin-top:20px; border-radius:20px; background-color:#fff; }
.record_view  .write_box  .no_mem_area  textarea {width:100%; font-size:.95em; border:none; margin-top:10px; height:225px;}
.record_view  .write_box  .no_mem_area div.agree_area input {margin-right:10px}


@media all and (max-width:900px) {
		 
			.record_view  .re_box {width:100%; }
			.record_view  .write_box {order:2; width:100%; border:none; padding:0; margin-top:30px;}
			.record_view  .re_box ul li div {flex-wrap:wrap}
			.record_view  .re_box ul li div p {width:100%}

			.record_view  .write_box  .no_mem_area input[type="text"] {width:100%; margin-top:5px }

			.record_view  .write_box {display:flex; flex-wrap:wrap}
			.record_view  .write_box  .no_mem_area {  order:1; margin-top:0}
			.record_view  .write_box  .w_box {order:2; margin-top:20px}
}


.record_search_bar {width:100%; display:inline-block; background-color:#59b26d; position:relative; z-index:99; color:#fff; margin-top:-5px;  }
.record_search_bar .in {width:90%; max-width:1400px; display:flex;  align-items:center; justify-content:space-between; padding:10px 0; font-size:1.4em; margin:0 auto}
.record_search_bar .in p {display:flex; align-items:center }
.record_search_bar .in a { color:#fff;}
.record_search_bar .in a {display:flex; align-items:center }
.record_search_bar .in svg {fill:#fff; margin-right:10px}
.record_search_bar .in p:nth-child(1) {width:20%}
.record_search_bar .in p:nth-child(2) {width:60%;  justify-content:center; text-align:Center  }
.record_search_bar .in p:nth-child(3) {width:20%; justify-content:flex-end}
.record_search_bar .in form {width:20%; justify-content:flex-end}
.record_search_bar .in p.search {width:100%; border:1px solid #fff; border-radius:50px; overflow:hidden; position:relative}
.record_search_bar .in p.search svg {margin-left:10px; margin-right:5px; width:22px; height:22px}
.record_search_bar .in p.search input {background-color:#59b26d; border:none; width:calc(100% - 30px); height:40px; font-size:.97em; color:#fff;}
.record_search_bar .in p.search input::placeholder {font-size:.97em; color:#fff; }

.record_search_bar .in p.search input + span {opacity:0; position:absolute; right:20px; font-size:20px; }
.record_search_bar .in p.search input + span a {color:#fff}
.record_search_bar .in p.search input:focus + span {opacity:1}

.record_search_bar.view_top {margin-top:150px}
.record_search_bar.view_top .in p:nth-child(2) {padding:5px 0 }

.record_search_bar.bottom {margin-top:120px}

@media all and (max-width:900px) {
 

		.record_search_bar .in {font-size:1em;}

		.record_list_section .record_search_bar .in p:nth-child(3) {margin-top:5px}
		.record_list_section .record_search_bar .in {padding:15px 0;  }

		.record_search_bar .in p.search input { height:35px;  }
		.record_search_bar .in svg {margin-right:5px}

		.record_list_section .record_search_bar .in {flex-wrap:wrap;}
		.record_list_section .record_search_bar .in p:nth-child(1) {width:50%;  }
		.record_list_section .record_search_bar .in p:nth-child(2) {width:50%; justify-content:flex-end}
		.record_list_section .record_search_bar .in form {width:100%;margin-top:10px }
 		.record_list_section .record_search_bar .in p.search {width:100%;  }

		.record_search_bar.view_top {margin-top:90px}
		.record_search_bar.view_top .in { flex-wrap:wrap; padding:20px 0}
		.record_search_bar.view_top .in p:nth-child(1) {width:100%; justify-content:center }
		.record_search_bar.view_top .in p:nth-child(1) svg {width:18px; height:18px;  }
		.record_search_bar.view_top .in p:nth-child(2) {width:100%; margin:5px 0;  justify-content:center }
		.record_search_bar.view_top .in p:nth-child(3) {width:100%; justify-content:flex-end}
        .record_search_bar.view_top .in p:nth-child(3) input  {width:100%; }

        .record_search_bar.bottom {margin-top:50px}

 
}

 

.support_in {width:100%; max-width:1000px; margin:0 auto}

 
.contact .right_box  {display:flex; flex-wrap:wrap; justify-content:center;  width:50%}
.contact .right_box  p {width:auto; margin-left:0;   font-size:1.6em; line-height:1.4;   margin-top:30px;  margin-left:17%}
.contact .right_box svg {fill:var(--main_c)}

@media all and (max-width:900px) {
.contact .right_box  { width:100% }
		.contact .right_box  p { font-size:1.1em; line-height:1.4;  margin-left:0 }
		.contact  .write_box .flex_box p {width:100%}
		.contact  .write_box .flex_box p + a {margin-top:10px}

 
 
}


.member h4 {font-size:1.2em; text-decoration:underline}
.member div.c {position:relative}
.member div.c img {position:absolute;   max-height:100%;  top:50%; left:50%; transform: translate(-50%, -50%);}
.member div.c svg {  position:relative; z-index:9}
.member div.c h3.guide {  position:relative; z-index:9; }
.member div.c h3.guide + p {  position:relative; z-index:9}
.member hr.line {margin:40px 0}


.member .in_box {max-width:700px; margin:0 auto; width:100% }
.member .in_box h3.guide {font-size:3em;  }
.member .in_box center svg {fill:var(--main_c); width:130px; height:130px}
.member .agree {width:100%;}
.member .agree div {width:100%; display:flex; margin-bottom:8px;}
.member .agree div input {margin-right:10px}
.member .agree .pre_div {width:100%; height:200px; border-radius:20px; border:1px solid #7e7e7e;  font-size:.97em; line-height:1.3; color:#333; overflow:hidden }
.member .agree .pre_div pre {width:100%; height:200px; overflow:auto; padding:20px; box-sizing:border-box;  }

.mypage div.c h3.guide  {margin-bottom:65px}
.mypage .line {margin-bottom:78px; margin-top:30px}


@media all and (max-width:900px) {
		.member .in_box center svg {width:90px; height:90px}
		.member .in_box h3.guide {font-size:1.7em; margin-bottom:0}
		.member .in_box center + ul.tab {margin-top:20px}
		.member .agree .pre_div { height:150px; border-radius:10px;  }
		
		.mypage div.c h3.guide { margin-bottom:20px}
		.mypage .line {margin-bottom:30px; margin-top:20px}

}