@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;600&family=Noto+Serif+TC:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600;700&display=swap');

/*html{
	scroll-behavior:smooth;
}*/

/*html:has(.home){
    scrollbar-width:none;
}*/

body{
	font-family:'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:16px;
    font-weight:300;
	color:#FFFFFF;
    letter-spacing:1px;
	-webkit-text-size-adjust:none;
	image-rendering:-webkit-optimize-contrast;
    background:#000000;
}

a{
    color:#FFFFFF;
}

.webout{
	position:relative;
	max-width:2600px;
	margin:0 auto;
}

.article{
	overflow:clip;
}

.out{
	position:relative;
	padding:0 6%;
	margin:0 auto;
}

input, textarea, select{
    font-family:'Noto Sans TC','微軟正黑體',sans-serif;
    font-size:16px;
    font-weight:300;
    color:#000000;
}

:root{
    /*標題*/
    --title1:26px;
    --title2:20px;
    --title3:30px;
    --title4:40px;
    --title_line_h:1.5em;
    --serif:'Noto Serif TC',sans-serif;

    /*內頁與輔助 - special*/
    --sp_text:15px;
    --line_h:1.7em;
    --line_h2:2em;
    --normal:300;
    --bold:400;
    --radius1:10px;
    --radius2:20px;

    /*color-企業色*/
    --blue:#00239C; /*藍色*/
    --yellow:#F5A21B; /*黃色*/
}

/*HOME-----------------------------------------*/
.home .out{
    z-index:1;
}

.home #dot-nav{
    position:fixed;
    top:50%;
    left:30px;
    z-index:9;
    list-style:none;
    transform:translateY(-50%);
}

.home #dot-nav li a{
    position:relative;
    display:block;
    width:10px;
    height:10px;
    margin:20px 0;
    background:#ccc;
    transform:rotate(45deg);
}

.home #dot-nav li a.active{
    background:var(--yellow);
}

.home #dot-nav li a:before{
    position:absolute;
    top:-18px;
    left:15px;
    white-space:nowrap;
    transform:rotate(-45deg);
    transform-origin:top left;
    color:var(--yellow);
    opacity:0;
    pointer-events:none;
    transition:0.2s;
}

.home #dot-nav li:hover a:before{
    opacity:1;
    pointer-events:auto;
}

.home #dot-nav li:nth-child(1) a:before{
    content:"首頁";
}

.home #dot-nav li:nth-child(2) a:before{
    content:"品牌世界";
}

.home #dot-nav li:nth-child(3) a:before{
    content:"永恆珍藏";
}

.home #dot-nav li:nth-child(4) a:before{
    content:"非凡之選";
}

.home #dot-nav li:nth-child(5) a:before{
    content:"匠心之作";
}

.home #dot-nav li:nth-child(6) a:before{
    content:"專屬服務";
}

.home #dot-nav li:nth-child(7) a:before{
    content:"預約鑑賞";
}

.home .section{
    height:100vh;
    min-height:600px;
    position:relative;
    display:flex;
    align-items:center;
}

.title_box{
    display:flex;
    gap:1em;
    font-size:65px;
}

.title_box .title{
    font-family:var(--serif);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.title_box .title .tw{
    line-height:1.1em;
    font-weight:normal;
    writing-mode:vertical-lr;
    margin-bottom:0.2em;
}

.title_box .title .en{
    font-size:0.48em;
    line-height:1.3em;
    letter-spacing:normal;
    text-align:right;
}

.title_box .text{
    margin-top:1em;
}

.title_box .text p{
    max-width:260px;
    font-size:16px;
    line-height:var(--line_h2);
}

.title_box .text a{
    position:relative;
    display:block;
    font-size:14px;
    color:#F5A21B;
    line-height:40px;
    text-align:center;
    width:210px;
    border:rgba(255,255,255,0.3) 1px solid;
    margin-top:3em;
    transition:width 0.2s, border 0.2s;
}

.title_box .text a:hover{
    border:rgba(255,255,255,0.5) 1px solid;
}

.title_box .text a:before{
    content:"";
    position:absolute;
    top:60%;
    right:10px;
    width:14px;
    height:1px;
    background:#F5A21B;
}

.title_box .text a:after{
    content:"";
    position:absolute;
    top:60%;
    right:10px;
    width:7px;
    height:1px;
    background:#F5A21B;
    transform:rotate(45deg);
    transform-origin:right bottom;
}

.home .section .mb{
    display:none;
}

/*HOME_S1-----------------*/
.home .s1{
    position:relative;
    font-family:var(--serif);
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    aspect-ratio:877/453;
    min-height:0;
}

.home .s1 .video_out{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
}

.home .s1 video{
    width:100%;
    height:100%;
    pointer-events:none;
}

.home .s1 .tw{
    font-size:46px;
    letter-spacing:0.3em;
    margin:0.5em 0;
}

.home .s1 .en{
    position:relative;
    z-index:1;
    font-family:'EB Garamond', serif;
	font-size:42px; 
    line-height:1.5em;
    letter-spacing:normal;
    margin-top:-2.5em;
}

.home .s1 li:nth-child(2){
    position:absolute;
    left:0;
    bottom:15%;
    z-index:1;
    width:100%;
    text-align:center;
}

.home .s1 .pc{
	display:none;
}

.home .s1 li div{
    position:relative;
    display:block;
    width:30px;
    height:60px;
    border:#FFFFFF 1px solid;
    border-radius:30px;
    margin:0 auto 10px;
    cursor:pointer;
}

.home .s1 li div:before{
    content:"";
    position:absolute;
    bottom:25%;
    left:50%;
    height:50%;
    width:1px;
    background:#FFFFFF;
    animation:homearrow 1s infinite;
}

.home .s1 li div:after{
    content:"";
    position:absolute;
    bottom:25%;
    left:50%;
    height:15%;
    width:1px;
    background:#FFFFFF;
    transform:rotate(45deg);
    transform-origin:left bottom;
    animation:homearrow 1s infinite;
}

@keyframes homearrow{
    from{opacity:0;bottom:40%;}
    to{opacity:1;bottom:20%;}
}

@media only screen and (max-width:450px){
    .home .s1 .tw{
        font-size:32px;
    }

    .home .s1 .en{
        font-size:9.5vw;
    }
}

/*HOME_S2-----------------*/
.home .section .bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url("../images/home_s2_bg.jpg") center;
    background-size:cover;
}

.home .section .out{
    z-index:1;
    box-sizing:border-box;
}

.home .s2 .out{
    max-width:1600px;
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

.home .s2 .title_box{
    margin:0 30px 0 4%;
}

.home .s2 .image{
    max-width:850px;
}

.home .s2 img{
    width:100%;
}

/*HOME_S3-----------------*/
.home .s3 .out,
.home .s4 .out,
.home .s5 .out,
.home .s6 .out{
    max-width:1200px;
    width:100%;
    justify-content:flex-end;
}

.home .s3 .bg{
    background-image:url("../images/home_s3_bg.jpg");
}

.home .s3 .text p{
    max-width:300px;
}

/*HOME_S4-----------------*/
.home .s4 .out,
.home .s6 .out{
    justify-content:flex-start;
}

.home .s4 .bg{
    background-image:url("../images/home_s4_bg.jpg");
}

.home .s4 .text p{
    max-width:300px;
}

/*HOME_S5-----------------*/
.home .s5 .out{
    max-width:1100px;
}

.home .s5 .bg{
    background-image:url("../images/home_s5_bg.jpg");
}

/*HOME_S6-----------------*/
.home .s6 .bg{
    background-image:url("../images/home_s6_bg.jpg");
}

/*HOME_S7-----------------*/
.home .s7,
.services .mail{
    position:relative;
    background:#FFFFFF;
    color:#000000;
}


.home .s7:before,
.home .s7:after,
.brand .s5:before,
.brand .s5:after,
.services .mail:before,
.services .mail:after{
    content:"";
    position:absolute;
    background:#000000;
    z-index:2;
}

.home .s7:before,
.brand .s5:before,
.services .mail:before{
    top:100px;
    left:50%;
    width:245px;
    height:1px;
    margin-left:-1000px;
}

.home .s7:after,
.brand .s5:after,
.services .mail:after{
    top:0;
    left:50%;
    width:1px;
    height:100%;
    margin-left:-840px;
}

.home .s7 .out,
.services .mail .out{
    max-width:1500px;
    width:100%;
    height:100%;
    box-sizing:border-box;
}

.home .mail .out{
    max-width:1600px;
}

.home .s7 .in{
    max-width:1080px;
    height:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:8%;
    background:#FFFFFF;
    padding-right:40px;
    margin-right:-40px;
}

.home .s7 .title_box{
    margin-top:-160px;
}

.home .s7 .image,
.services .mail .image{
    position:absolute;
    top:0;
    right:50%;
    height:100%;
    clip-path:inset(0 23% 0 37%);
    transform:translateX(23%);
    margin-right:-1000px;
}

.home .s7 .image img,
.services .mail .image img{
    height:100%;
}

/*MAIL-----------------*/
.mail .box{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5%;
    align-items:flex-end;
}

#form.mail .title{
    font-size:var(--title2);
    font-weight:var(--bold);
    text-align:center;
    margin-bottom:1em;
}

.mail form{
    max-width:800px;
    width:100%;
    color:#000000;
}

.mail input,
.mail textarea,
.mail select{
    border:none;
}

.mail tr{
    position:relative;
}

.mail td{
    position:relative;
    border-bottom:rgba(0,0,0,1) 1px solid;
    padding-top:26px;
    padding-bottom:2px;
}

.mail td:first-child{
    width:4em;
}

.mail td input[type="text"],
.mail td select{
    width:100%;
    height:50px;
    padding:0 0 5px;
    background:#FFFFFF;
    box-sizing:content-box;
}

.mail textarea{
    width:100%;
    height:179px;
    padding:0;
    margin-top:10px;
}

.mail .subject td:last-child:after{
    content:"";
    position:absolute;
    bottom:25px;
    right:0;
    border-style:solid;
    border-width:6px 3px 0 3px;
    border-color:#000000 transparent transparent transparent;
    margin-top:-3px;
    pointer-events:none;
}

.mail .send,
.news.list .s2 .more{
    position:relative;
    width:210px;
    margin:3em 0 0 auto;
}

.mail .send:before,
.news.list .s2 .more:before{
    content:"";
    position:absolute;
    top:60%;
    right:10px;
    width:14px;
    height:1px;
    background:#000000;
}

.mail .send:after,
.news.list .s2 .more:after{
    content:"";
    position:absolute;
    top:60%;
    right:10px;
    width:7px;
    height:1px;
    background:#000000;
    transform:rotate(45deg);
    transform-origin:right bottom;
}

.mail .send input,
.news.list .s2 .more{
    font-size:14px;
    height:40px;
    color:#000000;
    background:#FFFFFF;
    border:rgba(0,0,0,0.3) 1px solid;
    width:100%;
    cursor:pointer;
    transition:0.2s;
}

.mail .send input:hover,
.news.list .s2 .more:hover{
    border:rgba(0,0,0,1) 1px solid;
}

