@charset "UTF-8";

#main .header {border-bottom: 1px solid rgba(255, 255, 255, 0.23); background: rgba(0, 0, 0, 0)}
#main .header .logo {background-image: url(../img/logo_w.png)}
#main .header .logo:hover {background-image: url(../img/logo.png)}
#main .header .nav a {color:#FFF}
#main .header .nav a::before {background: #FFF;}
#main .header .affilink {font-size: 16px; line-height: 92px; color: rgba(255, 255, 255, 0.9); right: 0; border-left: 1px solid rgba(255, 255, 255, 0.23)}
#main .header .affis {background-color: rgba(0, 0, 0, 0.6)}
#main .header .affis a {color: #FFF}

#main .header .openAss .icon {background: url(../img/icon/ic_add_light.svg) 50% 42% no-repeat; background-size: 20px;}
#main .opensidenav {background: url(../img/icon/ic_menu_light.svg) 50% 50% no-repeat; background-size: 30px}


#main .subvisual {display: none}
#main #top_btn {display: none}
#main .title {font-size: 60px; font-weight: bold; line-height: 3.5; text-align: center;}

.section {background-size: cover;}
.section{text-align:center; overflow: hidden;}

body.fp-viewing-Business .header, body.fp-viewing-NewsPress .header, body.fp-viewing-Performance .header {background: rgba(0, 0, 0, 0.57) !important}
body.fp-viewing-NewsPress #fp-nav.fp-right li a::before, body.fp-viewing-Performance #fp-nav.fp-right li a::before {border: 1px solid #000; opacity: 0;}
body.fp-viewing-NewsPress #fp-nav.fp-right .active::before , body.fp-viewing-Performance #fp-nav.fp-right .active::before {border: 1px solid #000; opacity: 0.6;}
body.fp-viewing-NewsPress #fp-nav ul li a span, body.fp-viewing-Business .fp-slidesNav ul li a span,
body.fp-viewing-Performance #fp-nav ul li a span {background: #000 !important; opacity: 0.6;}

