@charset "utf-8";

/*Montserrat*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
/*{font-family: 'Montserrat', sans-serif;}*/


/*공통****************************************/
#multipleContentsDiv_template_07_22,
#multipleContentsDiv_template_07_31 {max-width:1400px;overflow:hidden;}
@media all and (max-width:1400px) {
	#multipleContentsDiv_template_07_22,
	#multipleContentsDiv_template_07_31{max-width:94%;}
}


/*비주얼슬로건****************************************/
.visual_slogan{position:absolute;top:37%;left:50%;width:1400px !important;margin-left:-700px !important;z-index:1;}
.visual_slogan p{color:#FFF;line-height:1.1;padding-bottom:10px;}
.visual_slogan .p_1{font-size:32px;font-weight:300;}
.visual_slogan .p_2{font-size:42px;font-weight:500;}
.visual_slogan .p_3{font-size:22px;font-family: 'Montserrat', sans-serif;font-weight:500;}
@media all and (max-width:1400px) {
	.visual_slogan{left:5%;width:90% !important;margin-left:0 !important;}
	.visual_slogan .p_1{font-size:22px;}
	.visual_slogan .p_2{font-size:32px;}
	.visual_slogan .p_3{font-size:18px;}
}
@media all and (max-width:768px) {
	.visual_slogan{top:30%;}
	.visual_slogan .p_1{font-size:16px;}
	.visual_slogan .p_2{font-size:22px;}
	.visual_slogan .p_3{font-size:16px;}
}


/*배너5개****************************************/
#multipleDiv_template_07_22 {margin-top:-53px;position:relative;z-index:1;}
.banner_5_5{}
.banner_5 ul{display:flex;justify-content:space-between;}
.banner_5 ul li{background:#f2f2f2;width:100%;margin:0 10px;}
.banner_5 ul li a{display:flex;justify-content:space-between;align-items:center;padding:30px 25px;line-height:1.15;}
.banner_5 ul li a strong{font-size:20px;font-weight:400;width:calc(100% - 40px);}
.banner_5 ul li a span{font-size:14px;font-family: 'Montserrat', sans-serif;font-weight:600;color:#9b9b9b;display:block;padding-top:10px;}
.banner_5 ul li a:after{content:"";display:block;width:38px;height:38px;transition: all ease .5s;}
.banner_5 ul li:nth-child(1) a:after{background:url(../../images/main/bannar_icon01.png) no-repeat center;}
.banner_5 ul li:nth-child(2) a:after{background:url(../../images/main/bannar_icon02.png) no-repeat center;}
.banner_5 ul li:nth-child(3) a:after{background:url(../../images/main/bannar_icon03.png) no-repeat center;}
.banner_5 ul li:nth-child(4) a:after{background:url(../../images/main/bannar_icon04.png) no-repeat center;}
.banner_5 ul li:nth-child(5) a:after{background:url(../../images/main/bannar_icon05.png) no-repeat center;}
@media all and (max-width:1280px) {
	.banner_5 ul li{margin:0 5px;}
	.banner_5 ul li a strong{font-size:18px;}
	.banner_5 ul li a span{font-size:12px;}
}
@media all and (max-width:1024px) {
	.banner_5 ul{flex-wrap:wrap;}
	.banner_5 ul li{width:49.5%;margin:0.5% 0;}
	.banner_5 ul li a{padding:15px;}
}
@media all and (max-width:768px) {
	.banner_5 ul li a strong{font-size:16px;width:calc(100% - 30px);}
	.banner_5 ul li a:after{width:25px;height:25px;background-size:100% !important;}
}
@media all and (max-width:380px) {
	.banner_5 ul li{width:100%;}
}


/*quickMenu****************************************/
.quickMenu{height:100%;background:url(../../images/main/quick_bg.png) no-repeat center;background-size:cover;padding:35px 15px;}
.quickMenu h3{line-height:1;color:#000;font-size:24px;font-weight:700;}
.quickMenu ul{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:40px;overflow-y:auto;max-height:260px;}
.quickMenu li{width:50%;padding:5px 3px;}
.quickMenu a{display:block;background:#FFF;border-radius:30px;padding:10px;text-align:center;font-size:16px;}
@media all and (min-width:1025px) and (max-width:1280px) {
	.quickMenu li{width:100%;}
}
@media all and (max-width:768px) {
	.quickMenu{padding:20px;}
	.quickMenu h3{font-size:20px;}
	.quickMenu ul{margin-top:15px;}
}
@media all and (max-width:320px) {
	.quickMenu li{width:100%;}
}


/*배너1개****************************************/
.banner_1{height:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:url(../../images/main/banner_1_bg.jpg) no-repeat center;background-size:cover;}
.banner_1 a{display:block;width:100%;line-height:1.3;color:#FFF !important;font-size:25px;font-weight:500;text-align:center;}
.banner_1 a span{display:block;}
.banner_1 a:before{content:"";display:inline-block;width:100px;height:100px;margin-bottom:40px;background:url(../../images/main/banner_1_img.png) no-repeat center;}
@media all and (max-width:768px) {
	.banner_1 a{font-size:20px;padding:15px 0;}
	.banner_1 a:before{width:50px;height:50px;margin-bottom:5px;background-size:50px !important;}
}


/*배너4개****************************************/
.banner_4{height:100%;background:url(/sites/style_guide/images/common/pattern_11.png);padding:5px;}
.banner_4 ul{display:flex;justify-content:space-between;flex-wrap:wrap;background:#FFF;}
.banner_4 li{width:25%;padding:30px 0;border-right:1px dotted #DDD;}
.banner_4 li:last-child{border:0;}
.banner_4 a{display:block;text-align:center;}
.banner_4 a img{display:block;margin:0 auto;}
.banner_4 a span{display:inline-block;margin-top:5px;font-size:18px;font-weight:400;color:#2c2c2c;}
.banner_4 a span:after{content:"";display:block;width:100%;height:2px;background:#77a3d5;margin-top:3px;transform:scale(0);}
@media all and (max-width:1024px) {
	.banner_4 li{padding:15px 0;}
	.banner_4 a img{max-width:70px;}
}
@media all and (max-width:768px) {
	.banner_4 li{padding:10px 0;}
	.banner_4 a img{max-width:40px;}
	.banner_4 a span{font-size:14px;}
}


/*HOVER****************************************/
@media all and (min-width:1025px) {
	.banner_5 ul li:hover{background:linear-gradient(180deg, rgba(0,96,255,1) 0%, rgba(56,163,255,1) 100%);}
	.banner_5 ul li:hover a,
	.banner_5 ul li:hover a span{color:#FFF;}
	.banner_5 ul li:nth-child(1):hover a:after{background:url(../../images/main/bannar_icon01_w.png) no-repeat center;}
	.banner_5 ul li:nth-child(2):hover a:after{background:url(../../images/main/bannar_icon02_w.png) no-repeat center;}
	.banner_5 ul li:nth-child(3):hover a:after{background:url(../../images/main/bannar_icon03_w.png) no-repeat center;}
	.banner_5 ul li:nth-child(4):hover a:after{background:url(../../images/main/bannar_icon04_w.png) no-repeat center;}
	.banner_5 ul li:nth-child(5):hover a:after{background:url(../../images/main/bannar_icon05_w.png) no-repeat center;}

	.quickMenu a:hover{background:#083f6e;color:#FFF;}

	.banner_4 a:hover span{color:#006ec0;}
	.banner_4 a:hover span:after{transform:scale(1);transition: all 0.5s cubic-bezier(0.2, 0, 0.3, 1);}
}