.shareWrap + .tab-1 { padding-top:0; }

/********** 뉴스 List, View **********/
.boardList { border-top:solid 3px #111; margin-top:5px; }
.boardList li { position:relative; padding:20px 0 19px 15px; border-bottom:solid 1px #ededed; }
.boardList li:after { position:absolute; right:7px; top:50%; margin-top:-7px; }
.boardList .boardItem { padding:0 52px 0 0; }
.boardList .boardItem .type { display:block; color:#f37321; font-weight:bold; margin-bottom:6px; }
.boardList .boardItem .title { display:block; color:#111; line-height:1.55; }
.boardList .boardItem .date { display:block; color:#999; margin-top:2px; }
.boardList .boardItem .icon { margin:-4px 0 0 4px; }
.boardTitle { font-size:20px; line-height:1.45; color:#111; font-weight:bold; margin:24px 0 -2px; padding:0 15px; }
.boardTitle .icon { margin:-4px 0 0 5px; }
.boardView { font-size:14px; line-height:1.5; margin-top:20px; border-top:solid 3px #111; border-bottom:solid 1px #ccc; padding:0 15px 53px; }
.boardView .date { display:block; text-align:right; margin-top:20px; color:#999; }
.boardView .date strong { margin-right:14px; color:#f37321; }
.boardView .cont { margin-top:27px; line-height:1.45; }
.boardView .cont img { max-width:100%; }
.boardView .cont p { margin-top:8px; }
.boardView .cont p:first-child { margin-top:0; }
.boardView .attach { margin:38px 0 -7px; }
.boardView .attach .ellipsis { display:block; padding:0 23px 0 0; }
.boardOther li { position:relative; padding:26px 0 26px 15px; border-bottom:solid 1px #ccc; }
.boardOther li:after { position:absolute; right:15px; top:50%; margin-top:-4px; }
.boardOther .boardItem { padding:0 52px 0 0; }
.boardOther .boardItem .type { display:block; color:#f37321; font-weight:bold; margin-bottom:8px; }
.boardOther .boardItem .title { display:block; color:#999; }
.boardOther a .boardItem .title { color:#111; }
.boardOther .boardItem .date { display:block; color:#999; margin-top:4px; }
.boardOther .boardItem .icon { margin:-4px 0 0 4px; }

/********** SEARCH **********/
.boardSch { display:flex; border: solid 1px #dedede; margin-top:35px; position:relative; box-sizing:border-box; }
.boardSch.focus { border-color: #f37321; }
.boardSch .sel { flex: none; padding:0 27px 0 19px; height:53px; border:none; font-size:14px; line-height:55px; color:#111; }
.boardSch .ipt { width:100%; padding:0 80px 0 10px; height:53px; border:none; font-size:14px; line-height:55px; color:#999; margin-left:-5px; }
.boardSch .ipt:first-child { margin-left:0; }
.boardSch .btnSch { flex: none; position:absolute; top:-1px; right:-1px; background:#f37321; width:70px; height:55px; color:#fff; font-size:14px; line-height:57px; box-sizing:border-box; }
.schEx { margin:6px 0 0 11px; font-size:14px; line-height:1.5; color:#999; }

/********** 검색 **********/
.proSearch { margin:0 -20px; padding:0 20px; background:#2c384b; }
.proSearch button.toggle { width:100%; margin:0 -20px; padding:17px 20px; color:#fff; font-size:14px; line-height:1.5; box-sizing:content-box; }
.proSearch button.toggle:after { content:''; position:relative; display:inline-block; width:7px; height:7px; margin:0 0 0 6px; border:0 solid #f36910; border-width:0 1px 1px 0; vertical-align:4px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.proSearch button.active.toggle:after { margin-bottom:-5px; -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.proSearch .onTxt, .proSearch .active .offTxt { display:none; }
.proSearch .active .onTxt { display:inline-block; }
.searchOpt { padding:10px 0; }
.searchOpt .name { display:block; margin:26px 15px 10px; color:#fff; }
.searchOpt .name strong { color:#f37321; }
.searchOpt select { font-size:14px; line-height:46px; width:100%; height:48px; padding:0 30px 0 15px; border:1px solid #212b3b; color:#fff; background:#212b3b url('/static/m/en/images/common/arr_sel_w.png') 100% center no-repeat; background-size:21px 4px; }
.searchOpt select:focus { border-color:#f37321; color:#fff !important; }
.searchOpt .ps { margin:6px 0 23px; font-size:13px; color:#75787d; }
.searchOpt .btnCol button { display:inline-block; width:100%; height:48px; font-size:15px; line-height:48px; padding:0 10px; font-weight:bold; color:#fff; border:1px solid #969ca5; box-sizing:border-box; }
.searchOpt .btnCol button.submit { border-color:#f37321; background-color:#f37321; }
.schTitle { margin:32px 11px 10px; font-weight:bold; color:#111; }
.productList { border-top:2px solid #111; border-bottom:1px solid #ccc; font-size:14px; line-height:1.5; }
.productList > li { border-top:1px solid #ededed; }
.productList > li:first-child { border-top:0; }
.productList a.arrow { position:relative; display:block; min-height:98px; padding:25px 30px 22px 128px; }
.productList a.arrow:before { content:''; display:inline-block; *zoom:1; *display:inline; width:1px; height:98px; vertical-align:middle; margin-right:-6px; }
.productList a.arrow:after { content:''; position:absolute; right:7px; top:50%; margin-top:-5px; width:10px; height:10px; border:0 solid #444; border-width:1px 1px 0 0; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.productList .thumb { position:absolute; left:15px; top:50%; margin-top:-49px; }
.productList .thumb img { width:98px; }
.productList .info { display:inline-block; *zoom:1; *display:inline; vertical-align:middle; }
.productList .name { display:block; margin:0 0 13px; font-size:17px; line-height:1.1; font-weight:bold; color:#111; }
.productList .path { display:block; margin:0; color:#f37320; font-weight:bold; }
.productList .txt { display:block; margin:8px 0 0; }

/********** 알기쉬운 석유화학 **********/
.proProcess { margin:13px -20px 0; padding:40px 20px 50px; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.proProcess.bg-1 { background-image:url("/static/m/en/images/etc/pro_process_1.jpg"); }
.proProcess.bg-2 { background-image:url("/static/m/en/images/etc/pro_process_2.jpg"); }
.proProcess.bg-3 { background-image:url("/static/m/en/images/etc/pro_process_3.jpg"); }
.proProcess.bg-4 { background-image:url("/static/m/en/images/etc/pro_process_4.jpg"); }
.proProcess.bg-5 { background-image:url("/static/m/en/images/etc/pro_process_5.jpg"); }
.proProcess .moviArea { padding-top:56.3%; }


.isPageLifeIn, .isPageLifeIn body { overflow:hidden; }
.lifeInHcc { position:fixed; left:0; right:0; top:0; bottom:0; padding:0; background:#ddd; }
.lifeInHcc .slides .item { position:fixed; left:0; right:0; top:0; height:100%; z-index:1; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.lifeInHcc .slides .item.bg-1 { background-image:url("/static/m/en/images/etc/lifein_img1.jpg"); }
.lifeInHcc .slides .item.bg-2 { background-image:url("/static/m/en/images/etc/lifein_img2.jpg"); }
.lifeInHcc .slides .item.bg-3 { background-image:url("/static/m/en/images/etc/lifein_img3.jpg"); }
.lifeInHcc .slides .item.bg-4 { background-image:url("/static/m/en/images/etc/lifein_img4.jpg"); }
.lifeInHcc .slides .item.bg-5 { background-image:url("/static/m/en/images/etc/lifein_img5.jpg"); }
.lifeInHcc .slides .item.bg-6 { background-image:url("/static/m/en/images/etc/lifein_img6.jpg"); }
.lifeInHcc .tip { position:absolute; bottom:0; left:50%; z-index:5; width:100px; margin-left:-50px; color:#fff; font-size:12px; text-align:center;  }
.lifeInHcc .tip:after { content:''; display:block; margin:5px auto 0; width:1px; height:20px; background:#fff; opacity:0.5; }
.lifeInHcc .tip:before { content:''; position:absolute; left:50%; bottom:17px; width:3px; height:3px; margin-left:-1.5px; background:#fff; border-radius:3px; }
.lifeInHcc .lifeIr { display:inline-block; vertical-align:middle; padding:0; margin:0; white-space:nowrap; font-size:1px; overflow:hidden; text-indent:-999px; color:transparent; line-height:0; background-image:url("/static/m/en/images/etc/lifein_txt1.png"); background-repeat:no-repeat; background-size: 250px 368px; }
.lifeInHcc .lifeIr.t0 { background-position: 0 0; width: 250px; height: 99px; }
.lifeInHcc .lifeIr.t1 { background-position: 0 -100px; width: 171px; height: 48px; }
.lifeInHcc .lifeIr.t2 { background-position: 0 -155px; width: 171px; height: 48px; }
.lifeInHcc .lifeIr.t3 { background-position: 0 -210px; width: 171px; height: 48px; }
.lifeInHcc .lifeIr.t4 { background-position: 0 -265px; width: 171px; height: 48px; }
.lifeInHcc .lifeIr.t5 { background-position: 0 -320px; width: 171px; height: 48px; }
.lifeInHcc .msgIntro { position:absolute; left:50%; top:50%; margin:-160px 0 0 -160px; width:320px; height:320px; font-size:14px; line-height:1.5; color:#fff; text-align:center; box-sizing:border-box; border:1px solid #fff; border-color:rgba(255,255,255,0.2); border-radius:320px; }
.lifeInHcc .msgIntro .logo { position:relative; display:block; margin:79px auto 9px; }
.lifeInHcc .msgIntro .txt { display:block; position:relative; text-align:center; }
.lifeInHcc .msgIntro .ani { position:absolute; left:0; right:0; top:0; bottom:0; }
.lifeInHcc .msgIntro .dot { position:absolute; z-index:2; }
.lifeInHcc .msgIntro .dot:before { content:''; position:absolute; width:3px; height:3px; background:#fff; border-radius:3px; }
.lifeInHcc .msgIntro .dot:after { content:''; position:absolute; width:3px; height:3px; background:#fff; border-radius:3px; }
.lifeInHcc .msgIntro .dot.pos1 { left:159px; top:0; width:3px; height:100%; }
.lifeInHcc .msgIntro .dot.pos1:before { left:0; top:-2px; }
.lifeInHcc .msgIntro .dot.pos1:after { right:0; bottom:-2px; }
.lifeInHcc .msgIntro .dot.pos2 { left:0; top:159px; width:100%; height:3px; }
.lifeInHcc .msgIntro .dot.pos2:before { left:-2px; top:0; }
.lifeInHcc .msgIntro .dot.pos2:after { right:-2px; bottom:0; }
.lifeInHcc .msgIntro .dot.pos3 { left:47px; top:47px; width:224px; height:224px; }
.lifeInHcc .msgIntro .dot.pos3:before { left:-2px; top:-2px; }
.lifeInHcc .msgIntro .dot.pos3:after { right:-2px; bottom:-2px; }
.lifeInHcc .msgIntro .dot.pos4 { left:47px; top:47px; width:224px; height:224px; }
.lifeInHcc .msgIntro .dot.pos4:before { right:-2px; top:-2px; }
.lifeInHcc .msgIntro .dot.pos4:after { left:-2px; bottom:-2px; }
.lifeInHcc .msgIntro .line { position:absolute; left:-1px; right:-1px; top:-1px; bottom:-1px; }
.lifeInHcc .msgIntro .line .left { position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden; clip: rect(0 320px 320px 160px); }
.lifeInHcc .msgIntro .line .right { position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden; clip: rect(0px 160px 320px 0px); }
.lifeInHcc .msgIntro .line .left:before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden; border:1px solid #f37321; border-radius:100%; clip: rect(0 320px 320px 160px); }
.lifeInHcc .msgIntro .line .right:before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden; border:1px solid #f37321; border-radius:100%; clip: rect(0px 160px 320px 0px); }

.lifeInHcc .msg { position:absolute; left:34px; right:34px; top:50%; z-index:2; margin-top:0; color:#fff; }
.lifeInHcc .msg .scene1 { position:absolute; left:0; top:-27px; }
.lifeInHcc .msg .scene2 { position:absolute; left:0; top:-27px; }
.lifeInHcc .msg .lifeIr { display:block; margin-bottom:21px; }
.lifeInHcc .msg .name { display:block; margin-top:-5px; margin-bottom:21px; font-size:29px; line-height:1.05; font-weight:bold; color:#f37321; }

.lifeInHcc .control { position:absolute; right:17px; bottom:37px; z-index:5; }
.lifeInHcc .control .arrow { position:relative; display:block; width:13px; height:13px; overflow:hidden; margin-bottom:6px; text-indent:-999px; white-space:nowrap; }
.lifeInHcc .control .arrow:before { content:''; position:absolute; left:3px; top:3px; display:block; width:5px; height:5px; border:1px solid #fff; border-radius:7px; opacity:0.8; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.lifeInHcc .control .arrow.active:before { background-color:#f37321; border-color:#f37321; opacity:1; }

.lifeInHcc .slides .item { z-index:1; top:100%; }
.lifeInHcc .slides .item:after { content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:#000; opacity:0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.lifeInHcc .slides .item.active { z-index:5; top:0; }
.lifeInHcc .msg .scene1 { opacity:0; -webkit-transition: all 0.6s ease-out; transition: all 0.6s ease-out; }
.lifeInHcc .msg .scene2 { opacity:0; -webkit-transition: all 0.6s ease-out; transition: all 0.6s ease-out; }
.lifeInHcc .msg { -webkit-transition: all 0s linear; transition: all 0s linear; }
.lifeInHcc .active .msg { -webkit-transition-duration: 0.6s; transition-duration: 0.6s; }
.lifeInHcc .msg .lifeIr, .lifeInHcc .msg .name, .lifeInHcc .msg .txt { position:relative; opacity:0; -webkit-transition: all 0.6s ease-out 0.6s; transition: all 0.6s ease-out 0.6s; }
.lifeInHcc .active.normal .scene1 { opacity:1; }
.lifeInHcc .tip.top { opacity:0; z-index:2; -webkit-transition: all 0.6s ease-out 0.6s; transition: all 0.6s ease-out 0.6s; }
.lifeInHcc .active.zoom .tip.top { opacity:1; }
.lifeInHcc .active.zoom .scene2 { opacity:1; }
.lifeInHcc .active.normal .scene1 .lifeIr, .lifeInHcc .active.normal .scene1 .name, .lifeInHcc .active.normal .scene1 .txt,
.lifeInHcc .active.zoom .scene2 .lifeIr, .lifeInHcc .active.zoom .scene2 .name, .lifeInHcc .active.zoom .scene2 .txt { opacity:1; }
.lifeInHcc .slides .item.zoom:after { opacity:0.5; }


.lifeInHcc .msgIntro .logo { -webkit-transform: matrix(1.5, 0, 0, 1.5, 0, -40); transform: matrix(1.5, 0, 0, 1.5, 0, -40); opacity:0; -webkit-transition: all 0s ease-out; transition: all 0s ease-out; }
.lifeInHcc .msgIntro .txt { -webkit-transform: matrix(1.5, 0, 0, 1.5, 0, 40); transform: matrix(1.5, 0, 0, 1.5, 0, 40); opacity:0; -webkit-transition: all 0s ease-out; transition: all 0s ease-out; }
.lifeInHcc.initialized .active .msgIntro .logo, .lifeInHcc.initialized .active .msgIntro .txt { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); opacity:1;
	-webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}

.lifeInHcc .msgIntro .line .left:before { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transition: all 0s linear 0s; transition: all 0s linear; }
.lifeInHcc .msgIntro .line .right:before { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transition: all 0s linear; transition: all 0s linear; }
.lifeInHcc.initialized .active .msgIntro .line .left:before { -webkit-transform: rotate(0deg); transform: rotate(0deg);  -webkit-transition-duration: 0.7s; transition-duration: 0.7s; -webkit-transition-delay: 1.0s; transition-delay: 1.0s; }
.lifeInHcc.initialized .active .msgIntro .line .right:before { -webkit-transform: rotate(0deg); transform: rotate(0deg);  -webkit-transition-duration: 0.7s; transition-duration: 0.7s; -webkit-transition-delay: 1.7s; transition-delay: 1.7s; }