/* override */
#header .inner_wrap{background: transparent;transition: transform 0.5s ease-out, background-color 0.4s ease-out;}
#header.hover .inner_wrap{transition: background-color 0.25s ease-out;}
#header .logo a{background-image: url(../images/common/cj_logo2.svg)}
#header .util_top .go_lang{color: #fff}
#header .util_top .arrow{background-image: url(../images/common/icon_lang_arrow_white@2x.png)}
#header .util_top .open .arrow{background-image: url(../images/common/icon_lang_arrow@2x.png)}
#header .inner_wrap:before{opacity: 0;}
#header{z-index: 1;}
#header.hover,#header.white,#header.simple{z-index: 999;}
#header.keyvisual::before{content: '';    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 224px;
    background: url(../images/index/keyvisual_dim.png) repeat-x;
    background-size: 1px;}
#gnb .gnb_menu > ul > li a{color: #fff}
#gnb .gnb_menu .sep:after{border-color: #fff;opacity: 0.4;}
.btn_search {background-image: url(../images/common/icon_gnb_search@2x.png);}
.hidden{border: 0;clip: rect(0 0 0 0);clip-path: inset(50%); width: 1px;height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;}

#container.main .container_wrap{overflow: hidden;min-width: 1000px;padding-top: 0;}
#container.main .section{position: relative;background-color: #fff;clear: both;}
#container.main .section .inner{position: relative; max-width: 1100px;margin: 0 auto;padding: 140px 0;}
#container.main .section .title_area{position: relative;padding-bottom: 20px;}
#container.main .section .title_area h3{position: relative;z-index: 1;  font-size: 42px;font-weight: 600;line-height: normal;/*letter-spacing: -0.95px;*/color: #000;will-change: transform;}
#container.main .section .title_area p{ font-size: 20px;font-weight: 300;line-height: 2;/*letter-spacing: normal;*/color: #000; }
#container.main .section .title_area h2{ font-size: 20px;font-weight: 300;line-height: 2;/*letter-spacing: normal;*/color: #000; }
#container.main .section .title_area h3 span{display: inline-block;transform: translateY(75px);opacity: 0;transition: all 0.6s ease-out;}
#container.main .section .title_area p span{display: inline-block;transform: translateY(75px);opacity: 0;transition: all 0.6s ease-out}
#container.main .section .title_area.on h3 span{display: inline-block;transform: translateY(0);opacity: 1;}
#container.main .section .title_area.on p span{display: inline-block;transform: translateY(0);opacity: 1;}
#container.main .section .title_area.on  a.btn_more{transform: translateY(0);opacity: 1;}
#container.main .section .title_area p.on span{display: inline-block;transform: translateY(0);}
/* #container.main .section .title_area a.btn_more.on{transform: translateY(0);opacity: 1;}
#container.main .section .title_area a.btn_more{transform: translateY(75px);opacity: 0; transition: all 0.6s ease-out;position: absolute;top:25px;right:0;z-index:1;padding-right: 26px;font-size: 16px;font-weight: 400; line-height: 24px;color:#000}
#container.main .section .title_area a.btn_more:after{content: '';position: absolute;right: 0;top:0px; width: 24px;height: 24px; background: url(../images/index/ico_more@2x.png)  0 0 no-repeat; background-size:100%;;}
#container.main .section .title_area a.btn_more:hover{text-decoration: underline;text-decoration-thickness: from-font;} */
#container.main .section .inner a.btn_more{transform: translateY(75px);opacity: 0; transition: all 0.6s ease-out;position: absolute;top:25px;right:0;z-index:1;padding-right: 26px;font-size: 16px;font-weight: 400; line-height: 24px;color:#000}
#container.main .section .inner a.btn_more.on{transform: translateY(0);opacity: 1;}
#container.main .section .inner a.btn_more:after{content: '';position: absolute;right: 0;top:0px; width: 24px;height: 24px; background: url(../images/index/ico_more@2x.png)  0 0 no-repeat; background-size:100%;;}
#container.main .section .inner a.btn_more:hover{text-decoration: underline;text-decoration-thickness: from-font;}
#container.main .section.csv .title_area ~ a.btn_more{transform: translateY(190px);opacity: 1; transition: all 0.6s ease-out;position: absolute;top:0x;right:0;z-index:1;padding-right: 26px;font-size: 16px;font-weight: 400; line-height: 24px;color:#000}
#container.main .section.csv .title_area.on ~ a.btn_more{transform: translateY(130px);opacity: 1;}
#container.main .section.csv .title_area.on ~ a.btn_more:after{content: '';position: absolute;right: 0;top:0px; width: 24px;height: 24px; background: url(../images/index/ico_more@2x.png)  0 0 no-repeat; background-size:100%;;}
#container.main .section.csv .title_area.on ~ a.btn_more:hover{text-decoration: underline;text-decoration-thickness: from-font;}

