@charset "utf-8";


/* Animation */
.user#main #visual .slogan,
.user#main #visual .slogan h2 img,
.user#main #visual .slogan span,
.user#main #visual .slogan .link_btns a,
.user#main #visual .js_slide .control ul,
.family li a,
.user#main #visual
{
	transition : all 0.3s ease;
    -webkit-transition : all 0.3s ease;
}

/*아이콘*/
.size-20 {font-size: 20px !important;}
.size-24 {font-size: 24px !important;}
.size-40 {font-size: 40px !important;}
.white{ color: #fff;}


/*공통*/
.d-flex{ display: flex; }
.h-align-sb{ justify-content: space-between;}
.v-align-center{ align-items: center;}



/* //////////////////////////////////////////////////////////////////////////////

	Visual

////////////////////////////////////////////////////////////////////////////// */
.user#main #visual{height: 600px;border-bottom-left-radius: 120px;overflow: hidden;}
.user#main #visual .js_slide{height:100%;}

.user#main #visual .slogan{position:relative;z-index:2;padding-top: 370px;}
.user#main #visual .slogan h2 img{width:563px;}
.user#main #visual .slogan span{display:block;margin-left: 15px;margin-top: 7px;font-size: 22px;/* font-weight:300; */text-shadow:5px 2px 11px rgba(88, 88, 88, 0.6);color:#fff;line-height: 1.4;}
.user#main #visual .slogan span em{font-weight:600; font-style:normal;}
.user#main #visual .slogan .link_btns{margin-top:35px;}
.user#main #visual .slogan .link_btns a{display:inline-block; height:50px; line-height:48px; padding:0 32px; background-color:rgba(55,76,96,0.85); font-size:19px; color:#fff;}
.user#main #visual .slogan .link_btns a:after{content:""; display:inline-block; width:26px; height:7px; margin-left:15px; background:url(../../../images/site/kor/main/link_btns_arrow.png) no-repeat right top; vertical-align:middle;}
.user#main #visual .slogan .link_btns a:hover{background-color:rgb(42, 59, 76); text-decoration:none;}

.user#main #visual .js_slide .control{position:relative; left:auto; top:auto; bottom:auto; max-width:1210px; height:auto; margin:40px auto 0; padding:0 15px; text-align:left; box-sizing:border-box;}
.user#main #visual .js_slide .control .btn_left,
.user#main #visual .js_slide .control .btn_right{display:none;}
.user#main #visual .js_slide .control .btn_stop{width:10px; height:15px; background: url(../../../images/site/kor/main/control_btn_stop.png) no-repeat center;}
.user#main #visual .js_slide .control .btn_play{width:10px; height:15px; background: url(../../../images/site/kor/main/control_btn_play.png) no-repeat center;}
.user#main #visual .js_slide .control .btn_stop,
.user#main #visual .js_slide .control .btn_play{position:static; border:0;}
.user#main #visual .js_slide .control ul{position:static; display:inline-block; width:auto; margin-left:175px;}
.user#main #visual .js_slide .control ul li{margin-right:13px;}
.user#main #visual .js_slide .control ul li:first-child{margin-left:0;}
.user#main #visual .js_slide .control ul li a{width:15px; height:15px; background-color:#1455a6;}
.user#main #visual .js_slide .control ul li a.on{width:15px; background-color:#fff;}

.user#main #visual .js_slide .move ul li{overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:cover; text-indent:-2000px;}
@media screen and (max-width:1440px){
	
	.user#main #visual .slogan h2 img{width:500px;}
	.user#main #visual .slogan span{ font-size: 18px;}
	.user#main #visual .slogan .link_btns{margin-top:28px;}
	.user#main #visual .slogan .link_btns a{height:46px; line-height:46px; padding:0 28px; font-size:18px;}
	.user#main #visual .js_slide .control ul{margin-left:160px;}
}

@media screen and (max-width:1024px){
	.user#main #visual{ border-bottom-left-radius: 0;}
	.user#main #visual .js_slide .control ul{margin-left:165px;}
}

@media screen and (max-width:640px){
	.user#main #visual{height:300px;}
	.user#main #visual .slogan{margin-left:0; padding-top:230px; }
	.user#main #visual .slogan h2 img{width:300px;}
	.user#main #visual .slogan span{ display: none;}
	.user#main #visual .js_slide .control{text-align:center;}
	.user#main #visual .js_slide .control ul{margin-left:0;}
}



/*섹션공통*/
.sec01 h3, .sec02 h3, .sec03 h3{ font-size: 30px; font-weight: 600; margin: 0 0 35px 0; color: #000;}
a.more{ position: absolute; top: 0; right: 0; text-decoration: none; border-radius: 30px; padding: 3px 20px; font-weight: 500;}


.sec01{ padding: 70px 0; background-image:url(../../../images/site/nsurotc/main/rotc-stroke-bg.gif); background-repeat: no-repeat; background-position: right 20px center;}
.sec01 .photo{ position: relative;}
.sec01 .photo .js_slide.type_02{ width: 578px; height: 420px;border-radius: 10px; overflow: hidden; box-shadow: 5px 6px 15px 13px rgba(0, 0, 0, 0.04);}
.sec01 .photo .js_slide.type_02 .control{ top: auto; height: 55px; right: 0; width:233px ; border-left: 1px solid #dedede; display: flex; justify-content: flex-end; align-items: center;}
.sec01 .photo .js_slide.type_02 .control .count{ background-color: #074897; line-height: 55px; padding: 0 25px ; color: #fff; font-weight: 600;}
.sec01 .photo .js_slide.type_02 .control .count span{ opacity: 0.6;}
.sec01 .photo .js_slide .control a[class*="btn_"]{ width: 50px; height: 50px; position: relative;;background: rgba(0,0,0,0) url(../../../images/site/skin/slider_control.png) no-repeat;}
.sec01 .photo .js_slide .control a[class*="btn_"]::after{ content: ""; display: inline-block; width: 1px; height: 30px; background-color: #dedede; position: absolute; 
	right: 0; top: 10px;}
.sec01 .photo .js_slide .control a.btn_right{ background-position: 0 -50px;}
.sec01 .photo .js_slide .control a.btn_play{ background-position: 0 -150px;}
.sec01 .photo .js_slide .control a.btn_stop{ background-position: 0 -100px;}
.sec01 .photo .js_slide .move ul li a{ border: none;}
.sec01 .photo .js_slide.type_02 em{display:block; position: absolute; bottom: 0;z-index: 99; height: 55px; background-color: #fff; width: 100%; 
	text-align: left; }
.sec01 .photo .js_slide.type_02 em i { display: inline-block;padding: 0 0 0 20px; font-style: normal;overflow:hidden;white-space:nowrap; 
	text-overflow:ellipsis;width: 50%; font-weight: 500;  color: #000; font-size: 17px; line-height: 55px;}
.sec01 .photo a.more{ background-color: #e6ecf4; color: #074897;}

.sec01 .support{ flex: 1; margin-left: 50px;}
.sec01 .support .in{ background-color: #445641 ; background-image:url(../../../images/site/nsurotc/main/support-bg01.jpg); background-repeat: no-repeat; border-radius: 10px; 
	color: #fff; padding: 50px 0 0 70px;  height: 420px; box-sizing: border-box; position: relative; overflow: hidden;}
.sec01 .support .in:after{ content: ""; display: block; width: 100%; height: 100%;background-image:url(../../../images/site/nsurotc/main/support-bg02.png);
position: absolute; right: 0; bottom: 0; background-repeat: no-repeat; background-position: right bottom ;}
.sec01 .support .in strong{ font-size: 38px; margin: 70px 0 26px 0; display: block; position: relative; z-index: 2;}
.sec01 .support .in ul{ margin: 0 0 40px 0; position: relative; z-index: 2;}
.sec01 .support .in ul li{ font-size: 20px; margin: 3px 0;}
.sec01 .support a{padding: 10px 18px 10px 30px;  z-index: 2;border-radius: 30px;  background-color: #fff; color: #000; font-weight: 500; font-size: 17px; text-decoration: none; position: relative; display: inline-block;} 
.sec01 .support a span:first-child{ margin-right: 10px;}

.sec02{ background-color: #d1e3f9;  position: relative; overflow: hidden; padding: 70px 0;}
.sec02::before{ content: ""; display: block;background-image:url(../../../images/site/nsurotc/main/sec02-bg.png); background-repeat: no-repeat; background-position: right bottom;
opacity: 0.6; width: 912px; height: 398px; position: absolute; right: 0; bottom: 0;
}
.sec02 h3{ text-align: center;}
.sec02>div>div.d-flex{ margin: 0 -20px; position: relative;} 
.sec02 .benefit-01,  .sec02 .benefit-02{ flex: 1; margin: 0 20px;}
.sec02 .benefit-01 ul li, .sec02 .benefit-02 ul li{ flex: 1;}
.benefit-list{ margin: 0 -9px;}
.benefit-list li strong{ font-size: 22px; display: block; margin: 0 0 15px 0;}
.benefit-list li{ background-color: #fff; margin: 0 9px; border-radius: 10px;box-shadow: 5px 6px 12px 10px rgba(0, 0, 0, 0.04); padding: 44px 30px 44px 136px;
 background-position: 25px center;}
.benefit-01 .benefit-list li:first-child{background-image:url(../../../images/site/nsurotc/main/benefit-ico01.png); background-repeat: no-repeat;}
.benefit-01 .benefit-list li:last-child{background-image:url(../../../images/site/nsurotc/main/benefit-ico02.png); background-repeat: no-repeat;}
.benefit-02 .benefit-list li:first-child{background-image:url(../../../images/site/nsurotc/main/benefit-ico03.png); background-repeat: no-repeat;}
.benefit-02 .benefit-list li:last-child{background-image:url(../../../images/site/nsurotc/main/benefit-ico04.png); background-repeat: no-repeat;}
.sec02 .more{ background-color: #004ab8; color: #fff; padding: 8px 10px 8px 20px; right: 15px; top: -5px; }


.sec03{ background-color: #eff4fa; padding: 90px 0;}
.sec03 h3{ text-align: center; font-size: 37px; margin: 0 0 45px 0;}
.family, .sns{ border-radius: 10px; overflow: hidden;}
.family{flex:0 1 74%; background-image:url(../../../images/site/nsurotc/main/family-bg.jpg);background-repeat: no-repeat; background-size: cover; }
.family li{ width: calc(100% / 4); }
.family li:not(:first-child){ border-left: 1px solid rgba(255, 255, 255, 0.5);}
.family li a{ font-size: 18px; font-weight: 600; display: block; padding:180px 0 50px 0 ; text-align: center; text-decoration: none; color: #000; 
	background-repeat: no-repeat; background-position: center 55px; height: 100%;}
.family li:first-child a{background-image:url(../../../images/site/nsurotc/main/family-ico01.png);}
.family li:nth-child(2) a{background-image:url(../../../images/site/nsurotc/main/family-ico02.png);}
.family li:nth-child(3) a{background-image:url(../../../images/site/nsurotc/main/family-ico03.png);}
.family li:nth-child(4) a{background-image:url(../../../images/site/nsurotc/main/family-ico04.png);}
.family li a:hover{ background-color:rgba(7, 72, 151, 0.85); color:#fff; height: 100%;}

.sns{ border: 3px solid #1a569f; flex:0 1 22.5%; padding: 10px 20px; box-sizing: border-box;  flex-wrap: wrap; }
.sns li{ width: 50%; box-sizing: border-box;} 
.sns li:nth-child(even){ border-left: 1px solid #dedede;}
.sns li:nth-child(1), .sns li:nth-child(2){ border-bottom: 1px solid #dedede;}
.sns li a{ text-align: center; display: block; padding: 80px 0 10px 0;background-repeat: no-repeat; background-position: center 14px; font-weight: 500; color:#000; text-decoration: none;}
.sns li:first-child a{background-image:url(../../../images/site/nsurotc/main/sns-ico05.png);}
.sns li:nth-child(2) a{background-image:url(../../../images/site/nsurotc/main/sns-ico02.png);}
.sns li:nth-child(3) a{background-image:url(../../../images/site/nsurotc/main/sns-ico01.png);}
.sns li:nth-child(4) a{background-image:url(../../../images/site/nsurotc/main/sns-ico03.png);}




@media screen and (max-width:1220px){
	.sec01 h3, .sec02 h3, .sec03 h3{ font-size: 23px;}

	.sec01{ background-image: none;}
	.sec01 .photo{ flex: 0 1 50%;}
	.sec01 .photo .js_slide.type_02{ width: 100%;}
	.sec01 .photo .js_slide.type_02, .sec01 .support .in{height: 340px;}
	.sec01 .support{ margin-left: 30px;}
	.sec01 .support .in{ padding: 30px 0 0 30px;}
	.sec01 .support .in:after{ background-size: 50% auto;}
	.sec01 .support .in strong{ margin: 30px 0 20px 0; font-size: 30px;}
	.sec01 .support .in ul li{ font-size: 17px;}
	
	
	.sec02>div>div.d-flex{ flex-direction: column;}
	.benefit-list li p br{ display: none;}
	.sec02 .benefit-01 { margin-bottom: 45px;}



	.bnr{ flex-direction: column;}
	.family li a{ height: auto;}
	.family li a:hover{ height: auto;}
  .sns{ flex-wrap: nowrap; margin-top:30px ;}
	.sns li:nth-child(even){ border-left: none;}
	.sns li:nth-child(1), .sns li:nth-child(2){ border-bottom: none;}
}


@media screen and (max-width:767px){
	.sec01 h3, .sec02 h3, .sec03 h3{ font-size: 22px; margin: 0 0 20px 0;}

	.sec01, .sec02, .sec03{ padding: 50px 0;}
	.sec01>div.d-flex{ flex-direction: column;}
	.sec01 .photo{ margin-bottom: 40px;}
	.sec01 .photo .js_slide.type_02{ height: 260px;}
	.sec01 .photo .js_slide.type_02 .control{ width: 177px;}
	.sec01 .photo .js_slide.type_02 .control .count{ padding: 0 15px;}
	.sec01 .photo .js_slide .control a[class*="btn_"]::after{ display: none;}
	.sec01 .photo .js_slide .control a[class*="btn_"]{ right:5px;}
	.sec01 .photo .js_slide.type_02 em i{ font-size: 14px; width: 45%;}
	.sec01 .support .in{ height:auto; padding: 30px;}
	.sec01 .support{ margin-left: 0;}
	.sec01 .support .in:after{ background-size: 170px auto;}
	.sec01 .support .in strong{ font-size: 22px; margin: 0 0 15px 0;}
	.sec01 .support .in ul{ margin: 0 0 20px 0;}
	.sec01 .support .in ul li{ font-size: 15px;}
	.sec01 .support a{ font-size: 14px; padding: 7px 18px 7px 30px}

	.benefit-list{ flex-direction: column;}
	.benefit-list li{ margin-bottom: 15px;}
	.benefit-list li strong{ font-size: 18px;}
	.benefit-list li{ background-size:50px auto; padding: 30px 20px 30px 98px;}
	.sec02 a.more{position: relative;display: inline-block;margin: 15px 0 0 0;left: 50%;transform: translateX(-50%);}

	.family { flex-wrap: wrap;}
	.family li{width: calc(100% / 2); box-sizing: border-box;}
	.family li:nth-child(1), .family li:nth-child(2){border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
	.family li a{ background-size: auto 49px; font-size: 15px; padding: 80px 0 20px 0; background-position:center 20px ;}
	.sns{padding: 10px;}
	.sns li a{ background-size:40px auto ; padding: 60px 0 10px 0; font-size: 14px;}
}

@media screen and (max-width:500px){
	.sec01, .sec02, .sec03{ padding: 44px 0;}
	.sec01 h3, .sec02 h3, .sec03 h3 { font-size: 20px;}
	.sec01 .support .in:after{ background-size: 150px auto;}
	.benefit-list li strong{ font-size: 17px; margin: 0 0 5px 0;}
	a.more{ font-size: 15px;}
	.sec02 .benefit-01{  margin-bottom: 30px;}
	
}