@charset "utf-8";

/* main_layer_popup */
.main_layer_popup{display:none; z-index:90; position:fixed; left:10%; top:80px; width:80%; background-color:#fff;}
.main_layer_popup .popup_cont{overflow-y:auto; width:100%; max-height:340px; background-color:#ccc;}
.main_layer_popup .popup_cont a{display:block;}
.main_layer_popup .popup_cont img{width:100%;}
.main_layer_popup .popup_cont .pop_tit{height: 60px; margin: -1px -1px 0; background: url(/resources/images/kr/main/bg_popup_custom.jpg) 50% 50% no-repeat; background-size: cover; font-size: 23px; color: #fff; text-align: center; line-height: 60px;}
.main_layer_popup .popup_cont .cont_custom{padding: 18px 15px; background: #fff; border-bottom: 1px solid #ccc;} 
.main_layer_popup .popup_cont .cont_custom .desc{margin-bottom: 20px; padding: 16px 25px; background: #f3f3f3;}
.main_layer_popup .popup_cont .cont_custom .desc ul{} 
.main_layer_popup .popup_cont .cont_custom .desc li{padding-left: 35px; font-size: 14px; line-height: 1.556em; color: #043280; text-indent: -35px;}
.main_layer_popup .popup_cont .cont_custom .item {margin-bottom: 18px; padding-bottom: 20px; border-bottom: 1px solid #ccc;}
.main_layer_popup .popup_cont .cont_custom .item:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: 0;}
.main_layer_popup .popup_cont .cont_custom .item em{display: block; margin-bottom: 2px; font-size: 14px; font-weight: bold;}
.main_layer_popup .popup_cont .cont_custom .item em:before{display: inline-block; vertical-align: middle; width: 2px; height: 2px; margin-right: 3px; background: #333; content: '';}
.main_layer_popup .popup_cont .cont_custom .item p{font-size: 14px;}
.main_layer_popup .popup_cont .cont_custom .item p span{display: inline-block; padding-left: 25px;} 
.main_layer_popup .popup_cont .cont_custom .item .btn{width: 157px; margin-top: 12px; font-size: 12px;}
.main_layer_popup .popup_btm{overflow:hidden;padding:10px;height:40px;box-sizing:border-box;}
.main_layer_popup .popup_btm .chk_today{float:left;font-size:12px;color:#333;}
.main_layer_popup .popup_btm .chk_today input[type="checkbox"]{width:14px;height:14px;line-height:14px;vertical-align:middle;}
.main_layer_popup .popup_btm .chk_today label{margin-left:10px;height:20px;line-height:20px;vertical-align:middle;}
.main_layer_popup .popup_btm .popup_close{float:right;}
.main_layer_popup .popup_btm .popup_close a{display:block;font-size:12px;color:#333;height:20px;line-height:20px;}
.custom_layer_popup{border: 1px solid #ccc;}
.custom_layer_popup .popup_cont{overflow: inherit; max-height: none;}

/* 2023 메인 리뉴얼 */

/* common */
.main .inner{width:100%; padding:0 17.5px; margin:0 auto; position:relative; box-sizing:border-box;}
.main #content{padding:0;}

/* new_main_visual */
.new_main_visual{position:relative; width:100%; min-height:640px; height:100vh; overflow:hidden;}
.new_main_visual .dim{content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:10; background-color:#000;}
.new_main_visual .visual_slider{width:100%; height:100%;}
.new_main_visual .visual_slider .swiper-slide .bg{background-size:cover; background-position:center; background-repeat:no-repeat; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1;}
.new_main_visual .visual_slider .swiper-slide.slide_1 .bg{background-image:url("/resources/images/kr/main/new_main_visual_bg01.jpg?ver=240319_01")}
.new_main_visual .visual_slider .swiper-slide.slide_2 .bg{background-image:url("/resources/images/kr/main/new_main_visual_bg02.jpg?ver=240130")}
.new_main_visual .visual_slider .swiper-slide.slide_3 .bg{background-image:url("/resources/images/kr/main/new_main_visual_bg03.jpg?ver=240319_01")}
.new_main_visual .visual_slider .swiper-slide.slide_4 .bg{background-image:url("/resources/images/kr/main/new_main_visual_bg04.jpg?ver=240319_01")}
.new_main_visual .visual_slider .swiper-slide.slide_5 .bg{background-image:url("/resources/images/kr/main/new_main_visual_bg05.jpg?ver=240226")}
.new_main_visual .visual_slider .swiper-slide .inner{padding:160px 40px 0; height:100%; display:flex; align-items:start; box-sizing:border-box;}
.new_main_visual .visual_slider .swiper-slide .inner .txt_box strong{transform:translateY(50%); opacity:0; transition:0.8s; display:block; font-size:29px; color:#fff; letter-spacing:-0.05em; font-weight:600; line-height:1.3; word-break:keep-all;}
.new_main_visual .visual_slider .swiper-slide .inner .txt_box a{transform:translateY(100%); opacity:0; transition:0.8s 0.1s; display:inline-block; vertical-align:top; margin-top:20px; min-width:130px; padding:13px 30px; font-size:14px; color:#000; letter-spacing:0em; font-weight:600; background-color:#fff; border-radius:99px; box-sizing:border-box; text-align:center;}
.new_main_visual .visual_slider .swiper-slide.active .inner .txt_box strong{transform:translateY(0); opacity:1;}
.new_main_visual .visual_slider .swiper-slide.active .inner .txt_box p{transform:translateY(0); opacity:1;}
.new_main_visual .visual_slider .swiper-slide.active .inner .txt_box a{transform:translateY(0); opacity:1;}
.new_main_visual .bot_wrap{position:absolute; left:0; bottom:60px; width:100%; z-index:1;}
.new_main_visual .bot_wrap .inner{text-align:center;}
.new_main_visual .bot_wrap .controller{max-width:100%; display:inline-block; vertical-align:top; position:relative; padding-right:20px; box-sizing:border-box;}
.new_main_visual .bot_wrap .controller .pagination{width:100%; display:flex; align-items:start;}
.new_main_visual .bot_wrap .controller .pagination .swiper-pagination-bullet{width:70px; padding:20px 0; height:auto; margin-right:8px; background:transparent; border-radius:0; opacity:1;}
.new_main_visual .bot_wrap .controller .pagination .swiper-pagination-bullet:last-child{margin-right:0;}
.new_main_visual .bot_wrap .controller .pagination .swiper-pagination-bullet .rail{width:100%; height:3px; background:rgba(255,255,255,0.3); position:relative;}
.new_main_visual .bot_wrap .controller .pagination .swiper-pagination-bullet .rail .fill{width:0; height:100%; background:#fff;}
.new_main_visual .bot_wrap .controller .pagination .swiper-pagination-bullet .txt{display:none;}
.new_main_visual .bot_wrap .controller .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .txt{opacity:1;}
.new_main_visual .bot_wrap .controller .move_btn{width:30px; height:40px; position:absolute; right:-10px; top:50%; transform:translateY(-50%);}
.new_main_visual .bot_wrap .controller .move_btn a{width:100%; height:100%; display:block; position:relative;}
.new_main_visual .bot_wrap .controller .move_btn a:before{content:""; width:10px; height:16px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.new_main_visual .bot_wrap .controller .move_btn a.pause:before{background:url("/resources/images/kr/main/new_main_visual_stop_icon.svg")no-repeat center / cover;}
.new_main_visual .bot_wrap .controller .move_btn a.play:before{background:url("/resources/images/kr/main/new_main_visual_play_icon.svg")no-repeat center / cover;}

/* new_contents_sec */
.new_contents_sec{background-color:#fff; margin:60px 0 100px;}
.new_contents_sec .top .txt_area{text-align:center;}
.new_contents_sec .top .txt_area h2{font-size:30px; color:#000; letter-spacing:-0.03em; font-weight:600;}
.new_contents_sec .top .txt_area p{font-size:18px; color:#888; letter-spacing:-0.03em; font-weight:300; margin-top:20px; line-height:1.4;}
.new_contents_sec .top .txt_area p b{font-weight:600; color:#333;}
.new_contents_sec .top .txt_area ul{text-align:center; font-size:0; margin:-3px;}
.new_contents_sec .top .txt_area ul li{display:inline-block; vertical-align:top; margin:3px;}
.new_contents_sec .top .txt_area ul li a{display:inline-block; vertical-align:top; padding:6px 10px 6px 20px; border:1px solid #ccc; font-size:14px; color:#000; letter-spacing:-0.03em; font-weight:bold; position:relative; border-radius:90px;}
.new_contents_sec .top .txt_area ul li a:before{content:"#"; position:absolute; left:10px; top:6px;}
.new_contents_sec .list{margin-top:30px;}
.new_contents_sec .list ul li{width:100%; height:210px; position:relative;}
.new_contents_sec .list ul li + li{margin-top:20px;}
.new_contents_sec .list ul li a{display:block; width:100%; height:100%; position:relative; border-radius:10px; overflow:hidden; z-index:1;}
.new_contents_sec .list ul li a img{width:100%; height:auto; min-height:210px; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:-1; transition:0.4s;}
.new_contents_sec .list ul li a div{position:absolute; left:0; bottom:0; z-index:-1; width:100%; height:70px; padding:10px 20px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.new_contents_sec .list ul li a div p{width:100%; font-size:17px; color:#fff; letter-spacing:-0.03em; font-weight:600; text-align:center; word-break:break-all; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.new_contents_sec div.bg01{background-color:rgba(118,122,195,0.9); backdrop-filter: blur(5px);}
.new_contents_sec div.bg02{background-color:rgba(49,24,123,0.7); backdrop-filter: blur(5px);}
.new_contents_sec div.bg03{background-color:rgba(148,137,110,0.7); backdrop-filter: blur(5px);}
.new_contents_sec div.bg04{background-color:rgba(243,170,24,0.7); backdrop-filter: blur(5px);}
.new_contents_sec .top[data-motion] .txt_area{transform:translateY(20%); opacity:0; transition:0.8s;}
.new_contents_sec .top[data-motion].active .txt_area{transform:translateY(0); opacity:1;}
.new_contents_sec .list li[data-motion] a{transform:translateY(20%); opacity:0; transition:0.8s;}
.new_contents_sec .list li[data-motion].active a{transform:translateY(0); opacity:1;}

/* new_product_sec */
.new_product_sec{background-color:#ECEFF5; padding:60px 0 100px;}
.new_product_sec h2{font-size:30px; margin:0 0 30px; letter-spacing:-0.03em; font-weight:600; text-align:center; color:#000;}
.new_product_sec .search_area{background-color:#fff; position:relative; width:100%; height:50px; margin:0 auto; border-radius:70px;}
.new_product_sec .search_area .search_txt{font-size:14px; border-radius:70px; padding:0 60px 0 20px; box-sizing:border-box; width:100%; height:100%; border:none; background-color:#fff; font-size:16px;}
.new_product_sec .search_area .search_txt::placeholder{font-size:14px; font-weight:600; color:#222; letter-spacing:-0.06em;}
.new_product_sec .search_area .btn_search{text-indent:-9999px; font-size:0; position:absolute; top:0; right:0; padding-right:15px; width:60px; height:50px; border-radius:0 70px 70px 0; background:url("/resources/images/kr/main/new_product_sec_search_ico.png") no-repeat center / 20px;}
.new_product_sec .product_list{padding-top:30px;}
.new_product_sec .product_list .list_area{font-size:0;}
.new_product_sec .product_list .list_area li{width:100%; height:150px;}
.new_product_sec .product_list .list_area li + li{margin-top:10px;}
.new_product_sec .product_list .list_area li a{display:block; height:100%; border-radius:10px; overflow:hidden; position:relative; background-size:cover; background-repeat:no-repeat; background-position:center;}
.new_product_sec .product_list .list_area li a:focus{outline:2px solid #222;}
.new_product_sec .product_list .list_area li:nth-of-type(1) a{background-image:url("/resources/images/kr/main/new_product_sec_list_area_bg01.jpg")}
.new_product_sec .product_list .list_area li:nth-of-type(2) a{background-image:url("/resources/images/kr/main/new_product_sec_list_area_bg02.jpg")}
.new_product_sec .product_list .list_area li:nth-of-type(3) a{background-image:url("/resources/images/kr/main/new_product_sec_list_area_bg03.jpg")}
.new_product_sec .product_list .list_area li a .txt_area{padding:30px 24px; box-sizing:border-box; display:flex; height:100%; align-items:center;}
.new_product_sec .product_list .list_area li a .txt_area p{font-size:24px; color:#fff; letter-spacing:0em; font-weight:600;}
.new_product_sec .product_list .shortcut_wrap{margin-top:30px;}
.new_product_sec .product_list .shortcut_wrap .shortcut{position:relative; display:block; width:100%; height:84px; border-radius:10px; overflow:hidden; padding:20px; box-sizing:border-box; background-color:#fff;}
.new_product_sec .product_list .shortcut_wrap .shortcut + .shortcut{margin-top:10px;}
.new_product_sec .product_list .shortcut_wrap .shortcut:after{content:''; display:block; width:20px; height:20px; background:url("/resources/images/kr/main/new_product_sec_shortcut_icon_off.png") no-repeat center / cover; position:absolute; right:15px; top:30px;}
.new_product_sec .product_list .shortcut_wrap .shortcut dt{font-size:19px; color:#000; font-weight:600; letter-spacing:-0.04em;}
.new_product_sec .product_list .shortcut_wrap .shortcut dd{font-size:12px; color:#666; letter-spacing:-0.01em; margin-top:12px;}
.new_product_sec[data-motion] h2{transform:translateY(80%); opacity:0; transition:0.8s;}
.new_product_sec[data-motion] .search_area{transform:translateY(80%); opacity:0; transition:0.8s 0.1s;}
.new_product_sec[data-motion].active h2{transform:translateY(0); opacity:1;}
.new_product_sec[data-motion].active .search_area{transform:translateY(0); opacity:1;}
.new_product_sec .product_list ul li[data-motion] a{transform:translateY(30%); opacity:0; transition:0.8s;}
.new_product_sec .product_list ul li[data-motion].active a{transform:translateY(0); opacity:1;}
.new_product_sec .product_list .shortcut_wrap[data-motion] a{transform:translateY(60%); opacity:0; transition:0.8s;}
.new_product_sec .product_list .shortcut_wrap[data-motion] a:last-child{transition-delay:0.1s;}
.new_product_sec .product_list .shortcut_wrap[data-motion].active a{transform:translateY(0); opacity:1;}

/* new_esg_sec */
.new_esg_sec{background-color:#fff; margin:60px 0 80px;}
.new_esg_sec h2{font-size:30px; margin:0 0 30px; letter-spacing:-0.03em; font-weight:600; text-align:center; color:#000;}
.new_esg_sec ul{}
.new_esg_sec ul li{border-radius:10px; height:150px;}
.new_esg_sec ul li + li{margin-top:20px;}
.new_esg_sec ul li a:before{content:""; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1; transition:0.4s;}
.new_esg_sec ul li:nth-of-type(1) a:before{background:url("/resources/images/kr/main/new_esg_sec_bg01.jpg")no-repeat center / cover;}
.new_esg_sec ul li:nth-of-type(2) a:before{background:url("/resources/images/kr/main/new_esg_sec_bg02.jpg")no-repeat center / cover;}
.new_esg_sec ul li:nth-of-type(3) a:before{background:url("/resources/images/kr/main/new_esg_sec_bg03.jpg")no-repeat center / cover;}
.new_esg_sec ul li a{display:flex; align-items:center; justify-content:center; width:100%; height:100%; position:relative; box-sizing:border-box; border-radius:10px; overflow:hidden; z-index:1;}
.new_esg_sec ul li a span{display:block; font-size:24px; color:#fff; letter-spacing:-0.02em; font-weight:600; text-align:center;}
.new_esg_sec[data-motion] h2{transform:translateY(80%); opacity:0; transition:0.8s;}
.new_esg_sec[data-motion].active h2{transform:translateY(0); opacity:1;}
.new_esg_sec ul li[data-motion] a{transform:translateY(40%); opacity:0; transition:0.8s;}
.new_esg_sec ul li[data-motion].active a{transform:translateY(0); opacity:1;}

/* new_search_sec */
.new_search_sec{margin:80px auto;}
.new_search_sec h3{font-size:24px; margin:0 0 30px; letter-spacing:-0.03em; font-weight:600; text-align:center; color:#000;}
.new_search_sec .search_area{background-color:#f3f3f3; position:relative; width:100%; height:40px; margin:0 auto; border-radius:70px;}
.new_search_sec .search_area .search_txt{font-size:14px; border-radius:70px; padding:0 60px 0 20px; box-sizing:border-box; width:100%; height:100%; border:none; background-color:#f3f3f3; font-size:16px; font-weight:600;}
.new_search_sec .search_area .search_txt::placeholder{font-size:14px; font-weight:600; color:#222;}
.new_search_sec .search_area .btn_search{text-indent:-9999px; font-size:0; position:absolute; top:0; right:0; padding-right:20px; width:60px; height:40px; border-radius:0 70px 70px 0; background:url("/resources/images/kr/main/new_search_sec_search_ico.svg") no-repeat center / 20px;}
.new_search_sec .tag_area{width:100%; margin:30px auto 0; padding:0 10px; box-sizing:border-box;}
.new_search_sec .tag_area ul{font-size:0; text-align:center;}
.new_search_sec .tag_area ul li{display:inline-block; vertical-align:top; margin:4px;}
.new_search_sec .tag_area ul li a{border:1px solid #ccc; border-radius:99px; overflow:hidden; display:block; font-size:12px; color:#666; letter-spacing:0em; font-weight:300; padding:3px 25px; box-sizing:border-box; white-space:nowrap;}
.new_search_sec .tag_area ul li a:before{content:"#"; display:inline-block; vertical-align:middle; margin:-4px 3px 0 0;}
.new_search_sec[data-motion] h3{transform:translateY(80%); opacity:0; transition:0.8s;}
.new_search_sec[data-motion] .search_area{transform:translateY(80%); opacity:0; transition:0.8s 0.1s;}
.new_search_sec[data-motion] .tag_area{transform:translateY(80%); opacity:0; transition:0.8s 0.2s;}
.new_search_sec[data-motion].active h3{transform:translateY(0); opacity:1;}
.new_search_sec[data-motion].active .search_area{transform:translateY(0); opacity:1;}
.new_search_sec[data-motion].active .tag_area{transform:translateY(0); opacity:1;}