body{ font-size:16px;}
#titlearea.level2.second{min-height: unset;}
.subtext{font-weight: bold; font-size:24px}
.text-center{text-align: center}
/*img{width: 100%;}*/
p{line-height:32px;}

.contents a:hover{opacity:unset}


.sp body, .sp th, .sp td, .sp input, .sp select, .sp textarea{font-size: unset}
.contents > div{padding: 60px 40px; z-index:1; }
.contents h2:before,
.contents h3:before{display: none}
.contents * + .h2with, .contents * + h2{margin-top: unset}
.contents h2{border: unset; padding: unset; line-height: unset; margin:unset}
.contents h3{margin:0px; color:unset;}
.contents h4{font-size: unset; font-weight: unset; line-height: unset; color: unset; margin:0px;}
.sp .contents h3,
.tablet .contents h3,
.sp .contents h2,
.sp .contents h4,
.tablet .contents h4{font-size:unset}



h1,h2,h3,h4,h5,h6{margin:0px; padding:0px; }


h1{}
.contents h2,h2{font-size: 60px !important; line-height: normal; font-weight: 900; margin-bottom: 30px;}
.contents h2.h2big,h2.h2big{font-size: 64px !important;}
.contents h2.h2small,h2.h2small{font-size: 56px !important;}
.contents h3,h3{font-size:40px !important; line-height: 60px; font-weight: bold;}
.contents h3.h3small,h3.h3small{font-size:36px !important; line-height: 50px;}
.contents h3.h3extrasmall,h3.h3extrasmall{font-size:32px !important; line-height: 54px;}
.contents h4,h4{font-size:24px !important; line-height: 36px; font-weight: bold;}
.contents h5,h5{font-size:20px !important; line-height:30px; font-weight: bold}
.contents h6,h6{font-size:18px !important; font-weight: bold; line-height: 36px;}

figure{margin:0px;}
figure img{width: 100%;}

main{
    display: block;
    background-color:#F1F6FC;
}

