@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;} */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}

html{scroll-behavior: smooth;background:url(../images/layout2.jpg)bottom center no-repeat fixed,url(../images/bg.jpg)top center repeat;}
header{position: absolute;top: 0;left: 0; z-index: 1;}
body{background-color: transparent !important;}

:root {
	--PV-font: #00216a; /* 文字色-灰 */
	--PV-eslite: #e85441; /* 誠品線上標準色 */
	--layout-color1: #111111;
	--layout-color2: #333333;
	--layout-color3: #555555;
	--layout-color4: #777777;
	--layout-color5: #999999;
	--layout-color6: #aaaaaa; 
}

/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
@media screen and ( max-width: 991px ){
.WRAPPER{ min-width:100%;}
header{position: relative;}
}
.container { overflow: hidden; }
/* .topbox { position: relative; width: 1200px; margin: auto;} */
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/* 
.block{ margin: 0 auto; max-width: 1920px; padding: 1px 0;}
.bg_1200{ width:1200px; min-width:1200px; margin:0 auto;} */

/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	.block{ margin: 0 auto; max-width: 100%; padding: 2vw 0;}
	/* .bg_1200{ width:100%; min-width:100%; margin:0 auto;} */
	.titleC{ margin: 0px; padding: 5vw 2vw 2vw;}
}

/*--  版面微調  --*/

@media screen and ( max-width: 991px ){}

/*--  共通設定  --*/
@media screen and ( max-width: 991px ){}

/*--  0.kv   --*/

.title-item{ position: absolute;z-index: 90;}
.title01{  width: calc((537 / 1920) * 100%); top: calc((29 /740) * 100%); left: calc((627 / 1920) * 100%);}
.title02{  width: calc((493 / 1920) * 100%); top: calc((210 /740) * 100%); left: calc((715 / 1920) * 100%);}
.title03{  width: calc((361 / 1920) * 100%); top: calc((40 /740) * 100%); left: calc((330 / 1920) * 100%);}
.title04{  width: calc((194/ 1920) * 100%); top: calc((120 /740) * 100%); left: calc((1273 / 1920) * 100%);}
.title05{  width: calc((169/ 1920) * 100%); top: calc((226 /740) * 100%); left: calc((1291 / 1920) * 100%);}
.title06{  width: calc((65 / 1920) * 100%); top: calc((263 /740) * 100%); left: calc((234 / 1920) * 100%);}
.title07{  width: calc((1920/ 1920) * 100%); top: calc((390 /740) * 100%); left: calc((0 / 1920) * 100%);background: url(../images/cars1.png)repeat-x;height: 163px;animation: cloud 30s 0s linear infinite;background-position: 0 0;background-size: 100%;}
.title08{  width: calc((1920/ 1920) * 100%); top: calc((520 /740) * 100%); left: calc((0 / 1920) * 100%);background: url(../images/cars2.png)repeat-x;height: 163px;animation: cloud2 30s 0s linear infinite;background-position: 0 0;background-size: 100%;}

@-webkit-keyframes cloud {0% {background-position: 0 0;} 100% {background-position: -2097px 0; }}
@-webkit-keyframes cloud2 {0% {background-position: 0 0;} 100% {background-position: 2097px 0; }}