#container.main .section ul.list_type1{position: relative; margin-left: -40px;margin-top: -40px;}
#container.main .section ul.list_type1:after{content: '';display: block;clear: both;}
#container.main .section ul.list_type1 li{width: 340px;float: left; margin-left:40px;font-weight:400;margin-top: 40px;}

#container.main .section ul.list_type1 li .thumb_box{position: relative;transform: translateY(80px);opacity:0;transition: all 0.6s ease-out;}
#container.main .section ul.list_type1 li .thumb_box.on{transform: translateY(0);opacity:1}
#container.main .section ul.list_type1 li .thumb_box a .img_box{position: relative; overflow: hidden;}

#container.main .section ul.list_type1 li .thumb_box a .img_box img{transition: transform 0.3s ease 0s, opacity 0.1s linear 0s;width: 100%;}
#container.main .section ul.list_type1 li .thumb_box a:hover .img_box img{transform: scale(1.1) rotate(.001deg);}
#container.main .section ul.list_type1 li .thumb_box .list_title{font-size: 18px;line-height: 1.56;color: #000000; margin: 14px 0;    text-overflow: ellipsis; max-height: 55px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap: break-word;}
#container.main .section ul.list_type1 li.white .thumb_box .list_title{color:#fff;}
#container.main .section ul.list_type1 li .thumb_box .hashtag_area{height: 32px;overflow: hidden;}

#container.main .section .circle_timer{position: absolute;right:58px;bottom:58px;width: 64px;height: 64px;}
#container.main .section .circle_timer path{stroke-dasharray: 0, 182.278;}
#container.main .section .circle_timer.is_play i img{margin-top: -25px;}
#container.main .section .circle_timer i{width: 25px;height: 25px;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%); overflow: hidden;display: block;}
#container.main .section .circle_timer i img{width: 25px;}