.mail form .nofill td:last-child:before,
.mail form .format td:last-child:before{
	position:absolute;
	top:3px;
	right:0;
    z-index:1;
	color:#FFFFFF;
	padding:8px 10px;
	background:#CC0000;
	border-radius:5px;
	font-size:12px;
	line-height:1em;
	white-space:nowrap;
	pointer-events:none;
}

.mail form .nofill td:last-child:before{
	content:"此欄為必填";
}

.mail form .format td:last-child:before{
	content:"格式錯誤";
}

.mail form .nofill td,
.mail form .format td{
	border-bottom:#CC0000 1px solid !important;
}

.mail form .captcha td:last-child{
    vertical-align:middle;
    width:106px;
}

.mail form .captcha td img{
    width:106px;
    height:33px;
}

/*.fancybox-button--close{
    width:55px !important;
    height:55px !important;
    background:url("../images/fancybox_close.svg") center no-repeat !important;
    background-size:100% auto;
}*/

#form.mail{
    display:none;
}

.fancybox-slide{
	padding:60px 6px !important;
}

.fancybox-content{
    overflow:visible !important;
    margin-bottom:0 !important;
}

.fancybox-close-small{
    top:-60px !important;
    right:0 !important;
	background:var(--yellow) !important;
	opacity:1 !important;
	border-radius:50% !important;
	height:40px !important;
	width:40px !important;
	padding:5px !important;
	color:#FFFFFF !important;
}

.fancybox-close-small svg{
    display:block !important;
	width:30px !important;
	height:30px !important;
	transition:0.2s;
}

.fancybox-close-small:hover svg{
	transform:rotate(90deg);
}

.fancybox-button--arrow_left,
.fancybox-button--arrow_right{
    background:none !important;
}

.fancybox-button--arrow_left svg,
.fancybox-button--arrow_right svg{
    display:none !important;
}

.nGY2ViewerAreaPrevious{
    position:relative;
    padding:0 !important;
    width:55px !important;
    height:55px !important;
	opacity:1;
	transition:0.2s;
}

.fancybox-button:disabled{
    opacity:0.5 !important;
}

.fancybox-button--arrow_left div{
    margin-left:auto;
}

.ngy2viewerToolAction{
    opacity:1 !important;
}

.fancybox-button--arrow_left div:after,
.fancybox-button--arrow_right div:after,
.nGY2ViewerAreaPrevious:after{
    content:"";
    position:absolute;
    top:15px;
    width:25px;
    height:25px;
    border-style:solid;
    border-color:#FFFFFF;
    transform:rotate(45deg);
}

.fancybox-button--arrow_left div:after,
.nGY2ViewerAreaPrevious:after{
    left:20px;
    border-width:0 0 3px 3px;
}

.fancybox-button--arrow_right div:after{
    right:20px;
    border-width:3px 3px 0 0;
}

@media only screen and (max-width:1600px) and (min-width:1001px){
    .home .out,
    .footer .out{
        padding:0 60px;
    }
    
    .home .s2:before,
    .home .s2:after,
    .home .s7:before,
    .home .s7:after{
        display:none;
    }
    
    .home .s7 .image{
        margin-right:-900px;
    }
}

@media only screen and (max-height:800px){
    .home .s2:before,
    .home .s2:after,
    .home .s7:before,
    .home .s7:after{
        display:none;
    }
}

/*BRAND-----------------------------------------*/

/*BRAND_S1-----------------*/
.brand .s1:before{
    background-image:url("../images/brand_s1.jpg");
}

/*BRAND_S2-----------------*/
.brand .s2{
    position:relative;
    z-index:2;
    padding:60px 0;
}

/*BRAND_S3-----------------*/
.brand .s3,
.brand .s31{
    position:relative;
}

