@charset "utf-8";
.blue {color:#0253a5;vertical-align: top;}
.red {color:#e13e28;vertical-align: top;}
.resize {-webkit-transform: scale(1.00) rotate(0.01deg) !important;-ms-transform: scale(1.00) rotate(0.01deg) !important;transform: scale(1.00) rotate(0.01deg) !important;}
#mainVisual .auto,
#mainContents .auto {width:1600px;}
/* mainVisual */
.slick-slider,.slick-list,.slick-track,.slick-slide {height:100%;}
#mainVisual {width:100%;position:relative;height:815px; margin-top: /* 180px */130px;}
#mainVisual .auto {height:100%;}
#mainVisual .mask {height:100%;}
#mainVisual .mask ul li {height:100%;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;}
/* #mainVisual .mask ul li.visual01 {background-image:url("../images/main/mainVisual-img01.jpg");}*/
#mainVisual .mask ul li.visual01 {background-image:url("../images/main/mainVisual-img01_1.jpg");}
#mainVisual .mask ul li.visual02 {background-image:url("../images/main/mainVisual-img02.jpg");}
#mainVisual .mask ul li.visual03 {background-image:url("../images/main/mainVisual-img03.jpg");}
.wave {position:absolute;bottom:-100px;left:0;right:0;overflow:hidden;}
.wave img {position:relative;top:0;left:0;max-width:inherit;transition:0.3s;}

#mainVisual .txtBox {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;color:#231f20;padding-bottom:100px;}
#mainVisual .txtBox.color-w {color:#fff;}
#mainVisual .txtBox .txt01 {font-size:64px;line-height:1.2;}
#mainVisual .txtBox .txt02 {font-size:20px;font-weight:300;margin-top:20px;}
#mainVisual .txtBox .btn {margin-top:40px;}
#mainVisual .txtBox .btn a {display:block;width:200px;line-height:46px;border:1px solid #231f20;text-align:center;font-size:18px;color:#231f20;transition:.3s;}
#mainVisual .txtBox .btn a:hover {background:#e21e26;border-color:#e21e26;color:#fff;}
#mainVisual .underline {position:absolute;bottom:0;left:0;width:100%;z-index:4;}
#mainVisual .underline img {vertical-align:bottom;}
#mainVisual .scroll {position:absolute;bottom:50px;left:50%;margin-left:-13px;z-index:1;}
#imgCover {position: absolute;left:0; top:0;width: 100%;height: 100%;background: url("../images/main/imgCover.jpg") 50% 50%;-webkit-background-size: cover;background-size: cover;z-index:1;}

#mainVisual .txtBox .txt02 {opacity:0;transition:1s;position:relative;top:-50px;}
#mainVisual .txtBox .txt03 {opacity:0;transition:1.5s;position:relative;top:50px;}
#mainVisual .mask .slick-dots {text-align:center;position:absolute;bottom:150px;left:0;right:0;z-index:1;}
#mainVisual .mask .slick-dots li {display:inline-block;overflow:hidden;text-indent:-99999px;border-radius:4px;width:8px;height:8px;background:#c2c2c2;margin:0 5px;transition:.3s;}
#mainVisual .mask .slick-dots.color-w li {background:#fff;}
#mainVisual .mask .slick-dots li.slick-active {width:25px;background:#e21e26 !important;}
/* 메인 공통 */
#mainContents {position:relative;overflow:hidden;}
#mainContents .conBox {padding:100px 0;}
#mainContents .title-wrap {text-align:center;margin-bottom:30px;}
#mainContents .title-wrap .en {display:block;font-size:24px;color:#e21e26;font-weight:700;font-family:"Montserrat";}
#mainContents .title-wrap .kr {display:block;font-size:42px;color:#231f20;}
#mainContents .title-wrap .kr strong {font-weight:500;}

.tabContents {position:relative;}
.tabContents > ul > li {position:absolute;top:0;left:0;width:100%;opacity:0;z-index:-1;transition:0.3s;}
.tabContents > ul > li.on {position:relative;z-index:1;opacity:1;}



#mainContents .conBox01,
#mainContents .conBox02,
#mainContents .conBox03 {/* opacity:0;top:50px;transition:0.8s; */}

#mainContents .conBox01.fadeIn,
#mainContents .conBox02.fadeIn,
#mainContents .conBox03.fadeIn {/* top:0; */}

#mainContents .conBox01 {position:relative;}
#mainContents .conBox01 .bg {position:absolute;top:0;left:0;right:0;bottom:0;/* background:url("../images/main/conBox01-bg.png") no-repeat 50%  */90%;opacity:0;transition-duration:1s;transition-delay:.2s;}
#mainContents .conBox01.fade .bg {opacity:1;}
#mainContents .conBox01 ul {}
#mainContents .conBox01 ul li {float:left;width:50%;position:relative;top:0;transition:0.3s all ease-out;}
#mainContents .conBox01 ul li a {display:block;position:relative;}
#mainContents .conBox01 ul li a .txtBox {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(226,30,38,0.85);transition:0.3s all ease-out;opacity:0;}
#mainContents .conBox01 ul li a .txtBox dl {position:absolute;top:50%;left:0;right:0;padding:0 10px;transform:translateY(-50%);color:#fff;text-align:center;}
#mainContents .conBox01 ul li a .txtBox dl dt {font-size:60px;font-family:"Montserrat";}
#mainContents .conBox01 ul li a .txtBox dl dd {font-size:20px;}
#mainContents .conBox01 ul li:hover {top:-20px;}
#mainContents .conBox01 ul li:hover a .txtBox {opacity:1;}

#mainContents .conBox02 .mask-wrap {margin-top:80px;position:relative;}
#mainContents .conBox02 .mask01 {margin:auto;width:680px;height:680px;position:relative;}
#mainContents .conBox02 .mask01 .circle {position:absolute;border:1px solid #e4e4e4;border-radius:50%;top:0;left:0;right:0;bottom:0;animation:circle 1s infinite linear;}
#mainContents .conBox02 .mask01 .circle.circle01 {animation-delay:0.2s;}
#mainContents .conBox02 .mask01 .circle.circle02 {animation-delay:0.4s;}
#mainContents .conBox02 .mask01 .circle.circle03 {animation-delay:0.6s;}
#mainContents .conBox02 .mask01 .circle.circle04 {animation-delay:0.8s;}
#mainContents .conBox02 .mask02 {position:absolute;top:50%;transform:translateY(-50%);left:100px;width:50%;text-align:left;}
#mainContents .conBox02 .mask02 dl dt {font-family:"Montserrat";font-size:40px;color:#231f20;font-weight:700;line-height:1.2;}
#mainContents .conBox02 .mask02 dl dd {font-size:18px;color:#333;margin-top:20px;}
#mainContents .conBox02 .mask02 a {display:block;margin-top:30px;border-radius:30px;border:1px solid #e21e26;font-size:18px;color:#e21e26;line-height:50px;width:180px;text-align:center;}
#mainContents .conBox02 .arrow {position:absolute;top:50%;transform:translateY(-50%);width:80px;height:80px;background-repeat:no-repeat;background-size:cover;transition:.3s;}
#mainContents .conBox02 .arrow.btn-prev {left:-90px;background-image:url("../images/main/btn-prev.png");}
#mainContents .conBox02 .arrow.btn-next {right:-90px;background-image:url("../images/main/btn-next.png");}
#mainContents .conBox02 .arrow.btn-prev:hover {background-image:url("../images/main/btn-prev-on.png");}
#mainContents .conBox02 .arrow.btn-next:hover {background-image:url("../images/main/btn-next-on.png");}
#mainContents .conBox02 .numbering {position:absolute;top:50%;transform:translateY(-50%);right:100px;font-size:40px;color:#bbbdc0;font-weight:700;font-family:"Montserrat";}
#mainContents .conBox02 .numbering .slide-num {color:#231f20;border-bottom:2px solid #231f20;}
#mainContents .conBox02 .numbering .slide-num-max {}

#mainContents .conBox03 {background:#f2f2f2;}
#mainContents .conBox03 .prd-best {position:relative;overflow:hidden;margin:-5px;}
#mainContents .conBox03 .prd-best .con {float:left;width:16.66%;padding-top:16.66%;position:relative;}
#mainContents .conBox03 .prd-best .con .inner {position:absolute;top:5px;left:5px;right:5px;bottom:5px;background:#fff;padding-bottom:20%;overflow:hidden;}
#mainContents .conBox03 .prd-best .con .inner:after {content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid #e21e26;opacity:0;transition:0.3s all ease-out;}
#mainContents .conBox03 .prd-best .con .inner:hover:after {opacity:1;}
#mainContents .conBox03 .prd-best .con .inner .prd-thumb {position:relative;height:100%;text-align:center;overflow:hidden;}
#mainContents .conBox03 .prd-best .con .inner .prd-thumb img {}
#mainContents .conBox03 .prd-best .con .inner .prd-thumb img.front {transition:0.3s all ease-out;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;}
#mainContents .conBox03 .prd-best .con .inner .prd-thumb img.back {position:absolute;top:2px;left:50%;height:100%;opacity:0;z-index:-1;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:0.3s all ease-out;}
#mainContents .conBox03 .prd-best .con .inner .prd-name {position:absolute;bottom:0;left:0;right:0;height:40%;z-index:1;}
#mainContents .conBox03 .prd-best .con .inner .prd-name p {position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;padding:0 20px;text-align:center;font-size:20px;color:#231f20;font-weight:500;}
#mainContents .conBox03 .prd-best .con.con01 {width:33.33%;padding-top:33.33%;}
#mainContents .conBox03 .prd-best .con.con01 .prd-name p {font-size:30px;}
#mainContents .conBox03 .prd-best .con.con05 {width:16.66%;}
#mainContents .conBox03 .prd-best .con.con05 .inner {background:#e21e26;color:#fff;padding:40px 30px;/* background-image:url("../images/main/conBox03-icon01.png"); */background-repeat:no-repeat;background-position:80% 50%;}
#mainContents .conBox03 .prd-best .con.con05 .inner .txtBox {position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;padding:0 30px;}
#mainContents .conBox03 .prd-best .con.con05 .inner .txt01 {font-size:18px;}
#mainContents .conBox03 .prd-best .con.con05 .inner .txt02 {font-size:30px;font-weight:700;line-height:1.2;}
#mainContents .conBox03 .prd-best .con.con05 .inner .arrow {display:block;margin-top:40px;}
#mainContents .conBox03 .prd-best .con.con08 .inner > img {position:absolute;top:0;left:0;width:100%;height:100%;}
#mainContents .conBox03 .prd-best .con.con08 .inner:after {display:none;}
#mainContents .conBox03 .prd-best .con.con08 .inner .hover {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(226,30,38,0.8);color:#fff;transition:0.3s all ease-out;opacity:0;}
#mainContents .conBox03 .prd-best .con.con08 .inner .hover div {position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;text-align:center;font-size:28px;}
#mainContents .conBox03 .prd-best .con.con08 .inner:hover .hover {opacity:1;}
#mainContents .conBox03 .prd-best .btnWrap {display:none;}
.prd-list ul.list li a:hover:after {content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid #e21e26;}
#mainContents .conBox03 .prd-best .con:hover .prd-thumb img.front {transform:rotateY(-180deg);}
#mainContents .conBox03 .prd-best .con:hover .prd-thumb img.back {opacity:1;z-index:1;}

#mainContents .conBox04 .mask {margin:auto;max-width:1200px;}
#mainContents .conBox04 .mask .slick-list {overflow:visible;}
#mainContents .conBox04 .mask ul {margin:-20px;}
#mainContents .conBox04 .mask ul li {float:left;width:33.33%;padding:20px;transform:scaleY(0.95);}
#mainContents .conBox04 .mask ul li.swiper-slide-active {transform:scaleY(1);}
#mainContents .conBox04 .mask ul li a {display:block;background:#fff;box-shadow:0 0 10px 5px rgba(0,0,0,0.1);padding:20px;position:relative;}
#mainContents .conBox04 .mask ul li a:after {content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid #e21e26;opacity:0;transition:0.3s all ease-out;}
#mainContents .conBox04 .mask ul li.swiper-slide-active a:after {opacity:1;}
#mainContents .conBox04 .mask ul li a .thumb {position:relative;padding-top:100%;overflow:hidden;}
#mainContents .conBox04 .mask ul li a .thumb > img {position:absolute;top:0;height:100%;left:50%;transform:translateX(-50%);max-width:inherit;}
#mainContents .conBox04 .mask ul li a .thumb .sns-icon {position:absolute;top:20px;right:20px;}
#mainContents .conBox04 .mask ul li a .txtBox {padding:10px 0;}
#mainContents .conBox04 .mask ul li a .txtBox dl dt,
#mainContents .conBox04 .mask ul li a .txtBox dl dd {line-height:1.4;height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;word-break:break-all;}
#mainContents .conBox04 .mask ul li a .txtBox dl dt {font-size:24px;color:#231f20;font-weight:500;}
#mainContents .conBox04 .mask ul li a .txtBox dl dd {font-size:18px;color:#666;font-weight:300;margin-top:10px;}
#mainContents .conBox04  #custom-handle {left:0;top:3px;background:#222;cursor:pointer;width: 232px;margin-left: -116px;border-radius:10px;height:12px;border:none;outline:none;}
#mainContents .conBox04  .swiper-scrollbar {width:420px;opacity:1 !important;margin:50px auto;height:8px;max-width:100%;}
#mainContents .conBox04  .swiper-scrollbar .swiper-scrollbar-drag {cursor:pointer;background:#e21e26;}




/* fadeIn */
#mainVisual .txtBox .txt01 {

transition-duration:1s;
opacity:0;position:relative;top:30px;transition-delay:0.2s;



}
#mainVisual .txtBox .txt02 {transition-duration:1s;

-ms-opacity:1; 
-moz-opacity:1;
-o-opacity:1;
-webkit-opacity:0;

position:relative;top:30px;transition-delay:0.6s;}
#mainVisual .txtBox .btn {transition-duration:1s;

-ms-opacity:1; 
-moz-opacity:1;
-o-opacity:1;
-webkit-opacity:0;

position:relative;top:30px;transition-delay:1s;}
#mainVisual .fadeIn .txtBox .txt01,
#mainVisual .fadeIn .txtBox .txt02,
#mainVisual .fadeIn .txtBox .btn {opacity:1;top:0;}
.fadeIn {position:relative;top:30px;

-ms-opacity:1; 
-moz-opacity:1;
-o-opacity:1;
-webkit-opacity:0;

}
.fadeInLeft {position:relative;left:-30px;

-ms-opacity:1; 
-moz-opacity:1;
-o-opacity:1;
-webkit-opacity:0;



}
.fadeInRight {position:relative;right:-30px;

-ms-opacity:1; 
-moz-opacity:1;
-o-opacity:1;
-webkit-opacity:0;

}
.fade .fadeIn-01 {transition-duration:1s;opacity:1;top:0;left:0;right:0;bottom:0;transition-delay:0.0s;}
.fade .fadeIn-02 {transition-duration:1s;opacity:1;top:0;left:0;right:0;bottom:0;transition-delay:0.3s;}
.fade .fadeIn-03 {transition-duration:1s;opacity:1;top:0;left:0;right:0;bottom:0;transition-delay:0.6s;}
.fade .fadeIn-04 {transition-duration:1s;opacity:1;top:0;left:0;right:0;bottom:0;transition-delay:0.9s;}
.fade .fadeIn-05 {transition-duration:1s;opacity:1;top:0;left:0;right:0;bottom:0;transition-delay:1.2s;}
.fade .fadeIn-06 {transition-duration:1s;opacity:1;top:0;left:0;right:0;bottom:0;transition-delay:1.5s;}
.title-wrap {

-ms-opacity:1; 
-moz-opacity:1;
-o-opacity:1;
-webkit-opacity:0;

position:relative;top:30px;}