#container.main .key_visual{height: 100vh;}
#container.main .key_visual .topslide{position: fixed;top:0;width: 100%; height: 100vh;min-width: 1000px;z-index: 0;}
#container.main .key_visual .topslide > ul > li{position: absolute;top:0;left:0;right:0;bottom:0;opacity: 0;visibility: hidden;transition: all 0.5s ease-out;}
#container.main .key_visual .topslide > ul > li video{min-width:100%;min-height:100%;position: absolute;transform:translate3d(0, 0, 0)}
#container.main .key_visual .topslide > ul > li.active{opacity: 1;visibility: visible;}
#container.main .key_visual .indicator{transition: opacity 0.7s;position: absolute;left:0;right:0;bottom:88px;text-align: center;}
#container.main .key_visual .indicator ul{margin: 0 auto;font-size: 0;}
#container.main .key_visual .indicator ul li{display: inline-block;vertical-align: top;margin: 0 4px; }
#container.main .key_visual .indicator ul li.active a{background-color: #fff;width:48px}
#container.main .key_visual .indicator ul li a{text-indent: -9999em;color: transparent;display: block;width: 14px;height: 7px;border:2px solid #fff;border-top-left-radius: 5px;border-bottom-right-radius: 5px;box-sizing: border-box;overflow: hidden;transition: all 0.3s ease-out;}
#container.main .key_visual .circle_timer{opacity: 0;transition: opacity 0.7s;}
#container.main .key_visual .topslide > ul > li .text_area{position: absolute;bottom:156px;left:50%;margin-left:-535px;max-width: 1090px;}
#container.main .key_visual .topslide > ul > li .text_area h2{font-size: 52px;font-weight: 600;line-height: normal; color:#000;}
#container.main .key_visual .topslide > ul > li .text_area p{font-size: 22px;font-weight: 300;line-height: 1.38;color:#000;margin-top: 27px}
#container.main .key_visual .topslide > ul > li .text_area h2{transform: translateY(120px);opacity: 0;}
#container.main .key_visual .topslide > ul > li .text_area p{transform: translateY(90px);opacity: 0;}
#container.main .key_visual .topslide > ul > li .text_area .btn{transform: translateY(85px); opacity: 0;border-color: rgba(0,0,0,0.8);color:#000;margin-top: 50px;}
#container.main .key_visual .topslide > ul > li .text_area .btn:hover{border-color:rgba(0,0,0,0.8); background-color: rgba(0, 0, 0, 0.2);}
#container.main .key_visual .topslide > ul > li .text_area.active h2{transform: translateY(0);opacity: 1;transition: transform 0.7s ease-out,opacity 0.7s ease-out;}
#container.main .key_visual .topslide > ul > li .text_area.active p{transform: translateY(0);opacity: 1;transition: transform 0.7s ease-out,opacity 0.7s ease-out;}
#container.main .key_visual .topslide > ul > li .text_area.active .btn{transform: translateY(0);opacity: 1;transition: transform 0.7s ease-out,opacity 0.7s ease-out;}
#container.main .key_visual .topslide > ul > li .text_area.active >*:nth-child(2){transition-delay: 0.2s;}
#container.main .key_visual .topslide > ul > li .text_area.active >*:nth-child(3){transition-delay: 0.3s;}
#container.main .key_visual .topslide > ul > li.white .text_area h2{color:#fff;}
#container.main .key_visual .topslide > ul > li.white .text_area p{color:#fff;}
#container.main .key_visual .topslide > ul > li.white .text_area .btn{color:#fff;border-color: rgba(255,255,255,0.8);}
#container.main .key_visual .topslide > ul > li.white .text_area .btn:hover{border-color:rgba(255,255,255,0.8);background-color: rgba(245, 245, 245, 0.2);}
#container.main .key_visual .dimmed{position: absolute;top:0;left:0;right:0;bottom:0;display: none;background: rgba(0,0,0,0.8);}
#container.main .livenewcj{z-index: 1;overflow: hidden;transform: translate(0,0,0);}
#container.main .livenewcj .inner {padding-top:70px}
#container.main .livenewcj .title_area p{padding-top: 67px;}
#container.main .livenewcj .title_area h2{padding-top: 67px;}
#container.main .livenewcj .title_area h3{position: absolute;}
#container.main .livenewcj .title_area h3 span{opacity: 1;transform: none;}
#container.main .livenewcj .title_area p span{opacity: 1;transform:none}
#container.main .livenewcj .inner a.btn_more{top:-1px;opacity: 1;}
#container.main .livenewcj ul li{position: relative;padding-top: 220px;}
#container.main .livenewcj ul li:first-child{padding-top: 27px;}
#container.main .livenewcj ul li::after{content: '';display: block;clear: both;}
#container.main .livenewcj .content__list li a{display: block;}
#container.main .livenewcj .content__list button{margin-left: 140px;}
#container.main .livenewcj .img_area{position: relative; float: left;padding:0 80px 50px 0;}
#container.main .livenewcj .img_area .video{transform: translate3d(0, 0, 0);position: relative;display: block; width: 340px;height: 524px; border-top-left-radius: 30px;border-bottom-right-radius: 30px;overflow: hidden;}
#container.main .livenewcj .img_area .video > *{height: 100%;width: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#container.main .livenewcj .img_area .thumb{position: absolute;left:240px;top:334px;overflow: hidden;border-radius: 20px 0 20px 0;}
#container.main .livenewcj .img_area .thumb img{width: 180px;height: 240px;}
#container.main .livenewcj .img_area .sticker{position: absolute;left:240px;top:224px;pointer-events: none;}
#container.main .livenewcj .img_area .sticker img{width: 200px;height: 200px;}
#container.main .livenewcj .text_area{float: left;margin-top: 100px;margin-left: 140px;max-width: 479px;}
#container.main .livenewcj .text_area h4{font-size: 40px;line-height: 1.35;font-weight: 400;/*letter-spacing: normal;*/color:#000;}
#container.main .livenewcj .text_area p{font-size: 18px;line-height: 1.67;font-weight: 300;/*letter-spacing: normal;*/color:#000;padding: 22px 0 37px;}
#container.main .livenewcj .text_area h4{transform: translateY(200px);opacity:0;transition: transform 0.7s ease-out,opacity 0.7s ease-out;}
#container.main .livenewcj .text_area p{transform: translateY(200px);opacity:0;transition: transform 0.7s ease-out 0.1s,opacity 0.7s ease-out 0.1s;}
#container.main .livenewcj .text_area .btn{transform: translateY(200px);opacity:0;transition: transform 0.7s ease-out 0.2s,opacity 0.7s ease-out 0.2s;}
#container.main .livenewcj .text_area.on h4{transform: translateY(0);opacity:1}
#container.main .livenewcj .text_area.on p{transform: translateY(0);opacity:1}
#container.main .livenewcj .text_area.on .btn{transform: translateY(0);opacity:1}
#container.main .livenewcj li:nth-child(even) .img_area{float: right;padding:0 86px 50px 79px;}
#container.main .livenewcj li:nth-child(even) .img_area .thumb{left:0px;bottom:0px;}
#container.main .livenewcj li:nth-child(even) .img_area .sticker{left:-20px;}
#container.main .livenewcj li:nth-child(even) .text_area{margin-left: 0;max-width: 564px;}
#container.main .livenewcj li:nth-child(even) button{margin-left: 0;}

