@charset "UTF-8";


.element {width: 513px; position: absolute; top: 50%; left: 50%; margin-left: -256.5px; margin-top: -200px; padding: 43px; background: rgba(64, 75, 134, .95); z-index: 999}
.element .btn {display: inline-block; background: rgba(255, 233, 0, 1); width: 100%; text-align: center; line-height: 60px; height: 60px; margin-top: 33px}
.element .closebtn {text-indent: -9999px; width: 50px; height: 50px; position: absolute; top: 30px; right: 30px; background: url(../img/sub/ico_close.png) 50% 50% no-repeat; background-size: 19px; cursor: pointer;}

/* gnb */
.header {width: 100%; height: 92px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); position:fixed; z-index: 100; background: #FFF; text-align: left}
.header a {display: block}
.header h1 {width: 250px; height: 92px; text-indent: -9999px; position: absolute; top: 0; left: 5%}
.header .logo {height: 100%; background-repeat: no-repeat; background-position: 20% 50%; background-size: 180px 41px}
.header .logo {background-image: url(../img/logo_bk.png)}
.header .logo:hover {background-image: url(../img/logo.png)}
.header .nav, .header .nav li {display: inline-block; vertical-align: top}
.header .nav {width: 100%}
.header .nav ul {margin-left: 28%}
.header .nav li {margin: 0 1%; font-size: 17px; position: relative;}
.header .nav a {height: 94px; line-height: 94px; width: 100px; color:#000; position: relative; text-align: center;}
.header .nav a::before {content: ""; width: 100px; height: 2px; background: #000; opacity: 0; position: absolute; bottom: 30px; left: 0; }
.header .nav a:hover::before {opacity: 0.8; bottom: 2px; left: 0}
.header .affilink, .header .openAss, .header .closeAss {width: 300px; position: absolute; top: 0}
.header .affilink {font-size: 16px; height: 92px; line-height: 92px; color: rgba(0, 0, 0, 0.9); right: 0; border-left: 1px solid rgba(0, 0, 0, 0.12)}
.header .affilink, .header .affis a {text-indent: 55px}
.header .openAss, .header .closeAss {cursor: pointer; display: block; text-align: left; line-height: 92px; font-size: 15px; text-indent: 55px}
.header .openAss {right: 0}
.header .closeAss {right: -250px}
.header .openAss .icon, .header .closeAss .icon {width: 30px; height: 50px; display: inline-block; vertical-align: middle}
.header .openAss .icon {background: url(../img/icon/ic_add_dark.svg) 50% 42% no-repeat; background-size: 20px;}
.header .closeAss .icon {background: url(../img/icon/ic_close_light.svg) 50% 42% no-repeat; background-size: 20px;}
.header .affis {width: 300px; position: fixed; z-index: 1; top: 0; right: -300px; background-color: rgba(0, 0, 0, 0.6); overflow-x: hidden; transition: 0.5s; }

.sidenav {height: 100%; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: rgba(0,0,0,0.85); overflow-x: hidden; transition: 0.5s; z-index: 999}
.header .affis ul {padding-top: 15px}
.header .affis li {line-height: 40px; font-size: 15px}
.header .affis a {color: #FFF; opacity: 0.6; position: relative;}
.header .affis a:hover {opacity: 1;}
.header .affis li a:hover {text-indent: 67px}
.header .affis li.dvbar {margin-top: 15px; padding-top: 15px; position: relative;}
.header .affis li.dvbar::before {content: ""; display: block; width: 180px; height: 1px; background: rgba(255,255,255,0.17); position: absolute; top: 0; left: 50px}
.header .affis i {position: absolute; top: 13px; right: 73px}
.header .spmu {position: absolute; top: 27px; right: 22%; font-size: 15px; display: none} /* Hidden */
.header .spmu a {background-color: rgba(0, 0, 0, 0.6); line-height:37px; border-radius: 25px; padding: 0 15px; color: #FFF; border: 1px solid rgba(0, 0, 0, 0.1)}
.header .spmu a:hover {background-color: rgba(0, 0, 0, 0.7);}
.header .spmu.smnd {display: none !important } /* Hidden */
.header,
.header h1,
.header .logo,
.header .logo:hover,
.header .nav a,
.header .nav a::before,
.header .openAss, .header .closeAss,
.header .affis, .header .affis a,
.header .spmu, .header .spmu a {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.header.shrink,
.header.shrink h1,
.header.shrink .logo,
.header.shrink .affilink,
.header.shrink .openAss, .header.shrink .closeAss {height: 60px; line-height: 60px;}
.header.shrink .nav a {height: 62px; line-height: 62px; font-size: 15px}
.header.shrink .logo {background-size: 141.43px 32.21px}
.header.shrink .affis {padding-top: 80px;}
.header.shrink .spmu {top: 15px; font-size: 13px;}
.header.shrink .spmu a {line-height:30px;}

#sh_0101 .nav li:nth-child(1) a,
#sh_0201 .nav li:nth-child(2) a,
#sh_0202 .nav li:nth-child(2) a,
#sh_0203 .nav li:nth-child(2) a,
#sh_0204 .nav li:nth-child(2) a,
#sh_0205 .nav li:nth-child(2) a,
#sh_0301 .nav li:nth-child(3) a,
#sh_0401 .nav li:nth-child(4) a,
#sh_0501 .nav li:nth-child(5) a  {font-weight:bold; color: #2667B4}
#sh_0101 .nav li:nth-child(1)::before,
#sh_0201 .nav li:nth-child(2)::before,
#sh_0202 .nav li:nth-child(2)::before,
#sh_0203 .nav li:nth-child(2)::before,
#sh_0204 .nav li:nth-child(2)::before,
#sh_0205 .nav li:nth-child(2)::before,
#sh_0301 .nav li:nth-child(3)::before,
#sh_0401 .nav li:nth-child(4)::before,
#sh_0501 .nav li:nth-child(5)::before {opacity: 0.8; bottom: 2px; left: 0; background: #2667B4; content: ""; width: 100px; height: 2px; position: absolute;}
#sh_0101 .nav li:nth-child(1) a::before,
#sh_0201 .nav li:nth-child(2) a::before,
#sh_0202 .nav li:nth-child(2) a::before,
#sh_0203 .nav li:nth-child(2) a::before,
#sh_0204 .nav li:nth-child(2) a::before,
#sh_0205 .nav li:nth-child(2) a::before,
#sh_0301 .nav li:nth-child(3) a::before,
#sh_0401 .nav li:nth-child(4) a::before,
#sh_0501 .nav li:nth-child(5) a::before {background: #2667B4}

/* side nav */
.opensidenav, .sidenav .closebtn {position: absolute; top: 0 !important; cursor: pointer; width: 70px; line-height: 80px; text-align: center; text-decoration: none; text-indent: -9999px !important}
.opensidenav {z-index: 999; display1: none; top: 0; right: 0; height: 100%; background: url(../img/icon/ic_menu_dark.svg) 50% 50% no-repeat; background-size: 30px}
.sidenav .closebtn {right: 0; height: 70px; background: url(../img/icon/ic_close_light.svg) 50% 50% no-repeat; background-size: 30px}
.sidenav {height: 100%; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: rgba(0,0,0,0.85); overflow-x: hidden; transition: 0.5s; z-index: 999}
.sidenav a {color: #FFF; display: block; transition: 0.3s; text-indent: 30px}
.sidenav a:hover {color: #FFF; text-indent: 25px}
.sidemenu {padding: 65px 0 0 0;}
.sidemenu > ul {width: 300px}
.sidemenu > ul > li {padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.2); clear: both; overflow: hidden;}
.sidemenu > ul > li:nth-child(5) {border-bottom: none}
.sidemenu a {line-height: 35px}
.sidemenu li ul {padding: 0 0 0 10px}
.sidemenu li ul li a {line-height: 30px;}
.sidemenu .d1 {width: 100px; float: left;}
.sidemenu .sbul {float: right; width: 200px}


/* subvisual */
.subvisual {height: 500px; padding-top: 220px; background-color: #d1cec7; background-position: 50% 40%; background-repeat: no-repeat; text-align: center; overflow: hidden; background-size: cover;}
.subvisual {position: -webkit-sticky; position: sticky; top: -370px; z-index: 98; line-height: 1}
.subvisual .stt0101,
.subvisual .stt0201, .subvisual .stt0202, .subvisual .stt0203, .subvisual .stt0204, .subvisual .stt0205,
.subvisual .stt0301,
.subvisual .stt0401,
.subvisual .stt0501 {display: none}
.subvisual .subtitle {font-size: 50px;}
.subvisual .subdesc {font-size: 17px; font-weight: normal;}
#sh_0101 .subvisual {background-image: url(../img/sh_0101.jpg)}
#sh_0201 .subvisual {background-image: url(../img/sh_0201.jpg)}
#sh_0202 .subvisual {background-image: url(../img/sh_0202.jpg)}
#sh_0203 .subvisual {background-image: url(../img/sh_0203.jpg)}
#sh_0204 .subvisual {background-image: url(../img/sh_0204.jpg)}
#sh_0205 .subvisual {background-image: url(../img/sh_0205.jpg)}
#sh_0301 .subvisual {background-image: url(../img/sh_0301.jpg)}
#sh_0401 .subvisual {background-image: url(../img/sh_0401.jpg)}
#sh_0501 .subvisual {background-image: url(../img/sh_0101.jpg)}
#sh_0101 .stt0101,
#sh_0201 .stt0201, #sh_0202 .stt0202, #sh_0203 .stt0203, #sh_0204 .stt0204, #sh_0205 .stt0205,
#sh_0301 .stt0301,
#sh_0401 .stt0401, #sh_0501 .stt0501 {display: block; color: #FFF; font-weight:bold;}



/* container */
.cntwrap {padding-top: 5%; font-size: 17px; line-height: 1.7}
.container {}
.container-fluid {}
.container-fluid.dense, .container-fluid.dense .row, .container-fluid.dense .row > div {padding: 0 !important; margin: 0 !important}

.row {}
.row > div {margin-bottom: 30px}
.pg_title {font-size: 40px; font-weight: 800; line-height: 60px; text-align: center; margin-bottom: 5%}
.pg_title .icon {vertical-align: top;}
.pg_title .icon img {height: 40px}
.pg_title_desc {font-size: 22px; line-height: 1.75; margin-bottom: 7%; text-align: center}
.pg_title_desc span {display:block;}
.sm_title {font-size: 30px; font-weight: 800; margin: 0 auto; text-align: center; padding-bottom: 30px}
.sm_title span {padding-bottom: 10px; border-bottom: 1px solid; width: auto;}
.imp_text {font-size: 40px; line-height: 60px; text-align: center; margin-bottom: 70px}
.imp_text.tal {text-align: left !important; font-size: 34px; line-height: 1.5; margin-bottom: 20px}

/* 2Depth menu */
.innermenu {background: rgba(0, 0, 0, 0.4); overflow: hidden; margin-top: -70px; text-align: center;
            position: -webkit-sticky; position: sticky; top: 60px; z-index: 98;}
.innermenu .container {padding: 0 !important; letter-spacing: -0.05em; font-size: 0}
.innermenu ul {margin-top: -15px; margin: 0 auto !important;}
.innermenu li {display: inline-block; height: 100%}
.innermenu li:first-child a::before {display: none}
.innermenu a {display:block; width: 100%; padding: 0 40px; color: rgba(255, 255, 255, 0.85); position: relative; font-size: 17px}
.innermenu a::before {content: ""; width: 1px; height: 25px; background: rgba(255, 255, 255, 0.2); position: absolute; top: 25px; left: 0}
.innermenu a:hover {color: rgba(255, 255, 255, 1)}
.innermenu li.on a {background: #FFF; color: #000;}
.innermenu, .innermenu .container, .innermenu a {height: 70px; line-height: 70px;}

/* tab mini menu */
.tab_mn {text-align: center; font-size: 0}
.tab_mn ul {margin: 0 auto}
.tab_mn li {display: inline-block; height: 70px; width: 160px}
.tab_mn li a {border: 1px solid #D9D9D9; font-size: 17px; display:block; width: 100%; line-height: 68px; color: #000}
.tab_mn li.on a {background: #FDC70D; border: 1px solid #FDC70D}
.tab_mn li:first-child a {border-right: none}
.tab_mn li:last-child a {border-left: none}

/* a bg-img style */
a.enlarge_img {background-size: 100%; display: block; transition: all 0.5s ease-in-out; background-position: 50% 50%; background-repeat: no-repeat; color: #FFF}
a.enlarge_img:hover {background-size: 110%; color: #FFF}
a.enlarge_img > p {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; display: table;}
a.enlarge_img > p > span {vertical-align: middle; display: table-cell;}
a.square {position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 100%;}
a.rectangle {position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 75%;}
a.ttl_id {font-size: 30px; font-weight: bold}
a.ttl_btn > p {opacity: 0; transition: all 0.3s ease-in-out;}
a.ttl_btn:hover > p {opacity: 1}
a.ttl_btn:hover > p > span {}
a.ttl_btn:hover .button {width: 200px; line-height: 70px; background: rgba(21, 101, 192, 0.85); display: block; margin: 0 auto;}

/* content:common */
.spblock {background: #FAF8F4}
.spblock .row, .spblock .row > div {padding: 0; margin: 0}
.spblock .desc {font-size: 18px; line-height: 2;}
.spblock .desc > p {padding: 0 7% 0 8%}
.spblock .desc > p > span {display: block;}
.col_ttl {font-size: 24px; padding-top: 30px; line-height: 1.5}


.pg_title_desc {font-size: 22px; line-height: 1.75; margin-bottom: 7%; text-align: center}
.pg_title_desc span {display:block;}

/* company */
.videodiv {width: 640px; margin: 0 auto;}
.videodiv video {width: 100%}
.videodiv iframe {width: 640px; height: 380px; border: none; overflow: hidden;}
#sh_0101.inscobee .subvisual .subtitle, #sh_0101.inscobee .subvisual .subtitle .subdesc {display: none}
#sh_0101.inscobee .innermenu {background: rgba(0, 0, 0, 0.65);}

#sh_0101.inscobee .subvisual {height: 162px !important; padding: 0 !important; top: -100px !important; overflow: hidden; opacity: 0}
#sh_0101.inscobee #section1, #sh_0101.inscobee #section2 {padding-top: 8%}
#sh_0101.inscobee #section0 {margin-top: -70px; height: 105% !important}

#sh_0101.inscobee #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;
}



/* history */
.history .container {clear: both;}
.history .hibo:nth-child(odd) table td {float:right}
.history .hibo_list {clear: both; overflow: hidden; background: url(../img/sub/bg_hibo.png) 50% 50% ; background-repeat: repeat-y}
.history .viewmore_cnt {clear: both; text-align: center;}
.history .viewmore_cnt > div {clear: both;}
.history .viewmore_cnt .textbtn {text-align: center; background: #FFF; display: inline-block; margin-top: 50px; font-weight: bold; padding: 5px 20px}
.hibo {font-size: 19px; width: calc( 50% + 4px );}
.hibo:nth-child(odd) {float: left; clear: both;  padding-right: 50px; background: url(../img/sub/hibo_l.svg) no-repeat 100% 79px}
.hibo:nth-child(even) {float: right; clear: both; padding-left: 50px; background: url(../img/sub/hibo_r.svg) no-repeat 1px 79px}
.hibo table {width: 100% !important;}
.hibo caption {font-size: 73px; font-weight: 800; margin-left: 120px}
.hibo caption.sm {font-size: 60px; line-height: 1}
.hibo table td {line-height: 1.4; vertical-align: top; padding: 10px 0}
.hibo table td:first-child {width:50px}
.hibo table td:first-child:after {content:""; display: block; width: 18px; height: 2px; background-color: #212529; z-index: -1; margin-left: 2px;}
.hibo:nth-child(odd) table td:first-child:after {margin-left: 30px;}
.hibo table td:nth-child(2) {width: calc(100% - 50px);}
.hibo:nth-child(odd) caption {text-align: right; margin-right: 120px}
.hibo:nth-child(even) table td {text-align: left;}
.hibo:nth-child(odd) table td {text-align: right;}

.hisinput table {width: 100%}
.hisinput input.month {width: 100%}
.hisinput input.hiscnt {width: 100%}



/* CI */
.citype {width: 30%; min-width: 300px; margin: 0 auto;}
.cimean {width: 80%; min-width: 300px; margin: 0 auto;}

/* affiliated */
.affi_b1_01 {background-image: url(../img/sub/affi_b1_01.png);}
.affi_b1_02 {background-image: url(../img/sub/affi_b1_02.png);}
.affi_b1_03 {background-image: url(../img/sub/affi_b1_03.png);}
.affi_b1_04 {background-image: url(../img/sub/affi_b1_04.png);}
.affi_b1_05 {background-image: url(../img/sub/affi_b1_05.png);}
.affi_b1_06 {background-image: url(../img/sub/affi_b1_06.png);}
.affi_b1_07 {background-image: url(../img/sub/affi_b1_07.png);}
.ci_affi {padding: 0 0 30px 0}
.ci_affi img {width: 30%}

/* biz_distribution */
.brand {width: 86%; margin: 0 auto;}
.brand .brand_id {text-align: center; padding-top: 30px}
.brand .brand_id .name {font-size: 24px}
.cosmetic_b2_01 {background-image: url(../img/sub/cosmetic_b2_01.png);}
.cosmetic_b2_02 {background-image: url(../img/sub/cosmetic_b2_02.png);}
.cosmetic_b2_03 {background-image: url(../img/sub/cosmetic_b2_03.png);}
.watch_b2_01 {background-image: url(../img/sub/watch_b2_01.png);}
.watch_b2_02 {background-image: url(../img/sub/watch_b2_02.png);}
.watch_b2_03 {background-image: url(../img/sub/watch_b2_03.png);}

/* business */
.busi_b1_01 {background-image: url(../img/sub/busi_b1_01.png);}
.busi_b1_02 {background-image: url(../img/sub/busi_b1_02.png);}
.busi_b1_03 {background-image: url(../img/sub/busi_b1_03.png);}
.busi_b1_04 {background-image: url(../img/sub/busi_b1_04.png);}
.biz_smart_b1 {background: url(../img/sub/biz_smart_b2_bg.png) 50% 50% no-repeat; background-size: cover; text-align: center; padding: 7% 0; margin-bottom: 5%}
.biz_mvno_b2 {background: url(../img/sub/biz_mvno_b2_bg.png) 50% 50% no-repeat; background-size: cover; text-align: center; padding: 7% 0; margin-bottom: 5%}
.plcmodem {background: #f4f4f4; padding: 50px 0}
.biz_smr {background: #f4f4f4; padding: 80px 0; margin-bottom: -90px}


/* community */
iframe {border: none; margin: 0; padding: 0}
#stock_info, #disInfo {width: 100%}
#stock_info {height: 1970px}
#disInfo {height: 770px}

/* foot */
.footer {background: #313131; padding-top: 30px; color: #FFF; line-height: 1.2; margin-top: 90px; text-align: left;}
.footer .logo {max-width: 150px; margin-top: 12px; opacity: 0.7}
.footer .address {font-size: 15px; opacity: 0.7}
.footer .address > span > span {padding-right: 15px}
.footer .copyright {font-size: 13px; opacity: 0.4}
.foot_acclink {display: none; visibility: hidden}
.foot_acclink .dropup {color: #FFF; border: 1px solid #999; width: 190px; margin-bottom: 20px}
.foot_acclink .dropup button {color: #ccc; width: 100%; font-size: 14px}
.foot_acclink .dropdown-menu {background: #333; width: 190px}
.foot_acclink .dropdown-menu a {color: #FFF; padding: 10px; display: block; ; font-size: 14px}


/* modal */
.modal {display: none; position: fixed; z-index: 1; padding-top: 150px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6);}
.modal-content {background-color: #fefefe; margin: auto; border: 1px solid #888; width: 80%; max-width: 760px}
.modal .close {text-indent: -9999px; width: 50px; height: 50px; position: absolute; top: 0; right: 0; background: url(../img/sub/ico_close.png) 50% 50% no-repeat; background-size: 19px; cursor: pointer;}
.modal .title {height: 150px; font-size: 38px; padding: 60px 0 0 60px; background-color: rgba(51,51,51,0.95); color: #FFF}
.modal .cntbox {padding: 60px; font-size: 19px}
.modal .cntbox .button {border: 1px solid #777; padding: 5px 20px; color: #000;}

.modal {padding-top: 150px; }
.modal-content {width: 80%; max-width: 760px}
.modal .title {height: 150px; font-size: 38px; padding: 60px 0 0 60px}
.modal .cntbox {padding: 60px; font-size: 19px}

/* login, logout */
.logbutton {position: fixed; z-index: 9999; top: 0; right: 0; font-family: 'play'; background: #000; color: #FFF; font-size: 14px; display: block; line-height: 26px; padding: 0 8px}
.logbutton:hover {color: #FFE900}























/* sub */
.cntester {width: 100%}