/* 반응형 레이아웃 */
@media all and (max-width:1600px) {
	
}
@media all and (max-width:1200px) {
	#mainVisual .auto,
	#mainContents .auto {width:100%;padding:0 10px;}
	#mainContents .title-wrap .kr {font-size:24px;}

	#mainContents .conBox01 ul li a .txtBox dl dt {font-size:30px;}
	#mainContents .conBox01 ul li a .txtBox dl dd {font-size:16px;}

	#mainContents .conBox02 .mask02 {left:20px;width:100%;}
	#mainContents .conBox02 .numbering {top:auto;right:0;transform:translate(0,0);font-size:30px;bottom:60px;}
	#mainContents .conBox02 .arrow {top:auto;transform:translateY(0);bottom:0;width:50px;height:50px;}
	#mainContents .conBox02 .arrow.btn-prev {left:auto;right:60px;}
	#mainContents .conBox02 .arrow.btn-next {right:0;}
	
	#mainContents .conBox03 .prd-best .con .inner .prd-name p {font-size:16px;}
	#mainContents .conBox03 .prd-best .con.con01 .prd-name p {font-size:20px;}
	#mainContents .conBox03 .prd-best .con.con04 .inner .arrow {display:none;}

	#mainContents .conBox03 .prd-best .con.con04 .inner {background-size:24%;background-position:90% 50%;}
	#mainContents .conBox03 .prd-best .con.con04 .inner .txtBox {padding:0 10px;}
	#mainContents .conBox03 .prd-best .con.con04 .inner .txt01 {font-size:16px;}
	#mainContents .conBox03 .prd-best .con.con04 .inner .txt02 {font-size:20px;margin-top:5px;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .txt01 {display:none;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .txt02 {font-size:26px;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .arrow{margin-top:15px;}
	#mainContents .conBox04 .mask ul {margin:-10px;}
	#mainContents .conBox04 .mask ul li {padding:10px;}
	#mainContents .conBox04 .mask ul li a .txtBox dl dt {font-size:18px;}
	#mainContents .conBox04 .mask ul li a .txtBox dl dd {font-size:14px;}
	

#mainVisual{
    height: 635px;
    margin-top: 50px;
}
#mainVisual .txtBox .txt01{


}



}

