/* BASIC css start */
/*example.css*/
@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
 .wrap{
	margin-left: auto;
	margin-right: auto;
	/*width: 960px;*/
	position: relative;
}
h1{
	font-size: 6em;
}
p{
	font-size: 2em;
}
.intro p{
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
}
.section{
	text-align:center;
} 
#download{
	margin: 10px 0 0 0;
	padding: 15px 10px;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #49afcd;
	background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));
	background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: linear-gradient(top, #5bc0de, #2f96b4);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
	border-color: #2f96b4 #2f96b4 #1f6377;
	border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	vertical-align: middle;
	cursor: pointer;
	display: inline-block;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
#download a{
	text-decoration:none;
	color:#fff;
}
#download:hover{
	text-shadow: 0 -1px 0 rgba(0,0,0,.25);
	background-color: #2F96B4;
	background-position: 0 -15px;
	-webkit-transition: background-position .1s linear;
	-moz-transition: background-position .1s linear;
	-ms-transition: background-position .1s linear;
	-o-transition: background-position .1s linear;
	transition: background-position .1s linear;
}
#infoMenu{
	height: 20px;
	color: #f2f2f2;
	position:fixed;
	z-index:70;
	bottom:0;
	width:100%;
	text-align:right;
	font-size:0.9em;
	padding:8px 0 8px 0;
}
#infoMenu ul{
	padding: 0 40px;
}
#infoMenu li a{
	display: block;
	margin: 0 22px 0 0;
	color: #333;
}
#infoMenu li a:hover{
	text-decoration:underline;
}
#infoMenu li{
	display:inline-block;
	position:relative;
}
#examplesList{
	display:none;
	background: #282828;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: 20px;
	float: left;
	position: absolute;
	bottom: 29px;
	right: 0;
	width:638px;
	text-align:left;
}
#examplesList ul{
	padding:0;
}
#examplesList ul li{
	display:block;
	margin: 5px 0;
}
#examplesList ul li a{
	color: #BDBDBD;
	margin:0;
}
#examplesList ul li a:hover{
	color: #f2f2f2;
}
#examplesList .column{
	float: left;
	margin: 0 20px 0 0;
}
#examplesList h3{
	color: #f2f2f2;
	font-size: 1.2em;
	margin: 0 0 15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	padding: 0 0 5px 0;
}


/* Demos Menu
 * --------------------------------------- */
 #demosMenu{
	position:fixed;
	bottom: 10px;
	right:10px;
	z-index: 999;
 }