#container.main .cjnow .title_area{padding-bottom: 3px;}
/* #container.main .cjnow .title_area a.btn_more{top:5px;right:-7px;opacity: 1;} */
#container.main .cjnow .inner a.btn_more{top:75px;opacity: 1;}
#container.main .cjnow ul.list_type1 li:nth-child(3) .thumb_box.on{transition-delay: 0.2s;}
#container.main .cjnow ul.list_type1 li:nth-child(4) .thumb_box.on{transition-delay: 0.4s;}
#container.main .cjnow ul.list_type1 li:first-child{width: calc(100% - 40px);}
#container.main .cjnow ul.list_type1 li:first-child .thumb_box a .img_box{height:352px;}
#container.main .cjnow ul.list_type1 li:first-child .thumb_box .text_area{float: left;width: 514px;}
#container.main .cjnow ul.list_type1 li:first-child .thumb_box .text_area .list_title{ font-size: 32px; line-height: 1.41;margin: 78px 0 28px;font-weight: 400;max-height: 142px;-webkit-line-clamp: 3;}
#container.main .cjnow ul.list_type1 li:first-child .thumb_box .img_area{float: right;width: 546px;}
#container.main .cjnow ul.list_type1 li .thumb_box a .img_box{height: 160px;}
#container.main .cjnow ul.list_type1 li[data-img-type="s"] .thumb_box a .img_box,
#container.main .cjnow ul.list_type1 li[data-img-type="s"] .thumb_box a .img_box img{height: 160px;}
#container.main .cjnow ul.list_type1 li[data-img-type="m"] .thumb_box a .img_box,
#container.main .cjnow ul.list_type1 li[data-img-type="m"] .thumb_box a .img_box img{height: 180px;}
#container.main .cjnow ul.list_type1 li[data-img-type="l"] .thumb_box a .img_box,
#container.main .cjnow ul.list_type1 li[data-img-type="l"] .thumb_box a .img_box img{height: 220px;}
#container.main .cjnow ul.list_type1 li[data-img-type="o"] .thumb_box a .img_box,
#container.main .cjnow ul.list_type1 li[data-img-type="o"] .thumb_box a .img_box img{height: 340px;}

#container.main .cjnow ul.list_type1 li .thumb_box a .img_box img{position: absolute;top: 0;left: 0;width: 100%;}
#container.main .cjnow ul.list_type1 li.is_media .thumb_box .img_box:after{content: '';position: absolute;bottom:12px;right:12px; width: 40px;height: 40px; background: url(../images/cjNow/icon_isplay@2x.png) no-repeat center top;background-size: 40px;}

#container.main .bestbrand{text-align: center;background-color: #000;height: 700px;overflow: hidden;}
#container.main .bestbrand video{position: absolute; min-width:100%;min-height:100%;}/*2018-07-*/

#container.main .bestbrand .inner{position: relative;padding: 104px 0 222px;}
#container.main .bestbrand .title_area h3{color:#000; font-size: 36px;line-height: normal;/*letter-spacing: -0.45px;*/}
#container.main .bestbrand .title_area p{color:#000;font-size: 24px;line-height: normal;padding-top: 24px;}