/*--  0.攻略   --*/
.notice{text-align: center;padding: 10px 0 5px;font-size: 0.9rem;line-height: 1.2rem;color: #fff;letter-spacing:0.5px;}

@media screen and ( max-width: 991px ){
.notice{padding: 1vw 5vw;}
}


/*--  0.攻略   --*/
.block0{background:url(../images/bg5.jpg);padding-bottom: 10px;}
.block0 .blk_body{background:transparent;border: 0px #ffffff solid;}
.block0 .keywordB .keywordA{margin: 5px;}
.block0 .keywordB .keywordA li{background: url(../images/bg4.jpg);width: 135px;height: 135px;padding: 0;display: flex;justify-content: center;align-items: center;}
.block0 .keywordB .keywordA li a{font-size: 22px;font-weight: 500;}
.block0 .keywordB .keywordA li:hover{background: url(../images/bg3.jpg);}


@media screen and ( max-width: 991px ){
.block0 .keywordB .keywordA li{width: 22vw;height: 22vw;}
.block0 .keywordB .keywordA{margin: 5px auto;}
}

/*--  0.區塊   --*/
.blk_body{background:url(../images/bg2.jpg);border: 2px #ffffff solid;border-radius: 20px;}
.blk_item{background:url(../images/bg1.jpg);width: 1180px;border-radius: 15px;border: 2px #fff solid;}

@media screen and ( max-width: 991px ){
	.blk_item{width: 100%;border-radius: 10px;border: 0px #fff solid;}
	.tips a{width: 46vw;}
}

/*--  標題   --*/
.blk_head{background: url(../images/titlec.png)top center no-repeat;height: 211px;padding-top: 25px;}
.btt{color: #fff;font-size: 60px;padding: 0 0 0px 0;display:flex;align-items: center;justify-content: center;flex-direction: column;}
.stt{color: #fff;font-size: 50px;padding: 15px 0 0 0;display: flex;align-items: center;justify-content: center;flex-direction: column;background: url(../images/titlec2.png)top center no-repeat;width: 912px;height: 122px;margin: -20px auto 20px;}
.stt::before{content: '';background: url(../images/before.png)bottom center no-repeat;width: 240px;height: 50px;display: inline-flex;position: relative;margin: 0 -15px 0 0;left: -15px;display: none;}
.stt::after{content: '';background: url(../images/after.png)bottom center no-repeat;width: 240px;height: 50px;display: inline-flex;position: relative;margin: 0  0 0 -15px;right:-15px;display: none;}

@media screen and ( max-width: 991px ){
.tips{margin: 0 auto;}
.blk_head{background: url(../images/titlecm.png)top center no-repeat;height:29vw;margin-bottom:0;background-size: 100%;}
.btt{padding: 0 0 12vw 0;}
.btt{letter-spacing: 0px;font-size: 9vw;}

.stt{margin: 0 auto 2vw;background: url(../images/titlec2m.png)top center no-repeat;height:22vw;margin-bottom:0;background-size: 95%;margin-top: -5vw;}
.stt{font-size: 8vw;}
.stt::before{content: '';background: url(../images/before-m.png)bottom center no-repeat;width:14vw;height: 8vw;display: inline-flex;margin: 0 -1vw 0 0;left:1vw;background-size: contain;}
.stt::after{content: '';background: url(../images/after-m.png)bottom center no-repeat;;width:14vw;height: 8vw;;display: inline-flex;margin: 0  0 0 -1vw;right:1vw;background-size: contain;}
}


/*--  1.   --*/


.subtitle1{background: url(../images/sub-bg1.png)top center no-repeat;width: 100%;height: 94px;position: relative;margin:50px 0 0 190px!important;}
.subtitle1.go_btn a{background: transparent;color: #00216a;font-size: 40px;font-weight: 700;padding-bottom: 33px;}
.subtitle2{background: url(../images/sub-bg2.png)top center no-repeat;width: 100%;height: 94px;;}
.subtitle2.go_btn a{background: transparent;color: #00216a;font-size: 40px;font-weight: 700;padding-bottom: 33px;}

.banner_3pcs{position: relative;margin-top: -120px !important;}
.banner_3pcs ul{align-items: flex-end}

.banner_3pcs li:nth-child(1) {width: 376px;}
.banner_3pcs li:nth-child(2),.banner_3pcs li:nth-child(3){width: 273px;height: 273px;}

.banner_3pcs li:nth-child(1) img{width:367px;height: 412px;}
.banner_3pcs li:nth-child(2) img,.banner_3pcs li:nth-child(3) img{width: 273px;height: 273px;background: #fff;object-fit: contain;}


@media screen and ( max-width: 991px ){


.subtitle1{background: url(../images/sub-bg1.png)top center no-repeat;width: 90vw;height:auto;position: relative;margin:2vw auto!important;background-size: 100%;}
.subtitle1.go_btn a{font-size: 8vw;font-weight: 700;padding-bottom: 5vw;}
.subtitle2{background: url(../images/sub-bg2.png)top center no-repeat;width: 90vw;height:auto;position: relative;margin:2vw auto!important;background-size: 100%;}
.subtitle2.go_btn a{font-size: 8vw;font-weight: 700;padding-bottom: 5vw;}
.banner_3pcs li:nth-child(1) {width: 89vw;}
.banner_3pcs li:nth-child(2),.banner_3pcs li:nth-child(3){width: 44vw;height:44vw;}

.banner_3pcs li:nth-child(1) img{width:89vw;height: fit-content;}
.banner_3pcs li:nth-child(2) img,.banner_3pcs li:nth-child(3) img{width: 44vw;height: 44vw;}

.banner_3pcs{position: relative;margin: 2vw auto 5vw!important;}
.banner_3pcs ul{align-items: stretch;justify-content: center;}

}

/*--  2.   --*/

.hightlightAd-text li:nth-child(1) h4,.toptitle .font h4{background: url(../images/bg3.jpg);}
.hightlightAd .font h4,.keywordC .round_5p .font,.go_btn a{background: url(../images/bg3.jpg);}
.keywordC .round_5p img{border: 4px var(--PV-eslite) solid;background: #fff;}
.box-mix ul.quotes li{background: url(../images/bg5.jpg);}
.hightlight .font h4{background:url(../images/bg4.jpg) ;}
ul.crosswise_3p_for2p{background: url(../images/cross.png)center 0px no-repeat;}

.keywordB .keywordA li{border: 2px #fff solid;}

.photograph{width: 1160px;}

@media screen and ( max-width: 991px ){


ul.crosswise_3p_for2p{background: transparent;}
.photograph{width: 100%;}
}


/*--  3.   --*/

@media screen and ( max-width: 991px ){}


/*--  4.   --*/

@media screen and ( max-width: 991px ){}


/*--  5.   --*/

@media screen and ( max-width: 991px ){}

/*--  6.   --*/

@media screen and ( max-width: 991px ){}


/*--  7.   --*/

@media screen and ( max-width: 991px ){}


/*--  8.   --*/

@media screen and ( max-width: 991px ){}


/*--  9.   --*/

@media screen and ( max-width: 991px ){}


/*--  10.   --*/

@media screen and ( max-width: 991px ){}



/*--  menu.   --*/

.menustyle2{background: url(../images/bg5.jpg);width: 140px;}
.menustyle2 li:nth-child(1){background: url(../images/bg4.jpg);}
/* .menustyle2 .nav > *{border-bottom: 0.5px solid #fff;} */
.menustyle2 a{color: #fff;}
.menustyle2 .nav-link:focus, .menustyle2 .nav-link:hover,.menustyle2 .nav-link.active{color: #fff;background:url(../images/bg3.jpg);}
@media screen and ( max-width: 991px ){
	.blk_pre .tips a{padding: 0.5vw;}
		.go_btn{gap: 1vw;}
		.menustyle2{width: 100%;}
}



/*--永久改動--*/
.hightlight img,.toptitle img,.circle img,.published img,.hightlight_5p img,.circle_5p img,.scene img{object-fit: contain;}
.slick-dots li button:before{font-size:32px!important;color:#fff!important;}
.menustyle2 .nolink:hover,.menustyle2 .nolink a:hover,.menustyle2 .nolink a.active{transform: scale(1)!important;background: url(../images/bg4.jpg);}

@media screen and ( max-width: 991px ){
/* .baseline .font{padding-top: 1vw;} */
		}