/* **************************************************************************** */
/*	@Author       :bokyung        */
/* ***************************************************************************** */
@charset "utf-8";
body{color:#666;font-family:'Pretendard', sans-serif;font-weight:400;letter-spacing:-0.8px;line-height:1.4;color:#222}
h1, h2, h3, h4, h5, h6{font-family:'Pretendard', sans-serif;font-weight:600; letter-spacing:-0.8px}
big, strong, b, dt, th{font-family:'Pretendard', sans-serif;font-weight:600; letter-spacing:-0.8px}
a:hover{opacity:1}

/* common */
html{overflow-x:hidden;scroll-behavior:smooth;}
.inner{max-width:1600px;margin:0 auto}
header .inner,
footer .inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.en{font-family:'RozhaOne','Pretendard', sans-serif;}

.accd_cont{display:none}
img{max-width:100%}
.mob{display:none}
.pc{display:block}
.wrap{word-break:keep-all}


/* header */
header{position:fixed;top:0;left:0;z-index:100;width:100%;height:110px;background:rgba(255,255,255,0.9)}
header .inner{height:auto;padding-top:40px}
header .logo_wrap{width:170px;height:47px}
header .logo_wrap a{display:block;width:100%;height:100%;background:url(../images/islex_logo.png) no-repeat 50% 50%}
header .gnb_wrap,
header .gnb{display:flex;align-items:center;justify-content:flex-end}
header .gnb a{display:block;padding:0 45px;font-size:18px;font-weight:500;color:#222}
header .gnb a:hover{color:#C62024}
header .lang{display:block;padding:5px 20px;border-radius:50px;border:1px solid #C62024;font-weight:500;font-size:18px;color:#C62024;}
header .lang span{display:inline-block;padding:2px 0;padding-left:28px;background:url(../images/header_lang_ic.png) no-repeat 0 50%}

/* footer */
footer{padding:80px 0 100px;border-top:1px solid #F9F9F9}
footer *{color:#000}
footer .logo_wrap{width:195px;}
footer .logo_wrap a{display:block;width:100%;height:54px;background:url(../images/islex_logo_b.png) no-repeat 50% 50%}
footer .logo_wrap .copy{margin-top:15px;font-size:14px;white-space:nowrap}
footer .footer_info{display:flex;align-items:flex-start;justify-content:flex-end}
footer .footer_info dl{font-size:14px}
footer .footer_info dt{padding-bottom:10px}
footer .footer_info dl + dl{margin-left:125px}
footer .footer_info dd{display:flex;}
footer .footer_info dd + dd{margin-top:5px}
footer .footer_info dd span{padding-right:8px;white-space:nowrap;opacity:0.6}


.swiper-button-next:after,
.swiper-button-prev:after{display:none}

/* motion */
.up_motion{transform:translateY(10%);opacity:0;transition:transform ease-in-out 0.5s, opacity ease-in-out 0.5s, margin 0.3s}
.up_motion.on{transform:translateY(0);opacity:1}
.left_motion{transform:translateX(10%);opacity:0;transition:ease-in-out 0.5s}
.left_motion.on{transform:translateX(0);opacity:1}

/* content */
.content{padding-top:110px}
.content .title_wrap{text-align:center}
.content .title_wrap .sec_en{font-weight:600;font-size:20px}
.content .title_wrap .sec_tit{margin-top:20px;font-weight:600;font-size:50px}

/* visual */
#visual{padding:100px 0 60px;background:url(../images/visual_line_bg.jpg) no-repeat 50% 50%;color:#1A1A1A;border-bottom:1px solid #EDEDED;}
#visual .inner{position:relative;display:flex;flex-wrap:wrap;}
#visual .left_cont,
#visual .right_cont{width:400px}
#visual .center_cont{width:calc(100% - 800px);text-align:center}
#visual .desc{margin-top:10px;font-size:16px}
#visual .welcome{margin:285px 0 470px}
#visual .welcome strong{line-height:1;font-size:74px}
#visual .center_cont .en{position:relative;z-index:1;font-size:250px;color:#C62024;line-height:0.75;letter-spacing:-5px;white-space:nowrap}
#visual .center_cont .en.of{top:-140px}
#visual .center_cont .obj_img{position:relative;top:-70px}
#visual .right_cont{text-align:right}
#visual .left_cont .obj_img{animation-delay:0.5s;}
#visual .right_cont .obj_img{margin:170px 0 440px;}
#visual .islex{text-align:left}
#visual .islex .tit{font-size:34px}
#visual .islex .tit strong{font-size:112px;line-height:0.9;letter-spacing:-5px}
#visual .obj_ani{position:relative;top:0;animation:visual_pbj_ani 1s infinite alternate;}
@keyframes visual_pbj_ani{
   0%{top:0}
   100%{top:8px}
}  
#visual .prd_down{display:flex;align-items:center;justify-content:center;position:absolute;bottom:-130px;right:40px;z-index:10;width:140px;height:140px;border-radius:50%;background:#C42023;box-shadow:2px 2px 15px 2px rgba(146,22,51,0.25);text-align:center;transition:0.3s}
#visual .prd_down:hover{bottom:-125px}
#visual .prd_down span{padding-top:30px;font-size:16px;color:#fff;background:url(../images/visual_prd_down_ic.png) no-repeat 50% 0}

/* about */
#about{background:url(../images/about_milestone_bg.jpg) no-repeat 50% 100%;background-size:100% 1000px}
#about .about_box{padding-top:125px}
#about .about_tit{margin-bottom:20px;font-size:60px;letter-spacing:-4px}
#about .about_cont{display:flex;flex-wrap:wrap}
#about .about_cont .img_wrap{width:960px;margin-left:-160px}
#about .about_cont .text_wrap{width:calc(100% - 960px);padding-left:110px}
#about .about_cont .text_wrap p{font-size:20px;line-height:1.7}
#about .about_cont .text_wrap p + p{margin-top:30px}
#about .milestone{padding:200px 0;}
#about .milestone_cont{display:flex;justify-content:center;margin-top:40px}
#about .milestone_cont > li{flex:1;padding:85px 80px;text-align:center;background:url(../images/about_milestone_cont_bg.png) no-repeat 50% 50%;font-size:20px;color:#343434}
#about .milestone_cont .year{padding-top:110px;font-weight:500;background:no-repeat 50% 0}
#about .milestone_cont .year strong{line-height:0.8;font-weight:400;color:#C62124;font-size:80px}
#about .milestone_cont > li:nth-child(1) .year{background-image:url(../images/about_milestone_cont_ic_1.png)}
#about .milestone_cont > li:nth-child(2) .year{background-image:url(../images/about_milestone_cont_ic_2.png)}
#about .milestone_cont > li:nth-child(3) .year{background-image:url(../images/about_milestone_cont_ic_3.png)}
#about .milestone_cont .tit{margin:10px 0 20px;font-weight:500;font-size:30px}
#about .milestone_cont .tit span{font-size:16px}

/* history */
#history{padding:100px 0;background:url(../images/history_bg.jpg) no-repeat 50% 50%;background-size:cover}
#history .inner{display:flex;flex-wrap:wrap;align-items:center;}
#history .text_wrap{width:calc(100% - 650px);padding:0 50px 0 175px;color:#fff}
#history .text_wrap .tit{margin-bottom:20px;font-weight:500;font-size:46px}
#history .text_wrap .desc{font-size:25px}
#history .text_wrap .desc + .desc{margin-top:50px}
#history .history_swiper{position:relative;overflow:hidden;width:650px;height:730px;padding-left:50px;padding-right:80px}
#history .history_swiper .swiper-slide{display:flex;flex-wrap:wrap;align-items:center;align-content:center;position:relative;padding:20px 40px;border-radius:15px;background:rgba(12,25,35,0.6);transition:background 0.3s}
#history .history_swiper .swiper-slide::before,
#history .history_swiper .swiper-slide::after{content:'';display:block;position:absolute;box-sizing:border-box}
#history .history_swiper .swiper-slide::before{width:1px;height:calc(100% + 30px);top:50%;left:-40px;background:rgba(255,255,255,0.6)}
#history .history_swiper .swiper-slide::after{width:8px;height:8px;top:50%;left:-43px;margin-top:-4px;border-radius:50%;background:#fff;transition:0.3s}
#history .history_swiper .swiper-slide:last-child::before{display:none}
#history .history_swiper .date{font-weight:500;font-size:24px;color:#A1A9B1}
#history .history_swiper p{width:100%;margin-top:10px;font-weight:500;font-size:28px;color:#fff}
#history .history_swiper .swiper_ctrl{position:absolute;right:0;top:50%;width:30px;transform:translateY(-50%)}
#history .history_swiper .swiper-button-next,
#history .history_swiper .swiper-button-prev,
#history .history_swiper .swiper-pagination{position:static;transform:translate(0,0)}
#history .history_swiper .swiper-button-next,
#history .history_swiper .swiper-button-prev{width:30px;height:30px;margin:10px 0;background:no-repeat 50% 50%}
#history .history_swiper .swiper-button-prev{background-image:url(../images/history_swiper_prev.png)}
#history .history_swiper .swiper-button-next{background-image:url(../images/history_swiper_next.png)}
#history .history_swiper .swiper-pagination-bullet{margin:10px auto;border:2px solid #D4D4D4;background:none;opacity:1;transition:0.3s}
#history .history_swiper .swiper-pagination-bullet-active{background:#D4D4D4}
#history .history_swiper .swiper-slide-active{background:#fff}
#history .history_swiper .swiper-slide-active::after{width:22px;height:22px;left:-50px;margin-top:-11px;border:7px solid #fff;background:#EA2450}
#history .history_swiper .swiper-slide-active .date{color:#C62124}
#history .history_swiper .swiper-slide-active p{color:#222}

/* product */
#product{padding:150px 120px} 
#product .prd_list{display:flex;margin-top:120px}
#product .prd_list li{flex:1;}
#product .prd_list li + li{margin-left:50px}
#product .prd_list a{display:block;overflow:hidden;position:relative;top:0;height:700px;padding:110px 60px;border-radius:50px;background:no-repeat 50% 50%;background-size:cover;color:#fff}
#product .prd_list a::before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;background:rgba(0,0,0,0.5);}
#product .prd_list .text_wrap{position:relative;}
#product .prd_list .text_wrap::before{content:'';display:block;position:absolute;top:0;left:-100px;width:566px;height:200px;background:url(../images/prd_text_bg.png) no-repeat 100% 100%}
#product .prd_list .text_wrap *{position:relative;z-index:1}
#product .prd_list .en{font-size:100px;line-height:0.8}
#product .prd_list .desc{margin-top:15px;font-size:18px}
#product .prd_list .down{position:absolute;bottom:100px;left:60px;padding:15px 0;padding-right:65px;font-size:18px;background:url(../images/prd_pdf_down_ic.png) no-repeat 100% 50%;transform:translateY(20%);opacity:0;}
#product .prd_list a,
#product .prd_list a::before,
#product .prd_list .down{transition:0.3s}
#product .prd_list .man a{background-image:url(../images/product_prd_man_bg.jpg)}
#product .prd_list .woman a{background-image:url(../images/product_prd_woman_bg.jpg)}
#product .prd_list .kids a{background-image:url(../images/product_prd_kids_bg.jpg)}
#product .prd_list a:hover{top:-20px}
#product .prd_list a:hover::before{opacity:1}
#product .prd_list a:hover .down{opacity:1;transform:translateY(0);}

/* contactus */
#contactus{position:relative;padding:100px 0 115px}
#contactus::before{content:'';display:block;position:absolute;top:270px;left:0;width:100%;height:600px;background:#B31E21 url(../images/contactus_bg.png) no-repeat 50% 0}
#contactus .inner{position:relative;z-index:1}
#contactus .map_wrap{display:flex;align-items:center;justify-content:space-between;margin-top:175px}
#contactus .addr_info{padding-left:150px}
#contactus .addr_info li{padding:5px 0;padding-left:50px;font-size:20px;color:#fff;background:no-repeat 0 0}
#contactus .addr_info li + li{margin-top:25px}
#contactus .addr_info li.addr{background-image:url(../images/contactus_addr_ic.png)}
#contactus .addr_info li.call{background-image:url(../images/contactus_call_ic.png)}
#contactus .addr_info li.fax{background-image:url(../images/contactus_fax_ic.png)}
#contactus .addr_info li.mail{background-image:url(../images/contactus_mail_ic.png)}
#contactus .addr_info li a,
#contactus .addr_info li *{color:#fff}
#contactus .map_cont{width:938px;height:595px}
#contactus .map_cont img{width:100%;height:100%;object-fit:cover}


/* en_site */
.en_site{letter-spacing:-1px}
.en_site .content .title_wrap .sec_en{font-size:50px}
.en_site #about .about_cont .text_wrap{padding-left:80px}
.en_site #about .about_cont .text_wrap p{line-height:1.5;}
.en_site #about .milestone_cont > li{padding:85px 70px}
.en_site #about .milestone_cont{align-items:flex-start}
.en_site #history .history_swiper p{font-size:24px}
.en_site #contactus::before{top:240px}
.en_site #contactus .map_wrap{margin-top:145px}



















@media only screen and (max-width:1600px){
	.inner{padding:0 20px}
	#visual .center_cont .en{font-size:200px}
	#visual .welcome{margin:180px 0 420px}
	#visual .right_cont .obj_img{margin:100px 0 360px}
	
	#about .about_cont .img_wrap{width:50%;margin:0;}
	#about .about_cont .text_wrap{width:50%;padding-left:80px}
	#about .about_cont .text_wrap br{display:none}
	#history .text_wrap{padding:0 50px}
	#history .text_wrap br{display:none}
	
}

@media only screen and (max-width:1440px){
	.content .title_wrap .sec_en{font-size:18px}
	.content .title_wrap .sec_tit{margin-top:15px;font-size:38px}
	
	
	#visual{padding:50px 0 0}
	#visual .inner{max-width:1200px}
	#visual .left_cont, 
	#visual .right_cont{position:absolute;width:300px;}
	#visual .center_cont{width:100%}
	#visual .center_cont .en{font-size:160px}
	#visual .center_cont .obj_img{max-width:400px;margin:0 auto}
	#visual .left_cont{left:0}
	#visual .right_cont{right:0}
	#visual .welcome{margin:145px 0 375px;padding-left:20px}
	#visual .welcome strong{font-size:50px}
	#visual .left_cont .obj_img{max-width:200px}
	#visual .right_cont{text-align:right}
	#visual .right_cont .obj_img{display:inline-block;max-width:180px;margin:0 0 380px}
	#visual .islex{padding:0 20px 0 40px}
	#visual .islex .tit{font-size:26px}
	#visual .islex .tit strong{font-size:62px}
	#visual .islex .desc br{display:none}
	#visual .prd_down{width:120px;height:120px;bottom:-60px}
	#visual .prd_down:hover{bottom:-55px}
	
	#about .about_box{padding-top:60px}
	#about .about_tit{font-size:48px}
	#about .about_cont .text_wrap{padding-left:50px;}
	#about .about_cont .text_wrap p{font-size:18px}
	#about .milestone{padding:100px 0 60px}
	#about .milestone_cont{margin-top:0}
	#about .milestone_cont > li{padding:60px 40px;background-size:120%}
	#about .milestone_cont .year strong{font-size:68px}
	#about .milestone_cont br{display:none}
	
	#history{padding:50px 0}
	#history .text_wrap{padding:0 30px 0 0}
	#history .text_wrap{width:40%}
	#history .history_swiper{width:60%;padding-right:60px}
	#history .text_wrap .desc{font-size:20px}
	
	#product{padding:80px 0}
	#product .prd_list{margin-top:60px}
	#product .prd_list a{height:500px;padding:90px 40px}
	#product .prd_list .en{font-size:58px}
	#product .prd_list li + li{margin-left:30px}
	#product .prd_list .desc br{display:none}
	#product .prd_list .down{bottom:60px;left:40px;font-size:16px}
	
	#contactus{overflow:hidden;padding:50px 0}
	#contactus::before{top:220px}
	#contactus .map_cont{width:60%;}
	#contactus .addr_info{padding:0 20px}
	#contactus .addr_info li{font-size:17px;}
	#contactus .addr_info li + li{margin-top:15px}
	
	footer{padding:50px 0 80px}
	footer .inner{align-items:flex-start}
	footer .footer_info dl + dl{margin-left:80px}
	
	.en_site .content .title_wrap .sec_en{font-size:36px}
	.en_site #contactus::before{top:190px}
	.en_site #about .milestone_cont{display:block}
	.en_site #about .about_cont .text_wrap{padding-left:0}
	.en_site #about .milestone_cont > li{padding:30px 15px;background-size:90%}
	.en_site #about .milestone_cont .tit{margin-bottom:15px;padding:0}
	.en_site #history .history_swiper p{font-size:15px}
	
	
}

@media only screen and (max-width:1024px){
	.mob{display:block}
	.pc{display:none}
	.inner{padding:0 15px}
	
	header{height:60px;border-bottom:1px solid #FAFAFA;}
	header .inner{height:100%;padding:0 15px}
	header .gnb{display:none}
	header .logo_wrap{width:90px}
	header .logo_wrap a{background-size:100%}
	header .lang{padding:0 10px;font-size:14px}
	header .lang span{padding-left:22px;background-size:14px;}
	
	footer{padding:30px 0}
	footer .inner{display:block;padding:0 30px}
	footer .logo_wrap{width:100px;}
	footer .logo_wrap a{height:30px;background-size:100%}
	footer .logo_wrap .copy{margin-top:10px;font-size:12px}
	footer .footer_info{display:block}
	footer .footer_info dl{margin-top:20px}
	footer .footer_info dl + dl{margin-left:0}
	footer .footer_info dt{padding-bottom:5px}
	footer .footer_info dd + dd{margin-top:2px}
	footer .footer_info br{display:none}
	
	
	.content{padding-top:60px}
	.content .title_wrap .sec_en{font-size:16px}
	.content .title_wrap .sec_tit{margin-top:10px;font-size:28px}
	
	#visual{padding:40px 0;border-bottom:0;background-image:url(../images/visual_line_m_bg.png);background-size:100%;background-position-y:316px}
	#visual .inner{display:block}
	#visual .left_cont, 
	#visual .right_cont{position:static;width:100%}
	#visual .left_cont .obj_img,
	#visual .right_cont .obj_img{display:none}
	#visual .welcome{margin:0 0 25px;padding:0;text-align:center}
	#visual .welcome .top_desc{font-size:12px}
	#visual .welcome strong{display:inline-block;margin:5px 0;font-weight:700;font-size:38px} 
	#visual .desc{margin:0}
	#visual .center_cont .obj_img{max-width:50%;top:-40px}
	#visual .center_cont .en{display:flex;justify-content:center;font-size:80px}
	#visual .center_cont .en.of{top:-60px;}
	#visual .islex{display:flex;flex-wrap:wrap;padding:0;}
	#visual .islex .tit{width:130px;font-size:14px}
	#visual .islex .tit strong{display:inline-block;margin:8px 0;font-size:40px;font-weight:700;letter-spacing:-1px}
	#visual .islex .desc{width:calc(100% - 130px);font-size:14px}
	#visual .prd_down{bottom:-80px;right:15px;z-index:10;width:80px;height:80px}
	#visual .prd_down:hover{bottom:-80px}
	#visual .prd_down span{padding-top:20px;font-size:13px;background-size:12px}
	
	#about .about_box{padding-top:0}
	#about .about_box .inner{padding-top:30px}
	#about .about_tit{margin-bottom:10px;font-weight:700;font-size:26px;letter-spacing:-1px}
	#about .about_tit strong{font-weight:700;}
	#about .about_cont .text_wrap{width:100%;padding:0}
	#about .about_cont .text_wrap p{font-size:16px;line-height:1.4}
	#about .about_cont .text_wrap p + p{margin-top:15px}
	#about .milestone{padding:50px 0 30px}
	#about .milestone_cont > li{padding:20px 15px;background-size:140%}
	#about .milestone_cont .year{padding-top:60px;font-size:14px;background-size:45px}
	#about .milestone_cont .year strong{padding-right:4px;font-size:30px}
	#about .milestone_cont .tit{margin:10px 0 0;padding:5px 0 10px;font-weight:600;font-size:20px}
	#about .milestone_cont .tit span{display:none}
	#about .milestone_cont .desc{font-size:14px}
	
	#history{padding:40px 0;background-image:url(../images/history_bg_m.jpg)}
	#history .inner{display:block}
	#history .text_wrap{width:100%}
	#history .text_wrap .tit{margin-bottom:10px;font-weight:700;font-size:26px}
	#history .text_wrap .desc{font-size:16px}
	#history .text_wrap .desc + .desc{margin-top:15px}
	#history .history_swiper{width:100%;height:380px;padding-left:30px;padding-right:40px;margin-top:30px}
	#history .history_swiper .swiper-slide{padding:15px}
	#history .history_swiper .swiper-slide::before{left:-20px;height:calc(100% + 10px)}
	#history .history_swiper .swiper-slide::after{left:-23px;width:6px;height:6px;}
	#history .history_swiper .swiper-slide-active::after{left:-28px;width:16px;height:16px;margin-top:-8px;border-width:5px;}
	#history .history_swiper .date{font-size:14px}
	#history .history_swiper p{margin-top:5px;font-size:16px}
	#history .history_swiper .swiper_ctrl{width:20px;top:auto;bottom:0;transform:translateY(0)}
	#history .history_swiper .swiper-button-next,
	#history .history_swiper .swiper-button-prev{width:20px;height:20px;margin:0;background-size:18px}
	 
	#product{padding:50px 0}
	#product .prd_list{display:block;margin-top:30px;word-break:keep-all}
	#product .prd_list li + li{margin-left:0;margin-top:10px}
	#product .prd_list a{height:160px;padding:30px 20px;padding-right:100px;border-radius:30px;}
	#product .prd_list a::before{display:none}
	#product .prd_list a:hover{top:0}
	#product .prd_list .down{bottom:5px;left:auto;right:20px;padding-right:40px;font-size:14px;transform:translateY(0);opacity:1;background-size:30px}
	#product .prd_list .en{font-size:40px}
	#product .prd_list .desc{margin-top:10px;font-size:14px}
	#product .prd_list .man a{background-image:url(../images/product_prd_man_bg_m.jpg)}
	#product .prd_list .woman a{background-image:url(../images/product_prd_woman_bg_m.jpg)}
	#product .prd_list .kids a{background-image:url(../images/product_prd_kids_bg_m.jpg)}
	
	#contactus{padding:0 0 40px}
	#contactus::before{top:100px;height:300px;background-image:url(../images/contactus_bg_m.png);background-size:100%}
	#contactus .map_wrap{display:block;margin-top:80px}
	#contactus .addr_info{padding:0}
	#contactus .addr_info li{display:block;padding-left:30px;font-size:16px;background-size:22px;background-position-y:5px;color:#fff}
	#contactus .addr_info li.addr{width:100%;margin-right:0}
	#contactus .addr_info li + li{margin-top:0;}
	#contactus .addr_info li:last-child{margin-right:0}
	#contactus .map_cont{width:100%;height:260px;margin-top:10px}
	
	.en_site #contactus .map_wrap{margin-top:80px}
	.en_site #contactus::before{top:80px}
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
}