/*sub_vi*/
.sub_vi {width:100%; display:inline-block; text-align:center; box-sizing:border-box; height:66%; position:relative; overflow:hidden;}
.sub_vi_text{line-height:2.5em; font-weight:600; color:#fff; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); letter-spacing:-1px; width:100%; padding:0 5%; box-sizing:border-box; text-shadow:2px 2px 3px rgba(0,0,0,.4)}
.sub_vi_text p{font-size:1.3rem; font-weight:700; line-height:1.2; letter-spacing:-1.1px;}
.sub_vi_text p span{font-size:5rem; font-weight:700;}


.sub_vi1{background:url('/common/img/sub/company_bn.png') no-repeat center; width:100%; height:607px; background-size:cover;}
.sub_vi2{background:url('/common/img/sub/sub_vi3.jpg') no-repeat center; width:100%; height:607px; background-size:cover;}
.sub_vi3{background:url('/common/img/sub/sub_vi9.jpg') no-repeat center; width:100%; height:607px; background-size:cover;}
.sub_vi4{background:url('/common/img/sub/sub_vi8.jpg') no-repeat center; width:100%; height:607px; background-size:cover;}


img {
    image-rendering: -webkit-optimize-contrast !important;
}



.sub_vi .sub_vi_p{
will-change: transform;
animation-duration: 10s;
animation-name: background-image-animation;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: linear;
transform: translateX(0) scale(1);
}


@keyframes background-image-animation {
0% {transform: scale(1.2);}
100% {transform: scale(1);}
}






.inner{max-width: 1230px; display: block; padding: 0 15px; box-sizing: border-box; margin: 0 auto;}
.rule_section ul li{line-height: 0;}
.rule_section ul li:after{content: ''; clear: both; visibility: hidden; display: block;}
.rule_section ul li > div{float: left; width: 50%; box-sizing: border-box;}
.rule_section ul li:nth-of-type(2) > div{float: right;}

.rule_section ul li .img_box img{max-width: 100%;} 
.rule_section ul li .img_wrap,
.rule_section ul li .img_wrap2{position: relative; top: 0px; left: 0%; width: 100%;}
.rule_section ul li .img_wrap{overflow: hidden; animation-duration: 1.4s;}
.rule_section ul li .img_wrap2{animation-duration: 1.4s;}

.img_up_01{animation-name: img_up_01; -webkit-animation-name: img_up_01;}

@keyframes img_up_01{0%{opacity: 0; transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0);} 100%{opacity: 1; transform: translate3d(0, 0%, 0); -ms-transform: translate3d(0, 0%, 0);}}


.img_up_02{animation-name: img_up_02; -webkit-animation-name: img_up_02;}

@keyframes img_up_02{0%{opacity: 0; transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0);} 100%{opacity: 1; transform: translate3d(0, 0%, 0); -ms-transform: translate3d(0, 0%, 0);}}





/*공통*/
.sub_section{width:1440px; margin:0 auto; padding:4em 0 7em 0;}
.sub_section:after{content:''; display:block; clear:both;}
.sub_guide{width:100%; font-size:2.5rem; text-align:center; margin-top:100px; font-weight:700}  


