/*공통*/
.sub_tit_com{ text-align:center; font-size:38px; font-weight:900; line-height:140%;  }
.sub_tit_com b{ font-weight:900; color:#e60012; }

/*브랜드 스토리*/
#story_section01{ position:relative; }
#story_section01 .img_box{ position:relative; text-align:right; font-size:0px;   }
#story_section01 .img_box > div{ display:inline-block; vertical-align:top; width:500px; height:500px; background-position:center; background-size:cover;  }
#story_section01 .img_box > div.img01{ background-image:url('/thema/Basic/img/story_img01.jpg'); margin-top:240px; margin-right:30px;   }
#story_section01 .img_box > div.img02{ background-image:url('/thema/Basic/img/story_img02.jpg'); margin-right:-300px;  }
#story_section01 .img_box  img{ position:absolute; bottom:0; right:170px;   }
#story_section01 .txt_box{ position:absolute; z-index:1; top:0; left:0;  padding-top:110px; }
#story_section01 .txt_box h4{ font-size:65px; line-height:120%; font-weight:900; margin-bottom:40px; }
#story_section01 .txt_box h4 span{ display:block;}
#story_section01 .txt_box h4 span.gray{ color:#ccc; }
#story_section01 .txt_box h4 span.red{ color:#e60012; }
#story_section01 .txt_box p{ font-size:32px; line-height:150%; font-weight:700; }

#story_section02{ position:relative; padding-bottom:80px; }
#story_section02 .txt_box{ padding-right:500px;}
#story_section02 .txt_box h4{font-size:26px; line-height:140%; font-weight:700; margin-bottom:35px;  }
#story_section02 .txt_box p{ font-size:16px; line-height:170%; }
#story_section02 .txt_box p span{ display:block; margin-bottom:35px; }
#story_section02 .txt_box p:last-child{ margin-top:60px; }
#story_section02 .txt_box p b{ font-size:20px; }
#story_section02 .img_box{ position:absolute; bottom:50px; right:-100px; width:500px; height:500px; padding-right:50px; padding-bottom:50px;  }
#story_section02 .img_box > div{ z-index:1; position:relative;  width:100%; padding-top:100%; background-position:center top; background-size:cover; background-image:url('/thema/Basic/img/story_img04.jpg');  }
#story_section02 .img_box:after{ content:""; position:absolute; bottom:0px; right:0px; border:10px solid #e2e2e2; width:calc(100% - 50px); height:calc(100% - 50px); }

#story_section03 h4{ font-size:42px; line-height:140%; font-weight:900; margin-bottom:60px; }
#story_section03 h4 b{ color:#e60012; }
#story_section03 ol li{ display:flex; flex-wrap:wrap; padding-bottom:60px; margin-bottom:90px;  }
#story_section03 ol li:last-child{ margin-bottom:0px; }
#story_section03 ol li:nth-child(even){ flex-direction: row-reverse;}
#story_section03 ol li > div{ position:relative;  width:50%; }
#story_section03 ol li:nth-child(odd) .img_box{ padding-right:80px; }
#story_section03 ol li:nth-child(even) .img_box{ padding-left:80px; }
#story_section03 ol li .img_box:after{ content:""; position:absolute;  width:100%; height:100%; background:#e7e7e7; bottom:-60px;  }
#story_section03 ol li:nth-child(even) .img_box:after{ right:-50%;}
#story_section03 ol li:nth-child(odd) .img_box:after{ left:-50%; }
#story_section03 ol li .img_box > div{ position:relative; z-index:1;   width:120%; height:450px;  background-position:center;  background-repeat:no-repeat; }
#story_section03 ol li:nth-child(even) .img_box > div{ margin-right:-20%; }
#story_section03 ol li:nth-child(odd) .img_box > div{ margin-left:-20%; }
#story_section03 ol li:nth-child(1) .img_box > div{ background-image:url('/thema/Basic/img/story_img05.jpg');  }
#story_section03 ol li:nth-child(2) .img_box > div{ background-image:url('/thema/Basic/img/story_img06.jpg');  }
#story_section03 ol li:nth-child(3) .img_box > div{ background-image:url('/thema/Basic/img/story_img07.jpg');  }
#story_section03 ol li:nth-child(4) .img_box > div{ background-image:url('/thema/Basic/img/story_img08.jpg');  }
#story_section03 ol li .txt_box{ display:flex; flex-wrap:wrap; align-items:center; }
#story_section03 ol li .tit_box small{ display:block;  font-size:40px; font-weight:700; line-height:100%; margin-bottom:5px; color:#ccc; }
#story_section03 ol li .tit_box small span{ color:#333; }
#story_section03 ol li .tit_box strong{ display:block; font-size:34px; line-height:140%;  margin-bottom:5px;  }
#story_section03 ol li .tit_box p{ font-size:18px; font-weight:700; line-height:160%; margin-bottom:30px;   }
#story_section03 ol li .content_box{ border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:20px 0;  }
#story_section03 ol li .content_box p{ font-size:16px; line-height:160%; }
#story_section03 ol li .content_box b{ display:block; font-size:18px; margin:40px 0 10px;  }

/*지점안내*/
.location_top{text-align:center;font-size:22px;line-height:1.6;border:8px solid #ddd; padding:55px;margin-bottom:70px;word-break:keep-all;}
.location_top strong{color:#e60012;}
.location_bnr{ height:400px; background:url('/thema/Basic/img/location_img.jpg') center no-repeat; background-size:cover;  }
.location_tit{ font-size:38px; line-height:120%; border-bottom:2px  solid #333; font-weight:700;  padding-bottom:20px;  }
.location_box{ display:flex; flex-wrap:wrap;  padding:60px 0; border-bottom:1px solid #ddd;  }
.location_box > strong{ width:320px;  font-size:30px; font-weight:700; line-height:130%;  }
.location_box > strong span{ display:block; font-size:20px;  }
.location_box > .content_box{ position:relative;  width:calc(100% - 320px); padding-right:200px;  }
.location_box > .content_box p{ font-size:18px; line-height:160%; margin-bottom:25px; }
.location_box > .content_box .dot_list li{ padding-left:100px; position:relative;  font-size:16px;  line-height:160%;  margin-bottom:7px; }
.location_box > .content_box .dot_list li:last-child{ margin-bottom:0px; }
.location_box > .content_box .dot_list li b{ padding-left:10px;  position:absolute; top:0; left:0;  }
.location_box > .content_box .dot_list li b:after{ content:""; position:absolute; top:7px; left:0; width:4px; height:4px; background:#e60012; border-radius:100%; }
.location_box > .content_box a{ position:absolute; right:0; bottom:0; width:190px; height:60px;  border:1px solid #ddd; padding:0 20px;  background-color:#fff; 
	background-image:url('/thema/Basic/img/location_ico.png'); background-repeat:no-repeat; background-position:right 20px center; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
.location_box > .content_box a span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); font-size:16px; font-weight:700; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; color:#333; }
.location_box > .content_box a:hover{ padding:0 50px 0 20px; text-align:left; background-color:#e60012; }
.location_box > .content_box a:hover span{  left:20px;  transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); color:#fff;  }

@media all and (max-width:1230px){
	/*프로덕트*/
	#story_section02{ padding-bottom:0px; }
	#story_section02 .img_box{ width:400px; height:400px; right:55px; bottom:50%; margin-bottom:-200px; padding-right:30px;  padding-bottom:30px;    }
	#story_section02 .img_box:after{  width:calc(100% - 30px); height:calc(100% - 30px)}

	#story_section03 ol li:nth-child(odd) .img_box{ padding-right:50px; }
	#story_section03 ol li:nth-child(even) .img_box{ padding-left:50px; }
}
@media all and (max-width:1024px){
	/*공통*/
	.sub_tit_com{ font-size:30px;  }

	/*브랜드 스토리*/
	#story_section01 .img_box > div{ width:350px; height:350px; }
	#story_section01 .img_box > div.img01{ margin-top:140px; margin-right:15px;   }
	#story_section01 .img_box > div.img02{ margin-right:-250px;  }
	#story_section01 .img_box  img{ position:absolute; bottom:0; right:80px;  width:20px;   }
	#story_section01 .txt_box{ position:absolute; z-index:1; top:0; left:0;  padding-top:70px; }
	#story_section01 .txt_box h4{ font-size:45px;  margin-bottom:20px; }
	#story_section01 .txt_box p{ font-size:25px; }
	
	#story_section02 .img_box{ position:relative; bottom:unset; right:unset; width:100%; margin:0 0 30px; height:auto; max-width:380px; }
	#story_section02 .txt_box{ padding-right:0px; }
	#story_section02 .txt_box h4{font-size:23px; margin-bottom:15px;  }
	#story_section02 .txt_box p{ font-size:14px; }
	#story_section02 .txt_box p br{ display:none; }
	#story_section02 .txt_box p span{ margin-bottom:20px; }
	#story_section02 .txt_box p:last-child{ margin-top:30px; }
	#story_section02 .txt_box p b{ font-size:18px; }
	
	#story_section03 h4{ font-size:35px;  margin-bottom:40px; }
	#story_section03 ol li{ padding-bottom:40px; margin-bottom:60px;  }
	#story_section03 ol li .img_box > div{ width:100%; }
	#story_section03 ol li:nth-child(odd) .img_box{ padding-right:30px; }
	#story_section03 ol li:nth-child(even) .img_box{ padding-left:30px; }
	#story_section03 ol li .img_box:after{ bottom:-40px;  }
	#story_section03 ol li:nth-child(even) .img_box > div{ margin-right:-0%; }
	#story_section03 ol li:nth-child(odd) .img_box > div{ margin-left:-0%; }
	#story_section03 ol li .tit_box small{ font-size:30px; }
	#story_section03 ol li .tit_box strong{  font-size:28px;}
	#story_section03 ol li .tit_box p{ font-size:16px; margin-bottom:20px;   }
	#story_section03 ol li .content_box{ padding:15px 0;  }
	#story_section03 ol li .content_box p{ font-size:14px; }
	#story_section03 ol li .content_box b{  font-size:16px; margin:20px 0 10px;  }

	/*지점안내*/
	.location_top{font-size:16px;margin-bottom:50px;padding:30px;border-width:5px;}
	.location_bnr{ height:300px;}
	.location_tit{ font-size:30px; padding-bottom:10px;  }
	.location_box{  padding:40px 0; }
	.location_box > strong{ width:220px; font-size:25px; padding-right:20px;  }
	.location_box > strong span{ font-size:18px; }
	.location_box > .content_box{   width:calc(100% - 220px); padding-right:170px;  }
	.location_box > .content_box p{ font-size:16px;  margin-bottom:15px; }
	.location_box > .content_box .dot_list li{ padding-left:80px; font-size:14px; margin-bottom:5px; }
	.location_box > .content_box a{ width:160px; height:50px; }
	.location_box > .content_box a span{ font-size:14px; }
 
}
@media all and (max-width:768px){
	/*공통*/
	.sub_tit_com{ font-size:23px;  }

	/*브랜드 스토리*/
	#story_section01 .img_box > div{ width:calc(50% - 7.5px); height:auto; padding-top:30%; min-height:150px;   }
	#story_section01 .img_box > div.img01{ margin-top:0px; margin-right:15px;   }
	#story_section01 .img_box > div.img02{ margin-right:0;  }
	#story_section01 .img_box  img{ display:none; }
	#story_section01 .txt_box{ position:static; padding-top:20px; }
	#story_section01 .txt_box h4{ font-size:30px;  margin-bottom:10px; }
	#story_section01 .txt_box p{ font-size:18px; }
	
	#story_section02 .img_box{ padding-right:20px; padding-bottom:20px; }
	#story_section02 .img_box:after{  width:calc(100% - 20px); height:calc(100% - 20px); border-width:7px; }
	#story_section02 .img_box > div{padding-top:70%; }
	#story_section02 .txt_box h4{font-size:20px; }
	#story_section02 .txt_box p{ font-size:13px; }
	#story_section02 .txt_box p span{ margin-bottom:15px; }
	#story_section02 .txt_box p:last-child{ margin-top:20px; }
	#story_section02 .txt_box p b{ font-size:16px; }

	#story_section03 h4{ font-size:28px;  margin-bottom:20px; }
	#story_section03 ol li{ padding-bottom:0px; margin-bottom:40px;  }
	#story_section03 ol li > div{ width:100%; }
	#story_section03 ol li .img_box{margin-bottom:20px; }
	#story_section03 ol li .img_box > div{padding-top:40%; height:auto;  min-height:200px;   }
	#story_section03 ol li:nth-child(even){ flex-direction:unset; }
	#story_section03 ol li:nth-child(odd) .img_box{ padding-right:0px; }
	#story_section03 ol li:nth-child(even) .img_box{ padding-left:0px; }
	#story_section03 ol li .img_box:after{ content:none; }
	#story_section03 ol li .tit_box small{ font-size:20px; }
	#story_section03 ol li .tit_box strong{  font-size:22px;}
	#story_section03 ol li .tit_box p{ font-size:14px; margin-bottom:10px;   }
	#story_section03 ol li .content_box{ padding:10px 0;  }
	#story_section03 ol li .content_box p{ font-size:13px; }
	#story_section03 ol li .content_box b{  font-size:14px; margin:15px 0 5px;  }

	/*지점안내*/
	.location_top{font-size:14px;margin-bottom:30px;padding:20px;}
	.location_bnr{ height:150px;}
	.location_tit{ font-size:23px; }
	.location_box{  padding:30px 0; }
	.location_box > strong{ width:100%; font-size:20px; margin-bottom:10px;  }
	.location_box > strong span{ font-size:16px; }
	.location_box > .content_box{   width:100%; padding-right:0px;  }
	.location_box > .content_box p{ font-size:14px; }
	.location_box > .content_box .dot_list li{ padding-left:70px; font-size:13px; }
	.location_box > .content_box a{ position:relative; display:block; margin:20px auto 0; }
}