@charset "utf-8";

.brand #container {padding:0; overflow:hidden;}

.brand-sec1 {position:relative;}
.brand-sec1 .img {height:100vh; background:url("../../img/brand/brand_sec1_bg.jpg") no-repeat center center; background-size:cover;}
.brand-sec1 .txt {position:absolute; left:0; top:0; width:100%; height:100%; font-family:"Baloo Thambi 2",sans-serif; font-size:5.625em; letter-spacing:0.01em; text-align:center; line-height:1.111em;}
.brand-sec1 .txt .vertical-box {width:100%; height:100%;}
.brand-sec1 .goal {display:inline-block; position:relative; height:1.1em; padding:0 0 8px; color:#8d80bb; font-weight:900; overflow:hidden;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}
.brand-sec1 .goal em,
.brand-sec1 .goal i {display:inline-block; font-style:normal; vertical-align:top;}
.brand-sec1 .goal .line {position:absolute; left:50%; bottom:0; width:0; height:10px; margin-left:0; background:#8d80bb;}
.brand-sec1 .txt b {display:block;}

.brand-info {position:relative; width:100%;}
.brand-info .vertical-cell {padding:0 40px;}
.brand-info strong {display:inline-block; max-width:360px; margin:0 0 16px; font-family:"Baloo Thambi 2",sans-serif; font-size:4.375em; letter-spacing:0.01em; line-height:1.171em;}
.brand-info .icon-tit {padding:70px 0 0; background-repeat:no-repeat; background-position:left top;}
.brand-info .icon01 {background-image:url("../../img/brand/brand_icon01.png");}
.brand-info .icon02 {background-image:url("../../img/brand/brand_icon02.png");}
.brand-info p {margin:1em 0 0; color:#555; font-size:1.250em; letter-spacing:-0.02em; line-height:1.600em;}

.brand-sec2 {position:relative; padding:120px 0;}
.brand-sec2 .img {width:53.125%; text-align:right;}
.brand-sec2 .txt-box {max-width:520px;}
.brand-sec2.start .move-circle {left:60%;}

.brand-sec3 {position:relative; padding:0 0 120px;}
.brand-sec3 .txt {position:relative; width:40.83%; text-align:right; z-index:1;}
.brand-sec3 .txt-box {display:inline-block; max-width:320px; text-align:left;}
.brand-sec3 .brand-info .icon-tit {white-space:nowrap;}
.brand-sec3 .img {position:relative;}
.brand-sec3.start .circle0301 {left:55%;}

.brand-sec4 {position:relative; padding:0 0 90px;}
.brand-sec4 .img {width:54.166%; text-align:right;}
.brand-sec4 .txt-box {max-width:290px;}

.brand-sec5 {position:relative; padding:240px 0 150px; text-align:center; background:url("../../img/brand/brand_sec5_bg.png") no-repeat center top; background-size:100% auto;}
.brand-sec5 p {position:relative; padding:0 20px; font-family:"Baloo Thambi 2",sans-serif; font-size:4.375em; letter-spacing:0.01em; line-height:1.171em; z-index:11;}
.brand-sec5 .btn-view-more {margin:2.500em 0 0;}
.brand-sec5.start .circle0501 {top:90%;}

.circle0201 {left:47.395%; top:17.99%; width:3.333vw; height:3.333vw; background:#afa6cf;}
.circle0202 {left:72.187%; top:84.518%; width:6.25vw; height:6.25vw; background:#fef6cb;}
.circle0203 {left:77.083%; top:-6.666vw; width:13.333vw; height:13.333vw; background:#8ed7da;}
.circle0301 {left:40.885%; top:72.822%; width:3.333vw; height:3.333vw; background:#fde97d;}
.circle0302 {left:13.852%; top:65.679%; width:11.25vw; height:11.25vw; background:#ddd9ea;}
.circle0401 {left:1.458%; top:37.669%; width:25vw; height:25vw; background:#fef6cb;}
.circle0402 {left:84.739%; top:77.523%; width:3.333vw; height:3.333vw; background:#fde97d;}
.circle0501 {left:21.145%; top:53.435%; width:3.333vw; height:3.333vw; background:#ddd9ea;}
.circle0502 {left:-20%; top:0; width:13.541vw; height:13.541vw; opacity:0.7; background:#8ed7da;}

.circle0201,
.circle0402,
.circle0501 {
    -webkit-animation:cirMove 1s infinite alternate;
    -moz-animation:cirMove 1s infinite alternate;
    animation:cirMove 1s infinite alternate;
}
.circle0202,
.circle0302 {
    -webkit-animation:cirMove 1.2s 400ms infinite alternate;
    -moz-animation:cirMove 1.2s 400ms infinite alternate;
    animation:cirMove 1.2s 400ms infinite alternate;
}
.circle0203,
.circle0301 {
    -webkit-animation:cirMove 1.5s 600ms infinite alternate;
    -moz-animation:cirMove 1.5s 600ms infinite alternate;
    animation:cirMove 1.5s 600ms infinite alternate;
}


@media screen and (max-width:1440px){
.brand-sec1 .img {background-position:20% center;}

.brand-info .vertical-cell {padding:0 20px;}
.brand-info strong {font-size:3.286em;}
.brand-info p {font-size:1.167em;}
}


@media screen and (max-width:1023px){
.brand-sec1 .txt {font-size:4.286em;}
.brand-sec1 .goal {padding:0 0 6px;}
.brand-sec1 .goal .line {height:8px;}

.brand-info strong {margin:0 0 8px;}
.brand-info .icon-tit {padding:58px 0 0; background-size:auto 45px;}

.brand-sec2 .brand-info p br {display:none;}

.brand-sec5 {padding:26.66% 0 21.33%;}
.brand-sec5 p {font-size:3.4em;}
}


@media screen and (max-width:767px){
.brand-sec1 .img {height:468px; background-image:url("../../img/brand/m/brand_sec1_bg.jpg"); background-position:center center;}
.brand-sec1 .txt {font-size:3.167em;}
.brand-sec1 .goal {padding:0 0 4px;}
.brand-sec1 .goal .line {height:5px;}

.brand-info {display:block; position:relative; padding:50% 0 0;}
.brand-info .img {display:block; position:absolute; left:0; top:0; width:auto; padding:0;}
.brand-info .txt {display:block; position:relative; width:auto; padding:0 40px; z-index:1;}
.brand-info strong {max-width:180px; font-size:2.500em;}
.brand-info .icon-tit {padding:45px 0 0; background-size:auto 30px;}

.brand-sec2 {padding:14.66% 0;}
.brand-sec2 .brand-info {padding:90% 0 0;}
.brand-sec2 .brand-info .img {left:14px; right:28px;}

.brand-sec3 {padding:0 0 14.66%;}
.brand-sec3 .brand-info {padding:66.66% 0 0;}
.brand-sec3 .brand-info .img {left:20px; right:-20px;}
.brand-sec3 .txt-box {display:block; text-align:left;}
.brand-sec3 .txt-box .br2 {display:none;}

.brand-sec4 .brand-info {padding:92.8% 0 0;}
.brand-sec4 .brand-info .img {left:12px; right:40px;}

.brand-sec5 p {font-size:2.5em;}

.circle0201 {left:80%; top:12.09%; width:6.66vw; height:6.66vw;}
.circle0202 {left:57%; top:75%; width:34.66vw; height:34.66vw;}
.circle0301 {left:38.13%; top:57%; width:8.53vw; height:8.53vw;}
.circle0302 {left:54%; top:75.5%; width:28.8vw; height:28.8vw;}
.circle0401 {left:32.8%; top:28.768%; width:64vw; height:64vw;}
.circle0402,
.circle0501 {display:none;}
}