@charset "utf-8";

/* --- BRAND :: Brand Ambassador -- */
.ambassador_cont{height:530px; position:relative; width:100%; overflow:hidden; margin-top:50px;}
.ambassador_cont:first-child{margin-top:0}
.ambassador_cont .photo{position:absolute; width:0; height:530px; background-color:#e5e4e3; opacity:0; overflow:hidden;}
.ambassador_cont .photo img{position:absolute; top:0; opacity:0}
.ambassador_cont .summary{position:relative; opacity:0; width:460px; padding:74px 0 0 120px; }
.ambassador_cont .summary p{color:#767676; font-size:15px; line-height:26px; padding-bottom:25px; position:relative; text-align:center;}
.ambassador_cont .summary p.name{color:#555555; font-size:36px; font-weight:bold; letter-spacing:0.2em; position:relative; padding-top:63px; margin-top:32px}
.ambassador_cont .summary p.name:after{content:''; width:40px; height:1px; background-color:#e1e1e1; position:absolute; left:50%; top:0; margin-left:-20px;}

.ambassador_cont.left .photo{right:50%;}
.ambassador_cont.left .photo img{right:-100px;}
.ambassador_cont.left .summary{left:50%; margin-left:100px;}

.ambassador_cont.right .photo{left:50%;}
.ambassador_cont.right .photo img{left:-100px;}
.ambassador_cont.right .summary{left:50%; margin-left:-800px;}


/*플레이존*/
.play_zone .play_zone_top{min-width:980px; height:335px; padding-top:175px; background:url('../images/brand/bg_play_zone.jpg') no-repeat top center; margin-bottom:70px;}
.play_zone .play_zone_top .cont {margin:0 auto; width:340px; height:160px; text-align:center;}
.play_zone .play_zone_top .cont > *{opacity:0;}
.play_zone .play_zone_top .cont span{display:block; font-size:20px; color:#bda691; font-weight:bold; padding-top:95px;}
.play_zone .play_zone_top .cont strong{display:block; position:relative; font-size:50px; line-height:160px; color:#fff}
.play_zone .play_zone_top .cont p{margin-top:110px; line-height:22px; font-size:12px; color:#b9b9b9; letter-spacing:0.3em; font-weight:bold;}
.play_zone .play_zone_cont .cont{position:relative; background:#fafafa; height:540px; overflow:hidden;}
.play_zone .play_zone_cont .cont .visual{position:absolute; left:0; height:540px; opacity:0;}
.play_zone .play_zone_cont .cont .visual img{position:relative; top:0; opacity:0; left:-100px;}
.play_zone .play_zone_cont .cont .desc{margin-left:-100px; padding-left:1000px; opacity:0;}
.play_zone .play_zone_cont .cont .desc strong{display:block; font-size:28px; line-height:40px; margin:93px 0 25px;}
.play_zone .play_zone_cont .cont .desc p{font-size:15px; color:#767676; line-height:30px;}
.play_zone .play_zone_cont .cont + .cont{margin-top:40px;}
.play_zone .btn_set{margin-top:70px;}
.play_zone .btn_set .btn-type01.w_l em{padding:0 54px;}

@media (max-width:1460px){
.play_zone .play_zone_cont .cont{background:#fafafa; height:347px; overflow:hidden;}
.play_zone .play_zone_cont .cont .visual{position:absolute; height:347px; opacity:0; overflow:hidden;}
.play_zone .play_zone_cont .cont .visual img{position:relative; top:0; opacity:0; height:100%;}
.play_zone .play_zone_cont .cont .desc{margin-left:-50px; padding-left:645px; opacity:0;} 
.play_zone .play_zone_cont .cont .desc strong{display:block; font-size:28px; line-height:40px; margin:56px 0 15px;}
}


/* --- BRAND :: Brand Story --- */
#brand_story_wrap{overflow:hidden; position:relative; left:0; top:0; height:100%; z-index:9; background-color:#fff}
#brand_story_wrap .scroll_down{background:url(../images/brand/txt_scroll.png) 0 0 no-repeat; width:45px; height:15px; position:absolute; left:50%; bottom:0px; padding-bottom:70px; margin-left:-23px; z-index:9}
#brand_story_wrap .scroll_down:after{content:''; position:absolute; left:50%; bottom:0; height:50px; background-color:#fff; width:1px; opacity:0.5}
#brand_story_wrap ul.brand_story_cont{position:relative; height:100%; overflow:hidden; z-index:3;}
#brand_story_wrap ul.brand_story_cont >li{position:absolute; overflow:hidden; height:100%; width:100%; left:0; top:100%; z-index:1;}
#brand_story_wrap ul.brand_story_cont >li .cont{height:100%; position:relative; left:0; top:0%;}
#brand_story_wrap ul.brand_story_cont >li .cont .bg{height:100%; width:100%; position:absolute; left:0%; top:0%; z-index:1; transition-delay:0.5s; transition-duration:3s; transition-timing-function: ease-out;}
#brand_story_wrap ul.brand_story_cont >li .cont .sub_tit{position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; z-index:2; color:#fff; font-size:50px; line-height:70px; font-weight:normal; display:table;}
#brand_story_wrap ul.brand_story_cont >li .cont .sub_tit p{display:table-cell; vertical-align:middle;}
#brand_story_wrap ul.brand_story_cont >li .cont .sub_tit p span{opacity:0; top:0; position:relative; left:25px; overflow:hidden; z-index:1;}
#brand_story_wrap ul.brand_story_cont >li .cont .sub_summary{width:1400px; position:absolute; left:50%; margin-left:-700px; bottom:112px; z-index:2; color:#fff; font-size:25px; font-weight:bold; line-height:40px; overflow:hidden; opacity:0}

#brand_story_wrap ul.brand_story_cont >li.active{z-index:9}
#brand_story_wrap ul.brand_story_cont >li.active .cont .bg{left:0; top:0; width:100%; height:100%;}

#brand_story_wrap ul.brand_story_cont >li.section0{top:0;}
#brand_story_wrap ul.brand_story_cont >li.section0 .bg >div{z-index:1 !important;}
#brand_story_wrap ul.brand_story_cont >li.section1 .bg{background: url(../images/brand/bg_brand_story01.jpg) 50% 0 no-repeat; background-size:cover;}
#brand_story_wrap ul.brand_story_cont >li.section2 .bg{background: url(../images/brand/bg_brand_story02.jpg) 50% 0 no-repeat; background-size:cover;}
#brand_story_wrap ul.brand_story_cont >li.section3 .bg{background: url(../images/brand/bg_brand_story03.jpg) 50% 0 no-repeat; background-size:cover;}
#brand_story_wrap ul.brand_story_cont >li.section4 .bg{background: url(../images/brand/bg_brand_story04.jpg) 50% 0 no-repeat; background-size:cover;}

#brand_story_wrap .pagination{position:fixed; top:50%; right:70px; margin-top:-42px; z-index:9;}
#brand_story_wrap .pagination ul li{background:url(../images/brand/icon_pagination.png) 0 3px no-repeat; width:9px; height:38px; margin-bottom:7px; padding-top:3px; position:relative; cursor:pointer;}
#brand_story_wrap .pagination ul li:last-child{height:9px;}
#brand_story_wrap .pagination .dot{background-color:#bda691; width:15px; height:15px; border-radius:50px; position:absolute; left:-3px; top:0;}

/* --- BRAND :: 아이크림존 --- */
#eyecream_zone_wrap .section_content{position:relative;}
#eyecream_zone_wrap .section_content .inner{position:relative; height:100%}
#eyecream_zone_wrap .section_content:before{content:''; width:1px; height:100px; position:absolute; left:50%; top:0;  background-color:#cccccc;z-index:1;}/*2019-02-07*/
#eyecream_zone_wrap #section01{background:url(../images/brand/img_ez_section01_bg.jpg) 0 0 repeat-x; height:1166px; text-align:center;}
#eyecream_zone_wrap #section01:after{content:''; width:1px; height:70px; position:absolute; left:50%; bottom:0;  background-color:#cccccc}/*2019-02-07*/
#eyecream_zone_wrap #section01 h2.subtitle{font-size:35px; color:#555555; line-height:48px; font-weight:bold; position:relative; padding-top:151px;  padding-bottom:25px; margin-bottom:24px; top:70px; opacity:0}
#eyecream_zone_wrap #section01 h2.subtitle:before{content:''; position:absolute; left:50%; bottom:0; width:30px; height:1px; margin-left:-15px; background-color:#cccccc;}
#eyecream_zone_wrap #section01 .pd_name{color:#bda691; font-size:20px; font-weight:bold; position:relative; top:70px; opacity:0}
#eyecream_zone_wrap #section01 .pd{margin-top:39px; position:relative; top:0px; opacity:0}
#eyecream_zone_wrap #section01 .pd img{position:relative; left:23px;}
#eyecream_zone_wrap #section01 .summary{color:#767676l; font-size:15px; line-height:30px; position:relative; margin-top:17px; padding-bottom:23px;}
#eyecream_zone_wrap #section01 .summary:before{content:''; position:absolute; left:50%; bottom:0; width:30px; height:1px; margin-left:-15px; background-color:#cccccc;}

#eyecream_zone_wrap #section02{height:881px; background:url(../images/brand/img_ez_section02_bg1.jpg) 50% 0 no-repeat;}/* 2019-02-08 */
#eyecream_zone_wrap #section02 .pd_list{position:absolute; left:19px; bottom:59px; right:0; overflow:hidden; opacity:0;width:1020px;margin:0 auto;text-align: center;}/* 2019-02-8 */
#eyecream_zone_wrap #section02 .pd_list li{display:inline-block;position:relative; opacity:0; top:0;}/* 2019-02-08 */
#eyecream_zone_wrap #section02 .pd_list li.p01{left:0;}/* 2017-12-21 */
#eyecream_zone_wrap #section02 .pd_list li.p02{left:0}/* 2017-12-21 */
#eyecream_zone_wrap #section02 .pd_list li.p03{left:0;}/* 2017-12-21 */
#eyecream_zone_wrap #section02 .pd_list li.p04{left:0}/* 2017-12-21 */
#eyecream_zone_wrap #section02 .pd_list li.p05{left:0;}/* 2017-12-21 */
#eyecream_zone_wrap #section02 .pd_list li.p06{left:0;}/* 2017-12-21 */
#eyecream_zone_wrap #section02 .pd_list li.p07{left:0;}/* 2019-02-07 */
#eyecream_zone_wrap #section02 .pd_list li+li {margin-left:5px;}/* 2019-02-08 */
#eyecream_zone_wrap #section02 .summary{background-color:#fff; width:1020px; height:287px; position:absolute; left:190px; top:80px;}/* 2019-02-08 */
#eyecream_zone_wrap #section02 .summary:before {content:'';display:inline-block;vertical-align: middle;}/* 2019-02-08 */
#eyecream_zone_wrap #section02 .summary .ct{position:relative;top:-100px;opacity: 0;text-align: center;vertical-align: middle;display:inline-block;}/* 2019-02-08 */
#eyecream_zone_wrap #section02 .summary .ct:before {content:'';width:1020px;margin:0 auto;display:inline-block;}/* 2019-02-08 */
#eyecream_zone_wrap #section02 .summary h2{color:#555555; font-size:35px; font-weight:bold;}
#eyecream_zone_wrap #section02 .summary p{color:#767676; font-size:15px; line-height:30px; position:relative;padding-top:23px}/* 2019-02-07 */
#eyecream_zone_wrap #section02 .summary p:before{content:''; background-color:#cccccc; width:30px; height:1px; display:block;margin:0 auto 23px;}/*2019-02-07*/

#eyecream_zone_wrap #section03 {/*height:1082px;*/height:1120px; text-align:center;}/* 2019-04-04 수정 */
#eyecream_zone_wrap #section03:after{content:''; width:1px; height:40px; position:absolute; left:50%; bottom:0;  background-color:#cccccc}
#eyecream_zone_wrap #section03 .hd{padding-top:148px;}
#eyecream_zone_wrap #section03 .hd h2{color:#555555; font-size:35px; opacity:0}
#eyecream_zone_wrap #section03 .hd p{color:#767676; font-size:15px; position:relative; margin-top:22px; line-height:30px; padding-top:23px; opacity:0}
#eyecream_zone_wrap #section03 .hd p:before{content:''; background-color:#cccccc; width:30px; height:1px; position:absolute; left:50%; top:0; margin-left:-15px;}
#eyecream_zone_wrap #section03 .research{background-color:#fafafa; height:448px; padding:72px 70px 0 70px; margin-top:62px; opacity:0; position:relative; top:50px;}
#eyecream_zone_wrap #section03 .research .ct{position:relative; margin-top:98px;}
#eyecream_zone_wrap #section03 .research .ct:first-child{margin-top:0}
#eyecream_zone_wrap #section03 .research .ct h3{text-align:left; color:#555555; font-size:20px; font-weight:bold; margin-left:-2px;}
#eyecream_zone_wrap #section03 .research .ct p{text-align:left; color:#767676; font-size:15px; line-height:30px; margin-top:6px;}
#eyecream_zone_wrap #section03 .research .ct .research_res{position:absolute; right:0px; top:2px; overflow:hidden;}
#eyecream_zone_wrap #section03 .research .ct .research_res dl{width:320px; float:left; text-align:left; margin-left:61px;}
#eyecream_zone_wrap #section03 .research .ct .research_res dl.type2{margin-right:380px;}/* 2017-12-26 */
#eyecream_zone_wrap #section03 .research .ct .research_res dl dt{position:relative; color:#555555; font-size:18px; font-weight:bold; padding-bottom:17px;}
#eyecream_zone_wrap #section03 .research .ct .research_res dl dt:after{content:''; background-color:#cccccc; height:1px; width:100%; position:absolute; left:0; bottom:0;}
#eyecream_zone_wrap #section03 .research .ct .research_res dl dd{color:#bda691; font-weight:bold; font-size:60px; line-height:100%; padding:21px 0 0 0; letter-spacing:-0.05em; margin-left:-2px; height:98px;}
#eyecream_zone_wrap #section03 .research .ct .research_res dl dd em{font-size:80px;  font-weight:bold;}
#eyecream_zone_wrap #section03 .agency{font-size:13px; color:#aeaeae; line-height:23px; margin-top:24px;}

#eyecream_zone_wrap #section04{height:900px; background-color:#fdf8ef; text-align:center;}
#eyecream_zone_wrap #section04 .subtitle{color:#555555; font-size:35px; font-weight:bold; padding-top:148px; opacity:0}
#eyecream_zone_wrap #section04 .pd_list{overflow:hidden; width:1400px; margin:0 auto; padding-top:41px} /* 2017-12-21 */
#eyecream_zone_wrap #section04 .pd_list li{width:200px; height:550px; float:left; position:relative; cursor:pointer; opacity:0; top:30px}
#eyecream_zone_wrap #section04 .pd_list li .img{width:100%;margin-left:-40px;}/* 2017-12-21 */
#eyecream_zone_wrap #section04 .pd_list li .pd_name{color:#555555; font-size:18px; line-height:24px; position:absolute; left:0; width:100%; bottom:52px}
#eyecream_zone_wrap #section04 .pd_list li .over{position:absolute; left:0; right:0; top:0; bottom:0; border:4px solid #d8c1ac; background-color:rgba(255, 255, 255, 0.8); opacity:0; transition-duration:0.5s;}
#eyecream_zone_wrap #section04 .pd_list li .over p.summary{color:#555555; font-size:15px; text-align:center; line-height:30px; padding-top:191px;}
#eyecream_zone_wrap #section04 .pd_list li .over a{color:#555555; font-size:13px; display:block; border:1px solid #9a9a9a; width:78px; height:27px; line-height:27px; position:absolute; left:50%; top:350px; margin-left:-39px}
#eyecream_zone_wrap #section04 .pd_list li.hover .over{opacity:1}

#eyecream_zone_wrap #section05{text-align:center; margin-bottom:100px; overflow:hidden;}
#eyecream_zone_wrap #section05 .subtitle{color:#555555; font-size:35px; font-weight:bold; padding-top:148px;}
#eyecream_zone_wrap #section05 .visual{width:700px; height:1034px; overflow:hidden; position:relative;  margin:72px 0 0 0; float:left; background-color:#fdf8ef;}
#eyecream_zone_wrap #section05 .award{float:left; margin:91px 0 0 35px;}
#eyecream_zone_wrap #section05 .award h3{text-align:center; font-size:26px; color:#555555; font-weight:bold; position:relative; padding-bottom:19px;}
#eyecream_zone_wrap #section05 .award h3:after{content:''; background-color:#cccccc; width:30px; height:1px; position:absolute; bottom:0; left:50%; margin-left:-15px;}
#eyecream_zone_wrap #section05 .award strong{display:block; color:#555555; font-size:20px; font-weight:bold;}
#eyecream_zone_wrap #section05 .award p{color:#767676; font-size:13px; line-height:20px; margin-top:9px;}
#eyecream_zone_wrap #section05 .award ul{overflow:hidden; width:611px; margin-top:33px;}
#eyecream_zone_wrap #section05 .award li{float:left; width:50%; margin-bottom:40px;}
#eyecream_zone_wrap #section05 .award .line1 .logo{height:84px; margin-bottom:13px;}
#eyecream_zone_wrap #section05 .award .line2 .logo{height:100px; margin-bottom:26px;}
#eyecream_zone_wrap #section05 .award .line3{margin-bottom:41px; height:200px;}
#eyecream_zone_wrap #section05 .award .line3 .logo{height:86px; margin-bottom:37px;}

#eyecream_zone_wrap .pagination{position:fixed; top:50%; right:70px; margin-top:-42px; z-index:9;}
#eyecream_zone_wrap .pagination ul li{background:url(../images/brand/icon_pagination_bk.png) 100% 3px no-repeat; width:9px; height:38px; margin-bottom:7px; padding-top:3px; position:relative; cursor:pointer;}
#eyecream_zone_wrap .pagination ul li a{display:block; height:30px; overflow:hidden; text-indent:-9999px; font-size:0;}
#eyecream_zone_wrap .pagination ul li:last-child{height:9px;}
#eyecream_zone_wrap .pagination .dot{background-color:#bda691; width:15px; height:15px; border-radius:50px; position:absolute; left:-3px; top:0;}
#eyecream_zone_wrap .pagination .page_tit{position:absolute; right:18px; top:0; margin-top:-5px; height:23px; padding-right:4px;}
#eyecream_zone_wrap .pagination .page_tit .ct{position:relative; top:0;}
#eyecream_zone_wrap .pagination .page_tit .wrap{position:relative; background-color:#bda691; height:23px; overflow:hidden;}
#eyecream_zone_wrap .pagination .page_tit:after{content:''; background:url(../images/brand/icon_pagination01.gif) 0 0 no-repeat; position:absolute; right:0; top:50%; width:4px; height:7px; margin-top:-4px;}
#eyecream_zone_wrap .pagination .page_tit span{display:block; float:left; height:23px; line-height:23px; background-color:#bda691; color:#fff; font-size:14px; padding:0 10px; white-space: nowrap;}


/* CSR */
.csr #sub_section{padding-bottom:0;}
.csr .summary{border:7px solid #f3f3f3; margin-bottom:70px; text-align:center; background:url('../images/brand/bg_csr01.png') no-repeat center 20px;}
.csr .summary h2{color:#767676; font-size:22px; font-weight:bold; position:relative; height:126px;}
.csr .summary h2 span{display:none;}
.csr .summary h2:before{content:''; position:absolute; left:50%; bottom:0; height:1px; background-color:#e9ebea; width:60px; margin-left:-30px;}
.csr .summary p{line-height:25px; color:#767676; font-size:15px; margin:35px 0 30px;}

.csr_cont{padding-bottom:120px;}
.csr .cont{position:relative; height:440px; overflow:hidden;}
.csr .cont .visual{position:absolute; right:48.6%; width:620px; height:440px; opacity:0;}
.csr .cont .visual img{position:relative; top:0; opacity:0; right:-100px;}
.csr .cont .desc{position:relative; left:51.4%; width:680px; margin-left:100px; opacity:0; text-align:center;}
.csr .cont .desc strong{display:block; font-size:40px; line-height:40px; margin:105px 0 38px;}
.csr .cont .desc p{font-size:16px; color:#767676; line-height:40px;}
.csr .cont + .cont{margin-top:70px;}
.csr .cont.left .visual{left:48.6%;}
.csr .cont.left .visual img{left:-100px;}
.csr .cont.left .desc{left:0; margin-left:-100px;}

@media (max-width:1460px){
.csr .cont{height:367px;}
.csr .cont .visual{right:38.8%; width:520px; height:367px;}
.csr .cont .visual img{right:-50px; width:100%;}
.csr .cont .desc{left:61.2%; width:380px; margin-left:50px;}
.csr .cont .desc strong{margin:65px 0 38px;}
.csr .cont.left .visual{left:38.8%; }
.csr .cont.left .visual img{left:-50px;}
.csr .cont.left .desc{left:0; margin-left:-50px;}
}

.csr_gallery{position:relative; width:100%; min-width:980px; overflow:hidden; background:#fafafa; padding:70px 0 95px; text-align:center;}
.csr_gallery h2{font-size:35px; letter-spacing:-0.02em;}
.csr_gallery p{font-size:15px; color:#767676; margin:25px 0 55px;}
.csr_gallery .slider{position:relative;}
.csr_gallery .slick-slider{margin-bottom:0;}
.csr_gallery .slick-slide{margin:0px 25px; width:920px; height:530px;}
.csr_gallery .slick-slide{opacity:0.3;  transition-duration:0.3s;}
.csr_gallery .slick-center{opacity:1;}
.csr_gallery .slick-prev, .csr_gallery .slick-next{position: absolute; display:block; height:90px; width:51px; cursor:pointer; background:url('../images/brand/c_slider_arrow.png') no-repeat; top: 50%; margin-top:-45px; z-index:10; line-height:0; font-size:0;}
.csr_gallery .slick-prev {left:0px; background-position:left 0;}
.csr_gallery .slick-next {right:0px; background-position:right 0;}