@charset "UTF-8";

#popwrap {position:relative; width:100%}

.popbx {position:relative; max-width:1200px; margin:0px auto;}
.popbx * {text-align:left}
.popbx .btn-cen {text-align:center}
.popbx .btn-cen .button {text-align:center}

/* 팝업 헤더*/
.pophd {position:relative; background:url(../img/bg_top.png) no-repeat; background-position:center; background-size:cover; background-color:#e5110f}
.pophd h1 {position:relative;font-size:24px; font-weight:300; color:#fff; padding:15px 30px 15px}
.pophd .ico-close {position:absolute; right:30px; top:15px; background:url(../img/icon_close_white.png)}

/* 팝업 바디 사이즈별 */
.popbody {background:#fff; padding:30px 30px 50px;}
.mxwid800 {max-width:800px;}

/* 팝업 버튼 */
.popbtn {text-align:center; margin-top:30px}
.popbtn .button {min-width:40%}

/* 심포지엄신청 팝업 */
.sympoapply h2 {font-size:30px; font-weight:400}
.sympoapply .subcopy {margin-top:5px; color:#999}
.sympoapply .date {margin-top:10px; font-size:20px}

/* 레이어팝업-레드*/
.laypop {width:100%; z-index:999}
.laypop.overT {position:absolute; top:0px;}
.laypop.overB {position:absolute; bottom:0px;}
.laypop.red {background:#e5110f}
.laypop>div {position:relative; max-width:1200px; margin:0 auto; box-sizing:padding-box; padding:40px 30px}
.laypop>div.bottom {padding:5px 20px 20px}
.laypop h1 {font-size:24px; color:#fff}
.laypop p {color:#fff}
.laypop .close {position:absolute; display:block; top:50px; right:30px}
.laypop .close span {background:url(../img/icon_close_white.png)}

.laypop>div.noti-img {background:url(../img/img_pop_christmas.png) no-repeat; background-position:bottom right 10px; background-size:auto}
.notice {width:70%}
.notice table * {text-align:left; font-size:15px; color:#fff}
.notice table {margin:20px 0px}
.notice .btn {margin-top:20px}
.laypop.red .button:hover {border:1px solid #fff}

.cookieset {margin-top:20px}
.cookieset:after{content:""; clear:both; display:block}
.cookieset>div {display:inline-block; float:left}
.cookieset .tx {width:50%}
.cookieset .tx2 {width:82%}
.cookieset .tx p {margin-right:20px}
.cookieset .sel {width:30%; margin-right:20px}
.cookieset .sel .select {min-width:90%; z-index:1000}
.cookieset .sel .select ul {z-index:1000}
.cookieset .btn .button{text-align:center}
.cookieset .btn2{width:120px; text-align:right; float:right;}
.cookieset .btn2 .button{text-align:center; padding:0px 15px;}

/* 브랜드 가이드 */
.brandguide>ul:after{content:""; clear:both; display:block}
.brandguide>ul>li {display:inline-block; float:left; width:48%; margin-bottom:20px}
.brandguide>ul>li:nth-child(2n) {margin-left:4%}
.brandguide>ul>li:nth-child(2n+3) {clear:both}
.brandguide>ul>li:nth-child(5) {margin-bottom:0px}
.brandguide>ul>li:nth-child(6) {margin-bottom:0px}
.brandguide>ul>li h2 {color:#cc0000; margin-bottom:10px}
.brandguide>ul>li .info {position:relative}
.brandguide>ul>li .info .img {position:absolute; top:0px; left:0px; width:30%;}
.brandguide>ul>li .info .img img {width:100%; max-width:75px}
.brandguide>ul>li .info p {position:relative; top:0px; left:30%; width:68%; margin-left:2%}

/* Contact > 제품찾기팝업 */
.srch_pdt {margin-top:15px; background:#f5f5f5; border:1px solid #ddd}
.srch_pdt:after {content:""; display:block; clear:both}
.srch_pdt .bigcate {z-index:500; position:relative; display:block; float:left; width:45%; max-height:330px}
.srch_pdt .bigcate .li{display:block; padding:5px 20px; font-size:15px}
.srch_pdt .bigcate .li:first-child {padding-top:15px}
.srch_pdt .bigcate .li a {display:block}
.srch_pdt .bigcate .li a:hover {transform:translateY(0px); color:#cc0000}
.srch_pdt .bigcate .on {border-bottom:1px solid #ddd; border-top:1px solid #ddd; margin-right:-1px; margin-top:-1px; background:#fff; padding:10px 35px 10px 20px; margin-bottom:10px; position:relative}
.srch_pdt .bigcate .on:after {content:""; display:block; width:7px; height:13px; background:url(../img/icon_minarr-red_right.png) no-repeat; background-size:100% 100%; position:absolute; top:50%; transform:translateY(-50%); right:20px}
.srch_pdt .bigcate .on a {color:#cc0000; font-weight:400}
.srch_pdt .assay {z-index:499; box-sizing:border-box; border-left:1px solid #ddd; background:#fff; padding:15px 20px; position:relative; display:block; float:left; width:55%; max-height:330px; overflow-y:scroll}
.srch_pdt .assay>div {padding-bottom:20px; margin-bottom:30px; border-bottom:1px dashed #ddd}
.srch_pdt .assay .assyli {position:relative; display:block; margin-bottom:8px}
.srch_pdt .assay .assyli:after {content:""; display:block; clear:both}
.srch_pdt .assay .assyli .chk {position:absolute; top:0px; left:0px; display:block}
.srch_pdt .assay .assyli .chk input[type="checkbox"] {width:17px; height:17px}
.srch_pdt .assay .assyli .tx {position:relative; top:0px; left:0px; margin-left:30px; display:block; font-size:15px}

/* 메인 게이트 - 미니 공지 팝업 */
.mgate-noti {position:absolute; top:82px; z-index:600; width:auto; height:456px; right:10%; background:#fff; max-width:475px; overflow:hidden}
.mgate-noti .img {position:relative}
.mgate-noti .img img {width:100%; height:auto}
.mgate-noti .close {position:absolute; bottom:-30px; right:20px; background:#fff; padding:10px; opacity:1 filter:alpha(opacity=100);}
.mgate-noti .close .ico-close:hover {transform:translateY(0px)}
.mgate-noti .notinfo {background:#fff; padding:30px 30px; /*border:1px solid #ddd; border-top:none;*/ height:220px; overflow-y:scroll;}
.mgate-noti .notinfo h2 {font-size:24px; text-align:center; margin-bottom:15px; color:#cc0000}
.mgate-noti .notinfo .fs13 {color:#999}
.mgate-noti .emer-num:after {content:""; display:block; clear:both}
.mgate-noti .emer-num dt {display:inline-block; float:left; text-align:right; width:30%; margin-right:5%; font-size:14px; color:#000}
.mgate-noti .emer-num dd {display:inline-block; float:left; width:65%; font-size:14px; color:#000}
.mgate-noti .emerbtn {position:absolute; left:0px; bottom:0px; padding:15px 0px; width:100%;}
.mgate-noti .emerbtn .button {position:absolute; right:20px; top:5px}
.mgate-noti .emerbtn .onedaycheck {position:relative; left:20px; margin-bottom:20px}
.mgate-noti .emerbtn .onedaycheck span, .mgate-noti .emerbtn .onedaycheck input {vertical-align:middle}
.mgate-noti .emerbtn .onedaycheck span.tx {font-size:14px; vertical-align:middle}

/* 메인 게이트 - 미니 공지 팝업 추가 */
.mgate-noti-1 {position:absolute; top:82px; z-index:600; width:auto; height:100%; right:10%; background:#fff; max-width:100%; overflow:hidden}
.mgate-noti-1 .img {position:relative}
.mgate-noti-1 .img img {width:100%; height:auto}
.mgate-noti-1 .close {position:absolute; bottom:-30px; right:20px; background:#fff; padding:10px; opacity:1 filter:alpha(opacity=100);}
.mgate-noti-1 .close .ico-close:hover {transform:translateY(0px)}
.mgate-noti-1 .notinfo {background:#fff; padding:30px 30px; /*border:1px solid #ddd; border-top:none;*/ height:220px; overflow-y:scroll;}
.mgate-noti-1 .notinfo h2 {font-size:23px; text-align:center; margin-bottom:15px; color:#cc0000}
.mgate-noti-1 .notinfo .fs13 {color:#999}
.mgate-noti-1 .emer-num:after {content:""; display:block; clear:both}
.mgate-noti-1 .emer-num dd {display:inline-block; float:left; width:65%; font-size:14px; color:#000}
.mgate-noti-1 .emer-num dt {display:inline-block; float:left; text-align:right; width:30%; margin-right:5%; font-size:14px; color:#000}
.mgate-noti-1 .emerbtn {position:absolute; left:0px; bottom:0px; padding:15px 0px; width:100%;}
.mgate-noti-1 .emerbtn .button {position:absolute; right:20px; top:5px}
.mgate-noti-1 .emerbtn .onedaycheck {position:relative; left:20px; margin-bottom:20px}
.mgate-noti-1 .emerbtn .onedaycheck span, .mgate-noti .emerbtn .onedaycheck input {vertical-align:middle}
.mgate-noti-1 .emerbtn .onedaycheck span.tx {font-size:14px; vertical-align:middle}

/* 메인 게이트 - 미니 공지 팝업 추가 */
.mgate-noti-2 {position:absolute; top:82px; z-index:999; width:auto; height:200px; left:10%; background:#fff; max-width:50%; overflow:hidden}
.mgate-noti-2 .img {position:relative}
.mgate-noti-2 .img img {width:100%; height:auto}
.mgate-noti-2 .close {position:absolute; bottom:-30px; right:20px; background:#fff; padding:10px; opacity:1 filter:alpha(opacity=100);}
.mgate-noti-2 .close .ico-close:hover {transform:translateY(0px)}
.mgate-noti-2 .notinfo {background:#fff; padding:30px 30px; /*border:1px solid #ddd; border-top:none;*/ height:700px; overflow-y:hidden;}
.mgate-noti-2 .notinfo h2 {font-size:23px; text-align:center; margin-bottom:15px; color:#666}
.mgate-noti-2 .notinfo .fs13 {color:#999}
.mgate-noti-2 .emer-num:after {content:""; display:block; clear:both}
.mgate-noti-2 .emer-num dd {display:inline-block; float:left; width:65%; font-size:14px; color:#000}
.mgate-noti-2 .emer-num dt {display:inline-block; float:left; text-align:right; width:30%; margin-right:5%; font-size:14px; color:#000}
.mgate-noti-2 .emerbtn {position:absolute; left:0px; bottom:0px; padding:15px 0px; width:100%;}
.mgate-noti-2 .emerbtn .button {position:absolute; right:20px; top:5px}
.mgate-noti-2 .emerbtn .onedaycheck {position:relative; left:20px; margin-bottom:20px}
.mgate-noti-2 .emerbtn .onedaycheck span, .mgate-noti .emerbtn .onedaycheck input {vertical-align:middle}
.mgate-noti-2 .emerbtn .onedaycheck span.tx {font-size:14px; vertical-align:middle}

/* Contact 문의 접수 완료 팝업 */
.compContact {padding:10px 0px 50px;}
.compContact * {text-align:center !important}
.compContact h2 {font-size:30px}
.compContact h3 {font-size:20px}


/*-------------------------------- 미디어쿼리 ---------------------------------*/
@media all and (max-width:1000px){
	.mgate-noti {top:90px; z-index:600; width:auto; height:auto; right:50%; transform:translateX(50%); box-shadow:#333 0px 3px 15px 0px}
	.mgate-noti .close {bottom:-20px}
	.mgate-noti .close .ico-close {width:25px; height:25px;}
	.mgate-noti .notinfo {padding:20px 20px 50px; height:auto; overflow-y:visible;}
    .mgate-noti .notibody {height:auto; overflow-y:visible}
	.mgate-noti .notinfo h2 {font-size:18px; line-height:22px; margin-bottom:15px}
	.mgate-noti .emerbtn {margin-top:0px}
	.mgate-noti .emer-num dt {font-size:13px}
	.mgate-noti .emer-num dd {font-size:13px}

  .mgate-noti-1 {top:90px; z-index:600; width:auto; height:auto; right:50%; transform:translateX(50%); box-shadow:#333 0px 3px 15px 0px}
  .mgate-noti-1 .close {bottom:-20px}
  .mgate-noti-1 .close .ico-close {width:25px; height:25px;}
  .mgate-noti-1 .notinfo {padding:20px 20px 50px; height:auto; overflow-y:visible;}
  .mgate-noti-1 .notibody {height:auto; overflow-y:visible}
  .mgate-noti-1 .notinfo h2 {font-size:19px; line-height:22px; margin-bottom:15px}
  .mgate-noti-1 .emerbtn {margin-top:0px}
  .mgate-noti-1 .emer-num dt {font-size:13px}
  .mgate-noti-1 .emer-num dd {font-size:13px}

	.mgate-noti-2 {top:90px; z-index:999; width:auto; height:auto; right:50%; transform:translateX(50%); box-shadow:#333 0px 3px 15px 0px}
	.mgate-noti-2 .close {bottom:-20px}
	.mgate-noti-2 .close .ico-close {width:25px; height:25px;}
	.mgate-noti-2 .notinfo {padding:20px 20px 50px; height:auto; overflow-y:visible;}
	.mgate-noti-2 .notibody {height:auto; overflow-y:visible}
	.mgate-noti-2 .notinfo h2 {font-size:19px; line-height:22px; margin-bottom:15px}
	.mgate-noti-2 .emerbtn {margin-top:0px}
	.mgate-noti-2 .emer-num dt {font-size:13px}
	.mgate-noti-2 .emer-num dd {font-size:13px}


}

@media all and (max-width:768px){
    .pophd h1 {font-size:17px; padding:10px 45px 10px 20px}
    .pophd .ico-close {right:15px; top:12px; width:22px; height:22px; background-size:100% 100%}

    .popbody {padding:20px 20px 30px;}
    .popbtn {text-align:center; margin-top:20px}

    .sympoapply h2 {font-size:24px}
    .sympoapply .subcopy {margin-top:3px}
    .sympoapply .date {margin-top:3px; font-size:16px}

    .laypop>div {padding:25px 25px}
    .laypop h1 {font-size:18px}
    .laypop .close {position:absolute; display:block; top:25px; right:25px}
    .laypop>div.noti-img {background-position:bottom 0px right 10px; background-size:30%}
    .notice {width:75%}
    .notice table * {font-size:13px}
    .notice table {margin:10px 0px}
    .notice .btn {margin-top:20px}
    .notice .btn .button:hover {border:1px solid #fff}

    .cookieset {margin-top:15px}
    .cookieset:after{content:""; clear:both; display:block}
    .cookieset>div {display:inline-block; float:left}
    .cookieset .tx {width:100%; display:block; float:none}
    .cookieset .tx p {margin:10px 0px 20px}
    .cookieset .sel {width:50%}
    .cookieset .sel .select {min-width:90%}
    .cookieset .btn .button{text-align:center}

	.srch_pdt .bigcate {max-height:35px}
	.srch_pdt .bigcate .li{padding:5px 10px; font-size:13px}
	.srch_pdt .bigcate .on {padding:10px 25px 10px 10px; margin-bottom:7px}
	.srch_pdt .assay {padding:10px 10px; max-height:350px}
	.srch_pdt .assay .assyli {position:relative; display:block; margin-bottom:7px}
	.srch_pdt .assay .assyli .chk input[type="checkbox"] {width:15px; height:15px}
	.srch_pdt .assay .assyli .tx {margin-left:25px; font-size:13px; line-height:15px}
	.srch_pdt .bigcate .on:after {right:10px}

	.compContact {text-align:center; padding:10px 0px 20px}
	.compContact h2 {font-size:24px}
	.compContact h3 {font-size:18px}

	.mgate-noti {top:70px; min-width:400px}
}

@media all and (max-width:500px){
    .brandguide>ul>li {width:100%; margin-bottom:30px}
    .brandguide>ul>li:nth-child(2n) {margin-left:0%}
    .brandguide>ul>li h2 {font-size:18px}
	.brandguide>ul>li:last-child {margin-top:50px;}

	.cookieset .tx2 {width:60%; display:block; width:100%;}
	.cookieset .btn2 {width:100%; display:block; width:100%; text-align:center; margin-top:10px}
	.cookieset .btn2 .button {width:80%}

	.mgate-noti {top:70px; height:auto; width:86%; min-width:auto; right:50%; transform:translateX(50%)}
	.mgate-noti .fs13 {font-size:12px !important; padding-top:10px}

  .mgate-noti-1 {top:70px; height:auto; width:86%; min-width:auto; right:50%; transform:translateX(50%)}
	.mgate-noti-1 .fs13 {font-size:12px !important; padding-top:10px}

  .mgate-noti-2 {top:70px; z-index:999; height:auto; width:86%; min-width:auto; right:20%; transform:translateX(50%)}
  .mgate-noti-2 .fs13 {font-size:12px !important; padding-top:10px}
}