/*company*/
.sub_section_inner{}
.company_h2{font-size:3rem; font-weight:700; line-height:60px;}
.company{justify-content:space-between; margin-top:80px;}
.company_left{width:54%;}
.company_right{width:46%; text-align:right}
.company_right img{max-width:100%; border-radius:10px;}
.company .sub_title{font-size:26px; font-weight:700; line-height:40px; word-break:keep-all; margin-bottom:50px;}
.company p{font-size:1.1rem; word-break:keep-all; color:#454545; line-height:30px;}
.company_left span{font-size:1.3rem; line-height:32px; font-weight:500; text-align:right; display:block; margin-top:16.5%}
.company_left span i{font-size:2rem; line-height:46px; font-weight:700; margin-left:0.5em;}




.en2{font-family:'Chakra Petch', sans-serif !important}
.blue{color:#013f6a !important}
.blue2{color:#005387 !important; font-weight:600 !important}


.sub_section {word-break:keep-all}
.line2{border:1px solid #fff;padding:80px 5%}
.line2 h3{font-size:3em; color:#fff; position:relative; z-index:99}
.line2 > div{font-size:1.3em; line-height:1.4; position:relative; z-index:99}
.line2 b{font-size:1.4em; font-weight:600; display:inline-block; margin-bottom:15px}

.com1{width:100%; box-sizing:border-box; padding:20px; background: url('/common/img/sub/company.png') no-repeat top;background-size:cover;position:relative; color:#fff; margin-top:30px}
.com1_1{width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.5)}



.snow .three{font-weight:700;color:#262161; font-size:2.5em }

.snow p{line-height:1.4;font-size:1.1em;color:#333;}
.snow p:nth-of-type(2){border-radius:10px;padding:10px;}
.snow section{display:flex;gap:30px}
.snow section p{background:#f4f6f8;width:100%;border-radius:10px;padding: 15px;box-shadow: 5px 5px 10px rgb(0 0 0 / 10%)}
.snow section b{font-size:1.2em;font-weight:700}

.snow_text p{font-weight:600;color:#000;letter-spacing:-1px;font-size:2.5em}
.snow_text p:nth-of-type(2){font-size:1.6em; color:#111;font-weight:400}

.snow .last{font-size:1.6em;font-weight:600; color:#000;text-align:center}
.snow .last2{font-size:1.4em;font-weight:600; color:#000;text-align:center}



.one_wrap_box{width:100%;  max-width:1100px; margin:0 auto; box-sizing:border-box; position:relative;}
.one_wrap {width:100%; display:flex;  justify-content:space-between ;}
.one {width:14.5vw; height:14.5vw; border:20px solid #262161; border-radius:50%;  position:relative; z-index:99; background:url('/common/img/sub/three.png') no-repeat bottom center;  background-size:85% auto; background-color:#fff;box-shadow:5px 5px 10px rgb(0 0 0 / 35%)}
.one:last-child:after {display:none}

.one div {position:absolute; left:0; top:0; width:100%; height:85%; display:flex; align-items:center; justify-content:center; font-size:1.5em; line-height:1.3; box-sizing:border-box; padding:0 40px;  }

.one div span {display:inline-block; width:100%; margin-bottom:3px; line-height:1.2; font-family: 'Chakra Petch', sans-serif; font-weight:600}

.one_wrap_info {width:100%; margin-top:20px; font-size:1.1em;  display:flex;  justify-content:space-between ; line-height:1.3}
.one_wrap_info div {width:15vw; font-size:1.3em;  }



.highlight{
  display: inline;
  box-shadow: inset 0 -15px 0 #c1bfdf; 
  /*-10px은 highlight의 두께*/
}
.highlight:after{
  content:"";
  width: 0;
  height: 10px;
  display: inline-block;
  background: #c1bfdf;
}
.m_show2{display:none !important}
.pc_show2{display:inline-block}

@media screen and (max-width: 1500px){
.one{width:24vw;height:24vw;}
.one_wrap_info{justify-content:space-around}
.one_wrap_info div{width:auto}
}
@media screen and (max-width: 800px){
center img{width:30vh}
.com1{padding:10px;}
.com1_1{ background:rgba(0,0,0,.6)}
.line2{padding:20px 5%}
.line2 h3{font-size:2.2em}
.line2 > div{font-size:1em;margin-top:10px}
.one_wrap {display:block;}
.one{ border:15px solid #262161; width:50vw;height:50vw;margin:0 auto;margin-bottom:30px}
.one_wrap_info{display:block;width: 90%; margin: 0 auto}
.one_wrap_info div{width:100%;text-align:left;font-size:1.1em;line-height:1.4}
.m_show2{display:inline-block !important}
.pc_show2{display:none}
}
@media screen and (max-width: 600px){
.snow p{font-size:.9em}
.snow_text img{width:27vh}
.snow_text p{font-size:1.5em}
.snow_text p:nth-of-type(2){font-size:1.2em;line-height:1.4}
.snow .three{font-size:1.7em}
}





/* product */
	.imgbox{max-width:1000px;margin:0 auto;border:9px dashed #5bbecb;box-sizing:border-box;}
	.imgbox		img{width:100%}
	hr{margin-top:2em}

	.sns ul{}
	.sns li{display:flex;align-items:center;justify-content:center;margin-bottom:10px}
	.sns img{width:50px;}
	.sns i{font-size:3.3em;color:#262161}
	.sns p{font-size:2em;color:#000;margin-left:5px}

	@media screen and (max-width: 800px){
	.imgbox{border:4px dashed #5bbecb;box-sizing:border-box;}
	.sns img{width:30px;}
	.sns i{font-size:2em}
	.sns p{font-size:1.2em}
	}




/* news 테이블 */
.table { width: 100%; display: table;border-top:3px solid #003b7c}
.cell{font-size:1.2em}
.row {display: table-row; background: #fff;}
.row.table_header {font-weight:600; background:#ddecff}
.row.table_header > .cell{color:#000;font-size:1.3em}


@media screen and (min-width:1200px) {
	.cell { padding: 10px 12px; display: table-cell; vertical-align:middle; text-align:center;  border-bottom:1px solid #ddd; color:#666}
	.cell.tit  {width:50%; text-align:left; letter-spacing:-1px; font-weight:600; line-height:1.3em;}
	.cell.tit a{color:#000}
	.cell.tit a:hover{color:#506077}
	.cell.no {width:10%;}
	.cell.name {width:10%;}
	.cell.date {width:20%;}
	.cell.number {width:10%;}
	.cell.hit {width:20%;}
	.cell.name2 {width:25%;}
 }

@media screen and (max-width:1200px) {
	.table { display: block;}
	.row {padding:13px 2%; display: block; font-size:0; line-height:0; border-bottom:1px solid #ddd}
	.row.table_header {padding: 0; height:2px;}
	.row.table_header .cell { display: none;}
	.row .cell:before { margin-bottom:0; content: attr(data-title); text-transform: uppercase;color:#555;}
	.cell { padding:0; padding-right:5px; border-bottom:none;}
 	.cell_col {display:inline-block;  width:auto; font-size:.9rem; line-height:1.3em;}
	.cell.tit  {width:100%; font-size:1.05rem; line-height:1.2em; margin-bottom:5px;}
	.cell.tit a{color:#000; font-weight:500}
    .no {display:none}
}

/*서치*/
 						
.search input{width:30%; height:33px !important; border:1px solid #ddd; padding-left:10px; font-size:0.93em; color:#666}
.search select{ font-size:1.1em; color:#666; border:1px solid #ddd;  vertical-align:middle; width:100px; height:33px !important;}
.search a {background-color:#021748; box-shadow:1px 1px 2px #ddd; color:#fff !important; line-height:33px; font-size:1.1em; font-weight:500; padding:0 30px; display:inline-block; vertical-align:middle;}



.search{margin-top:40px; float:left; width:100%; background-color:#fff; text-align:right; float:left; padding:8px 0 10px 0;}
.search img{margin-left:3px;}


@media screen and (max-width: 800px){
.search select{width:auto;padding:0 7px;}
.search input{width:40%;}
.search a{padding:0 20px}
}

/*페이지*/


.page{text-align:center; width:100%; margin-top:20px; font-size:0}
.page ul{ width:100%; text-align:center; }
.page li{ display:inline-block; font-size:15px; font-weight:500; }
 

.page a {
	display:inline-block;
 	text-decoration:none; vertical-align:middle;
 	border:1px solid #d1d1d1;  width:33px; line-height:33px; height:33px;  margin-left:-1px;   color:#999; text-align:Center;
   }

.page img{width:32px; height:32px; vertical-align:top;  }
 
 .page a.ov{border:1px solid #506077; background-color:#021748; color:#fff !important;}



.new{
color: #fff;
    background: #021748;
    border-radius: 8px;
    border: none;
    padding: 4px 10px;
    font-size: .8em;
    font-weight: 400;
    vertical-align: middle;
    margin-left: 5px;
	letter-spacing:0;
}


/*뷰페이지*/
.section{max-width:1440px; margin:0 auto; margin-bottom:5em;}
.section:after{content:''; display:block; clear:both;}
.write:after{content:''; display:block; clear:both;}
.write_button{display:block; text-align:right; margin-bottom:0.5em;}
.write_button .write_input{background:#333; color:#fff; border:none; display:inline-block; border-radius:3px; box-shadow:1px 1px 2px #ddd; line-height:33px; font-size:1em; font-weight:500; padding:0 30px; vertical-align:middle; cursor:pointer;}

p.view_title{font-size:1.6em; font-weight:500; color:#222; width:100%; border-top:3px solid #003b7c; padding-top:10px; box-sizing:border-box; margin-bottom:0.5em;}
p.view_info{font-size:1.1em; font-weight:400; color:#666; width:100%; border-bottom:1px solid #ddd; padding-bottom:10px; box-sizing:border-box;}
p.view_info .list_line{color:#999}
p.view_info a{color:#ddecff !important}
p.view_info a:hover{text-decoration:underline}

div.view_content{width:100%; border-bottom:1px solid #ddd; padding:20px 0; }
div.view_content p{margin:0px; line-height:1.5; letter-spacing:0.5px;}
div.view_content p img{height:auto !important; max-width:100% !important}
div.reple{width:100%; float:left; border-bottom:1px solid #ddd; padding:15px 10px; font-size:15.5px; color:#666;  background-color:#f9f9f9; box-sizing:border-box;}
div.reple b{color:#333; font-weight:600; font-size:16px;}


.list_next{width:100%; padding-top:10px; padding-bottom:10px; box-sizing:border-box; border-bottom:1px solid #ddd;} 
.list_next p{width:100%; font-size:1.1em; line-height:1.5em; color:#999; height:22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.list_next p:last-child{text-align:left; }
.list_next b{font-weight:600; color:#333; padding-right:10px;}

/*버튼*/
a.btn {font-size:15px !important; font-weight:400 !important;color:#fff;display:inline-block; padding:4px 30px 6px 30px; margin-top:5px; border-radius:50px; }
a.list_btn { display:inline-block; text-align:center; line-height:31px; padding:0 20px; font-weight:400; font-size:14.5px; float:right; margin-top:10px; margin-left:5px; background-color:#506077; box-shadow:1px 1px 3px #ddd; color:#fff !important;}
a.list_btn1 { display:inline-block; text-align:center; line-height:31px; padding:0 20px; font-weight:400; font-size:14.5px; float:right; margin-top:10px; margin-left:5px; background-color:#333; box-shadow:1px 1px 3px #ddd; color:#fff !important; margin-bottom:1em}



@media screen and (max-width: 800px){
p.view_title{font-size:1.3em;}
}





/* contact */
.contact .sub_guide{margin:0 0 1em 0;font-size:3em;letter-spacing:-1px;color:#00244c}
.contact{background:#ede9e9;padding:3em;padding-bottom:5em;border-top:4px solid #003b7c;border-radius:0 0 50px 50px;}
.contact ul{display:flex;flex-wrap:wrap;gap:50px;background:#fff;padding:2em;padding-bottom:0;box-shadow:5px 5px 10px rgb(0 0 0 / 10%)}
.contact li{width: calc((100% - 50px) / 2);margin-bottom:20px;}
.contact .note{width:100%}
.contact .star{position:relative}
.contact .star::after{
    content: '*';
    color: #003b7c;
    position: absolute;
    top: -7px;
    right: -15px;
}
.contact strong{color:#003b7c;font-size:1.7em;font-weight:600;margin-bottom:10px;display:inline-block;}
.contact input{width:100%;font-size:1.4em;border:none;border-bottom:1px solid #888;padding:10px 0;}
.contact textarea{width:calc(100% - 40px);height:200px;font-size:1.4em;border:1px solid #888;display:inline-block;padding:20px}

.btnbox button{font-size:1.6em;padding:20px 60px}

@media (max-width: 980px){
.contact .sub_guide{font-size:2em;margin:1em 0}
.contact{padding:5%;border-radius:0}
.contact strong{font-size:1.3em;margin:0}
.note strong{margin-bottom:3%}
.contact input{font-size:1.1em}
.contact ul{display:block;padding:5%;}
.contact ul:nth-of-type(2){padding-top:0;padding-bottom:1% !important;}
.contact ul:last-child{padding-bottom:1% !important;}
.contact li{width:100%}
.contact textarea{font-size:1.1em}
.btnbox button{font-size:1.4em;}
}