@charset "utf-8";
/* -----------------------------------------
 	exterior [ top ]
 -----------------------------------------*/
.cn { text-align: center;}

@media (max-width: 500px) {
#co_exterior .txt50{ font-size: 7.5vw;}

}/*END*/
@media (max-width: 1100px) {
.exterior_top .txt_box p br{ display: none;}
}/*END*/

/* -----------------------------------------
 exterior_nav
 -----------------------------------------*/
#exterior_nav{ padding-bottom: 80px; margin-bottom: 80px; background: #f5f5f5;  text-align: center;}
#exterior_nav h2{ padding-top: 80px; padding-bottom: 80px; text-align: center; margin: 0 auto; display: inline-block;}
#exterior_nav nav ul{ display: flex;  justify-content: center; }
#exterior_nav nav ul li{ width: 33.333%; max-width: 533px; position: relative; z-index: 1;}
#exterior_nav nav ul li .img_box{ position: relative;}
#exterior_nav nav ul li .img_box .exterior_nav_img{ position: relative; width:35.5%; padding-top: 72px; margin: 0 auto; top: 0px; z-index: 2;  }
#exterior_nav nav ul li .img_box .exterior_nav_bg img{ width: 100%; position: relative; z-index: 2;}
#exterior_nav nav ul li:last-child .img_box .exterior_nav_bg::before{ content: ''; display: block; position: absolute; left: 50%; margin-left: -600%; width: 1000%; height: 100%; background: #494949; z-index: -2;}
#exterior_nav nav ul li:last-child{ z-index: 0;}
#exterior_nav nav ul li .img_box .exterior_nav_bg{  width: 100%;position: absolute; top: 0%; z-index: 0;}
#exterior_nav nav ul li .title_box{margin-top: -40px; display: flex; align-items: center; justify-content: center;}
#exterior_nav nav ul li .title_box h3{ font-size: 30px; line-height: 1; text-align: center; font-family: 'Times New Roman', Times, serif;}
#exterior_nav nav ul li .btn{ margin: 35px auto 0; text-align: center;}
#exterior_nav nav ul li .btn a{ padding: 14px 0; width: 160px; font-size:14px; letter-spacing: 2px; color: #fff; display: inline-block; background: #000; text-align: center; font-family: 'Times New Roman', Times, serif; text-decoration: none; position: relative; transition: 0.3s;}
#exterior_nav nav ul li .btn a:hover{ background: #444; }
#exterior_nav nav ul li .btn a::after{ content: ''; position: absolute; top: 0px; right: 14px; background: url(../img/arrow_w.svg) center center no-repeat; background-size: contain; width: 7px; height: 100%; transition: 0.3s; }
@media (max-width: 1600px) {
#exterior_nav nav ul li .img_box .exterior_nav_img{width:35.5%; padding-top: 4.5vw; }
#exterior_nav nav ul li .title_box{margin-top: -2.5vw;}
#exterior_nav nav ul li .btn{ margin: 2.2vw auto 0; }
}/*END*/
@media (max-width: 1100px) {
#exterior_nav h2{ padding-top: 65px; padding-bottom: 65px; }
#exterior_nav nav ul li .img_box .exterior_nav_img{width:45%; padding-top: 4.5vw; }
#exterior_nav nav ul li .title_box{margin-top: -3vw;}
#exterior_nav nav ul li .btn{ margin: 3vw auto 0; }
}/*END*/
@media (max-width: 640px) {
#exterior_nav{ padding-bottom: 60px; margin-bottom: 60px;}
#exterior_nav h2{ padding-top: 50px; padding-bottom: 50px; }
#exterior_nav nav ul li .img_box .exterior_nav_img{width:55%; padding-top: 12vw; }
#exterior_nav nav ul li .title_box{margin-top: -3vw;}
#exterior_nav nav ul li .title_box h3{ font-size: 5vw; }
#exterior_nav nav ul li .btn{ margin: 4vw auto 0; }
#exterior_nav nav ul li .btn a{ padding: 10px 0; width: 120px; font-size:12px; letter-spacing: 2px; color: #fff; display: inline-block; background: #000; text-align: center; font-family: 'Times New Roman', Times, serif; text-decoration: none; position: relative; transition: 0.3s;}
#exterior_nav nav ul li .btn a::after{ content: ''; position: absolute; top: 0px; right: 10px; background: url(../img/arrow_w.svg) center center no-repeat; background-size: contain; width: 6px; height: 100%; transition: 0.3s; }
}/*END*/
@media (max-width: 500px) {
#exterior_nav nav ul li .img_box .exterior_nav_img{width:55%; padding-top: 12vw; }
#exterior_nav nav ul li .title_box{margin-top: -3vw;}
#exterior_nav nav ul li .title_box h3{ font-size: 5vw; }
#exterior_nav nav ul li .btn{ margin: 4vw auto 0; }
#exterior_nav nav ul li .btn a{ padding: 10px 0; width: 100px; font-size:11px; letter-spacing: 2px; color: #fff; display: inline-block; background: #000; text-align: center; font-family: 'Times New Roman', Times, serif; text-decoration: none; position: relative; transition: 0.3s;}
#exterior_nav nav ul li .btn a::after{ content: ''; position: absolute; top: 0px; right: 6px; background: url(../img/arrow_w.svg) center center no-repeat; background-size: contain; width: 6px; height: 100%; transition: 0.3s; }
}/*END*/
@media (max-width: 380px) {
#exterior_nav{ padding-bottom: 50px; margin-bottom: 50px;}
#exterior_nav nav ul li .img_box .exterior_nav_img{width:55%; padding-top: 12vw; }
#exterior_nav nav ul li .title_box{margin-top: -2vw;}
#exterior_nav nav ul li .title_box h3{ font-size: 5.5vw; }
#exterior_nav nav ul li .btn{ margin: 5vw auto 0; }
#exterior_nav nav ul li .btn a{ padding: 10px 0; width: 80px; font-size:10px; letter-spacing: 1px; color: #fff; display: inline-block; background: #000; text-align: center; font-family: 'Times New Roman', Times, serif; text-decoration: none; position: relative; transition: 0.3s;}
#exterior_nav nav ul li .btn a::after{ content: ''; position: absolute; top: 0px; right: 6px; background: url(../img/arrow_w.svg) center center no-repeat; background-size: contain; width: 5px; height: 100%; transition: 0.3s; }
}/*END*/

