/* =================================== 회사소개 */
.introduction { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; background: #ffffff; padding-top: 0; }
.introduction .contents_wrap { height: 100%; }
.introduction .contents_wrap .tab_nav { height: 100%; }
.introduction .contents_wrap .tab_nav a { color: #000000; }
.introduction .contents_wrap .tab_nav .tabnav { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.introduction .contents_wrap .tab_nav .tabnav li { margin-right: 2rem; }
.introduction .contents_wrap .tab_nav .tabnav li a { position: relative; display: block; width: max-content; height: 50px; line-height: 50px; padding: 0 2.5rem; border-radius: 50rem; font-size: 1.8rem; font-weight: 700; background: #f7f7f7; }
.introduction .contents_wrap .tab_nav .tabnav li:hover a { color: #ffffff; background: #354cda; transition: 0.3s; }
.introduction .contents_wrap .tab_nav .tabnav li a.active { color: #ffffff; background: #354cda; }

.introduction .contents_wrap .tab_nav .tabcontent { margin-top: 6rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner { height: 100%; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner { margin-top: 6rem; font-size: 1.8rem; }




/* =================================== 콜게이트 소개 */
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .intro_box { position: relative; top: 4rem; left: -300px; width: 2000px; height: auto; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .intro_box video { object-fit: scale-down; object-position: center; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .intro_box .intro_text { position: absolute; top: 50%; left: 15%; color: #ffffff; }

.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul { display: grid; grid-template-columns: 30% minmax(0, auto); padding: 4rem 0; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_left { flex: 0 0 50%; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right { flex: 0 0 50%; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right .inner_img { width: 100%; height: 300px; background: #eeeeee; margin-bottom: 2rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right p { margin-bottom: 2rem; text-align: justify; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right .inner_download { display: flex; gap: 2rem; margin-top: 2rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right .inner_download a { display: inline-block; width: 200px; height: 55px; line-height: 55px; text-align: center; border: 1px solid #757575; font-size: 1.6rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right .inner_download a:hover { background: #354cda; color: #ffffff; transition: 0.3s; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right .inner_download a i { margin-left: 1rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right dl { line-height: 2; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right dl dd { position: relative; margin-left: 2rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul li.inner_right dl dd::before { position: absolute; content: ''; top: 10px; left: -2rem; background: #000000; width: 5px; height: 5px; border-radius: 100%; }

.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_ideology ul li:first-child,
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li:first-child { font-size: 3rem; font-weight: 700; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul { border-top: 2px solid #222222; border-bottom: none; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl { display: grid; grid-template-columns: 25% minmax(0, auto); padding: 3rem 0; border-bottom: 1px solid #eeeeee; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl:first-child { padding-top: 0; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl:last-child { border-bottom: none; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dt { font-weight: 700; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dd br.mo { display: none; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dd span { display: inline-block; margin: 0 1rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dd.list { line-height: 2; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dd.list ol { position: relative; margin-left: 2rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dd.list ol::before { position: absolute; content: ''; width: 5px; height: 5px; background: #757575; top: 13px; left: -2rem; border-radius: 100%; }

.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .icon_wrap { position: relative; width: 100%; height: 200px; background: #f9f9f9; border-radius: 2rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .icon_wrap .icon { position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 10rem; height: 10rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .icon_wrap .icon.partnership { background: url(../images/ic_company_inquire_01.png) no-repeat center; background-size: contain; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .icon_wrap .icon.intro { background: url(../images/ic_company_inquire_02.png) no-repeat center; background-size: contain;}
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .icon_wrap .icon.marketing { background: url(../images/ic_company_inquire_03.png) no-repeat center; background-size: contain; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .txt_wrap { margin-top: 2rem; text-align: center; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .txt_wrap .contact_tit { font-weight: 700; font-size: 2rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .txt_wrap .contact_btn { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; } 
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .txt_wrap .contact_btn .point_circle { position: relative; width: 3rem; height: 3rem; background: #eeeeee; border-radius: 50%; overflow: hidden; } 
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .txt_wrap .contact_btn .point_circle .uil_icon { display: block; position: relative; font-size: 1.8rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .txt_wrap .contact_btn:hover .point_circle { background: #354cda; transition: 0.3s; } 
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li .txt_wrap .contact_btn:hover .point_circle .uil_icon { color: #ffffff; } 




/* =================================== 콜게이트 비전 */
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_box { height: 300px; min-height: 300px; padding: 4rem; flex: 1; border-radius: 2rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_box .box_wrap p { position: relative; display: inline-block; font-weight: 700; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_box .box_wrap p:after { position: absolute; content: ''; left: 0; bottom: -5px; width: 100%; height: 2px; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_box.mission .box_wrap p:after { background: #000000; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_box.vision .box_wrap p:after { background: #ffffff; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_box.purpose .box_wrap p:after { background: #ffffff; }

.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_top { display: flex; justify-content: space-between; gap: 4rem; margin-bottom: 4rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_top .inner_box.mission { background: #eeeeee; color: #000000; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_top .inner_box.vision { background: #354cda; color: #ffffff; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_top .inner_box .box_wrap { position: relative; height: 100%; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_top .inner_box .box_wrap h4 { position: absolute; bottom: 0; left: 0; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_bottom { width: 100%; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_bottom .inner_box.purpose { display: table; width: 100%; background: #222222; color: #ffffff; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_bottom .inner_box.purpose .box_wrap { display: table-cell; vertical-align: middle; text-align: center; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_bottom .inner_box.purpose .box_wrap p { margin-bottom: 2rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; margin-top: 2rem; padding: 0; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list { display: table; width: 100%; vertical-align: middle; padding: 4rem 3rem; background-color: #f9f9f9; border-radius: 2rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list .list_wrap { display: table-cell; text-align: center; margin: 0 auto; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list .list_wrap .value_img { display: inline-block; width: 10rem; height: 10rem; margin-bottom: 3rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list .list_wrap .value_img.energy { background: url(../images/ic_company_value_01.png) no-repeat center; background-size: contain; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list .list_wrap .value_img.professional { background: url(../images/ic_company_value_02.png) no-repeat center; background-size: contain; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list .list_wrap .value_img.warrior { background: url(../images/ic_company_value_03.png) no-repeat center; background-size: contain; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list .list_wrap .value_img.supporter { background: url(../images/ic_company_value_04.png) no-repeat center; background-size: contain; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list .list_wrap .value_txt p { margin-bottom: 2rem; font-size: 2rem; font-weight: 700; }




/* =================================== 연혁 */
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .que { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 3rem 0; border: none; text-align: left; outline: none; transition: 0.4s; font-weight: 500; border-bottom: 1px solid #cccccc; background-color: #ffffff; cursor: pointer; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .que:hover { color: #354cda; transition: 0.3s; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .que i { font-size: 3rem; transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .que.on i { transform: rotate(180deg); transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .que:first-child { border-top: 2px solid #222222; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .que:last-child { border-bottom: none; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .que.active, 
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .que:hover { background-color: #ffffff; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw { display: none; padding: 5rem 0; overflow: hidden; min-height: 100vh; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list { display: flex; align-items: flex-start; padding: 5rem 0; border-bottom: 1px solid #cccccc; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list:last-child { padding-bottom: 0; border-bottom: none; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list:first-child { padding-top: 0; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list h4 { line-height: 1; flex: 0 0 20%; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list ul { display: block; flex: 0 0 80%; padding: 0; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list ul li { display: flex; align-items: flex-start; line-height: 2; margin-bottom: 3rem; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list ul li:last-child { margin-bottom: 0; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list ul li p { flex: 0 0 10%; font-weight: 700; color: #354cda; }
.introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list ul li dl { flex: 0 0 90%; }




/* ============================ media queries ============================ */
@media (max-width: 1920px){
}

@media (max-width: 1700px){
}

@media (max-width: 1200px){
    .introduction .contents_wrap .tab_nav .tabcontent { margin-top: 6rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner ul { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_ideology ul li:first-child,
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li:first-child { margin-bottom: 2rem; font-size: 2.5rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_ideology ul li:last-child { padding: 3rem 0 0 0; border-top: 2px solid #222222; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul { border-top: none; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl:first-child { padding-top: 3rem; border-top: 2px solid #222222; }
}

@media (max-width: 991px){
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner h3 br { display: none; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner h4 { font-size: 2.5rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .intro_box { height: 300px; padding: 3rem; margin-top: -5rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul { padding-bottom: 0; border-top: none; border-bottom: 1px solid #eeeeee; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl { grid-template-columns: 1fr; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dt { margin-bottom: 1rem; font-size: 2rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dd.list ol { line-height: 1.7; margin-bottom: 1rem; margin-left: 1.6rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dd.list ol::before { top: 10px; left: -1.6rem; }

    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_top { display: block; margin-bottom: 4rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_top .inner_box.mission { margin-bottom: 4rem; }

    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list .list_wrap .value_txt span br { display: block; }

    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw { padding: 3rem 0; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list { display: block; padding: 3rem 0; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list h4 { margin-bottom: 2rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .accordion_wrap .anw .history_list ul li { margin-bottom: 2rem; }
}

@media (max-width: 768px){
    .introduction .contents_wrap .tab_nav .tabnav { clear: both; white-space: nowrap; overflow-y: hidden; overflow-x: auto; }
    .introduction .contents_wrap .tab_nav .tabnav li { display: inline-block; margin-right: 1rem; }
    .introduction .contents_wrap .tab_nav .tabnav li:last-child { margin-right: 0; }
}

@media (max-width: 683px){
    .introduction { padding-top: 10%; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .intro_box { overflow: hidden; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .intro_box video { width: 1000px; height: 350px; object-fit: contain; border-radius: 1rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .intro_box .intro_text { position: relative; margin-top: 2rem; color: #000000; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .intro_box .intro_text h4 { line-height: 1.6; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_box { height: 250px; min-height: 250px; }
}

@media (max-width: 450px){
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .intro_box video { height: 300px; }
    
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_ideology ul li:last-child { padding: 2rem 0; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dd br.mo { display: block; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl dd span { display: none; }
    
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li a .icon { width: 9rem; height: 9rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li a .contact_btn { width: 110px; height: 40px; line-height: 40px; }

    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_box { height: 200px; min-height: 200px; }
}

@media (max-width: 290px){
    .introduction .contents_wrap .tab_nav .tabnav li a { height: 40px; line-height: 40px; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .company_spec ul li dl { display: block; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .contact ul li { padding: 3rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .inner_box { padding: 3rem; }
    .introduction .contents_wrap .tab_nav .tabcontent .tab_inner .item_inner .value .value_list { padding: 3rem; }
}