.brand .s3 .out,
.brand .s31 .out{
    max-width:1360px;
    z-index:1;
    height:750px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.brand .s31 .out{
    max-width:1200px;
    height:850px;
    align-items:flex-end;
}

.brand .s31 .out div{
    max-width:510px;
}

.brand .t1{
    font-family:var(--serif);
    font-size:var(--title3);
    font-weight:var(--normal);
    margin-bottom:2em;
}

.brand .t2{
    line-height:var(--line_h2);
}

.brand .s3 img.pc,
.brand .s31 img.pc{
    position:absolute;
    top:0;
    left:50%;
    margin-left:-1000px;
}

.brand .s3 .mb,
.brand .s31 .mb{
    display:none;
}

/*BRAND_S4-----------------*/
.brand .s4{
    background:url("../images/brand_s4.jpg") top center;
    background-size:cover;
}

.brand .s4 .out{
    max-width:1600px;
    display:flex;
    justify-content:space-between;
}

.brand .s4 .left{
    width:30%;
    max-width:390px;
    padding:200px 0;
}

.brand .s4 .right{
    width:60%;
    max-width:950px;
    border-left:var(--yellow) 1px solid;
    padding:130px 0;
}

.brand .s4 .right li{
    position:relative;
    line-height:var(--line_h2);
    padding-left:30px;
    margin-bottom:1.5em;
}

.brand .s4 .right li:after{
    content:"";
    position:absolute;
    top:12px;
    left:-6px;
    width:10px;
    height:10px;
    background:var(--yellow);
    transform:rotate(45deg);
}

.brand .s4 .right li:before{
    content:attr(data-year);
    position:absolute;
    top:0;
    left:-3em;
    font-family:var(--serif);
    font-size:var(--title1);
}

/*BRAND_S5-----------------*/
.brand .s5{
    position:relative;
    background:url("../images/brand_s5.jpg") top center;
    background-size:cover;
    color:#000000;
}

.brand .s5 .out{
    max-width:1500px;
    height:927px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.brand .s5 .t2{
    max-width:660px;
}

/*BRAND_S6-----------------*/
.brand .s6{
    position:relative;
}

.brand .s6 .out{
    z-index:1;
    max-width:1400px;
    height:770px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.brand .s6 .out div{
    max-width:605px;
}

.brand .s6 .pc{
    position:absolute;
    top:0;
    left:50%;
    margin-left:-1000px;
}

.brand .s6 .mb{
    display:none;
    transform:scaleX(-1);
}

/*STONES-----------------------------------------*/
.stones .title_box{
    font-size:52px;
}

@media only screen and (max-width:1560px) and (min-width:1281px){
    .stones .title_box{
         padding:0 10% 0 10%;
    }
}

/*STONES_LIST-----------------*/
.stones .list .out{
    max-width:1500px;
    display:flex;
    padding:0 0 5em;
}

.stones .list .section{
    position:relative;
    width:50%;
    padding:100px 20px;
    height:800px;
}

.stones .list .title_box{
    position:relative;
    z-index:3;
}

.stones .list .s1:before{
    content:"";
    position:absolute;
    top:0;
    left:100%;
    z-index:2;
    width:1px;
    height:100%;
    background:linear-gradient(#000000,#959595,#959595,#959595,#000000);
}

.stones .list .s1:after{
    content:"";
    position:absolute;
    top:50%;
    left:100%;
    z-index:1;
    width:146px;
    height:1px;
    background:#959595;
    transform:translateX(-50%);
}

.stones .list .text p{
    max-width:400px;
}

.stones .list .s2{
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
}

.stones .list .pc{
    position:absolute;
}

.stones .list .s1 .pc{
    left:50%;
    bottom:0;
    z-index:1;
    margin-left:-800px;
}

.stones .list .s2 .pc{
    right:50%;
    top:0;
    margin-right:-700px;
}

.stones .list .mb{
    display:none;
}

.stones .list + .area,
.collection .area{
    margin-top:0;
}

/*STONES_COLLECTION-----------------*/
.collection .title_box{
    font-size:65px;
}

/*STONES_COLLECTION_S1*/
.collection .s1{
    background:url("../images/collection_s1.jpg") bottom center;
    padding:130px 0;
}

.collection .s1 .title_box{
    justify-content:center;
}

/*STONES_COLLECTION_S2*/
.collection .s2{
    padding-bottom:60px;
}

.collection .s2 li{
    max-width:1200px;
    height:500px;
    margin:0 auto;
    display:flex;
    align-items:center;
}

.collection .s2 li:nth-child(odd){
    flex-direction:row-reverse;
}

.collection .s2 li .title_box{
    width:60%;
    z-index:1;
}

.collection .s2 li:nth-child(odd) .title_box{
    margin-left:auto;
}

.collection .s2 li .t1,
.master.list .s2 li .t1,
.services li .title_box .t1{
    font-family:var(--serif);
    font-size:var(--title3);
    font-weight:normal;
    margin-bottom:1em;
}

.collection .s2 li p{
    max-width:none;
}

.collection .s2 li img{
    position:absolute;
    width:880px;
    aspect-ratio:44/29;
}

.collection .s2 li:nth-child(odd) img{
    left:50%;
    margin-left:-900px;
}

.collection .s2 li:nth-child(even) img{
    right:50%;
    margin-right:-900px;
}

/*STONES_IN-----------------*/
.stones.in .out,
.master.in .out{
    max-width:1400px;
}

/*STONES_IN_S1*/
.stones.in .s1,
.master.in .s1{
    position:relative;
    overflow:hidden;
}

.stones.in .s1 img,
.master.in .s1 img{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-400px;
    transform:translateY(-50%);
}

.stones.in .s1 .out,
.master.in .s1 .out{
    z-index:1;
    height:700px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.stones.in .s1 .t1,
.master.in .s1 .t1{
    position:relative;
    font-size:var(--title1);
    font-family:var(--serif);
    color:#B4B4B5;
    font-weight:normal;
    align-self:flex-start;
}

.stones.in .s1 .t1:after,
.master.in .s1 .t1:after{
    content:"";
    position:absolute;
    top:50%;
    left:110%;
    width:150px;
    height:1px;
    background:#5C5C5C;
}

.stones.in .s1 .t2,
.master.in .s1 .t2{
    font-size:52px;
    font-family:var(--serif);
    font-weight:normal;
    margin:50px 0;
    padding-left:35px;
}

.stones.in .s1 .t2 div,
.master.in .s1 .t2 div{
    font-size:0.4em;
    margin-top:1em;
}

.stones.in .s1 .t3{
    max-width:730px;
    line-height:var(--line_h2);
    padding-left:35px;
}

/*STONES_IN_S2*/
.stones.in .s2{
    background:#FFFFFF;
    padding:80px 0;
    color:#000000;
}

.choose{
    position:relative;
    z-index:1;
    width:220px;
    color:#000000;
}

.choose div{
    position:relative;
    line-height:50px;
    border:#000000 1px solid;
    text-align:center;
    cursor:pointer;
}

.choose div:after{
    content:"";
    position:absolute;
    right:20px;
    top:50%;
    border-style:solid;
    border-width:6px 3px 0 3px;
    border-color:#000000 transparent transparent transparent;
    margin-top:-3px;
}

.choose ul{
    position:absolute;
    width:100%;
    background:#FFFFFF;
    border-style:solid;
    border-color:#000000;
    border-width:0 1px 1px 1px;
    box-sizing:border-box;
    transform-origin:top;
    transform:scaleY(0);
    transition:0.2s;
}

.choose div.active + ul{
    transform:scaleY(1);
}

.choose a{
    position:relative;
    display:block;
    color:#000000;
    text-align:center;
    padding:1em 0;
    transition:0.2s;
}

.choose a:hover{
    color:var(--blue);
}

.choose a:after{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    bottom:0;
    height:1px;
    background:#EDEDED;
}

.stones.in .s2 .box{
    max-width:1200px;
    margin:90px auto;
    display:grid;
    gap:60px 90px;
    grid-template-columns:1fr 1fr 1fr;
}

.stones.in .s2 .box img{
    width:100%;
    transition:opacity 0.2s;
}

.stones.in .s2 .box a:hover img{
    opacity:0.8;
}

.stones.in .s2 .box a div{
    font-size:20px;
    line-height:1.5em;
    color:#000000;
    text-align:center;
    margin-top:1em;
}

/*STONES_IN_S3*/
.stones.in .s3{
    background:linear-gradient(#EEEEEE,#FFFFFF);
    color:#000000;
    padding:140px 0;
}

.stones.in .s3 .out{
    display:flex;
}

.stones.in .s3 .word{
    min-width:400px;
}

.stones.in .s3 .splide{
    min-width:0;
    padding-bottom:70px;
}

.stones.in .s3 .splide img{
    width:100%;
}

.stones.in .s3 .splide__track{
    overflow:visible;
    clip-path:inset(0 -100vw 0 0);
}

.stones.in .s3 .splide__arrow{
    top:auto;
    bottom:0;
    transform:none;
    width:45px;
    height:45px;
    background:none;
    opacity:1;
}

.stones.in .s3 .splide__arrow--prev{
    left:2px;
}

.stones.in .s3 .splide__arrow--next{
    right:auto;
    left:60px;
}

.stones.in .s3 .splide__arrow svg{
    fill:#C8C9C9;
    height:60%;
    width:60%;
    transition:0.2s;
}

.stones.in .s3 .splide__arrow:hover svg{
    fill:#000000;
}

.stones.in .s3 .t1{
    font-family:var(--serif);
    font-size:35px;
    font-weight:normal;
    margin-bottom:1em;
}

.stones.in .s3 .t2{
    max-width:350px;
    line-height:var(--line_h2);
}

/*STONES_INFO-----------------*/

/*STONES_INFO_S1*/
.stones.info .s1{
    padding:90px 0;
    background:#FFFFFF;
}

.stones.info .s1 .out{
    max-width:1500px;
    display:grid;
    justify-content:space-between;
    grid-template-columns:49% 44%;
}

.stones.info .s1 iframe{
    width:100%;
    aspect-ratio:16/9;
    margin-bottom:60px;
}

/*STONES_INFO_S1_LEFT*/
.stones.info .s1 .left img{
    width:100%;
}

.stones.info .s1 .top .splide__arrow{
	width:40px;
	height:40px;
	opacity:1;
	background:#FFFFFF;
	transition:0.2s;
}

.stones.info .s1 .top .splide__arrow:hover{
	background:var(--yellow);
}

.stones.info .s1 .top .splide__arrow svg{
	fill:#888888;
	transition:0.2s;
}

.stones.info .s1 .top .splide__arrow:hover svg{
	fill:#FFFFFF;
}

.stones.info .s1 .top .splide__arrow--prev{
	left:15px;
}

.stones.info .s1 .top .splide__arrow--next{
	right:15px;
}

.stones.info .s1 .bm .splide__slide{
    margin-top:10px;
}

.stones.info .s1 .bm .splide__slide.is-active{
	border:#C8C9CB 3px solid !important;
}

.stones.info .s1 .left .t1{
    display:none;
}

/*STONES_INFO_S1_RIGHT*/
.stones.info .s1{
    color:#000000;
}

.stones.info .s1 .t1{
    font-size:48px;
    line-height:1.3em;
    font-family:var(--serif);
    font-weight:normal;
    padding-bottom:0.5em;
    border-bottom:#B2B2B2 1px solid;
}

.stones.info .s1 .t1 div{
    font-size:var(--title2);
    line-height:1em;
    margin-bottom:0.5em;
}

.stones.info .s1 .right .t2,
.stones.info .s1 .right .t3{
    margin:60px 0;
    line-height:var(--line_h);
}

.stones.info .s1 .right table,
.master.info .s4 table{
    width:100%;
    line-height:var(--line_h);
}

.stones.info .s1 .right td,
.master.info .s4 td{
    padding:1em 0;
    border-bottom:#E2E2E2 1px solid;
}

.stones.info .s1 .right tr:last-child td,
.master.info .s4 tr:last-child td{
    border-bottom:none;
}

.stones.info .s1 .right td:first-child,
.master.info .s4 td:first-child{
    width:7em;
    padding-right:2em;
}

.stones.info .s1 .right .ask,
.master.info .s5 a{
    max-width:300px;
    display:block;
    color:#000000;
    text-align:center;
    border:rgba(0,0,0,0.3) 1px solid;
    padding:12px 0;
    margin-top:30px;
    transition:border 0.2s;
}

.stones.info .s1 .right .ask:hover{
    border:rgba(0,0,0,1) 1px solid;
}

.stones.info .s1 .right .ask img,
.master.info .s5 a img{
    width:20px;
    vertical-align:middle;
    margin-right:15px;
}

/*STONES_INFO_S2*/
.stones.info .s2,
.master.info .s6{
    background:linear-gradient(#EEEEEE,#FFFFFF);
    padding:140px 0;
}

.stones.info .s2 .out,
.master.info .s6 .out{
    max-width:1640px;
}

.stones.info .s2 .t1,
.master.info .s6 .t1{
    max-width:1500px;
    font-family:var(--serif);
    font-size:var(--title3);
    font-weight:normal;
    color:#000000;
    margin:0 auto;
}

.stones.info .s2 img,
.master.info .s6 img{
    width:100%;
    transition:0.2s;
}

.stones.info .s2 a:hover img,
.master.info .s6 a:hover img{
    opacity:0.8;
}

.stones.info .s2 .splide,
.master.info .s6 .splide{
    padding:70px;
}

.stones.info .s2 a div,
.master.info .s6 a div{
    font-size:20px;
    line-height:1.5em;
    color:#000000;
    margin-top:1em;
    text-align:center;
}

.stones.info .s2 .splide__arrow,
.master.info .s6 .splide__arrow{
    background:none;
    width:60px;
    height:60px;
    margin-top:-2em;
}

.stones.info .s2 .splide__arrow svg,
.master.info .s6 .splide__arrow svg{
    display:none;
}

.stones.info .s2 .splide__arrow--prev,
.master.info .s6 .splide__arrow--prev{
    left:0;
}

.stones.info .s2 .splide__arrow--next,
.master.info .s6 .splide__arrow--next{
    right:0;
}

.stones.info .s2 .splide__arrow:after,
.master.info .s6 .splide__arrow:after{
    content:"";
    position:absolute;
    width:50%;
    height:50%;
    border-style:solid;
    border-color:#000000;
    border-width:0 0 1px 1px;
    transform:rotate(45deg);
}

.stones.info .s2 .splide__arrow--prev:after,
.master.info .s6 .splide__arrow--prev:after{
    left:40%;
}

.stones.info .s2 .splide__arrow--next:after,
.master.info .s6 .splide__arrow--next:after{
    right:40%;
    border-width:1px 1px 0 0;
}

.stones.info .s2 .splide__pagination,
.master.info .s6 .splide__pagination{
    bottom:0;
}

.stones.info .s2 .splide__pagination,
.master.info .s6 .splide__pagination{
    bottom:0;
}

.stones.info .s2 .splide__pagination__page,
.master.info .s6 .splide__pagination__page{
    background:#B4B4B5;
    height:12px;
    width:12px;
    margin:5px;
    opacity:1;
    transition:0s;
}

.stones.info .s2 .splide__pagination__page.is-active,
.master.info .s6 .splide__pagination__page.is-active{
    background:#000000;
    transform:none;
}

/*MASTER-----------------------------------------*/

/*MASTER_LIST-----------------*/

/*MASTER_LIST_S1*/
.master.list .s1{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:700px;
    overflow:hidden;
}

.master.list .s1:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url("../images/master_list_s1.jpg") center;
    background-size:cover;
    animation:pageinbg 3s both;
}

@keyframes pageinbg{
    0%{transform:scale(1.1);}
    100%{transform:none;}
}

/*MASTER_LIST_S2*/
.master.list .s2{
    padding:100px 0;
    text-align:center;
}

.master.list .s2 .top{
    position:relative;
    line-height:var(--line_h2);
    padding:0 20px 200px;
    margin-bottom:60px;
}

.master.list .s2 .top:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:1px;
    height:140px;
    background:#959595;
}

.master.list .s2 .title_box p{
    max-width:360px;
    margin:0 auto;
}

.master.list .s2 .title_box a{
    margin:3em auto 0;
}

.master.list .s2 li{
    display:flex;
}

.master.list .s2 li:nth-child(even){
    flex-direction:row-reverse;
}

.master.list .s2 .title_box{
    width:50%;
    align-items:center;
    justify-content:center;
}

.master.list .s2 li:nth-child(odd) .title_box{
    margin-left:10%;
}

.master.list .s2 li:nth-child(even) .title_box{
    margin-right:10%;
}

.master.list .s2 img{
    width:50%;
}

/*MASTER_IN-----------------*/

/*MASTER_IN_S1*/
.master.in .s1 img{
    margin-left:0px;
}

/*MASTER_IN_S2*/
.master.in .s2{
    padding:90px 0;
    background:#F6F7F7;
    color:#000000;
    text-align:center;
}

.master.in .s2 .out{
    max-width:1100px;
}

.master.in .s2 .t1{
    position:relative;
    font-family:var(--serif);
    font-size:23px;
    line-height:1.3em;
    padding-bottom:30px;
    margin-bottom:50px;
}

.master.in .s2 .t1:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:100px;
    height:1px;
    background:#000000;
    margin-left:-50px;
}

.master.in .s2 .t2{
    line-height:var(--line_h2);
}

/*MASTER_IN_S3*/
.master.in .s3{
    background:#FFFFFF;
    padding:90px 0;
}

.master.in .s3 .box{
    max-width:1200px;
    margin:90px auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:120px 9%;
}

.master.in .s3 .box a{
    color:#000000;
    text-align:center;
}

.master.in .s3 .box img{
    width:100%;
    transition:0.2s;
}

.master.in .s3 .box a:hover img{
    opacity:0.9;
}

.master.in .s3 .t1{
    font-size:var(--title2);
    line-height:1.5em;
    padding:2em 0 0.5em;
}

.master.in .s3 .t2{
    font-family:var(--serif);
    font-size:var(--title4);
    line-height:1.3em;
    padding-bottom:0.7em;
}

.master.in .s3 .t3{
    line-height:var(--line_h2);
}

/*MASTER_INFO-----------------*/

/*MASTER_INFO_S1*/
.master.info .s1{
    position:relative;
    display:flex;
    justify-content:center;
}

.master.info .s1:after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:20%;
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
}

.master.info .s1 .title{
    position:absolute;
    top:160px;
    left:0;
    z-index:1;
    width:100%;
    text-align:center;
}

.master.info .s1 .t1{
    font-size:var(--title2);
    margin-bottom:1em;
}

.master.info .s1 .t2{
    font-family:var(--serif);
    font-size:48px;
    font-weight:normal;
}

/*MASTER_INFO_S2*/
.master.info .s2{
    position:relative;
    height:600px;
    margin-top:-140px;
}

.master.info .s2 img{
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    width:54px;
    transform:translate(-50%,-50%);
    background:#000000;
}

.master.info .s2 .circle{
    position:absolute;
    top:50%;
    left:50%;
    z-index:1;
    width:190px;
    height:190px;
    transform:translate(-50%,-50%);
    background:radial-gradient(rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
}

.master.info .s2:before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:1px;
    height:100%;
    background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,0));
}

.master.info .s2:after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:#FFFFFF;
}