/* sect0 : Company */
body.fp-viewing-Company .content {left: 0%; opacity: 1}
.sect0.mobile {background: url(../img/main_1_1.png) 50% 50%; color: #FFF; background-size: cover; transition: all 7s ease; background-repeat: no-repeat;}
.sect0 .content {padding: 0 0 0 90px; transition: all 1s ease; left: -50%; position:relative; opacity: 0; transition-delay: 0.6s; text-align: left; color: #FFF}
.sect0 .slogan {font-weight: 700; margin-top: 90px}
.sect0 .button {display: block; width: 180px; height: 40px; background: url(../img/btn_viewmore.png) 50% 50% no-repeat; background-size: 100%; text-indent: -9999px; margin-top: 80px}
.sect0.mobile  .content {padding: 0 0 0 30px;}
.sect0.mobile .slogan {font-weight: 700; margin-top: 90px}
#section0 {overflow: hidden; height: 100%}
#section0 .content {position: absolute; z-index: 4; width: 100%; left: 0; top: 23%;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);}
video::-webkit-media-controls {display:none !important}

#myVideo{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit: cover; /*cover video background */
   		z-index:3;
}

/* sect1 : Business */
.mainbiz {width: 100%; height: 100%;}
.tab {float: left; background-color: #29CCBA; width: 20%; height: 100%; padding-top: 8%; transition: all 600ms ease}
.tab button {display: block; background-color: #29CCBA; padding:0; width: 100%; height: 22%; border: none; outline: none !important; text-align: center; cursor: pointer; transition: 0.3s}
.tab button img {opacity: 0.5; transition: 0.3; margin: 0 auto;}
.tab button img.mb_only {width: 75%}
.tab button:hover img, .tab button.active img {opacity: 1}
.tab button:hover {}
.tab button.active {}
.tabcontent {float: left; padding: 0; width: 80%; height: 100%; text-align: left}
.tabcontent img {}
#defaultOpen {}
.sect1 .cntbox {width: 49%; height: 100%; display: table; background: rgba(255,255,255,1); transition: 0.3s}
.sect1 .cntbox > div {display: table-cell; vertical-align: middle; padding: 60px}
.sect1 .comm {height: 200px; font-size: 1.2vw; color: #787878; margin-top: 5%}
.sect1 .comm p {font-size: 31px}
.sect1 .title {text-align: left !important; line-height: 1.5 !important; color: #13C6B2;}
.sect1 .subtitle {font-size: 19px; font-weight: bold; margin-bottom: 40px; color: #13C6B2; text-indent: 11px; line-height: 23px; position: relative;}
.sect1 .subtitle::before {content: ""; width: 3px; height: 15px; display: block; position: absolute; background: #13C6B2; top: 4px; left: 3px}
.sect1 .viewmore {width: 180px; display: block; margin-top: 50px}
.sect1 .content {width: 90%; margin: 0 auto}
.sect1 .desc {font-size: 1.5vw; line-height: 1.5}
#biz01.tabcontent {background: url(../img/biz_01_cnt_bg.jpg) 50% 0%; background-size: cover;}
#biz02.tabcontent {background: url(../img/biz_02_cnt_bg.jpg) 50% 50%; background-size: cover;}
#biz03.tabcontent {background: url(../img/biz_03_cnt_bg.jpg) 50% 100%; background-size: cover;}
#biz04.tabcontent {background: url(../img/sh_0205.png) 50% 100%; background-size: cover;}

/* sect2 : Performance */
body.fp-viewing-Performance .row {margin-top: 0}
body.fp-viewing-Performance .counter {opacity: 1}
.sect2 .row {transition: all 600ms ease; position: relative; margin-top: -100%}
.sect2 .counter {font-size: 100px; font-weight: 700; color: #315990; opacity: 0}
.sect2 .counter_lab {font-size: 23px; color: #9896AA; line-height: 30px; margin-top: -30px}

/* sect3 : Stock & Investment */
body.fp-viewing-StockInvestment .container {margin-top: 0; opacity: 1}
body.fp-viewing-StockInvestment .row {margin-left: 0}
.sect3 .container {text-align: left; transition: all 600ms ease; position: relative; margin-top: -100%; opacity: 0}
.sect3 {background: url(../img/sh_0301.png) 50% 50%}
.sect3 .row {margin-left: -130%; transition: all 600ms ease; position: relative}
.sect3 .title {color: #FFF}
.sect3 .subtitle {font-size: 26px; width: 200px; float: left;}
.sect3 .txt {font-size: 16px; width: 100%; float: left;}
.sect3 a {display: inline-block; color: #000}
.sect3 .btn {width: 70px; position: absolute; top: 30px; right: 25px}
.sect3 .cbk1, .sect3 .cbk2 {height: 360px;}
.sect3 .cbk1 a {width: 100%; height: 100%; background: url(../img/main_stock_01.png); background-size: cover}
.sect3 .cbk1 a, .sect3 .cbk2 {padding: 50px }
.sect3 .cbk2 {background: rgba(255,255,255,1);}
.sect3 .cbk2 .btn {display: none; }
.sect3 .cbk2 iframe {width: 100%; height: 300px; border: none; margin: -50px 0 0 0; padding: 0}
.sect3 .cbk3 {background: rgba(255,255,255,1); margin-bottom: 30px}
.sect3 .cbk3, .sect3 .cbk4 {padding: 40px 0 0 40px; height: 165px}
.sect3 .cbk4 {background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.65); color: #FFF}
.sect3 .cbkr {}

/* sect4 : NEWS & PRESS */
.sect4 .date {line-height: 1; padding-right: 30px; font-size: 14px; font-weight: bold; color: #ccc;}
.sect4 .date p {font-size: 65px; line-height: 40px}
.sect4 .subject {text-align: left; padding-right: 30px}
.sect4 .subject p {font-weight: bold; font-size: 24px}
.sect4 .photo {width: 200px !important}
.sect4 tr:hover .date {color: #666}
.sect4 {position: relative; overflow: hidden;}
.sect4 .container {padding: -30px 0 30px 0}
.sect4 .footer {position: absolute; bottom: 0; width: 100%; padding: 15px; height: 65px; text-align: center;}

/* xs : 320 ~ 767 */
@media (min-width: 320px) and (max-width: 767px) {
    #main .title {font-size: 27px; margin-top: 20%}
    .sect0 .slogan {font-size: 29px; line-height: 1}
    .sect0 .slogan span {display: block;}

    .tab {width: 30%; padding-top: 18%;}
    .tab button img.mb_only {width: 60%}
    .tabcontent {width: 70%;}
    .sect1 .cntbox {width: 100%;}
    .sect1 .cntbox > div {padding: 8%}
    .sect1 .comm {height: 150px; margin-top: 5%; font-size: 2.5vw}
    .sect1 .comm p {font-size: 27px}
    .sect1 .desc {font-size: 3vw;}
    .sect1.mobile {}
    .sect1.mobile .tab {width: 35%; padding-top: 25%;}
    .sect1.mobile .tab button img.mb_only {width: 75%}
    .sect1.mobile .tabcontent {width: 65%;}
    .sect1.mobile .cntbox {width: 100%;}
    .sect1.mobile .cntbox > div {padding: 11%}
    .sect1.mobile .comm {display: none}
    .sect1.mobile .desc {font-size: 4.5vw;}
    .sect1.mobile .desc span {display: block;}
    .sect1.mobile .viewmore {width: 120px; margin-top: 30px}

    .sect2 .counter {font-size: 55px}
    .sect2 .counter_lab {font-size: 17px; line-height: 30px; margin-top: -30px}


    .sect3 .container {width: 80%; margin: 0 auto}
    .sect3 .row > div {margin: 0; padding: 0}
    .sect3 .subtitle {font-size: 23px; line-height: 1}
    .sect3 .btn {width: 61px; top: 15px; right: 5px}
    .sect3 .cbk1, .sect3 .cbk2 {margin-bottom: 20px}
    .sect3 .cbk1 a, .sect3 .cbk2 {padding: 30px 0 0 20px;}
    .sect3 .cbk1, .sect3 .cbk2 {height: 80px;}
    .sect3 .cbk2 iframe {display: none}
    .sect3 .cbk2 .btn {display: block; top: 23px; right: 5px}
    .sect3 .cbk3, .sect3 .cbk4 {padding: 20px 0 0 20px !important; height: 100px; margin-bottom: 20px !important}


    .sect4 .date, .sect4 .photo {display: none}
    .sect4 .subject p {font-weight: bold; font-size: 20px}
    .sect4.mobile .title {margin-top: 18% !important; line-height: 2.5 !important}
    .sect4.mobile table {}
    .sect4.mobile td {border-bottom: 1px solid #eee; padding: 20px 30px}
    .sect4.mobile table .subject span {display: block; height: 50px; overflow: hidden;}
}

/* sm~md : 769 ~ 992 ~ 1199 */
@media (min-width: 769px) and (max-width: 1199px) {
    #main .title {font-size: 40px}

    .sect0 .slogan {font-size: 43px; line-height: 1}

    .tab {width: 22%;}
    .tabcontent {width: 78%;}
    .sect1 .cntbox {width: 62%}
    .sect1 .cntbox > div {padding: 10%}
    .sect1 .comm {height: 150px; margin-top: 5%; font-size: 1.6vw}
    .sect1 .comm p {font-size: 27px}
    .sect1 .desc {font-size: 1.85vw}

    .sect2 .counter {font-size: 80px}
    .sect2 .counter_lab {font-size: 21px; line-height: 30px; margin-top: -30px}
    .sect4 .date  {display: none}
    .sect4 .subject p {font-weight: bold; font-size: 24px}
    .sect4 .photo {width: 150px}
    .sect4.mobile table {border-top: 1px solid #eee;}
    .sect4.mobile td {border-bottom: 1px solid #eee; padding: 15px 0}

}

/* lg : 1200 ~ */
@media (min-width: 1200px) {
    .sect0 .slogan {font-size: 56px}
}

/*
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
*/















































.test {}