@charset "utf-8"; /* CSS Document */ #section2 {min-height: 700px; padding-top: 90px; /*background-color: #f8f8f8;*/ } #section2 .wrap {text-align: center; } #section2 h2 {text-align: center; color: #1a1a1a; } #section2 h2 span {color: #555; } #section2 .point_tab {position: absolute; top: 0; left: 0; right: 0; z-index: 1; width: 100%; margin: 0 auto; height: 100%; max-width: 1200px; } #section2 .tab_list {position: absolute; width: 390px; min-height: 99px; cursor: pointer; } #section2 .tab_list p {margin: 0; } #section2 .tab_list:before {overflow: hidden; display: block; position: absolute; top: 0; width: 95px; height: 95px; border-radius: 50%; box-sizing: border-box; background: url('../../images/main/bg_round_web.png') no-repeat center center; background-size: 95px 95px; } #section2 .tab_list:after {display: block; position: absolute; top: 0; width: 95px; height: 95px; box-sizing: border-box; background-repeat: no-repeat; background-position: center center; } #section2 .tab_list.n1 {top: 30%; left: 0; } #section2 .tab_list.n2 {top: 50%; left: 0; } #section2 .tab_list.n3 {top: 70%; left: 0; } #section2 .tab_list.n4 {top: 483px; left: -315px; } #section2 .tab_list.n5 {top: 30%; right: 0; } #section2 .tab_list.n6 {top: 50%; right: 0; } #section2 .tab_list.n7 {top: 70%; right: 0; } li.tab_list {list-style: none; } #section2 .tab_list.n8 {top: 483px; right: -315px; } #section2 .tab_list.n1:before, #section2 .tab_list.n2:before, #section2 .tab_list.n3:before, #section2 .tab_list.n4:before {right: 0; } #section2 .tab_list.n1:after {right: 0; background-image: url('../../images/main/bg_point1.png'); background-size: 53px 40px; } #section2 .tab_list.n2:after {right: 0; background-image: url('../../images/main/bg_point2.png'); background-size: 53px 40px; } #section2 .tab_list.n3:after {right: 0; background-image: url('../../images/main/bg_point3.png'); background-size: 53px 46px; } #section2 .tab_list.n4:after {right: 0; background-image: url('../../images/main/bg_point4.png'); background-size: 45px 51px; } #section2 .tab_list.n5:after {left: 0; background-image: url('../../images/main/bg_point5.png'); background-size: 50px 38px; } #section2 .tab_list.n6:after {left: 0; background-image: url('../../images/main/bg_point6.png'); background-size: 43px 43px; } #section2 .tab_list.n7:after {left: 0; background-image: url('../../images/main/bg_point7.png'); background-size: 53px 42px; } /* ### 201118_수정 */ #section2 .tab_list.n8:after {left: 0; background-image: url('../../images/main/bg_point8.png'); background-size: 48px 36px; } /*#section2 .tab_list a{display:block; font-size:24px; font-weight:500; line-height:32px; color:#1a1a1a; letter-spacing:-0.48px; word-break:keep-all;}*/ #section2 .tab_list.n1 a, #section2 .tab_list.n2 a, #section2 .tab_list.n3 a, #section2 .tab_list.n4 a {padding-right: 120px; text-align: right; display: contents; } #section2 .tab_list.n5 a, #section2 .tab_list.n6 a, #section2 .tab_list.n7 a, #section2 .tab_list.n8 a {/*padding-left: 120px;*/ text-align: left; } /* ### 201118_수정 */ #section2 .tab_list a span {margin-top: 10px; /*font-size: 18px; line-height: 24px; letter-spacing: -0.2px; color: #555; font-weight: 300; width: 100%;*/ } #section2 .tab_list.active:before {background-image: none; background-color: #fd6255; box-shadow: 0 5px 20px 0 rgba(229, 41, 28, 0.33); } #section2 .tab_list.n1.active:after {background-image: url('../../images/main/bg_point1_on.png'); } #section2 .tab_list.n2.active:after {background-image: url('../../images/main/bg_point2_on.png'); } #section2 .tab_list.n3.active:after {background-image: url('../../images/main/bg_point3_on.png'); } #section2 .tab_list.n4.active:after {background-image: url('../../images/main/bg_point4_on.png'); } #section2 .tab_list.n5.active:after {background-image: url('../../images/main/bg_point5_on.png'); } #section2 .tab_list.n6.active:after {background-image: url('../../images/main/bg_point6_on.png'); } #section2 .tab_list.n7.active:after {background-image: url('../../images/main/bg_point7_on.png'); } #section2 .tab_list.n8.active:after {background-image: url('../../images/main/bg_point8_on.png'); } #section2 .tab_list.active a {color: #fd6255; } #section2 .point_panel {position: relative; margin: 57px auto 0 auto; } #section2 .panel_list {display: none; } #section2 .panel_list.active {display: inline-block; } #section2 .panel_list img {width: 528px; } /*@media all and (max-width:1100px) {*/ @media all and (max-width:992px) {#section2 {min-height: 795px; padding-top: 35px; padding-bottom: 70px; } #section2 h2 {color: #000; } #section2 .point_tab {top: 380px; left: -20px; right: 0; width: 700px; margin: 0 auto; } #section2 .tab_list {margin-top: 4px; position: relative; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; float: left; width: 50%; min-height: 80px; padding-right: 30px; } #section2 .tab_list:before {right: auto !important; left: 0 !important; width: 50px; height: 50px; background-image: url('../../images/main/bg_round_m.png'); background-size: 50px 50px; } #section2 .tab_list:after {right: auto !important; left: 0 !important; width: 50px; height: 50px; } #section2 .tab_list.n1:after {background-image: url('../../images/main/bg_point1_m.png'); background-size: 29px 22px; } #section2 .tab_list.n2:after {background-image: url('../../images/main/bg_point2_m.png'); background-size: 28px 21px; } #section2 .tab_list.n3:after {background-image: url('../../images/main/bg_point3_m.png'); background-size: 28px 25px; } #section2 .tab_list.n4:after {background-image: url('../../images/main/bg_point4_m.png'); background-size: 24px 27px; } #section2 .tab_list.n5:after {background-image: url('../../images/main/bg_point5_m.png'); background-size: 27px 20px; } #section2 .tab_list.n6:after {background-image: url('../../images/main/bg_point6_m.png'); background-size: 23px 23px; } #section2 .tab_list.n7:after {background-image: url('../../images/main/bg_point7_m.png'); background-size: 28px 23px; } /* ### 201118_수정 */ #section2 .tab_list.n8:after {background-image: url('../../images/main/bg_point8_m.png'); background-size: 25px 19px; } #section2 .tab_list.n1.active:after {background-image: url('../../images/main/bg_point1_m_on.png'); } #section2 .tab_list.n2.active:after {background-image: url('../../images/main/bg_point2_m_on.png'); } #section2 .tab_list.n3.active:after {background-image: url('../../images/main/bg_point3_m_on.png'); } #section2 .tab_list.n4.active:after {background-image: url('../../images/main/bg_point4_m_on.png'); } #section2 .tab_list.n5.active:after {background-image: url('../../images/main/bg_point5_m_on.png'); } #section2 .tab_list.n6.active:after {background-image: url('../../images/main/bg_point6_m_on.png'); } #section2 .tab_list.n7.active:after {background-image: url('../../images/main/bg_point7_m_on.png'); } #section2 .tab_list.n8.active:after {background-image: url('../../images/main/bg_point8_m_on.png'); } #section2 .tab_list a {padding-top: 2px; padding-left: 71px !important; padding-right: 0 !important; text-align: left !important; font-size: 18px; line-height: 22px; letter-spacing: -0.36px; } #section2 .tab_list a span {display: block; font-size: 14px; line-height: 20px; margin-top: 4px; } #section2 .point_panel {margin-top: 0; padding-top: 15px; } #section2 .panel_list img {width: 250px; } } @media all and (max-width:768px) {/* #section2{min-height:1052px;} */ #section2 {min-height: 1082px; } #section2 .point_tab {left: 0; width: 300px; } #section2 .tab_list {width: 100%; padding-right: 0; margin-top: 6px; } #section2 .tab_list a {padding-left: 64px !important; } #section2 .tab_list a span {font-size: 14px; letter-spacing: -0.1px; } } @media all and (max-width:600px) {#section2 {height: 1052px; } #section2 .wrap {position: unset; padding-left: 25px; padding-right: 25px; } #section2 .point_tab {top: 355px; } #section2 h2, #section2 .point_panel {transition: opacity 0.2s ease-in-out; } #section2 .panel_list img {width: 200px; } #section2.fixed .point_panel {position: fixed; top: 50px; left: 0; right: 0; z-index: 10; padding-bottom: 30px; background-color: #f8f8f8; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } #section2.fixed.bottom .point_panel {position: absolute; top: auto; bottom: 0; } }#section2 .tab_list:hover {background-color: rgb(0 105 181 / 60%); border-radius: 10px; transform: scale(1.1); } #section2 .tab_list {padding: 15px 10px;transition-duration: 0.3s;}