/*MASTER_INFO_S3*/
.master.info .s3{
    text-align:center;
    padding:60px 0;
}

.master.info .s3 .out{
    max-width:1200px;
}

.master.info .s3 .t1{
    font-family:var(--serif);
    font-size:var(--title1);
    line-height:1.5em;
    font-weight:normal;
    margin-bottom:1em;
}

.master.info .s3 .t2{
    max-width:950px;
    line-height:var(--line_h2);
    margin:0 auto;
}

.master.info .s3 iframe{
    width:100%;
    aspect-ratio:16/9;
    margin:90px 0;
}

/*MASTER_INFO_S4*/
.master.info .s4 .more{
    position:relative;
    font-family:var(--serif);
    font-size:var(--title1);
    display:flex;
    justify-content:center;
    gap:15px;
    padding-bottom:1em;
    cursor:pointer;
    transition:0.2s;
}

.master.info .s4 .more:hover{
    color:var(--yellow);
}

.master.info .s4 .more:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:80px;
    height:1px;
    margin-left:-40px;
    background:#7E7E7E;
}

.master.info .s4 .more.active:after{
    display:none;
}

.master.info .s4 .more span{
    position:relative;
    width:30px;
    height:30px;
}

.master.info .s4 .more span:before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:#FFFFFF;
}

.master.info .s4 .more span:after{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:1px;
    height:100%;
    background:#FFFFFF;
}

.master.info .s4 .more.active span:after{
    display:none;
}