/*
@media (max-width: 700px) {
#exterior_nav nav ul{ display: block;}
#exterior_nav nav ul li{ width: 100%; margin-top: 100px;}
#exterior_nav nav ul li:nth-child(1){  margin-top: 0px; }
#exterior_nav nav ul li .img_box .exterior_nav_img{ position: relative; width:40%; margin: 0 auto; }
#exterior_nav nav ul li .title_box{margin-top: 5px; height: 80px;}
#exterior_nav nav ul li .title_box h3{ font-size: 28px;}
#exterior_nav nav ul li .btn a{ padding: 12px 0; width: 150px; font-size:15px; letter-spacing: 2px; }
}/*END*//*
@media (max-width: 640px) {
#exterior_nav nav ul li{ width: 100%; margin-top: 80px;}
#exterior_nav nav ul li:nth-child(1){  margin-top: 30px; }
#exterior_nav nav ul li .title_box h3{ font-size: 26px;}
}/*END*/

/*[ on / off ]*/
#exterior_nav .x15{display:block;}
#exterior_nav .x1{display:none;}
@media (max-width: 1000px) {
#exterior_nav .x15{display:none;}
#exterior_nav .x1{display:block;}
}/*END*/

/*[ on / off ]*/
#exterior_nav .nav_bg_x15{display:block;}
#exterior_nav .nav_bg_x1{display:none;}
@media (max-width: 640px) {
#exterior_nav .nav_bg_x15{display:none;}
#exterior_nav .nav_bg_x1{display:block;}
}/*END*/



/*-------------------------------------------------
	Exterior 
--------------------------------------------------*/





