/* popup 공통 css */
#popup{ width: 100%; height: 100%; overflow-y: scroll; position: fixed; top: 0; left: 0; z-index: 200; display: none; -ms-overflow-style: none; }
#popup::-webkit-scrollbar{display:none;}
#popup .popup{ display: none; }
#popup .sub_header{ width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: fixed; top: 0; left: 0; z-index: 50; }
#popup .sub_header .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#popup .sub_header ul{ display: flex; }
#popup .sub_header ul li:not(:last-of-type){ margin-right: 60px; }
#popup .sub_header ul li a{ display: inline-block; font-size: 1.6rem; font-weight: 300; color: #fff; opacity: 0.7; padding: 47px 20px; position: relative; }
#popup .sub_header ul li.on a{ font-weight: 600; opacity: 1; }
#popup .sub_header ul li.on a::before{ content: ""; width: 5px; height: 5px; background-color: #63c2ff; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#popup .sub_header ul li.on a::after{ content: ""; width: 5px; height: 5px; background-color: #63c2ff; border-radius: 50%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

#popup .sub_header button{ display: flex; border: none; background: none; padding: 0; font-size: 2rem; font-weight: 500; color: #fff; cursor: pointer; }
#popup .sub_header button i{ margin-left: 15px; }
#popup .padding-top{ padding-top: 110px; }
#popup div.back{ position: absolute; z-index: -2; }
#popup .moblie{ display: none; }

#popup .sub_header.scroll{ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

/* sub_header hover */
#popup .sub_header ul li a:hover{ font-weight: 600; opacity: 1; }
#popup .sub_header ul li a:hover::before{ content: ""; width: 5px; height: 5px; background-color: #63c2ff; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#popup .sub_header ul li a:hover::after{ content: ""; width: 5px; height: 5px; background-color: #63c2ff; border-radius: 50%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

#popup .popup section{ position: relative; z-index: 5; }

/* popup - sub title */
#popup .popupTit h2{ font-size: 6.5rem; font-weight: 700; color: #fff; position: relative; z-index: 1; line-height: 1.1538; margin-bottom: 32px; }
#popup .popupTit h2::before{ content: ""; width: 41px; height: 51px; background: url("/img/main/popup_title.png") no-repeat; position: absolute; top: -25px; left: -15px; z-index: -1; }
#popup .popupTit h2 img{ margin-left: 40px; vertical-align: middle; margin-top: -15px; }
#popup p.subText{ font-size: 2.8rem; font-weight: 300; color: #fff; line-height: 1.2857; opacity: 0.8; }
#popup p.subText span{ font-weight: 700; }
#popup .popup .section{ position: relative; z-index: 5; }

/* popup - 말풍선 */
#popup .balloon{ display: inline-block; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 18px 23px; }
#popup .balloon p{ font-size: 1.6rem; font-weight: 300; color: #fff; line-height: 1.625; }
#popup .balloon p.w{ color: #fff; opacity: 0.8; }
#popup .balloon p.b{ color: #98e9ff; }
#popup .balloon p.y{ color: #ffe380; opacity: 0.8; }
#popup .balloon p span{ font-weight: 700; }

#popup .bgColor{ background: linear-gradient(-16deg,#00558c, #0d1c3e); }
#popup .filter{ background: rgba(0, 0, 0, 0.5); overflow: hidden; position: relative; z-index: 10; }
#popup .gradient{ width: 2013px; height: 2008px; position: absolute; z-index: -5; background: url("/img/main/gradient.png") no-repeat; }

