@charset "utf-8";

/*.main #fp-nav {display:none}*/

@media only screen and (min-width:1025px) {
	/*메뉴*/
	.main.fp-viewing-firstPage .navi li a, .main.fp-viewing-3rdPage .navi li a, .main.fp-viewing-3rdPage .navi li:hover a,
	.main.fp-viewing-3rdPage .navi .mu_1.on .tlt a, .main.fp-viewing-4rdPage .navi li a, .main.fp-viewing-4rdPage .navi li:hover a,
	.main.fp-viewing-4rdPage .navi .mu_1.on .tlt a {color:#fff}
	.main.fp-viewing-firstPage .mu_1 .detail_list:before, .main.fp-viewing-3rdPage .mu_1 .detail_list:before, .main.fp-viewing-4rdPage .mu_1 .detail_list:before {background:#fff}

	.main.fp-viewing-firstPage .lj_box li a, .main.fp-viewing-3rdPage .lj_box li a, .main.fp-viewing-4rdPage .lj_box li a {color:#fff}
	
	/*로고*/
	.main.fp-viewing-secondPage #header .logo, .main.fp-viewing-5rdPage #header .logo {background:url(/share/img/inc/logo_g.png) no-repeat 0 0 !important; background-size:100% !important;}
}

/* --------------------------------탑배너-------------------------------- */
.main.fp-viewing-firstPage .top_modal {position:fixed; top:0; left:0; width:100%; text-align:center; padding:10px 0px; font-size:15px; background:#000; color:#fff; z-index:10}
.main.fp-viewing-secondPage .top_modal, .main.fp-viewing-3rdPage .top_modal, .main.fp-viewing-4rdPage .top_modal,
.main.fp-viewing-5rdPage .top_modal{position:absolute; z-index:-1}

@media only screen and (max-width: 768px) {
	.main.fp-viewing-firstPage .top_modal {padding:3vw 0px; font-size:3.6vw;}
}

/* --------------------------------메인비쥬얼-------------------------------- */
/*Primary style*/
.cd-slider img, .cd-slider svg, .cd-slider image {width: 100%; height:100%}

.pc_vs {display:block;}
.mob_vs {display:none}

.pc_vd video {display:block;}
.mob_vd video {display:none}

@media screen and (max-width:768px){
	.pc_vs {display:none;}
	.mob_vs {display:block}

	.pc_vd video {display:none;}
	.mob_vd video {display:block}
}

/* SVG animation style switcher - not needed in production */
.cd-filter {margin-top: 1em;text-align: center;}
.cd-filter li {display: inline-block;}
.cd-filter a {display:block;border-bottom: 2px solid rgba(76, 92, 98, 0);padding: .8em 1em;font-size: 1.2rem;font-weight: bold;text-transform: uppercase;letter-spacing: .1em;color: #4c5c62;}
.no-touch .cd-filter a:hover {border-bottom: 2px solid rgba(76, 92, 98, 0.6);}
.cd-filter a.selected {color: #00A7E1;border-bottom: 2px solid rgba(0, 167, 225, 0.4);}
.no-touch .cd-filter a.selected:hover {border-bottom: 2px solid rgba(0, 167, 225, 0.4);}

@media only screen and (min-width: 768px) {
  .cd-filter {margin-top: 2em;}
}

/*Slider*/
.cd-slider-wrapper {position: relative;width: 100%;margin: 0 auto;
  /* hide horizontal scrollbar on IE11 */
  overflow-x: hidden;
}

.cd-slider > li {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;
  /* hide vertical scrollbar on IE11 */
  overflow: hidden;
}
.cd-slider > li.visible {position: relative; z-index: 2; opacity: 1;}
.cd-slider > li.is-animating {z-index: 3; opacity: 1; animation:on_nextBox 0.6s}
.cd-slider > li.is-animating .img_box {animation:on_nextShow 0.6s}

.cd-slider > li.is-animating-hide {z-index: 3; opacity: 1; animation:on_prevBox 0.6s}
.cd-slider > li.is-animating-hide .img_box {animation:on_prevShow 0.6s}
/* using padding Hack to fix bug on IE - svg height not properly calculated */
.cd-slider .cd-svg-wrapper {height: 100vh;}
.cd-slider-wrapper .img_box {position: absolute; top: 0; left: 0;width:100%; height:100%; background-size:cover !important; background-position:50% 0 !important; background-repeat:no-repeat  !important; z-index:1}

/*Slider navigation */
.cd-slider-navigation {display:none}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.cd-slider-navigation {display:block !important;}}

.cd-slider-navigation + cd-slider-controls:hover, .cd-slider-navigation + main_vs_btn:hover {display:none}
.cd-slider-navigation li {position: absolute;z-index: 3; top: 50%; bottom: auto;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 5%;height: 48px; width: 48px;}
.cd-slider-navigation li a {display: block; height: 100%; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; background: url(/share/img/main/cd-icon-arrows.svg) no-repeat 0 0;  -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s;}
.no-touch .cd-slider-navigation li a:hover { -webkit-transform: scale(1.1);  -moz-transform: scale(1.1); -ms-transform: scale(1.1);  -o-transform: scale(1.1); transform: scale(1.1);}
.cd-slider-navigation li:last-of-type {left: 5%;right: auto;}
.cd-slider-navigation li:last-of-type a {background-position: -48px 0;}

/*Slider dots/controls */
.cd-slider-controls {padding:10px; position: absolute; bottom: 5vh; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 3; text-align: center; width: 90%;}
.cd-slider-controls::after {clear: both; content: ""; display: table;}
.cd-slider-controls li {display: inline-block; margin-right: 10px;}
.cd-slider-controls li:last-of-type {margin-right: 0;}
.cd-slider-controls li.selected a { background-color: #fff;}

/* image replacement */
.cd-slider-controls a {display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; height: 3px; width: 1.875rem; background:rgba(255,255,255,0.3)}
.no-touch .cd-slider-controls a:hover, .cd-slider-controls .selected {background:rgba(255,255,255,1)}

.cd-slider .txtBox {position:absolute; bottom:13vh; left:0%; color:#fff; font-size:16px; text-align:center; display:block; width:100%; z-index:3}
.cd-slider .txtBox .stxt {padding-bottom:1px;}
.cd-slider .txtBox .bigtxt {font-family: 'Now-Regular',sans-serif; font-size:60px; line-height:1.5em;}
.main_vs_btn {padding-top:23px;}
.main_vs_btn a {background:rgba(255,255,255,1); color:#000; font-size:19px; padding:15px 30px; transition:all 0.3s}
.main_vs_btn a:hover {background:rgba(255,255,255,0.7);}

.cd-slider > li.is-animating .txtBox {animation:on_prevShow 0.5s}

/*좌우버튼*/
.cursor_right{
	cursor: url(https://www.zegna.com/etc.clientlibs/zegna-commerce/clientlibs/clientlib-bundle-assets/resources/images/icons/arrow-nextcur.cur),auto;
	cursor: url(https://www.zegna.com/etc.clientlibs/zegna-commerce/clientlibs/clientlib-bundle-assets/resources/images/icons/arrow-next.svg) 25 25,auto;
	cursor: -webkit-image-set(url(https://www.zegna.com/etc.clientlibs/zegna-commerce/clientlibs/clientlib-bundle-assets/resources/images/icons/arrow-next.png) 1x,url(https://www.zegna.com/etc.clientlibs/zegna-commerce/clientlibs/clientlib-bundle-assets/resources/images/icons/arrow-next@2x.png) 2x) 25 25,auto;
}

.cursor_left{
	  cursor: url(https://www.zegna.com/etc.clientlibs/zegna-commerce/clientlibs/clientlib-bundle-assets/resources/images/icons/arrow-prevcur.cur),auto;
    cursor: url(https://www.zegna.com/etc.clientlibs/zegna-commerce/clientlibs/clientlib-bundle-assets/resources/images/icons/arrow-prev.svg) 25 25,auto;
    cursor: -webkit-image-set(url(https://www.zegna.com/etc.clientlibs/zegna-commerce/clientlibs/clientlib-bundle-assets/resources/images/icons/arrow-prev.png) 1x,url(https://www.zegna.com/etc.clientlibs/zegna-commerce/clientlibs/clientlib-bundle-assets/resources/images/icons/arrow-prev@2x.png) 2x) 25 25,auto;
}

@media only screen and (max-width: 768px) {
	.cd-slider .txtBox {font-size:3vw; bottom:23vh}
	.cd-slider .txtBox .stxt {padding-bottom:1px;}
	.cd-slider .txtBox .bigtxt {font-size:10vw;}
	.main_vs_btn {padding-top:3vw;}
	.main_vs_btn a {font-size:3.4vw; padding:2vw 4vw;}
	.main_vs_btn a:hover {background:rgba(255,255,255,1);}

	.cd-slider-controls {bottom:15vh}
}

@media only screen and (max-width: 480px) {
	.cd-slider .txtBox {font-size:3.6vw;}
	.cd-slider .txtBox .bigtxt {font-size:12vw; line-height:1.2em}
	.main_vs_btn {padding-top:4vw;}
	.main_vs_btn a {font-size:4.4vw; padding:2vw 4vw;}

}

/*애니메이션*/
@keyframes on_nextBox{
	0%{transform:translateX(100%);}
	to{transform:translateX(0);}
}
@keyframes on_nextShow{
	0%{transform:translateX(-100%); z-index:2}
	to{transform:translateX(0); z-index:2}
}

@keyframes on_prevBox{
	0%{transform:translateX(-100%);}
	to{transform:translateX(0);}
}
@keyframes on_prevShow{
	0%{transform:translateX(100%);z-index:2}
	to{transform:translateX(0);z-index:2}
}


/* --------------------------------섹션02-------------------------------- */
.main #section1 {background:#e9e7e0;}
.main #section1 .cont {max-width:1080px; margin:0 auto; padding:5vh 0; margin-left:24vw; transition:all 0.3s}
.main #section1 .mtlt {font-size:27px; color:#000; font-family:"Now-Regular"}
.main #section1 .mmt_Box {position:relative; margin-top:4vw; overflow:hidden}

.main #section1 .moment_box {position:relative; opacity:0; width:49%;}
.main #section1 .moment_box .txtBox {position:absolute; left:50%; background:#fff; width:70%; height:223px; color:#000; font-size:16px; z-index:2}
.main #section1 .moment_box_l .txtBox {top:0; transform: translateX(-50%); }
.main #section1 .moment_box_r .txtBox {bottom:-120px; transform: translateX(-64%);}
.main #section1 .moment_box .txt_box {position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; padding:20px; box-sizing:border-box}


.main #section1 .moment_box .txtBox .tlt {font-weight:600}
.main #section1 .moment_box .txtBox .txt:before {content:""; display:block; width:52px; height:1px; background:#000; margin:25px 0 10px 0;}

.main #section1 .moment_box .imgBox img {max-width:100%}

.main #section1 .moment_box_l {float:left; margin-top:30px;}
.main #section1 .moment_box_l .imgBox {padding-top:140px;}
.main #section1 .moment_box_r {float:right;}

.main #section1 .moment_box .pc_bk {display:block}


/*모바일 좌우버튼*/
.main #section1 .mfr_slider .slick-arrow {display:none !important}

/*애니메이션*/
.main #section1.active .moment_box {opacity:1; animation: fade-in-up 0.6s; animation-timing-function: ease-out; animation-fill-mode: both !important;}
.main #section1.active .moment_box_l {animation-delay:0.4s}
.main #section1.active .moment_box_r {animation-delay:0.6s}

@media only screen and (min-width:1921px) {
	.main #section1 .cont {margin-left:30vw;}
}

@media only screen and (max-width:1500px) {
	.main #section1 .cont {margin-left:18%; width:80%}
	.main #section1 .moment_box {width:48%;}
	.main #section1 .moment_box .txtBox {width:80%;} 
	.main #section1 .moment_box_l .txtBox {transform: translateX(-56%);}
	.main #section1 .moment_box_r .txtBox {transform: translateX(-58%);}
}

@media only screen and (max-width:1200px) {
	.main #section1 .moment_box .txtBox {width:84%; height:200px;} 

	.main #section1 .moment_box_l .txtBox {transform: translateX(-55%);}
	.main #section1 .moment_box_r .txtBox {transform: translateX(-58%);}
	
}

@media only screen and (max-width:1024px) {
	.main #section1 .cont {width:96%; margin:0 auto;}
	.main #section1 .moment_box {width:48%;}
	.main #section1 .moment_box .txt_box {padding:20px;}

	.main #section1 .moment_box_l .txtBox, .main #section1 .moment_box_r .txtBox {transform: translateX(-56%);}

	.main #section1 .moment_box .pc_bk {display:inline !important}
}


/*노트북기준*/
@media only screen and (max-height:860px) {
	.main #section1 .cont {padding:10vh 0}
	.main #section1 .mmt_Box {margin-top:3vh}
	.main #section1 .moment_box_l {margin-top:2vh;}
	.main #section1 .moment_box_l .imgBox {padding-top:10vh;}
	.main #section1 .moment_box .imgBox img {max-width:60vh; width:100%}
}

@media only screen and (max-height:800px) and (min-height:700px) {
	.main #section1 .cont {padding:5vh 0;}
	.main #section1 .mmt_Box {margin-top:5vh}
	.main #section1 .moment_box .imgBox img {max-width:55vh; width:100%}

	.main #section1 .moment_box_l .txtBox {transform: translateX(-65%);}
	.main #section1 .moment_box_r .txtBox {transform: translateX(-65%);}
}
/*노트북기준끝*/

@media only screen and (max-width:768px) {
	.main #section1 .cont {width:100%; margin:0 auto; padding:10vw 0}
	.main #section1 .mmt_Box {margin-top:10vw}

	.main #section1 .mtlt {font-size:4.8vw}

	.main #section1 .moment_box {width:100%; margin-bottom:5vw}
	.main #section1 .moment_box .txtBox {width:96%; height:32vw; line-height:1.5em; font-size:3.5vw} 
	.main #section1 .moment_box .txt_box {padding:3vw 5vw;}
	.main #section1 .moment_box_l, .main #section1 .moment_box_r {margin-top:0; float:none}
	
	.main #section1 .moment_box_l .imgBox, .main #section1 .moment_box_r .imgBox {padding-top:12vh; width:100%}
	.main #section1 .moment_box .imgBox img {max-width:100%; width:100%; height:auto !important}
	.main #section1 .moment_box_r .txtBox {top:0}	
	.main #section1 .moment_box .txtBox .txt:before {width:6vw; margin:2.5vw 0 0.5vw 0;}

	.main #section1 .moment_box_l .txtBox, .main #section1 .moment_box_r .txtBox {width:96%; transform: translateX(-50%);}
	.main #section1 .moment_box:first-child {margin-left:-45px}

	/*모바일 아이템*/
	.main #section1 .mfr_slider .item {padding:0 2.5vw}
}


@media only screen and (max-width:480px) {
	.main #section1 .moment_box_l .imgBox, .main #section1 .moment_box_r .imgBox {padding-top:7vh}
}


/* --------------------------------섹션03-------------------------------- */
.main #section2 {background:url(/share/img/main/main_sec03_01_01bg.jpg) no-repeat 50% 0; background-size:cover; color:#fff}
.main #section2 .txtBox {position:absolute; top:60%; left:50%; transform: translate(-50%, -50%);}
.main #section2 .txtBox .tlt {font-family: 'Now-Thin'; margin:0 auto 20px; text-align:center}
.main #section2 .txtBox .tlt p {font-size:125px; width: 0; line-height:1.15em;  white-space: nowrap; overflow: hidden;}
.main #section2 .txtBox .tlt p:nth-child(2) {margin-left:45px;}
.main #section2 .txtBox .txt {font-size:18px; line-height:1.5em; width:100%}
.main #section2 .txtBox .txt:after {content:""; display:block; width:52px; height:1px; background:#fff; margin:28px auto}
.main .msec02_btn a {background:#fff; color:#000; display:inline-block;font-size: 13px; padding: 10px 35px; font-family: 'Now-Regular'; transition: all 0.3s;}

.main #section2.active .txtBox .tlt p {opacity:1;}
.main #section2.active .txtBox .tlt p:nth-child(1) {animation: type 3s steps(60, end) forwards; animation-delay:0.3s !important}
.main #section2.active .txtBox .tlt p:nth-child(2) {animation: type2 3s steps(60, end) forwards; animation-delay:3.3s !important}

@media only screen and (max-width:768px) {
	.main #section2 {background:url(/share/img/main/main_msec03_01_01bg.jpg) no-repeat 50% 0; background-size:cover;}
	
	.main #section2 .txtBox {top:55%;}
	.main #section2 .txtBox .tlt {margin-bottom:3vw}
	.main #section2 .txtBox .tlt p {font-size:15.5vw;}
	.main #section2 .txtBox .tlt p:nth-child(2) {margin-left:5vw;}
	.main #section2 .txtBox .txt {font-size:3.6vw;}
	.main .msec02_btn a {font-size: 3.5vw; padding: 2.2vw 6vw;}
}


@keyframes type {
  0% {width: 0; text-align:center;}
  100% {width: 100%;}
}

@keyframes type2 {
  0% {width: 0; text-align:center;}
  100% {width: 88%;}
}

/* --------------------------------섹션04-------------------------------- */
.main #section3 {background:url(/share/img/main/main_sec04_01_01bg.jpg) no-repeat 50% 0; background-size:cover; color:#313131}
.main #section3 .cont {position:relative; max-width:1230px; margin:0 auto; padding:70px 0; margin-left:19vw; transition:all 0.3s}

.main #section3 .tltBox {font-size:12px; font-family: 'Now-Regular'; margin-bottom:40px;}
.main #section3 .tltBox .tlt {font-size:30px; margin-bottom:10px;}

.main #section3 .instar_ul {overflow:hidden}
.main #section3 .instar_ul li {opacity:0; position:relative; float:left; width:22.5%; margin-right:3%; overflow:hidden}
.main #section3 .instar_ul li:last-child {margin-right:0}
.main #section3 .instar_ul li img {width:100%}

.main #section3 .instar_ul a {position:relative; display:inline-block; color:#fff; transition:all 0.3s}
.main #section3 .instar_ul a:after {opacity:0; background:rgba(0,0,0,0); transition:all 0.3s}
.main #section3 .instar_ul a:hover:after {opacity:1; content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); width:100%; height:100%;}

.main #section3 .txtBox {position:absolute; bottom:-30px; left:0; width:100%; text-align:center; z-index:2; font-size:11px; font-family: 'Now-Thin'; transition:all 0.3s}
.main #section3 .txtBox .icon {position:absolute; right:10px; bottom:0;}
.main #section3 .instar_ul a:hover .txtBox {bottom:10px;}

.main #section3 .msec02_btn {margin-top:50px;}

.main #section3.active .instar_ul li {opacity:1; animation: fanfare2 0.5s; animation-timing-function: ease-out; animation-fill-mode: both !important;}
.main #section3.active .instar_ul li:nth-child(1) {animation-delay:0.6s}
.main #section3.active .instar_ul li:nth-child(2) {animation-delay:0.7s}
.main #section3.active .instar_ul li:nth-child(3) {animation-delay:0.8s}
.main #section3.active .instar_ul li:nth-child(4) {animation-delay:0.9s}

@media only screen and (min-width:1921px) {
	.main #section3 .cont {margin-left:27.5vw;}
}

@media only screen and (max-width:1700px) {
	.main #section3 .cont {max-width:1130px; margin-left:17%;}
}

@media only screen and (max-width:1024px) {
	.main #section3, .main #section3 .fp-tableCell {height:auto !important}
	.main #section3 .cont {max-width:94%; margin:0 auto;}
	.main #section3 .instar_ul li {width:49%; margin:0 2% 2% 0;}
	.main #section3 .instar_ul li:nth-child(2n) {margin-right:0}
	.main #section3 .instar_ul li a, .main #section3 .instar_ul li .imgBox img {width:100%}

	.main #section3 .instar_ul a:after, .main #section3 .instar_ul a:hover:after,.main #section3 .txtBox {display:none}
}

@media only screen and (max-width:768px) {
	.main #section3 .tltBox {font-size:2vw; margin-bottom:8vw;}
	.main #section3 .tltBox .tlt {font-size:6vw; margin-bottom:1vw;}

	.main #section3 .msec02_btn {margin-top:10vw;}
}