/*-------- co_exterior_lead --------*/
/*-------- lead --------*/
#co_exterior_lead {padding: 80px 0 120px; width: 80%;max-width: 1150px;margin: 0 auto; text-align: center;}
#co_exterior_lead .title_box h2{margin-top: 0px;}
#co_exterior_lead .title_box h3{margin-top: 25px;}
#co_exterior_lead .txt_box{ text-align: left;}
#co_exterior_lead .txt_box p span{display: inline-block;}
#co_exterior_lead .title_box h3 br{display: block;}
@media (max-width: 480px) {
#co_exterior_lead .title_box h3 br{display: none;}
#co_exterior_lead .title_box h3 span{display: inline-block;}
}/*end*/
@media (max-width: 640px) {
#co_exterior_lead {padding: 60px 0 80px; width: 85%;}
}/*end*/
@media (max-width: 500px) {
#co_exterior_lead {padding: 50px 0 60px; width: 85%;}
}/*end*/
#co_exterior .wrap{ padding: 100px 0 120px; text-align: center;}
#co_exterior .wrap h2{ margin: 0 0 75px; font-size: 26px; line-height: 1; letter-spacing: 10px; font-family: Georgia, 'Times New Roman', Times, serif;}
#exterior_nav h2{ margin: 0; font-size: 26px; line-height: 1; letter-spacing: 3px; font-family: Georgia, 'Times New Roman', Times, serif;}
#co_exterior .wrap h4{ margin: 10px 0 25px; font-size: 22px; line-height: 1; letter-spacing: 5px; font-family: Georgia, 'Times New Roman', Times, serif;}
#co_exterior .wrap .img_box{ margin: 70px auto 0; width: 90%; }
#co_exterior .wrap .txt_box{ margin: 70px auto 0; width: 90%; max-width: 1050px; text-align: left;}
@media (max-width: 1400px) {
#co_exterior .wrap{ padding: 95px 0 110px; }
#co_exterior .wrap h2{ margin: 0 0 70px; font-size: 24px; letter-spacing: 9px; }
#exterior_nav h2{ margin: 0; font-size: 24px; letter-spacing: 3px; }
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 20px; letter-spacing: 5px;}
#co_exterior .wrap .img_box{ margin: 60px auto 0;}
}/*end*/
@media (max-width: 1200px) {
#co_exterior .wrap{ padding: 95px 0 110px; }
#co_exterior .wrap h2{ margin: 0 0 70px; font-size: 22px; letter-spacing: 9px; }
#exterior_nav h2{ margin: 0; font-size: 22px; letter-spacing: 2px; }
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 19px; letter-spacing: 5px;}
#co_exterior .wrap .img_box{ margin: 55px auto 0; width: 90%;}
#co_exterior .wrap .txt_box{ margin: 60px auto 0;}
}/*end*/
@media (max-width: 1000px) {
#co_exterior .wrap{ padding: 95px 0 100px; }
#co_exterior .wrap h2{ margin: 0 0 70px; font-size: 24px; letter-spacing: 9px; }
#exterior_nav h2{ margin: 0; font-size: 24px; letter-spacing: 2px; }
#co_exterior .wrap h3 br{ display: block;}
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 18px; letter-spacing: 5px;}
}/*end*/
@media (max-width: 640px) {
#co_exterior .wrap{ padding: 80px 0 90px; }
#co_exterior .wrap h2{ margin: 0 0 60px; font-size: 22px; letter-spacing: 9px; }
#exterior_nav h2{ margin: 0; font-size: 22px; letter-spacing: 2px; }
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 17px; letter-spacing: 4px;}
#co_exterior .wrap .txt_box{ margin: 50px auto 0;}
#co_exterior .wrap .img_box{ margin: 50px auto 0; width: 100%;}
}/*end*/
@media (max-width: 450px) {
#co_exterior .wrap{ padding: 70px 0 80px; }
#co_exterior .wrap h2{ margin: 0 0 50px; font-size: 20px; letter-spacing: 7px; }
#exterior_nav h2{ margin: 0; font-size: 20px; letter-spacing: 2px; }
#co_exterior .wrap h4{ margin: 10px 0 15px; font-size: 16px; letter-spacing: 3px;}
#co_exterior .wrap .txt_box{ margin: 40px auto 0;}
#co_exterior .wrap .img_box{ margin: 45px auto 0; width: 100%;}
}/*end*/


