@charset "UTF-8";
body{min-width: 1280px}
#header{ background: rgb(211,238,252);
background: linear-gradient(180deg, rgba(211,238,252,1) 0%, rgba(255,255,255,0.1) 70%, rgba(196,241,173,1) 100%); }
.imt{display: flex; align-items: center; line-height: 1; font-size: 12px; margin-top:1%}
.wraps{max-width:1280px; margin: 0 auto;}

.imt span{display: flex; align-items: center; margin-right:5px;}
.imt span b{display: block; margin: 0 5px}
.imt img{height: 12px; line-height: 0}

#index_top{position: relative; background: url("../img/home/header_bg.png") no-repeat right center; background-size: auto 80%}

#top_contens{padding-top: 1.5%}
#top_contens h1 img{width:35%; margin-bottom: 1%}

#top_contens .tbtn_area{display: flex; flex-direction: column;align-items: flex-start;padding: 3% 0}
#top_contens .tbtn_area div{display: flex; align-items: center; width: 100%}
#top_contens .tbtn_area .login_etc{ font-size:14px; margin-bottom: 20px}
#top_contens .tbtn_area .login_etc span{padding-left:20px; background: url("../img/icon/in.png") no-repeat left center; background-size: auto 100%; line-height: 1; text-decoration: underline; cursor: pointer}
#top_contens .tbtn_area .login_etc span:first-child{font-size: 18px; font-weight: bold; margin-right: 20px}

#top_contens form{padding:15px; padding-bottom: 10px; background-color: rgba(80,168,45,.5); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1); border: 1px solid #e7e7e7}
#top_contens form div{margin-bottom: 10px}
#top_contens form div input{width: 200px;}
#top_contens form div p{margin: 0 15px}
#top_contens form .btn{padding: 0 30px}
#top_contens form label{cursor: pointer; user-select: none}


#top_contens .tbtn_area .t_btn{display: flex; align-items: center;position: relative;  border-radius: 100px; margin-right: 2%;  border: 2px solid #e4007f; font-weight: bold; user-select: none;padding:0 35px; height: 50px;cursor: pointer}
#top_contens .tbtn_area .t_btn *{position: relative; z-index: 2;}
#top_contens .tbtn_area .t_btn:before{position: absolute; left:50%; top: 0; width:0; height: 100%; background-color: #f7f24d; content: ""; z-index:0;border-radius: 100px; transition: all .2s ease-in-out; opacity: 0}
#top_contens .tbtn_area .t_btn:hover:before{left:0; width: 100%; opacity: 1}
#top_contens .tbtn_area .t_btn img{height:24px;}
#top_contens .tbtn_area .t_btn span{display: block; margin-left:15px; font-size: 24px; line-height: 0; }


#t_qa_contents{padding:3% 0 7% 0; display: flex; justify-content: space-between; overflow: hidden}
#t_qa_contents dt{width: 50%;}
#t_qa_contents dt span{display: flex; justify-content:center; align-items:center; font-size:75px; line-height: 1.2; height:calc(50% - 50px);text-align: center; font-weight: bold; word-break: break-all; color:#333}
#t_qa_contents dt b{display: block; text-align: center; height:50%}
#t_qa_contents dt b img{width: 170px}
#t_qa_contents dd{display: flex; width:47%; padding:3% 0; flex-direction: column; border: 2px solid #ffb6e2; border-radius: 20px;background: url("../img/home/ribon.png") no-repeat center 8%; background-size:90% auto}
#t_qa_contents dd span{font-size: 20px;letter-spacing:0.08em; display: block; text-align: center; margin:5% 0}
#t_qa_contents dd h2{font-size: 45px;color: #3d3d3d; text-align: center; line-height: 1; margin-top: 25%}
#t_qa_contents dd h2 font{color: #000e}
#t_qa_contents dd h2 strong{color:#e4007f}

