@import url(common.css);
div.visual > ul > li > div.txt_wrap{ width: 100%;}

div.header-fixed{ box-shadow: 1px 2px 10px 0px;}
div.Top_Content{ background: #f8f8f8;}
div.Top_Content > div.visual_container .bx-wrapper{ height: 100%;}
div.Top_Content > div.visual_container .bx-wrapper .bx-viewport{ height: 100% !important;}
div.Top_Content > div.visual_container{ position: relative; width: 100%; height: calc(100vh - 185px);}
div.Top_Content > div.visual_container > div.rowb{ position: absolute; right: 250px; top: 50%; transform: translateY(-50%); width: 385px;}
div.Top_Content > div.visual_container > div.visual{ float: right; overflow: hidden; position: relative; height: 100%;}
div.Top_Content > div.visual_container > div.visual ul{ height: 100%;}
div.Top_Content > div.visual_container > div.visual ul > li{ position: relative; float: left; width: 33.3333%; height: 100%;}
div.Top_Content > div.visual_container > div.visual ul > li > img{ display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none;
-khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none;}
div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap{ position: absolute; left: 250px; top: 50%; transform: translateY(-50%);}

div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap > h2{ margin-bottom: 30px; font-weight: bold; font-size: 55px; color: #fff;}
div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap > p.desc{ font-weight: bold; font-size: 20px; font-weight: 400; line-height: 1.2; color: #fff;}
div.Top_Content > div.visual_container > div.visual > div.pagination{ position: absolute; left:50%; bottom: 20px; transform: translateX(-50%); margin: 0;}
div.Top_Content > div.visual_container > div.visual > div.pagination > a{ display: inline-block; width: 14px; height: 14px; margin-left: 5px; background: #cfcfcf; border-radius: 9999px;}
div.Top_Content > div.visual_container > div.visual > div.pagination > a.active{ background: #057a44;}
div.Top_Content > div.visual_container > div.visual > div.pagination > a:first-child{ margin-left: 0;}

section h2{ font-size: 60px; font-weight: bold; line-height: 1.2;}
p{ margin: 0;}
section.review{ padding: 90px 0 80px; background: url("/images/review_bg.jpg") no-repeat; background-size: cover;}
section.review h2{ margin: 0; margin-bottom: 50px; font-size: 45px; color: #fff; text-align: center;}
section.review > div.inner_wrap > div.info_wrap{ position: relative; display: flex; align-items: center; justify-content: space-around; width: 100%; max-width: 550px; padding: 55px 0; margin: 0 auto 60px;
background: #1e2025; border-radius: 20px;}
section.review > div.inner_wrap > div.info_wrap::after{ content: ""; position: absolute; left: 90%; top: 50%; display: block; width: 150px; height: 165px; background: url("/images/calc.png");
background-size: cover;}
section.review div.info_wrap > p{ text-align: center; color: #fff;}
section.review div.info_wrap > p.ko{ font-size: 30px; line-height: 1.2;}
section.review div.info_wrap > p.vs{ font-size: 24px;}
section.review div.info_wrap > p.over{ font-size: 50px; color: #1cdb83; line-height: 1.2; animation: blind 1.5s infinite;}
@keyframes blind{
    0%{ opacity: 1;}
	50%{ opacity: 0;}
    100%{ opacity: 1;}
}
section.review div.view_box{ overflow: hidden;}
section.review div.view_box > ul{ width: 133.3333%;}
section.review div.view_box > ul > li{ float: left; width: 25%; padding: 17px;}
section.review div.view_box > ul > li:first-child{ margin-left: 0;}
section.review div.view_box > ul > li > div.info_wrap{ overflow: hidden; border-radius: 15px;}
section.review div.view_box > ul > li > div.info_wrap > div.img_wrap > img{ display: block; width: 100%; height: 100%; object-fit: cover;}
section.review div.view_box > ul > li > div.info_wrap > div.txt_wrap{ padding: 20px 0; text-align: center; background: #00235b;}
section.review div.view_box > ul > li > div.info_wrap > div.txt_wrap > p{ font-size: 24px; color: #fff; line-height: 1;}
section.review div.view_box > ul > li > div.info_wrap > div.txt_wrap > p > span{ font-size: 40px;}

div.contents h5{ font-size: 40px;}
.sec4.contents ul.cont{ margin-bottom: 50px}
div.contents > div.container > p.sub_title{ margin-bottom: 60px; font-size: 40px; font-weight: 300; line-height: 1.2; text-align: center;}
div.contents > div.container > p.sub_title > span{ display: block; margin-bottom: 10px;}

div.contents > div.container > button{ display: block; margin: 0 auto; padding: 20px 50px; background: #00235b; color: #fff; font-size: 28px;
border-radius: 10px; border: none; cursor: pointer;}
div.contents > div.container > button:hover{ background: #057a44; transition: all 0.2s;}

section.ban_1{ background: url("/images/ban_1_bg.png") no-repeat; background-size: cover;}
section.ban_1 > div.container{ display: flex;}
section.ban_1 div.medal{ width: 33.3333%;}
section.ban_1 div.medal > img{ display: block; width: 100%;}
section.ban_1 h2{ margin-bottom: 60px; margin-top: 0; color: #fff; text-align: center; line-height: 1;}
section.ban_1 div.info_wrap{ width: 66.6666%; padding: 90px 0 20px;}
section.ban_1 div.info_wrap > p.desc{ margin-bottom: 60px; font-size: 22px; color: #fff; text-align: center;}
section.ban_1 div.info_wrap ul > li{ float: left; width: calc((100% - 40px) / 3); padding: 18px 0; margin: 0 0 30px 20px; color: #fff; border: 1px solid #fff; border-radius: 999px;
font-size: 20px; text-align: center;}
section.ban_1 div.info_wrap ul > li:first-child{ margin-left: 0;}
section.ban_1 div.info_wrap > div.img_wrap{ animation: move 5s infinite;}
section.ban_1 div.info_wrap > div.img_wrap:hover{ animation-play-state:running;}
section.ban_1 div.info_wrap > div.img_wrap > img{ display: block; width: 100%;}
@keyframes move{
    0%{ transform: translateX(0);}
    100%{ transform: translateX(50%);}
}


section.differ{ padding: 90px 0;}
section.differ p.sub_title{ margin-bottom: 25px; font-size: 33px; color: #000; line-height: 1; text-align: center;}
section.differ h2{ margin-top: 0; margin-bottom: 60px; text-align: center;}
section.differ div.info_wrap > ul{ display: flex;} 
section.differ div.info_wrap > ul > li{ position: relative; width: 33.3333%; padding: 0 70px;}
section.differ div.info_wrap > ul > li:last-child::after{ display: none;}
section.differ div.info_wrap > ul > li::after{ content: ""; position: absolute; right: 0; top: 0; display: block; width: 1px; height: 100%; background: #ccc;}
section.differ div.info_wrap > ul > li > div.ico_wrap{ margin-bottom: 60px; text-align: center;}
section.differ div.info_wrap > ul > li > h3{ margin-top: 0; margin-bottom: 25px; font-weight: bold; font-size: 28px; color: #00235b; text-align: center;}
section.differ div.info_wrap > ul > li > p{ color: #000; font-weight: 400; text-align: center;}


section.ban_2{ padding: 40px 0; background: url("/images/ban_2_bg.jpg") no-repeat; background-size: cover;}
section.ban_2 div.container{ display: flex; justify-content: space-between;}
section.ban_2 div.container::before{ display: none;}
section.ban_2 div.container::after{ display: none;}
section.ban_2 h2{ width: 260px; color: #fff; font-size: 24px; margin: 0; margin-bottom: 15px;}
section.ban_2 div.img_wrap{ width: 460px;}
section.ban_2 div.img_wrap > img{ display: block; width: 100%;}
section.ban_2 button{ position: relative; display: block; background: none; border: none; color: #fff; font-size: 16px; cursor: pointer;}
section.ban_2 button::after{ content: ""; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); display: block; width: 20px; height: 20px;
background: url("/images/arrow_right_wh.png") no-repeat; background-size: cover;}

@media(min-width: 992px){
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap.txt_center{ left: 50%; top: 50%; transform: translate(-50%, -50%);}
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap.txt_center h2 img{ display: block; width: 150px; margin: 0 auto;}
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap.txt_center p.desc{ font-size: 35px; text-align: center;}

	section.box_graph{ padding: 90px 0; background: #ececec;}
	section.box_graph div.info_wrap{ display: flex; gap: 40px;}
	section.box_graph div.info_wrap + div.info_wrap{ margin-top: 80px;}
	section.box_graph div.info_wrap div.wrap_box{ width: calc((100% - 40px) / 2); padding: 30px; text-align: center; background: #fff;}
	section.box_graph div.info_wrap div.graph_box div.tit{ display: inline-block; margin-bottom: 10px; padding: 5px 15px; font-size: 20px; color: #fff; border-radius: 999px; background: #057a44;}
	section.box_graph div.info_wrap div.graph_box p.up{ font-weight: 900; font-size: 32px; font-style: italic;}
	section.box_graph div.info_wrap div.graph_box p.up span{ z-index: 1; position: relative; font-weight: 900;}
	section.box_graph div.info_wrap div.graph_box p.up span::after{ z-index: -1; content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 15px; background: #96ffb9;}
	section.box_graph div.info_wrap div.graph_box p.desc{ margin-bottom: 20px; font-weight: 400;}
	
	section.box_graph div.info_wrap div.graph_box div.graph_wrap{ display: flex; justify-content: space-around; align-items: flex-end; height: 300px; background-image: linear-gradient(to bottom, #e5e5e5 1px, transparent 1px); background-size: 1px 60px; background-position: center center;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph{ display: flex; flex-direction: column; align-items: center; width: 50%;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph1 div.hei{ width: 80px; height: 0; background: #999;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph1 div.hei.move{ height: 150px; transition: all 1s ease-in-out;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph2 div.hei{ width: 80px; height: 0; background: linear-gradient(0deg, #ff0000, #ffc907);}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph2 div.hei.move{ height: 240px; transition: all 1s ease-in-out;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph2 p{ color: #ff2502;}
	section.box_graph div.info_wrap div.graph_box div.pri{ display: flex; width: 100%; padding-top: 10px; border-top: 1px solid #000;}
	section.box_graph div.info_wrap div.graph_box div.pri p{ width: 50%; font-size: 19px; text-align: center;}
	section.box_graph div.info_wrap div.graph_box div.pri p.graph2_pr{ color: #ff2502;}
	
	section.box_graph div.info_wrap div.txt_wrap{ background: #222;}
	section.box_graph div.info_wrap div.txt_wrap div.tit{ margin-bottom: 20px; font-size: 28px; font-weight: 900; color: #ffdf4b; line-height: 1.2;}
	section.box_graph div.info_wrap div.txt_wrap div.img_wrap{ overflow: hidden; margin-bottom: 20px; border-radius: 5px;}
	section.box_graph div.info_wrap div.txt_wrap div.img_wrap img{ display: block; width: 100%;}
	section.box_graph div.info_wrap div.txt_wrap p.desc{ font-size: 18px; font-weight: 400; color: #fff; line-height: 1.5;}
	
	
}

@media(max-width: 991px){
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap.txt_center{ left: 50%; top: 50%; transform: translate(-50%, -50%);}
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap.txt_center h2 img{ display: block; width: 120px; margin: 0 auto;}
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap.txt_center p.desc{ font-size: 16px; text-align: center;}

	div.Top_Content > div.visual_container{ height: auto;}
	div.Top_Content > div.visual_container > div.visual{ float: none; width: 100%; height: 380px; margin-bottom: 20px;}
	div.Top_Content > div.visual_container > div.visual ul > li{ height: 380px;}
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap > h2{ font-size: 30px;}
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap > p.desc{ font-size: 18px; line-height: 1.2;}
	div.Top_Content > div.visual_container > div.rowb{ position: static; width: 100%; transform: translateY(0);}
	
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap{ width: 95%; left: 50%; transform: translate(-50%, -50%);}
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap > h2{ font-size: 22px; text-align: center;}
	div.Top_Content > div.visual_container > div.visual ul > li > div.txt_wrap > p.desc{ font-size: 16px; text-align: center;}
	

	section.review{ padding: 60px 0 50px;}
	section.review h2{ font-size: 30px;}
	section.review div.view_box > ul{ width: 400%;}
	section.review div.view_box > ul > li{width: 25%;}
	section.review div.info_wrap > p.ko{ font-size: 18px; line-height: 1.2;}
	section.review div.info_wrap > p.over{ font-size: 28px;}
	section.review > div.container > div.info_wrap{ margin-bottom: 50px;}
	section.review > div.container > div.info_wrap::after{ left: 87%; top: 62%; width: 67px; height: 77px;}
	section.review > div.inner_wrap > div.info_wrap{ width: 70%;}
	section.review > div.inner_wrap > div.info_wrap::after{ content: ""; position: absolute; left: 87%; top: 50%; display: block; width: 83px; height: 95px; background: url("/images/calc.png");
background-size: cover;}

	div.contents h2{ margin-bottom: 40px;}
	div.contents h5{ font-size: 30px;}
	div.contents > div.container > p.sub_title{ font-size: 23px;}
	div.contents > div.container > button{ width: 90%; padding: 20px 0; font-size: 18px;}

	section.ban_1 div.container{ display: block;}
	section.ban_1 h2{ font-size: 40px; margin-bottom: 40px;}
	section.ban_1 div.info_wrap > p.desc{ font-size: 20px; margin-bottom: 40px;}
	section.ban_1 div.container > div.medal{ margin: 0 auto 40px;}
	section.ban_1 div.info_wrap{ width: 100%; padding: 0;}
	section.ban_1 div.info_wrap ul > li{ width: 100%; margin: 0; margin-bottom: 20px;}
	section.ban_1 div.info_wrap > div.img_wrap{ animation: paused;}

	section.differ{ padding: 60px 0;}
	section.differ p.sub_title{ font-size: 30px;}
	section.differ h2{ font-size: 24px;}
	section.differ div.info_wrap > ul{ flex-direction: column;}
	section.differ div.info_wrap > ul > li{ width: 100%; padding: 20px; margin-bottom: 40px; border: 1px solid #ccc; border-radius: 10px; box-shadow: 2px 2px 5px 1px;}
	section.differ div.info_wrap > ul > li::after{ display: none;}
	section.differ div.info_wrap > ul > li > div.ico_wrap{ margin-bottom: 40px;}


	section.ban_2{ padding: 60px 0;}
	section.ban_2 div.container{ justify-content: center;}
	section.ban_2 div.container div.left_wrap{ display: flex; flex-direction: column; align-items: center;}
	section.ban_2 div.container div.left_wrap button{ width: 100px;}
	section.ban_2 h2{ width: 100%; font-size: 20px; text-align: center;}
	section.ban_2 div.img_wrap{ display: none; width: 100%;}
	
	
	section.box_graph{ padding: 90px 0; background: #ececec;}
	section.box_graph div.info_wrap{}
	section.box_graph div.info_wrap + div.info_wrap{ margin-top: 80px;}
	section.box_graph div.info_wrap div.wrap_box{ padding: 30px; text-align: center; background: #fff;}
	section.box_graph div.info_wrap div.graph_box div.tit{ display: inline-block; margin-bottom: 10px; padding: 5px 15px 2px; font-size: 18px; color: #fff; border-radius: 999px; background: #057a44;}
	section.box_graph div.info_wrap div.graph_box p.up{ font-weight: 900; font-size: 26px; font-style: italic;}
	section.box_graph div.info_wrap div.graph_box p.up span{ z-index: 1; position: relative; font-weight: 900;}
	section.box_graph div.info_wrap div.graph_box p.up span::after{ z-index: -1; content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 15px; background: #96ffb9;}
	section.box_graph div.info_wrap div.graph_box p.desc{ margin-bottom: 20px; font-weight: 400;}
	
	section.box_graph div.info_wrap div.graph_box div.graph_wrap{ display: flex; justify-content: space-around; align-items: flex-end; height: 300px; background-image: linear-gradient(to bottom, #e5e5e5 1px, transparent 1px); background-size: 1px 60px; background-position: center center;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph{ display: flex; flex-direction: column; align-items: center; width: 50%;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph1 div.hei{ width: 80px; height: 0; background: #999;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph1 div.hei.move{ height: 150px; transition: all 1s ease-in-out;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph2 div.hei{ width: 80px; height: 0; background: linear-gradient(0deg, #ff0000, #ffc907);}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph2 div.hei.move{ height: 240px; transition: all 1s ease-in-out;}
	section.box_graph div.info_wrap div.graph_box div.graph_wrap div.graph2 p{ color: #ff2502;}
	section.box_graph div.info_wrap div.graph_box div.pri{ display: flex; width: 100%; padding-top: 10px; border-top: 1px solid #000;}
	section.box_graph div.info_wrap div.graph_box div.pri p{ width: 50%; font-size: 19px; text-align: center;}
	section.box_graph div.info_wrap div.graph_box div.pri p.graph2_pr{ color: #ff2502;}
	
	section.box_graph div.info_wrap div.txt_wrap{ background: #222;}
	section.box_graph div.info_wrap div.txt_wrap div.tit{ margin-bottom: 20px; font-size: 28px; font-weight: 900; color: #ffdf4b; line-height: 1.2;}
	section.box_graph div.info_wrap div.txt_wrap div.img_wrap{ overflow: hidden; margin-bottom: 20px; border-radius: 5px;}
	section.box_graph div.info_wrap div.txt_wrap div.img_wrap img{ display: block; width: 100%;}
	section.box_graph div.info_wrap div.txt_wrap p.desc{ font-size: 18px; font-weight: 400; color: #fff; line-height: 1.5;}
}