.h2_bar{ margin: 0 auto; padding: 0 10px 0 15px; display: inline-block; position: relative; text-align: center; display: inline-block;}
.h2_bar::before,
.h2_bar::after{ position: absolute; top: 50%; content: ''; display: block; width: 21px; height: 1px; background: #7f7f7f; }
.h2_bar::before{ right: 100%; }
.h2_bar::after{ left: 100%; }
@media (max-width: 1000px) {
.h2_bar{ margin: 0 auto; padding: 0 10px 0 15px; display: inline-block; position: relative; text-align: center; display: inline-block;}
}/*end*/

/*-------- ext_03 [ color ] --------*/
.ext_03 h3 { width: 90%; margin: 0 auto;}


/*-------- ext_04 [ color ] --------*/
.ext_04 ul{ width: 90%; max-width: 1150px; margin: 70px auto 0;}
.ext_04 ul li{ display: flex;}
.ext_04 ul li:nth-child(even){ display: flex;  flex-direction : row-reverse;}
.ext_04 ul li .li_img_box{ width: 50%;}
.ext_04 ul li .li_txt_box{ width: 50%;display: flex; align-items: center; justify-content: center;}
.ext_04 ul li .li_txt_box .txt_box_inner{ width: 62%; margin: 0 auto; text-align: center;}
.ext_04 ul li .li_txt_box .txt_box_inner p{ text-align: left;}
@media (max-width: 1400px) {
.ext_04 ul{ width: 90%; margin: 60px auto 0;}
}/*end*/
@media (max-width: 1200px) {
.ext_04 ul{ width: 90%; margin: 55px auto 0;}
}/*end*/
@media (max-width: 1000px) {
.ext_04 ul{ width: 90%; margin: 55px auto 0;}
.ext_04 ul li{ display: block;}
.ext_04 ul li:nth-child(even){ margin-top: 100px; display: block; }
.ext_04 ul li .li_img_box{ width: 50%; margin: 0 auto;}
.ext_04 ul li .li_txt_box{ margin-top: 40px; width: 100%;display: block; }
.ext_04 ul li .li_txt_box .txt_box_inner{ width: 80%; }
}/*end*/
@media (max-width: 640px) {
.ext_04 ul li .li_img_box{ width: 70%; margin: 0 auto;}
.ext_04 ul li .li_txt_box .txt_box_inner{ width: 90%; }
}/*end*/
/*-------- ext_06 [ color ] --------*/
.ext_06 h3 { width: 90%; margin: 0 auto;}
.ext_06 h3 .ext_06_br1{ display: block !important; }
.ext_06 h3 .ext_06_br2{ display: none !important; }
.ext_06 h3 .ext_06_br3{ display: none !important; }
@media (max-width: 1020px) {
.ext_06 h3 .ext_06_br1{ display: block !important; }
.ext_06 h3 .ext_06_br2{ display: block !important; }
.ext_06 h3 .ext_06_br3{ display: none !important; }
}/*end*/
@media (max-width: 800px) {
.ext_06 h3 .ext_06_br1{ display: block !important; }
.ext_06 h3 .ext_06_br2{ display: block !important; }
.ext_06 h3 .ext_06_br3{ display: block !important; }
}/*end*/
/*-------- ext_07 [ color ] --------*/
.ext_07 h3 { width: 90%; margin: 0 auto;}
.ext_07 h3 .ext_07_br1{ display: block !important; }
.ext_07 h3 .ext_07_br2{ display: none !important; }
.ext_07 h3 .ext_07_br3{ display: none !important; }
@media (max-width: 860px) {
.ext_07 h3 .ext_07_br1{ display: block !important; }
.ext_07 h3 .ext_07_br2{ display: block !important; }
.ext_07 h3 .ext_07_br3{ display: none !important; }
}/*end*/
@media (max-width: 800px) {
.ext_07 h3 .ext_07_br1{ display: block !important; }
.ext_07 h3 .ext_07_br2{ display: block !important; }
.ext_07 h3 .ext_07_br3{ display: block !important; }
}/*end*/

/*-------- ext_08 [ color ] --------*/
.ext_08_br1{ display: block !important; }
.ext_08_br2{ display: none !important; }
@media (max-width: 640px) {
.ext_08_br1{ display: block !important; }
.ext_08_br2{ display: block !important; }
}/*end*/

/*-------- ext_08 [ color ] --------*/
.ext_end{ width: 100%; margin: 0 auto; padding: 100px 0 100px; text-align: center; }
.ext_end p{ width: 90%; margin: 0 auto;}
.ext_end p br{ display: block !important; }
@media (max-width: 970px) {
.ext_end p br{ display: none !important; }
.ext_end{ width: 100%; margin: 0 auto; padding: 80px 0 80px; text-align: left; }
}/*end*/
@media (max-width: 640px) {
.ext_end p br{ display: none !important; }
.ext_end{ width: 100%; margin: 0 auto; padding: 70px 0 70px; text-align: left; }
}/*end*/
.bg_col{background: #f5f5f5;}
.bg_col_grd1{background: linear-gradient(to bottom, #f5f5f5 0%, #fff 100%);}
.bg_col_grd2{background: linear-gradient(to bottom, #fff 0%, #f5f5f5 100%);}


/*-------------------------------------------------
	ks1969 
--------------------------------------------------*/
/*-------- ext_02 --------*/
@media (max-width: 640px) {
.ks1969 .ext_02 h3 span{ display: block;}
.ks1969 .ext_03 h3 span{ display: block;}
}/*end*/

.ks1969 .ext_05 h3 .br01{ display: block !important;}
.ks1969 .ext_05 h3 .br02{ display: none !important;}
@media (max-width: 640px) {
.ks1969 .ext_05 h3 .br01{ display: none !important;}
.ks1969 .ext_05 h3 .br02{ display: block !important;}
}/*end*/



/*-------------------------------------------------
	vanac 
--------------------------------------------------*/
/*-------- vanac_04 [ SIDE ] --------*/
.vanac_04 .txt_box{ width: 670px !important; margin-top: -140px !important;}
@media (max-width: 1550px) {
.vanac_04 .txt_box{ width: 670px !important; margin-top: -9vw !important;}
}/*end*/
@media (max-width: 1000px) {
.vanac_04 .txt_box{ width: 80% !important; max-width: 670px !important; margin-top: -5vw !important;}
}/*end*/
.vanac h3 {text-align: center; }
.vanac h3 span{display: block; text-align: center; }

/*-------- vanac_04 [ BRACELET ] --------*/
.vanac_06 { margin: 0 !important; padding-bottom: 0 !important;}
.vanac_06 h2{ margin: 0 !important; }
.vanac_06 .vanac_06_box{ margin: 60px auto 0 !important; width: 90%; max-width:1250px; background: #; display: flex; align-items: center; justify-content: ;  flex-direction : row-reverse; }
.vanac_06 .vanac_06_box .txt_box{ width: 35% !important; margin: 0 8% 0 10% !important; background: #;}
.vanac_06 .vanac_06_box .img_box{ width: 44% !important; margin: 0 !important; background: #;}
.vanac_06 .vanac_06_box .txt_box h3{ width: 110%; background: #; text-align: left !important; margin: 0 !important;}
.vanac_06 .vanac_06_box .txt_box h3 span{text-align: left !important;}
@media (max-width: 1000px) {
.vanac_06 .vanac_06_box{ display: block; }
.vanac_06 .vanac_06_box .txt_box{ width: 100% !important; margin: 0 0 40px 0 !important; background: #;}
.vanac_06 .vanac_06_box .img_box{ width: 85% !important; margin: 0 auto !important; background: #;}
.vanac_06 .vanac_06_box .img_box img{ margin-left: 3vw;}
.vanac_06 .vanac_06_box .txt_box h3{ width: 100%;  text-align: center !important; margin: 0 !important;}
.vanac_06 .vanac_06_box .txt_box h3 span{text-align: center !important; display: inline-block !important;}
}/*end*/
@media (max-width: 640px) {
.vanac_06 .vanac_06_box .txt_box h3 span{ display: block !important;}
}/*end*/