#q_a_area{display: flex; align-items: center; padding:0 5%; overflow: hidden}
#q_a_area b{position: relative; font-size: 24px; font-weight: normal; line-height: 1.5; min-width:100%;transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#q_a_area b font{display: flex; justify-content: center; align-items: center; width:45px; height:45px; color: #fff; border-radius: 50%; font-weight: bold; font-size:30px;background-color:#71C6C4; line-height: 1; margin-bottom: 5px}
#q_a_area .a{transform: translateX(10%); opacity: 0}
#q_a_area .a font{background-color:#4D7AFF}
#t_qa_contents.active dd b.q{transform: translateX(-120%); opacity: 0}
#t_qa_contents.active dd b.a{transform: translateX(-100%); opacity: 1}
#qa_btn_area{padding: 0 5%}
#qa_btn_area .btn{user-select: none;display: flex; align-items: center;}

#t_qa_contents dd a{display: block; color: #fff; background-color:#db7fc3; font-size: 20px; text-align: center; border-radius: 50px; margin:10% 0 5% 0;font-weight: bold; padding: 1% 0}
#t_qa_contents dd a:hover{opacity: 0.6}
#t_qa_contents dd p{font-size: 18px; color:#7c3d69; text-align: center}


.sction{position: relative; height:520px;}
.sction:before,.sction:after{position: absolute;top: 0;width:50%; height: 100%; content:""}
.sction:before{left: 0}
.sction:after{right: 0}
.sction .wraps{position: relative; z-index: 1; height: 100%;}
.sction .wraps .bg{margin-top:-66px}
.sction .wraps *{ z-index: 2;}
.sction .wraps .b{position:absolute;width:25%; left:8%; top: 0}
.sction .img{position: absolute}

.item{position: absolute; right:2%; top: 18%; max-width:58%;}
.item h2{margin-left:11%; margin-bottom:3%}
.item h2 img:nth-child(2){display: none}
.item h2 img{height:65px;}


.item_contents{display: flex; overflow: hidden}
.slide_contents{display: flex; overflow: hidden; padding: 0 30}

.item.x{position: absolute; top: 25%;}
.item.x h2{margin-bottom:3%; margin-left:23%; width:77%;}
.item.x h2 img{height:65px;}
.item.x .item_contents{padding:10px 6.5%; justify-content: center}
.item.x .s_item{width: 28.4%;}
.slider{padding: 0 6%;}
.slick-arrow{width:calc(6% + 2px);}

#s1{margin-top: 0}
#s1.sction .wraps .b {top:13%}
#s1:before{background-color:#453e77}
#s1:after{background-color:#7270a0}

#s2{height: 522px}
#s2 .bg{margin-top: -64px}
#s2.sction .wraps .b {top:25%}
#s2 .img{ left: 8%; top: -25%; width: 25%}
#s2:before{background-color:#4cad83}
#s2:after{background-color:#016d3e}

#s3 .item{top: 35%}
#s3 .item h2{margin-left: -420px; margin-top: -140px;}
#s3 .item h2 img{height: 130px}
#s3.sction .wraps .b {top:30%}
#s3 .img{ right: 9%; top: -18%; width: 25%}
#s3:before{background-color:#57c4f1}
#s3:after{background-color:#a5e5f9}

#s4.sction .wraps .b {top:25%}
#s4 .img{ left: 20%; top: -18%; width: 20%}
#s4:before{background-color:#ef8201}
#s4:after{background-color:#ef5d01}

#s5.sction .wraps .b {top:16%;}
#s5 .img{ right: 10%; top: -19%; width:25%}
#s5:before{background-color:#005190}
#s5:after{background-color:#3788bf}

#s6 .bg{margin-top:-67px}
#s6.sction .wraps .b {top:30%}
#s6 .img{ left:18%; top: -25%; width:23%}
#s6:before{background-color:#acd300}
#s6:after{background-color:#a5bb24}

#s7.sction .wraps .b {top:25%}
#s7 .item{width: 742.4px; top: 25%}
#s7 .img{ right:15%; top: -16%; width: 20%}
#s7:before{background-color:#e75197}
#s7:after{background-color:#f27cb7}