.master.info .s4 .hide{
    display:none;
    background:linear-gradient(#EEEEEE,#FFFFFF);
    color:#000000;
    padding:90px 0;
}

.master.info .s4 .out{
    max-width:1140px;
    display:grid;
    grid-template-columns:52% 38%;
    justify-content:space-between;
}

.master.info .s4 .text{
    line-height:var(--line_h2);
    margin-top:1em;
}

/*MASTER_INFO_S5*/
.master.info .s5{
    padding:90px 0;
    text-align:center;
}

.master.info .s5 .title{
    position:relative;
    font-family:var(--serif);
    font-size:var(--title1);
    margin-bottom:10em;
}

.master.info .s5 .title:after{
    content:"";
    position:absolute;
    top:2.5em;
    left:50%;
    width:1px;
    height:7em;
    background:rgba(255,255,255,0.5);
}

.master.info .s5 a{
    color:#FFFFFF;
    border-color:rgba(255,255,255,0.3);
    margin:0 auto;
}

.master.info .s5 a:hover{
    border-color:rgba(255,255,255,0.5);
}

/*MASTER_INFO_S6*/
.master.info .s6 img{
    width:100%;
}

/*NEWS-----------------------------------------*/
.news .s1,
.services .s1,
.contact .s1,
.brand .s1{
    position:relative;
    height:550px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.news .s1:before,
.services .s1:before,
.contact .s1:before,
.brand .s1:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url("../images/news_list_s1.jpg") center;
    background-size:cover;
    animation:pageinbg 3s both;
}

.master.list .s1 .title_box,
.news .s1 .title_box,
.services .s1 .title_box,
.contact .s1 .title_box,
.brand .s1 .title_box{
    position:relative;
    z-index:1;
    font-size:56px;
}

.news .s1 .en,
.services .s1 .en,
.contact .s1 .en,
.brand .s1 .en{
    position:absolute;
    top:120px;
    right:70px;
}

/*NEWS_LIST-----------------*/

/*NEWS_LIST_S2*/
.news.list .s2{
    background:#EEEEEE;
    padding:80px 0;
    color:#000000;
}

.news.list .s2 .out{
    max-width:1300px;
}

.tab div{
    display:none;
}

.tab ul{
    max-width:1140px;
    margin:0 auto;
    display:flex;
    gap:1px;
}

.tab li{
    width:100%;
}

.tab a{
    position:relative;
    display:block;
    color:#000000;
    text-align:center;
    border:#BBBBBB 1px solid;
    width:100%;
    padding:1em 0;
    transition:color 0.2s;
}

.tab a:hover{
    color:#00239C;
}

.tab .active a{
    color:#FFFFFF;
    background:#00239C !important;
}

.tab .active a:after{
    content:"";
    position:absolute;
    top:50%;
    right:15px;
    width:6px;
    height:26px;
    border-style:solid;
    border-color:#BFC8E5;
    border-width:0 1px;
    margin-top:-13px;
}

.news.list .s2 .box{
    margin-top:80px;
    display:flex;
    flex-direction:row-reverse;
    align-items:flex-start;
    justify-content:space-between;
}

.news.list .s2 .box .text{
    width:38%;
    padding:4em 0 0;
}

.news.list .s2 .top,
.news.info .s2 .top{
    display:flex;
    align-items:center;
}

.news.list .s2 .t1,
.news.info .s2 .t1{
    font-weight:var(--normal);
    border-right:#000000 1px solid;
    padding-right:20px;
    margin-right:20px;
}

.news.list .s2 .date,
.news.info .s2 .date{
    font-family:var(--serif);
}

.news.list .s2 .t2,
.news.info .s2 .t2{
    font-size:var(--title1);
    font-weight:var(--bold);
    line-height:1.5em;
    height:3em;
    margin:0.8em 0 0.6em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.news.list .s2 .t3,
.news.list .s3 .t3{
    line-height:var(--line_h2);
    height:4em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.news.list .s2 .box img{
    width:55%;
    aspect-ratio:5/3;
}

.news.list .s2 .text{
    color:#000000;
}

.news.list .s2 .more{
    width:210px;
    text-align:center;
    line-height:40px;
    margin:4em 0 0;
}

@media only screen and (max-width:869px){
    .news.list .s2 .out{
        max-width:400px;
    }
    
    .news.list .s2 .box img{
        margin-bottom:0 !important;
    }
    
    .news.list .s2 .top{
        margin:1.5em 0 1em;
    }
    
    .news.list .s2 .t1{
        font-size:16px;
        padding-right:20px;
        margin-right:20px;
    }
    
    .news.list .s2 .date{
        font-size:16px;
    }
    
    .news.list .s2 .t2{
        font-size:var(--title2);
        margin:0 0 1em;
    }
}

/*NEWS_LIST_S3*/
.news.list .s3{
    padding:120px 0 80px;
    background:#FFFFFF;
}

.news.list .s3 .out{
    max-width:1670px;
    display:grid;
    gap:30px;
    grid-template-columns:1fr 1fr 1fr;
}

.news.list .s3 a{
    color:#000000;
}

.news.list .s3 li{
    margin-bottom:60px;
}

.news.list .s3 img{
    width:100%;
    transition:0.2s;
    aspect-ratio:5/3;
}

.news.list .s3 a:hover img{
    opacity:0.8;
}

.news.list .s3 .top,
.news.info .s3 .top{
    display:flex;
    margin:1.5em 0 1em;
}

.news.list .s3 .t1,
.news.info .s3 .t1{
    font-weight:var(--normal);
    padding-right:20px;
    margin-right:20px;
    border-right:#000000 1px solid;
}

.news.list .s3 .date,
.news.info .s3 .date{
    font-family:var(--serif);
}

.news.list .s3 .t2{
    font-size:var(--title2);
    font-weight:var(--bold);
    line-height:1.5em;
    height:3em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    margin-bottom:1em;
}

/*NEWS_INFO-----------------*/

/*NEWS_INFO_S2*/
.news.info .s2{
    background:#FFFFFF;
    padding:80px 0;
}

.news.info .s2 .top{
    padding-top:1em;
}

.news.info .s2 .box{
    max-width:960px;
    margin:80px auto;
    color:#000000;
}

.news.info .s2 .title{
    font-family:var(--serif);
    font-size:var(--title3);
    font-weight:var(--bold);
    line-height:1.3em;
    padding:1em 0;
    border-bottom:#000000 1px solid;
}

.news.info .s2 .edit{
    padding:50px 0;
    line-height:var(--line_h2);
}

.news.info .s2 .edit img{
    width:100%;
    height:auto;
}

.news.info .s2 .back{
    position:relative;
    display:block;
    width:210px;
    color:#000000;
    line-height:40px;
    text-align:center;
    border:rgba(0,0,0,0.3) 1px solid;
    margin:0 auto;
    transition:0.2s;
}

.news.info .s2 .back:hover{
    border:rgba(0,0,0,1) 1px solid;
}

.news.info .s2 .back:before,
.news.info .s2 .back:after{
    content:"";
    position:absolute;
    top:50%;
    left:15px;
    height:1px;
    background:#000000;
    transition:0.2s;
}

.news.info .s2 .back:before{
    width:14px;
}

.news.info .s2 .back:after{
    width:7px;
    transform-origin:left bottom;
    transform:rotate(-45deg);
}

/*NEWS_INFO_S3*/
.news.info .s3{
    color:#000000;
    background:#FFFFFF;
    padding-bottom:150px;
}

.news.info .s3 .out{
    max-width:1350px;
}

.news.info .s3 .title{
    position:relative;
    font-family:var(--serif);
    font-size:var(--title3);
    font-weight:var(--bold);
}

.news.info .s3 .title:before{
    content:"";
    position:absolute;
    top:50%;
    left:7em;
    right:0;
    height:1px;
    background:#000000;
}

.news.info .s3 ul{
    display:grid;
    gap:60px;
    grid-template-columns:1fr 1fr;
    margin-top:60px;
}

.news.info .s3 li a{
    display:flex;
    align-items:flex-start;
    gap:20px;
    color:#000000;
}

.news.info .s3 li img{
    width:220px;
    aspect-ratio:5/3;
    transition:opacity 0.2s;
}

.news.info .s3 li a:hover img{
    opacity:0.8;
}

.news.info .s3 .top{
    margin:0 0 9px;
}

.news.info .s3 .t1{
    padding-right:10px;
    margin-right:10px;
}

.news.info .s3 .t2{
    font-size:var(--title2);
    font-weight:var(--bold);
    line-height:1.3em;
    max-height:2.6em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    margin:0.8em 0;
}

.news.info .s3 .t3{
    line-height:var(--line_h);
    height:3.4em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    display:none;
}

@media only screen and (max-width:943px){
    .news.list .s2 .t2,
    .news.list .s3 .t2{
        height:auto;
        max-height:3em;
    }
}

/*SERVICES-----------------------------------------*/
.services .tab a,
.brand .tab a{
    color:#FFFFFF;
    background:none;
    border:#555555 1px solid;
}

.services .tab a:hover,
.brand .tab a:hover{
    color:var(--yellow) !important;
}

.services .s1:before,
.brand .s1:before{
    background-image:url("../images/services_s1.jpg");
}

/*SERVICES_LIST-----------------*/

/*SERVICES_LIST_S2*/
.services.list .s2{
    padding:80px 0;
}

/*SERVICES_LIST_S3*/
.services.list .s3{
    padding-top:20px;
}

.services.list .s3 li,
.services.info .s4 li{
    display:flex;
    align-items:center;
    padding:10px 0 100px;
}

.services.list .s3 li:last-child{
    padding:0;
}

.services.list .s3 .title_box,
.services.info .s4 .title_box{
    width:50%;
    align-items:center;
    justify-content:center;
    z-index:1;
}

.services.list .s3 img,
.services.info .s4 img{
    display:block;
    width:50%;
}

.services.list .s3 .t2{
    max-width:580px;
}

.services.list .s3 .t2 span{
    display:block;
    font-weight:var(--bold);
    margin-bottom:1em;
}

.services.list .s3 .title_box .text,
.services.info .s4 .title_box .text{
    padding:40px;
    margin-top:0;
}

.services.list .s3 li:nth-child(even),
.services.info .s4 li:nth-child(even){
    flex-direction:row-reverse;
}

.services.list .s3 li:nth-child(3){
    position:relative;
    aspect-ratio:2001/1097;
    padding-bottom:0;
}

.services.list .s3 li:nth-child(3) .t2{
    max-width:430px;
}

.services.list .s3 li:nth-child(3) img{
    position:absolute;
    top:10px;
    left:0;
    width:100%;
}

.services.list .s3 li:last-child .text{
    max-width:570px;
    width:100%;
}

/*SERVICES_INFO-----------------*/
.services.info .s1:before{
    background-image:url("../images/services_info_s1.jpg");
}

/*SERVICES_INFO_S2*/
.services.info .s2{
    padding:60px 0 130px;
}

.services.info .s2 .out{
    max-width:1400px;
}

.services.info .tab{
    position:relative;
    z-index:1;
    width:220px;
    color:#000000;
}

.services.info .tab a:after{
    display:none;
}

.services.info .tab div{
    display:block;
    position:relative;
    line-height:50px;
    border:#BBBBBB 1px solid;
    text-align:center;
    cursor:pointer;
}

.services.info .tab div:after{
    content:"";
    position:absolute;
    right:20px;
    top:50%;
    border-style:solid;
    border-width:6px 3px 0 3px;
    border-color:#000000 transparent transparent transparent;
    margin-top:-3px;
}

.services.info .tab ul{
    display:block;
    position:absolute;
    width:100%;
    border-style:solid;
    border-color:#555555;
    border-width:0 1px 1px 1px;
    box-sizing:border-box;
    transform-origin:top;
    transform:scaleY(0);
    transition:transform 0.2s;
}

.services.info .tab div.active + ul{
    transform:scaleY(1);
}

.services.info .tab a{
    border:none;
    transition:0.2s;
}

.services.info .tab .active a{
    color:#000000;
    background:#EEEEEE !important;
}

.services.info .tab a:hover{
    color:var(--blue);
}

.services.info .tab a:before{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    bottom:0;
    height:1px;
    background:#BBBBBB;
}

.services.info .tab li:last-child a:before{
    display:none;
}

.services.info .tab div{
    color:#FFFFFF;
    border:#555555 1px solid;
    background:#000000;
}

.services.info .tab div:after{
    border-color:var(--yellow) transparent transparent transparent;
}

.services.info .tab u{
    border:none;
}

.services.info .tab a{
    color:#FFFFFF;
    background:#000000;
    border-width:0 1px;
}

.services.info .tab li:last-child a{
    border-width:0 1px 1px 1px;
}

.services.info .tab a:before{
    background:#222222;
}

.services.info .tab li:last-child a:before{
    display:none;
}

.services.info .tab .active a{
    color:#FFFFFF;
    background:#000000 !important;
}

/*SERVICES_INFO_S3*/
.services.info .s3{
    text-align:center;
}

.services.info .s3 .t1{
    position:relative;
    display:inline-block;
    font-family:var(--serif);
    font-size:var(--title4);
    font-weight:var(--normal);
}

.services.info .s3 .t1:before,
.services.info .s3 .t1:after{
    content:"";
    position:absolute;
    top:50%;
    width:100px;
    height:1px;
    background:#F5A21B;
    opacity:0.6;
	display:none;
}

.services.info .s3 .t1:before{
    right:115%;
}

.services.info .s3 .t1:after{
    left:115%;
}

.services.info .s3 .t2{
    line-height:var(--line_h2);
    margin:90px 0;
}

/*SERVICES_INFO_S4*/
.services.info .s4 .t1,
.services.time .s6 .t1{
    display:flex;
    flex-wrap:wrap;
    gap:20px 0;
    align-items:center;
}

.services.info .s4 .t1 span,
.services.time .s6 .t1 span{
    position:relative;
    font-size:0.8em;
    color:var(--yellow);
    padding-right:60px;
}

.services.info .s4 .t1 span:after,
.services.time .s6 .t1 span:after{
    content:"";
    position:absolute;
    top:-5px;
    right:10px;
    height:50px;
    width:1px;
    background:var(--yellow);
    transform-origin:left top;
    transform:rotate(45deg);
}

.services.info .s4 .t2,
.services.info .s4 .ps{
    max-width:600px;
}

.services.info .s4 .t3{
    display:flex;
    flex-wrap:wrap;
    gap:0.5em 1em;
    padding:2em 0 1em;
}

.services.info .s4 .t3 span span:before{
    content:"\2022";
    font-family:'微軟正黑體',sans-serif;
    color:var(--yellow);
}

.services.info .s4 .ps{
    position:relative;
    font-size:16px;
    line-height:var(--line_h2);
    border-radius:10px;
    padding-left:1em;
    margin-top:3em;
    box-sizing:border-box;
}

.services.info .s4 .ps:before{
    content:"*";
    color:var(--yellow);
    position:absolute;
    top:0.25em;
    left:0;
}

/*SERVICES_MAIL*/
.services .mail{
    height:100vh;
    min-height:600px;
}

.services .mail .out{
    max-width:1300px;
    display:flex;
    align-items:center;
}

.services .mail .top{
    display:flex;
    gap:60px;
    font-size:16px;
    line-height:var(--line_h2);
    margin-bottom:40px;
}

.services .mail .top .t1{
    font-family:var(--serif);
    font-size:var(--title4);
    font-weight:var(--normal);
    padding-top:10px;
}

/*SERVICES_ADVISE-----------------*/
.services.advise .s4,
.services.art .s4{
    background:url("../images/services_adv_s4_bg.jpg") bottom center repeat-x;
    padding-bottom:100px;
}

.services.advise .s4 .ps2{
    position:relative;
    max-width:550px;
    margin:0 auto;
    font-size:var(--title2);
    text-align:center;
    line-height:var(--line_h2);
    padding:2em 0;
}

.services.advise .s4 .ps2:after,
.services.advise .s4 .ps2:before{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:20px;
    box-sizing:border-box;
    border-color:var(--yellow);
    border-style:solid;
    border-width:1px 1px 0 1px;
}

.services.advise .s4 .ps2:after{
    top:0;
    border-width:1px 1px 0 1px;
}

.services.advise .s4 .ps2:before{
    bottom:0;
    border-width:0 1px 1px 1px;
}

/*SERVICES_ART-----------------*/

/*SERVICES_ART_S3*/
.services.art .s3 .t3{
    font-family:var(--serif);
    font-size:var(--title3);
    font-weight:var(--normal);
    line-height:var(--title_line_h);
    margin:90px 0 1em;
}

.services.art .s3 .t2{
    max-width:920px;
    margin:0 auto 10em !important;
}

/*SERVICES_ART_S4*/
.services.art .s4 .ps2{
    max-width:450px;
    margin:2em auto;
    text-align:center;
    line-height:var(--line_h2);
}

/*SERVICES_TIME-----------------*/
.services.time .s2{
    position:relative;
    z-index:2;
}

.services.time .s3{
    position:relative;
    z-index:1;
}

/*SERVICES_TIME_S4*/
.services.time .s4{
    position:relative;
}

.services.time .s4 .out{
    max-width:1230px;
    z-index:1;
    height:1050px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.services.time .s4 .t1,
.services.time .s4 .t2{
    font-family:var(--serif);
    font-weight:var(--normal);
}

.services.time .s4 .t1{
    font-size:var(--title3);
}

.services.time .s4 .t2{
    position:relative;
    font-size:var(--title2);
    margin:6em 0 2em;
    align-self:flex-start;
}

/*.services.time .s4 .t2:after{
    content:"";
    position:absolute;
    top:50%;
    left:110%;
    width:50px;
    height:1px;
    background:#FFFFFF;
    opacity:0.5;
}*/

.services.time .s4 .t3{
    display:block;
    padding:0;
    line-height:var(--line_h2);
}

.services.time .s4 .t4{
    display:block;
    color:#E3B973;
}

.services.time .s4 .t3 span span:before{
    color:#E3B973;
}

.services.time .s4 .pc{
    position:absolute;
    top:-278px;
    right:50%;
    margin-right:-1000px;
    width:auto;
}

.services.time .s4 .mb{
    display:none;
}

/*SERVICES_TIME_S5*/
.services.time .s5{
    display:none;
}

.services.time .s5 .out{
    max-width:1300px;
    padding-bottom:200px;
}

.services.time .s5 iframe{
    width:100%;
    aspect-ratio:16/9;
    box-sizing:border-box;
    border:var(--yellow) 1px solid;
}

/*SERVICES_TIME_S6*/
.services.time .s6 .top{
    max-width:600px;
}

.services.time .s6 .top .t1{
    /*display:inline-block;*/
    display:none;
    position:relative;
    font-family:var(--serif);
    font-size:var(--title2);
    font-weight:var(--normal);
}

.services.time .s6 .top .t1:after{
    content:"";
    position:absolute;
    top:50%;
    left:110%;
    width:60px;
    height:1px;
    background:#FFFFFF;
    opacity:0.5;
}

.services.time .s6 .top .t2{
    font-family:var(--serif);
    font-size:var(--title3);
    font-weight:var(--normal);
    text-align:center;
    margin:3em 0;
    line-height:1.3em;
}

.services.time .s6 .title_box{
    opacity:0;
    transition:0.5s;
}

.services.time .s6 .splide__slide{
    opacity:0.5;
    transition:opacity 0.5s;
}

.services.time .s6 .splide__slide.is-active,
.services.time .s6 li.is-active .title_box{
    opacity:1;
}

.services.time .s6 .text{
    text-align:center;
    margin:1em auto 0;
}

.services.time .s6 img{
    width:100%;
    cursor:grab;
}

.services.time .s6 .text .t1{
    justify-content:center;
}

.services.time .s6 .text .t2{
    max-width:440px;
}

.services.time .s6 .splide{
    padding-bottom:50px;
}

.services.time .s6 .splide__pagination{
    bottom:0;
}

.services.time .s6 .splide__pagination__page{
	background:#727171;
	width:8px;
	height:8px;
	opacity:1;
    margin:0 10px;
	transition:0.2s;
}

.services.time .s6 .splide__pagination__page.is-active{
	background:#F5A21B;
	transform:none;
}

.services.time .s6 .splide__arrow{
    top:205px;
    transform:none;
	width:40px;
	height:40px;
	opacity:1;
	background:#FFFFFF;
	transition:background 0.2s;
}

.services.time .s6 .splide__arrow:hover{
	background:var(--yellow);
}

.services.time .s6 .splide__arrow svg{
	fill:#888888;
	transition:0.2s;
}

.services.time .s6 .splide__arrow:hover svg{
	fill:#FFFFFF;
}

.services.time .s6 .splide__arrow--prev{
	left:30px;
}

.services.time .s6 .splide__arrow--next{
	right:30px;
}

/*SERVICES_TIME_S7*/
.services.time .s7{
    text-align:center;
    padding:200px 0 150px;
    background:url("../images/services_adv_s4_bg.jpg") bottom center repeat-x;
}

.services.time .s7 .t1{
    font-family:var(--serif);
    font-size:var(--title3);
    font-weight:var(--normal);
    margin-bottom:1em;
}

.services.time .s7 .t2{
    line-height:var(--line_h2);
}

/*CONTACT-----------------------------------------*/

/*CONTACT_S1-----------------*/
.contact .s1:before{
    background-image:url("../images/contact_s1.jpg");
}

/*CONTACT_S2-----------------*/
.contact .s2{
    background:#FFFFFF;
    padding:170px 0;
    color:#000000;
}

.contact .s2 .out{
    max-width:1600px;
    display:grid;
    justify-content:space-between;
    grid-template-columns:50% 44%;
}

.contact .s2 .t1,
.contact .s3 .title{
    font-family:var(--serif);
    font-size:var(--title4);
    font-weight:var(--normal);
}

.contact .s2 .t2{
    line-height:var(--line_h);
    margin:70px 0 30px;
}

.contact .s2 .right li{
    position:relative;
    margin-bottom:1em;
    padding-left:20px;
}

.contact .s2 .right li span{
    display:inline-block;
    width:5.5em;
}

.contact .s2 .right li:before{
    content:"";
    position:absolute;
    top:5px;
    left:0;
    width:8px;
    height:8px;
    background:#F5A21B;
    transform:rotate(45deg);
}

.contact .s2 .right iframe{
    width:100%;
    height:590px;
    margin-top:40px;
}

/*CONTACT_S3-----------------*/
.contact .s3{
    position:relative;
    padding:200px 0;
}

.contact .s3 .out{
    max-width:1500px;
    z-index:1;
}

.contact .s3 .title,
.contact .s3 ul{
    max-width:900px;
    margin-left:auto;
}

.contact .s3 .title{
    margin-bottom:90px;
}

.contact .s3 ul{
    counter-reset:num;
}

.contact .s3 .t1{
    position:relative;
    counter-increment:num;
    padding:25px 80px 25px 90px;
    line-height:var(--line_h);
    border-bottom:rgba(255,255,255,0.3) 1px solid;
    cursor:pointer;
    transition:0.2s;
}

.contact .s3 .t1:hover{
    color:var(--yellow);
}

.contact .s3 .t1:before{
    position:absolute;
    top:23px;
    left:0;
    font-family:var(--serif);
    font-size:var(--title3);
    color:#FFFFFF;
    content:counter(num, decimal-leading-zero);
}

.contact .s3 .t1:after{
    content:"";
    position:absolute;
    top:18px;
    left:45px;
    width:1px;
    height:30px;
    background:#FFFFFF;
    transform:rotate(45deg);
    transform-origin:left bottom;
}

.contact .s3 span{
    position:absolute;
    top:39px;
    right:32px;
    display:block;
    width:15px;
    height:1px;
    background:var(--yellow);
}

.contact .s3 span:before{
    content:"";
    position:absolute;
    top:-7px;
    left:7px;
    width:1px;
    height:15px;
    background:var(--yellow);
}

.contact .s3 .t1.active span:before{
    display:none;
}

.contact .s3 .t2{
    display:none;
    line-height:var(--line_h);
    padding:1.5em 0;
}

.contact .s3 .pc{
    position:absolute;
    top:0;
    left:50%;
    margin-left:-1000px;
}

.contact .s3 .mb{
    display:none;
}

/*COMMON--------------------------------------------------------------------*/

/*HEADER-----------------------------------------*/
.header{
    background:#000000;
}

.header .out{
    height:150px;
}

.header .mb_bt,
.header .mb{
	display:none;
}

.header .logo{
	display:block;
	position:absolute;
	top:45px;
	left:50%;
	z-index:1;
	width:60%;
	max-width:176px;
    margin-left:-88px;
}

.header.active .logo{
	top:-128px;
}

/*HEADER_LANG-----------------*/
.header .pc .lang{
	position:absolute;
	top:45px;
	right:40px;
    z-index:2000;
    font-size:16px;
}

.header .lang div{
	position:relative;
	width:125px;
    font-size:16px;
	text-align:center;
	line-height:40px;
	padding-left:0.8em;
	background:url("../images/header_icon.svg") left 1.3em center no-repeat;
    background-size:15px;
	cursor:pointer;
	transition:0.2s;
}

.header .lang div:after{
	content:"";
	position:absolute;
	top:50%;
	right:1em;
    border-style:solid;
    border-width:6px 3px 0 3px;
    border-color:#FFFFFF transparent transparent transparent;
	margin-top:-3px;
    transition:0.2s;
}

.header .lang:hover div:after,
.header .lang div.active:after{
    border-color:var(--yellow) transparent transparent transparent;
}


.header .lang ul{
	position:absolute;
	width:100%;
	background:#191919;
	padding:10px 0;
	transform-origin:top;
	transform:scaleY(0);
	transition:0.2s;
}

.header .lang li a{
    display:block;
    padding:0.7em 0;
    text-align:center;
    transition:0.2s;
}

.header .lang li a:hover{
    color:var(--yellow);
}

.header .pc .lang:hover ul,
.header .lang div.active + ul{
	transform:scaleY(1);
}

.menu{
	position:sticky;
	top:0;
	z-index:1000;
    background:#000000;
    border-bottom:#222222 1px solid;
}

.menu ul{
    max-width:1040px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:16px;
    padding:0.3em 40px;
}

.menu li a{
    position:relative;
    top:0;
    display:block;
    padding:1em 0;
    transition:0.2s;
}

.menu li:hover a{
    top:-5px;
}

.menu .logos{
    position:absolute;
    width:0;
}

.menu.active .logos{
    position:relative;
    width:50px;
    transition:0.3s ease-out;
}

.menu .logos img{
    width:100%;
}

/*AREA-----------------------------------------*/
.area{
    border-bottom:#222222 1px solid;
    padding:1.5em 0;
    margin-top:-4em;
}

.area .out{
    max-width:1500px;
    display:flex;
}

.area a{
    color:#999999;
    transition:0.2s;
}

.area a:hover{
    color:var(--yellow);
}

.area li{
    position:relative;
    padding-right:40px;
}

.area li:after{
    content:"";
    position:absolute;
    top:50%;
    right:10px;
    width:20px;
    height:1px;
    background:#555555;
}

.area li:last-child:after{
    display:none;
}

.area.wt{
    color:#000000;
}

.area.wt a{
    color:#9E9F9F;
}

.area.wt a:hover{
    color:var(--yellow);
}

.area.wt li:after{
    background:#9E9F9F;
}

/*PAGETOP-----------------------------------------*/
body a.pagetop{
	display:block;
	width:40px;
	height:40px;
	z-index:500;
	background:url("../images/gotop.svg");
    background-size:cover;
	opacity:0.8;
	position:relative;
	transition:opacity 0.2s;
}

body a.pagetop:hover{
	opacity:1 !important;
}

/*PAGE_NUMBER-----------------------------------------*/
.page_number{
	font-family:Arial;
	text-align:center;
    color:#000000;
	padding:0 0 50px;
}

.page_number ul{
    display:flex;
    justify-content:center;
    align-items:center;
	margin:0px auto;
	overflow:hidden;
    padding-bottom:5px;
}

.page_number li select{
	cursor:pointer;
	padding:0px 5px;
}

.page_number li.page_select{
	padding:0px 25px 0 20px;
	position:relative;
}

.page_number li.page_select .select_box{
	display:inline-block;
	position:relative;
}

.page_number li.page_select .select_box:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	border-style:solid;
	border-width:6px 3px 0 3px;
	border-color:var(--blue) transparent transparent transparent;
	transform:translateX(-50%);
	margin-left:1px;
	transition:0.2s;
}

.page_number a{
	display:inline-block;
	width:45px;
	height:45px;
	background:#EEEEEE;
    border-radius:50%;
	vertical-align:middle;
	position:relative;
	transition:0.2s;
}

.page_number a:hover{
    background:#000000;
}

.page_number li a:after{
	content:"";
	position:absolute;
	top:50%;
	border-style:solid;
	border-color:#000000;
	border-width:0px 1px 1px 0px;
	padding:5px;
	margin-top:-14%;
    transition:0.2s;
}

.page_number a:hover:after{
    border-color:#FFFFFF;
}

.page_number li.page_prev a:after{
	right:32%;
	transform:rotate(135deg);
}

.page_number li.page_next a:after{
	left:32%;
	transform:rotate(-45deg);
}

.page_number li select{
	border:none;
	font-family:Arial;
	font-size:24px;
	font-weight:500;
	border-radius:5px;
	background:none;
	margin-bottom:5px;
	text-align-last:center;
	transition:0.2s;
}

.page_number li .select_box:hover select{
	color:var(--blue);
}

/*FOOTER-----------------------------------------*/
.footer .out{
    max-width:1500px;
}

/*FOOTER_TOP-----------------*/
.footer .top .out{
    display:flex;
    align-items:flex-start;
    flex-direction:row-reverse;
    justify-content:space-between;
    font-size:16px;
}

.footer .top{
    padding:90px 0 70px;
}

.footer .top .logo{
    width:195px;
}

.footer .top .left{
    width:76%;
    max-width:1070px;
    display:flex;
    justify-content:space-between;
}

.footer .top .list li{
    margin-bottom:1.3em;
}

.footer .top .list li:first-child{
    font-weight:600;
}

.footer .top .list:last-child li:first-child{
    font-weight:var(--normal);
}

.footer .top .list a{
    display:flex;
    align-items:center;
    gap:10px;
    transition:0.2s;
}

.footer .top .list a:hover{
    color:var(--yellow);
}

.footer .top .list a img{
    width:22px;
}

/*FOOTER_BM-----------------*/
.footer .bm{
    font-size:13px;
    padding:1.6em 0;
    border-top:#222222 1px solid;
}

/*MOBILE----------------------------------------------------------------------------*/
@media only screen and (max-width:1000px){
    /*HOME-----------------------------------------*/
	.home .s1 .pc{
		display:block;
	}
    
    .home #dot-nav{
        display:none;
    }
    
    .home .section{
        height:auto !important;
        min-height:0;
        display:block;
        padding:60px 0 0;
        box-sizing:border-box;
        margin-bottom:3em;
    }
    
    .home .s6,
    .home .mail{
        margin-bottom:0;
    }
    
    .home .section .bg{
        background:#000000;
    }
    
    .title_box{
        display:block;
        text-align:center;
        margin:0 !important;
        font-size:42px !important;
    }
    
    .title_box .title{
        align-items:center;
    }
    
    .title_box .text{
        margin-top:0.5em;
        text-align:center;
    }
    
    .title_box .text p{
        margin:0 auto;
    }
    
    .title_box .text a{
        margin:3em auto 0;
        z-index:100;
    }
    
    .home .section .mb{
        width:100%;
        display:block;
        opacity:1;
        margin-top:-10px;
        position:relative;
    }
    
    /*HOME_S1-----------------*/
    .home .s1{
        aspect-ratio:auto;
        height:100vh;
    }
    
    .home .s1 video{
        width:auto;
        height:100vh;
        aspect-ratio:877/453;
    }
    
    .home .s1 .tw{
        line-height:1.5em;
    }
    
    .home .s1 li:nth-child(2){
        bottom:22%;
    }
    
    .home .s1 li span{
        display:block;
        opacity:0;
        font-size:0;
        line-height:0;
    }
    
    .home .s1 .en{
        margin-top:-5em;
    }
    
    /*HOME_S2-----------------*/
    .home .s2:before,
    .home .s2:after{
        display:none;
    }
    
    .home .s2 .out{
        display:block;
    }
    
    .home .s2 .image{
        display:none;
    }
    
    .home .s2 .mb{
        margin-top:25px;
    }
    
    .home .s2 .title_box{
        margin:0 30px 0 6%;
    }
    
    /*HOME_S6-----------------*/
     .home .s6 img.mb{
         margin-top:0px;
     }
    /*HOME_S7-----------------*/
    .home .s7,
    .services .mail{
        display:block;
        padding:60px 0 0;
        height:auto;
    }
    
    .home .s7 .out,
    .services .mail .out{
        display:block;
        height:auto;
    }
    
    .home .s7 .in,
    .services .mail .in{
        height:auto;
        display:block;
        padding:0;
        margin:0;
    }
    
    .home .s7 form,
    .services .mail form{
        max-width:none;
        margin-top:30px;
    }
    
    .mail .box{
        display:block;
    }
    
    .mail table{
        width:100%;
    }
    
    .mail .send{
        margin:3em auto 0;
    }
    
    #form.mail textarea{
        height:150px;
    }
    
    .home .s7 .image,
    .services .mail .image{
        position:static;
        clip-path:none;
        transform:none;
        padding:0;
        height:auto;
        margin:50px auto 0;
    }
    
    .home .s7 .image img,
    .services .mail .image img{
        display:block;
        width:100%;
        height:auto;
    }
    
    /*BRAND-----------------------------------------*/
    
    /*BRAND_S3-----------------*/
    .brand .s3 .out,
    .brand .s31 .out{
        height:auto;
        display:block;
    }
    
    .brand .s31{
        padding:100px 0 30px;
    }
    
    .brand .s31 .out div{
        max-width:none;
    }
    
    .brand .t1{
        margin-bottom:1em;
    }
    
    .brand .s3 .pc,
    .brand .s31 .pc{
        display:none;
    }
    
    .brand .s3 .mb,
    .brand .s31 .mb{
        display:block;
        width:100%;
    }
    
    .brand .s31 .mb{
        margin-top:-1em;
    }
    
    /*BRAND_S4-----------------*/
    .brand .s4 .out{
        display:block;
    }
    
    .brand .s4 .left{
        width:auto;
        max-width:none;
        padding:60px 0;
    }
    
    .brand .s4 .right{
        position:relative;
        width:auto;
        max-width:none;
        padding:0 0 60px;
        border-left:none;
    }
    
    .brand .s4 .right:before{
        content:"";
        position:absolute;
        top:15px;
        left:-1px;
        bottom:0;
        width:1px;
        background:var(--yellow);
    }
    
    .brand .s4 .right li{
        padding-top:40px;
    }
    
    .brand .s4 .right li:before{
        top:0;
        left:30px;
    }
    
    /*BRAND_S5-----------------*/
    .brand .s5{
        padding:60px 0;
    }
    
    .brand .s5 .out{
        position:static;
        height:auto;
        display:block;
    }
    
    .brand .s5 .out:before{
        content:"";
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:#FFFFFF;
        opacity:0.5;
    }
    
    .brand .s5 .out .t1,
    .brand .s5 .out .t2{
        max-width:none;
        position:relative;
        z-index:1;
    }
    
    /*BRAND_S6-----------------*/
    .brand .s6{
        background:#000000;
    }
    
    .brand .s6 .out{
        height:auto;
        display:block;
    }
    
    .brand .s6 .out div{
        max-width:none;
        padding:60px 0;
    }
    
    .brand .s6 .pc{
        display:none;
    }
    
    .brand .s6 .mb{
        display:block;
        width:100%;
    }
    
    /*STONES-----------------------------------------*/
    
    /*STONES_LIST-----------------*/
    .stones .list .out{
        display:block;
        padding:0;
    }
    
    .stones .list .section{
        width:auto;
        padding:40px 0 40px 0;/*11-19*/
        height:auto;
    }
    
    .stones .list .title_box{
        padding:0 20px;
    }
    
    .stones .list .title_box .en{
        display:none;
    }
    
    .stones .title_box .text a{
        margin-top:2em;
    }
    
    .stones .list .s1:before,
    .stones .list .s1:after{
        display:none;
    }
    
    .stones .list .s2{
        display:block;
    }
    
    .stones .list .pc{
        display:none;
    }
    
    .stones .list .mb{
        display:block;
        width:100%;
        margin-top:-2em;
    }
    
    /*STONES_COLLECTION-----------------*/
    
    /*STONES_COLLECTION_S1*/
    .collection .s1{
        padding:60px 0;
        margin-bottom:5em;
    }
    
    /*STONES_COLLECTION_S2*/
    .collection .s2 li{
        height:auto;
        display:block;
        margin-bottom:6em;/*11_19*/
    }
    
    .collection .s2 li .title_box{
        width:auto;
        text-align:center;
    }
    
    .collection .s2 li p{
        max-width:300px;
    }
    
    .collection .s2 li img{
        position:static;
        margin:-2em 0 0 0 !important;
        width:100%;
    }
    
    /*STONES_IN-----------------*/
    
    /*STONES_IN_S1*/
    .stones.in .s1 .out,
    .master.in .s1 .out{
        height:auto;
        padding:60px 20px;
    }
    
    .stones.in .s1 img,
    .master.in .s1 img{
        /*display:none;*/
        width:100%;
        position:static;
        margin-left:0;
        margin-top:-12em;
        opacity:0.5;
        transform:none;
    }
    
    .stones.in .s1 .t1:after{
        width:170px;
    }
    
    /*STONES_IN_S2*/
    .stones.in .s2{
        padding:60px 0 10px;
    }
    
    .choose{
        margin:0 auto;
    }
    
    .stones.in .s2 .box{
        margin:60px auto;
        gap:60px 30px;
        justify-content:center;
        grid-template-columns:repeat(auto-fit,minmax(auto,280px));
    }
    
    /*STONES_IN_S3*/
    .stones.in .s3{
        padding:60px 0;
    }
    
    .stones.in .s3 .out{
        display:block;
    }
    
    .stones.in .s3 .word{
        min-width:0;
        margin-bottom:30px;
    }
    
    .stones.in .s3 .t2{
        max-width:none;
    }
    
    /*STONES_INFO-----------------*/
    
    /*STONES_INFO_S1*/
    .stones.info .s1,
    .stones.info .s2,
    .master.info .s6{
        padding:60px 0;
    }
    
    .stones.info .s1 .out{
        display:block;
    }
    
    .stones.info .s1 .splide__arrow,
    .stones.info .s2 .splide__arrow,
    .master.info .s6 .splide__arrow{
        display:none;
    }
    
    /*STONES_INFO_S1_LEFT*/
    .stones.info .s1 .left{
        margin-bottom:30px;
    }
    
    .stones.info .s1 .left .t1{
        display:block;
        font-size:32px;
        margin-bottom:40px;
    }
    
    /*STONES_INFO_S1_RIGHT*/
    .stones.info .s1 .right .ask{
        max-width:none;
    }
    
    .stones.info .s1 .right .t1{
        display:none;
    }
    
    /*STONES_INFO_S2*/
    .stones.info .s2 .splide,
    .master.info .s6 .splide{
        padding:40px 0 60px;
    }
    
    /*MASTER-----------------------------------------*/
    
    /*MASTER_LIST-----------------*/
    .master.list .s1{
        height:300px;
    }
    
    /*MASTER_LIST_S2*/
    .master.list .s2{
        padding:60px 0;
    }
    
    .master.list .s2 .top br{
        display:none;
    }
    
    .master.list .s2 li{
        display:block;
        margin-bottom:60px;
    }
    
    .master.list .s2 li:last-child{
        margin-bottom:0;
    }
    
    .master.list .s2 .title_box{
        padding:0 20px;
        box-sizing:border-box;
    }
    
    .master.list .s2 .title_box,
    .master.list .s2 img{
        width:100%;
    }
    
    /*MASTER_IN-----------------*/
    
    /*MASTER_IN_S2*/
    .master.in .s2{
        padding:60px 0;
    }
    
    .master.in .s2 .t1{
        margin-bottom:30px;
    }
    
    /*MASTER_IN_S3*/
    .master.in .s3{
        padding:60px 0 10px;
    }
    
    .master.in .s3 .box{
        margin:60px auto;
        justify-content:center;
        grid-template-columns:repeat(auto-fit,minmax(auto,400px));
        gap:80px 9%;
    }
    
    /*MASTER_INFO-----------------*/
    
    /*MASTER_INFO_S1*/
    .master.info .s1{
        padding-top:1em;
    }
    
    .master.info .s1 img{
        width:1000px;
    }
    
    .master.info .s1 .title{
        top:50px;
    }
    
    .master.info .s1 .t1{
        font-size:var(--title2);
    }

    .master.info .s1 .t2{
        font-size:var(--title4);
    }
    
    /*MASTER_INFO_S2*/
    .master.info .s2{
        height:300px;
        margin-top:-70px;
    }
    
    /*MASTER_INFO_S4*/
    .master.info .s4 .hide{
        padding:60px 0;
    }
    
    .master.info .s4 .out{
        display:block;
    }
    
    .master.info .s4 .text{
        margin:0 0 2em;
    }
    
    /*MASTER_INFO_S5*/
    .master.info .s5{
        padding:60px 0;
    }
    
    .master.info .s5 .title{
        font-size:var(--title3);
    }
    
    /*NEWS-----------------------------------------*/
    .news .s1,
    .services .s1,
    .contact .s1,
    .brand .s1{
        height:300px;
    }
    
    .news .s1 .en,
    .services .s1 .en,
    .contact .s1 .en,
    .brand .s1 .en{
        position:absolute;
        top:110px;
        right:50px;
    }
    
    /*NEWS_LIST-----------------*/
    
    /*NEWS_LIST_S2*/
    .tab{
        position:relative;
        z-index:1;
        width:220px;
        color:#000000;
        margin:0 auto;
    }
    
    .tab a:after{
        display:none;
    }

    .tab div{
        display:block;
        position:relative;
        line-height:50px;
        border:#BBBBBB 1px solid;
        text-align:center;
        cursor:pointer;
    }

    .tab div:after{
        content:"";
        position:absolute;
        right:20px;
        top:50%;
        border-style:solid;
        border-width:6px 3px 0 3px;
        border-color:#000000 transparent transparent transparent;
        margin-top:-3px;
    }

    .tab ul{
        display:block;
        position:absolute;
        width:100%;
        background:#EEEEEE;
        border-style:solid;
        border-color:#BBBBBB;
        border-width:0 1px 1px 1px;
        box-sizing:border-box;
        transform-origin:top;
        transform:scaleY(0);
        transition:transform 0.2s;
    }

    .tab div.active + ul{
        transform:scaleY(1);
    }

    .tab a{
        border:none;
        transition:0.2s;
    }
    
    .tab .active a{
        color:#000000;
        background:#EEEEEE !important;
    }

    .tab a:hover{
        color:var(--blue);
    }

    .tab a:before{
        content:"";
        position:absolute;
        left:20px;
        right:20px;
        bottom:0;
        height:1px;
        background:#BBBBBB;
    }
    
    .tab li:last-child a:before{
        display:none;
    }
    
    .news.list .s2{
        padding:60px 0;
    }
    
    .news.list .s2 .box{
        margin-top:20px;
        display:block;
    }
    
    .news.list .s2 .box .text{
        width:auto;
        padding:0;
    }
    
    .news.list .s2 .box img{
        width:100%;
        margin:40px 0;
    }
    
    .news.list .s2 .text{
        display:block;
    }
    
    .news.list .s2 .more{
        display:none;
    }
    
    /*NEWS_LIST_S3*/
    .news.list .s3{
        padding:60px 0 1px;
    }
    
    .news.list .s3 .out{
        justify-content:center;
        grid-template-columns:repeat(auto-fit,minmax(auto,400px));
    }
    
    /*NEWS_INFO-----------------*/
    
    /*NEWS_INFO_S2*/
    .news.info .s2{
        padding:60px 0;
    }
    
    .news.info .s2 .top{
        padding-top:1em;
    }
    
    .news.info .s2 .box{
        margin:20px auto 60px;
    }
    
    .news.info .s2 .box{
        max-width:960px;
        margin:20px auto;
        color:#000000;
    }
    
    .news.info .s2 .tab a{
        background:#FFFFFF !important;
    }
    
    /*NEWS_INFO_S3*/
    .news.info .s3{
        padding-bottom:60px;
    }
    
    .news.info .s3 ul{
        gap:30px;
        justify-content:center;
        grid-template-columns:repeat(auto-fit,minmax(auto,400px));
    }
    
    .news.info .s3 li{
        margin-bottom:30px;
    }
    
    .news.info .s3 li a{
        display:block;
    }
    
    .news.info .s3 li img{
        width:100%;
    }
    
    .news.info .s3 .top{
        margin:1.3em 0 9px;
    }
    
    /*SERVICES-----------------------------------------*/
	.brand .tab,
    .services.list .tab{
		display:none;
    }
    
    /*SERVICES_LIST-----------------*/
    
    /*SERVICES_LIST_S2*/
    .services.list .s2{
        padding:60px 0;
    }
    
    /*SERVICES_LIST_S3*/
    .services.list .s3{
        padding-top:0;
    }
    
    .services.list .s3 li,
    .services.info .s4 li{
        display:block;
        padding:0;
    }
    
    .services.list .s3 .title_box,
    .services.info .s4 .title_box{
        width:auto;
    }
    
    .services.list .s3 img,
    .services.info .s4 img{
        width:100%;
    }
    
    .services.list .s3 .title_box .text,
    .services.info .s4 .title_box .text{
        padding:150px 20px 60px;
    }
    
    .services.list .s3 li:first-child .title_box .text,
    .services.info .s4 li:first-child .title_box .text{
        padding-top:20px;
    }
    
    .services.list .s3 li:nth-child(3){
        aspect-ratio:auto;
    }
    
    .services.list .s3 li:nth-child(3) img{
        position:static;
    }
    
    /*SERVICES_INFO-----------------*/
    
    /*SERVICES_INFO_S2*/
    .services.info .s2{
        padding:60px 0;
    }
    
    /*SERVICES_INFO_S3*/
    .services.info .s3 .t2{
        margin:60px 0;
    }
    
    /*SERVICES_INFO_S4*/
    .services.info .s4 .title_box .text{
        text-align:left;
    }
    
    .services.info .s4 .t1{
        display:block;
    }
    
    .services.info .s4 .t1 span{
        display:block;
        margin-bottom:20px;
    }
    
    .services.info .s4 .t1 span:after{
        display:none;
    }
    
    .services.info .s4 .t2,
    .services.info .s4 .ps{
        max-width:none;
    }
    
    /*SERVICES_MAIL*/
    .services .mail .top{
        display:block;
    }
    
    .services .mail .top .t1{
        margin-bottom:1em;
    }
    
    /*SERVICES_ADVISE-----------------*/
    .services.advise .s4 .ps2{
        width:90%;
        margin:100px auto 0;
    }
    
    /*SERVICES_ART-----------------*/
    
    /*SERVICES_ART_S3*/
    .services.art .s3 .t3{
        margin:60px 0 1em;
    }
    
    .services.art .s3 .t2{
        margin:0 auto 90px !important;
    }
    
    /*SERVICES_ART_S4*/
    .services.art .s4 .ps2{
        margin:100px auto 0;
    }
    
    /*SERVICES_TIME-----------------*/
    
    /*SERVICES_TIME_S4*/
    .services.time .s4 .out{
        height:auto;
        padding:90px 6% 50px;
    }
    
    .services.time .s4 .pc{
        display:none;
    }
    
    .services.time .s4 .mb{
        display:block;
        width:100%;
    }
    
    .services.time .s4 .t2{
        margin:4em 0 2em;
    }
    
    /*SERVICES_TIME_S5*/
    .services.time .s5 .out{
        padding:90px 6%;
    }
    
    /*SERVICES_TIME_S6*/
    .services.time .s6 .top{
        text-align:center;
    }
    
    .services.time .s6 .text{
        margin:60px auto 0;
    }
    
    .services.time .s6 .t1{
        flex-direction:column;
    }
    
    .services.time .s6 .top .t1:after{
        display:none;
    }
    
    .services.time .s6 .splide__arrow{
        top:77px;
        width:30px;
        height:30px;
    }
    
    .services.time .s6 .splide__arrow--prev{
        left:15px;
    }

    .services.time .s6 .splide__arrow--next{
        right:15px;
    }
    
    /*CONTACT-----------------------------------------*/
    
    /*CONTACT_S2-----------------*/
    .contact .s2,
    .contact .s3{
        padding:60px 0;
    }
    
    .contact .s2 .out,
    .contact .s3 .out{
        display:block;
    }
    
    .contact .s2 .mail form{
        max-width:none;
    }
    
    .contact .s2 .t2{
        margin:40px 0 0;
    }
    
    .contact .s2 .left{
        margin-bottom:60px;
    }
    
    /*CONTACT_S3-----------------*/
    .contact .s3 .title{
        margin-bottom:30px;
    }
    
    .contact .s3 .pc{
        display:none;
    }

    .contact .s3 .mb{
        display:block;
        width:100%;
        margin-top:60px;
    }
    
    /*COMMON--------------------------------------------------------------------*/
    
    /*HEADER-----------------------------------------*/
	.header{
        position:sticky;
        top:0;
        z-index:1000;
	}
    
	.header .out{
		height:60px;
	}
    
    .header ul.out{
        height:auto;
    }
    
    .header .logo{
        top:50%;
        left:50%;
        max-width:90px;
        margin-left:-45px;
        transform:translateY(-50%);
    }
    
    .header .pc,
    .menu{
		display:none;
    }
    
    .mb .logos{
        display:none;
    }
    
	/*HEADER_MB_BUTTON-----------------*/
    .header .mb_bt,
    .header .mb{
        display:block;
    }
	
	.header .mb_bt{
		position:absolute;
		top:50%;
		right:20px;
		width:40px;
		height:40px;
		margin-top:-20px;
		text-align:left;
		cursor:pointer;
	}
	
	.header .mb_bt span{
		height:1px;
		width:40px;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
		background:#FFFFFF;
		transition:0.3s;
		display:block;
	}
	
	.header .mb_bt span:before,
	.header .mb_bt span:after{
		content:"";
		height:1px;
		position:absolute;
		right:0;
		background:#FFFFFF;
		transition:0.3s;
	}
	
	.header .mb_bt span:before{
		top:-8px;
		width:40px;
	}
	
	.header .mb_bt span:after{
		top:8px;
		width:40px;
	}
	
	.header .mb_bt.active span:before{
		width:40px;
		top:0;
		transform:rotate(45deg);
	}
	
	.header .mb_bt.active span:after{
		width:40px;
		top:0;
		transform:rotate(-45deg);
	}
	
	/*.header .mb_bt.active:hover span{
		width:40px;
		transform:rotate(-90deg);
	}*/
	
	.header .mb_bt.active span{
		background:none;
	}
    
	/*HEADER_LANG-----------------*/
    .header .mb .lang{
        position:absolute;
        top:30px;
        right:40px;
		z-index:1;
    }
    
	/*HEADER_MENU-----------------*/
	.header .mb{
		position:fixed;
		top:60px;
		bottom:0;
		left:0;
        z-index:1000;
		width:100%;
		overflow-y:auto;
        background:#000000;
		transform:translateX(100%);
		transition:0.3s ease-in-out;
		-webkit-overflow-scrolling:touch;
	}
	
	.header .mb.active{
		transform:translateX(0);
	}
	
	.header .mb .out{
		padding:80px 40px 100px;
	}
	
	.header .mb .out li a{
		display:block;
		font-size:20px;
		padding:1em 0;
		position:relative;
		cursor:pointer;
		border-bottom:#111111 1px solid;
		transition:0.2s;
	}
	
	.header .mb ul a:hover{
		color:var(--yellow);
	}
    
    /*AREA-----------------------------------------*/
    .area{
        display:none;
    }
    
    /*FOOTER-----------------------------------------*/
    
    /*FOOTER_TOP-----------------*/
    .footer .top .out{
        display:block;
        text-align:center;
    }
    
    .footer .top{
        padding:40px 0 20px;
    }
    
    .footer .top .logo{
        /*width:160px;*/
		width:90px;
    }
    
    .footer .top .left{
        width:auto;
        display:block;
    }
    
    .footer .top .left .list{
        display:none;
    }
    
    .footer .top .left .list:last-child{
        display:block;
    }
    
    .footer .top .left .list ul{
        display:grid;
        justify-content:center;
        margin-top:2em;
    }
    
    /*FOOTER_BM-----------------*/
    .footer .bm{
        text-align:center;
    }
}