.oilsheader{position: relative; z-index:1;}
.oilsheader .oilsheaderbgtext{position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:0;}
.oilsheader .oilsheadercontent{position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:1}
.oilsheader .oilsheadercontent .oilsheadercontent-inner{position: relative; height:100%; width:calc(100% - 40px); max-width:1400px; margin:0px auto}
.oilsheader .oilsheadercontent-1{max-width: 695px; margin:30px auto 40px}
.oilsheader .oilsheadercontent-2{color:#fff;}
.oilsheader .oilsheaderbg img{height:719px}


.oilsheader .oilsheaderbgtext svg {
    width: 100%;
	height: calc(100% - 100px);
	mask-image: url('../images/oilsheaderbgtext.png');
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: 0% 100%;
    mask-size: 100% auto;
    -webkit-mask-image: url('../images/oilsheaderbgtext.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: 100% auto;
	transition: all .4sease-out;
    transition: var(--transit-default, all 0.4sease-out);
	transform: translate3d(0px, 0px, 0px);
	
}

.oilsheader .oilsheaderbgtext .mainimage{width: 100%; position: absolute; top:0px; left:0px; z-index: -1; opacity: .05;}




.blue_move2{
  animation-name: moveLandam2;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 15s;
}

@keyframes moveLandam2 {
    0% {
        transform: translate(100% , -100%);
    }
    10% {
        transform: translate(90%, 0);
    }
    20% {
        transform: translate(80%, -100%);
    }
    30% {
        transform: translate(70%, 0);
    }
    40% {
        transform: translate(60%, 100%);
    }
    50% {
        transform: translate(50%, 0);
    }
    60% {
        transform: translate(40%, -100%);
    }
    70% {
        transform: translate(20%, 0);
    }
    80% {
        transform: translate(10%, 100%);
    }
    90% {
        transform: translate(0, 0%);
    }
    100% {
        transform: translate(-20% , -100%);
    }
}

.blue_move {

background-color:#ccc;
  animation-name: moveLandam;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 15s;
}

@keyframes moveLandam {
    0% {
        transform: translate(-50% , -100%);
    }
    10% {
        transform: translate(-30% , 0%);
    }
    20% {
        transform: translate(-20%, 100%);
    }
    30% {
        transform: translate(-10%, 0);
    }
    40% {
        transform: translate(0%, -100%);
    }
    50% {
        transform: translate(20%, 0);
    }
    60% {
        transform: translate(40%, 100%);
    }
    70% {
        transform: translate(60%, 0);
    }
    80% {
        transform: translate(80%, -100%);
    }
    90% {
        transform: translate(90%, 0);
    }
    100% {
        transform: translate(100%, 100%);
    }
}


.line-scroll{text-align: center; font-size:14px; font-weight: 500; font-family: 'Roboto', sans-serif; color:#0053B0; height:140px; position: absolute; left:50%; bottom:-10px;}
.line-scroll span{position: absolute; left: -18px;}
.line-scroll:before {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0px;
	width: 1px;
	height: 120px;
	margin-left: -1px;
	background: #0053B0;
}

.line-scroll:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 1px;
    height: 0px;
    margin-left: -1px;
    background: #fff;
    animation: drop 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes drop {
	0% {
		bottom: 0px;
		height: 0px;
	}
	70% {
		bottom: 120px;
		height: 0px;
	}
	85% {
		bottom: 0px;
		height: 120px;
	}
	100% {
		bottom: 0px;
		height: 0px;
	}
}



.circle-mask.animated{
	
	
   -webkit-mask-image: url(../images/circle.svg);
  -webkit-mask-position: center center;
  mask-image: url(../images/circle.svg);
  mask-position: center center;
  mask-repeat: no-repeat;   
  animation: circlemaskaimation 1.5s forwards; 

}


@keyframes circlemaskaimation
{
	0%{mask-size: 0% 0%; -webkit-mask-size: 0% 0%;}
	100%{mask-size: 400% 400%; -webkit-mask-size: 400% 400%;}
	
	
}



.oilsheadercontentimg-1,
.oilsheadercontentimg-2,
.oilsheadercontentimg-3,
.oilsheadercontentimg-4{position: absolute; width:100%; bottom:50px;}

.oilsheadercontentimg-1{left:0px}
.oilsheadercontentimg-2{left:25%; bottom:-20px}
.oilsheadercontentimg-3{right:20%; bottom:-20px}
.oilsheadercontentimg-4{right:0px}

.oilsheadercontentimg-1{max-width:229px;}
.oilsheadercontentimg-2{max-width:170px;}
.oilsheadercontentimg-3{max-width:266px;}
.oilsheadercontentimg-4{max-width:217px;}

.management-philosophy{ line-height:100px; z-index:1; position: relative}
.management-philosophy.contents > div{padding-bottom:150px}
.management-philosophy .subtext{color:#0053B0; line-height:normal}
.management-philosophy small{font-size: 40px;}
.management-philosophy h2{color:#000;}
.management-philosophy h2 ani{position: relative; display: block; line-height:77px; margin-bottom:15px}
.management-philosophy .h2small{margin-top:50px !important; margin-bottom: 0px;}
.management-philosophy .h2small span,
.management-philosophy .h2big span{color:#000; position: relative;}



.management-philosophy .h2small animationtext,
.management-philosophy .h2big animationtext{clip-path: inset(0% 100% 0% 0%); width:100%; height:100%; background-color:#FAA91A; color:#fff; z-index: 0; position: absolute; top:0px; right:0px;  content:''}

.management-philosophy .h2small{line-height:82px;}
.management-philosophy .h2big{line-height:92px;}

.management-philosophy animationtext.animated{animation: hightlightbg 1s forwards; }


@-webkit-keyframes hightlightbg{
	10%{clip-path: inset(0% 100% 0% 0%);}
	50%{clip-path: inset(0% 0% 0% 0%);}
	100%{clip-path: inset(0% 0% 0% 100%);}
}

@keyframes hightlightbg{
	
	10%{clip-path: inset(0% 100% 0% 0%);}
	50%{clip-path: inset(0% 0% 0% 0%);}
	100%{clip-path: inset(0% 0% 0% 100%);}
}


.management-philosophy .mp-img1,
.management-philosophy .mp-img2,
.management-philosophy .mp-img3{position: absolute;}

.management-philosophy .mp-img1{max-width:324px; bottom:-120px;}
.management-philosophy .mp-img2{max-width:195px; bottom:-30px; right:30px;}
.management-philosophy .mp-img3{max-width:152px; bottom:-50px; right:0px;}


.animated.clip-animation{animation:circleanimation 2s forwards}
	
@-webkit-keyframes circleanimation
{
	0%{clip-path: circle(0%);}
	100%{clip-path: circle(100%);}		
}
	
@keyframes circleanimation
{
	0%{clip-path: circle(0%);}
	100%{clip-path: circle(100%);}		
}
		

.keyword1{position: relative; margin-bottom: 70px;}

keywordheader{position: absolute; top:0px; width: 100%; z-index:0; height:935px}
keywordheader figure{height: 100%;}
keywordheader img{width:100%; height: 100%; object-fit: cover}
.keyword-header{margin-bottom:75px; position: relative;}
.keyword1 h2{}
.keyword1 h2,
.keyword1 h6{color:#fff}
.keywordtext{padding-top: 15px; font-size:14px; font-weight: 500; font-family: 'Roboto', sans-serif; color:#38BCFF;}
.keywordtext span{display: block; font-size:60px; font-weight: 900; color:transparent; -webkit-text-stroke: 1px #38BCFF; paint-order: stroke fill; text-stroke: 1px #38BCFF; }

.keyword1-carousal-outer{position: relative; background-color:#fff; border-radius:30px; box-shadow:3px 0px 15px rgba(0,0,0,.2); padding:60px; color:#000}
.keyword1-carousal-outer-heading{font-size:40px; font-weight: bold;}

.keyword1-carousal-outer .shorttitle{position: absolute; width:100%; top:-15px; left:0px; text-align: center}
.keyword1-carousal-outer .shorttitle span{padding:5.5px 22.1px; background-color:#38BCFF; color:#fff; font-size:20px; font-weight: bold; border-radius:28px; border:2px #fff solid;}

.keyword1-img{width:100%; max-width:122px; position: absolute; top:-50px; left:30px}
.keyword1-img img{width:100%;}

.keyword1 h3{color:#000; padding:0px; margin:0px 0px 40px 0px;}
.keyword1 h3:before{display: none}
.keyword1 h4{margin-bottom:20px}

.keyword1-carousal{background-color:#F5F5F5; padding:30px}
.keyword1-carousal .h3extrasmall{color:#0053B0; border-bottom:2px #0053B0 solid; padding-bottom:20px; margin-bottom:30px}
.keyword1-carousal h5{font-size:24px; font-weight: bold;}

.keyword1-carousal .slide-content{display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 10px;}
.keyword1-carousal video{width: 100%;}


.keyword1-carousal .slide2 .slide-content{flex-direction: row-reverse;}
.keyword1-carousal .slide2 .slide-content .col:first-child{width:100%; display: flex; flex-wrap: wrap; justify-content: space-between}
.keyword1-carousal .slide2 .slide-content .col:last-child{width:100%; }
.keyword1-carousal .slide2 .slide-content .col:first-child .col1,
.keyword1-carousal .slide2 .slide-content .col:first-child .col2{width:100%}
.keyword1-carousal .slide2 .slide-content .col:first-child span{display: block; margin-top:10px}


.keyword1-carousal .slide3 .slide-content .col:first-child{width:100%; display: flex; flex-wrap: wrap; justify-content: space-between}
.keyword1-carousal .slide3 .slide-content .col:last-child{width:100% }


.keyword1-carousal .slide3 .slide-content .col:first-child .col1,
.keyword1-carousal .slide3 .slide-content .col:first-child .col2{width: 100%}

.keyword1-carousal .slide3 .slide-content .col:first-child span{display: block; margin-top:10px}
.keyword1-carousal .slide3 ul.tags{display: flex; justify-content: center; margin-top:20px}
.keyword1-carousal .slide3 ul.tags li{background-color:#0053B0; border-radius:10px; margin:0px 5px; padding:1px 0px 2px 0px; color:#fff; font-size:12px; width:80px; text-align: center}

.keyword1-carousal-outer .slick-back,
.keyword1-carousal-outer .slick-next,
.nextbtn{margin: 0px auto; display: flex; flex-direction: column; text-align: center; justify-content: center; height: 64px; background-color:#0053B0 !important; color:#fff !important; font-weight: bold; padding:7px; border-radius:32px;}

.nextbtn{position: relative;}

.keyword1-carousal-outer .slick-back slideani,
.keyword1-carousal-outer .slick-next slideani,
.nextbtn slideani{border-radius: 31px; overflow: hidden; position: absolute; width: 100%; height: 100%; z-index:0; left:0px;}

.keyword1-carousal-outer .slick-back txt,
.keyword1-carousal-outer .slick-next txt,
.nextbtn txt{z-index:1}

.keyword1-carousal-outer .slick-back slideani:before,
.keyword1-carousal-outer .slick-next slideani:before,
.nextbtn slideani:before{position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #38BCFF;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;}
  
.keyword1-carousal-outer .slick-back:hover slideani:before,
.keyword1-carousal-outer .slick-next:hover slideani:before,
.nextbtn:hover slideani:before{transform: scaleX(1); transform-origin: left;}

.keyword1-carousal-outer .slick-back:hover,
.keyword1-carousal-outer .slick-next:focus,
.keyword1-carousal-outer .slick-next:hover,
.keyword1-carousal-outer .slick-next:focus,
.nextbtn:hover,
.nextbtn:focus{background-color:#0053B0; color:#fff; opacity: unset !important}

.keyword1-carousal-outer .slick-back:after,
.keyword1-carousal-outer .slick-next:after,
.nextbtn:after{width:40px; height:40px; position: absolute; content:''; right:-20px; top: calc(50% - 20px); background-image:url('../images/arrow1.png'); background-size: cover;}

.keyword1-carousal-outer .slick-back:after{left:-20px; right:unset; transform: rotate(180deg)}

.keyword1-carousal.slick-slider{margin:0px}
.keyword1-carousal.slick-slider .slick-dots{margin-bottom: -49px; margin-top: 30px;}
.keyword1-carousal.slick-slider .slick-dots li{margin:0px 4px}
.keyword1-carousal.slick-slider .slick-dots li.slick-active{ }
.keyword1-carousal.slick-slider .slick-dots li button{position: relative; font-family: 'Roboto', sans-serif; width:unset; height: unset; background-color: #fff; cursor: pointer; border:2px #38BCFF solid; border-radius:28px; padding:8.5px 18.55px 7.5px; font-size:16px; font-weight: bold; color:#38BCFF; }
.keyword1-carousal.slick-slider .slick-dots li.slick-active button{background-color: #38BCFF; color:#fff; padding-left: 65px;}
.keyword1-carousal.slick-slider .slick-dots li.slick-active button:before{content:'STEP';position: absolute; left:20px;}

.keyword1-carousal-outer .slick-arrow{transition: ease all .5s; font-size:16px; font-weight: bold;}
.keyword1-carousal-outer .slick-prev{display: none !important;}

.keyword1-carousal-outer .btn-wrap{position: relative}



.keyword1-carousal-outer .slick-next{opacity:1; padding: 8.5px 40px 8.5px 20px; right:-20px; bottom:-28px; top: unset; width:unset; height: unset; }
.keyword1-carousal-outer .slick-next span{font-family: 'Roboto', sans-serif; display: block; color:#38BCFF; text-align: left; font-weight: 900; text-transform: uppercase}
.keyword1-carousal-outer .slick-next:hover span{color:#fff}


.keyword1-carousal-outer .slick-back{opacity:1; padding: 8.5px 40px 8.5px 20px; left:-20px; bottom:-28px; top: unset; width:unset; height: unset; }
.keyword1-carousal-outer .slick-back span{font-family: 'Roboto', sans-serif; display: block; color:#38BCFF; text-align: left; font-weight: 900; text-transform: uppercase}
.keyword1-carousal-outer .slick-back:hover span{color:#fff}

.keyword1-carousal-outer .slick-back.step4,
.keyword1-carousal-outer .slick-next.step1{display: none; opacity:0;}

.keyword1-second-carousal-outer .keyword1-bubble1{width:240px; position: absolute; z-index:1; right:-18px; top:-135px}
.keyword1-second-carousal-outer .keyword1-second-carousal-header{position: absolute; top:0px ;z-index:0; width: 100%; background: linear-gradient(#08A3F0, #8AD2FF); height:437px;}

.keyword1-second-carousal-outer{position: relative; margin-top: 70px; color:#fff; padding:60px 0px}
.keyword1-second-carousal-outer h5{font-weight:900; margin: 0px; border-bottom: 1px #fff solid;  width: fit-content; margin-bottom:10px}
.keyword1-second-carousal-outer h3.h3small{margin-top:10px; margin-bottom:20px; color:#fff; font-weight: 900}
.keyword1-second-carousal-inner{position: relative; display: flex; flex-wrap: wrap; z-index:1}
.keyword1-second-carousal-inner .col{width:100%; position: relative}
.keyword1-second-carousal-outer .keyword1-second-carousal{}
.keyword1-second-carousal-outer .keyword1-second-carousal h3.h3extrasmall{line-height: 36px; color:#000; margin-bottom: 20px; margin-top:0px;}
.keyword1-second-carousal-outer .keyword1-second-carousal figure{margin:0px; margin-bottom:15px;}
.keyword1-second-carousal-outer .keyword1-second-carousal figure img{width:100%; display: table}
.keyword1-second-carousal-outer .keyword1-second-carousal .slide-item-block{position: relative; height: 100%; padding:35px 30px 38px 30px; color:#000; margin-bottom:20px; background-color:#fff; border-radius:30px; box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, .1);}

.keyword1-second-carousal-outer .nextbtn1{overflow: hidden; font-size: 14px; position: relative; background-color:#0053B0; margin-top:15px; color:#fff !important; font-weight: bold; padding:10px 20px; text-align: left; display: block; border-radius:32px;}
.keyword1-second-carousal-outer .nextbtn1:after{background-image:url('../images/arrow3.png'); background-size: cover; position: absolute; width: 13px; height: 12px; content:''; right: 10px; top:calc(50% - 6px);}

.keyword1-second-carousal-outer .nextbtn1 txt{z-index:1; position: relative}
.keyword1-second-carousal-outer .nextbtn1 slideani:before{position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #38BCFF;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;}
  
.keyword1-second-carousal-outer .nextbtn1:hover slideani:before{transform: scaleX(1); transform-origin: left;}

.keyword1-second-carousal-outer .keyword1-second-carousal .slick-list{overflow: unset; overflow-x: hidden; overflow-x: clip;}

.keyword1-second-carousal-inner .block-content{max-width:320px}
.keyword1-second-carousal-inner .nextbtn{width:100%; text-align: center;}


.keyword1-second-carousal-outer .btn-wrap{width: 244px;}	
.keyword1-second-carousal-outer .slick-arrow,
.keyword1-second-carousal-outer .slick-arrow:focus{width:80px; height: 40px; border:2px #0053B0 solid; border-radius:20px; bottom:50px; top: unset; background-position: center; background-size:17px 16px;}
.keyword1-second-carousal-outer .slick-prev{background-image: url('../images/arrow2-prev.png'); }
.keyword1-second-carousal-outer .slick-next{background-image: url('../images/arrow2-next.png')}

.keyword2{position: relative; margin-bottom:100px}
.keyword2 h2,
.keyword2 h6{color:#fff}

.keyword2-outer{position: relative; background-color: #fff; border-radius: 30px; box-shadow: 3px 0px 15px rgba(0, 0, 0, .2); padding:60px; color: #000;}
.keyword2-outer .shorttitle{position: absolute; width: 100%; top: -15px; left: 0px; text-align: center;}
.keyword2-outer .shorttitle span{padding: 5.5px 22.1px; background-color: #38BCFF; color: #fff; font-size: 20px; font-weight: bold; border-radius: 28px; border: 2px #fff solid;}
.keyword2 h3{font-size: 40px; color: #000; font-weight: bold; padding: 0px; margin: 0px 0px 40px 0px;}
.keyword2 h4{font-size:24px; margin-bottom: 10px; font-weight: bold}

.keyword2-img1{max-width:379px; position: absolute; top:-40px; left:0%;}
.keyword2-bubble1{max-width:209px; position: absolute; top:-20px; right:15%;}

.keyword2 .keyword2-outer-block-first{background-color:#F5F5F5; padding:50px; margin-bottom:60px; display: flex; flex-wrap: wrap; justify-content: space-between}
.keyword2 .keyword2-outer-block-first .col{width:100%}
.keyword2 .keyword2-outer-block-first figure{text-align: center}
.keyword2 .keyword2-outer-block-first figure img{max-width:388px;}

.keyword2 .keyword2-outer-block-second h3{line-height:48px; margin-bottom: 0px;}
.keyword2 .keyword2-outer-block-second h6{font-size:20px; line-height: normal; color:#0053B0; margin-bottom:5px}

.keyword2 .keyword2-graphic{position: relative; padding:50px 0px; max-width:935px; margin:0px auto}
.keyword2 .keyword2-bubble2,
.keyword2 .keyword2-bubble3,
.keyword2 .keyword2-bubble4,
.keyword2 .keyword2-bubble5{position: absolute}

.keyword2 .keyword2-bubble2{top:0px; left:0px; width:293px}
.keyword2 .keyword2-bubble3{top:0px; right:0px; width:283px}
.keyword2 .keyword2-bubble4{bottom:0px; left:50px; width:315px;}
.keyword2 .keyword2-bubble5{bottom:0px; right:60px; width:272px;}

.keyword2 .keyword2-circle{max-width:480px; margin:0px auto}

.keyword2 .keyword2-nextbtn{margin-top:30px}
.keyword2 .keyword2-nextbtn .nextbtn{max-width:380px}

.keyword2 .keyword2-img2{position: absolute; bottom:50px; right:50px; width:122px;}


.keyword3{position: relative; margin-bottom: 100px;}
.keyword3 h2,
.keyword3 h6{color:#fff}

.keyword3 .keyword3-img1{position: absolute; top:0px; right:0px; width:277px;}
.keyword3 .keyword3-img2{position: absolute; bottom: 55px; right: 80px; width:122px;}
.keyword3-outer{position: relative; background-color: #fff; border-radius: 30px; box-shadow: 3px 0px 15px rgba(0, 0, 0, .2); padding: 60px 80px; color: #000;}
.keyword3-outer .shorttitle{position: absolute; width: 100%; top: -15px; left: 0px; text-align: center;}
.keyword3-outer .shorttitle span{padding: 5.5px 22.1px; background-color: #38BCFF; color: #fff; font-size: 20px; font-weight: bold; border-radius: 28px; border: 2px #fff solid;}
.keyword3 h3{font-size: 40px; color: #000; font-weight: bold; padding: 0px; margin: 0px 0px 40px 0px;}
.keyword3 h4{font-size:24px; margin-bottom: 10px; font-weight: bold}

.tab-section{}
.tab-btn{display:flex; flex-wrap: wrap; justify-content: space-between; margin-bottom:30px}
.tab-btn span{font-size: 18px; font-weight: 500; color:#38BCFF; cursor: pointer; position: relative; width:50%; text-align: center; padding-bottom:8px; border-bottom:2px #38BCFF solid}
.tab-btn span.active{color:#0053B0; border-color:#0053B0}
.tab-btn span.active:before{width:40px; height:20px; background-image:url('../images/arrow4.png'); background-size: 100% 100%; position: absolute; content:''; bottom:-20px; left:calc(50% - 20px)}
.tab-content{display:none; position: relative}
.tab-content.active{display:block}

.keyword3 .keyword3-nextbtn{margin-top:50px}
.keyword3 .keyword3-nextbtn .nextbtn{max-width:380px}

.keyword3 .keyword3-tab1-img1,
.keyword3 .keyword3-tab2-img1,
.keyword3 .keyword3-tab2-img2,
.keyword3 .keyword3-tab3-img1,
.keyword3 .keyword3-tab3-img2{position: absolute; bottom:33px;}

.keyword3 .keyword3-tab1-img1{width:200px; left:40px}

.keyword3 .keyword3-tab2-img1,
.keyword3 .keyword3-tab3-img1{width:200px; left:20px}

.keyword3 .keyword3-tab2-img2,
.keyword3 .keyword3-tab3-img2{width:160px; left:227px;}

.keyword4{position: relative; margin-bottom:100px;}
.keyword4 h2,
.keyword4 h6{color:#fff}

.keyword4 .keyword4-img1{position: absolute; top:-47px; left:0px; width:240px;}
.keyword4 .keyword4-img2{position: absolute; top:-47px; left:60px; width:122px;}

.keyword4-outer{position: relative; background-color: #fff; border-radius: 30px; box-shadow: 3px 0px 15px rgba(0, 0, 0, .2); padding: 60px 80px; color: #000;}
.keyword4-outer .shorttitle{position: absolute; width: 100%; top: -15px; left: 0px; text-align: center;}
.keyword4-outer .shorttitle span{padding: 5.5px 22.1px; background-color: #38BCFF; color: #fff; font-size: 20px; font-weight: bold; border-radius: 28px; border: 2px #fff solid;}
.keyword4 h3{color: #000; padding: 0px; margin: 0px 0px 40px 0px;}
.keyword4 h4{margin-bottom: 10px;}
.keyword4 .heading3{font-size:28px; font-weight:bold; color:#0053B0; padding:17px 0px; border-top:2px #0053B0 solid; border-bottom: 2px #0053B0 solid}
.keyword4 .keyword4-nextbtn{margin-top:50px}
.keyword4 .keyword4-nextbtn .nextbtn{max-width:380px}
.keyword4 .keyword4-block{position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top:60px;}

.keyword4 .keyword4-block .col{width:100%; position: relative}
.keyword4 .keyword4-block:nth-child(even){flex-direction: row-reverse}

.keyword4 .keyword4-block h6{color:#0053B0;}
.keyword4 .keyword4-block h3.h3extrasmall{margin-bottom:20px;}

.keyword4 .keyword-header .keyword4-bubble1{position: absolute; max-width:200px; right: 18%; top: -85px;}
.keyword4 .keyword-header .keyword4-bubble2{position: absolute; max-width:170px; right:6%; top:80px}

.oil-future{margin-top: 70px; position: relative}
.oil-future oilfutureheader{z-index: 0; background-image: linear-gradient(#08A3F0,#8AD2FF); height:360px; position: absolute; top:0px; width:100%;}
.oil-future .subtext{font-size:20px; font-weight: 900; color:#fff; border-bottom:1px #fff solid; width: fit-content; margin:0px auto 15px}
.oil-future h3.h3small{font-weight: 900; color:#fff; margin-bottom:20px}
.oil-future h6{color:#fff;}
.oil-future .oil-future-content-inner{margin-top:30px;}
.oil-future .oil-future-content{display: flex; flex-wrap: wrap; justify-content: space-between}
.oil-future .oil-future-content .col{width:100%}
.oil-future .oil-future-content .content-block{background-color:#fff; padding:30px; height:100%; border:2px #0053B0 solid; border-radius:30px;}
.oil-future .oil-future-content .content-block h4{color:#000; margin-bottom:20px; height: 60px; display: flex; justify-content: center; align-items: center}
.oil-future .oil-future-nextbtn{margin-top:50px}
.oil-future .oil-future-nextbtn a{display: inline-flex; width:100%; max-width:380px}
.oil-future .oil-future-nextbtn a:first-child{margin-right:50px}




.keyword5{position: relative; margin-bottom:70px;}
.keyword5 h2,
.keyword5 h6{color:#fff}
.keyword5 .keyword4-img1{position: absolute; top:0px; right:0px; width:277px;}
.keyword5 .keyword4-img2{position: absolute; bottom: 75px; right: 80px; width:122px;}
.keyword5-outer{position: relative; background-color: #fff; border-radius: 30px; box-shadow: 3px 0px 15px rgba(0, 0, 0, .2); padding:60px; color: #000;}
.keyword5-outer .shorttitle{position: absolute; width: 100%; top: -15px; left: 0px; text-align: center;}
.keyword5-outer .shorttitle span{padding: 5.5px 22.1px; background-color: #38BCFF; color: #fff; font-size: 20px; font-weight: bold; border-radius: 28px; border: 2px #fff solid;}
.keyword5 h3{line-height:60px; color: #000; padding: 0px; margin: 0px 0px 50px 0px;}
.keyword5 h4{margin-bottom: 10px;}
/*.keyword5 .heading3{font-size:28px; font-weight:bold; color:#0053B0; padding:17px 0px; border-top:2px #0053B0 solid; border-bottom: 2px #0053B0 solid}*/
.keyword5 .keyword5-img1{width:270px; position: absolute; top:-85px; right:0px;}
.keyword5 .keyword5-content{display: flex; flex-wrap: wrap; justify-content: space-between; position: relative;}
.keyword5 .keyword5-content .col{width:100%; position: relative}
.keyword5 .keyword5-content figure{margin-bottom:5px;}
.keyword5 .keyword5-content figure img{height:100%; object-fit: cover}

.keyword5 .keyword5-pic{position: relative}
.keyword5 .keyword5-content .keyword5-bubble1,
.keyword5 .keyword5-content .keyword5-bubble2,
.keyword5 .keyword5-content .keyword5-bubble3{position: absolute; width:200px}
.keyword5 .keyword5-content .keyword5-bubble1{left:-90px; top:calc(50% - 100px)}
.keyword5 .keyword5-content .keyword5-bubble2{right:-100px; top:-90px}
.keyword5 .keyword5-content .keyword5-bubble3{right:-150px; bottom:-30px; width: 230px;}
.keyword5 .keyword5-img4{position: absolute; top: -45px; right: 80px; width: 122px;}
.keyword5 .keyword5-content .tag{font-size: 14px; z-index:1; font-weight: bold; color:#0053B0; border:1px #0053B0 solid; border-radius:30px; position: absolute; background-color: #fff; padding: 5px 9px; left: 10px; top: 10px;}

.society-safety{margin-bottom:100px; position: relative}
.society-safety societysafetyheader{z-index: 0; background-image: linear-gradient(#08A3F0,#8AD2FF); height:320px; position: absolute; top:0px; width:100%;}
.society-safety .subtext{font-size:20px; font-weight: 900; color:#fff; border-bottom:1px #fff solid; width: fit-content; margin:0px auto 10px}
.society-safety h3{font-weight: 900; line-height: 50px; color:#fff; margin-bottom:20px}
.society-safety h6{color:#fff;}
.society-safety .society-safety-content-inner{margin-top:30px;}
.society-safety .society-safety-content{display: flex; flex-wrap: wrap; justify-content: space-between}
.society-safety .society-safety-content .col{width:100%; margin-bottom:40px; }
.society-safety .society-safety-content .content-block{background-color:#fff; padding:30px; height:100%; border-radius:30px; position: relative}
.society-safety .society-safety-content .content-block h5{margin:15px 0px}
.society-safety .society-safety-content .content-block .block-pic{position: relative}
.society-safety .society-safety-content .content-block .tag{font-size: 14px; z-index:1; font-weight: bold; color:#0053B0; border:1px #0053B0 solid; border-radius:30px; position: absolute; background-color: #fff; padding: 5px 9px; left: 10px; top: 10px;}

.footer-round img{display: table}	

.footer-content{background-color:#fff; position: relative}
.footer-content.contents > div{padding-top:50px; padding-bottom: 100px;}
.contents.footer-content h3.normal{position: relative; color:#0053B0; font-weight: 900; margin:0px auto; padding: 0px 70px; width: fit-content}

.footer-content h3.normal:before{border:0px; margin-top:unset; border-radius: unset}

.footer-content h3.normal:before,
.footer-content h3.normal:after{display: block; width:41px; height:81px; position: absolute; content:''; background-size: cover}

.contents.footer-content h3.normal:before{top:-30px; left:0px; background-image:url('../images/quote-top.png')}
.contents.footer-content h3.normal:after{bottom:-38px; right:0px; background-image:url('../images/quote-bottom.png')}

.contents.footer-content h3.h3extrasmall{color:#0053B0; font-weight: bold; margin-top:50px !important; margin-bottom: 50px;}
.footer-content .footer-content-img1,
.footer-content .footer-content-img2{position: absolute; width:200px;}

.footer-content .footer-content-img1{left:0px; top:-250px }
.footer-content .footer-content-img2{right:0px; top:-200px}

.footer-content-bubble-outer{width:260px; margin:50px auto !important; position: relative}
.footer-content-bubble-outer .footer-content-bubble1{width:260px; margin: 0px auto !important;}
.footer-content-bubble-outer .footer-content-bubble2{width:100px; position: absolute; right:-85px; bottom:0px;}
.footer-content .footer-logo{width:260px; margin:0px auto}
.footer-content .go2top{width:93px; position: absolute; bottom:-45px; right:15px; padding:0px; z-index:1}

.footer-content-bubble1{height: 260px; width: 260px; position: relative;}
.footer-content-bubble1.animated{  
  overflow: hidden;
  margin: 20px;
  border-radius: 50%;
  transform: rotate3d(0, 0, 1, 0.001deg); /* clear artifacts*/
}
.footer-content-bubble1.animated:before,
.footer-content-bubble1.animated:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 260px;
  clip: rect(0px, 130px, 260px, 0px);
  background-color: white;
  transform: rotate3d(0, 0, 1, 0deg);
  animation: 1s spin2 linear 2s forwards;
  z-index: 2;
}
.footer-content-bubble1.animated:after {
  content: " ";
  background: #faa91a;
  z-index: 1;
  animation: 1s spin linear 1s forwards;
}

@keyframes spin {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 180deg);
  }
}
@keyframes spin2 {
  from {
    background: #faa91a;
    transform: rotate3d(0, 0, 1, 180deg);
  }
  to {
    background: #faa91a;
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
.footer-content-bubble1.animated figure img {
  display: block;
  position: relative;
  z-index: 4;
  border: 8px solid white;
  width: 245px;
  height: 245px;
  border-radius: 50%;
  margin: 7.5px 0 0 7.5px;
}

.counter{position: absolute; color: #fff;
    z-index: 999;
    font-size: 56px;
    font-weight: bold;
    bottom: 56px;
    left: 70px;
    font-family: 'Roboto'; width: 97px;
    height: 67px;
    text-align: center;}


.stickybuttons{position: fixed; top: calc(50% - 295px/2); z-index:2; display: none;}
.stickybuttons.active{display: block}
.stickybuttons li{margin-bottom:10px}
.stickybuttons li a{transition: ease all .5s; position: relative; left: -65px; width: fit-content; background-color:#0053B0; border-radius:0px 30px 30px 0px; display: block; color:#fff; padding: 10px; font-weight: bold; font-size:20px}
.stickybuttons li a span{font-size:14px; visibility: hidden}

/*.stickybuttons li a:hover,*/
.stickybuttons li a.active{background-color:#38BCFF; left:0px;}
/*.stickybuttons li a:hover span,*/
.stickybuttons li a.active span{visibility: visible}





.w3-modal{z-index:9999; display:none; padding:50px 20px 50px; position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.5); transition: ease all 1s;}
.w3-modal.modalopen{display:block; animation: fadeIn 0.5s forwards}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.w3-modal h3{color:#0053B0; padding-bottom: 20px; border-bottom: 2px #0053B0 solid; margin-bottom: 20px;}
.w3-modal .text1{margin-bottom:20px}
.w3-modal .text2{margin-top:10px}
.w3-modal .small{font-size:12px; line-height: 18px;}
.w3-modal-content{max-width:1040px; width: 100%; margin:auto; background-color:#fff; border-radius:30px; position:relative; padding:0; outline:0;}
.w3-modal-container-outer{display: flex; align-items: center;}
.w3-modal-container{padding:20px 40px 40px;}
.w3-button{cursor: pointer; font-weight: bold; font-size: 40px; line-height: 40px; color: #fff;}
.w3-display-topright{position:absolute;right:10px;top:10px}
.w3-modal .modal-2-content .col{width:100%;}
.w3-modal .modal-2-content h5{margin:8px 0px}

@media(min-width:768px)
{
	
	.w3-modal .modal-2-content{display: flex; flex-wrap: wrap; justify-content: space-between}
	.w3-modal .modal-2-content .col{width: calc(33.33% - 15px)}
}

@media(max-width:768px)
{
	
	.w3-modal-container{padding:20px;}
	.w3-modal-content{border-radius:15px}
	.w3-modal{padding-top:50px}
	.w3-modal h3{padding-bottom: 10px; margin-bottom: 10px;}
	.w3-modal .text1{margin-bottom:10px}
	.w3-modal .modal-2-content h5{margin:5px 0px}
	.w3-modal .modal-2-content .col{margin-bottom:30px}
	
}

@media(min-width:768px)
{
	.d-desktop{display:block}
	.d-mobile{display:none}	
	.management-philosophy{margin-top:50px;}
	
	
	.keyword1-second-carousal-inner .col:first-child{width:37%; padding-left:11.5%; padding-right:50px}
	.keyword1-second-carousal-inner .col:last-child{width:63%}
	.keyword1-second-carousal-outer .keyword1-second-carousal .slick-list{padding-right:7%; }
	.keyword1-second-carousal-outer .keyword1-second-carousal .slick-prev{left:-215px;}
	.keyword1-second-carousal-outer .keyword1-second-carousal .slick-next{left:-120px;}
	.keyword1-second-carousal-outer .btn-wrap{position: absolute; bottom: 0px; right: 0px;}	
	
	.keyword1-carousal .slide-content .col{width:calc(50% - 15px); }
	.keyword1-carousal .slide2 .slide-content .col:first-child{width:calc(60% - 35px);}
	.keyword1-carousal .slide2 .slide-content .col:last-child{width:calc(40% - 15px);}
	.keyword1-carousal .slide3 .slide-content .col:first-child{width:calc(75% - 15px);}
	.keyword1-carousal .slide3 .slide-content .col:last-child{width:calc(25% - 15px);}
	
	.keyword1-carousal .slide2 .slide-content .col:first-child .col1,
	.keyword1-carousal .slide2 .slide-content .col:first-child .col2,
	.keyword1-carousal .slide3 .slide-content .col:first-child .col1,
	.keyword1-carousal .slide3 .slide-content .col:first-child .col2,
	.keyword4 .keyword4-block .col{width:calc(50% - 15px)}
	
	.keyword2 .keyword2-outer-block-first .col{width:calc(50% - 10px)}
	.oil-future .oil-future-content .col{width:calc(33.33% - 20px);}
	
	.keyword5 .keyword5-content .col{width:calc(50% - 12px);}
	
	.society-safety .society-safety-content .col{width:calc(33.33% - 20px); }
	
	.keyword5-outer .shorttitle span,
	.keyword4-outer .shorttitle span,
	.keyword3-outer .shorttitle span,
	.keyword1-carousal-outer .shorttitle span,
	.keyword2-outer .shorttitle span{font-size:18px}
}

@media(min-width:768px) and (max-width:1200px)
{
	.contents h2,h2{font-size: 48px !important; line-height: normal; font-weight: 900; margin-bottom: 30px;}/*60px*/
	.contents h2.h2big,h2.h2big{font-size:50px !important;} /*64px*/
	.contents h2.h2small,h2.h2small{font-size: 38px !important;}/*56px*/
	.contents h3,h3{font-size:32px !important; line-height: 50px; font-weight: bold;}/*40px*/
	.contents h3.h3small,h3.h3small{font-size:28px !important; line-height: 40px;}/*36px*/
	.contents h3.h3extrasmall,h3.h3extrasmall{font-size:24px !important; line-height: 44px;}/*32px*/
	.contents h4,h4{font-size:20px !important; line-height: normal;}
	.contents h5,h5{font-size:18px !important; line-height:normal; }
	.contents h6,h6{font-size:16px !important; line-height: normal;}
	
	.management-philosophy .h2small{line-height:56px;}
	.management-philosophy .h2big{line-height:73px;}
	
	.keyword4 .heading3{font-size:20px;}
	
	.management-philosophy h2 ani{line-height:50px}
	.gradeEffect1{top:-4px}
	
	.management-philosophy small{font-size: 24px;}
	
	.oilsheader .oilsheadercontent-1{max-width: 550px;}
	
	.oilsheadercontentimg-1{max-width:170px}
	.oilsheadercontentimg-2{max-width:110px;}
	.oilsheadercontentimg-3{max-width:206px}
	.oilsheadercontentimg-4{max-width:157px;}
	
	.management-philosophy .mp-img1{max-width: 224px;}
	.management-philosophy .mp-img2{max-width:100px}
	.keyword2-img1{max-width:250px; left:30px}

	.keyword1-img{max-width:70px; top: -30px;}
	.keyword2 .keyword2-img2{max-width:70px}
	.keyword2-bubble1{max-width:150px}
	.keyword2 .keyword2-graphic{max-width:700px;}
	.keyword2 .keyword2-bubble2{width:193px; top:50px}
	.keyword2 .keyword2-bubble3{width:183px;}
	.keyword2 .keyword2-bubble4{width:215px;}
	.keyword2 .keyword2-bubble5{width:172px; bottom: 40px}
	.keyword3 .keyword3-img1{width:177px; right:30px}
	.keyword4 .keyword4-img1{width:140px; left: 30px;}
	.keyword4 .keyword4-img2{width:70px; top: -20px}
	.keyword4 .keyword4-block .keyword4-bubble{width:132px; top: -50px; left: -60px;}
	.keyword4 .keyword4-block:nth-child(even) .keyword4-bubble{right:-60px}
	.keyword5 .keyword5-img1{width:170px;right:30px}
	.keyword5 .keyword5-img4{width: 70px; top:-20px;}
	.keyword5 .keyword5-content .keyword5-bubble1{width:100px; left: -60px; top: calc(50% - 50px);}
	.keyword5 .keyword5-content .keyword5-bubble2{width:100px; top: -50px; right: -50px;}
	.keyword5 .keyword5-content .keyword5-bubble3{width:100px; right: -70px;  bottom: -20px;}
	.footer-content .footer-content-img1{width:100px; top: -110px; left:30px}
	.footer-content .footer-content-img2{width:100px; top: -90px; right:30px;}
	
	.keyword1-carousal-outer .slick-back span,
	.keyword1-carousal-outer .slick-next span{text-align: center}
	.keyword1-carousal-outer .btn-wrap{margin-top: 100px; margin-bottom:30px; margin-left: auto; margin-right: auto;}
	.keyword1-carousal-outer .slick-back{left:20px; bottom:-10px}
	.keyword1-carousal-outer .slick-next{right:20px; bottom: -10px}
	
	.keyword1-second-carousal-inner .col:first-child{width:45%}
	.keyword1-second-carousal-inner .col:last-child{width:55%;}
	
	.keyword1-second-carousal-outer .keyword1-bubble1{width:140px}
	.keyword1-second-carousal-outer .slick-slide{margin:0px 7px;}
	.keyword1-second-carousal-outer .keyword1-second-carousal-header{height:380px}
	
	.keyword1-second-carousal-outer,
	.keyword2,
	.keyword3,
	.keyword4,
	.keyword5{margin-bottom:50px}
	
	.keyword5-outer,
	.keyword4-outer,
	.keyword3-outer{padding:35px 40px;}
	.keyword1-carousal-outer,
	.keyword2-outer{padding:35px 40px;}
	
	.oil-future .oil-future-nextbtn{max-width:380px; margin-left:auto; margin-right: auto}
	.oil-future .oil-future-nextbtn a{}
	.oil-future .oil-future-nextbtn a:first-child{margin-right:0px; margin-bottom:20px}
	
}



@media(max-width:767px)
{
	.d-desktop{display:none}
	.d-mobile{display:block}
	.contents h2,h2{font-size: 40px !important; margin-bottom: 30px;}
	.contents h2.h2small, h2.h2small{font-size:28px !important; line-height:50px}
	.contents h2.h2big, h2.h2big{font-size:32px !important; line-height:50px}
	.contents h3{font-size:22px !important; line-height:33px; }
	.contents h3.h3small, h3.h3small{font-size:30px !important; line-height:45px;}
	.contents h3.h3extrasmall, h3.h3extrasmall{font-size:20px !important; line-height: normal;}
	.contents h4, h4{font-size:20px !important;}
	.contents h5, h5{font-size:16px}
	.contents h6, h6{font-size:16px; line-height:32px;}
	.keyword2 .keyword2-outer-block-second h6{font-size:16px;}
	
	.management-philosophy h2 ani{line-height:38px; margin-bottom:10px}
	.gradeEffect1{top:-2px}
	
	.oilsheader{padding-bottom:65px;}
	.oilsheader .oilsheadercontent-1{max-width:317px; margin: 20px auto;}
	.oilsheadercontentimg-1{max-width:134px; bottom: 19%;}
	.oilsheadercontentimg-2{max-width:79px; bottom: 40px; left: 20%;}
	.oilsheadercontentimg-3{max-width:126px; right:0px; bottom: 26%}
	.oilsheadercontentimg-4{max-width:120px; bottom: 40px;}
	.oilsheader .oilsheaderbg img{height:705px}
	.line-scroll{height: 180px; bottom:0px;}
	.line-scroll:before{height:160px}
	
	.oil-future{margin-top: 50px;}
	
	@keyframes drop
	{
		0%{
			bottom: 0px;
			height: 0px;
		}
		70%{
			bottom: 160px;
			height: 0px;
		}
		85%{
			bottom: 0px;
			height: 160px;
		}
		100%{
			bottom: 0px;
			height: 0px;
		}
	}
	
	keywordheader img{object-fit: unset}
	.nextbtn{font-size:14px;}
	
	.management-philosophy .h2small{margin-top:30px !important}
	.management-philosophy small{font-size: 20px;}
	.management-philosophy.contents > div {padding-bottom: 200px;}
	.management-philosophy .mp-img2{max-width:137px; left: 50px; right: unset;}
	.management-philosophy .mp-img1{max-width:131px; right: 50px; bottom: 50px;}
	
	.keyword4 .keyword-header .keyword4-bubble1{right:0px; max-width:180px}
	.keyword4 .keyword-header .keyword4-bubble2{right:0px; max-width: 180px; top: 125px; padding:0px 10px;}
	
	.keyword1{margin-bottom: 20px;}
	.keyword5{margin-bottom:30px;}

	.keyword5-outer,
	.keyword4-outer,
	.keyword3-outer{padding:35px 20px;}
	.keyword1-carousal-outer,
	.keyword2-outer{padding:35px 10px;}
	
	.keyword1-img{max-width:70px; left: -12px; top: -64px;}
	
	.keyword5-outer .shorttitle span,
	.keyword4-outer .shorttitle span,
	.keyword3-outer .shorttitle span,
	.keyword1-carousal-outer .shorttitle span,
	.keyword2-outer .shorttitle span{font-size:16px}
	
	.keyword1-carousal .h3extrasmall{padding-bottom:15px; margin-bottom:20px}
	.keyword1-carousal{padding:15px 5px}
	.keyword1-carousal .slick-next{}
	
	.keyword1-second-carousal-outer{padding:30px 0px; margin-top: 50px;}
	.keyword1-second-carousal-inner{padding-left:20px; padding-right:20px;}
	.keyword1-second-carousal-inner .block-content{text-align: center; margin: 0px auto;}
	.keyword1-second-carousal-outer h5{margin-left:auto; margin-right:auto}
	.keyword1-second-carousal-outer .keyword1-second-carousal .slide-item-block{padding:20px}
	.keyword1-second-carousal-outer .keyword1-second-carousal h3.h3extrasmall{font-size:24px; line-height:36px;}
	.keyword1-second-carousal-outer .keyword1-bubble1{width:180px; right: 0px; top: -80px;}
	.keyword1-second-carousal-outer .btn-wrap{margin: 85px auto -18px; position: relative}
	.keyword1-second-carousal-outer .nextbtnwrap{padding:0px 40px;}
	
	.keyword1-carousal.slick-slider .slick-dots{margin-bottom:-35px;}
	.keyword1-carousal.slick-slider .slick-dots li button{font-size:14px; padding-left:17px; padding-right:17px;}
	.keyword1-carousal-outer .btn-wrap{margin-top: 100px;}
	.keyword1-carousal-outer .slick-arrow{font-size:20px}
	
	.keyword1-carousal-outer .slick-back{bottom: -15px; left: 20px; border-radius: 50px; padding: 8.5px 20px 8.5px 20px}
	.keyword1-carousal-outer .slick-next{bottom: -15px; right: 20px; border-radius: 50px; padding: 8.5px 20px 8.5px 20px}
	.keyword1-carousal-outer .slick-back span,
	.keyword1-carousal-outer .slick-next span{text-align: center; font-size:12px}
	
	
	
	.keyword1-carousal .slide2 .slide-content .col:first-child,
	.keyword1-carousal .slide2 .slide-content .col:first-child .col1,
	.keyword1-carousal .slide3 .slide-content .col:first-child .col1,
	.keyword1-carousal .slide3 .slide-content .col:first-child .col2,
	.keyword2 .keyword2-outer-block-first .col:first-child{margin-bottom:30px}
	
	
	.keyword2,
	.keyword4,
	.keyword3{margin-bottom:70px}
	
	.keyword2-img1{max-width:160px; left:50px}
	.keyword2-img3{max-width:45px; right:50px; position: absolute; top: -10px;}
	.keyword2-bubble1{max-width:150px; top: 0px; right: 20px;}
	
	.keyword2 .keyword2-outer-block-first{padding:20px; margin-bottom: 30px;}
	
	
	.keyword2 .keyword2-graphic{max-width:294px; padding: 132px 0px 50px; margin-top: 30px !important;}
	.keyword2 .keyword2-bubble2{width:124px; top: 28px; left: -12px;}
	.keyword2 .keyword2-bubble3{width:145px}
	.keyword2 .keyword2-bubble4{width:125px; left: -11px; bottom: -25px;}
	.keyword2 .keyword2-bubble5{width:113px; right: 0px; bottom: -30px;}
	.keyword2 .keyword2-circle{max-width:240px;}
	.keyword2 .keyword2-img2{width:95px; position: relative; position: relative; text-align: center; margin: 0px auto; right: unset; bottom: unset;}
	
	
	.keyword2 .keyword2-nextbtn{padding: 0px 30px 0px 10px;}
	.keyword3 .keyword3-nextbtn{padding: 0px 20px 0px 0px;}
	
	.tab-btn span{font-size:12px;}
	.tab-btn span.active:before{width:12px; height:8px; bottom: -10px; left: calc(50% - 6px)}
	
	.keyword3 .keyword3-tab1-img1, 
	.keyword3 .keyword3-tab2-img1, 
	.keyword3 .keyword3-tab2-img2, 
	.keyword3 .keyword3-tab3-img1, 
	.keyword3 .keyword3-tab3-img2{position: relative}
	.keyword3 .keyword3-tab1-img1{width:150px; bottom: unset; left: 5%; top: 10px;}
	
	.keyword1 h3,	
	.keyword2 h3,
	.keyword3 h3,
	.keyword4 h3,
	.keyword5 h3{margin-bottom:20px}
	
	.keyword3 .keyword3-img2{width: 105px; bottom: 143px; right:5%}
	
	.tab-btn{margin-bottom:20px;}
	
	.keyword3 .keyword3-img1{top: -80px; right: unset; left:52px; width: 180px;}
	.keyword3 .keyword3-img3{position: absolute; top: -80px; right: 0px; width: 130px;}
	
	.keyword3 .keyword3-tab2-img1{width:150px; top:10px}
	.keyword3 .keyword3-tab2-img2{width:100px; top: -117px; left: 50%;}
	
	.keyword3 .keyword3-tab3-img1{width:150px; top:10px}
	.keyword3 .keyword3-tab3-img2{width:100px; top: -117px; left: 50%;}
	
	
	.keyword4 .keyword4-img1{width:122px; left:20px; top: -65px}
	
	.keyword4 .heading3{font-size:18px;}
	.keyword4 .keyword4-block .col{margin-bottom:5px}
	.keyword4 .keyword4-img2{max-width:70px; left: -12px; top: 32px;}
	
	.keyword4 .keyword4-block{margin-top:20px}
	.keyword4 .keyword4-block .keyword4-bubble{width: 173px; left: -30px; top: unset; bottom: 0px;}
	.keyword4 .keyword4-block:nth-child(even) .keyword4-bubble{width:150px; right:-30px; bottom: 0px;}
	.keyword4 .keyword4-block h3.h3extrasmall{margin-bottom:10px}
	.keyword4 .heading3{padding:9px 0px 12px}
	.keyword4 .keyword4-nextbtn{margin-top: 20px; padding-right: 20px;}
	
	.oil-future .oil-future-content .col{margin-bottom:20px; }
	.oil-future .oil-future-content .content-block{padding:20px; box-shadow: 3px 0px 15px rgba(0, 0, 0, .2);}
	.oil-future .oil-future-content .content-block h4{height: unset; margin-bottom: 10px; line-height: 30px;}
	
	.oil-future .oil-future-nextbtn{margin-top:10px; padding: 0px 40px 0px 20px;}
	.oil-future .oil-future-nextbtn a:first-child{margin-bottom:22px; margin-right: 0px;}
	
	.keyword5 .keyword5-img1{width:104px; top: -64px; right: 8%;}
	.keyword5 .keyword5-img2{position: absolute; left: 8%; top: -70px; width:119px}
	
	.keyword5 .keyword5-img4{display: none;}
	
	.keyword5 .keyword5-content .keyword5-bubble1{width:150px; left: unset; right: -41px; top: -57px;}
	.keyword5 .keyword5-content .keyword5-bubble2{width:150px; left: 6%;z-index: 1; top: -130px;}
	.keyword5 .keyword5-content .keyword5-bubble3{width:150px; right:-42px; bottom:-25%;}
	
	.society-safety .society-safety-content .col{margin-bottom:20px}
	.society-safety .society-safety-content .content-block h5{margin:10px 0px; font-size:20px !important;}
	.society-safety .society-safety-content .content-block{padding:20px}
	.society-safety societysafetyheader{height:400px;}
	
	.footer-content .footer-content-img1{width:88px; top: -72px; left: 15%;}
	.footer-content .footer-content-img2{width:134px; top: -107px; right: 10%;}
	
	.footer-content h3.normal:before, 
	.footer-content h3.normal:after{width:31px; height:60px}
	
	.contents.footer-content h3.normal:before{top:-50px}
	.contents.footer-content h3.normal:after{bottom:-50px}
	.footer-content.contents > div{padding-top:100px; padding-bottom: 170px;}
	.society-safety{margin-bottom:50px}
	.contents.footer-content h3.normal{margin: 0px 10px; padding: 0px 30px; line-height: 40px; font-size: 24px !important;}
	.contents.footer-content h3.h3extrasmall{margin-top: 90px !important;}
	
	.footer-content .footer-logo{width:195px}
	.footer-content .go2top{width:139px; bottom: 30px; right: calc(50% - 70px);}
	.footer-content-bubble-outer{width:195px}
	
	.footer-content-bubble-outer .footer-content-bubble1{width:190px; height:190px}	
	
	.footer-content-bubble1.animated:before,
	.footer-content-bubble1.animated:after {
	  width: 190px;
	  height: 190px;
	  clip: rect(0px, 95px, 190px, 0px);	 
	}
	
	.footer-content-bubble1.animated figure img {  
	  border: 5px solid white;
	  width: 180px;
	  height: 180px; 
	  margin: 5px 0 0 5px;
	}

	.footer-content-bubble-outer .footer-content-bubble2{width:77px; right: -45px;}
	
	.oilsheader .oilsheaderbgtext svg 
	{
		mask-image: url('../images/oilsheaderbgtext-m.png');   
		-webkit-mask-image: url('../images/oilsheaderbgtext-m.png');	
	}
	
	.bubbleRing{left: -25%; top:0px; width: 150%; height: 40%;}
	
	.counter{   
    font-size: 45px;
    bottom: 40px;
    left: 40px;
    width: 77px;
    height: 54px;}
	
	.management-philosophy .h2small{line-height: 41px;}
	.management-philosophy .h2big{line-height:46px}
	
	.stickybuttons{top: unset; bottom: 0px; justify-content: center; width: 100%; background-color:#0053B0}
	.stickybuttons li{margin-bottom:0px; margin-right:0px; width:fit-content; border-right: 1px #fff solid; }
	.stickybuttons li:last-child{border:0px;}
	.stickybuttons li a{border-radius:0px; padding:5px 10px; text-align: center; width:100%; left:0px; white-space: nowrap;}
	.stickybuttons li a span{display: none;}
	.stickybuttons.active{display: flex}
	.stickybuttons li.active,
	.stickybuttons li a.active{width:100%; }
	.stickybuttons li a.active span{display: inline-block;}
}