@media screen and (max-width: 640px){
	.wraps{max-width: 100%; padding: 0 3%; display: flex; flex-direction: column; align-items: center}
	#top_contens h1,.sction::after,.sction .bg{display: none}
	#index_top{background: url("../img/home/header_bg.png") no-repeat center top;background-size:70% auto; padding-top:63%}
	
	
	
	.tbtn_area{flex-direction: column}

	#top_contens .imt{margin-bottom:3%}
	#top_contens .tbtn_area{padding: 5% 0; align-items: center}
	
	#top_contens .tbtn_area .login_etc{font-size:3vw;}
	#top_contens .tbtn_area .login_etc span:first-child{font-size: 3.2vw}
	#top_contens .tbtn_area form{width:90%; position: relative; padding-bottom: 15px}
	#top_contens .tbtn_area form div{flex-direction: column; margin-bottom: 0 }
	#top_contens .tbtn_area form div input,#top_contens .tbtn_area form p{width: 100%}
	#top_contens .tbtn_area form p{margin: 3% 0}
	#top_contens .tbtn_area form div .btn{margin-top:35px}
	#top_contens .tbtn_area .t_btn{margin-bottom: 5%;padding:2% 6%; height: auto}
	#top_contens .tbtn_area .t_btn span{font-size: 4vw; }
	#top_contens .tbtn_area label{position: absolute;top: 115px;}
	#t_qa_contents{flex-direction: column; align-items: center; padding-bottom: 20%}
	#t_qa_contents dt{width: 90%; margin-bottom:10%;}
	#t_qa_contents dt span{ font-size: 14.64vw; height: auto; margin-bottom: 5%}
	#t_qa_contents dt b img{width: 40%}
	#t_qa_contents dd{width: 90%}
	#t_qa_contents dd h2{font-size:7.32vw}
	#t_qa_contents dd span{font-size: 3.3vw}
	#t_qa_contents dd b{font-size:4vw}
	#t_qa_contents dd p{font-size: 2.975vw}
	
	#q_a_area b font{font-size:6vw; width:8vw; height:8vw}
	
	.sction{height: auto!important; padding:20% 0}
	.sction:before{position: absolute; width: 100%; height: 100%; left: 0; top: 0;content: "";}
	.sction .wraps .b{position: relative; top: 0!important; left: 0!important; width: 50%; margin-bottom: 5%}
	.item{position: relative; max-width: 100%; right: 0; top: 0}
	
	.item h2 img:first-child{display: none}
	.item h2 img:nth-child(2){display: block}
	.item h2 img{height: auto !important}
	.slick-list.draggable{padding: 10px 0}
	.item.x{position: relative; top: 0}
	.item.x h2{margin-left: 0;}
	.item.x .s_item {width: 41.675%;}
	.item.x .item_contents{ padding: 10px 0}
	#s3 .item h2{margin: 0}
	#s2 .img{ left:5%; top: -30%; width:30%}
	#s3 .img{ right:5%; top: -30%; width: 30%}
	#s4 .img{ left: 5%; top: -30%; width: 30%}
	#s5 .img{ right: 5%; top: -30%; width:35%}
	#s6 .img{ left:5%; top: -30%; width:30%}
	#s7 .img{ right:5%; top: -30%; width:30%}
	
	#s1{ background: rgb(69,62,119);
background: linear-gradient(90deg, rgba(69,62,119,1) 0%, rgba(114,112,160,1) 100%); }
	#s2{ background: rgb(76,173,131);
background: linear-gradient(90deg, rgba(76,173,131,1) 0%, rgba(1,109,62,1) 100%); }
	#s3{ background: rgb(87,196,241);
background: linear-gradient(90deg, rgba(87,196,241,1) 0%, rgba(165,229,249,1) 100%); }
	#s4{ background: rgb(239,130,1);
background: linear-gradient(90deg, rgba(239,130,1,1) 0%, rgba(239,93,1,1) 100%); }
	#s5{ background: rgb(0,81,144);
background: linear-gradient(90deg, rgba(0,81,144,1) 0%, rgba(55,136,191,1) 100%); }
	#s6{ background: rgb(172,211,0);
background: linear-gradient(90deg, rgba(172,211,0,1) 0%, rgba(165,187,36,1) 100%); }
	#s7{ background: rgb(231,81,151);
background: linear-gradient(90deg, rgba(231,81,151,1) 0%, rgba(242,124,183,1) 100%); }
	
	#s1:before{background: url("../img/icon/line_bg.png") repeat left top; content: ""; background-size:2% auto; }
	#s2:before,#s3:before,#s5:before,#s7:before{background: url("../img/icon/dot_bg.png") repeat left top; content: ""; background-size:3% auto; }
	#s4:before,#s6:before{background: url("../img/icon/yline_bg.png") repeat left top; content: ""; background-size:auto 10px}
	


}