@charset "utf-8";
@import url('//fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap');

body { margin:0; -ms-user-select:none; -moz-user-select:-moz-none; -khtml-user-select:none; -webkit-user-select:none; user-select:none; }
ul,li { padding:0; margin:0; }
p { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

.hank_animation { opacity:1; filter:alpha(opacity=100); -webkit-transform: translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0); -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; -ms-transition:all .5s ease; transition:all .5s ease; }
.hank_animation.before_move { opacity:0; filter:alpha(opacity=0); }
.hank_animation.before_move.move_left { -webkit-transform:translateX(-40px); -ms-transform:translateX(-40px); transform:translateX(-40px); }
.hank_animation.before_move.move_right { -webkit-transform:translateX(40px); -ms-transform:translateX(40px); transform:translateX(40px); }
.hank_animation.before_move.move_up { -webkit-transform:translateY(-40px); -ms-transform:translateY(-40px); transform:translateY(-40px); }
.hank_animation.before_move.move_down { -webkit-transform:translateY(40px); -ms-transform:translateY(40px); transform:translateY(40px); }
.hank_animation.after_move { -webkit-transform:none; -ms-transform:none; transform:none; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; -ms-transition:all .5s ease; transition:all .5s ease; }

#header { text-align:center; }
#header h1 { text-align:center; margin:0; padding:30px 0; }
#header h1 img { max-height:70px; }
#header nav { width:100%; height:40px; }
#header .hank_category { width:100%; background:#cdac39; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; -ms-transition:all .5s ease; transition:all .5s ease; }
#header .hank_category > ul { max-width:1000px; width:100%; margin:0 auto; display:table; }
#header .hank_category > ul > li { display:table-cell; width:20%; }
#header .hank_category > ul > li > a { display:block; color:#fff; line-height:40px; text-align:center; font-family:'Montserrat'; font-size:15px; -webkit-transition:all .1s ease; -moz-transition:all .1s ease; -o-transition:all .1s ease; -ms-transition:all .1s ease; transition:all .1s ease; }
#header .hank_category > ul > li.active > a { background:#987f2b; }

#header.top_fixed .hank_category { position:fixed; left:0; top:0; right:0; z-index:111; }

.main_title { text-align:center; padding:50px 0 50px; font-family:'Montserrat'; font-size:28px; letter-spacing:1px; margin:0; }