/* 공통 */
.quickMenu{ display:none; }
.fp-table{justify-content: flex-start !important;}
.myContent{position:relative;height:100%; max-width:500px; margin:0 auto}
.myContent .red_tit{font-size: 28px;color:#092e49;font-weight:700;position:relative;padding-top: 66px;margin-bottom:30px;line-height: 1.35;word-break: keep-all;}
.myContent .red_tit::before{content:'';width: 3px;height: 46px;background: #092e49;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
.myContent .red_tit em{color:#222; font-weight:700;}
.myContent .white_tit{font-size: 28px;color:#fff;font-weight: bold;position:relative;line-height: 1.35;word-break: keep-all;padding-top: 66px;margin-bottom: 30px;}
.myContent .white_tit::before{content:'';width: 3px;height: 46px;background: #fff;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
.myContent .cont{font-size: 16px;color:#000;white-space: pre-line;position:relative;z-index:99;line-height: 1.65;letter-spacing: -0.25px;}
.myContent .red_bar{margin-top: -10px;padding-top: 67px;}
.myContent .red_bar::before{content:'';width: 3px;height: 46px;background: #092e49;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
.myContent .txt_white{color:#fff;}

/* 가로 짧아질때 전용 */
@media screen and (min-width:0) and (max-width:1600px){
    .v_middle{width: 90% !important;position:absolute !important;top:50%;left:50%;transform: translate(-50%, -50%);}
    #section3 .clear .table_cell.ani2 img{width: 90%;}

    #section4 .v_middle{top:60%;}
    
    #section5 .ani5{/* top: 30% !important; *//* transform: translateY(-30%) !important; *//* left: 10% !important; */text-align: center;padding-top: 24px;}
    #section5 .ani6{/* top: 30% !important; *//* transform: translateY(-30%) !important; *//* right: 10% !important; */text-align: center;padding-bottom: 63px;}
    #section5 .clear{width:100%!important}
    #section5 .ani3{left: 10%;width: 18%;}
    #section5 .ani3 img{width:100%}
    #section5 .ani2{width: auto;}
    #section5 .ani2 img{width:100%}
    #section5 .ani4{right: 10%;width: 18%;}
    #section5 .ani4 img{width:100%}

    #section7 .clear .table_cell a img{width:100%;}
    #section7 .ani3, #section7 .ani4, #section7 .ani7{/* padding-bottom: 14px !important; */}
    #section8 .clear .table_cell{padding:0 10px;}
    #section8 .ani7{padding-bottom: 14px !important;}
    #section8 .clear .table_cell a img{width:100%;}

}

/* 페이드인 */
.ani1, .ani2, .ani3, .ani4, .ani5, .ani6, .ani7, .ani8, .ani9, .ani10, .ani11, .ani12{opacity:0;}
.active .ani1{opacity:1;transition-delay:.1s!important;transition:all ease 2s}
.active .ani2{opacity:1;transition-delay:.3s!important;transition:all ease 2s}
.active .ani3{opacity:1;transition-delay:.5s!important;transition:all ease 2s}
.active .ani4{opacity:1;transition-delay:.7s!important;transition:all ease 2s}
.active .ani5{opacity:1;transition-delay:.9s!important;transition:all ease 2s}
.active .ani6{opacity:1;transition-delay:1.1s!important;transition:all ease 2s}
.active .ani7{opacity:1;transition-delay:1.3s!important;transition:all ease 2s}
.active .ani8{opacity:1;transition-delay:1.5s!important;transition:all ease 2s}
.active .ani9{opacity:1;transition-delay:1.7s!important;transition:all ease 2s}
.active .ani10{opacity:1;transition-delay:1.9s!important;transition:all ease 2s}
.active .ani11{opacity:1;transition-delay:2.1s!important;transition:all ease 2s}
.active .ani12{opacity:1;transition-delay:2.3s!important;transition:all ease 2s}


/* 네비게이션 색상 다르게 */
#menu.other_color li a{color: #f3a3b0;}
#menu.other_color li a::before{content:'';background: #f3a3b0;}
#menu.other_color li.active a:hover{color: #fff;}
#menu.other_color li.active a{color: #fff;}
#menu.other_color li.active a::before{background: #fff;}
#menu.other_color li.active a::after{content:'';border: 1px solid #fff;}
#menu.other_color::before{content:'';background: #f3a3b0;}

/* 상단 영역 */
#header .headerTnb{padding-top:15px;margin-top:0!important}
.header_section{/*height:193px*/}


/* 첫번째 영역*/
#section1 .img1{position:absolute;left:10%;bottom:0}
#section1 .cont {font-weight: 400;}
#section1 .cont b {font-weight:600; color: #092e49;}

/* 스크롤다운 아이콘 */
#scrollDown{position:absolute;left:50%;transform:translateX(-50%);bottom: 20px;width:150px;text-align:center;color:#000;font-size: 12px;letter-spacing:0;font-weight:600;}
#scrollDown .icon{position:relative;border:2px #000 solid;width:20px;height:30px;border-radius:15px;min-width:18px;min-height:18px;display:inline-block;margin:0;padding:0;text-decoration:none;background-repeat:no-repeat;background-color:transparent;background-position:center center;line-height:1;vertical-align:middle;-webkit-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
#scrollDown .icon::after{content:'';position:absolute;top:7px;left:50%;margin-left: -3px;width: 6px;height: 6px;border-radius:100%;background-color:#000;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);-webkit-animation:scrollDownPointer 1.5s infinite;animation:scrollDownPointer 1.5s infinite;}
#scrollDown span{display:block;margin-top: 14px;}
@-webkit-keyframes scrollDown {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -30%);
    transform: translate(0, -30%);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes scrollDown {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -30%);
    transform: translate(0, -30%);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes scrollDownPointer {
  60% {
    -webkit-transform: translate(0, 200%);
    transform: translate(0, 200%);
  }
  70% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes scrollDownPointer {
  60% {
    -webkit-transform: translate(0, 200%);
    transform: translate(0, 200%);
  }
  70% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}


/* 두번째 영역 */
#section2 .conBox .label span{display:inline-block; width:78px; margin-bottom:24px; line-height:27px; text-align:center; font-size:12px; font-weight:bold; color:#fff; background:#092e49; border-radius:7px;}
#section2 .conBox strong{display:block; margin-bottom:30px; font-size:25px; color:#092e49; line-height:34px; font-weight:bold;}
#section2 .conBox .imgWrap{margin:0 42px;margin-bottom:30px;}
#section2 .conBox .imgWrap img{display:block; width:100%;}
#section2 .conBox b{font-weight: 600; color: #092e49;}
#section2 .conBox.box1{padding:72px 0 90px; }
#section2 .conBox.box2 {padding:0 0 120px;}


/* 세번째 영역 */
#section3 .historyTabWrap{max-width:500px; margin:0 auto;}
#section3 .historyTabWrap .historyTabBtn{padding:0 18px 50px; text-align:center;}
#section3 .historyTabWrap .historyTabBtn li{display:block; width:calc((100% - 24px)/3); margin-right:12px; }
#section3 .historyTabWrap .historyTabBtn li:last-child{margin-right:0;}
#section3 .historyTabWrap .historyTabBtn li a{ display:block; width:100%; font-size:12px; font-weight:bold; text-align:center; line-height:34px; color:#999; border:1px solid #ddd; border-radius:30px; }
#section3 .historyTabWrap .historyTabBtn li a.active{ background:#092e49; color:#fff; border:1px solid #092e49; }
#section3 .historyTabWrap .historyTabCon .tabConBox{display:none; position:relative; padding-bottom:80px; }
#section3 .historyTabWrap .historyTabCon .tabConBox.open{display:block;}
#section3 .historyTabWrap .historyTabCon .tabConBox:after{content:''; display:block; position:absolute; top:0; left:60px; width:1px; background:#d3dae4;}
#section3 .historyTabWrap .historyTabCon .tabConBox:nth-child(1):after{height:1090px;}
#section3 .historyTabWrap .historyTabCon .tabConBox:nth-child(2):after{height:1650px;}
#section3 .historyTabWrap .historyTabCon .tabConBox:nth-child(3):after{height:950px;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li{position:relative; margin-bottom:42px; text-align:center;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .imgWrap{width:100px; margin:0 auto; }
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .imgWrap img{width:100%;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .textWrap{padding-top:20px;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .textWrap .work{margin-bottom:25px;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .textWrap .work:last-child{margin-bottom:0;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .textWrap .work strong{display:block; font-size:14px; font-weight:900; font-family: 'Lato', sans-serif; }
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .textWrap .work span{display:block; margin-top:5px; font-size:14px; color:#666;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .textWrap .work em.c_red{color:#e58080;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .guideLine{position:absolute; top:45px; left:56px;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .guideLine span:nth-child(1){display:block; width:10px; height:10px; border-radius:5px; background:#d3dae4;}
#section3 .historyTabWrap .historyTabCon .tabConBox ul li .guideLine span:nth-child(2){display: block; position: absolute; top: 5px; left: 10px; width: 150px; border-top: 1px dashed #cad0d9; z-index:-1;}


/* 네번째 영역 */
#section4{background-image:url(/design/charmzone/renew_22/img/mo/company_sec4_img_01.png); background-size:cover; background-position:center; background-repeat:no-repeat;}
#section4 .ConBox1 p{margin-bottom:50px; font-size:14px; font-weight:300; color:#fff; line-height:24px;}
#section4 .ConBox2 ul:nth-child(1){margin-bottom:15px;}
#section4 .ConBox2 ul:nth-child(2){width:339px; margin:0 auto;}
#section4 .ConBox2 ul li{width: 162px; padding: 30px 0; margin-right: 15px; border-radius: 20px; background: #81a3bf;}
#section4 .ConBox2 ul li:nth-child(2n){margin-right:0;}
#section4 .ConBox2 ul:nth-child(1) li{margin:0 auto;}
#section4 .ConBox2 ul li strong{display: block; width: 96px; margin: 0 auto 20px; font-size: 19px; color: #547ea0; font-weight: 900; line-height: 39px; background: #fff; border-radius: 30px;}
#section4 .ConBox2 ul li strong em{color:#092e49; font-weight:900;}
#section4 .ConBox2 ul li span{font-size:15px; color:#fff; line-height:22px;}


/* 다섯번째 영역 */
#section5 .cont {margin-bottom: 36px; font-size:14px; }
#section5 .ani3{ width:calc(100% - 40px); padding:0 20px 100px;}


/* 여섯번째 영역 */
#section6 .myContent .cont{padding:0 0 35px;}
#section6 .conBox1 {width:100%; padding:0 0 100px;}
#section6 .conBox1 img{display:block; width:100%;}


/* 일곱번째 영역 */
#section7 .cont {margin-bottom:120px; color:#fff;}
#section7 .cont em{color:#81a3bf}
#section7 .comBox1{padding-left:45px;}
#section7 .comBox1 ul li img{display:block; width:100%; margin-bottom:20px;}
#section7 .comBox1 ul li strong{font-size:17px; color:#fff; line-height:24px; font-weight:400;}
#section7 .fp-watermark{display:none !important;}


/*mobile*/
#menu2 {
    display: none !important;
}
#section1 {
    background: url(/design/charmzone/renew_22/img/mo/company_sec1_bg.png?v20221011) no-repeat rgb(240, 240, 242);
    background-size: cover;
    background-position: center;
}

#section2 .myContent .red_bar::before {
    height: 59px;
}

#section2 .cont ul {
    padding-bottom: 30px;
    font-size: 0;
    margin-top: -17px;
} 
.txt-left {
    text-align: left;
}

#section3 .myContent .cont {
    padding: 20px 0 30px;
}

#section5 .red_tit {
    font-weight: bold;
    letter-spacing: -0.5px;
    margin-bottom: 23px;
}

#section6 .clear .table_cell img {
    width: 69%;
}

#section6 .cont {
    padding-top: 33px;
}


.list_swiper .swiper-wrapper .swiper-slide {
    width: auto;
    padding: 0 20px 0 0;
  -webkit-transition: all 1.5s ease;
  -khtml-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;}
#section8 .list_swiper .swiper-wrapper .swiper-slide {
    padding: 0 20px 0 0;
}
.list_swiper .swiper-wrapper .swiper-slide-active {
    width: 50%;
    margin-top: -11%;
}
.list_swiper .swiper-wrapper .swiper-slide img {
  height: 150px;
  -webkit-transition: all 1.5s ease;
  -khtml-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  }

.list_swiper .swiper-wrapper .swiper-slide-active img {
    height: 247px;
}
.list_swiper .swiper-wrapper .swiper-slide h3 {
    color: #010101;
    font-weight: 500;
    letter-spacing: -0.25px;
    font-size: 14px;
    line-height: 1.5;
    padding-top: 16px;
}
 
.list_swiper .swiper-wrapper .swiper-slide p {
    color: #000000;
    font-weight: 400;
    letter-spacing: -0.25px;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    padding-top: 2px;
}

#section7 .ani3,
#section8 .ani3 {
    left: 0;
}
aside#aside {
    text-align: left;
}
#story {
    position: relative;
    top: -105px;
}

#story .swiper-pagination {
    font-weight: bold;
    color: #cccccc;
}

#story .swiper-pagination .swiper-pagination-current {
    color: #000;
}


@media screen and (max-width:459px) {
.myContent .red_tit {font-size: 26px;}
.myContent .white_tit {font-size: 26px;}
.myContent .red_bar {padding-top: 87px;}
.myContent .cont {font-size: 14px;}
.pop_layer.usa_p dt {left: 325px;}
.pop_layer.usa_p dd {left: 80px;}
}


.scroll_bt_tll {display: none;position: fixed;right: 10px;bottom: 25px;cursor: pointer;z-index: 98;}.scroll_bt_tll a {display: block;}.scroll_bt_tll a.-bottom_sc {margin-top: 5px;}
.scroll_bt_tll a img {
    opacity: 0.9;
    width: 43px;
}

/* 2022/08/23 수정 css */
.list_swiper {width:100%;}
.list_swiper .swiper-wrapper {align-items:flex-end;}
.list_swiper .swiper-wrapper .swiper-slide,
.list_swiper .swiper-wrapper .swiper-slide img {transition:none;}
.list_swiper .swiper-wrapper .swiper-slide {padding-right:40px;}
.list_swiper .swiper-wrapper .swiper-slide.row01 {padding-bottom:21px !important;}
.list_swiper .swiper-wrapper .swiper-slide-active img {height:150px;}
/* BASIC css end */