@media all and (max-width:1024px) {	
	#mainContents .prd-list li {width:50%;}

	#mainContents .conBox03 .prd-best .con {width:33.33% !important;padding-top:33.33% !important;}
	#mainContents .conBox03 .prd-best .con.con04,
	#mainContents .conBox03 .prd-best .con.con08 {display:none;}
	#mainContents .conBox03 .prd-best .con.con01 .prd-name p {font-size:16px;}
	#mainContents .conBox03 .prd-best .btnWrap {display:block;}

	#mainContents .conBox03 .prd-best .con.con05 .inner .txt01 {display:block;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .txt02 {font-size:35px;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .arrow{margin-top:25px;}

	
}
@media all and (max-width:860px){
	
	#mainContents .conBox03 .prd-best .con.con05 .inner .txt01 {display:none;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .txt02 {font-size:30px;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .arrow{margin-top:15px;}



}
@media all and (max-width:768px) {
	#mainContents .conBox02 .mask01 {width:500px;height:500px;}
}
@media all and (max-width:719px) {

}
@media all and (max-width:680px) {

	#mainVisual .mask ul li.visual01 {background-image:url("../images/main/mainVisual-01_m.jpg");}
	#mainVisual .mask ul li.visual02 {background-image:url("../images/main/mainVisual-02_m.jpg");}
	#mainVisual .mask ul li.visual03 {background-image:url("../images/main/mainVisual-img03_m.jpg");}

	#mainVisual .txtBox {text-align:center;}
	#mainVisual .txtBox .txt01 {font-size:43px;}
	#mainVisual .txtBox .txt02 {font-size:18px;}
	#mainVisual .txtBox a {margin:40px auto;}
	.wave {bottom:0;}
	.wave img {height:160px;}
	
	#mainVisual .txtBox .color680 {color:#fff;}
	#mainVisual .txtBox .br_none{display:none;}

	#mainContents .prd-list li {width:auto;}

	#mainContents .conBox {padding:50px 0;}
	#mainContents .title-wrap .kr {font-size:18px;}

	#mainContents .conBox01 ul li {float:none;width:100%;margin-top:10px;}
	#mainContents .conBox01 ul li a .txtBox {background:rgba(0,0,0,0.3);opacity:1;}

	#mainContents .conBox02 .mask01 {width:280px;height:280px;}
	#mainContents .conBox02 .mask02 {position:static;transform:translateY(0);margin-top:20px;}
	#mainContents .conBox02 .mask02 dl dt {font-size:24px;}
	#mainContents .conBox02 .mask02 dl dd {font-size:14px;}
	#mainContents .conBox02 .mask02 dl dd br {display:none;}
	#mainContents .conBox02 .mask02 a {margin-top:10px;font-size:14px;line-height:35px;width:100px;}
	#mainContents .conBox02 .arrow {width:40px;height:40px;}
	#mainContents .conBox02 .numbering {bottom:auto;top:302px;font-size:20px;}

	#mainContents .conBox03 .prd-best .con {width:50% !important;padding-top:50% !important;}
	#mainContents .conBox03 .prd-best .con .inner .prd-name p {font-size:14px !important;}

	#mainContents .conBox04 .mask {padding-right:30px;}
	#mainContents .conBox04 .mask ul {margin:-5px;}
	#mainContents .conBox04 .mask ul li {padding:5px;}
	#mainContents .conBox04 .mask ul li a {padding:10px;}
	#mainContents .conBox04 .mask ul li a .thumb .sns-icon {top:10px;right:10px;}
	#mainContents .conBox04 .mask ul li a .txtBox dl dt {font-size:16px;}
	#mainContents .conBox04 .mask ul li a .txtBox dl dd {font-size:14px;}
	#mainContents .conBox04 .mask ul li {opacity:0.5;}
	#mainContents .conBox04 .mask ul li.swiper-slide-active {opacity:1;}
	#mainContents .conBox04 .mask ul li.swiper-slide-active a:after {opacity:0;}
}
@media all and (max-width:480px) {

	#mainContents .conBox03 .prd-best .con.con05 .inner .txt01 {display:none;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .txt02 {font-size:18px;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .arrow{margin-top:15px;}
	#mainContents .conBox03 .prd-best .con.con05 .inner .txtBox {padding: 0 14px;}


}