#container.main .bestbrand h4{ transform: translateY(75px); transition: transform 0.6s ease-out;padding: 113px 0 50px;font-size: 58px;font-weight: 400;line-height: 1.1;/*letter-spacing: normal;*/color: #000;}
#container.main .bestbrand h4.on{transform: translateY(0);}
#container.main .bestbrand .btn{transform: translateY(75px); transition: transform 0.6s ease-out;border-color: rgba(0,0,0,0.8);color:#000;}
#container.main .bestbrand .btn.on{transform: translateY(0);}
#container.main .bestbrand .btn:hover{border-color:rgba(0,0,0,0.8); background-color: rgba(0, 0, 0, 0.2);}

#container.main .bestbrand.white .title_area h3{color:#fff}
#container.main .bestbrand.white .title_area p{color:#fff}
#container.main .bestbrand.white h4{color:#fff}
#container.main .bestbrand.white .btn{border-color: #fff;color:#fff}
#container.main .bestbrand.white .btn:hover{border-color:rgba(255,255,255,0.8); background-color: rgba(245, 245, 245, 0.2);}

#container.main .csv .title_area{padding-bottom: 20px;}
#container.main .csv ul.list_type1 li .thumb_box a .img_box img{height: 340px;}
#container.main .csv ul li:nth-child(2) .thumb_box.on{transition-delay: 0.2s;}
#container.main .csv ul li:nth-child(3) .thumb_box.on{transition-delay: 0.4s;}

#container.main .cjlog .inner{padding: 0 0 202px;}
#container.main .cjlog ul.list_type1{margin-top: -50px;display: flex;flex-wrap: wrap;}
#container.main .cjlog ul.list_type1 li{width: 530px;margin-top: 50px;}
#container.main .cjlog ul.list_type1 li .thumb_box a .img_box img{height: 282px;}
#container.main .cjlog ul li:nth-child(even) .thumb_box.on{transition-delay: 0.1s;}

body.inmotion #container.main .key_visual .indicator{opacity: 1;}
body.inmotion #container.main .key_visual .circle_timer{opacity: 1;}


#contents{min-width:1000px;}
#container{height: 100%; margin-top: 0;overflow: visible;}

.popup_wrapper{background: rgba(0,0,0,0.95);}
@media screen and (max-width: 1200px) {
    #container.main .section .inner{max-width: 960px}
	#container.main .livenewcj .text_area{margin-left: 100px;}
	#container.main .section ul.list_type1{margin-left: -21px;}
	#container.main .section ul.list_type1 li{width: 307px;margin-left: 20px;}

	#container.main .livenewcj .text_area h4{font-size: 34px;}
	#container.main .livenewcj ul li:first-child{padding-top: 7px;}
	#container.main .livenewcj li:nth-child(even) .img_area{padding-right: 0;}
	#container.main .livenewcj .img_area .video{width: 300px;height: 462px;}
	#container.main .livenewcj .img_area .thumb{width: 160px;height: 214px;top:298px}
	#container.main .livenewcj .img_area .sticker{top:162px}
	#container.main .livenewcj .img_area .thumb img{width: 160px;height: 214px;}

	#container.main .cjlog ul.list_type1 li{width: 470px;}
	#container.main .cjnow ul.list_type1{margin-top: -20px;}
	#container.main .cjnow ul.list_type1 li{margin-top: 20px;}
	#container.main .cjnow ul.list_type1 li:first-child {width: calc(100% - 20px);}
	#container.main .cjnow ul.list_type1 li:first-child .thumb_box .img_area{width: 480px;}
	#container.main .cjnow ul.list_type1 li:first-child .thumb_box .text_area{width: 461px;}
	#container.main .csv ul.list_type1 li .thumb_box a .img_box img{height: 307px;}

	#container.main .cjnow ul.list_type1 li[data-img-type="s"] .thumb_box a .img_box,
	#container.main .cjnow ul.list_type1 li[data-img-type="s"] .thumb_box a .img_box img{height: 145px;}
	#container.main .cjnow ul.list_type1 li[data-img-type="m"] .thumb_box a .img_box,
	#container.main .cjnow ul.list_type1 li[data-img-type="m"] .thumb_box a .img_box img{height: 163px;}
	#container.main .cjnow ul.list_type1 li[data-img-type="l"] .thumb_box a .img_box,
	#container.main .cjnow ul.list_type1 li[data-img-type="l"] .thumb_box a .img_box img{height: 198px;}
	#container.main .cjnow ul.list_type1 li[data-img-type="o"] .thumb_box a .img_box,
	#container.main .cjnow ul.list_type1 li[data-img-type="o"] .thumb_box a .img_box img{height: 307px;}
}


@media screen and (max-width: 320px) {

}