/* color-diagram - circle */
.color-diagram .flex-box{ display: flex; align-items: center; padding: 105px 0; }
.color-diagram .circle{ display: flex; flex-direction: column; align-items: center; position: relative; margin-right: 135px; }
.color-diagram .circle::before{ content: ""; width: 1px; height: 85%; background-color: #30405e; position: absolute; top: 50%; right: -78px; transform: translateY(-50%); }
.color-diagram .circle::after{ content: ""; width: 63px; height: 1px; background: #30405e; position: absolute; top: 50%; right: -140px; transform: translateY(-50%); }
.color-diagram .popupContent .circle > div{ width: 315px; font-size: 2rem; font-weight: 600; color: #fff; text-align: center; padding: 40px 0; border-radius: 60px; position: relative; box-shadow: inset 0px -4px 7px rgba(9, 54, 78, 0.5);  }
.color-diagram .circle div:nth-of-type(1){ background-color: #70bae0; }
.color-diagram .circle div:nth-of-type(2){ background-color: #1ca7ec; }
.color-diagram .circle div:nth-of-type(3){ background-color: #1c63cd; }
.color-diagram .circle div:nth-of-type(4){ background-color: #1f2f98; }
.color-diagram .popupContent .circle > div::before{ content: ""; width: 110%; height: 130%; border: 1px dashed #136a9a; border-radius: 65px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.2; }
.color-diagram .circle > div::after{ content: ""; width: 63px; height: 5px; background: url("/img/main/weather_after.png") no-repeat; position: absolute; top: 50%; right: -80px; transform: translateY(-50%); }
.color-diagram .circle span{ display: inline-block; margin: 30px 0; }
.color-diagram .circle span i{ font-size: 2rem; color: #fff; }

/* color-diagram - square */
.color-diagram .square{ margin-left: 40px; position: relative; }
.color-diagram .square::before{ content: ""; width: 1px; height: 81%; background-color: #30405e; position: absolute; top: 50%; left: -41px; transform: translateY(-50%); }
.color-diagram .square .line{ display: flex; align-items: center;}
.color-diagram .square .line:not(:last-of-type){ margin-bottom: 120px; }
.color-diagram .square .box{ width: 194px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; height: 104px; }
.color-diagram .square .line .box::after{ content: ""; width: 28px; height: 1px; background-color: #30405e; position: absolute; top: 50%; left: -28px; transform: translateY(-50%); }
.color-diagram .square .line .box:not(:last-of-type){ margin-right: 30px; }
.color-diagram .square .box.title{ width: 104px; padding: 0 18px; position: relative; }
.color-diagram .square .box.title::after{ content: ""; width: 43px; height: 5px; background: url("/img/main/weather_before.png") no-repeat; position: absolute; top: 50%; left: -43px; transform: translateY(-50%); }
.color-diagram .square .box p{ font-size: 1.5rem; font-weight: 300; color: #fff; line-height: 1.4666; }
.color-diagram .square .box.title p{ font-size: 1.8rem; font-weight: 500; text-align: center; line-height: 1.3888; }
.color-diagram .square .box img{ margin-right: 30px; }

/* color-diagram - box background */
.color-diagram .square .line01 .box::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; border: 1px solid #54dd6e; opacity: 0.5; border-radius: 10px; background: rgba(255, 255, 255, 0.2); }
.color-diagram .square .line01 .box.title::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; border: 1px solid #54dd6e; opacity: 0.5; border-radius: 10px; background: rgba(0, 255, 90, 0.15); }
.color-diagram .square .line02 .box::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; border: 1px solid #fada00; opacity: 0.5; border-radius: 10px; background: rgba(255, 255, 255, 0.15); }
.color-diagram .square .line02 .box.title::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; border: 1px solid #fada00; opacity: 0.5; border-radius: 10px; background: rgba(255, 180, 0, 0.2); }
.color-diagram .square .line03 .box::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; border: 1px solid #54d2dd; opacity: 0.5; border-radius: 10px; background: rgba(255, 255, 255, 0.15); }
.color-diagram .square .line03 .box.title::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; border: 1px solid #54d2dd; opacity: 0.5; border-radius: 10px; background: rgba(0, 174, 255, 0.2); }

/* popup - glass_ul */
.glass_ul{ width: 100%; display: flex; justify-content: center; }
.glass_ul li{ width: 270px; height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.05); border-radius: 20px; }
.glass_ul li:not(:last-of-type){ margin-right: 50px; }
.glass_ul li span{ font-size: 2rem; font-weight: 700; color: #98e9ff; opacity: 0.8; }
.glass_ul li p{ font-size: 2rem; font-weight: 300; color: #fff; line-height: 1.6; text-align: center; }

/* 
	popup - energy 
*/
#energy .gradient.gradi01{ top: -1500px; right: -40%; opacity: 0.2; }
#energy .circle-graph{ padding-top: 85px; }
#energy .circle-graph .flex-box{ display: flex; justify-content: space-between; align-items: center; padding-right: 20px; }
#energy .circle-graph .text{ width: 33%; }
#energy .circle-graph .text p{ font-size: 3rem; font-weight: 300; color: #b2e9fd; line-height: 1.5; }
#energy .circle-graph .text span{ display: inline-block; width: 100%; font-weight: 600; text-align: right; }
#energy .circle-graph .graph{ display: flex; align-items: center; }
#energy .circle-graph .white{ display: flex; padding: 30px 40px; background-color: rgba(255, 255, 255, 0.9); border-radius: 130px; margin-right: 95px; position: relative; }
#energy .circle-graph .white::after{ content: ""; width: 34px; height: 27px; background: url("/img/main/energy_arrow01.png") no-repeat center center / auto; position: absolute; top: 50%; right: -58px; transform: translateY(-50%); }
#energy .circle-graph .white .circle:nth-of-type(2){ margin: 0 10px; }
#energy .circle-graph .circle{ width: 190px; height: 190px; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: 500; color: #fff; text-align: center; border-radius: 50%; line-height: 1.4; }
#energy .circle-graph .graph > .circle{ position: relative; z-index: 5; color: #000; }
#energy .circle-graph .graph > .circle::before{ content: ""; width: 120%; height: 120%; opacity: 0.1; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#energy .circle-graph .graph > .circle::after{ content: ""; width: 110%; height: 110%; opacity: 0.3; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#energy .circle-graph .position{ position: absolute; bottom: -90px; right: 60px; }
#energy .circle-graph .position ul{ display: flex; }
#energy .circle-graph .position ul li{ width: 165px; font-size: 1.6rem; font-weight: 500; color: #fff; background-color: rgba(255, 255, 255, 0.1); padding: 20px 0; border-radius: 60px; text-align: center; position: relative; }
#energy .circle-graph .position ul li:not(:last-of-type){ margin-right: 20px; }
#energy .circle-graph .position ul li::before{ content: ""; width: 20px; height: 1px; background-color: rgba(192, 205, 228, 0.2); position: absolute; top: 50%; right: -20px; transform: translateY(-50%); }
#energy .circle-graph .position ul li:last-of-type::before{ display: none; }
#energy .circle-graph .position ul li:last-of-type::after{ content: ""; width: 5px; height: 85px; background: url("/img/main/energy_before01.png") no-repeat center center / auto; position: absolute; top: -85px; left: 50%; transform: translateX(-50%); }

#energy .fit-ul{ margin-top: 210px; }
#energy .fit-ul .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#energy .fit-ul figure{ display: inline-block; width: calc(50% - 40px); margin: 0; }
#energy .fit-ul .text{ width: calc(50% - 40px); }
#energy .fit-ul .text p{ font-size: 6rem; font-weight: 600; color: #fff; }
#energy .fit-ul .text ul{ margin-top: 25px; }
#energy .fit-ul .text ul.row{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#energy .fit-ul .text ul li{ font-size: 1.8rem; font-weight: 300; color: #fff; line-height: 1.5555; padding-left: 23px; position: relative; }
#energy .fit-ul .text ul li:not(:last-of-type){ margin-bottom: 15px; }
#energy .fit-ul .text ul li::before{ content: ""; width: 14px; height: 14px; background: url("/img/main/energy_icon01.png") no-repeat center center / auto; position: absolute; top: 6px; left: 0; }
 

/* solar */
#energy .solar{ padding-top: 120px; }
#energy .solar .circle-graph .circle{ box-shadow: inset 0px -4px 7px rgba(192, 117, 29, 0.7); }
 #energy .solar .circle-graph .circle:nth-of-type(1){ background-color: #fed157; }
#energy .solar .circle-graph .circle:nth-of-type(2){ background-color: #fdbc20; }
#energy .solar .circle-graph .circle:nth-of-type(3){ background-color: #ff961e; }
#energy .solar .circle-graph .graph > .circle{ background-color: #edd0ae; position: relative; z-index: 5; color: #000; box-shadow: inset 0px -4px 7px rgba(159, 110, 53, 0.85); }
#energy .solar .circle-graph .graph > .circle::before{ content: ""; width: 120%; height: 120%; background-color: #edd0ae; opacity: 0.1; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#energy .solar .circle-graph .graph > .circle::after{ content: ""; width: 110%; height: 110%; background-color: #edd0ae; opacity: 0.3; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#energy .back.back01{ width: 900px; height: 820px; background: url(/img/main/weather_back01.png) no-repeat; bottom: -33%; right: -250px; opacity: 0.5; }

/* wind */
#energy .gradient.gradi02{ top: 15%; left: -40%; opacity: 0.2; }
#energy .wind{ padding-top: 240px; }
#energy .wind .circle-graph .circle{ box-shadow: inset 0px -4px 7px rgba(9, 54, 78, 0.85); }
 #energy .wind .circle-graph .circle:nth-of-type(1){ background-color: #51a9d8; }
#energy .wind .circle-graph .circle:nth-of-type(2){ background-color: #1888c3; }
#energy .wind .circle-graph .circle:nth-of-type(3){ background-color: #1852ab; }
#energy .wind .circle-graph .graph > .circle{ background-color: #5f6dc6; position: relative; z-index: 5; color: #000; box-shadow: inset 0px -4px 7px rgba(9, 54, 78, 0.85); }
#energy .wind .circle-graph .graph > .circle::before{ content: ""; width: 120%; height: 120%; background-color: #5f6dc6; opacity: 0.1; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#energy .wind .circle-graph .graph > .circle::after{ content: ""; width: 110%; height: 110%; background-color: #5f6dc6; opacity: 0.3; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#energy .circle-graph .position ul li{ width: 145px; }
#energy .back.back02{ width: 752px; height: 552px; background: url(/img/main/weather_back03.png) no-repeat; bottom: -38%; right: 0; }

#energy .solution .sec01 .relative{ position: relative; margin-top: 80px; }
#energy .solution .sec01 .title{ width: 570px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 100px; }
#energy .solution .sec01 .title::before{ content: ""; width: 24px; height: 68px; background: url("/img/main/energy_icon04.png") no-repeat center center / auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#energy .solution .sec01 .title::after{ content: ""; width: 24px; height: 68px; background: url("/img/main/energy_icon05.png") no-repeat center center / auto; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#energy .solution .sec01 .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#energy .solution .sec01 .half{ display: flex; width: calc((100% - 670px) / 2); position: relative; }
#energy .solution .sec01 .half::after{ content: ""; width: 18px; height: 12px; position: absolute; top: 50%; transform: translateY(-50%); }
#energy .solution .sec01 .half.left::after{ background: url("/img/main/energy_icon02.png") no-repeat center center / auto; right: -20px; }
#energy .solution .sec01 .half.right::after{ background: url("/img/main/energy_icon03.png") no-repeat center center / auto; left: -20px; }
#energy .solution .sec01 .half.right{ justify-content: flex-end; }
#energy .solution .sec01 .circle{ display: flex; justify-content: center; align-items: center; width: 190px; height: 190px; border-radius: 50%; text-align: center; font-size: 2rem; font-weight: 500; color: #fff; line-height: 1.4; position: relative; }
#energy .solution .sec01 .half .circle:not(:last-of-type){ margin-right: 40px; }
#energy .solution .sec01 .circle::before{ content: ""; width: 40px; height: 1px; background-color: rgba(255, 255, 255, 0.1); position: absolute; top: 50%; transform: translateY(-50%); }
#energy .solution .sec01 .left .circle::before{ right: -40px; }
#energy .solution .sec01 .right .circle::before{ left: -40px; }

/* predict */
#energy .predict{ padding-top: 240px; }
#energy .solution.predict .title p{ color: transparent; text-shadow: 4px 4px 7px rgba(9, 54, 78, 0.46); background-color: rgba(96, 197, 221, 0.8); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }
#energy .solution.predict .circle{ box-shadow: inset -4px -4px 7px rgba(9, 54, 78, 0.46); }
#energy .solution.predict .left .circle:nth-of-type(1){ background-color: #94c7d3; }
#energy .solution.predict .left .circle:nth-of-type(2){ background-color: #64c4db; }
#energy .solution.predict .right .circle:nth-of-type(1){ background-color: #01a3bf; }
#energy .solution.predict .right .circle:nth-of-type(2){ background-color: #0093b2; }
#energy .gradient.gradi03{ top: 50%; right: -60%; transform: translateY(-50%); opacity: 0.2; }

#energy .predict .sec03 ul{ display: flex; justify-content: space-between; margin-top: 90px; }
#energy .predict .sec03 ul li{ width: calc((100% - 120px) / 4); }
#energy .predict .sec03 figure{ display: inline-block; margin: 0; }
#energy .predict .sec03 p{ font-size: 1.8rem; font-weight: 300; color: #fff; line-height: 2; text-align: center; margin-top: 8px; }

/* manage */
#energy .manage{ padding-top: 240px; }
#energy .back.back03{ width: 507px; height: 260px; background: url(/img/main/weather_back06.png) no-repeat; top: 5%; right: 0; }
#energy .solution.manage .title p{ color: transparent; text-shadow: 4px 4px 7px rgba(9, 54, 78, 0.46); background-color: #47c6bf; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }
#energy .solution.manage .circle{ box-shadow: inset -4px -4px 7px rgba(9, 54, 78, 0.46); }
#energy .solution.manage .left .circle:nth-of-type(1){ background-color: #71cac5; }
#energy .solution.manage .left .circle:nth-of-type(2){ background-color: #3eb6af; }
#energy .solution.manage .right .circle:nth-of-type(1){ background-color: #1c9b94; }
#energy .solution.manage .right .circle:nth-of-type(2){ background-color: #128c85; }

/* charge */
#energy .charge{ padding-top: 260px; }
#energy .gradient.gradi04{ top: 70%; left: -80%; transform: translateY(-50%); opacity: 0.4; }
#energy .back.back04{ width: 1155px; height: 1161px; background: url(/img/main/weather_back05.png) no-repeat; top: 32%; right: -345px; transform: translateY(-50%); }
#energy .charge .sec01 img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#energy .charge .sec01 ul{ background: url("/img/main/energy_back01.png") no-repeat center center / auto; }
#energy .charge .sec01 ul li{ display: flex; }
#energy .charge .sec01 ul li:nth-of-type(even){ flex-direction: row-reverse; }
#energy .charge .sec01 ul li:nth-of-type(1){ margin-top: 150px; }
#energy .charge .sec01 ul li:nth-of-type(2){ margin-top: -90px; }
#energy .charge .sec01 ul li:nth-of-type(3){ margin-top: 55px; }
#energy .charge .sec01 ul li:nth-of-type(4){ margin-top: -90px; margin-bottom: 81px; }

#energy .charge .sec01 .talk{ position: relative; }
#energy .charge .sec01 .talk::after{ content: ""; width: 22px; height: 21px; background: url("/img/main/talk_balloon.png") no-repeat; position: absolute; }
#energy .charge .sec01 .talk.talk01::before, #energy .charge .sec01 .talk.talk03::before{ content: ""; width: 1px; height: 22px; position: absolute; top: 20px; right: -1px; }
#energy .charge .sec01 .talk.talk01::before{ background-color: #07394e; }
#energy .charge .sec01 .talk.talk03::before{ background-color: #093f53; }
#energy .charge .sec01 .talk.talk01::after, #energy .charge .sec01 .talk.talk03::after{ top: 20px; right: -22px; transform: rotate(-90deg); }
#energy .charge .sec01 .talk.talk02::before, #energy .charge .sec01 .talk.talk04::before{ content: ""; width: 1px; height: 22px; position: absolute; top: 20px; left: -1px; }
#energy .charge .sec01 .talk.talk02::before{ background-color: #01253e; }
#energy .charge .sec01 .talk.talk04::before{ background-color: #01253f; }
#energy .charge .sec01 .talk.talk02::after, #energy .charge .sec01 .talk.talk04::after{ top: 20px; left: -22px; transform: rotate(90deg); }
 
#energy .charge .sec02 .flex-box{ display: flex; justify-content: space-between; align-items: center; padding-top: 60px; }

#energy .charge .sec03{ padding: 80px 0 180px; }
#energy .back.back05{ width: 507px; height: 260px; background: url(/img/main/weather_back06.png) no-repeat; bottom: 20%; right: 0; }
#energy .charge .sec03 p.subText{ font-weight: 700; }
#energy .charge .sec03 ul{ display: flex; justify-content: space-between; align-items: center; margin-top: 65px;  }
#energy .charge .sec03 ul li{ display: flex; align-items: center; }
#energy .charge .sec03 ul li .image{ display: flex; justify-content: center; align-items: center; width: 190px; height: 190px; background-color: #70b8c9; border-radius: 50%; box-shadow: inset -4px -4px 7px rgba(9, 54, 78, 0.46); margin-right: 40px; }
#energy .charge .sec03 ul li .text span{ display: inline-block; font-size: 2rem; font-weight: 600; color: #fff; line-height: 1.4; margin-bottom: 10px; }  
#energy .charge .sec03 ul li .text p{ font-size: 1.6rem; font-weight: 300; color: #fff; line-height: 1.75; } 



/* 
	popup - weather 
*/
/* solution - sec01 */
#weather .gradient.gradi01{ opacity: 0.2; top: -1000px; right: -1000px; }
#weather .solution{ padding-top: 130px; }

#weather .section.sec01 .back{ width: 900px; height: 820px; top:  62%; right: 0; z-index: -1; transform: translateY(-50%); background: url("/img/main/weather_back01.png") no-repeat; }

/* solution - sec02 */
#weather .solution .sec02 .back{ width: 725px; height: 261px; bottom: -1%; left: 0; background: url("/img/main/weather_back02.png") no-repeat; }
#weather .solution .sec02 .flex-box{ display: flex; justify-content: space-between; }
#weather .solution .sec02 .textBox{ width: 50%; display: flex; flex-direction: column; justify-content: center; padding-right: 95px; }
#weather .solution .sec02 .textBox p{ font-size: 3rem; font-weight: 300; color: #b2e9fd; line-height: 1.5; }
#weather .solution .sec02 .textBox p:last-of-type{ text-align: right; }
#weather .solution .sec02 .textBox p span{ font-weight: 600; }

#weather .solution .sec02 .formula{ display: flex; align-items: center; padding: 100px 0; }
#weather .solution .sec02 .formula .white{ display: flex; align-items: center; background-color: #fff; border-radius: 120px; padding: 30px 40px; }
#weather .solution .sec02 .formula .white > span{ margin: 0 25px; }
#weather .solution .sec02 .formula .white > span i{ font-size: 2rem; color: #2b2b2b: }
#weather .solution .sec02 .info{ width: 190px; height: 190px; border-radius: 50%; box-shadow: inset 0 -4px 7px rgba(9, 54, 78, 0.5); position: relative; text-align: center; }
#weather .solution .sec02 .info > span{ font-size: 2.5rem; font-weight: 600; color: #fff; line-height: 190px; }
#weather .solution .sec02 .white .info:nth-of-type(1){ background-color: #51a9d8; }
#weather .solution .sec02 .white .info:nth-of-type(2){ background-color: #344b8b; }
#weather .solution .sec02 .info:last-of-type{ background-color: #5f6dc6; }
#weather .solution .sec02 .formula > span{ font-size: 2rem; font-weight: 400; color: #fff; margin: 0 40px; }
#weather .solution .sec02 .formula .position{ position: absolute; line-height: 1.3; }
#weather .solution .sec02 .formula .position.top{ top: -70%; right: 4px; }
#weather .solution .sec02 .formula .position.top ul li:last-of-type::after{ content: ""; width: 5px; height: 100px; background: url("/img/main/formula_after.png") no-repeat; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); }
#weather .solution .sec02 .formula .position.bottom{ bottom: -70%; left: -5px; }
#weather .solution .sec02 .formula .position.bottom ul li:first-of-type::after{ content: ""; width: 5px; height: 100px; background: url("/img/main/formula_after.png") no-repeat; position: absolute; bottom: 100%; left: 50%; transform: rotate(180deg) translateX(-50%); }
#weather .solution .sec02 .formula ul{ display: flex; align-items: center; }
#weather .solution .sec02 .formula ul li{ display: inline-block; position: relative; }
#weather .solution .sec02 .formula ul li span{ font-size: 1.8rem; font-weight: 500; color: #fff; }
#weather .solution .sec02 .formula ul li:not(.dot){ width: 195px; height: 60px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.1); border-radius: 30px; }
#weather .solution .sec02 .formula ul li:not(:last-of-type){ margin-right: 15px; }
#weather .solution .sec02 .formula ul li.dot{ margin-right: 30px; }
#weather .solution .sec02 .formula ul li:not(.dot) img{ margin-right: 20px; }

 
/* solution - sec03 */
#weather .solution .sec03{ padding-top: 110px; }
#weather .gradient.gradi02{ top: 35%; left: -1000px; transform: translateY(-50%); opacity: 0.3; z-index: -1; }
#weather .solution .sec03 .back{ width: 752px; height: 552px; bottom: -70%; right: 0; background: url("/img/main/weather_back03.png"); }
#weather .solution .sec03 .flex-box{ display: flex; align-items: center; padding: 75px 0 0; }
#weather .solution .sec03 .half{ width: 50%; }
#weather .solution .sec03 .half ul{ display: flex; flex-wrap: wrap; padding-left: 110px; }
#weather .solution .sec03 .half ul li{ width: 50%; display: flex; flex-direction: column; }
#weather .solution .sec03 .half ul li{ margin-bottom: 70px; }
#weather .solution .sec03 .half ul li:nth-of-type(3){ margin-bottom: 0; }
#weather .solution .sec03 .half ul li:nth-of-type(4){ margin-bottom: 0; }
#weather .solution .sec03 .half ul li span{ font-size: 1.6rem; font-weight: 700; color: #fff; margin-bottom: 18px; }
#weather .solution .sec03 .half ul li img{ width: min-content; }
#weather .solution .sec03 .half ul li p{ font-size: 2rem; font-weight: 400; color: #fff; opacity: 0.8; margin-top: 30px; }

/* service - sec01 */
#weather .service{ position: relative; padding-top: 235px; }
#weather .gradient.gradi03{ position: absolute; top: 63%; right: -900px; transform: translateY(-50%); opacity: 0.2; }
#weather .service .sec01{ text-align: center; }
#weather .service .sec01 .imgBox{ display: inline-block; margin: 110px 8% 0 0; position: relative; }
#weather .service .sec01 ul li{ position: absolute; }
#weather .service .sec01 ul li:nth-of-type(1){ top: -21%; right: 2.5%; }
#weather .service .sec01 ul li:nth-of-type(2){ width: 387px; top: 20%; right: -26.5%; transform: translateY(-50%); }
#weather .service .sec01 ul li:nth-of-type(3){ width: 387px; top: 42%; right: -26.5%; transform: translateY(-50%); }
#weather .service .sec01 .talk{ position: relative; }
#weather .service .sec01 .talk::after{ content: ""; width: 22px; height: 21px; background: url("/img/main/talk_balloon.png") no-repeat; position: absolute; }
#weather .service .sec01 .talk.talk01::before{ content: ""; width: 22px; height: 1px; background-color: #04182d; position: absolute; bottom: -1px; left: 44.5%; }
#weather .service .sec01 .talk.talk01::after{ bottom: -20px; left: 47%; transform: translateX(-50%); }
#weather .service .sec01 .talk.talk02::before{ content: ""; width: 22px; height: 1px; background-color: #041c30; position: absolute; bottom: -1px; left: 17%; }
#weather .service .sec01 .talk.talk02::after{ bottom: -20px; left: 60px; }
#weather .service .sec01 .talk.talk03::before{ content: ""; width: 22px; height: 1px; background-color: #051f33; position: absolute; bottom: -1px; left: 15.5%; }
#weather .service .sec01 .talk.talk03::after{ bottom: -20px; left: 60px; border-top: 1px solid #061f35; }

/* service - sec02 */
#weather .service .sec02{ background: rgba(255, 255, 255, 0.1); padding: 100px 0; margin: 70px 0 160px; }
#weather .service .sec02 .flex-box{ display: flex; justify-content: space-between; }
#weather .service .sec02 p.bold{ font-size: 2.4rem; font-weight: 700; color: #fff; }
#weather .service .sec02 ul li{ font-size: 1.6rem; font-weight: 300; color: #fff; line-height: 1.75; }
#weather .service .sec02 ul.check li{ padding-left: 25px; position: relative; }
#weather .service .sec02 ul.check li::before{ content: ""; width: 14px; height: 14px; background: url("/img/main/weather_check.png") no-repeat; position: absolute; top: 6px; left: 0; }
#weather .service .sec02 ul.check li:not(:last-of-type){ margin-bottom: 25px; }
#weather .service .sec02 ul li{ display: flex; }
#weather .service .sec02 ul li span{ display: inline-block; width: 75px; height: 30px; background-color: #1d4694; text-align: center; line-height: 30px; margin-right: 20px; }
#weather .service .sec02 ul.blue li:not(:last-of-type){ margin-bottom: 10px; }

/* service - sec03 */
#weather .service .sec03 .flex-box{ display: flex; justify-content: space-between; align-items: center; padding-top: 55px; }
#weather .service .sec03 figure{ margin: 0; }


/* rain - sec01 */
#weather .rain { padding-top: 250px; }
#weather .rain .sec01{ position: relative; z-index: 5; }
#weather .rain .sec01 .image img{ position: absolute; }
#weather .rain .sec01 .image img.man{ bottom: 9%; left: 29%; }
#weather .rain .sec01 .image img.phone{ top: 50%; left: 50%; transform: translate(-50%, -50%); }
#weather .rain .sec01 .image img.woman{ top: 1%; right: 31%; }
#weather .rain .sec01 ul{ padding: 6% 0 18%; margin-top: 100px; background: url("/img/main/weather_back04.png") no-repeat center center / auto; }
#weather .rain .sec01 ul li{ display: flex; }
#weather .rain .sec01 ul li:nth-of-type(even){ justify-content: flex-end; }
#weather .rain .sec01 ul li:nth-of-type(2){ margin-top: -10%; }
#weather .rain .sec01 ul li:nth-of-type(3){ margin-top: 6%; }
#weather .rain .sec01 ul li:nth-of-type(4){ margin-top: -8.5%; }
#weather .rain .sec01 .talk{ position: relative; }
#weather .rain .sec01 .talk::after{ content: ""; width: 22px; height: 21px; background: url("/img/main/talk_balloon.png") no-repeat; position: absolute; }
#weather .rain .sec01 .talk.talk01::before, #weather .rain .sec01 .talk.talk03::before{ content: ""; width: 1px; height: 22px; background-color: #032139; position: absolute; top: 20px; right: -1px; }
#weather .rain .sec01 .talk.talk01::after, #weather .rain .sec01 .talk.talk03::after{ top: 20px; right: -20px; transform: rotate(-90deg); }
#weather .rain .sec01 .talk.talk02::before, #weather .rain .sec01 .talk.talk04::before{ content: ""; width: 1px; height: 22px; background-color: #022038; position: absolute; top: 20px; left: -1px; }
#weather .rain .sec01 .talk.talk02::after, #weather .rain .sec01 .talk.talk04::after{ top: 20px; left: -20px; transform: rotate(90deg); }


/* rain - sec02 */
#weather .rain .sec02{ padding-top: 90px; position: relative; }
#weather .gradi04{ top: 0; left: -1200px; transform: translateY(-50%); opacity: 0.4; }
#weather .rain .sec02 .back{ width: 1155px; height: 1161px; background: url("/img/main/weather_back05.png") no-repeat; top: 63%; right: -220px; transform: translateY(-50%); }
#weather .rain .sec02 .subText{ opacity: 1; }
#weather .rain .sec02 .flex-box{ display: flex; justify-content: space-between; align-items: center; padding-top: 60px; }
#weather .rain .sec02 ul{ display: flex; align-items: center; }
#weather .rain .sec02 ul li{ width: 270px; height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.05); border-radius: 30px; }
#weather .rain .sec02 ul li:not(:first-of-type){ margin-left: 45px; }
#weather .rain .sec02 ul li span{ font-size: 2rem; font-weight: 700; color: #98e9ff; margin-bottom: 20px; }
#weather .rain .sec02 ul li p{ font-size: 2rem; font-weight: 300; color: #fff; text-align: center; line-height: 1.6; }

/* fire - sec01 */
#weather .fire{ padding-top: 245px; position: relative; }
#weather .fire .sec01 .image img{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
#weather .fire .sec01 ul{ padding: 12% 0 13%; }
#weather .fire .sec01 ul li{ display: flex; }
#weather .fire .sec01 ul li:nth-of-type(even){ justify-content: flex-end; }
#weather .fire .sec01 ul li:nth-of-type(1){ padding-left: 3.5%; }
#weather .fire .sec01 ul li:nth-of-type(2){ margin-top: -7%; padding-right: 1.5%; }
#weather .fire .sec01 ul li:nth-of-type(3){ margin-top: 5%; }
#weather .fire .sec01 ul li:nth-of-type(4){ margin-top: -7%; }
#weather .fire .sec01 .talk{ position: relative; }
#weather .fire .sec01 .talk::after{ content: ""; width: 22px; height: 21px; background: url("/img/main/talk_balloon.png") no-repeat; position: absolute; }
#weather .fire .sec01 .talk.talk01::before, #weather .fire .sec01 .talk.talk03::before{ content: ""; width: 1px; height: 22px; background-color: #01253f; position: absolute; top: 20px; right: -1px; }
#weather .fire .sec01 .talk.talk01::after, #weather .fire .sec01 .talk.talk03::after{ top: 20px; right: -20px; transform: rotate(-90deg); }
#weather .fire .sec01 .talk.talk02::before, #weather .fire .sec01 .talk.talk04::before{ content: ""; width: 1px; height: 22px; background-color: #012640; position: absolute; top: 20px; left: -1px; }
#weather .fire .sec01 .talk.talk02::after, #weather .fire .sec01 .talk.talk04::after{ top: 20px; left: -20px; transform: rotate(90deg); }


/* fire - sec02 */
#weather .fire .sec02{ padding: 100px 0 180px; }
#weather .fire .sec02 .back{ width: 507px; height: 260px; top: -14%; right: 0; background: url("/img/main/weather_back06.png") no-repeat; } 
#weather .fire .sec02 .subText{ opacity: 1; }
#weather .fire .sec02 .flex-box{ display: flex; justify-content: space-between; align-items: center; padding-top: 40px; }
#weather .fire .sec02 ul{ display: flex; align-items: center; }
#weather .fire .sec02 ul li{ width: 270px; height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.05); border-radius: 30px; }
#weather .fire .sec02 ul li:not(:first-of-type){ margin-left: 45px; }
#weather .fire .sec02 ul li span{ font-size: 2rem; font-weight: 700; color: #98e9ff ;margin-bottom: 20px; }
#weather .fire .sec02 ul li p{ font-size: 2rem; font-weight: 300; color: #fff; text-align: center; line-height: 1.6; }


/* 
	popup - air
*/
/* air - eco */
#air .back.back01{ width: 758px; height: 552px; background: url("/img/main/weather_back03.png"); top: 30%; right: 0; transform: translateY(-50%); }
#air .gradient.gradi01{ top: -1300px; right: -800px; opacity: 0.2; }  
#air .eco{ padding-top: 130px; } 
#air .eco .sec01 .flex-box{ display: flex; align-items: center; padding: 75px 0 270px; }
#air .eco .sec01 .circle{ display: flex; justify-content: center; align-items: center; width: 240px; height: 240px; border-radius: 50%; font-size: 2rem; font-weight: 600; color: #fff; line-height: 1.5; text-align: center; box-shadow: inset -4px -4px 7px rgba(9, 54, 78, 0.46); }
#air .eco .sec01 .opacity{ display: flex; padding: 30px 50px; background: rgba(255, 255, 255, 0.03); border-radius: 170px; margin-right: 100px; position: relative; }
#air .eco .sec01 .opacity::after{ content: "="; font-family: 'Pretendard', sans-serif; font-size: 2rem; font-weight: 400; color: #fff; position: absolute; top: 50%; right: -45px; transform: translateY(-50%); }
#air .eco .sec01 .opacity .circle:not(:first-of-type){ margin-left: -15px; }
#air .eco .sec01 .opacity .circle:nth-of-type(1){ background-color: rgba(91, 152, 185, 0.9); }
#air .eco .sec01 .opacity .circle:nth-of-type(2){ background-color: rgba(24, 136, 195, 0.9); }
#air .eco .sec01 .opacity .circle:nth-of-type(3){ background-color: rgba(24, 82, 171, 0.9); }
#air .eco .sec01 .opacity .position{ position: absolute; top: 118%; left: 50%; transform: translateX(-50%); }
#air .eco .sec01 .opacity .position ul{ display: flex; position: relative; }
#air .eco .sec01 .opacity .position ul::before{ content: ""; width: 410px; height: 1px; background: #c0cde4; position: absolute; top: -27px; left: 50%; transform: translateX(-50%); }
#air .eco .sec01 .opacity .position ul::after{ content: ""; width: 5px; height: 42px; background: url("/img/main/air_after01.png") no-repeat center center / auto; position: absolute; top: -68px; left: 50%; transform: translateX(-50%);  }
#air .eco .sec01 .opacity .position ul li{ width: 390px; font-size: 1.8rem; font-weight: 500; color: #fff; line-height: 1.5555; text-align: center; background: rgba(255, 255, 255, 0.1); border-radius: 60px; padding: 20px 0; position: relative; }
#air .eco .sec01 .opacity .position ul li::after{ content: ""; width: 1px; height: 27px; background: #c0cde4; position: absolute; top: -27px; left: 50%; transform: translateX(-50%); }
#air .eco .sec01 .opacity .position ul li:first-of-type{ margin-right: 20px; }
#air .eco .sec01 .flex-box > .circle{ background-color: #1a2a81; position: relative; z-index: 5; }
#air .eco .sec01 .flex-box > .circle::before{ content: ""; width: 110%; height: 110%; background-color: #1a2a81; border-radius: 50%; opacity: 0.5; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#air .eco .sec01 .flex-box > .circle::after{ content: ""; width: 120%; height: 120%; background-color: #1a2a81; border-radius: 50%; opacity: 0.2; position: absolute; top: 50%; left: 50%; z-index: -2; transform: translate(-50%, -50%); }

#air .eco .sec02 .flex-box{ display: flex; justify-content: space-between; margin-bottom: 160px; }
#air .eco .sec02 figure{ display: inline-block; width: calc((100% - 75px) / 4); margin: 0; }

#air .gradient.gradi02{ top: 50%; left: -1000px; transform: translateY(-50%); opacity: 0.2; }
#air .back.back02{ width: 752px; height: 261px; background: url("/img/main/weather_back02.png") no-repeat; top: 110%; left: -200px; transform: translateY(-50%); }
#air .eco .sec03 .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#air .eco .sec03 .text{ width: 100%; }
#air .eco .sec03 .glass_ul{ margin-top: 65px; }

/* air - information */
#air .infomation{ padding-top: 250px; }
#air .back.back03{ width: 900px; height: 820px; top: 53%; right: 0; transform: translateY(-50%); background: url("/img/main/weather_back01.png") no-repeat; }

#air .infomation .sec02 .bg{ background: rgba(255, 255, 255, 0.05); padding: 95px 0; }
#air .infomation .sec02 .flex-box{ display: flex; }
#air .infomation .sec02 p{ width: calc(100% / 3); font-size: 2.4rem; font-weight: 700; color: #fff; line-height: 1.4583; }
#air .infomation .sec02 ul{ width: calc(100% / 3); }
#air .infomation .sec02 ul li{ font-size: 1.6rem; font-weight: 300; color: #fff; line-height: 1.75; padding-left: 23px; position: relative; }
#air .infomation .sec02 ul li::before{ content: ""; width: 14px; height: 14px; background: url("/img/main/energy_icon01.png") no-repeat center center / auto; position: absolute; top: 6px; left: 0; }
#air .infomation .sec02 ul li:not(:last-of-type){ margin-bottom: 55px; }

/* air - modelling */
#air .gradient.gradi03{ top: 50%; left: -1000px; transform: translateY(-50%); opacity: 0.2; }
#air .gradient.gradi04{ top: 85%; right: -1000px; transform: translateY(-50%); opacity: 0.1; }
#air .modelling{ padding-top: 260px; }
#air .back.back04{ width: 507px; height: 260px; background: url(/img/main/weather_back06.png) no-repeat; top: 5%; right: -150px; }
#air .back.back05{ width: 507px; height: 260px; background: url(/img/main/weather_back06.png) no-repeat; bottom: -40%; left: -295px; transform: rotate(180deg); }
#air .modelling .sec01 .pc{ text-align: center; margin: 145px 0; }
#air .modelling .sec01 .moblie{ display: none; margin: 20px 0 0; }
#air .modelling .sec01 .moblie h3{ font-size: 2.5rem; font-weight: 700; color: #fff; line-height: 1.4; }
#air .modelling .sec01 .moblie .flex-box{ margin: 40px 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
#air .modelling .sec01 .moblie .step{ width: calc(50% - 20px); margin-bottom: 60px; }
#air .modelling .sec01 .moblie .title{ text-align: center; box-shadow: inset -4px -4px 7px rgba(9, 54, 78, 0.46); border-radius: 15px; padding: 25px 0; }
#air .modelling .sec01 .moblie .title span{ font-size: 1.4rem; font-weight: 600; color: #fff; }
#air .modelling .sec01 .moblie .title p{ font-size: 2.5rem; font-weight: 600; color: #fff; margin-top: 10px; }
#air .modelling .sec01 .moblie ul{ margin-top: 20px; padding: 0 30px; }
#air .modelling .sec01 .moblie ul li{ font-size: 1.8rem; font-weight: 300; color: #fff; line-height: 1.8888; padding-left: 15px; position: relative; }
#air .modelling .sec01 .moblie ul li::before{ content: ""; width: 3px; height: 3px; border-radius: 50%; position: absolute; top: 16px; left: 0; }


#air .modelling .sec01 .moblie .step01 .title{ background-color: #5e9cbd; }
#air .modelling .sec01 .moblie .step01 ul li::before{ background-color: #5e9cbd; }
#air .modelling .sec01 .moblie .step02 .title{ background-color: #188bc5; }
#air .modelling .sec01 .moblie .step02 ul li::before{ background-color: #188bc5; }
#air .modelling .sec01 .moblie .step03 .title{ background-color: #2864bd; }
#air .modelling .sec01 .moblie .step03 ul li::before{ background-color: #2864bd; }
#air .modelling .sec01 .moblie .step04 .title{ background-color: #2a44dd; }
#air .modelling .sec01 .moblie .step04 ul li::before{ background-color: #2a44dd; }

#air .modelling .sec02 .flex-box{ display: flex; justify-content: space-between; margin: 65px 0 145px; }
#air .modelling .sec02 figure{ width: calc((100% - 120px) / 3); display: inline-block; margin: 0; }

#air .back.back06{ width: 1155px; height: 1161px; background: url(/img/main/weather_back05.png) no-repeat; top: 63%; right: -345px; transform: translateY(-50%); }
#air .modelling .sec03 .flex-box{ display: flex; justify-content: space-between; align-items: center; margin-top: 100px; }
#air .modelling .sec03 figure{ margin: 0; }

/* air - observation */
#air .observation{ padding-top: 250px; }
#air .observation .sec01 .flex-box{ display: flex; justify-content: space-between; margin-top: 75px; }
#air .observation .sec01 .box{ width: calc((100% - 40px) / 2); text-align: center; padding: 75px 20px; position: relative; z-index: 20; }
#air .observation .sec01 .box.green::before{ content: ""; width: 100%; height: 100%; background-color: rgba(0, 174, 255, 0.15); border: 1px solid #54d2dd; border-radius: 30px; opacity: 0.5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#air .observation .sec01 .box.blue::before{ content: ""; width: 100%; height: 100%; background-color: rgba(60, 136, 239, 0.15); border: 1px solid #3c88ef; border-radius: 30px; opacity: 0.5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#air .observation .sec01 .box p{ font-size: 2.4rem; font-weight: 600; text-align: center; margin-bottom: 40px; } 
#air .observation .sec01 .box.green p{ color: #54d2dd; }
#air .observation .sec01 .box.blue p{ color: #3c88ef; }

#air .observation .sec02{ margin-top: 120px; padding-bottom: 130px; }
#air .observation .sec02 .flex-box{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 65px; } 
#air .observation .sec02 figure{ display: inline-block; width: calc((100% - 120px) / 3); margin: 0 0 50px 0; }


/* 반응형 */
@media screen and (max-width: 2000px){
	/* service - sec01 */
	#weather .service .sec01{ text-align: left; }
	#weather .service .sec01 .imgBox{ margin: 110px 0 0; }
}

@media screen and (max-width: 1780px){
	/* service - sec01 */
	#weather .service .sec01 .imgBox{ transform: translateX(-17%); }
	
	/* rain - sec01 */
	#weather .rain .sec01 .image img.man{ left: 25%; }
	#weather .rain .sec01 .image img.woman{ right: 28%; }
}

@media screen and (max-width: 1620px){
	#energy .solution .sec01 .circle{ width: 180px; height: 180px; }

	/* color-diagram */
	.color-diagram .flex-box{ justify-content: center; }

	/* solution - sec02 */
	#weather .solution .sec02 .flex-box{ flex-direction: column; align-items: center; }
	#weather .solution .sec02 .textBox{ flex-direction: row; margin-bottom: 60px; padding: 0; }
	#weather .solution .sec02 .textBox p:first-of-type{ margin-right: 6px; }
	#weather .solution .sec02 .half{ width: 100%; }
	#weather .solution .sec02 .formula{ justify-content: center; padding-left: 25%; }
	#weather .solution .sec02 .formula ul li.dot{ display: none; }

	/* rain - sec02 */
	#weather .rain .sec02 ul li{ width: 240px; height: 240px; }

	/* fire - sec01 */
	#weather .fire .sec01 .image img{ max-width: 40%; }

	/* fire - sec02 */
	#weather .fire .sec02 ul li{ width: 240px; height: 240px; }

	#air .eco .sec03 .flex-box{ margin-top: 50px; }
	#air .modelling .sec03 .flex-box{ margin-top: 50px; }
	.glass_ul li{ width: 240px; height: 240px; }
}

@media screen and (max-width: 1550px){
	#energy .circle-graph .text{ margin-right: 30px; }

	#energy .solution .sec01 .relative{ display: flex; flex-direction: column; align-items: center; }
	#energy .solution .sec01 .title{ position: static; transform: translate(0, 0); }
	#energy .solution .sec01 .flex-box{ width: 100%; justify-content: center; margin-top: 50px; }
	#energy .solution .sec01 .half{ width: auto; }
	#energy .solution .sec01 .half:first-of-type{ margin-right: 40px; }
	#energy .solution .sec01 .half::after{ display: none; }
	#energy .fit-ul{ margin-top: 200px; }

	#energy .charge .sec01 ul{ background: none; }
	#energy .charge .sec01 .image{ text-align: center; background: url("/img/main/energy_back01.png") no-repeat center center / auto; }
	#energy .charge .sec01 img{ position: static; transform: translate(0, 0); }
	#energy .charge .sec01 ul li:nth-of-type(1){ margin-top: 100px; }
	#energy .charge .sec01 ul li:nth-of-type(2){ margin-top: 30px; }
	#energy .charge .sec01 ul li:nth-of-type(3){ margin-top: 30px; }
	#energy .charge .sec01 ul li:nth-of-type(4){ margin-top: 30px; }
	#energy .charge .sec01 .talk.talk01::before, #energy .charge .sec01 .talk.talk03::before{ width: 20px; height: 1px; top: 100%; right: calc(100% - 40px); }
	#energy .charge .sec01 .talk.talk01::after, #energy .charge .sec01 .talk.talk03::after{ transform: rotate(0); top: 100%; right: calc(100% - 40px); }
	#energy .charge .sec01 .talk.talk02::before, #energy .charge .sec01 .talk.talk04::before{ width: 20px; height: 1px; transform: rotate(0); top: 100%; left: calc(100% - 40px); }
	#energy .charge .sec01 .talk.talk02::after, #energy .charge .sec01 .talk.talk04::after{ transform: rotate(0); top: 100%; left: calc(100% - 40px); }
	#energy .charge .sec01 .talk.talk03::before{ background-color: #0d4b5d; }
	#energy .charge .sec01 ul li br{ display: none; }

	/* service - sec01 */
	#weather .service .sec01 .imgBox{ transform: translateX(-30%); margin: 175px 0 0; }

	/* solution - sec03 */
	#weather .solution .sec03 .half ul{ padding-left: 50px; }
	#weather .solution .sec03 .half ul li p{ line-height: 1.3; }

	/* service - sec02 */
	#weather .service .sec02{ padding: 70px 0; }
	#weather .service .sec02 .flex-box{ flex-wrap: wrap; }
	#weather .service .sec02 p.bold{ width: 100%; margin-bottom: 35px; }
	#weather .service .sec02 .flex-box ul{ width: 47%; }
	
	/* service - sec03 */
	#weather .service .sec03 figure{ width: 30%; }

	/* fire - sec01 */
	#weather .fire .sec01 .image{ display: flex; justify-content: center; }
	#weather .fire .sec01 .image img{ max-width: 100%; position: static; transform: translateX(0); }
	#weather .fire .sec01 ul{ padding: 50px 0 20px; }
	#weather .fire .sec01 ul li{ width: 100%; padding: 0; }
	#weather .fire .sec01 ul li br{ display: none; }
	#weather .fire .sec01 ul li:nth-of-type(1){ margin-top: 0; margin-bottom: 40px; padding: 0; }
	#weather .fire .sec01 ul li:nth-of-type(2){ margin-top: 0; margin-bottom: 40px; padding: 0; }
	#weather .fire .sec01 ul li:nth-of-type(3){ margin-top: 0; margin-bottom: 40px; padding: 0; }
	#weather .fire .sec01 ul li:nth-of-type(4){ margin-top: 0; margin-bottom: 40px; padding: 0; }
	#weather .fire .sec01 .talk.talk01::before, #weather .fire .sec01 .talk.talk03::before{ width: 22px; height: 1px; top: 100%; right: 85%; }
	#weather .fire .sec01 .talk.talk01::after, #weather .fire .sec01 .talk.talk03::after{ top: 100%; right: 85%; transform: rotate(0); }
	#weather .fire .sec01 .talk.talk02::before, #weather .fire .sec01 .talk.talk04::before{ width: 22px; height: 1px; top: 100%; left: 85%; }
	#weather .fire .sec01 .talk.talk02::after, #weather .fire .sec01 .talk.talk04::after{ top: 100%; left: 85%; transform: rotate(0); }
}

@media screen and (max-width: 1500px){
	#energy .circle-graph{ padding-top: 60px; }
	#energy .circle-graph .flex-box{ flex-direction: column; }
	#energy .circle-graph .text{ width: 100%; padding: 0; margin-bottom: 30px; }
	#energy .circle-graph .text p{ text-align: center; }
	#energy .circle-graph .text span{ width: auto; }

	#energy .charge .sec03 ul li{ width: calc((100% - 60px) / 3); flex-direction: column; }
	#energy .charge .sec03 ul li .image{ margin-right: 0; margin-bottom: 30px; }
	#energy .charge .sec03 ul li .text p{ text-align: center; }
	#energy .charge .sec03 ul li .text p br{ display: none; }
	#energy .charge .sec03 ul li .text span{ width: 100%; text-align: center; }

	/* rain - sec01 */
	#weather .rain .sec01 .image{ margin-top: 50px; }
	#weather .rain .sec01 .image img.phone{ top: 0; transform: translateX(-50%); }
	#weather .rain .sec01 .image img.man{ display: none; }
	#weather .rain .sec01 .image img.woman{ display: none; }
	#weather .rain .sec01 ul{ margin-top: 0; }
	#weather .rain .sec01 ul li .balloon{ width: 35%; }

	/* rain - sec02 */
	#weather .rain .sec02 .flex-box{ flex-direction: column; }
	#weather .rain .sec02 ul{ width: 100%; justify-content: space-evenly; margin-top: 30px; }

	/* fire - sec02 */
	#weather .fire .sec02 .flex-box{ flex-direction: column; }
	#weather .fire .sec02 ul{ width: 100%; justify-content: space-evenly; margin-top: 30px; }

	#air .eco .sec03 .flex-box{ flex-direction: column-reverse; }
	#air .modelling .sec03 .flex-box{ flex-direction: column; }
}

@media screen and (max-width: 1350px){
	#energy .predict .sec03 ul li{ width: calc((100% - 60px) / 4); }

	#popup .sub_header .pc{ display: none; }
	#popup .sub_header .moblie{ display: block; position: relative; }
	#popup .sub_header .moblie ul{ display: none; width: 100%; position: absolute; top: 120%; }
	#popup .sub_header p{ width: 265px; font-size: 1.6rem; font-weight: 600; color: #fff; line-height: 1.3; opacity: 1; padding: 30px 0; position: relative; cursor: pointer; text-align: center; }
	
	#popup .sub_header p::after{ content:"\e942"; font-family: 'xeicon'; font-weight: normal; font-style: normal; margin-left: 15px; cursor: pointer; }
	#popup .sub_header ul{ width: 100%; background-color: #fff; padding: 15px 20px; border-radius: 15px; }
	#popup .sub_header ul li:not(:last-of-type){ margin: 0;}
	#popup .sub_header ul li a{ width: 100%; padding: 15px 0; text-align: center; color: #333; }
	#popup .sub_header ul li a:hover::before{ display: none; } 
	#popup .sub_header ul li a:hover::after{ display: none; } 
	#popup .popup .padding-top{ padding-top: 76px; }

	/* service - sec01 */
	#weather .service .sec01 .imgBox{ transform: translateX(0); }
	#weather .service .sec01 .pc{ display: none; }
	#weather .service .sec01 .moblie{ display: block; }
	#weather .service .sec01 ul li:nth-of-type(1){ right: 4.5%; }
	#weather .service .sec01 ul li:nth-of-type(2){ right: -42.5%; }
	#weather .service .sec01 ul li:nth-of-type(3){ right: -42.5%; }

	#air .infomation .sec02 .flex-box{ flex-wrap: wrap; justify-content: flex-end; }
	#air .infomation .sec02 p{ width: 30%; }
	#air .infomation .sec02 ul{ width: 70%; }
	#air .infomation .sec02 ul li:not(:last-of-type){ margin-bottom: 15px; }
	#air .infomation .sec02 ul:last-of-type{ margin-top: 15px; }
}

@media screen and (max-width: 1250px){
	#popup .popupTit h2{ font-size: 5.5rem; margin-bottom: 10px; }
	#popup p.subText{ font-size: 2rem; }

	/* solution - circle */
	.color-diagram .popupContent .circle > div{ width: 250px; padding: 30px 0; }

	/* solution - sec02 */
	#weather .solution .sec02 .formula{ flex-direction: column; padding: 0; }
	#weather .solution .sec02 .formula > span{ margin: 15px 0; }
	#weather .solution .sec02 .formula .white{ flex-direction: column; }
	#weather .solution .sec02 .formula .white > span{ margin: 15px 0; }
	#weather .solution .sec02 .formula .position.top{ top: 35%; right: -147%; }
	#weather .solution .sec02 .formula .position.top ul{ flex-direction: column-reverse; }
	#weather .solution .sec02 .formula .position.bottom{ bottom: -53%; left: -143%; }
	#weather .solution .sec02 .formula ul{ flex-direction: column; }
	#weather .solution .sec02 .formula ul li:last-of-type{ margin-right: 15px; }
	#weather .solution .sec02 .formula ul li{ margin-bottom: 15px; }
	#weather .solution .sec02 .formula .position.top ul li:last-of-type::after{ top: 50%; left: -52px; transform: translateY(-50%) rotate(90deg); }
	#weather .solution .sec02 .formula .position.bottom ul li:first-of-type::after{ top: 50%; left: 242px; transform: translateY(-50%) rotate(-90deg); }

	/* solution - sec03 */
	#weather .solution .sec03 .flex-box{ flex-direction: column; }
	#weather .solution .sec03 .half{ width: fit-content; } 
	#weather .solution .sec03 .half ul{ justify-content: space-around; margin-top: 30px; padding-left: 0; }
	#weather .solution .sec03 .half ul li{ width: 35%; margin-bottom: 30px; }
	#weather .solution .sec03 .half ul li p{ font-size: 1.8rem; }

	/* service - sec01 */
	#weather .service .sec01 .imgBox{ width: 100%; margin: 50px 0 0; }
	#weather .service .sec01 ul li{ position: static; padding: 0 20px; margin-bottom: 40px; }
	#weather .service .sec01 ul li br{ display: none; }
	#weather .service .sec01 ul li:nth-of-type(1){ width: 100%; display: flex; justify-content: flex-end; margin-bottom: 70px; }
	#weather .service .sec01 ul li:nth-of-type(2){ width: 100%; display: flex; justify-content: flex-start; }
	#weather .service .sec01 ul li:nth-of-type(3){ width: 100%; display: flex; justify-content: flex-end; }
	#weather .service .sec01 .talk.talk01::before{ left: 94%; }
	#weather .service .sec01 .talk.talk01::after{ left: 95%; }
	#weather .service .sec01 .talk.talk02::before{ left: 4%; }
	#weather .service .sec01 .talk.talk02::after{ left: 4%; }
	#weather .service .sec01 .talk.talk03::before{ left: 91%; }
	#weather .service .sec01 .talk.talk03::after{ left: 91%; }
	#weather .service .sec01 .moblie{ margin-top: -9%; }

	#air .eco .sec01 .opacity{ padding: 30px 35px; margin-right: 80px; }
	#air .eco .sec01 .opacity::after{ right: -38px; }
	#air .eco .sec01 .circle{ width: 200px; height: 200px; }
	#air .eco .sec01 .flex-box{ justify-content: center; }
	#air .eco .sec01 .opacity .position{ top: 105%; }
	#air .eco .sec01 .opacity .position ul{ flex-direction: column; }
	#air .eco .sec01 .opacity .position ul::before{ display: none; }
	#air .eco .sec01 .opacity .position ul::after{ top: -62px; }
	#air .eco .sec01 .opacity .position ul li{ padding: 15px 0; }
	#air .eco .sec01 .opacity .position ul li:first-of-type{ margin-right: 0; margin-bottom: 20px; }
	#air .eco .sec01 .opacity .position ul li::after{ height: 20px; top: -20px; }

	#air .infomation .sec02 .flex-box{ flex-direction: column; }
	#air .infomation .sec02 p{ width: 100%; margin-bottom: 30px; }
	#air .infomation .sec02 ul{ width: 100%; }

	#air .modelling .sec01 .pc{ margin: 100px 0; }

	#air .observation .sec02 figure{ width: calc((100% - 60px) / 3); }
}

@media screen and (max-width: 1100px){
	#energy .solar{ padding-top: 80px; }
	#energy .fit-ul{ margin-top: 100px; }
	#energy .wind{ padding-top: 150px; }
	#energy .manage{ padding-top: 150px; }
	#energy .predict{ padding-top: 150px; }
	#energy .charge{ padding-top: 150px; }

	#energy .circle-graph .flex-box{ padding-right: 0; }
	#energy .circle-graph .graph{ flex-direction: column; }
	#energy .circle-graph .white{ flex-direction: column; margin-right: 0; margin-bottom: 100px; padding: 30px; }
	#energy .circle-graph .white::after{ top: 105%; right: 110px; transform: rotate(90deg); }
	#energy .circle-graph .white .circle:nth-of-type(2){ margin: 10px 0; }
	#energy .circle-graph .position{ bottom: 14%; right: -70%; }
	#energy .circle-graph .position ul{ flex-direction: column; }
	#energy .circle-graph .position ul li::before{ width: 1px; height: 20px; top: 100%; right: 50%; transform: translateX(50%); }
	#energy .circle-graph .position ul li:last-of-type::after{ top: 50%; left: -30%; transform: translateY(-50%) rotate(-90deg); }
	#energy .circle-graph .position ul li:not(:last-of-type){ margin-right: 0; margin-bottom: 20px; }	#weather .solution{ padding-top: 80px; }
	#weather .service{ padding-top: 150px; }
	#weather .service .sec02{ margin: 70px 0; }
	#weather .rain{ padding-top: 150px; }
	#weather .fire{ padding-top: 150px; }

	#energy .fit-ul .flex-box{ flex-direction: column; }
	#energy .fit-ul figure{ width: auto; }
	#energy .fit-ul .text{ width: 100%; margin-top: 50px; }
	#energy .fit-ul .text ul.row{ flex-direction: column; }
	#energy .predict .sec03 ul{ flex-wrap: wrap; margin-top: 70px; }
	#energy .predict .sec03 ul li{ width: calc((100% - 40px) / 2); margin-top: 30px; }
	#energy .predict .sec03 figure{ width: 100%; text-align: center; }
	
	.color-diagram .flex-box{ flex-direction: column; padding: 70px 0 105px; }

	/* color-diagram - circle */
	.color-diagram .popupContent .circle{ width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-right: 0; margin-bottom: 130px; }
	.color-diagram .circle::before{ height: 174%; top: 21%; right: 50%; transform: rotate(90deg); }
	.color-diagram .circle::after{ top: 121%; right: 49.6%; width: 1px; height: 70px; }
	.color-diagram .popupContent .circle > div{ margin-bottom: 50px; }
	.color-diagram .popupContent .circle > div:nth-of-type(odd){ margin-right: 200px; }
	.color-diagram .popupContent .circle > div::after{ top: 150%; right: 38%; transform: rotate(90deg); }
	.color-diagram .popupContent .circle > div:nth-of-type(1)::after{ display: none; }
	.color-diagram .popupContent .circle > div:nth-of-type(2)::after{ display: none; }
	.color-diagram .circle span{ display: none; }

	/* color-diagram - square */
	.color-diagram .square{ display: flex; margin-left: 0; }
	.color-diagram .square::before{ top: -75.8%; left: 50.5%; height: 130%; transform: rotate(90deg); }
	.color-diagram .square .line{ flex-direction: column; }
	.color-diagram .square .line:not(:last-of-type){ margin-bottom: 0; margin-right: 50px; }
	.color-diagram .square .line .box:not(:last-of-type){ margin-right: 0; margin-bottom: 32px; }
	.color-diagram .square .line .box::after{ top: -1px; left: 44%; transform: rotate(90deg) translateX(-50%); }
	.color-diagram .square .box.title::after{ top: -24px; left: 32%; transform: rotate(90deg) }

	/* solution - sec02 */
	#weather .solution .sec02 .textBox{ flex-direction: column; justify-content: center; align-items: center; }
	#weather .solution .sec02 .textBox p{ text-align: center; } 
	#weather .solution .sec02 .formula .white{ padding: 30px; } 
	#weather .solution .sec02 .info{ width: 160px; height: 160px; }
	#weather .solution .sec02 .info > span{ font-size: 2rem; line-height: 160px; }
	#weather .solution .sec02 .formula .position.top{ top: 34%; right: -159%; }
	#weather .solution .sec02 .formula .position.bottom{ bottom: -56%; left: -150%; }
	#weather .solution .sec02 .formula ul li:not(.dot){ width: 170px; height: 50px; }
	#weather .solution .sec02 .formula ul li span{ font-size: 1.6rem; }
	#weather .solution .sec02 .formula .position.bottom ul li:first-of-type::after{ left: 217px; }

	/* solution - sec03 */
	#weather .solution .sec03 .flex-box{ padding: 10px 0 0; }
	#weather .solution .sec03 .half ul li{ width: 40%; }

	/* service - sec01 */
	#weather .service .sec01 ul li:nth-of-type(1){ margin-bottom: 90px; }

	/* rain - sec01 */
	#weather .rain .sec01 .image{ background: url("/img/main/weather_back04.png") no-repeat center center / auto; }
	#weather .rain .sec01 .image img{ position: relative;  }
	#weather .rain .sec01 ul{ background: none; }
	#weather .rain .sec01 ul li{ width: 100%; margin-top: 0; margin-bottom: 20px; padding: 0 20px; }
	#weather .rain .sec01 ul li br{ display: none; }
	#weather .rain .sec01 ul li:nth-of-type(odd){ justify-content: flex-end; }
	#weather .rain .sec01 ul li:nth-of-type(even){ justify-content: flex-start; }
	#weather .rain .sec01 ul li:nth-of-type(2){ margin-top: 0; margin-bottom: 20px; }
	#weather .rain .sec01 ul li:nth-of-type(3){ margin-top: 0; margin-bottom: 20px; }
	#weather .rain .sec01 ul li:nth-of-type(4){ margin-top: 0; margin-bottom: 20px; }
	#weather .rain .sec01 ul li .balloon{ width: fit-content; }

	/* rain - sec02 */
	#weather .rain .sec02 ul li p{ font-size: 1.8rem; }

	/* fire - sec02 */
	#weather .fire .sec02 ul li p{ font-size: 1.8rem; }

	#air .eco{ padding-top: 80px; }
	#air .infomation{ padding-top: 150px; }
	#air .modelling{ padding-top: 150px; }
	#air .observation{ padding-top: 150px; }
}

@media screen and (max-width: 1000px){
	#energy .charge .sec02 figure{ width: 100%; margin: 0; text-align: center; margin-bottom: 60px; }
	#energy .charge .sec02 .flex-box{ flex-direction: column; }
	#energy .charge .sec03{ padding: 50px 0 150px; }


	#air .eco .sec01 .flex-box{ flex-direction: column; padding: 60px 0 100px; }
	#air .eco .sec01 .opacity{ flex-direction: column; margin-right: 210px; margin-bottom: 80px; padding: 30px 20px; }
	#air .eco .sec01 .opacity::after{ top: 105%; right: 50%; }
	#air .eco .sec01 .opacity .circle:not(:first-of-type){ margin-left: 0; margin-top: -15px; }
	#air .eco .sec01 .opacity .position{ top: 50%; left: calc(100% + 15px); transform: translateY(-50%); }
	#air .eco .sec01 .opacity .position ul::after{ top: 10%; left: -23px; transform: rotate(-90deg); }
	#air .eco .sec01 .opacity .position ul li{ width: 200px; padding: 15px; border-radius: 30px; }
	#air .eco .sec01 .opacity .position ul li:first-of-type::after{ display: none; }
	#air .eco .sec01 .flex-box > .circle{ margin-right: 210px; }

	#air .eco .sec02 .flex-box{ flex-wrap: wrap; margin-bottom: 75px; }
	#air .eco .sec02 figure{ width: calc((100% - 25px) / 2); text-align: center; margin-bottom: 25px; }

	#air .modelling .sec01 .pc{ display: none; }
	#air .modelling .sec01 .moblie{ display: block; }
	#air .modelling .sec02 figure{ width: calc((100% - 60px) / 3); }

	#air .observation .sec01 .flex-box{ flex-direction: column; }
	#air .observation .sec01 .box{ width: 100%; padding: 40px 20px; }
	#air .observation .sec01 .box.green{ margin-bottom: 30px; }

	#air .observation .sec02 figure{ width: calc((100% - 30px) / 2); }
}

@media screen and (max-width: 900px){
	#popup .popupTit h2 img{ margin-left: 0; }

	#energy .charge .sec01 .talk.talk01::before{ background-color: #093f53; }
	#energy .charge .sec01 .talk.talk02::before{ background-color: #0d4b5d; }
	#energy .charge .sec01 .talk.talk04::before{ background-color: #0d4b5d; }

	#energy .solution .sec01 .flex-box{ flex-direction: column; }
	#energy .solution .sec01 .half:first-of-type{ margin-right: 0; margin-bottom: 40px; }
	#energy .solution .sec01 .circle::before{ display: none; }


	.glass_ul{ flex-direction: column; }
	.glass_ul li{ width: 100%; height: 160px; }
	#air .eco .sec03 .glass_ul{ flex-direction: column; }
	#air .eco .sec03 .glass_ul{ width: 100%; }
	.glass_ul li:not(:last-of-type){ margin-right: 0; margin-bottom: 30px; }

	#air .modelling .sec03 .glass_ul{ margin-top: 50px; }
}

@media screen and (max-width: 800px){
	#energy .charge .sec03 ul{ flex-direction: column; margin-top: 40px; }
	#energy .charge .sec03 ul li{ width: 100%; margin-bottom: 30px; }

	/* color-diagram - circle */
	.color-diagram .popupContent .circle > div:nth-of-type(odd){ margin-right: 50px; }
	.color-diagram .circle::before{ height: 116%; top: 50.5%; right: 50%; }
	.color-diagram .circle::after{ right: 49.5%; }

	/* color-diagram - square */
	.color-diagram .square::before{ top: -64.5%; left: 50.5%; height: 107%; }
	.color-diagram .square .box{ width: 150px; flex-direction: column; padding: 0 5px; }
	.color-diagram .square .box img{ margin-right: 0; margin-bottom: 10px; }
	.color-diagram .square .box p{ text-align: center;}
	.color-diagram .square .box p br{ display: none; }

	/* service - sec02 */
	#weather .service .sec02 .flex-box ul{ width: 100%; }
	#weather .service .sec02 ul.check li:not(:last-of-type){ margin-bottom: 15px; }
	#weather .service .sec02 .flex-box ul.blue{ margin-top: 30px; }

	/* service - sec03 */
	#weather .service .sec03 .flex-box{ flex-direction: column; padding-top: 20px; }
	#weather .service .sec03 figure{ width: fit-content; }
	#weather .service .sec03 figure:not(:last-of-type){ margin-bottom: 20px; }

	/* rain - sec02 */
	#weather .rain .sec02 ul{ flex-direction: column; }
	#weather .rain .sec02 ul li{ width: 100%; height: 160px; }
	#weather .rain .sec02 ul li:not(:first-of-type){ margin-left: 0; margin-top: 20px; }

	/* fire - sec02 */
	#weather .fire .sec02 ul{ flex-direction: column; }
	#weather .fire .sec02 ul li{ width: 100%; height: 160px; }
	#weather .fire .sec02 ul li:not(:first-of-type){ margin-left: 0; margin-top: 20px; }

	#air .modelling .sec02 .flex-box{ flex-direction: column; margin: 50px 0 80px; } 
	#air .modelling .sec02 figure{ width: 100%; text-align: center; margin-bottom: 30px; }

	#air .modelling .sec01 .moblie .step{ width: 100%; }
	#air .modelling .sec01 .moblie .title{ padding: 17px 0; }
}

@media screen and (max-width: 700px){
	#energy .circle-graph .white{ margin-right: 174px; }
	#energy .circle-graph .graph > .circle{ margin-right: 174px; }

	#energy .predict .sec03 ul li{ width: 100%; }

	#energy .solution .sec01 .title{ width: 100%; }

	/* solution - sec02 */
	#weather .solution .sec02 .half:not(.textBox){ display: flex; justify-content: center; }
	#weather .solution .sec02 .formula{ width: fit-content; margin-left: -35%; }
	#weather .solution .sec02 .formula .position.bottom{ left: 143%; }
	#weather .solution .sec02 .formula .position.bottom ul li:first-of-type::after{ left: -52px; transform: translateY(-50%) rotate(90deg); }

	/* solution - sec03 */
	#weather .solution .sec03 .half ul li{ width: 47%; }

	#air .modelling .sec01 .moblie .step{ width: 100%; }
	#air .modelling .sec01 .moblie ul li br{ display: none; }

	#air .observation .sec02{ margin-top: 50px; padding-bottom: 100px; }
	#air .observation .sec02 figure{ width: 100%; text-align: center; }
}

@media screen and (max-width: 610px){
	#energy .solution .sec01 .title{ padding: 0 60px; }

	/* color-diagram - circle */
	.color-diagram .popupContent .circle{ flex-direction: column; margin-bottom: 75px; }
	.color-diagram .circle::before{ display: none; }
	.color-diagram .circle::after{ display: none; }
	.color-diagram .popupContent .circle > div{ width: 230px; padding: 25px 0; font-size: 1.8rem; margin-bottom: 0; }
	.color-diagram .circle span{ display: block; margin: 20px 0; }
	.color-diagram .popupContent .circle > div:nth-of-type(odd){ margin-right: 0; }
	.color-diagram .popupContent .circle > div::after{ height: 58px; top: 119%; right: 50%; }
	.color-diagram .popupContent .circle > div:nth-of-type(3)::after{ display: none; }

	/* solution - square */
	.color-diagram .square{ width: 100%; flex-direction: column; }
	.color-diagram .square::before{ display: none; }
	.color-diagram .square .line{ flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
	.color-diagram .square .line:not(:last-of-type){ margin-right: 0; margin-bottom: 30px; }
	.color-diagram .square .box{ width: calc((100% - 20px) / 2 ); }
	.color-diagram .square .line .box::after{ display: none; }
	.color-diagram .square .line .box:not(:last-of-type){ margin-bottom: 0; } 
	.color-diagram .square .box.title{ width: 100%; margin-bottom: 20px; }
	.color-diagram .square .box.title::after{ display: none; }
	.color-diagram .square .line .box:first-of-type{ margin-bottom: 20px; }

	/* service - sec01 */
	#weather .service .sec01 ul li:nth-of-type(2){ margin-bottom: 20px; }
	#weather .service .sec01 .talk.talk01::before{ left: 92.5%; }
}

@media screen and (max-width: 500px){
	/* solution - sec02 */
	#weather .solution .sec02 .half:not(.textBox){ justify-content: flex-start; }
	#weather .solution .sec02 .formula{ margin-left: 0; }
}