.slider_container { max-width:1500px; width:100%; margin:0 auto; }
.slider_container .swiper-container { padding:0 30px 30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.slider_container .swiper-slide img { width:100%; display:block; padding:0 30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.slider_container .swiper-container .swiper-button-prev { width:24px; height:40px; background-size:24px 40px; filter:brightness(0%); }
.slider_container .swiper-container .swiper-button-next { width:24px; height:40px; background-size:24px 40px; filter:brightness(0%); }
.slider_container .swiper-container .swiper-pagination-bullets { bottom:0; }
.slider_container .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet { width:12px; height:12px; margin:0 5px; }
.slider_container .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet-active { background:#987f2b; }

.txt_container { max-width:1400px; width:100%; margin:0 auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.txt_container > p { font-size:18px; font-family:'Roboto'; letter-spacing:0.5px; line-height:1.5; padding:30px 0; }
.txt_container > p.center { text-align:center; }

#main_about { padding:0 0 30px; }

#main_collection { background:#f8f8f8; padding:0 0 30px; }
#main_collection .txt_container > ul { width:100%; padding:30px 0; }
#main_collection .txt_container > ul > li { list-style-type:none; font-size:20px; line-height:2; font-family:'Roboto'; }

#main_order { padding:0 0 30px; }
#main_order .txt_container { }
#main_order .txt_container .table { display:table; width:100%; margin:0 auto; }
#main_order .txt_container .table > div { display:table-cell; width:50%; vertical-align:top; }
#main_order .txt_container .table h5 { font-family:'Montserrat'; font-size:25px; color:#001aff; }
#main_order .txt_container .table ul {}
#main_order .txt_container .table ul > li { list-style-type:none; font-family:'Roboto'; font-size:18px; line-height:1.5; }
#main_order .txt_container > p { padding:50px 0 30px; font-family:'Montserrat'; font-weight:bold; font-size:23px; color:#001aff; }

#main_contact { background:#f8f8f8; padding:0 0 30px; }
#main_contact .map { max-width:1380px; width:100%; margin:0 auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#main_contact .txt_container > ul { width:100%; padding:30px 0; }
#main_contact .txt_container > ul:after { clear:both; content:''; display:block; }
#main_contact .txt_container > ul > li { float:left; list-style-type:none; display:inline-block; vertical-align:top; width:30%; font-size:20px; line-height:2; }
#main_contact .txt_container > ul > li.addr { width:40%; }
#main_contact .txt_container > ul > li > strong { display:block; text-align:center; padding-bottom:10px; font-family:'Montserrat'; font-size:16px; }
#main_contact .txt_container > ul > li > p { display:block; text-align:center; margin:0; font-family:'Roboto'; word-break:break-all; line-height:1.3; }
/*
#main_contact .txt_container > ul > li > strong { display:inline-block; vertical-align:top; padding-right:10px; font-family:'Montserrat'; }
#main_contact .txt_container > ul > li > p { display:inline-block; vertical-align:top; margin:0; font-family:'Roboto'; word-break:break-all; }
*/
#footer { padding:50px 0; background:#f5f1e3; }
#footer .txt_container > p { font-family:'Montserrat'; color:#987f2b; margin:0; }

@media screen and (max-width:1400px) {
	.main_title { font-size:25px; }
	.txt_container { padding:0 20px; }
	.txt_container > p { font-size:15px; }

	#main_collection .txt_container > ul > li { font-size:16px; }
	#main_order .txt_container .table h5 { font-size:20px; }
	#main_order .txt_container .table ul > li { font-size:15px; }
	#main_order .txt_container > p { font-size:18px; }
	#main_contact .txt_container > ul > li { font-size:16px; }
	#main_contact .txt_container > ul > li > strong { font-size:14px; }
}

@media screen and (max-width:768px) {
	#header h1 { padding:10px 0; }
	#header h1 img { max-height:38px; }
	#header nav { height:35px;}
	#header .hank_category > ul { display:table; width:100%; }
	#header .hank_category > ul > li { display:table-cell; vertical-align:middle; height:35px; width:25%; }
	#header .hank_category > ul > li.active { background:#987f2b; }
	#header .hank_category > ul > li > a { font-size:13px; letter-spacing:-1px; line-height:1.2; }

	.main_title { font-size:22px; padding:20px 0 25px; }

	.slider_container .swiper-container { padding:0 15px 30px; }
	.slider_container .swiper-slide img { padding:0 15px; }
	.slider_container .swiper-container .swiper-button-prev { width:12px; height:20px; background-size:12px 20px; filter:brightness(0%); }
	.slider_container .swiper-container .swiper-button-next { width:12px; height:20px; background-size:12px 20px; filter:brightness(0%); }
	.slider_container .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet { width:8px; height:8px; margin:0 4px; }

	.txt_container { padding:0 15px; }
	.txt_container > p { font-size:14px; padding:10px 0; }

	#main_collection { background:transparent; }
	#main_collection .txt_container > ul > li { font-size:14px; }
	#main_order .txt_container .table { margin-top:20px; }
	#main_order .txt_container .table > div { display:block; width:100%; text-align:left; }
	#main_order .txt_container .table h5 { font-size:16px; margin:20px 0 10px;}
	#main_order .txt_container .table ul > li { font-size:14px; }
	#main_order .txt_container > p { font-size:16px; text-align:left; margin:0; padding:20px 0; }
	#main_contact { background:transparent; }
	#main_contact .map { padding:0 20px; }
	#main_contact .txt_container > ul > li { font-size:15px; display:block; width:100%; }
	#main_contact .txt_container > ul > li.addr { width:100%; }
	#main_contact .txt_container > ul > li:after { clear:both; content:''; display:block; }
	#main_contact .txt_container > ul > li > strong { float:left; width:100px; font-size:13px; text-align:left; }
	#main_contact .txt_container > ul > li > p { float:left; width:calc(100% - 100px); line-height:1.4; text-align:left; }
	#main_contact .txt_container > ul > li.addr > p { padding-top:4px; }

	#footer { padding:0px 0; }
}