#main_key_visual { position: relative; height: 100vh; background-color: #000; } #main_key_visual .txt_box { display: none; position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; margin-top: -30px; color: #fff; text-align: center; opacity: 0; } #main_key_visual .txt_box.scrollOn { margin-top: 30px; opacity: 1; transition: all 2s; } #main_key_visual .txt_box p { font-size: 26px; letter-spacing: -0.01rem; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.28); } @media (max-width: 1024px) { #main_key_visual .txt_box p { font-size: 13px; } } #main_key_visual .txt_box h2 { margin-top: 34px; font-size: 55px; font-weight: bold; letter-spacing: -1.38px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.28); } @media (max-width: 1024px) { #main_key_visual .txt_box h2 { margin-top: 16px; font-size: 28px; letter-spacing: -0.69px; } } #main_key_visual .scrll_down { position: absolute; bottom: 100px; z-index: 10; left: 50%; transform: translateX(-50%); text-align: center; } @media (max-width: 1024px) { #main_key_visual .scrll_down { bottom: 36px; } } #main_key_visual .scrll_down i { display: inline-block; position: relative; width: 22px; height: 46px; border: 2px solid #fff; border-radius: 200px; font-size: 0; text-indent: -9999px; } @media (max-width: 1024px) { #main_key_visual .scrll_down i { width: 12px; height: 24px; border-width: 1px; } } #main_key_visual .scrll_down i::after { content: ''; display: inline-block; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 1px; height: 8px; background-color: #fff; } @media (max-width: 1024px) { #main_key_visual .scrll_down i::after { bottom: 4px; height: 4px; } } #main_key_visual .scrll_down p { margin-top: 10px; font-size: 12px; color: #fff; } @media (max-width: 1024px) { #main_key_visual .scrll_down p { margin-top: 5px; font-size: 6px; } } #main_key_visual .video_box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; overflow: hidden; } #main_key_visual .video_box video { min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; } @media (max-width: 1024px) { #main_key_visual .video_box video { min-height: auto; width: 100%; top: 0; transform: translateX(-50%); } } #container.main_page .comm_con .tit_box { margin-bottom: 60px; } @media (max-width: 1024px) { #container.main_page .comm_con .tit_box { margin-bottom: 40px; } } #container.main_page .comm_con .tit_box .tit { font-size: 45px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; line-height: 1.11; font-weight: 500; color: #000; } @media (max-width: 1024px) { #container.main_page .comm_con .tit_box .tit { font-size: 25px; line-height: 1; } } #container.main_page .comm_con .tit_box .sub_tit { margin-top: 20px; font-weight: 300; color: #777; } @media (max-width: 1024px) { #container.main_page .comm_con .tit_box .sub_tit { margin-top: 10px; } } #container.main_page .comm_con .btn_comm { margin-top: 50px; text-align: center; } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm { margin-top: 30px; } } #container.main_page .comm_con .btn_comm a, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button { display: inline-block; width: 240px; height: 60px; color: #333; background-color: #fff; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button { padding: 0 10px; } } #container.main_page .comm_con .btn_comm a i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button i.btn_arrow { margin-left: 40px; } } #container.main_page .comm_con .btn_comm a i.btn_arrow img, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a i.btn_arrow img, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button i.btn_arrow img { width: 6px; height: 9px; } } #container.main_page .comm_con .btn_comm a:hover, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover { display: inline-block; width: 240px; height: 60px; color: #333; background-color: #fff; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; color: #fff; background-color: #062d44; text-align: left; } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover { padding: 0 10px; } } #container.main_page .comm_con .btn_comm a:hover i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow { margin-left: 40px; } } #container.main_page .comm_con .btn_comm a:hover i.btn_arrow img, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover i.btn_arrow img, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow img { width: 6px; height: 9px; } } #container.main_page .comm_con .btn_comm a:hover i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow { float: right; } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button { display: inline-block; width: 135px; height: 30px; font-size: 11px; color: #333; background-color: #fff; line-height: 30px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .comm_con .btn_comm a, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button { padding: 0 10px; } } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .comm_con .btn_comm a i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a i.btn_arrow img, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .comm_con .btn_comm a i.btn_arrow img, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover { display: inline-block; width: 135px; height: 30px; font-size: 11px; color: #333; background-color: #fff; line-height: 30px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; color: #fff; background-color: #062d44; text-align: left; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover { padding: 0 10px; } } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover i.btn_arrow img, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover i.btn_arrow img, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1024px) { #container.main_page .comm_con .btn_comm a:hover i.btn_arrow, #container.main_page .comm_con .btn_comm #container.sub_page .personal .personal__btn button:hover i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .comm_con .btn_comm button:hover i.btn_arrow { float: right; } } #container.main_page .content01 { padding: 100px 0; } @media (max-width: 1240px) { #container.main_page .content01 { padding: 100px 15px; } } @media (max-width: 1024px) { #container.main_page .content01 { padding: 60px 0; } } @media (max-width: 1024px) { #container.main_page .content01 .item_box { max-width: 155px; margin: 0 auto; } } #container.main_page .content01 .item_box ul { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 1024px) { #container.main_page .content01 .item_box ul { flex-direction: column; } } @media (max-width: 1024px) { #container.main_page .content01 .item_box ul li { width: 100%; text-align: left; } #container.main_page .content01 .item_box ul li ~ li { margin-top: 24px; } } #container.main_page .content01 .item_box ul li .comm_item { display: inline-block; position: relative; text-align: left; } @media (max-width: 1024px) { #container.main_page .content01 .item_box ul li .comm_item { margin: 0 auto; } } #container.main_page .content01 .item_box ul li .comm_item i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; } #container.main_page .content01 .item_box ul li .comm_item i img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 1024px) { #container.main_page .content01 .item_box ul li .comm_item i { width: 40px; height: 40px; text-align: center; } #container.main_page .content01 .item_box ul li .comm_item i img { height: 40px; } } #container.main_page .content01 .item_box ul li .comm_item .txt_box { margin-left: 100px; } @media (max-width: 1024px) { #container.main_page .content01 .item_box ul li .comm_item .txt_box { margin-left: 50px; } } #container.main_page .content01 .item_box ul li .comm_item .txt_box .txt_t { font-weight: 500; color: #777; } #container.main_page .content01 .item_box ul li .comm_item .txt_box .txt_b { margin-top: 10px; color: #222; font-size: 45px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; } @media (max-width: 1024px) { #container.main_page .content01 .item_box ul li .comm_item .txt_box .txt_b { font-size: 25px; line-height: 1; } } @media (max-width: 1024px) { #container.main_page .content01 .item_box ul li .comm_item .txt_box .txt_b { margin-top: 4px; } } #container.main_page .content01 .item_box ul li .comm_item .txt_box .txt_b.comm_num { font-size: 55px; font-weight: bold; letter-spacing: -0.5px; } @media (max-width: 1024px) { #container.main_page .content01 .item_box ul li .comm_item .txt_box .txt_b.comm_num { font-size: 25px; letter-spacing: -0.25px; } } #container.main_page .content01 .item_box ul li .comm_item .txt_box .txt_b span { font-size: 30px; font-weight: 300; } @media (max-width: 1024px) { #container.main_page .content01 .item_box ul li .comm_item .txt_box .txt_b span { font-size: 13px; } } #container.main_page .content01 .criteria { margin-top: 60px; font-size: 22px; text-align: center; } @media (max-width: 1024px) { #container.main_page .content01 .criteria { margin-top: 30px; font-size: 12px; } } #container.main_page .content02 { max-height: 780px; padding: 90px 0 120px 6vw; background-color: #f0f0f0; } @media (max-width: 1240px) { #container.main_page .content02 { padding: 90px 0 120px 15px; } } @media (max-width: 1024px) { #container.main_page .content02 { position: relative; max-height: 780px; min-height: 450px; height: 111vw; padding: 60px 0 60px 15px; } } #container.main_page .content02 .tit_box { max-width: 258px; margin-top: 100px; } @media (max-width: 1024px) { #container.main_page .content02 .tit_box { width: 100%; margin-top: 0; margin-bottom: 20px; text-align: center; } } #container.main_page .content02 .tit_box .btn_box { margin-top: 60px; } @media (max-width: 1024px) { #container.main_page .content02 .tit_box .btn_box { display: none; margin-top: 0; position: absolute; bottom: 40px; right: 15px; } } #container.main_page .content02 .tit_box .btn_box .btn { display: inline-block; position: relative; width: 50px; height: 50px; vertical-align: top; border: 1px solid #b7b7b7; cursor: pointer; } @media (max-width: 1024px) { #container.main_page .content02 .tit_box .btn_box .btn { width: 30px; height: 30px; } } #container.main_page .content02 .tit_box .btn_box .btn.btn_on { background-color: #333; } #container.main_page .content02 .tit_box .btn_box .btn i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 1024px) { #container.main_page .content02 .tit_box .btn_box .btn i { height: 8px; } #container.main_page .content02 .tit_box .btn_box .btn i img { width: 6px; } } #container.main_page .content02 .product_list { width: calc(100% - 308px); margin-left: 50px; } @media (max-width: 1024px) { #container.main_page .content02 .product_list { width: 100%; margin-left: 0; } } #container.main_page .content02 .product_list .product-container { padding-top: 30px; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container { padding-top: 15px; } } #container.main_page .content02 .product_list .product-container ul li:nth-child(1n) { max-width: 360px; width: 25%; } @media (max-width: 1240px) { #container.main_page .content02 .product_list .product-container ul li:nth-child(1n) { width: 33.33333%; } } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li:nth-child(1n) { width: 50%; } } #container.main_page .content02 .product_list .product-container ul li.active .product, #container.main_page .content02 .product_list .product-container ul li.active #sub_key_visual .key_visual.product1, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li.active .key_visual.product1, #container.main_page .content02 .product_list .product-container ul li.active #sub_key_visual .key_visual.product2, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li.active .key_visual.product2 { transform: translateY(-30px); } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li.active .product, #container.main_page .content02 .product_list .product-container ul li.active #sub_key_visual .key_visual.product1, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li.active .key_visual.product1, #container.main_page .content02 .product_list .product-container ul li.active #sub_key_visual .key_visual.product2, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li.active .key_visual.product2 { transform: translateY(-15px); } } #container.main_page .content02 .product_list .product-container ul li.active .product::after, #container.main_page .content02 .product_list .product-container ul li.active #sub_key_visual .key_visual.product1::after, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li.active .key_visual.product1::after, #container.main_page .content02 .product_list .product-container ul li.active #sub_key_visual .key_visual.product2::after, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li.active .key_visual.product2::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(31, 31, 31, 0.31); box-shadow: 12.3px 13.2px 29px 0 rgba(0, 0, 0, 0.36); } #container.main_page .content02 .product_list .product-container ul li.active .product .info_box, #container.main_page .content02 .product_list .product-container ul li.active #sub_key_visual .key_visual.product1 .info_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li.active .key_visual.product1 .info_box, #container.main_page .content02 .product_list .product-container ul li.active #sub_key_visual .key_visual.product2 .info_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li.active .key_visual.product2 .info_box { display: block; } #container.main_page .content02 .product_list .product-container ul li.active .name { display: none; } #container.main_page .content02 .product_list .product-container ul li.active .more_box { display: block; } #container.main_page .content02 .product_list .product-container ul li.active .more_box a, #container.main_page .content02 .product_list .product-container ul li.active .more_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li.active .more_box button { display: inline-block; padding: 5px 0; font-weight: 500; } #container.main_page .content02 .product_list .product-container ul li.active .more_box a i, #container.main_page .content02 .product_list .product-container ul li.active .more_box #container.sub_page .personal .personal__btn button i, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li.active .more_box button i { margin-left: 20px; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li.active .more_box a i, #container.main_page .content02 .product_list .product-container ul li.active .more_box #container.sub_page .personal .personal__btn button i, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li.active .more_box button i { margin-left: 10px; } } #container.main_page .content02 .product_list .product-container ul li.active .more_box a i img, #container.main_page .content02 .product_list .product-container ul li.active .more_box #container.sub_page .personal .personal__btn button i img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li.active .more_box button i img { vertical-align: 0; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li.active .more_box a i img, #container.main_page .content02 .product_list .product-container ul li.active .more_box #container.sub_page .personal .personal__btn button i img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li.active .more_box button i img { width: 18px; height: 6px; } } #container.main_page .content02 .product_list .product-container ul li .product, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 { position: relative; margin-bottom: 20px; transition: all 0.5s; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 { margin-bottom: 10px; } } #container.main_page .content02 .product_list .product-container ul li .product.product_on, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .product_on.key_visual.product1, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .product_on.key_visual.product1, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .product_on.key_visual.product2, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .product_on.key_visual.product2 { margin-bottom: 60px; } #container.main_page .content02 .product_list .product-container ul li .product.product_on::after, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .product_on.key_visual.product1::after, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .product_on.key_visual.product1::after, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .product_on.key_visual.product2::after, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .product_on.key_visual.product2::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(31, 31, 31, 0.31); box-shadow: 12.3px 13.2px 29px 0 rgba(0, 0, 0, 0.36); } #container.main_page .content02 .product_list .product-container ul li .product.product_on .info_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .product_on.key_visual.product1 .info_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .product_on.key_visual.product1 .info_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .product_on.key_visual.product2 .info_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .product_on.key_visual.product2 .info_box { display: block; } #container.main_page .content02 .product_list .product-container ul li .product .info_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box { display: none; position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 30px; text-align: center; } #container.main_page .content02 .product_list .product-container ul li .product .info_box .tit, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .tit, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .tit, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .tit, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .tit { font-size: 40px; font-weight: 500; letter-spacing: -0.4px; color: #fff; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .tit, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .tit, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .tit, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .tit, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .tit { font-size: 20px; } } #container.main_page .content02 .product_list .product-container ul li .product .info_box .txt, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .txt, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .txt, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .txt, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .txt { margin-top: 20px; color: #e2e2e2; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .txt, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .txt, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .txt, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .txt, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .txt { margin-top: 10px; font-size: 10px; } } #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box { margin-top: 64px; } @media (max-width: 1240px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; } } @media (max-width: 1240px) and (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box { margin-top: 30px; } } #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button { max-width: 240px; display: inline-block; width: 100%; height: 60px; color: #fff; background-color: inherit; line-height: 60px; text-align: center; cursor: pointer; border: 2px solid #fff; padding: 0 20px; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button { padding: 0 10px; } } #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button i.btn_arrow { margin-left: 40px; } } #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1240px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button { height: 40px; line-height: 40px; padding: 0 10px; } } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button { display: inline-block; width: 100%; height: 30px; font-size: 11px; color: #fff; background-color: inherit; line-height: 30px; text-align: center; cursor: pointer; border: 1px solid #fff; padding: 0 20px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button { padding: 0 10px; } } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button i.btn_arrow img, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button i.btn_arrow img, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box a i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box a i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li .product .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product1 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product1 .info_box .btn_box button i.btn_arrow, #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #container.main_page .content02 .product_list .product-container ul li #sub_key_visual .key_visual.product2 .info_box .btn_box button i.btn_arrow, #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box #container.sub_page .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn #sub_key_visual #container.main_page .content02 .product_list .product-container ul li .key_visual.product2 .info_box .btn_box button i.btn_arrow { margin-left: 10px; } } #container.main_page .content02 .product_list .product-container ul li .name { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 400; text-align: center; } @media (max-width: 1024px) { #container.main_page .content02 .product_list .product-container ul li .name { font-size: 17px; line-height: 1.41; } } #container.main_page .content02 .product_list .product-container ul li .more_box { display: none; } #container.main_page .content03 .tit_box { margin-top: 150px; } @media (max-width: 1024px) { #container.main_page .content03 .tit_box { margin-top: 65px; padding: 0 15px; } } #container.main_page .content03 .tit_box .tit { position: relative; } #container.main_page .content03 .tit_box .tit::after { content: 'Total Solution'; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 120px; font-family: 'Roboto', sans-serif; font-weight: 900; color: #ecebeb; } @media (max-width: 1024px) { #container.main_page .content03 .tit_box .tit::after { font-size: 44px; letter-spacing: normal; font-weight: 600; } } #container.main_page .content03 .tit_box .sub_tit { margin-top: 60px; line-height: 1.78; } @media (max-width: 1024px) { #container.main_page .content03 .tit_box .sub_tit { margin-top: 14px; } } #container.main_page .content03 .item_box { position: relative; height: 600px; background-image: url("../images/main/service02.jpg"); } @media (max-width: 1024px) { #container.main_page .content03 .item_box { height: 448px; background-image: url("../images/main/m_service02.jpg"); } } #container.main_page .content03 .item_box::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background-color: rgba(25, 25, 25, 0.65); } #container.main_page .content03 .item_box ul { position: relative; z-index: 10; width: 100%; height: 100%; } @media (max-width: 1240px) { #container.main_page .content03 .item_box ul { padding: 0; } } #container.main_page .content03 .item_box ul li { float: left; width: 33.3333%; height: 100%; border-top: 0; border-bottom: 0; border-left: 1px; border-right: 1px; border-style: solid; border-color: rgba(255, 255, 255, 0.16); color: #fff; background-color: rgba(0, 0, 0, 0.15); } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li { height: 150px; width: 100%; border-top: 1px; border-bottom: 1px; border-left: 0; border-right: 0; border-style: solid; border-color: rgba(255, 255, 255, 0.16); } } #container.main_page .content03 .item_box ul li ~ li { margin-left: -1px; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li ~ li { margin-left: 0; margin-top: -1px; } } #container.main_page .content03 .item_box ul li.service_on .more { display: none; } #container.main_page .content03 .item_box ul li.service_on .info_box { display: block; } #container.main_page .content03 .item_box ul li .item { display: inline-block; position: relative; width: 100%; height: 100%; } #container.main_page .content03 .item_box ul li .item > .more { position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); width: 100%; padding: 0 40px; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .item > .more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); bottom: auto; padding: 0 15px; } } #container.main_page .content03 .item_box ul li .item > .more::after { content: ''; display: block; width: 100%; height: 1px; margin-top: 26px; background-color: rgba(255, 255, 255, 0.5); } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .item > .more::after { display: none; } } #container.main_page .content03 .item_box ul li .item > .more p { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .item > .more p { font-size: 17px; line-height: 1.41; } } #container.main_page .content03 .item_box ul li .item > .more span { position: absolute; bottom: 31px; right: 40px; font-weight: 500; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .item > .more span { position: absolute; bottom: 4px; right: 15px; } } #container.main_page .content03 .item_box ul li .item > .more span i { margin-left: 10px; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .item > .more span i { margin-left: 4px; } } #container.main_page .content03 .item_box ul li .item > .more span i img { vertical-align: 0; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .item > .more span i img { width: 18px; } } #container.main_page .content03 .item_box ul li .info_box { display: none; position: relative; height: 100%; background-color: rgba(38, 77, 141, 0.9); } #container.main_page .content03 .item_box ul li .info_box .info_in { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; padding: 136px 30px 60px; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .info_box .info_in { height: auto; padding: 0 15px; } } #container.main_page .content03 .item_box ul li .info_box .info_in i.icon_t { margin-bottom: 36px; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .info_box .info_in i.icon_t { display: none; } } #container.main_page .content03 .item_box ul li .info_box .info_in dl dt { display: inline-block; font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .info_box .info_in dl dt { font-size: 17px; line-height: 1.41; } } #container.main_page .content03 .item_box ul li .info_box .info_in dl dt::after { content: ''; display: block; height: 2px; margin: 23px 0 38px; background-color: #fff; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .info_box .info_in dl dt::after { width: 40px; height: 2px; margin: 9px 0 16px; } } #container.main_page .content03 .item_box ul li .info_box .info_in dl dd { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .info_box .info_in dl dd { font-size: 12px; line-height: 1.42; } } #container.main_page .content03 .item_box ul li .info_box .info_in .more_box { position: absolute; bottom: 60px; right: 30px; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .info_box .info_in .more_box { position: absolute; top: 20px; bottom: auto; right: 15px; } } #container.main_page .content03 .item_box ul li .info_box .info_in .more_box > .more { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .info_box .info_in .more_box > .more { font-size: 12px; line-height: 1.42; } } #container.main_page .content03 .item_box ul li .info_box .info_in .more_box > .more i { margin-left: 10px; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .info_box .info_in .more_box > .more i { margin-left: 4px; } } #container.main_page .content03 .item_box ul li .info_box .info_in .more_box > .more i img { vertical-align: 0; } @media (max-width: 1024px) { #container.main_page .content03 .item_box ul li .info_box .info_in .more_box > .more i img { width: 18px; } } @media (max-width: 1024px) { #container.main_page .content04 { padding: 0; } } #container.main_page .content04 .tit_box { margin-top: 100px; } @media (max-width: 1024px) { #container.main_page .content04 .tit_box { margin-top: 60px; } } #container.main_page .content04 .news_list ul { padding-top: 25px; } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul { padding-top: 12px; } } #container.main_page .content04 .news_list ul li { position: relative; padding: 2px; border: 1px solid #e2e2e2; } #container.main_page .content04 .news_list ul li:hover { padding: 0; border: 3px solid #062d44; } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li:hover { padding: 2px; border: 1px solid #777; } } #container.main_page .content04 .news_list ul li:hover::before { top: -26px; } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li:hover::before { top: -12px; } } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li.swiper-slide-active { padding: 0; border: 3px solid #062d44; } #container.main_page .content04 .news_list ul li.swiper-slide-active::before { top: -27px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.main_page .content04 .news_list ul li.swiper-slide-active::before { top: -14px; } } #container.main_page .content04 .news_list ul li::before { content: 'NEWS'; position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; border-radius: 100%; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; font-family: 'Roboto', sans-serif; background-color: #062d44; color: #fff; text-align: center; line-height: 70px; } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li::before { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li::before { top: -12px; width: 36px; height: 36px; font-size: 8px; line-height: 36px; } } #container.main_page .content04 .news_list ul li .txt_box { display: inline-block; width: 100%; padding: 75px 35px 50px; } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li .txt_box { padding: 35px 16px 25px; } } #container.main_page .content04 .news_list ul li .txt_box .tit { font-size: 24px; font-weight: 500; line-height: 1.25; color: #202222; } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li .txt_box .tit { font-size: 13px; line-height: 1.15; word-break: inherit; } } #container.main_page .content04 .news_list ul li .txt_box .txt { margin: 40px 0 50px; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; line-height: 1.4em; color: rgba(102, 102, 102, 0.9); } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li .txt_box .txt { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li .txt_box .txt { margin: 20px 0; word-break: inherit; } } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li .txt_box .date { font-size: 10px; } } #container.main_page .content04 .news_list ul li .txt_box .date i { float: right; } #container.main_page .content04 .news_list ul li .txt_box .date i img { vertical-align: 0; } @media (max-width: 1024px) { #container.main_page .content04 .news_list ul li .txt_box .date i img { width: 18px; } } #container.main_page .content05 { margin-top: 100px; } @media (max-width: 1024px) { #container.main_page .content05 { margin-top: 60px; } } #container.main_page .content05 > ul > li { float: left; position: relative; width: 50%; height: 280px; color: #fff; } @media (max-width: 1024px) { #container.main_page .content05 > ul > li { width: 100%; height: 140px; } } #container.main_page .content05 > ul > li .txt_box .txt_t { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; font-weight: 400; color: rgba(225, 225, 225, 0.8); } @media (max-width: 1024px) { #container.main_page .content05 > ul > li .txt_box .txt_t { font-size: 12px; line-height: 1.42; } } #container.main_page .content05 > ul > li .txt_box .txt_b { margin: 25px 0 30px; font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; } @media (max-width: 1024px) { #container.main_page .content05 > ul > li .txt_box .txt_b { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.main_page .content05 > ul > li .txt_box .txt_b { margin: 10px 0; } } #container.main_page .content05 > ul > li .txt_box a, #container.main_page .content05 > ul > li .txt_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content05 > ul > li .txt_box button { display: inline-block; position: relative; min-width: 174px; height: 44px; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; line-height: 43px; font-weight: 400; text-align: left; border: 1px solid rgba(255, 255, 255, 0.52); border-radius: 100px; background-color: inherit; padding: 0 18px; } @media (max-width: 1024px) { #container.main_page .content05 > ul > li .txt_box a, #container.main_page .content05 > ul > li .txt_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content05 > ul > li .txt_box button { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.main_page .content05 > ul > li .txt_box a, #container.main_page .content05 > ul > li .txt_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content05 > ul > li .txt_box button { min-width: 90px; height: 30px; line-height: 29px; } } #container.main_page .content05 > ul > li .txt_box a::after, #container.main_page .content05 > ul > li .txt_box #container.sub_page .personal .personal__btn button::after, #container.sub_page .personal .personal__btn #container.main_page .content05 > ul > li .txt_box button::after { content: ''; display: inline-block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 8px; height: 13px; background: url("../images/comm/icon_btn_arrow_white.png") center no-repeat; } @media (max-width: 1024px) { #container.main_page .content05 > ul > li .txt_box a::after, #container.main_page .content05 > ul > li .txt_box #container.sub_page .personal .personal__btn button::after, #container.sub_page .personal .personal__btn #container.main_page .content05 > ul > li .txt_box button::after { width: 5px; height: 8px; margin-left: 18px; background-size: 5px; } } #container.main_page .content05 > ul > li .txt_box a span, #container.main_page .content05 > ul > li .txt_box #container.sub_page .personal .personal__btn button span, #container.sub_page .personal .personal__btn #container.main_page .content05 > ul > li .txt_box button span { margin-right: 15px; } #container.main_page .content05 > ul > li.brochure { background-image: url("../images/main/brochure.jpg"); } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.brochure { background-image: url("../images/main/m_brochure.jpg"); } } #container.main_page .content05 > ul > li.brochure .txt_box { position: absolute; right: 80px; top: 50%; transform: translateY(-50%); } @media (max-width: 1240px) { #container.main_page .content05 > ul > li.brochure .txt_box { right: 30px; } } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.brochure .txt_box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 94vw; width: 100%; text-align: left !important; } #container.main_page .content05 > ul > li.brochure .txt_box a, #container.main_page .content05 > ul > li.brochure .txt_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content05 > ul > li.brochure .txt_box button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } #container.main_page .content05 > ul > li.stock { background-image: url("../images/main/stock.jpg"); } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.stock { background-image: url("../images/main/m_stock.jpg"); } } #container.main_page .content05 > ul > li.stock .txt_box { position: absolute; left: 80px; top: 50%; transform: translateY(-50%); } @media (max-width: 1240px) { #container.main_page .content05 > ul > li.stock .txt_box { left: 30px; } } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.stock .txt_box { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); max-width: 94vw; width: 100%; text-align: left; } #container.main_page .content05 > ul > li.stock .txt_box a, #container.main_page .content05 > ul > li.stock .txt_box #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #container.main_page .content05 > ul > li.stock .txt_box button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } #container.main_page .content05 > ul > li.stock .stock_price { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 240px; width: 100%; } @media (max-width: 1600px) { #container.main_page .content05 > ul > li.stock .stock_price { position: absolute; left: auto; right: 15px; top: 50%; transform: translateY(-50%); } } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.stock .stock_price { position: absolute; top: auto; bottom: 20px; right: auto; left: 50%; transform: translateX(-50%); max-width: 94vw; text-align: center; } } #container.main_page .content05 > ul > li.stock .stock_price .money { font-size: 50px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; font-weight: 300; } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.stock .stock_price .money { font-size: 30px; line-height: 1; } } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.stock .stock_price .money { display: inline-block; float: left; } } #container.main_page .content05 > ul > li.stock .stock_price .money::after { content: attr(data-money); font-size: 28px; font-weight: 300; letter-spacing: -0.28px; } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.stock .stock_price .money::after { font-size: 14px; letter-spacing: -0.7px; } } #container.main_page .content05 > ul > li.stock .stock_price > ul { margin-top: 35px; } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.stock .stock_price > ul { display: inline-block; float: right; margin-top: 16px; } } #container.main_page .content05 > ul > li.stock .stock_price > ul > li { float: left; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #cbcbcb; } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.stock .stock_price > ul > li { font-size: 12px; line-height: 1.42; } } #container.main_page .content05 > ul > li.stock .stock_price > ul > li:last-child::after { display: none; } #container.main_page .content05 > ul > li.stock .stock_price > ul > li::after { content: ''; display: inline-block; width: 1px; height: 16px; margin: 0 10px; background-color: rgba(255, 255, 255, 0.5); vertical-align: -3px; } @media (max-width: 1024px) { #container.main_page .content05 > ul > li.stock .stock_price > ul > li::after { height: 9px; margin: 0 4px; vertical-align: -1px; } } #container.main_page .content05 > ul > li.stock .stock_price > ul > li span::after { content: attr(data-flow); color: #e33152; margin-left: 4px; vertical-align: -1px; } #sub_key_visual { margin: 0 70px; } @media (max-width: 1240px) { #sub_key_visual { margin: 0; } } #sub_key_visual .key_visual { position: relative; height: 410px; margin-top: 80px; } @media (max-width: 1024px) { #sub_key_visual .key_visual { height: 225px; margin-top: 0; } } #sub_key_visual .key_visual.service { background-image: url("../images/sub/service_key_visual.jpg"); } #sub_key_visual .key_visual.product, #sub_key_visual .key_visual.product1, #sub_key_visual .key_visual.product2 { background-image: url("../images/sub/product_key_visual.jpg"); } #sub_key_visual .key_visual.investment { background-image: url("../images/sub/investment_key_visual.jpg"); } #sub_key_visual .key_visual.promotion { background-image: url("../images/sub/promotion_key_visual.jpg"); } #sub_key_visual .key_visual.recruitment { background-image: url("../images/sub/recruitment_key_visual.jpg"); } #sub_key_visual .key_visual.unison { background-image: url("../images/sub/unison_key_visual.jpg"); } #sub_key_visual .key_visual.personalInfo { background-image: url("../images/sub/personalInfo_key_visual.jpg"); } #sub_key_visual .key_visual .txt_box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; } @media (max-width: 1024px) { #sub_key_visual .key_visual .txt_box { width: 100%; margin-top: 20px; } } #sub_key_visual .key_visual .txt_box p { font-size: 20px; letter-spacing: 1.5px; font-weight: 500; } @media (max-width: 1024px) { #sub_key_visual .key_visual .txt_box p { font-size: 12px; letter-spacing: 0.94px; } } #sub_key_visual .key_visual .txt_box h2 { margin-top: 30px; font-size: 50px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; font-weight: 500; text-shadow: 0.3px 1px 1px rgba(0, 0, 0, 0.12); } @media (max-width: 1024px) { #sub_key_visual .key_visual .txt_box h2 { font-size: 30px; line-height: 1; } } @media (max-width: 1024px) { #sub_key_visual .key_visual .txt_box h2 { margin-top: 10px; } } #sub_key_visual .navigation { border-top: 0; border-bottom: 1px; border-left: 1px; border-right: 1px; border-style: solid; border-color: #dbdbdb; } #sub_key_visual .navigation > ul { display: flex; } #sub_key_visual .navigation > ul > li { position: relative; height: 70px; border-right: 1px solid #dbdbdb; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li { height: 40px; } } #sub_key_visual .navigation > ul > li::after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } #sub_key_visual .navigation > ul > li.home { width: 70px; text-align: center; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li.home { width: 40px; } } #sub_key_visual .navigation > ul > li.home a, #sub_key_visual .navigation > ul > li.home #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual .navigation > ul > li.home button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li.home a i img, #sub_key_visual .navigation > ul > li.home #container.sub_page .personal .personal__btn button i img, #container.sub_page .personal .personal__btn #sub_key_visual .navigation > ul > li.home button i img { width: 12px; } } #sub_key_visual .navigation > ul > li.depth { width: 280px; padding: 0 30px 0 40px; font-weight: 300; letter-spacing: -0.18px; cursor: pointer; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li.depth { width: 140px; padding: 0 20px; } } @media (max-width: 620px) { #sub_key_visual .navigation > ul > li.depth { width: 50%; } } #sub_key_visual .navigation > ul > li.depth.en { width: 340px; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li.depth.en { padding: 0 10px; } } #sub_key_visual .navigation > ul > li.depth span { vertical-align: middle; } #sub_key_visual .navigation > ul > li.depth i { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); font-size: 1px; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li.depth i { right: 20px; } } #sub_key_visual .navigation > ul > li.depth i img { vertical-align: middle; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li.depth i img { width: 9px; } } #sub_key_visual .navigation > ul > li > .sub_nav { display: none; position: absolute; top: 100%; left: 0; z-index: 100; width: 100%; padding: 0 30px 0 40px; background-color: #264d8d; color: #fff; transition: all 0.7s; text-transform: capitalize; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li > .sub_nav { padding: 0 20px; } } #sub_key_visual .navigation > ul > li > .sub_nav > li { font-weight: 300; } #sub_key_visual .navigation > ul > li > .sub_nav > li a, #sub_key_visual .navigation > ul > li > .sub_nav > li #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual .navigation > ul > li > .sub_nav > li button { display: inline-block; width: 100%; padding: 15px 0; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li > .sub_nav > li a, #sub_key_visual .navigation > ul > li > .sub_nav > li #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual .navigation > ul > li > .sub_nav > li button { padding: 10px 0; } } #sub_key_visual .navigation > ul > li > .sub_nav > li:first-child a, #sub_key_visual .navigation > ul > li > .sub_nav > li:first-child #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual .navigation > ul > li > .sub_nav > li:first-child button { padding-top: 30px; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li > .sub_nav > li:first-child a, #sub_key_visual .navigation > ul > li > .sub_nav > li:first-child #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual .navigation > ul > li > .sub_nav > li:first-child button { padding-top: 20px; } } #sub_key_visual .navigation > ul > li > .sub_nav > li:last-child a, #sub_key_visual .navigation > ul > li > .sub_nav > li:last-child #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual .navigation > ul > li > .sub_nav > li:last-child button { padding-bottom: 30px; } @media (max-width: 1024px) { #sub_key_visual .navigation > ul > li > .sub_nav > li:last-child a, #sub_key_visual .navigation > ul > li > .sub_nav > li:last-child #container.sub_page .personal .personal__btn button, #container.sub_page .personal .personal__btn #sub_key_visual .navigation > ul > li > .sub_nav > li:last-child button { padding-top: 15px; } } #sub_key_visual .navigation > ul > li.on { background-color: #264d8d; color: #fff; } #sub_key_visual .navigation > ul > li.on > .sub_nav { display: block; } #sub_key_visual .navigation > ul > li.depth1 { cursor: auto; } #sub_key_visual .navigation > ul > li.depth1.on { background-color: #fff; color: #333; } .tit_sub_comm { margin-top: 100px; text-align: center; } @media (max-width: 1024px) { .tit_sub_comm { margin-top: 60px; } } .tit_sub_comm .tit { margin-bottom: 17px; font-size: 45px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; color: #000; text-transform: capitalize; } @media (max-width: 1024px) { .tit_sub_comm .tit { font-size: 25px; line-height: 1; } } @media (max-width: 1024px) { .tit_sub_comm .tit { margin-bottom: 10px; } .tit_sub_comm .tit span { display: block; font-size: 13px; letter-spacing: -0.13px; } } .tit_sub_comm .tit_sub { color: #777; font-weight: 300; } #container.sub_page { padding: 80px 0 150px; } @media (max-width: 1240px) { #container.sub_page { padding: 80px 0 150px; } } @media (max-width: 1024px) { #container.sub_page { padding: 40px 0 100px; } } #container.sub_page .product_kind .product_list { position: relative; background-image: url("../images/sub/product_key_bg.jpg"); } #container.sub_page .product_kind .product_list::before, #container.sub_page .product_kind .system .system__sutTit strong.product_list::after, #container.sub_page .system .system__sutTit .product_kind strong.product_list::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.2); } #container.sub_page .product_kind .product_list::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background-color: rgba(0, 0, 0, 0.4); } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list::after { height: 49px; } } #container.sub_page .product_kind .product_list ul { display: flex; align-items: flex-end; justify-content: space-around; height: 500px; } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul { height: 300px; } } @media (max-width: 1024px) { #container.sub_page .product_kind .product_list ul { height: 185px; } } #container.sub_page .product_kind .product_list ul li .product, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 { position: relative; z-index: 10; text-align: center; } #container.sub_page .product_kind .product_list ul li .product .wing, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing { position: relative; margin-left: -2px; transform: rotate(0deg); transition: none; } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul li .product .wing, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing { margin: 0 auto; } } #container.sub_page .product_kind .product_list ul li .product .wing.wing_on, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_on, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_on, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_on, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_on { transform: rotate(3600deg); transition: all 60s; transition-timing-function: ease-out; } #container.sub_page .product_kind .product_list ul li .product .wing.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U88E { width: 145px; top: 80px; } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U88E { width: 78px; top: 43px; } } @media (max-width: 1024px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U88E { width: 39px; top: 22px; } } #container.sub_page .product_kind .product_list ul li .product .wing.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U93 { width: 155px; top: 83px; } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U93 { width: 80px; top: 44px; } } @media (max-width: 1024px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U93 { width: 40px; top: 22px; } } #container.sub_page .product_kind .product_list ul li .product .wing.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U113 { width: 185px; top: 104px; } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U113 { width: 96px; top: 52px; } } @media (max-width: 1024px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U113 { width: 48px; top: 27px; } } #container.sub_page .product_kind .product_list ul li .product .wing.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U120 { width: 197px; top: 109px; } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U120 { width: 106px; top: 58px; } } @media (max-width: 1024px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U120 { width: 53px; top: 30px; } } #container.sub_page .product_kind .product_list ul li .product .wing.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U136 { width: 223px; top: 123px; } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U136 { width: 120px; top: 66px; } } @media (max-width: 1024px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U136 { width: 60px; top: 34px; } } #container.sub_page .product_kind .product_list ul li .product .wing.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U151 { width: 250px; top: 139px; } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U151 { width: 132px; top: 73px; } } @media (max-width: 1024px) { #container.sub_page .product_kind .product_list ul li .product .wing.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .wing.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .wing.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .wing.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .wing.wing_U151 { width: 66px; top: 37px; } } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul li .product .body, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body { margin: 0 auto; } #container.sub_page .product_kind .product_list ul li .product .body img, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body img, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body img, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body img, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body img { max-height: 100%; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U88E { height: 70px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U93 { height: 70px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U113 { height: 72px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U120 { height: 88px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U136 { height: 84px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U151 { height: 102px; } } @media (max-width: 1024px) { #container.sub_page .product_kind .product_list ul li .product .body.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U88E, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U88E, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U88E { height: 35px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U93, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U93, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U93 { height: 35px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U113, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U113, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U113 { height: 36px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U120, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U120, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U120 { height: 44px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U136, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U136, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U136 { height: 42px; } #container.sub_page .product_kind .product_list ul li .product .body.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .body.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .body.wing_U151, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .body.wing_U151, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .body.wing_U151 { height: 51px; } } #container.sub_page .product_kind .product_list ul li .product .tit, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .tit, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .tit, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .tit, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .tit { padding: 31px 0; color: #fff; font-weight: bold; } @media (max-width: 1240px) { #container.sub_page .product_kind .product_list ul li .product .tit, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .tit, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .tit, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .tit, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .tit { padding: 15px 0; font-weight: normal; } } @media (max-width: 1024px) { #container.sub_page .product_kind .product_list ul li .product .tit, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product1 .tit, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product1 .tit, #container.sub_page .product_kind .product_list ul li #sub_key_visual .key_visual.product2 .tit, #sub_key_visual #container.sub_page .product_kind .product_list ul li .key_visual.product2 .tit { padding: 18px 0; } } #container.sub_page .product_kind .towMW_fourMW { display: flex; justify-content: space-between; align-items: center; margin-top: 100px; } @media (max-width: 1024px) { #container.sub_page .product_kind .towMW_fourMW { flex-direction: column; margin-top: 60px; } } #container.sub_page .product_kind .towMW_fourMW li { width: 50%; } @media (max-width: 1024px) { #container.sub_page .product_kind .towMW_fourMW li { width: 100%; } } #container.sub_page .product_kind .towMW_fourMW li ~ li { margin-left: 40px; } @media (max-width: 1024px) { #container.sub_page .product_kind .towMW_fourMW li ~ li { margin-top: 20px; margin-left: 0; } } #container.sub_page .product_kind .towMW_fourMW li a, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button { display: inline-block; position: relative; width: 100%; height: 200px; } @media (max-width: 1024px) { #container.sub_page .product_kind .towMW_fourMW li a, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button { height: 100px; } } #container.sub_page .product_kind .towMW_fourMW li a::before, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button::before, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.4); } #container.sub_page .product_kind .towMW_fourMW li a::after, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button::after, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button::after { content: ''; position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; border: 1px solid rgba(255, 255, 255, 0.5); } #container.sub_page .product_kind .towMW_fourMW li a.towMW, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button.towMW, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button.towMW { background-image: url("../images/sub/product_key_2MWl.jpg"); } #container.sub_page .product_kind .towMW_fourMW li a.fourMW, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button.fourMW, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button.fourMW { background-image: url("../images/sub/product_key_4MWl.jpg"); } #container.sub_page .product_kind .towMW_fourMW li a .txt, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button .txt, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button .txt { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; color: #fff; } @media (max-width: 1024px) { #container.sub_page .product_kind .towMW_fourMW li a .txt, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button .txt, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button .txt { font-size: 20px; line-height: 1; } } #container.sub_page .product_kind .towMW_fourMW li a .txt i, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button .txt i, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button .txt i { display: block; margin-top: 20px; text-align: center; font-size: 0; } @media (max-width: 1024px) { #container.sub_page .product_kind .towMW_fourMW li a .txt i, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button .txt i, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button .txt i { margin-top: 10px; } #container.sub_page .product_kind .towMW_fourMW li a .txt i img, #container.sub_page .product_kind .towMW_fourMW li .personal .personal__btn button .txt i img, #container.sub_page .personal .personal__btn .product_kind .towMW_fourMW li button .txt i img { width: 19px; } } #container.sub_page .platform { display: flex; justify-content: center; } @media (max-width: 1024px) { #container.sub_page .platform { flex-direction: column; } } #container.sub_page .platform > li { max-width: 290px; width: 33.333333%; border: 1px solid #e2e2e2; } @media (max-width: 1024px) { #container.sub_page .platform > li { max-width: 100%; width: 100%; } } #container.sub_page .platform > li ~ li { margin-left: 28px; } @media (max-width: 1024px) { #container.sub_page .platform > li ~ li { margin-top: 40px; margin-left: 0; } } #container.sub_page .platform > li .img_box { position: relative; height: 350px; } @media (max-width: 1024px) { #container.sub_page .platform > li .img_box { height: 150px; } } #container.sub_page .platform > li .img_box.img_U88E { background-image: url("../images/sub/product_2MW_01.jpg"); } #container.sub_page .platform > li .img_box.img_U93 { background-image: url("../images/sub/product_2MW_02.jpg"); } #container.sub_page .platform > li .img_box.img_U113 { background-image: url("../images/sub/product_2MW_03.jpg"); } #container.sub_page .platform > li .img_box.img_U120 { background-image: url("../images/sub/product_2MW_04.jpg"); } #container.sub_page .platform > li .img_box.img_U136 { background-image: url("../images/sub/product_4MW_01.jpg"); } #container.sub_page .platform > li .img_box.img_U151 { background-image: url("../images/sub/product_4MW_02.jpg"); } #container.sub_page .platform > li .img_box .kind { position: absolute; bottom: 30px; left: 30px; font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; color: #fff; } @media (max-width: 1024px) { #container.sub_page .platform > li .img_box .kind { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .platform > li .img_box .kind { bottom: 15px; left: 15px; } } #container.sub_page .platform > li .txt_box { max-height: 230px; padding: 40px 30px; } @media (max-width: 1024px) { #container.sub_page .platform > li .txt_box { display: flex; flex-wrap: wrap; align-items: center; padding: 20px 15px; } } #container.sub_page .platform > li .txt_box.en { max-height: none; } #container.sub_page .platform > li .txt_box.en p { display: flex; flex-direction: column; } #container.sub_page .platform > li .txt_box.en p span:last-child { margin-top: 7px; margin-left: 0; text-align: right; } @media (max-width: 1024px) { #container.sub_page .platform > li .txt_box.en p span:last-child { text-align: left; } } @media (max-width: 1024px) { #container.sub_page .platform > li .txt_box p:nth-child(odd) { width: 50%; } #container.sub_page .platform > li .txt_box p:nth-child(even) { width: 50%; } } #container.sub_page .platform > li .txt_box p ~ p { margin-top: 5px; } @media (max-width: 1024px) { #container.sub_page .platform > li .txt_box p ~ p { margin-top: 3px; } } #container.sub_page .platform > li .txt_box p span:first-child { font-weight: 300; } #container.sub_page .platform > li .txt_box p span:last-child { margin-left: 15px; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #777; } @media (max-width: 1024px) { #container.sub_page .platform > li .txt_box p span:last-child { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.sub_page .platform > li .txt_box p span:last-child { margin-left: 5px; } } #container.sub_page .platform > li .more_box { display: inline-block; width: 100%; height: 60px; line-height: 60px; padding: 0 40px; background-color: #000; color: #fff; } @media (max-width: 1024px) { #container.sub_page .platform > li .more_box { height: 40px; line-height: 40px; padding: 0 20px; } } #container.sub_page .platform > li .more_box i { float: right; } #container.sub_page .platform > li .more_box i img { vertical-align: middle; } @media (max-width: 1024px) { #container.sub_page .platform > li .more_box i img { width: 14px; } } #container.sub_page .platform2 { display: flex; justify-content: space-between; } @media (max-width: 1024px) { #container.sub_page .platform2 { flex-direction: column; } } #container.sub_page .platform2.investmentPlatform li { max-width: 290px; width: 25%; } @media (max-width: 1024px) { #container.sub_page .platform2.investmentPlatform li { max-width: 100%; width: 100%; } } #container.sub_page .platform2 li { position: relative; max-width: 350px; width: 33.333333%; height: 500px; color: #fff; } #container.sub_page .platform2 li + li { margin-left: 10px; } @media (max-width: 1024px) { #container.sub_page .platform2 li { max-width: 100%; width: 100%; height: 150px; } #container.sub_page .platform2 li + li { margin-left: 0; margin-top: 40px; } } #container.sub_page .platform2 li::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(31, 31, 31, 0.3); } #container.sub_page .platform2 li.servicePlatform__item01 { background-image: url("../images/sub/service_01.jpg"); } #container.sub_page .platform2 li.servicePlatform__item02 { background-image: url("../images/sub/service_02.jpg"); } #container.sub_page .platform2 li.servicePlatform__item03 { background-image: url("../images/sub/service_03.jpg"); } #container.sub_page .platform2 li.investmentPlatform__item01 { background-image: url("../images/sub/investment_01.jpg"); } #container.sub_page .platform2 li.investmentPlatform__item02 { background-image: url("../images/sub/investment_02.jpg"); } #container.sub_page .platform2 li.investmentPlatform__item03 { background-image: url("../images/sub/investment_03.jpg"); } #container.sub_page .platform2 li.investmentPlatform__item04 { background-image: url("../images/sub/investment_04.jpg"); } #container.sub_page .platform2 li.promotionPlatform__item01 { background-image: url("../images/sub/promotion_01.jpg"); } #container.sub_page .platform2 li.promotionPlatform__item02 { background-image: url("../images/sub/promotion_02.jpg"); } #container.sub_page .platform2 li.promotionPlatform__item03 { background-image: url("../images/sub/promotion_03.jpg"); } #container.sub_page .platform2 li.promotionPlatform__item04 { background-image: url("../images/sub/promotion_04.jpg"); } #container.sub_page .platform2 li.recruitmentPlatform__item01 { background-image: url("../images/sub/recruitment_00.jpg"); } #container.sub_page .platform2 li.recruitmentPlatform__item02 { background-image: url("../images/sub/recruitment_01.jpg"); } #container.sub_page .platform2 li.recruitmentPlatform__item03 { background-image: url("../images/sub/recruitment_02.jpg"); } #container.sub_page .platform2 li.recruitmentPlatform__item04 { background-image: url("../images/sub/recruitment_03.jpg"); } #container.sub_page .platform2 li p { position: relative; z-index: 10; padding: 40px 30px 0; font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; } @media (max-width: 1024px) { #container.sub_page .platform2 li p { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .platform2 li p { padding: 20px 15px 0; } } #container.sub_page .platform2 li a, #container.sub_page .platform2 li .personal .personal__btn button, #container.sub_page .personal .personal__btn .platform2 li button { display: inline-block; position: absolute; bottom: 0; right: 0; z-index: 10; width: 100%; height: 60px; padding: 0 40px; background-color: rgba(0, 0, 0, 0.8); line-height: 60px; } @media (max-width: 1024px) { #container.sub_page .platform2 li a, #container.sub_page .platform2 li .personal .personal__btn button, #container.sub_page .personal .personal__btn .platform2 li button { width: 150px; height: 40px; padding: 0 20px; line-height: 40px; } } #container.sub_page .platform2 li a.platform2__more--full, #container.sub_page .platform2 li .personal .personal__btn button.platform2__more--full, #container.sub_page .personal .personal__btn .platform2 li button.platform2__more--full { width: 100%; } @media (max-width: 1024px) { #container.sub_page .platform2 li a.platform2__more--full, #container.sub_page .platform2 li .personal .personal__btn button.platform2__more--full, #container.sub_page .personal .personal__btn .platform2 li button.platform2__more--full { width: 150px; height: 40px; padding: 0 20px; line-height: 40px; } } #container.sub_page .platform2 li a i, #container.sub_page .platform2 li .personal .personal__btn button i, #container.sub_page .personal .personal__btn .platform2 li button i { float: right; } #container.sub_page .platform2 li a i img, #container.sub_page .platform2 li .personal .personal__btn button i img, #container.sub_page .personal .personal__btn .platform2 li button i img { vertical-align: middle; } @media (max-width: 1024px) { #container.sub_page .platform2 li a i img, #container.sub_page .platform2 li .personal .personal__btn button i img, #container.sub_page .personal .personal__btn .platform2 li button i img { width: 18px; } } #container.sub_page .platform__item .img_product { height: 340px; } @media (max-width: 1240px) { #container.sub_page .platform__item .img_product { margin: 0 15px; } } @media (max-width: 1024px) { #container.sub_page .platform__item .img_product { height: 170px; } } #container.sub_page .platform__item .img_product.img_U88E { background-image: url("../images/sub/product_u88.jpg"); } #container.sub_page .platform__item .img_product.img_U93 { background-image: url("../images/sub/product_u93.jpg"); } #container.sub_page .platform__item .img_product.img_U113 { background-image: url("../images/sub/product_u113.jpg"); } #container.sub_page .platform__item .img_product.img_U120 { background-image: url("../images/sub/product_u120.jpg"); } #container.sub_page .platform__item .img_product.img_U136 { background-image: url("../images/sub/product_u136.jpg"); } #container.sub_page .platform__item .img_product.img_U151 { background-image: url("../images/sub/product_u151.jpg"); } #container.sub_page .platform__item .introduction { max-width: 1045px; margin: 80px auto; text-align: center; } @media (max-width: 1024px) { #container.sub_page .platform__item .introduction { margin: 40px auto; padding: 0 15px; } } #container.sub_page .platform__item .introduction .tit_t { font-size: 45px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; color: #264d8d; } @media (max-width: 1024px) { #container.sub_page .platform__item .introduction .tit_t { font-size: 25px; line-height: 1; } } #container.sub_page .platform__item .introduction .tit_b { font-weight: 300; color: #777; margin: 15px 0 55px; } @media (max-width: 1024px) { #container.sub_page .platform__item .introduction .tit_b { margin: 10px 0 25px; } } #container.sub_page .platform__item .introduction .tit_sub { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 300; } @media (max-width: 1024px) { #container.sub_page .platform__item .introduction .tit_sub { font-size: 17px; line-height: 1.41; } } #container.sub_page .platform__item .introduction .tit_sub strong { font-weight: 500; color: #000; } #container.sub_page .platform__item .data { background-image: url("../images/sub/product_u88_data_bg.jpg"); } #container.sub_page .platform__item .data .data_in { position: relative; height: 500px; } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in { height: 190px; } } #container.sub_page .platform__item .data .data_in .product, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 { display: flex; justify-content: flex-end; align-items: flex-end; position: absolute; bottom: 0; left: 0; width: 50%; } @media (max-width: 1600px) { #container.sub_page .platform__item .data .data_in .product, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 { left: 40px; justify-content: flex-start; } } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 { left: 55px; } } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .product, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 { width: 100%; left: auto; justify-content: center; } } #container.sub_page .platform__item .data .data_in .product .gub, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub { position: relative; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub { min-width: 120px; } } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .product .gub, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub { min-width: 31vw; } } #container.sub_page .platform__item .data .data_in .product .gub .wing, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing { position: relative; animation-name: wingEvent; animation-duration: 60s; animation-iteration-count: infinite; animation-timing-function: ease-out; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .wing, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing { margin: 0 auto; } } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U88E, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U88E, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U88E, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U88E, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U88E { width: 174px; top: 96px; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U88E, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U88E, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U88E, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U88E, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U88E { top: 39px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U88E.wing_U88E_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U88E.wing_U88E_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U88E.wing_U88E_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U88E.wing_U88E_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U88E.wing_U88E_01 { width: 70px; } } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U93, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U93, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U93, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U93, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U93 { width: 184px; top: 99px; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U93, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U93, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U93, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U93, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U93 { top: 41px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U93.wing_U93_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U93.wing_U93_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U93.wing_U93_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U93.wing_U93_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U93.wing_U93_01 { width: 74px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U93.wing_U93_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U93.wing_U93_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U93.wing_U93_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U93.wing_U93_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U93.wing_U93_02 { width: 74px; } } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U113, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U113, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U113, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U113, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U113 { width: 220px; top: 123px; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U113, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U113, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U113, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U113, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U113 { top: 48px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U113.wing_U113_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U113.wing_U113_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U113.wing_U113_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U113.wing_U113_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U113.wing_U113_01 { width: 88px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U113.wing_U113_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U113.wing_U113_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U113.wing_U113_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U113.wing_U113_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U113.wing_U113_02 { width: 88px; } } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U120, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U120, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U120, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U120, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U120 { width: 236px; top: 131px; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U120, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U120, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U120, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U120, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U120 { top: 53px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U120.wing_U120_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U120.wing_U120_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U120.wing_U120_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U120.wing_U120_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U120.wing_U120_01 { width: 95px; } } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U136, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U136, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U136, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U136, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U136 { width: 310px; top: 148px; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U136, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U136, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U136, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U136, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U136 { top: 60px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U136.wing_U136_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U136.wing_U136_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U136.wing_U136_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U136.wing_U136_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U136.wing_U136_01 { width: 107px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U136.wing_U136_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U136.wing_U136_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U136.wing_U136_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U136.wing_U136_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U136.wing_U136_02 { width: 107px; } } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U151, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U151, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U151, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U151, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U151 { width: 310px; top: 175px; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U151, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U151, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U151, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U151, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U151 { top: 68px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U151.wing_U151_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U151.wing_U151_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U151.wing_U151_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U151.wing_U151_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U151.wing_U151_01 { width: 120px; } #container.sub_page .platform__item .data .data_in .product .gub .wing.wing_U151.wing_U151_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .wing.wing_U151.wing_U151_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .wing.wing_U151.wing_U151_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .wing.wing_U151.wing_U151_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .wing.wing_U151.wing_U151_02 { width: 120px; } } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .body, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body { margin: 0 auto; } #container.sub_page .platform__item .data .data_in .product .gub .body img, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body img, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body img, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body img, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body img { max-height: 100%; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U88E.wing_U88E_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U88E.wing_U88E_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U88E.wing_U88E_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U88E.wing_U88E_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U88E.wing_U88E_01 { height: 73px; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U93.wing_U93_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U93.wing_U93_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U93.wing_U93_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U93.wing_U93_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U93.wing_U93_01 { height: 73px; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U93.wing_U93_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U93.wing_U93_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U93.wing_U93_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U93.wing_U93_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U93.wing_U93_02 { height: 90px; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U113.wing_U113_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U113.wing_U113_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U113.wing_U113_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U113.wing_U113_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U113.wing_U113_01 { height: 76px; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U113.wing_U113_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U113.wing_U113_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U113.wing_U113_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U113.wing_U113_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U113.wing_U113_02 { height: 90px; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U120.wing_U120_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U120.wing_U120_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U120.wing_U120_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U120.wing_U120_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U120.wing_U120_01 { height: 91px; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U136.wing_U136_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U136.wing_U136_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U136.wing_U136_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U136.wing_U136_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U136.wing_U136_01 { height: 86px; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U136.wing_U136_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U136.wing_U136_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U136.wing_U136_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U136.wing_U136_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U136.wing_U136_02 { height: 106px; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U151.wing_U151_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U151.wing_U151_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U151.wing_U151_01, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U151.wing_U151_01, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U151.wing_U151_01 { height: 86px; } #container.sub_page .platform__item .data .data_in .product .gub .body.wing_U151.wing_U151_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .body.wing_U151.wing_U151_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .body.wing_U151.wing_U151_02, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .body.wing_U151.wing_U151_02, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .body.wing_U151.wing_U151_02 { height: 113px; } } #container.sub_page .platform__item .data .data_in .product .gub .txt, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .txt, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .txt, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .txt, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .txt { position: absolute; bottom: 35px; left: -25px; width: 100%; color: #fff; text-align: left; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .txt, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .txt, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .txt, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .txt, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .txt { bottom: 17px; left: -20px; } } #container.sub_page .platform__item .data .data_in .product .gub .txt::before, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .txt::before, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .txt::before, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .txt::before, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .txt::before, #container.sub_page .platform__item .data .data_in .product .gub .system .system__sutTit strong.txt::after, #container.sub_page .system .system__sutTit .platform__item .data .data_in .product .gub strong.txt::after, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .system .system__sutTit strong.txt::after, #container.sub_page .system .system__sutTit .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub strong.txt::after, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .system .system__sutTit strong.txt::after, #sub_key_visual #container.sub_page .system .system__sutTit .platform__item .data .data_in .key_visual.product1 .gub strong.txt::after, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .system .system__sutTit strong.txt::after, #container.sub_page .system .system__sutTit .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub strong.txt::after, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .system .system__sutTit strong.txt::after, #sub_key_visual #container.sub_page .system .system__sutTit .platform__item .data .data_in .key_visual.product2 .gub strong.txt::after { content: ''; display: inline-block; position: absolute; bottom: 0; left: -15px; width: 3px; height: 55px; background-color: #fff; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .txt::before, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .txt::before, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .txt::before, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .txt::before, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .txt::before, #container.sub_page .platform__item .data .data_in .product .gub .system .system__sutTit strong.txt::after, #container.sub_page .system .system__sutTit .platform__item .data .data_in .product .gub strong.txt::after, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .system .system__sutTit strong.txt::after, #container.sub_page .system .system__sutTit .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub strong.txt::after, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .system .system__sutTit strong.txt::after, #sub_key_visual #container.sub_page .system .system__sutTit .platform__item .data .data_in .key_visual.product1 .gub strong.txt::after, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .system .system__sutTit strong.txt::after, #container.sub_page .system .system__sutTit .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub strong.txt::after, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .system .system__sutTit strong.txt::after, #sub_key_visual #container.sub_page .system .system__sutTit .platform__item .data .data_in .key_visual.product2 .gub strong.txt::after { bottom: 2px; left: -7px; width: 2px; height: 28px; } } #container.sub_page .platform__item .data .data_in .product .gub .txt .product_num, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .txt .product_num, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .txt .product_num, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .txt .product_num, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .txt .product_num { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .product .gub .txt .product_num, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .txt .product_num, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .txt .product_num, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .txt .product_num, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .txt .product_num { font-size: 17px; line-height: 1.41; } } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .txt .product_num, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .txt .product_num, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .txt .product_num, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .txt .product_num, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .txt .product_num { font-size: 17px; line-height: 1.2; } } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .product .gub .txt .product_size, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product1 .gub .txt .product_size, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product1 .gub .txt .product_size, #container.sub_page .platform__item .data .data_in #sub_key_visual .key_visual.product2 .gub .txt .product_size, #sub_key_visual #container.sub_page .platform__item .data .data_in .key_visual.product2 .gub .txt .product_size { font-size: 13px; } } #container.sub_page .platform__item .data .data_in .info { position: absolute; top: 95px; right: 0; width: 575px; padding: 50px 40px; background-color: #fff; } @media (max-width: 1240px) { #container.sub_page .platform__item .data .data_in .info { right: 15px; } } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info { top: 100%; transform: none; width: 100%; margin-top: 40px; right: auto; left: 0; padding: 0 15px; } #container.sub_page .platform__item .data .data_in .info::after { content: ''; display: inline-block; width: 100%; height: 1px; margin-top: 65px; padding: 0 15px; background-color: #e2e2e2; } } #container.sub_page .platform__item .data .data_in .info .tit { font-size: 32px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; color: #000; } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .tit { font-size: 20px; line-height: 1; } } #container.sub_page .platform__item .data .data_in .info .tit::after { content: ''; display: block; width: 100%; height: 1px; background-color: #e2e2e2; margin: 30px 0; } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .tit::after { margin: 10px 0; } } #container.sub_page .platform__item .data .data_in .info ul { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; } #container.sub_page .platform__item .data .data_in .info ul.en li { display: flex; flex-direction: column; justify-content: space-between; } #container.sub_page .platform__item .data .data_in .info ul.en li span { display: block; width: 100%; } #container.sub_page .platform__item .data .data_in .info ul.en li span:last-child { margin-top: 7px; margin-left: 0; text-align: right; } #container.sub_page .platform__item .data .data_in .info ul li { max-width: 220px; width: 56%; font-weight: 300; } #container.sub_page .platform__item .data .data_in .info ul li:nth-child(odd) { width: 44%; } #container.sub_page .platform__item .data .data_in .info ul li ~ li { margin-top: 10px; } #container.sub_page .platform__item .data .data_in .info ul li span:last-child { color: #777; margin-left: 20px; } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info ul li span:last-child { margin-left: 10px; } } #container.sub_page .platform__item .data .data_in .info .btn { display: inline-block; width: 240px; height: 60px; color: #fff; background-color: #062d44; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; position: absolute; top: 30px; right: 40px; border: 0; } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn { padding: 0 10px; } } #container.sub_page .platform__item .data .data_in .info .btn i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn i.btn_arrow { margin-left: 40px; } } #container.sub_page .platform__item .data .data_in .info .btn i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn { display: inline-block; width: 140px; height: 40px; color: #fff; background-color: #062d44; line-height: 40px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; top: auto; bottom: 1px; right: 15px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn { padding: 0 10px; } } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .platform__item .data .data_in .info .btn i { margin-left: 10px; } #container.sub_page .platform__item .data .data_in .info .btn i img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .platform__item .data .data_in .info .btn i img { width: 13px; } } #container.sub_page .platform__item .characteristic { padding: 100px 0; } @media (max-width: 1240px) { #container.sub_page .platform__item .characteristic { padding: 100px 15px; } } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic { margin-top: 240px; padding: 60px 15px; } } #container.sub_page .platform__item .characteristic > .tit_comm::after { content: ''; display: block; width: 100%; height: 2px; margin: 30px 0; background-color: #e2e2e2; } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic > .tit_comm::after { height: 1px; margin: 10px 0; } } #container.sub_page .platform__item .characteristic ul { display: flex; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic ul { flex-direction: column; } } #container.sub_page .platform__item .characteristic ul li { width: 50%; font-weight: 300; color: #777; margin-bottom: 10px; word-break: keep-all; } #container.sub_page .platform__item .characteristic ul li:nth-child(even) { left: 15px; } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic ul li { width: 100%; line-height: 1.5; } #container.sub_page .platform__item .characteristic ul li:nth-child(even) { left: 0; } } #container.sub_page .platform__item .characteristic .graph_box { display: flex; margin-top: 50px; } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic .graph_box { margin-top: 30px; flex-direction: column; } } #container.sub_page .platform__item .characteristic .graph_box .comm { width: 50%; border: 1px solid #e2e2e2; } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic .graph_box .comm { width: 100%; } } #container.sub_page .platform__item .characteristic .graph_box .comm ~ .comm { margin-left: 28px; } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic .graph_box .comm ~ .comm { margin-top: 40px; margin-left: 0; } } #container.sub_page .platform__item .characteristic .graph_box .comm .tit { padding: 20px 0; font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 400; color: #fff; background-color: #2783c2; text-align: center; line-height: 1; } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic .graph_box .comm .tit { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic .graph_box .comm .tit { padding: 9px 0; } } #container.sub_page .platform__item .characteristic .graph_box .comm .graph { min-height: 310px; } @media (max-width: 1024px) { #container.sub_page .platform__item .characteristic .graph_box .comm .graph { min-height: 220px; } } #container.sub_page .platform__item .certified { padding: 0 0 100px; } @media (max-width: 1240px) { #container.sub_page .platform__item .certified { padding: 0 15px 100px; } } @media (max-width: 1024px) { #container.sub_page .platform__item .certified { padding: 0 15px 60px; } } #container.sub_page .platform__item .different_product ul { display: flex; justify-content: space-between; flex-direction: row-reverse; } @media (max-width: 1024px) { #container.sub_page .platform__item .different_product ul { flex-wrap: wrap; } } #container.sub_page .platform__item .different_product ul li { overflow: hidden; width: 25%; height: 140px; } @media (max-width: 1024px) { #container.sub_page .platform__item .different_product ul li { width: 48%; height: 85px; margin-bottom: 10px; } } #container.sub_page .platform__item .different_product ul li ~ li { margin-right: 15px; } @media (max-width: 1024px) { #container.sub_page .platform__item .different_product ul li ~ li { margin-right: 0; } } @media (max-width: 1024px) { #container.sub_page .platform__item .different_product ul li:last-child { margin-bottom: 0; } } #container.sub_page .platform__item .different_product ul li a, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button { display: inline-block; position: relative; width: 100%; height: 140px; transition: all 0.5s; } @media (max-width: 1024px) { #container.sub_page .platform__item .different_product ul li a, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button { height: 85px; } } #container.sub_page .platform__item .different_product ul li a::after, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button::after, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); transition: all 0.5s; } #container.sub_page .platform__item .different_product ul li a:hover, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button:hover, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button:hover { transform: scale(1.1); } #container.sub_page .platform__item .different_product ul li a:hover::after, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button:hover::after, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button:hover::after { background-color: rgba(0, 0, 0, 0); } #container.sub_page .platform__item .different_product ul li a:hover span, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button:hover span, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button:hover span { opacity: 0; } #container.sub_page .platform__item .different_product ul li a.img_U88E, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button.img_U88E, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button.img_U88E { background-image: url("../images/sub/product_different_U88E.jpg"); } #container.sub_page .platform__item .different_product ul li a.img_U93, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button.img_U93, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button.img_U93 { background-image: url("../images/sub/product_different_U93.jpg"); } #container.sub_page .platform__item .different_product ul li a.img_U113, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button.img_U113, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button.img_U113 { background-image: url("../images/sub/product_different_U113.jpg"); } #container.sub_page .platform__item .different_product ul li a.img_U120, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button.img_U120, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button.img_U120 { background-image: url("../images/sub/product_different_U120.jpg"); } #container.sub_page .platform__item .different_product ul li a.img_U136, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button.img_U136, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button.img_U136 { background-image: url("../images/sub/product_different_U136.jpg"); } #container.sub_page .platform__item .different_product ul li a.img_U151, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button.img_U151, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button.img_U151 { background-image: url("../images/sub/product_different_U151.jpg"); } #container.sub_page .platform__item .different_product ul li a span, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button span, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button span { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 400; color: #fff; transition: all 0.5s; } @media (max-width: 1024px) { #container.sub_page .platform__item .different_product ul li a span, #container.sub_page .platform__item .different_product ul li .personal .personal__btn button span, #container.sub_page .personal .personal__btn .platform__item .different_product ul li button span { font-size: 17px; line-height: 1.41; } } #container.sub_page .service .explanation { position: relative; z-index: 10; padding: 52px 0; font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 300; background-color: #264d8d; color: #fff; text-align: center; } @media (max-width: 1024px) { #container.sub_page .service .explanation { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .service .explanation { position: absolute; top: 100%; left: 0; width: 100%; padding: 25px 15px; } } #container.sub_page .service .explanation.explanation--different { color: #333; background-color: inherit; } @media (max-width: 1024px) { #container.sub_page .service .explanation.explanation--different { position: relative; top: auto; left: auto; } } #container.sub_page .service .additionalExplanation { font-weight: 300; color: #777; line-height: 1.78; text-align: center; } #container.sub_page .service .service__img { position: relative; min-height: 340px; padding: 55px 140px; } @media (max-width: 1024px) { #container.sub_page .service .service__img { min-height: 170px; padding: 0; } } #container.sub_page .service .service__img::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(1, 5, 25, 0.16); } #container.sub_page .service .service__img.service__img--01 { background-image: url("../images/sub/service_wind_design.jpg"); } #container.sub_page .service .service__img.service__img--02 { background-image: url("../images/sub/service_EPC.jpg"); } #container.sub_page .service .service__img.service__img--03 { background-image: url("../images/sub/service_Q&M.jpg"); } @media (max-width: 1024px) { #container.sub_page .service .service__analysis { margin-top: 160px; } } #container.sub_page .service .service__analysis li { position: relative; min-height: 270px; margin-top: 80px; padding: 0 20px 60px 320px; box-shadow: inset 0px -1px 0 0 #e2e2e2; } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li { margin-top: 0; padding: 60px 0 40px; text-align: center; } } #container.sub_page .service .service__analysis li::before { content: ''; display: inline-block; position: absolute; top: 0; left: 20px; width: 230px; height: 230px; border: 1px solid #e2e2e2; border-radius: 50%; } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li::before { position: relative; top: auto; left: auto; width: 116px; height: 116px; } } #container.sub_page .service .service__analysis li.analysis__imtem01::before { background: url("../images/comm/icon_service01.png") no-repeat center; } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li.analysis__imtem01::before { background-size: 65px; } } #container.sub_page .service .service__analysis li.analysis__imtem02::before { background: url("../images/comm/icon_service02.png") no-repeat center; } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li.analysis__imtem02::before { background-size: 66px; } } #container.sub_page .service .service__analysis li.analysis__imtem03::before { background: url("../images/comm/icon_service03.png") no-repeat center; } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li.analysis__imtem03::before { background-size: 51px; } } #container.sub_page .service .service__analysis li .analysis__t { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; font-weight: 400; color: rgba(51, 51, 51, 0.8); } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li .analysis__t { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li .analysis__t { margin-top: 20px; } } #container.sub_page .service .service__analysis li .analysis__m { font-size: 32px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; font-weight: 500; margin: 5px 0 30px; } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li .analysis__m { font-size: 20px; line-height: 1; } } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li .analysis__m { margin: 10px 0 20px; } } #container.sub_page .service .service__analysis li .analysis__b { color: #777; font-weight: 300; line-height: 1.78; text-align: justify; } @media (max-width: 1024px) { #container.sub_page .service .service__analysis li .analysis__b { text-align: center; } } #container.sub_page .service .service__process { display: flex; justify-content: space-between; max-width: 930px; margin: 105px auto 0; } @media (max-width: 1024px) { #container.sub_page .service .service__process { margin: 60px auto 0; flex-direction: column; } } #container.sub_page .service .service__process li { text-align: center; } #container.sub_page .service .service__process li:last-child .process__item::after { display: none; } @media (max-width: 1024px) { #container.sub_page .service .service__process li + li { margin-top: 30px; } } #container.sub_page .service .service__process li .process__item { position: relative; width: 230px; height: 230px; border: 1px solid #e2e2e2; border-radius: 50%; } @media (max-width: 1024px) { #container.sub_page .service .service__process li .process__item { width: 35vw; height: 35vw; margin: auto; } } #container.sub_page .service .service__process li .process__item::after { content: ''; display: inline-block; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 66px; height: 15px; margin-left: 27px; background: url("../images/comm/icon_service_arrow.png") no-repeat center; } @media (max-width: 1024px) { #container.sub_page .service .service__process li .process__item::after { display: none; } } #container.sub_page .service .service__process li .process__item.item01 { background-color: rgba(43, 76, 96, 0.4); } #container.sub_page .service .service__process li .process__item.item02 { background-color: rgba(43, 76, 96, 0.7); } @media (max-width: 1024px) { #container.sub_page .service .service__process li .process__item.item02 i img { width: 10vw; } } #container.sub_page .service .service__process li .process__item.item03 { background-color: #062d44; } #container.sub_page .service .service__process li .process__item i { position: relative; top: 50%; transform: translateY(-50%); } @media (max-width: 1024px) { #container.sub_page .service .service__process li .process__item i img { width: 13vw; } } #container.sub_page .service .service__process li .process__t { margin-top: 20px; color: #777; } @media (max-width: 1024px) { #container.sub_page .service .service__process li .process__t { margin-top: 10px; } } #container.sub_page .service .service__process li .process__b { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; color: #000; } @media (max-width: 1024px) { #container.sub_page .service .service__process li .process__b { font-size: 17px; line-height: 1.41; } } #container.sub_page .service .service__btn { margin-top: 90px; text-align: center; } @media (max-width: 1024px) { #container.sub_page .service .service__btn { margin-top: 30px; } } #container.sub_page .service .service__btn a, #container.sub_page .service .service__btn .personal .personal__btn button, #container.sub_page .personal .personal__btn .service .service__btn button { display: inline-block; width: 240px; height: 60px; color: #fff; background-color: #062d44; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; border: 0; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a, #container.sub_page .service .service__btn .personal .personal__btn button, #container.sub_page .personal .personal__btn .service .service__btn button { padding: 0 10px; } } #container.sub_page .service .service__btn a i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button i.btn_arrow { margin-left: 40px; } } #container.sub_page .service .service__btn a i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a, #container.sub_page .service .service__btn .personal .personal__btn button, #container.sub_page .personal .personal__btn .service .service__btn button { display: inline-block; width: 140px; height: 40px; color: #fff; background-color: #062d44; line-height: 40px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a, #container.sub_page .service .service__btn .personal .personal__btn button, #container.sub_page .personal .personal__btn .service .service__btn button { padding: 0 10px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .service .service__btn a ~ a, #container.sub_page .service .service__btn .personal .personal__btn button ~ a, #container.sub_page .personal .personal__btn .service .service__btn button ~ a, #container.sub_page .service .service__btn .personal .personal__btn a ~ button, #container.sub_page .personal .personal__btn .service .service__btn a ~ button, #container.sub_page .service .service__btn .personal .personal__btn button ~ button, #container.sub_page .personal .personal__btn .service .service__btn button ~ button { margin-left: 20px; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a ~ a, #container.sub_page .service .service__btn .personal .personal__btn button ~ a, #container.sub_page .personal .personal__btn .service .service__btn button ~ a, #container.sub_page .service .service__btn .personal .personal__btn a ~ button, #container.sub_page .personal .personal__btn .service .service__btn a ~ button, #container.sub_page .service .service__btn .personal .personal__btn button ~ button, #container.sub_page .personal .personal__btn .service .service__btn button ~ button { margin-left: 0; } } #container.sub_page .service .service__btn a.btn_link, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link { display: inline-block; width: 240px; height: 60px; color: #fff; background-color: #000; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link { padding: 0 10px; } } #container.sub_page .service .service__btn a.btn_link i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link i.btn_arrow { margin-left: 40px; } } #container.sub_page .service .service__btn a.btn_link i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link { display: inline-block; width: 100%; height: 40px; color: #fff; background-color: #000; line-height: 40px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link { padding: 0 10px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .service .service__btn a.btn_link.btn_link--on, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on { display: inline-block; width: 240px; height: 60px; color: #333; background-color: #fff; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; color: #fff; background-color: #062d44; text-align: left; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link.btn_link--on, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on { padding: 0 10px; } } #container.sub_page .service .service__btn a.btn_link.btn_link--on i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link.btn_link--on i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on i.btn_arrow { margin-left: 40px; } } #container.sub_page .service .service__btn a.btn_link.btn_link--on i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link.btn_link--on i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .service .service__btn a.btn_link.btn_link--on i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on i.btn_arrow { float: right; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link.btn_link--on, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on { display: inline-block; width: 100%; height: 40px; color: #fff; background-color: #062d44; line-height: 40px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link.btn_link--on, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on { padding: 0 10px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link.btn_link--on i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link.btn_link--on i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link.btn_link--on i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link.btn_link--on i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link.btn_link--on i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link.btn_link--on i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .service .service__btn a.btn_link:hover, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover { display: inline-block; width: 240px; height: 60px; color: #333; background-color: #fff; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; color: #fff; background-color: #062d44; text-align: left; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link:hover, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover { padding: 0 10px; } } #container.sub_page .service .service__btn a.btn_link:hover i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link:hover i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover i.btn_arrow { margin-left: 40px; } } #container.sub_page .service .service__btn a.btn_link:hover i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link:hover i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .service .service__btn a.btn_link:hover i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover i.btn_arrow { float: right; } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link:hover, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover { display: inline-block; width: 100%; height: 40px; color: #fff; background-color: #062d44; line-height: 40px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link:hover, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover { padding: 0 10px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link:hover i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link:hover i.btn_arrow, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover i.btn_arrow, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link:hover i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .service .service__btn a.btn_link:hover i.btn_arrow img, #container.sub_page .service .service__btn .personal .personal__btn button.btn_link:hover i.btn_arrow img, #container.sub_page .personal .personal__btn .service .service__btn button.btn_link:hover i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .backwards { margin: 150px 0 -150px; } @media (max-width: 1024px) { #container.sub_page .backwards { margin: 100px 0 -100px; } } #container.sub_page .backwards.backwards--img01 { background-image: url("../images/sub/service_backwards.jpg"); } #container.sub_page .backwards.backwards--img02 { background-image: url("../images/sub/service_backwards02.jpg"); } #container.sub_page .backwards .backwards__inner { display: flex; justify-content: space-between; align-items: center; height: 380px; } @media (max-width: 1024px) { #container.sub_page .backwards .backwards__inner { flex-direction: column; justify-content: center; height: 250px; } } #container.sub_page .backwards .backwards__inner .backwards__inner__txt, #container.sub_page .backwards .backwards__inner .backwards__inner__dot { max-width: 750px; color: #e2e2e2; font-size: 26px; line-height: 1.5; font-weight: 400; } @media (max-width: 1024px) { #container.sub_page .backwards .backwards__inner .backwards__inner__txt, #container.sub_page .backwards .backwards__inner .backwards__inner__dot { font-size: 15px; text-align: center; } } #container.sub_page .backwards .backwards__inner .backwards__inner__dot li { position: relative; } #container.sub_page .backwards .backwards__inner .backwards__inner__dot li::before { content: ''; display: inline-block; width: 13px; height: 14px; margin-right: 20px; background: url("../images/comm/icon_dot.png"); } #container.sub_page .backwards .backwards__inner a, #container.sub_page .backwards .backwards__inner .personal .personal__btn button, #container.sub_page .personal .personal__btn .backwards .backwards__inner button { display: inline-block; width: 240px; height: 60px; color: #fff; background-color: inherit; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } @media (max-width: 1024px) { #container.sub_page .backwards .backwards__inner a, #container.sub_page .backwards .backwards__inner .personal .personal__btn button, #container.sub_page .personal .personal__btn .backwards .backwards__inner button { padding: 0 10px; } } #container.sub_page .backwards .backwards__inner a i.btn_arrow, #container.sub_page .backwards .backwards__inner .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .backwards .backwards__inner button i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.sub_page .backwards .backwards__inner a i.btn_arrow, #container.sub_page .backwards .backwards__inner .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .backwards .backwards__inner button i.btn_arrow { margin-left: 40px; } } #container.sub_page .backwards .backwards__inner a i.btn_arrow img, #container.sub_page .backwards .backwards__inner .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .backwards .backwards__inner button i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .backwards .backwards__inner a i.btn_arrow img, #container.sub_page .backwards .backwards__inner .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .backwards .backwards__inner button i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1024px) { #container.sub_page .backwards .backwards__inner a, #container.sub_page .backwards .backwards__inner .personal .personal__btn button, #container.sub_page .personal .personal__btn .backwards .backwards__inner button { margin-top: 40px; display: inline-block; width: 150px; height: 40px; color: #fff; background-color: inherit; line-height: 40px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .backwards .backwards__inner a, #container.sub_page .backwards .backwards__inner .personal .personal__btn button, #container.sub_page .personal .personal__btn .backwards .backwards__inner button { padding: 0 10px; } } @media (max-width: 1024px) { #container.sub_page .backwards .backwards__inner a i.btn_arrow, #container.sub_page .backwards .backwards__inner .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .backwards .backwards__inner button i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .backwards .backwards__inner a i.btn_arrow, #container.sub_page .backwards .backwards__inner .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .backwards .backwards__inner button i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.sub_page .backwards .backwards__inner a i.btn_arrow img, #container.sub_page .backwards .backwards__inner .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .backwards .backwards__inner button i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .backwards .backwards__inner a i.btn_arrow img, #container.sub_page .backwards .backwards__inner .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .backwards .backwards__inner button i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .tableInfo { margin: 60px auto 45px; } @media (max-width: 1024px) { #container.sub_page .tableInfo { margin: 30px auto 40px; } } #container.sub_page .tableInfo .tableInfo__txt { display: inline-block; width: 100%; font-size: 16px; color: #2783c2; text-align: right; margin-top: 20px; } @media (max-width: 1024px) { #container.sub_page .tableInfo .tableInfo__txt { margin-top: 12px; font-size: 12px; } } #container.sub_page .stockPrice .stockPrice__menu { display: flex; margin-bottom: 86px; } @media (max-width: 1024px) { #container.sub_page .stockPrice .stockPrice__menu { flex-wrap: wrap; margin-bottom: 40px; } } #container.sub_page .stockPrice .stockPrice__menu li { width: 16.9%; padding: 20px 0; border: 1px solid #e2e2e2; font-weight: 300; color: #777; text-align: center; cursor: pointer; } @media (max-width: 1024px) { #container.sub_page .stockPrice .stockPrice__menu li { width: 33.333333%; margin-top: -1px; padding: 13px 0; } #container.sub_page .stockPrice .stockPrice__menu li:nth-child(3n + 4) { margin-left: 0; } } #container.sub_page .stockPrice .stockPrice__menu li ~ li { margin-left: -1px; } #container.sub_page .stockPrice .stockPrice__menu li.active { color: #fff; background-color: #264d8d; } #container.sub_page .stockPrice .con__item__infos { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos { flex-direction: column-reverse; align-items: normal; } } #container.sub_page .stockPrice .con__item__infos .con__item__info { display: flex; align-items: flex-end; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos .con__item__info { flex-direction: column; align-items: normal; } } #container.sub_page .stockPrice .con__item__infos .con__item__info span[data-up]::before { content: attr(data-up); margin-right: 2px; vertical-align: 0; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; font-weight: 400; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos .con__item__info span[data-up]::before { font-size: 12px; line-height: 1.42; } } #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__num { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; color: #171313; line-height: 1.2; margin-right: 20px; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__num { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__num { font-size: 25px; margin-bottom: 10px; } #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__num[data-up]::before, #container.sub_page .stockPrice .con__item__infos .con__item__info .system .system__sutTit strong.con__item__info__num[data-up]::after, #container.sub_page .system .system__sutTit .stockPrice .con__item__infos .con__item__info strong.con__item__info__num[data-up]::after { font-size: 26px; } } #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__list { display: flex; } #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__list li { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #777; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__list li { font-size: 12px; line-height: 1.42; } } #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__list li::after { content: ''; display: inline-block; width: 1px; height: 13px; margin: 0 10px; background-color: #777; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__list li::after { height: 10px; margin: 0 5px; } } #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__list li:last-child::after { display: none; } #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__list li > span { margin-left: 8px; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos .con__item__info .con__item__info__list li > span { margin-left: 4px; } } #container.sub_page .stockPrice .con__item__infos .con__item__date { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #777; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos .con__item__date { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__infos .con__item__date { text-align: right; padding-bottom: 5px; margin-bottom: 25px; border-bottom: 1px solid #333; } } #container.sub_page .stockPrice .con__item__chart { margin: 100px 0 10px; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #777; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__chart { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__chart { margin: 60px 0 10px; } } #container.sub_page .stockPrice .con__item__chart .chart--twoBox { margin: 0 40px 0 90px; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__chart .chart--twoBox { margin: 0 20px 0 40px; } } #container.sub_page .stockPrice .con__item__graph { height: 365px; margin-bottom: 100px; border: 1px solid #000; text-align: center; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__graph { height: 136px; margin-bottom: 60px; } } #container.sub_page .stockPrice .con__item__price { display: flex; justify-content: space-between; margin: 10px 0 80px; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__price { margin: 10px 0 40px; flex-direction: column; } } #container.sub_page .stockPrice .con__item__price .table50 { width: 50%; } #container.sub_page .stockPrice .con__item__price .table50 + .table50 { margin-left: 30px; } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__price .table50 + .table50 { margin-left: 0; margin-top: 40px; } } @media (max-width: 1024px) { #container.sub_page .stockPrice .con__item__price .table50 { width: 100%; } } #container.sub_page .stockPrice .exponential { display: flex; justify-content: space-between; } @media (max-width: 1024px) { #container.sub_page .stockPrice .exponential { display: block; flex-direction: column; } } #container.sub_page .stockPrice .exponential + .exponential { margin-top: 100px; } @media (max-width: 1024px) { #container.sub_page .stockPrice .exponential + .exponential { margin-top: 60px; } } #container.sub_page .stockPrice .exponential .exponential__table { flex-basis: 65%; } @media (max-width: 1024px) { #container.sub_page .stockPrice .exponential .exponential__table { flex-basis: 100%; } } #container.sub_page .stockPrice .exponential .exponential__table .table2 th { border: 0; } #container.sub_page .stockPrice .exponential .exponential__cart { flex-basis: 28%; height: 350px; border: 1px solid #000; } @media (max-width: 1024px) { #container.sub_page .stockPrice .exponential .exponential__cart { flex-basis: 100%; height: 120px; margin-top: 20px; } } #container.sub_page .system .system__tit { font-size: 32px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; font-weight: 500; color: #000; margin-bottom: 25px; text-align: center; } @media (max-width: 1024px) { #container.sub_page .system .system__tit { font-size: 20px; line-height: 1; } } @media (max-width: 1024px) { #container.sub_page .system .system__tit { margin-bottom: 0; } } #container.sub_page .system .system__sutTit { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 300; text-align: center; } @media (max-width: 1024px) { #container.sub_page .system .system__sutTit { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .system .system__sutTit { margin-top: 25px; padding: 0 15px; } } #container.sub_page .system .system__sutTit strong { position: relative; font-weight: 500; color: #000; } @media (max-width: 1024px) { #container.sub_page .system .system__sutTit strong { display: inline-block; } } #container.sub_page .system .system__sutTit strong::before, #container.sub_page .system .system__sutTit strong::after { content: ''; display: inline-block; position: absolute; top: 5px; right: 100%; margin-right: 20px; width: 17px; height: 13px; font-size: 50px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; background: url("../images/comm/ionc_double_mark_left.png") no-repeat; } @media (max-width: 1024px) { #container.sub_page .system .system__sutTit strong::before, #container.sub_page .system .system__sutTit strong::after { font-size: 30px; line-height: 1; } } @media (max-width: 1024px) { #container.sub_page .system .system__sutTit strong::before, #container.sub_page .system .system__sutTit strong::after { width: 9px; height: 7px; margin-right: 3px; background-size: 9px; } } #container.sub_page .system .system__sutTit strong::after { content: ''; position: absolute; top: 5px; left: 100%; margin-left: 20px; background: url("../images/comm/ionc_double_mark_right.png") no-repeat; } @media (max-width: 1024px) { #container.sub_page .system .system__sutTit strong::after { margin-left: 3px; background-size: 9px; } } #container.sub_page .system .system__recruitment { padding: 100px 0 155px; background-image: url("../images/sub/recruitment_system_bg01.jpg"); } @media (max-width: 1024px) { #container.sub_page .system .system__recruitment { padding: 40px 0 70px; } } #container.sub_page .system .system__recruitment .system__recruitment__items { display: flex; justify-content: space-between; } @media (max-width: 1024px) { #container.sub_page .system .system__recruitment .system__recruitment__items { flex-wrap: wrap; justify-content: center; } } #container.sub_page .system .system__recruitment .system__recruitment__items li { margin-top: 30px; } @media (max-width: 1024px) { #container.sub_page .system .system__recruitment .system__recruitment__items li + li { margin-left: 25px; } } #container.sub_page .system .system__recruitment .system__recruitment__items li:last-child .item::after { display: none; } #container.sub_page .system .system__recruitment .system__recruitment__items li .item { position: relative; width: 150px; height: 150px; padding: 36px 0; border-radius: 50%; text-align: center; } @media (max-width: 1024px) { #container.sub_page .system .system__recruitment .system__recruitment__items li .item { width: 80px; height: 80px; padding: 20px 0 8px; } } #container.sub_page .system .system__recruitment .system__recruitment__items li .item::after { content: ''; display: inline-block; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 12px; height: 22px; margin-left: 53px; background-image: url("../images/comm/icon_recruitment_arrow.png"); } @media (max-width: 1240px) { #container.sub_page .system .system__recruitment .system__recruitment__items li .item::after { margin-left: 3vw; } } @media (max-width: 1024px) { #container.sub_page .system .system__recruitment .system__recruitment__items li .item::after { display: none; } } #container.sub_page .system .system__recruitment .system__recruitment__items li .item.item01 { background-color: #8cc7e5; } #container.sub_page .system .system__recruitment .system__recruitment__items li .item.item02 { background-color: #00b0da; transition-delay: 0.5s; } #container.sub_page .system .system__recruitment .system__recruitment__items li .item.item03 { background-color: #00aed9; transition-delay: 1s; } #container.sub_page .system .system__recruitment .system__recruitment__items li .item.item04 { background-color: #009ad0; transition-delay: 1.5s; } #container.sub_page .system .system__recruitment .system__recruitment__items li .item.item05 { background-color: #0079b7; transition-delay: 2s; } #container.sub_page .system .system__recruitment .system__recruitment__items li .item .step { margin-bottom: 15px; font-size: 14px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; font-weight: 500; color: #fff; } @media (max-width: 1024px) { #container.sub_page .system .system__recruitment .system__recruitment__items li .item .step { font-size: 9px; line-height: 1; } } @media (max-width: 1024px) { #container.sub_page .system .system__recruitment .system__recruitment__items li .item .step { margin-bottom: 7px; } } #container.sub_page .system .system__recruitment .system__recruitment__items li .item i { width: 50px; height: 50px; text-align: center; } @media (max-width: 1024px) { #container.sub_page .system .system__recruitment .system__recruitment__items li .item i { width: 25px; height: 25px; } } #container.sub_page .system .system__recruitment .system__recruitment__items li .item i img { vertical-align: middle; } #container.sub_page .system .system__recruitment .system__recruitment__items li .item .tit { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 20px; } @media (max-width: 1024px) { #container.sub_page .system .system__recruitment .system__recruitment__items li .item .tit { width: 100%; margin-top: 8px; } } #container.sub_page .system .system__talented { margin-top: -40px; } #container.sub_page .system .system__talented .system__talented__item { position: relative; height: 600px; margin: 80px 0; background-image: url("../images/sub/recruitment_system_bg02.jpg"); } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__item { height: 250px; margin: 40px 0; } } #container.sub_page .system .system__talented .system__talented__item .wing { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 441px; height: 435px; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__item .wing { width: 149px; height: 149px; } } #container.sub_page .system .system__talented .system__talented__item .wing.animation--opacity::after { opacity: 1; transition: all 2s; } #container.sub_page .system .system__talented .system__talented__item .wing::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 441px; height: 435px; background-image: url("../images/sub/recruitment_talented_wing.png"); opacity: 0; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__item .wing::after { width: 149px; height: 149px; background-size: 149px; background-repeat: no-repeat; background-position: center; } } #container.sub_page .system .system__talented .system__talented__item .wing p { width: 180px; padding: 15px 0; border: 1px solid #fff; border-radius: 26px; color: #fff; text-align: center; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__item .wing p { width: 65px; padding: 6px 0; } } #container.sub_page .system .system__talented .system__talented__item .wing p.wing__txt01 { position: absolute; top: 30px; left: -130px; transition-delay: 1s; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__item .wing p.wing__txt01 { position: absolute; top: -5px; left: -50px; } } #container.sub_page .system .system__talented .system__talented__item .wing p.wing__txt02 { position: absolute; right: -190px; top: 50%; transform: translateY(-50%); margin-top: 10px; transition-delay: 2s; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__item .wing p.wing__txt02 { position: absolute; right: -70px; top: 50%; transform: translateY(-50%); margin-top: 4px; } } #container.sub_page .system .system__talented .system__talented__item .wing p.wing__txt03 { position: absolute; bottom: 30px; left: -130px; transition-delay: 3s; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__item .wing p.wing__txt03 { position: absolute; bottom: -5px; left: -50px; } } #container.sub_page .system .system__talented .system__talented__orientation { display: flex; justify-content: space-between; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__orientation { flex-direction: column; } } #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item { position: relative; max-width: 350px; border: 1px solid #e2e2e2; } @media (max-width: 1240px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item { margin-left: 10px; } } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item { max-width: 100%; margin-top: 30px; } } #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item:last-child::after { display: none; } #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item::after { content: ''; display: inline-block; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; margin-left: 2vw; background: url("../images/comm/icon_plus.png"); } @media (max-width: 1240px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item::after { display: none; } } #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .tit { padding: 25px 0; font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 400; color: #000; background-color: #e7e9f2; line-height: 1; text-align: center; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .tit { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .tit { padding: 9px 0; } } #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info { padding: 40px 30px; text-align: center; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info { padding: 30px 15px; } } #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info i { width: 80px; height: 80px; text-align: center; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info i { width: 40px; height: 40px; } } #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info i img { vertical-align: middle; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info i img { width: 40px; } } #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info .info__txt .info__txt__t { margin: 30px 0; } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info .info__txt .info__txt__t { margin: 12px 0; } } #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info .info__txt .info__txt__b { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: rgba(119, 119, 119, 0.9); } @media (max-width: 1024px) { #container.sub_page .system .system__talented .system__talented__orientation .system__talented__orientation_item .info .info__txt .info__txt__b { font-size: 12px; line-height: 1.42; } } #container.sub_page .welfare { height: 780px; background-image: url("../images/sub/recruitment_welfare_bg.jpg"); margin-bottom: -150px; } @media (max-width: 1024px) { #container.sub_page .welfare { margin-bottom: -100px; height: 800px; } } #container.sub_page .welfare .welfare__items { display: flex; justify-content: space-between; padding-top: 80px; } @media (max-width: 1024px) { #container.sub_page .welfare .welfare__items { flex-wrap: wrap; padding-top: 50px; } } #container.sub_page .welfare .welfare__items .welfare__item { min-width: 290px; min-height: 550px; padding: 50px; background-color: #fff; text-align: center; } @media (max-width: 1024px) { #container.sub_page .welfare .welfare__items .welfare__item { min-width: 48%; min-height: 310px; width: 48%; margin-bottom: 30px; padding: 20px 15px; } #container.sub_page .welfare .welfare__items .welfare__item + .welfare__item { margin-left: 10px; } #container.sub_page .welfare .welfare__items .welfare__item:nth-child(2n + 3) { margin-left: 0; } } #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_tit { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 400; text-align: center; } @media (max-width: 1024px) { #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_tit { font-size: 17px; line-height: 1.41; } } #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_icon { width: 60px; height: 60px; margin: 30px 0 40px; text-align: center; } @media (max-width: 1024px) { #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_icon { width: 30px; height: 30px; margin: 15px 0 20px; } } #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_icon img { vertical-align: middle; } #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_list { position: relative; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #777; text-align: left; } @media (max-width: 1024px) { #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_list { font-size: 12px; line-height: 1.42; } } #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_list.dot li { padding: 0 10px 0 10px; } @media (max-width: 1024px) { #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_list.dot li { padding: 0 6px 0 6px; } } #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_list.dot li::before { position: absolute; top: 12px; left: 0; } @media (max-width: 1024px) { #container.sub_page .welfare .welfare__items .welfare__item .welfare__item_list.dot li::before { top: 7px; } } #container.sub_page .welfare2 { margin-bottom: -150px; padding: 80px 0 150px; background-color: #f8f8f8; } @media (max-width: 1024px) { #container.sub_page .welfare2 { padding: 50px 0 100px; } } #container.sub_page .welfare2 ul { display: flex; flex-wrap: wrap; } #container.sub_page .welfare2 ul li { max-width: 290px; width: 23%; margin-bottom: 30px; padding: 39px 10px; border: 1px solid #e2e2e2; background-color: #fff; } #container.sub_page .welfare2 ul li + li { margin-left: 2%; } #container.sub_page .welfare2 ul li:nth-child(4n + 5) { margin-left: 0; } @media (max-width: 1024px) { #container.sub_page .welfare2 ul li { max-width: 100%; width: 48%; margin-bottom: 20px; padding: 20px; } #container.sub_page .welfare2 ul li:nth-child(odd) { margin-left: 0; } } #container.sub_page .welfare2 ul li .welfare2__item { text-align: center; } #container.sub_page .welfare2 ul li .welfare2__item i { position: relative; width: 50px; height: 50px; } @media (max-width: 1024px) { #container.sub_page .welfare2 ul li .welfare2__item i { width: 25px; height: 25px; } } #container.sub_page .welfare2 ul li .welfare2__item i img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 1024px) { #container.sub_page .welfare2 ul li .welfare2__item i img { width: 25px; } } #container.sub_page .welfare2 ul li .welfare2__item .txt_t { margin: 25px 0 5px; color: #000; } @media (max-width: 1024px) { #container.sub_page .welfare2 ul li .welfare2__item .txt_t { margin: 10px 0 5px; } } #container.sub_page .welfare2 ul li .welfare2__item .txt_b { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #777; } @media (max-width: 1024px) { #container.sub_page .welfare2 ul li .welfare2__item .txt_b { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.sub_page .outline { margin: 0 -15px 280px; } #container.sub_page .outline.research__outline { margin: 0 -15px 160px; } } #container.sub_page .outline .outline__achievement { display: flex; justify-content: space-between; } #container.sub_page .outline .outline__achievement .outline__achievement__imte { display: flex; align-items: flex-end; } #container.sub_page .outline .outline__achievement .outline__achievement__imte .outline__achievement__imte_icon { width: 80px; height: 80px; } #container.sub_page .outline .outline__achievement .outline__achievement__imte .outline__achievement__imte_icon img { vertical-align: middle; } #container.sub_page .outline .outline__achievement .outline__achievement__imte .outline__achievement__imte_icon_txt { margin-left: 10px; } #container.sub_page .outline .outline__achievement .outline__achievement__imte .outline__achievement__imte_icon_txt .txt__t { margin-bottom: 10px; color: #777; } #container.sub_page .outline .outline__achievement .outline__achievement__imte .outline__achievement__imte_icon_txt .txt__b { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; color: #000; } @media (max-width: 1024px) { #container.sub_page .outline .outline__achievement .outline__achievement__imte .outline__achievement__imte_icon_txt .txt__b { font-size: 17px; line-height: 1.41; } } #container.sub_page .outline .outline__achievement .outline__achievement__imte .outline__achievement__imte_icon_txt .txt__b span { font-size: 18px; font-weight: 400; line-height: 1.78; letter-spacing: -0.01em; } @media (max-width: 1024px) { #container.sub_page .outline .outline__achievement .outline__achievement__imte .outline__achievement__imte_icon_txt .txt__b span { font-size: 13px; line-height: 1.54; } } #container.sub_page .outline .outline__info .outline__info__img { position: relative; width: 800px; height: 450px; background-image: url("../images/sub/recruitment_outline_img01.jpg"); } @media (max-width: 1024px) { #container.sub_page .outline .outline__info .outline__info__img { width: 100%; height: 180px; } } #container.sub_page .outline .outline__info .outline__info__img.research__info__img { background-image: url("../images/sub/unison_research_img01.jpg"); } #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt { position: absolute; left: 70%; top: 50%; transform: translateY(-50%); min-width: 690px; padding: 60px 40px; background-color: #fff; } @media (max-width: 1024px) { #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt { top: 100%; left: 50%; transform: translateX(-50%); min-width: 90%; width: 90%; margin-top: -50px; padding: 20px 15px; } } #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt .tit { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 300; } @media (max-width: 1024px) { #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt .tit { font-size: 17px; line-height: 1.41; } } #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt .tit strong { color: #000; font-weight: 500; } #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt .sub_tit { margin-top: 30px; font-weight: 300; color: #777; line-height: 1.78; } @media (max-width: 1024px) { #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt .sub_tit { margin-top: 15px; } } #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt .list { margin-top: 20px; font-weight: 300; color: #777; line-height: 1.89; } #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt .list.dot li { padding: 0 10px 0 10px; } #container.sub_page .outline .outline__info .outline__info__img .outline__info__img__txt .list.dot li::before { position: absolute; top: 14px; left: 0; } #container.sub_page .CIintroduction .CIintroduction__bg { padding: 77px 0; margin: 23px 0 100px; background-image: url("../images/sub/unison_outline_bg.jpg"); } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__bg { padding: 55px 0; margin: 23px 0 60px; background-image: url("../images/sub/unison_outline_bg_mb.jpg"); } } #container.sub_page .CIintroduction .CIintroduction__bg ul { display: flex; align-items: center; justify-content: space-between; max-width: 940px; margin: auto; padding: 12px; border: 1px dashed #949fb2; border-radius: 140px; background-color: rgba(255, 255, 255, 0.5); } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__bg ul { flex-direction: column; background-color: transparent; border: 0; } } #container.sub_page .CIintroduction .CIintroduction__bg ul li { position: relative; width: 250px; height: 250px; padding: 55px 0; border: 1px dashed #6b82a7; border-radius: 50%; background-color: #fff; text-align: center; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__bg ul li { width: 150px; height: 150px; padding: 35px 0; } #container.sub_page .CIintroduction .CIintroduction__bg ul li + li { margin-top: 20px; } } #container.sub_page .CIintroduction .CIintroduction__bg ul li::after { content: ''; display: inline-block; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 43px; height: 3px; margin-left: 20px; background: url("../images/comm/icon_unison_list.png") center; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__bg ul li::after { display: none; } } #container.sub_page .CIintroduction .CIintroduction__bg ul li:last-child::after { display: none; } #container.sub_page .CIintroduction .CIintroduction__bg ul li .CIintroduction__bg__item .txt_t { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; color: #0089d0; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__bg ul li .CIintroduction__bg__item .txt_t { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__bg ul li .CIintroduction__bg__item .txt_t { font-size: 14px; } } #container.sub_page .CIintroduction .CIintroduction__bg ul li .CIintroduction__bg__item .txt_m { font-weight: bold; color: #000; margin: 20px 0 5px; letter-spacing: 1.8px; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__bg ul li .CIintroduction__bg__item .txt_m { margin: 10px 0 5px; font-size: 9px; letter-spacing: -0.9px; } } #container.sub_page .CIintroduction .CIintroduction__bg ul li .CIintroduction__bg__item .txt_b { font-weight: 300; color: #000; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__bg ul li .CIintroduction__bg__item .txt_b { font-size: 9px; letter-spacing: -0.9px; } } #container.sub_page .CIintroduction .CIintroduction__mark { display: flex; justify-content: space-between; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark { flex-direction: column; justify-content: flex-start; } } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo { max-width: 605px; width: 50%; padding: 80px 0 60px; text-align: center; border: 1px solid #e2e2e2; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo { min-width: 100%; width: 100%; padding: 40px 0 30px; } } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo i { display: block; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo i img { width: 170px; } } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo i + i { margin-top: 40px; } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo p { margin-top: 80px; color: #000; } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo p span { margin-right: 20px; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo p span { margin-right: 10px; } } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo p span::before { content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 20px; vertical-align: -2px; background-color: #0089d0; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo p span::before { width: 13px; height: 13px; margin-right: 9px; } } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__logo p { margin-top: 30px; } } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__explain { width: 50%; margin-left: 50px; padding: 30px 0; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__explain { width: 100%; margin-left: 0; } } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__explain li { line-height: 1.78; color: #777; font-weight: 300; padding: 0 10px 0 20px; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__explain li { padding: 0 10px 0 10px; } } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__explain li + li { margin-top: 40px; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__explain li + li { margin-top: 20px; } } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__explain li::before { top: 12px; width: 8px; height: 8px; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__explain li::before { top: 9px; width: 4px; height: 4px; } } #container.sub_page .CIintroduction .CIintroduction__mark .CIintroduction__mark__explain li strong { font-weight: 400; color: #000; } #container.sub_page .CIintroduction .CIintroduction__btn { margin-top: 80px; text-align: center; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn { margin-top: 20px; } } #container.sub_page .CIintroduction .CIintroduction__btn a, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button { display: inline-block; width: 240px; height: 60px; color: #fff; background-color: #062d44; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; text-align: left; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button { padding: 0 10px; } } #container.sub_page .CIintroduction .CIintroduction__btn a i.btn_arrow, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a i.btn_arrow, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i.btn_arrow { margin-left: 40px; } } #container.sub_page .CIintroduction .CIintroduction__btn a i.btn_arrow img, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a i.btn_arrow img, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button { display: inline-block; width: 150px; height: 40px; color: #fff; background-color: #062d44; line-height: 40px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; text-align: left; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button { padding: 0 10px; } } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a i.btn_arrow, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a i.btn_arrow, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i.btn_arrow, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a i.btn_arrow img, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a i.btn_arrow img, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i.btn_arrow img, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .CIintroduction .CIintroduction__btn a i, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i { float: right; } #container.sub_page .CIintroduction .CIintroduction__btn a i img, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i img, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .CIintroduction .CIintroduction__btn a i img, #container.sub_page .CIintroduction .CIintroduction__btn .personal .personal__btn button i img, #container.sub_page .personal .personal__btn .CIintroduction .CIintroduction__btn button i img { width: 15px; } } #container.sub_page .greeting .greeting__ceo { position: relative; height: 415px; padding: 100px 60px 60px; background-image: url("../images/sub/greeting_ceo_bg.jpg"); } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__ceo { height: 380px; padding: 50px 15px 0; background-image: url("../images/sub/greeting_ceo_bg_mb.jpg"); } } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__ceo .greeting__ceo__speak { text-align: center; } #container.sub_page .greeting .greeting__ceo .greeting__ceo__speak img { width: 116px; } } #container.sub_page .greeting .greeting__ceo .greeting__ceo__speak .greeting__ceo__speak__txt { margin-top: 20px; line-height: 3; font-weight: 300; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__ceo .greeting__ceo__speak .greeting__ceo__speak__txt { line-height: 1.92; } } #container.sub_page .greeting .greeting__ceo .greeting__ceo__speak .greeting__ceo__speak__txt strong { font-size: 45px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; font-weight: 400; color: #264d8d; letter-spacing: -2px; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__ceo .greeting__ceo__speak .greeting__ceo__speak__txt strong { font-size: 25px; line-height: 1; } } #container.sub_page .greeting .greeting__ceo .greeting__ceo__name { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 60px; background-color: rgba(6, 45, 68, 0.9); } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__ceo .greeting__ceo__name { padding: 8px 15px; } } #container.sub_page .greeting .greeting__ceo .greeting__ceo__name .ceo { font-weight: 300; color: #9aacc5; } #container.sub_page .greeting .greeting__ceo .greeting__ceo__name .name { margin-top: 8px; font-size: 24px; letter-spacing: 0.24px; font-weight: 500; color: #fff; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__ceo .greeting__ceo__name .name { font-size: 17px; } } #container.sub_page .greeting .greeting__ceo .greeting__ceo__face { position: absolute; bottom: -60px; right: 180px; z-index: 10; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__ceo .greeting__ceo__face { position: absolute; bottom: -25px; right: 15px; z-index: 10; } #container.sub_page .greeting .greeting__ceo .greeting__ceo__face img { width: 140px; } } #container.sub_page .greeting .greeting__info { display: flex; justify-content: space-between; padding: 100px 60px 40px; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__info { flex-direction: column; padding: 60px 0 20px; } } #container.sub_page .greeting .greeting__info .greeting__info__speak { flex-basis: 50%; color: #777; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__info .greeting__info__speak { flex-basis: 100%; } } #container.sub_page .greeting .greeting__info .greeting__info__speak .txt_t { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 300; letter-spacing: -1.4px; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__info .greeting__info__speak .txt_t { font-size: 17px; line-height: 1.41; } } #container.sub_page .greeting .greeting__info .greeting__info__speak .txt_t strong { color: #264d8d; font-weight: 400; } #container.sub_page .greeting .greeting__info .greeting__info__speak .txt_b { margin-top: 30px; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__info .greeting__info__speak .txt_b { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__info .greeting__info__speak .txt_b { margin-top: 10px; } } #container.sub_page .greeting .greeting__info .greeting__info__list { flex-basis: 50%; margin-left: 40px; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__info .greeting__info__list { flex-basis: 100%; margin-top: 50px; margin-left: 0; } } #container.sub_page .greeting .greeting__info .greeting__info__list li + li { margin-top: 40px; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__info .greeting__info__list li + li { margin-top: 20px; } } #container.sub_page .greeting .greeting__info .greeting__info__list li .txt_b { margin-top: 15px; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #777; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__info .greeting__info__list li .txt_b { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__info .greeting__info__list li .txt_b { margin-top: 7px; } } #container.sub_page .greeting .greeting__thank { padding-top: 60px; font-weight: 300; color: #777; text-align: center; line-height: 1.78; box-shadow: inset 0px 1px 0 0 #ddd; } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__thank { padding-top: 40px; } } #container.sub_page .greeting .greeting__thank strong { font-weight: bold; color: #000; } #container.sub_page .vision .vision__shapes { text-align: center; background: url("../images/sub/unison_vision_shapes_bg.png") no-repeat; background-position: 40% bottom; padding-bottom: 20px; } @media (max-width: 1024px) { #container.sub_page .vision .vision__shapes { background: url("../images/sub/unison_vision_shapes_bg_mb.png") no-repeat; background-size: cover; } } #container.sub_page .vision .vision__shapes .vision__shapes__triangle { position: relative; } #container.sub_page .vision .vision__shapes .vision__shapes__triangle::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 205px solid transparent; border-right: 205px solid transparent; border-bottom: 200px solid #062d44; } @media (max-width: 1024px) { #container.sub_page .vision .vision__shapes .vision__shapes__triangle::after { border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 140px solid #062d44; } } #container.sub_page .vision .vision__shapes .vision__shapes__triangle .vision__shapes_tit { margin-top: 20px; } @media (max-width: 1024px) { #container.sub_page .vision .vision__shapes .vision__shapes__triangle .vision__shapes_tit { margin-top: 10px; } } #container.sub_page .vision .vision__shapes .vision__shapes__trapezoid { position: relative; transition-delay: 0.5s; } #container.sub_page .vision .vision__shapes .vision__shapes__trapezoid::after { content: ''; display: inline-block; width: 720px; height: 0; border-left: 140px solid transparent; border-right: 140px solid transparent; border-bottom: 120px solid #0089d0; } @media (max-width: 1024px) { #container.sub_page .vision .vision__shapes .vision__shapes__trapezoid::after { width: 310px; border-left: 55px solid transparent; border-right: 55px solid transparent; border-bottom: 75px solid #0089d0; } } #container.sub_page .vision .vision__shapes .vision__shapes_tit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #container.sub_page .vision .vision__shapes .vision__shapes_tit .vision__shapes_tit__t { font-size: 32px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; color: #fff; } @media (max-width: 1024px) { #container.sub_page .vision .vision__shapes .vision__shapes_tit .vision__shapes_tit__t { font-size: 20px; line-height: 1; } } #container.sub_page .vision .vision__shapes .vision__shapes_tit .vision__shapes_tit__t.line::before, #container.sub_page .vision .vision__shapes .vision__shapes_tit .system .system__sutTit strong.vision__shapes_tit__t.line::after, #container.sub_page .system .system__sutTit .vision .vision__shapes .vision__shapes_tit strong.vision__shapes_tit__t.line::after { content: ''; display: block; width: 53px; height: 2px; margin: 0 auto 20px; background-color: #0086cc; } @media (max-width: 1024px) { #container.sub_page .vision .vision__shapes .vision__shapes_tit .vision__shapes_tit__t.line::before, #container.sub_page .vision .vision__shapes .vision__shapes_tit .system .system__sutTit strong.vision__shapes_tit__t.line::after, #container.sub_page .system .system__sutTit .vision .vision__shapes .vision__shapes_tit strong.vision__shapes_tit__t.line::after { width: 27px; margin: 0 auto 15px; } } #container.sub_page .vision .vision__shapes .vision__shapes_tit .vision__shapes_tit__b { margin-top: 20px; font-weight: 300; color: rgba(255, 255, 255, 0.6); } @media (max-width: 1024px) { #container.sub_page .vision .vision__shapes .vision__shapes_tit .vision__shapes_tit__b { margin-top: 10px; } } #container.sub_page .vision .vision__info { margin-top: 20px; margin-bottom: -150px; padding-bottom: 150px; background-image: url("../images/sub/unison_vision_bg.jpg"); } @media (max-width: 1024px) { #container.sub_page .vision .vision__info { background-image: url("../images/sub/unison_vision_bg_mb.jpg"); } } #container.sub_page .vision .vision__info .vision__info__items { border-top: 1px solid #ddd; padding: 30px 0; } @media (max-width: 1024px) { #container.sub_page .vision .vision__info .vision__info__items { padding: 20px 15px; } } #container.sub_page .vision .vision__info .vision__info__items:first-child { border: 0; } #container.sub_page .vision .vision__info .vision__info__items:nth-child(even) .vision__info__item li .txt { background-color: #f1f4fa; } #container.sub_page .vision .vision__info .vision__info__items .vision__info__item { max-width: 835px; margin: 0 auto; display: flex; justify-content: space-between; text-align: center; position: relative; } #container.sub_page .vision .vision__info .vision__info__items .vision__info__item.item02 { transition-delay: 0.5s; } #container.sub_page .vision .vision__info .vision__info__items .vision__info__item.item03 { transition-delay: 1s; } #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li { width: 240px; min-height: 140px; } @media (max-width: 1024px) { #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li { width: 32%; height: 110px; } #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li + li { margin-left: 2%; } } #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li .txt { height: 100%; padding: 25px 10px; border: 1px dotted #999; border-radius: 11px; box-shadow: 0px 10px 21px 0 rgba(12, 19, 34, 0.06); } #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li .txt .txt__t { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; font-weight: 400; color: #777; } @media (max-width: 1024px) { #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li .txt .txt__t { font-size: 12px; line-height: 1.42; } } #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li .txt .txt__m { margin: 5px 0 5px; font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; line-height: 1.2; color: #000; } @media (max-width: 1024px) { #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li .txt .txt__m { font-size: 17px; line-height: 1.41; } } #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li .txt .txt__b { font-size: 14px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; font-weight: 300; color: #777; } @media (max-width: 1024px) { #container.sub_page .vision .vision__info .vision__info__items .vision__info__item li .txt .txt__b { font-size: 9px; line-height: 1; } } #container.sub_page .history .history__years { position: relative; } @media (max-width: 1600px) { #container.sub_page .history .history__years { max-width: 1024px; } } @media (max-width: 1240px) { #container.sub_page .history .history__years { max-width: 800px; } } #container.sub_page .history .history__years::after { content: ''; display: inline-block; position: absolute; top: 57px; z-index: -1; left: 50%; transform: translateX(-50%); width: 110%; height: 1px; background-color: #ddd; } @media (max-width: 1024px) { #container.sub_page .history .history__years::after { top: 37px; } } #container.sub_page .history .history__years .history__swiper { min-height: 80px; } #container.sub_page .history .history__years .history__swiper .history__year { align-items: flex-end; } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item { text-align: center; } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .history__year__item__point { top: 0; background-color: #264d8d; padding: 6px 10px; } @media (max-width: 1024px) { #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .history__year__item__point { padding: 3px 5px; } } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .history__year__item__point::before, #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .system .system__sutTit strong.history__year__item__point::after, #container.sub_page .system .system__sutTit .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active strong.history__year__item__point::after { display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid #264d8d; } @media (max-width: 1024px) { #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .history__year__item__point::before, #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .system .system__sutTit strong.history__year__item__point::after, #container.sub_page .system .system__sutTit .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active strong.history__year__item__point::after { border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid #264d8d; } } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .history__year__item__point .num { color: #fff; } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .history__year__item__point .point { margin-top: 15px; border: 1px solid #cbcbcb; border-radius: 50%; background-color: #fff; } @media (max-width: 1024px) { #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .history__year__item__point .point { margin-top: 7px; } } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item.swiper-slide-thumb-active .history__year__item__point .point::after { background-color: #264d8d; } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item .history__year__item__point { display: inline-block; position: relative; top: 8px; padding: 0 10px; background-color: #fff; cursor: pointer; } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item .history__year__item__point::before, #container.sub_page .history .history__years .history__swiper .history__year .history__year__item .system .system__sutTit strong.history__year__item__point::after, #container.sub_page .system .system__sutTit .history .history__years .history__swiper .history__year .history__year__item strong.history__year__item__point::after { content: ''; display: none; } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item .history__year__item__point .num { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; font-family: 'Roboto', sans-serif; font-weight: 500; line-height: 1; color: #777; } @media (max-width: 1024px) { #container.sub_page .history .history__years .history__swiper .history__year .history__year__item .history__year__item__point .num { font-size: 12px; line-height: 1.42; } } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item .history__year__item__point .point { display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; margin-top: 7px; border: 1px solid transparent; border-radius: 50%; background-color: transparent; } @media (max-width: 1024px) { #container.sub_page .history .history__years .history__swiper .history__year .history__year__item .history__year__item__point .point { margin-top: -1px; width: 15px; height: 15px; } } #container.sub_page .history .history__years .history__swiper .history__year .history__year__item .history__year__item__point .point::after { content: ''; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #bbb; border-radius: 50%; } @media (max-width: 1024px) { #container.sub_page .history .history__years .history__swiper .history__year .history__year__item .history__year__item__point .point::after { width: 5px; height: 5px; } } @media (max-width: 1024px) { #container.sub_page .history .history__years .history__btn { display: none; } } #container.sub_page .history .history__years .history__btn .btn { position: absolute; bottom: -6px; z-index: 10; display: inline-block; width: 55px; height: 55px; margin-top: 2px; border: solid 1px rgba(229, 229, 229, 0.95); border-radius: 50%; background: url("../images/comm/icon_btn_arrow.png") no-repeat center; background-color: #fff; cursor: pointer; } #container.sub_page .history .history__years .history__btn .btn:hover { background: url("../images/comm/icon_btn_arrow_white.png") no-repeat center; background-color: #000; } #container.sub_page .history .history__years .history__btn .btn.history__btn--prev { right: 100%; margin-right: 50px; transform: rotate(-180deg); } @media (max-width: 1240px) { #container.sub_page .history .history__years .history__btn .btn.history__btn--prev { margin-right: 25px; } } #container.sub_page .history .history__years .history__btn .btn.history__btn--next { left: 100%; margin-left: 50px; } @media (max-width: 1240px) { #container.sub_page .history .history__years .history__btn .btn.history__btn--next { margin-left: 25px; } } #container.sub_page .history .history__years .history__btn .btn i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0; } #container.sub_page .history .history__slides { position: relative; height: 830px; margin-top: 35px; margin-bottom: -150px; padding: 100px 0; } @media (max-width: 1240px) { #container.sub_page .history .history__slides { padding: 60px 15px 100px; } } @media (max-width: 1024px) { #container.sub_page .history .history__slides { height: 480px; margin-top: 0; margin-bottom: -100px; } } #container.sub_page .history .history__slides::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.65); } #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-active .history__slide__item .history__slide__item__img { top: 0; height: 480px; box-shadow: 12.3px 13.2px 29px 0 rgba(0, 0, 0, 0.36); } @media (max-width: 1240px) { #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-active .history__slide__item .history__slide__item__img { height: 400px; } } @media (max-width: 1024px) { #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-active .history__slide__item .history__slide__item__img { height: 150px; } } #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-active .history__slide__item .history__slide__item__img::before, #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-active .history__slide__item .system .system__sutTit strong.history__slide__item__img::after, #container.sub_page .system .system__sutTit .history .history__slides .history__slide .history__slide__items.swiper-slide-active .history__slide__item strong.history__slide__item__img::after { display: none; } #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-active .history__slide__item .history__slide__item__img::after { display: none; } #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-active .history__slide__item .history__slide__item__txt { display: flex; } @media (max-width: 1600px) { #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-active .history__slide__item .history__slide__item__txt { flex-direction: column; } } #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-prev .history__slide__item .history__slide__item__img::before, #container.sub_page .history .history__slides .history__slide .history__slide__items.swiper-slide-prev .history__slide__item .system .system__sutTit strong.history__slide__item__img::after, #container.sub_page .system .system__sutTit .history .history__slides .history__slide .history__slide__items.swiper-slide-prev .history__slide__item strong.history__slide__item__img::after { left: auto; right: 100px; } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__img { position: relative; top: 80px; height: 400px; } @media (max-width: 1240px) { #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__img { top: 0; } } @media (max-width: 1024px) { #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__img { height: 150px; } } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__img.img01 { background-image: url("../images/sub/unison_history_slide_bg1.jpg"); } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__img.img02 { background-image: url("../images/sub/unison_history_slide_bg2.jpg"); } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__img.img03 { background-image: url("../images/sub/unison_history_slide_bg3.jpg"); } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__img::before, #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .system .system__sutTit strong.history__slide__item__img::after, #container.sub_page .system .system__sutTit .history .history__slides .history__slide .history__slide__items .history__slide__item strong.history__slide__item__img::after { content: attr(data-year); position: absolute; left: 100px; z-index: 10; top: 50%; transform: translateY(-50%); font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 60px; color: #ddd; letter-spacing: -3px; } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__img::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(32, 35, 40, 0.4); } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt { display: none; margin-top: 30px; } @media (max-width: 1240px) { #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt { margin-top: 15px; } } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt p { font-size: 120px; font-weight: bold; color: #0089d0; letter-spacing: -6.03px; } @media (max-width: 1024px) { #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt p { font-size: 60px; letter-spacing: -3px; } } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt ul { margin-left: 60px; } @media (max-width: 1600px) { #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt ul { margin-left: 0; } } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt ul.dot li { padding: 0 10px 0 15px; } @media (max-width: 1024px) { #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt ul.dot li { padding: 0 10px 0 8px; } } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt ul.dot li::before { background-color: #fff; } @media (max-width: 1024px) { #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt ul.dot li::before { top: 6px; width: 2px; height: 2px; } } #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt ul li { margin-top: 15px; font-weight: 300; color: #fff; } @media (max-width: 1024px) { #container.sub_page .history .history__slides .history__slide .history__slide__items .history__slide__item .history__slide__item__txt ul li { margin-top: 10px; line-height: 1.3; } } #container.sub_page .history .history__slides .history__slide__btn .btn { position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: 1px solid #b7b7b7; background-color: transparent; cursor: pointer; } @media (max-width: 1240px) { #container.sub_page .history .history__slides .history__slide__btn .btn { top: 37%; background-color: #b7b7b7; } } @media (max-width: 1024px) { #container.sub_page .history .history__slides .history__slide__btn .btn { top: 29%; width: 40px; height: 40px; } } #container.sub_page .history .history__slides .history__slide__btn .btn.history__slide__btn--prev { left: 22.5vw; } @media (max-width: 1240px) { #container.sub_page .history .history__slides .history__slide__btn .btn.history__slide__btn--prev { left: 0; } } #container.sub_page .history .history__slides .history__slide__btn .btn.history__slide__btn--next { right: 22.5vw; } @media (max-width: 1240px) { #container.sub_page .history .history__slides .history__slide__btn .btn.history__slide__btn--next { right: 0; } } #container.sub_page .history .history__slides .history__slide__btn .btn i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0; } @media (max-width: 1024px) { #container.sub_page .history .history__slides .history__slide__btn .btn i img { width: 8px; } } #container.sub_page .factory .factory__introduction { display: flex; justify-content: center; align-items: center; height: 435px; background-image: url("../images/sub/unison_factory_bg01.jpg"); } @media (max-width: 1024px) { #container.sub_page .factory .factory__introduction { height: 210px; flex-direction: column; padding: 0 15px; } } #container.sub_page .factory .factory__introduction .factory__introduction__txt { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 400; letter-spacing: -1.6px; color: #fff; text-align: center; } @media (max-width: 1024px) { #container.sub_page .factory .factory__introduction .factory__introduction__txt { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .factory .factory__introduction .factory__introduction__txt { font-weight: 300; } } #container.sub_page .factory .factory__introduction .factory__introduction__txt + .factory__introduction__txt { margin-left: 150px; } @media (max-width: 1024px) { #container.sub_page .factory .factory__introduction .factory__introduction__txt + .factory__introduction__txt { margin-left: 0; } } #container.sub_page .factory .factory__introduction .factory__introduction__txt p { margin-bottom: 15px; } @media (max-width: 1024px) { #container.sub_page .factory .factory__introduction .factory__introduction__txt p { display: inline-block; margin-bottom: 0; margin-right: 5px; } } #container.sub_page .factory .factory__introduction .factory__introduction__txt strong { font-size: 70px; font-weight: 500; letter-spacing: -3.5px; } @media (max-width: 1024px) { #container.sub_page .factory .factory__introduction .factory__introduction__txt strong { font-size: 45px; letter-spacing: -2.5px; } } #container.sub_page .factory .factory__introduction .factory__introduction__txt span { font-size: 40px; letter-spacing: -2px; font-weight: 300; } @media (max-width: 1024px) { #container.sub_page .factory .factory__introduction .factory__introduction__txt span { font-size: 17px; letter-spacing: -0.85px; } } #container.sub_page .factory .factory__point { text-align: center; } #container.sub_page .factory .factory__point .factory__point__tit { margin: 100px 0 55px; font-size: 32px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; font-weight: 500; color: #000; } @media (max-width: 1024px) { #container.sub_page .factory .factory__point .factory__point__tit { font-size: 20px; line-height: 1; } } @media (max-width: 1024px) { #container.sub_page .factory .factory__point .factory__point__tit { margin: 60px 0 20px; } } #container.sub_page .factory .factory__point .factory__point__txt { color: #777; font-weight: 300; line-height: 1.75; } #container.sub_page .factory .factory__point .factory__point__list { max-width: 700px; margin: 0 auto; } #container.sub_page .factory .factory__point .factory__point__list.dot li { padding: 0 10px 0 13px; } #container.sub_page .factory .factory__point .factory__point__list.dot li::before { position: absolute; top: 10px; left: 0; } #container.sub_page .factory .factory__point .factory__point__list li { display: inline-block; font-weight: 300; color: #777; } #container.sub_page .factory .factory__point .factory__point__list li + li { margin-top: 15px; } #container.sub_page .factory .factory__gallerys { height: 790px; margin-top: 100px; margin-bottom: -150px; background-image: url("../images/sub/unison_factory_bg02.jpg"); } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys { height: 470px; margin-top: 60px; margin-bottom: -100px; } } #container.sub_page .factory .factory__gallerys .factory__gallery__tit { padding: 80px 0; font-size: 32px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; font-weight: 500; color: #000; text-align: center; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery__tit { font-size: 20px; line-height: 1; } } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery__tit { padding: 40px 0; } } #container.sub_page .factory .factory__gallerys .factory__gallery { display: flex; height: 450px; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery { flex-direction: column; height: auto; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__main { width: 800px; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__main { width: 100%; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__main ul li { width: 800px; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__main ul li { width: 100%; height: 165px; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__main ul li.img01 { background-image: url("../images/sub/unison_factory_gallery1.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__main ul li.img02 { background-image: url("../images/sub/unison_factory_gallery2.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__main ul li.img03 { background-image: url("../images/sub/unison_factory_gallery3.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__main ul li.img04 { background-image: url("../images/sub/unison_factory_gallery4.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__main ul li.img05 { background-image: url("../images/sub/unison_factory_gallery5.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail { margin-left: 60px; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail { width: 100%; margin-left: 0; margin-top: 15px; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li { position: relative; width: 300px; cursor: pointer; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li { width: 33.33333%; height: 45px; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li.swiper-slide-thumb-active { border: 6px solid #0089d0; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li.swiper-slide-thumb-active { border: 3px solid #0089d0; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li.swiper-slide-thumb-active::after { display: none; } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li.img01 { background-image: url("../images/sub/unison_factory_gallery1.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li.img02 { background-image: url("../images/sub/unison_factory_gallery2.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li.img03 { background-image: url("../images/sub/unison_factory_gallery3.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li.img04 { background-image: url("../images/sub/unison_factory_gallery4.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__thumbnail ul li.img05 { background-image: url("../images/sub/unison_factory_gallery5.jpg"); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo { display: flex; flex-direction: column; margin-left: 25px; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo { flex-direction: revert; justify-content: space-between; margin-top: 15px; margin-left: 0; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__num { font-family: 'Roboto', sans-serif; text-align: center; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__num { width: auto; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__num::after { content: ''; display: block; width: 50px; height: 3px; margin: 0 auto; margin-top: 3px; background-color: #000; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__num::after { width: 28px; margin-top: 2px; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__num .swiper-pagination-current { font-size: 26px; font-weight: 500; letter-spacing: -0.26px; color: #000; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__num .swiper-pagination-current { font-size: 16px; letter-spacing: -0.16px; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__num .swiper-pagination-total { font-size: 18px; font-weight: 300; letter-spacing: -0.18px; color: #777; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__num .swiper-pagination-total { font-size: 13px; letter-spacing: -0.18px; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn { margin-top: auto; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn { margin-top: -10px; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn { position: relative; display: block; width: 50px; height: 50px; border: 1px solid #b7b7b7; cursor: pointer; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn { display: inline-block; width: 40px; height: 40px; transform: rotate(-90deg); } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn + .btn { margin-top: 10px; } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn:hover { background-color: #000; } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn:hover i { background: url("../images/comm/icon_btn_next_on.png") no-repeat; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn:hover i { width: 8px; height: 12px; background-size: 8px; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn i { width: 11px; height: 17px; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url("../images/comm/icon_btn_next.png") no-repeat; background-position: center; } @media (max-width: 1024px) { #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn i { width: 8px; height: 12px; background-size: 8px; } } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn.factory__gallery__pageInfo__btn--up i { transform: translate(-50%, -50%) rotate(-90deg); } #container.sub_page .factory .factory__gallerys .factory__gallery .factory__gallery__pageInfo .factory__gallery__pageInfo__btn .btn.factory__gallery__pageInfo__btn--down i { transform: translate(-50%, -50%) rotate(90deg); } #container.sub_page .personal .personal__txt { padding: 30px; height: 340px; overflow-y: auto; border: 1px solid #e2e2e2; } #container.sub_page .personal .personal__txt.personal__information { height: auto; overflow-y: auto; } @media (max-width: 1024px) { #container.sub_page .personal .personal__txt { height: 300px; padding: 15px; } } #container.sub_page .personal .personal__txt pre { font-family: 'Noto Sans KR', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #777; line-height: 1.63; } @media (max-width: 1024px) { #container.sub_page .personal .personal__txt pre { font-size: 12px; line-height: 1.42; } } #container.sub_page .personal .personal__txt pre strong { font-size: 18px; font-weight: 400; line-height: 1.78; letter-spacing: -0.01em; color: #333; } @media (max-width: 1024px) { #container.sub_page .personal .personal__txt pre strong { font-size: 13px; line-height: 1.54; } } #container.sub_page .personal .personal__btn { margin-top: 80px; text-align: center; } @media (max-width: 1024px) { #container.sub_page .personal .personal__btn { margin-top: 40px; } } #container.sub_page .personal .personal__btn a, #container.sub_page .personal .personal__btn button { display: inline-block; width: 240px; height: 60px; color: #fff; background-color: #000; line-height: 60px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } @media (max-width: 1024px) { #container.sub_page .personal .personal__btn a, #container.sub_page .personal .personal__btn button { padding: 0 10px; } } #container.sub_page .personal .personal__btn a i.btn_arrow, #container.sub_page .personal .personal__btn button i.btn_arrow { margin-left: 10px; } @media (max-width: 1024px) { #container.sub_page .personal .personal__btn a i.btn_arrow, #container.sub_page .personal .personal__btn button i.btn_arrow { margin-left: 40px; } } #container.sub_page .personal .personal__btn a i.btn_arrow img, #container.sub_page .personal .personal__btn button i.btn_arrow img { vertical-align: 0; } @media (max-width: 1024px) { #container.sub_page .personal .personal__btn a i.btn_arrow img, #container.sub_page .personal .personal__btn button i.btn_arrow img { width: 6px; height: 9px; } } @media (max-width: 1024px) { #container.sub_page .personal .personal__btn a, #container.sub_page .personal .personal__btn button { display: inline-block; width: 150px; height: 40px; color: #fff; background-color: #000; line-height: 40px; text-align: center; cursor: pointer; border: 1px solid #b7b7b7; padding: 0 20px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .personal .personal__btn a, #container.sub_page .personal .personal__btn button { padding: 0 10px; } } @media (max-width: 1024px) { #container.sub_page .personal .personal__btn a i.btn_arrow, #container.sub_page .personal .personal__btn button i.btn_arrow { margin-left: 10px; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .personal .personal__btn a i.btn_arrow, #container.sub_page .personal .personal__btn button i.btn_arrow { margin-left: 40px; } } @media (max-width: 1024px) { #container.sub_page .personal .personal__btn a i.btn_arrow img, #container.sub_page .personal .personal__btn button i.btn_arrow img { vertical-align: 0; } } @media (max-width: 1024px) and (max-width: 1024px) { #container.sub_page .personal .personal__btn a i.btn_arrow img, #container.sub_page .personal .personal__btn button i.btn_arrow img { width: 6px; height: 9px; } } #container.sub_page .personal .inquiry__tit { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; color: #000; margin-bottom: 20px; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__tit { font-size: 17px; line-height: 1.41; } } #container.sub_page .personal .inquiry__consent { display: flex; justify-content: flex-end; align-items: center; margin-top: 30px; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__consent { margin-top: 20px; } } #container.sub_page .personal .inquiry__consent span { margin-right: 10px; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #777; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__consent span { font-size: 12px; line-height: 1.42; } } #container.sub_page .personal .inquiry__info { margin-top: 85px; border-top: 2px; border-bottom: 2px; border-left: 0; border-right: 0; border-style: solid; border-color: #333; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__info { margin-top: 60px; } } #container.sub_page .personal .inquiry__info ul .inquiry__info__items { display: flex; align-items: center; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__info ul .inquiry__info__items { flex-direction: column; } } #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item { display: flex; align-items: center; width: 50%; height: 80px; padding: 15px 30px 15px 0; border-bottom: 1px solid #e2e2e2; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item { width: 100%; height: 50px; padding: 10px 0; } } #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item.item02 .item__tit { margin-left: auto; } #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item.item__textarea { align-items: flex-start; width: 100%; height: 300px; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item.item__textarea { height: 160px; } } #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item.item__textarea .item__ipu { width: calc(100% - 100px); } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item.item__textarea .item__ipu { width: 100%; } } #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item .item__tit { width: 100px; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item .item__tit { width: 70px; } } #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item .item__ipu { width: 400px; height: 40px; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item .item__ipu { width: 100%; height: 30px; } } #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item.item__mask { width: 100%; } #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item.item__mask .inputFileMask { width: calc(100% - 100px); position: relative; } @media (max-width: 1024px) { #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item.item__mask .inputFileMask { width: 100%; } } #container.sub_page .personal .inquiry__info ul .inquiry__info__items .inquiry__info__item.item__mask .inputFileMask .fileInput { position: absolute; top: 0; left: 0; z-index: 10; } #container.sub_page .research .research__development { height: 735px; margin-top: 50px; background-image: url("../images/sub/unison_research_img02.jpg"); } @media (max-width: 1024px) { #container.sub_page .research .research__development { height: auto; margin-top: 40px; padding-bottom: 50px; } } #container.sub_page .research .research__development .research__development__img { display: flex; align-items: center; justify-content: space-between; padding: 80px 0 60px; } @media (max-width: 1024px) { #container.sub_page .research .research__development .research__development__img { padding: 40px 15px; flex-direction: column; } } #container.sub_page .research .research__development .research__development__img li { position: relative; width: 50%; height: 400px; background-color: #fff; } @media (max-width: 1024px) { #container.sub_page .research .research__development .research__development__img li { width: 100%; height: 200px; } } #container.sub_page .research .research__development .research__development__img li + li { margin-left: 30px; } @media (max-width: 1024px) { #container.sub_page .research .research__development .research__development__img li + li { margin-top: 30px; margin-left: 0; } } #container.sub_page .research .research__development .research__development__img li.item__2MW { background-image: url("../images/sub/unison_research_item01.png"); } #container.sub_page .research .research__development .research__development__img li.item__4MW { background-image: url("../images/sub/unison_research_item02.png"); } #container.sub_page .research .research__development .research__development__img li.item__4MW p { background-color: #2782c0; } #container.sub_page .research .research__development .research__development__img li p { position: absolute; bottom: 0; right: 0; width: 180px; padding: 10px 0; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; color: #fff; background-color: #264d8d; text-align: center; } @media (max-width: 1024px) { #container.sub_page .research .research__development .research__development__img li p { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.sub_page .research .research__development .research__development__img li p { width: 130px; padding: 7px 0; } } #container.sub_page .research .research__development .research__development__txt { font-weight: 300; line-height: 1.78; color: #fff; text-align: center; } #container.sub_page .technology { margin: 80px 0 -150px; padding: 110px 0; background-color: #f5f5f5; } @media (max-width: 1024px) { #container.sub_page .technology { margin: 30px 0 -100px; padding: 50px 0; } } #container.sub_page .technology .technology__in { display: flex; flex-wrap: wrap; } #container.sub_page .technology .technology__in > li { max-width: 350px; min-height: 450px; width: 29.333333%; margin-bottom: 50px; padding: 30px; background-color: #fff; } @media (max-width: 1024px) { #container.sub_page .technology .technology__in > li { max-width: 100%; min-height: 320px; width: 100%; margin-bottom: 30px; padding: 20px; } } #container.sub_page .technology .technology__in > li + li { margin-left: 6%; } @media (max-width: 1024px) { #container.sub_page .technology .technology__in > li + li { margin-left: 0; } } #container.sub_page .technology .technology__in > li:nth-child(3n + 4) { margin-left: 0; } #container.sub_page .technology .technology__in > li .technology__tit { font-size: 26px; font-weight: 300; line-height: 1.23; letter-spacing: -1.3px; text-align: center; } @media (max-width: 1024px) { #container.sub_page .technology .technology__in > li .technology__tit { font-size: 20px; } } #container.sub_page .technology .technology__in > li .technology__img { height: 150px; margin: 40px 0 20px; } @media (max-width: 1024px) { #container.sub_page .technology .technology__in > li .technology__img { height: 120px; margin: 20px 0 10px; } } #container.sub_page .technology .technology__in > li .technology__img.img01 { background-image: url("../images/sub/unison_research_technology01.jpg"); } #container.sub_page .technology .technology__in > li .technology__img.img02 { background-image: url("../images/sub/unison_research_technology02.jpg"); } #container.sub_page .technology .technology__in > li .technology__img.img03 { background-image: url("../images/sub/unison_research_technology03.jpg"); } #container.sub_page .technology .technology__in > li .technology__img.img04 { background-image: url("../images/sub/unison_research_technology04.jpg"); } #container.sub_page .technology .technology__in > li .technology__img.img05 { background-image: url("../images/sub/unison_research_technology05.jpg"); } #container.sub_page .technology .technology__in > li .technology__txt .technology__txt__list { font-weight: 300; color: #777; line-height: 1.78; } #container.sub_page .technology .technology__in > li .technology__txt .technology__txt__list.dot li { padding: 0 10px 0 11px; } #container.sub_page .technology .technology__in > li .technology__txt .technology__txt__list.dot li::before { top: 15px; } #container.sub_page .performance .performance__menu { display: flex; justify-content: center; } @media (max-width: 1024px) { #container.sub_page .performance .performance__menu { padding: 0 15px; } } #container.sub_page .performance .performance__menu .performance__menu__item { max-width: 500px; width: 50%; padding: 19px 0; border: 2px solid #062d44; text-align: center; cursor: pointer; } @media (max-width: 1024px) { #container.sub_page .performance .performance__menu .performance__menu__item { padding: 12px 0; } } #container.sub_page .performance .performance__menu .performance__menu__item.on { color: #fff; background-color: #062d44; } #container.sub_page .performance .performance__menu .performance__menu__item + .performance__menu__item { margin-left: -2px; } #container.sub_page .performance .performance__map { margin: 120px 0 80px; padding: 120px 0; background-color: #f4f4f4; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map { margin: 40px 0 60px; padding: 30px 0 30px; } } #container.sub_page .performance .performance__map .performance__map__in { position: relative; } #container.sub_page .performance .performance__map .performance__map__in .map__txt { position: absolute; left: 0; z-index: 20; top: 50%; transform: translateY(-50%); margin-top: 40px; } @media (max-width: 1240px) { #container.sub_page .performance .performance__map .performance__map__in .map__txt { left: 15px; } } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__txt { position: relative; left: auto; top: auto; transform: none; margin: 0 0 30px; } } #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_t { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; color: #cfcfcf; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_t { font-size: 17px; line-height: 1.41; } } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_t { font-size: 14px; } } #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_m { width: 280px; font-size: 80px; font-weight: bold; letter-spacing: -0.81px; color: #062d44; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_m { width: 135px; padding-top: 3px; font-size: 30px; letter-spacing: -0.3px; } } #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_m::after { content: ''; display: block; height: 5px; margin: 15px 0 20px; background-color: #000; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_m::after { height: 3px; margin: 5px 0 10px; } } #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_b { display: flex; justify-content: space-between; font-size: 45px; font-weight: bold; line-height: 1; letter-spacing: -0.01em; font-weight: 500; color: #0288c7; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_b { font-size: 25px; line-height: 1; } } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_b { font-size: 22px; letter-spacing: -0.2px; justify-content: flex-start; } #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_b li + li { margin-left: 5px; } } #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_b span { font-size: 20px; letter-spacing: -0.2px; color: #000; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__txt .txt_b span { font-size: 10px; letter-spacing: -0.1px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img { position: relative; margin: auto; } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea { max-width: 464px; height: 606px; margin-right: 140px; background-image: url("../images/sub/unison_korea.png"); } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea { width: 232px; height: 306px; margin: auto; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point01 { position: absolute; top: 404px; left: 311px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point01 { position: absolute; top: 202px; left: 156px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point02 { position: absolute; top: 171px; left: 63px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point02 { position: absolute; top: 86px; left: 32px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point03 { position: absolute; top: 574px; left: 94px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point03 { position: absolute; top: 289px; left: 47px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point04 { position: absolute; top: 185px; left: 295px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point04 { position: absolute; top: 93px; left: 148px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point05 { position: absolute; top: 141px; left: 47px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point05 { position: absolute; top: 71px; left: 24px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point06 { position: absolute; top: 91px; left: 223px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point06 { position: absolute; top: 46px; left: 112px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point07 { position: absolute; top: 567px; left: 102px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point07 { position: absolute; top: 284px; left: 51px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point08 { position: absolute; top: 567px; left: 87px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point08 { position: absolute; top: 284px; left: 44px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point09 { position: absolute; top: 496px; left: 71px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point09 { position: absolute; top: 248px; left: 36px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point10 { position: absolute; top: 427px; left: 42px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point10 { position: absolute; top: 214px; left: 21px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point11 { position: absolute; top: 453px; left: 115px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point11 { position: absolute; top: 227px; left: 58px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point12 { position: absolute; top: 418px; left: 241px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point12 { position: absolute; top: 209px; left: 121px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point13 { position: absolute; top: 480px; left: 159px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point13 { position: absolute; top: 240px; left: 80px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point14 { position: absolute; top: 238px; left: 57px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point14 { position: absolute; top: 169px; left: 29px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point15 { position: absolute; top: 146px; left: 316px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point15 { position: absolute; top: 73px; left: 158px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point16 { position: absolute; top: 350px; left: 328px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point16 { position: absolute; top: 175px; left: 164px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point17 { position: absolute; top: 151px; left: 325px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point17 { position: absolute; top: 76px; left: 163px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point18 { position: absolute; top: 174px; left: 291px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point18 { position: absolute; top: 87px; left: 146px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point19 { position: absolute; top: 420px; left: 35px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point19 { position: absolute; top: 210px; left: 18px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point20 { position: absolute; top: 587px; left: 60px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.point20 { position: absolute; top: 294px; left: 30px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas { max-width: 994px; height: 560px; background-image: url("../images/sub/unison_overseas.png"); } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas { max-width: 290px; height: 160px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point01 { position: absolute; top: 280px; left: 250px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point01 { position: absolute; top: 75px; left: 69px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point02 { position: absolute; top: 185px; left: 197px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point02 { position: absolute; top: 46px; left: 54px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point03 { position: absolute; top: 199px; left: 550px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point03 { position: absolute; top: 51px; left: 157px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point04 { position: absolute; top: 184px; left: 563px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point04 { position: absolute; top: 45px; left: 162px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point05 { position: absolute; top: 343px; left: 620px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point05 { position: absolute; top: 93px; left: 177px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point06 { position: absolute; top: 235px; left: 839px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point06 { position: absolute; top: 67px; left: 242px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point07 { position: absolute; top: 357px; left: 233px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point07 { position: absolute; top: 97px; left: 65px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point08 { position: absolute; top: 195px; left: 870px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point08 { position: absolute; top: 48px; left: 250px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point09 { position: absolute; top: 226px; left: 836px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point09 { position: absolute; top: 60px; left: 241px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point.active .map__img__point__info { display: block; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point.active .map__img__point__info { display: none; } } #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point.active .map__img__point__dot { background-color: #0089d0; animation: wave 3s infinite linear; } #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point.active .map__img__point__dot::before, #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point.active .system .system__sutTit strong.map__img__point__dot::after, #container.sub_page .system .system__sutTit .performance .performance__map .performance__map__in .map__img .map__img__point.active strong.map__img__point__dot::after { content: ''; background-color: #0089d0; animation: wave 3s 1s infinite linear; } #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point.active .map__img__point__dot::after { background-color: #fff; } #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point .map__img__point__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; padding: 9px; background-color: transparent; cursor: pointer; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point .map__img__point__dot { width: 5px; height: 5px; padding: 6px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point .map__img__point__dot::before, #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point .system .system__sutTit strong.map__img__point__dot::after, #container.sub_page .system .system__sutTit .performance .performance__map .performance__map__in .map__img .map__img__point strong.map__img__point__dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background-color: transparent; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point .map__img__point__dot::before, #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point .system .system__sutTit strong.map__img__point__dot::after, #container.sub_page .system .system__sutTit .performance .performance__map .performance__map__in .map__img .map__img__point strong.map__img__point__dot::after { width: 5px; height: 5px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point .map__img__point__dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background-color: #0089d0; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img .map__img__point .map__img__point__dot::after { width: 5px; height: 5px; } } #container.sub_page .performance .performance__map .mb__map__txt { margin-top: 30px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .mb__map__txt .map__img__point__info { position: relative; bottom: auto; left: auto; transform: none; width: 100%; padding: 0 15px; } #container.sub_page .performance .performance__map .mb__map__txt .map__img__point__info.active { display: block; } } #container.sub_page .performance .performance__map .map__img__point__info { display: none; position: absolute; bottom: 100%; left: 0; z-index: 10; width: 230px; transform: translate(-30px, -15px); } #container.sub_page .performance .performance__map .map__img__point__info .img { height: 130px; } #container.sub_page .performance .performance__map .map__img__point__info .txt { position: relative; padding: 20px; background-color: #fff; box-shadow: 4.2px 4.3px 9px 0 rgba(0, 0, 0, 0.03); } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .map__img__point__info .txt { padding: 20px 15px; box-shadow: 2.1px 2.2px 5px 0 rgba(0, 0, 0, 0.03); } } #container.sub_page .performance .performance__map .map__img__point__info .txt::after { content: ''; position: absolute; top: 100%; left: 30px; border-width: 9px; border-style: solid; border-color: #fff transparent transparent transparent; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .map__img__point__info .txt::after { display: none; } } #container.sub_page .performance .performance__map .map__img__point__info .txt .txt_t { font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; font-weight: 400; color: #222; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .map__img__point__info .txt .txt_t { font-size: 12px; line-height: 1.42; } } #container.sub_page .performance .performance__map .map__img__point__info .txt .txt_t span { color: #1fafd3; } #container.sub_page .performance .performance__map .map__img__point__info .txt .txt_b { margin-top: 10px; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; font-weight: 400; color: #777; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .map__img__point__info .txt .txt_b { font-size: 12px; line-height: 1.42; } } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img { background-size: cover; background-position: center; background-repeat: no-repeat; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img01 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img02 { background-image: url("../images/sub/unison_korea_map02.jpg"); } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img03 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img04 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img05 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img06 { background-image: url("../images/sub/unison_korea_map06.jpg"); } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img07 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img08 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img09 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img10 { background-image: url("../images/sub/unison_korea_map10.jpg"); } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img11 { background-image: url("../images/sub/unison_korea_map11.jpg"); } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img12 { background-image: url("../images/sub/unison_korea_map12.jpg"); } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img13 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img14 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img15 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img16 { display: none; } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img17 { background-image: url("../images/sub/unison_korea_map17.jpg"); } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img18 { background-image: url("../images/sub/unison_korea_map18.jpg"); } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img19 { background-image: url("../images/sub/unison_korea_map19.jpg"); } #container.sub_page .performance .performance__map .map--korea .map__img__point__info .img.img20 { display: none; } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img { background-size: cover; background-position: center; background-repeat: no-repeat; } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img.img01 { background-image: url("../images/sub/unison_overseas_map01.jpg"); } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img.img02 { display: none; } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img.img03 { display: none; } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img.img04 { background-image: url("../images/sub/unison_overseas_map04.jpg"); } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img.img05 { background-image: url("../images/sub/unison_overseas_map05.jpg"); } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img.img06 { display: none; } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img.img07 { background-image: url("../images/sub/unison_overseas_map07.jpg"); } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img.img08 { display: none; } #container.sub_page .performance .performance__map .map--overseas .map__img__point__info .img.img09 { background-image: url("../images/sub/unison_overseas_map09.jpg"); } #container.sub_page .performance .performance__list .tit { margin-bottom: 15px; font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; color: #000; } @media (max-width: 1024px) { #container.sub_page .performance .performance__list .tit { font-size: 17px; line-height: 1.41; } } #container.sub_page .performance .performance__list ul { display: flex; flex-wrap: wrap; } #container.sub_page .performance .performance__list ul .performance__list__item { width: 16.777777%; margin-bottom: 60px; padding: 25px 10px; box-shadow: inset 0px -1px 0 0 #e2e2e2, inset 0px 2px 0 0 #333; } @media (max-width: 1024px) { #container.sub_page .performance .performance__list ul .performance__list__item { width: 48%; margin-bottom: 30px; padding: 20px 10px; } } #container.sub_page .performance .performance__list ul .performance__list__item + .performance__list__item { margin-left: 4%; } #container.sub_page .performance .performance__list ul .performance__list__item:nth-child(5n + 6) { margin-left: 0; } @media (max-width: 1024px) { #container.sub_page .performance .performance__list ul .performance__list__item:nth-child(5n + 6) { margin-left: 2%; } } @media (max-width: 1024px) { #container.sub_page .performance .performance__list ul .performance__list__item:nth-child(odd) { margin-left: 0; } } #container.sub_page .performance .performance__list ul .performance__list__item .txt_b { margin-top: 15px; font-size: 16px; font-weight: 300; line-height: 1.63; letter-spacing: -0.01em; font-weight: 400; color: #777; } @media (max-width: 1024px) { #container.sub_page .performance .performance__list ul .performance__list__item .txt_b { font-size: 12px; line-height: 1.42; } } @media (max-width: 1024px) { #container.sub_page .performance .performance__list ul .performance__list__item .txt_b { margin-top: 10px; } } #container.sub_page .performance .performance__list ul .performance__list__item .txt_b span + span { margin-left: 30px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__list ul .performance__list__item .txt_b span + span { margin-left: 10px; } } .test_map { position: absolute; top: 643px; left: 0; } @keyframes wingEvent { from { transform: rotate(0deg); } to { transform: rotate(3600deg); } } @keyframes wave { 0% { box-shadow: 0px 0px 0px 0px rgba(0, 137, 208, 0.8); } 100% { box-shadow: 0px 0px 0px 15px rgba(0, 137, 208, 0); } } #wrap { position: relative; overflow: hidden; } /*# sourceMappingURL=map/style.css.map */ /*윤리경영 추가*/ .ethics .ethics__menu {display: flex; justify-content: center;} .ethics .ethics__menu-item {max-width: 500px; width: 50%; padding: 19px 0; border: 2px solid #062d44; text-align: center; cursor: pointer;} .ethics .ethics__menu-item + .ethics__menu-item {margin-left:-2px;} .ethics .ethics__menu-item.on {color: #fff; background-color: #062d44;} .ethics__contents {margin:120px 0 0 0;} .ethics__contents-wrap { display:none;} .ethics__contents-wrap.on {display:block;} #container.sub_page .ethics .ethics__info {border-bottom:1px solid #cecece;} #container.sub_page .ethics .ethics__info .ethics__info__img {position: relative; height: 450px; } #container.sub_page .ethics .ethics__info .ethics__info__img::before {content:''; display:block; width:800px; height:100%; background-image: url(/common/images/sub/ethics_img01.jpg); background-position: 0 50%; background-size: contain; background-repeat: no-repeat;} #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt { position: absolute; right: 0%; top: 50%; transform: translateY(-50%); max-width: 690px; padding: 60px 40px; background-color: #fff; } #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt .tit { font-size: 28px; font-weight: bold; line-height: 1.5; letter-spacing: -0.01em; font-weight: 300; } #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt .sub_tit { margin-top: 30px; font-weight: 300; color: #777; line-height: 1.78;} #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt .tit strong {color: #000; font-weight: 500;} #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt .sub_txt_ceo {position:absolute; bottom:-15%; right:0; font-size:20px; font-weight: 300;} #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt .sub_txt_ceo strong {font-weight: 700;} @media (max-width: 1024px){ .ethics .ethics__menu { margin:0 15px;} .ethics__contents {margin:60px 0 0 0;} #container.sub_page .ethics {margin: 0 -15px;} #container.sub_page .ethics .ethics__info {border:0;} #container.sub_page .ethics .ethics__info .ethics__info__img { width: 100%; height: auto;} #container.sub_page .ethics .ethics__info .ethics__info__img::before {width:100%; height:180px; background-size: cover;} #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt {position: static; transform: translateX(0%); min-width: 90%; width: 90%; padding: 20px 15px; margin:0 auto; transform:translate(0, -50px)} #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt .tit { font-size: 17px; line-height: 1.41;} #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt .sub_tit {margin-top: 15px;} #container.sub_page .ethics .ethics__info .ethics__info__img .ethics__info__img__txt .sub_txt_ceo {position:relative; z-index:10; margin-top:20px; font-size:14px;} } .ethics__list.type1 {background:url(/common/images/sub/ethics_bg01.jpg) 50% 0 no-repeat; background-size:cover; margin:100px 0 0;} .ethics__list.type1 .ethics__list-wrap {padding:60px 0 80px 0;} .ethics__list.type1 .tit h3 {font-size:32px; text-align: center; color:#fff; margin:0 0 40px 0; font-weight: 500;} .ethics__list.type1 .ethics__list-inner {background:#fff; padding: 50px 80px; margin:0 auto; max-width:1080px;} .ethics__list.type1 .item {position:relative; padding:0 0 0 60px; margin:0 0 30px 0; color:#777; line-height:1.6; font-weight: 300;} .ethics__list.type1 .item:last-child {margin-bottom:0;} .ethics__list.type1 .item::before {content:'하나.'; display: block; width:42px; height:46px; background:url('/common/images/sub/ethics_dot01.jpg') 50% 50% no-repeat; position:absolute; left:0; top:0; padding:9px 0 0; text-align: center; color:#fff; font-size:16px; font-weight: 500;} @media (max-width: 1024px){ .ethics__list.type1 { background-size:cover; margin:20px 0 0;} .ethics__list.type1 .ethics__list-wrap {padding:40px 15px 60px 15px;} .ethics__list.type1 .tit h3 {font-size:24px; margin:0 0 30px 0;} .ethics__list.type1 .ethics__list-inner { padding: 40px 20px; margin:0 15px;} .ethics__list.type1 .item {padding:0 0 0 40px; margin:0 0 20px 0; } .ethics__list.type1 .item::before {width:36px; height:36px; padding:7px 0 0; font-size:12px; background-size: contain; } } .ethics__list.type2 {margin:100px 0 0;} .ethics__list.type2 .ethics__list-wrap {padding:20px 0 0 0;} .ethics__list.type2 .tit {position:relative; max-width: 1080px; margin:0 auto; padding:0 0 30px 0; border-bottom:2px solid #e2e2e2;} .ethics__list.type2 .tit h3 {font-size:32px; font-weight: 500;} .ethics__list.type2 .tit .btn {display: inline-block; width: 240px; height: 60px; color: #fff; background-color: #062d44; line-height: 60px; text-align: center; cursor: pointer; padding: 0 20px; text-align: left; position:absolute; bottom:15px; right:0; border:0;} .ethics__list.type2 .tit .btn i {float:right;} .ethics__list.type2 .tit .btn i img {vertical-align: 0;} .ethics__list.type2 .ethics__list-inner { padding: 60px 40px 0; margin:0 auto; max-width:1080px;} .ethics__list.type2 .item {position:relative; padding:0 0 0 120px; margin:0 0 50px 0; color:#777; line-height:1.6; font-weight: 300;} .ethics__list.type2 .item:last-child {margin-bottom:0;} .ethics__list.type2 .item::before {content:''; display: block; width:66px; height:66px; background:url('/common/images/sub/ethics_ico0101.jpg') 50% 50% no-repeat; position:absolute; left:0; top:0; } .ethics__list.type2 .item.nth-1::before {background-image:url('/common/images/sub/ethics_ico0101.jpg');} .ethics__list.type2 .item.nth-2::before {background-image:url('/common/images/sub/ethics_ico0102.jpg');} .ethics__list.type2 .item.nth-3::before {background-image:url('/common/images/sub/ethics_ico0103.jpg');} .ethics__list.type2 .item.nth-4::before {background-image:url('/common/images/sub/ethics_ico0104.jpg');} .ethics__list.type2 .item.nth-5::before {background-image:url('/common/images/sub/ethics_ico0105.jpg');} .ethics__list.type2 .item.nth-6::before {background-image:url('/common/images/sub/ethics_ico0106.jpg');} .ethics__list.type2 .item h4 {color:#333; font-size:20px; margin-bottom:10px;} @media (max-width: 1024px){ .ethics__list.type2 {margin:80px 0 0;} .ethics__list.type2 .ethics__list-wrap {padding:10px 15px 0 15px;} .ethics__list.type2 .tit { margin:0 15px; padding:0 0 20px 0;} .ethics__list.type2 .tit h3 {font-size:24px;} .ethics__list.type2 .tit .btn { width: 150px; height: 40px; line-height: 40px; padding: 0 10px; border:0;} .ethics__list.type2 .tit .btn i img {width:15px;} .ethics__list.type2 .ethics__list-inner { padding: 40px 20px 0;} .ethics__list.type2 .item {padding:0 0 0 60px; margin:0 0 30px 0;} .ethics__list.type2 .item::before {width:48px; height:48px; background-size:contain ;} .ethics__list.type2 .item h4 { font-size:16px; margin-bottom:5px;} } .ethics__list.type3 {background:#f8f8f8; margin: 0 0;} .ethics__list.type3 .ethics__list-wrap {padding:60px 0 80px 0;} .ethics__list.type3 .tit {text-align: center;margin:0 0 60px 0; padding:0 15px;} .ethics__list.type3 .tit h3 {font-size:32px; text-align: center; margin:0 0 20px 0; font-weight: 500;} .ethics__list.type3 .tit p {font-weight:300; line-height: 1.3; padding:0 15px;} .ethics__list.type3 .ethics__list-inner { margin:0 auto; max-width:1270px; padding:0 15px;} .ethics__list.type3 .list {display: flex; flex-wrap: wrap;} .ethics__list.type3 .item {position:relative; padding:130px 30px 40px; margin:0 15px 15px 0; color:#777; line-height:1.6; font-weight: 300; background-color: #fff; border:1px solid #e2e2e2; width:calc(25% - 12px); text-align:center;} .ethics__list.type3 .item:nth-child(4n) {margin-right:0;} .ethics__list.type3 .item::before {content:''; display: block; width:62px; height:62px; position:absolute; left:50%; top:40px; transform:translate(-50%, 0); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain;} .ethics__list.type3 .item.nth-1::before {background-image:url('/common/images/sub/ethics_ico0201.jpg');} .ethics__list.type3 .item.nth-2::before {background-image:url('/common/images/sub/ethics_ico0202.jpg');} .ethics__list.type3 .item.nth-3::before {background-image:url('/common/images/sub/ethics_ico0203.jpg');} .ethics__list.type3 .item.nth-4::before {background-image:url('/common/images/sub/ethics_ico0204.jpg');} .ethics__list.type3 .item.nth-5::before {background-image:url('/common/images/sub/ethics_ico0205.jpg');} .ethics__list.type3 .item.nth-6::before {background-image:url('/common/images/sub/ethics_ico0206.jpg');} .ethics__list.type3 .item.nth-7::before {background-image:url('/common/images/sub/ethics_ico0207.jpg');} .ethics__list.type3 .item.nth-8::before {background-image:url('/common/images/sub/ethics_ico0208.jpg');} @media (max-width: 1024px){ .ethics__list.type3 .ethics__list-wrap {padding:40px 0 60px 0;} .ethics__list.type3 .tit {margin:0 0 40px 0;} .ethics__list.type3 .tit h3 {font-size:24px; margin:0 0 15px 0;} .ethics__list.type3 .list {margin:0 15px;} .ethics__list.type3 .item {padding:100px 20px 30px; margin:0 15px 15px 0; width:calc(33.3% - 10px);} .ethics__list.type3 .item:nth-child(4n) {margin-right:15px;} .ethics__list.type3 .item:nth-child(3n) {margin-right:0;} .ethics__list.type3 .item::before { width:56px; height:56px; top:20px;} } @media (max-width: 640px){ .ethics__list.type3 .item {padding:80px 20px 20px; margin:0 15px 15px 0; width:calc(50% - 10px);} .ethics__list.type3 .item:nth-child(3n) {margin-right:15px;} .ethics__list.type3 .item:nth-child(2n) {margin-right:0;} .ethics__list.type3 .item::before { width:48px; height:48px; top:20px;} } .ethics__email {margin:60px 0 0 0;} .ethics__email-wrap { margin:0 auto; max-width:1270px; padding:0 15px;} .ethics__email-btn {text-align:center; margin:0 0 80px;} .ethics__email-btn .email__btn {color:#777; margin:0 0 40px 0; font-weight: 300;} .ethics__email-btn .email__btn em {color:#0099dd; font-weight: 400; font-style: normal;} .ethics__email-btn .ethics__btn .btn {display: inline-block; width: 280px; height: 60px; color: #fff; background-color: #062d44; line-height: 60px; cursor: pointer; padding: 0 20px; text-align: left; border:0;} .ethics__email-btn .ethics__btn .btn:nth-child(2) {background-color:#0099dd; margin:0 0 0 15px;} .ethics__email-btn .ethics__btn .btn i {float:right;} .ethics__email-btn .ethics__btn .btn i img {vertical-align: 0;} .ethics__list.type4 {border-top:1px solid #e2e2e2; padding:40px 20px 0;} .ethics__list.type4 .item {position: relative; color:#777; font-size:16px; font-weight: 300; margin:0 0 15px 0; padding:0 0 0 10px; line-height: 1.5;} .ethics__list.type4 .item::before {content:''; display: block; width:4px; height:4px; background-color:#777; border-radius: 50%; position: absolute; left:0; top:10px;} @media (max-width: 1024px){ .ethics__email {margin:40px 0 0 0;} .ethics__email-wrap { padding:0 15px; margin:0 15px;} .ethics__email-btn { margin:0 0 40px;} .ethics__email-btn .email__btn {margin:0 0 20px 0;} .ethics__email-btn .ethics__btn .btn { width: 240px; height: 40px; line-height: 40px; padding: 0 10px;} .ethics__email-btn .ethics__btn .btn:nth-child(2) { margin:0 0 0 10px;} .ethics__email-btn .ethics__btn .btn i img {width:15px;} .ethics__list.type4 {padding:30px 15px 0;} .ethics__list.type4 .item {font-size:13px; margin:0 0 15px 0; padding:0 0 0 10px;} .ethics__list.type4 .item::before { top:8px;} } @media (max-width: 640px){ .ethics__email-btn .ethics__btn .btn { width: 100%;} .ethics__email-btn .ethics__btn .btn:nth-child(2) { margin:10px 0 0 0px;} } /* 국내 실적 수정 20230406*/ #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point{position:absolute;} #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint01 { top: 268px; left: 342px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint01 { top: 134px; left: 171px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint02 { top: 96px; left: 270px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint02 { top: 48px; left: 135px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint03 { top: 404px; left: 330px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint03 { top: 202px; left: 165px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint04 { top: 438px; left: 202px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint04 { top: 219px; left: 101px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint05 { top: 186px; left: 76px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint05 { top: 93px; left: 38px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint06 { top: 30px; left: 236px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint06 { top: 15px; left: 118px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint07 { top: 564px; left: 108px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint07 { top: 282px; left: 54px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint08 { top: 136px; left: 268px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint08 { top: 68px; left: 134px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint09 { top: 172px; left: 49px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint09 { top: 86px; left: 24px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint10 { top: 168px; left: 56px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint10 { top: 84px; left: 28px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint11 { top: 34px; left: 242px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint11 { top: 17px; left: 121px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint12 { top: 586px; left: 100px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint12 { top: 293px; left: 50px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint13 { top: 570px; left: 104px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint13 { top: 285px; left: 52px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint14 { top: 468px; left: 70px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint14 { top: 234px; left: 35px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint15 { top: 414px; left: 28px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint15 { top: 207px; left: 14px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint16 { top: 412px; left: 36px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint16 { top: 206px; left: 18px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint17 { top: 434px; left: 100px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint17 { top: 217px; left: 50px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint18 { top: 394px; left: 220px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint18 { top: 197px; left: 110px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint19 { top: 480px; left: 170px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint19 { top: 240px; left: 85px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint20 { top: 254px; left: 46px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint20 { top: 127px; left: 23px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint21 { top: 160px; left: 288px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint21 { top: 80px; left: 144px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint22 { top: 158px; left: 296px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint22 { top: 79px; left: 148px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint23 { top: 356px; left: 338px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint23 { top: 178px; left: 169px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint24 { top: 318px; left: 340px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint24 { top: 159px; left: 170px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint25 { top: 104px; left: 274px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint25 { top: 52px; left: 137px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint26 { top: 174px; left: 292px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint26 { top: 87px; left: 146px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint27 { top: 422px; left: 32px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint27 { top: 211px; left: 16px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint28 { top: 152px; left: 290px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint28 { top: 76px; left: 145px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint29 { top: 410px; left: 44px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint29 { top: 205px; left: 22px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint30 { top: 420px; left: 42px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint30 { top: 210px; left: 21px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint31 { top: 320px; left: 56px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint31 { top: 160px; left: 28px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint32 { top: 152px; left: 300px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint32 { top: 76px; left: 150px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint33 { top: 192px; left: 310px;} @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--korea .map__img__point.newpoint33 { top: 96px; left: 155px; } } /*해외 실적추가 20230407*/ #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point10 { position: absolute; top: 220px; left: 860px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point10 { position: absolute; top: 60px; left: 248px; } } #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point11 { position: absolute; top: 280px; left: 764px; } @media (max-width: 1024px) { #container.sub_page .performance .performance__map .performance__map__in .map__img.map--overseas .map__img__point.point11 { position: absolute; top: 76px; left: 218px; } } @media (max-width: 1024px) { #container.sub_page .greeting .greeting__ceo .greeting__ceo__face {bottom: -19px;} }